第四讲MATLAB图形界面设计ppt课件

MATLAB的GUI程序设计可以用两种方式实现，一种是借助GUI开发工具GUIDE，一种是利用m文件代码构建界面。采用GUIDE进行设计的方法直观方便，容易上手。本章主要介绍利用GUIDE方法进行设计的步骤。,第4讲MATLAB图形界面设计,1,4.1GUI设计工具Guide简介,MATLAB提供了用户图形界面开发程序GUIDE，支持可视化编辑。它是一种基于事件或者说是事件驱动的程序（eventdriven），类似于方便易用的VisualBasic。,2,4.1.1GUIDE的启动,可以如下不同方式启动GUIDE：1.在命令窗口提示符下输入guide；2.在工具栏选打开；3.在Start菜单中选MATLAB；4.MATLABFile菜单中选NewGUI。,3,空白界面,有控件的模板界面,有轴对象和菜单的模板界面,标准询问窗口,4,4.1.2GUI界面的创建,用户创建新的GUI，也可打开已有的GUI。创建界面时还可在模板基础上进行，在选择GUI模板时，启动界面右侧提供了预览。,以“GUIwithaxesandmenu”模板创建的GUI初始界面。,5,GUIDE工具栏上的工具按钮,6,对象浏览器(ObjectBrowser)用于获得当前Matlab图形用户界面程序中的全部对象信息，对象的类型，同时显示控件的名称和标识，在控件上双击鼠标可以打开该控件的属性编辑器；,布局编辑器(LayoutEdtor)在图形窗口中创建及布置图形对象。布局编辑器是可以启动用户界面的控制面板，上述工具都必须从布局编辑器中访问，用guide命令可以启动，或在启动平台窗口中选择GUIDE来启动布局编辑器；,几何排列工具(AlignmentTool)调整各对象相互之间的几何关系和位置；,属性查看器(PropertyInspector)查询并设置属性值;,菜单编辑器(MenuEditor)创建、设计、修改下拉式菜单和快捷菜单；,Tab顺序编辑器（TabOrderEditor）用于设置当用户按下键盘上的Tab键时，对象被选中的先后顺序。,7,用户控件,对象选择按钮，用来选取工作区的控件。单功能按键，按下操作代表一定功能实现。双位按键，代表“开”“关”两种状态。互斥选择按钮，多个选项互斥选择时使用。互容选择按钮，同时选中多个选项时使用。编辑文本框，可以自由输入字符和字符串静态文本框，用于显示注释，不可编辑。滑动块，利用游标滑动，可以获取不同值。控件区域框，用于对控件区域进行标识。列表框，提供多个互容的可供选择选项。弹出框，有多个选项，只能选择其中一项。轴对象，用来显示图形。,8,按钮(PushButtons)：执行某种预定的功能或操作；,开关按钮(ToggleButton)：产生一个动作并指示一个二进制状态（开或关），当鼠点击它时按钮将下陷，并执行callback（回调函数）中指定的内容，再次点击，按钮复原，并再次执行callback中的内容；,单选框(RadioButton)：单个的单选框用来在两种状态之间切换，多个单选框组成一个单选框组时，用户只能在一组状态中选择单一的状态，或称为单选项；,复选框(CheckBoxes)：单个的复选框用来在两种状态之间切换，多个复选框组成一个复选框组时，可使用户在一组状态中作组合式的选择，或称为多选项；,文本编辑器(EditableTexts)：用来使用键盘输入字符串的值，可以对编辑框中的内容进行编辑、删除和替换等操作；,9,静态文本框(StaticTexts):仅用于显示单行的说明文字;,滚动条(Slider)：可输入指定范围的数量值；,边框(Frames)：在图形窗口圈出一块区域；,列表框(ListBoxes)：在其中定义一系列可供选择的字符串；,弹出式菜单(PopupMenus)：让用户从一列菜单项中选择一项作为参数输入；,此外还有坐标轴(Axes)，用于显示图形和图象。,10,修改控件属性,每个控件不可能是完全符合界面设计要求的，需要对其属性进行设置，以获得所需界面显示效果。,可以通过双击该控件，或利用下拉菜单View:PropertyInspector打开控件属性对话框。例如右图是“+”按钮的属性列表。,11,下面对各控件的主要属性进行一下说明。1)双击设计工作区空白部分，打开整个图形窗属性框。MunuBar:none%图形窗是否使用标准菜单Name:caculator%图形窗名称Resize:off%图形窗不能缩放Tag:mainWnd%图形窗的句柄handles.mainWnd2)静态文本编辑框的属性设置。FontSize:15%字体大小FontUnits:points%字体大小的度量单位HorizontalAlignment:Center%对齐方式String:Expression%待显示的字符Tag:text1%静态文本框句柄handles.text1Units:points%文本框度量单位,Units或FontUnits可选择：inches(英寸)，centimeters(厘米)，normalized(按比例缩放)，points(点阵)，pixels(像素)，characters(字符)。如果选择normalized，那么当resize设为on时，控件或字体大小随着整个窗口的缩放而改变。水平对齐方式HorizontalAlignment可以是left,center,right。控件句柄Tag有默认值，建议修改为带有具体含义的字符串，以增加程序可读性和方便回调函数调用。,12,3)可编辑文本框的属性设置。String:0%初始状态下显示数字0Tag:pExp%可编辑文本框的句柄其它和静态文本框相同4)单功能按钮属性设置。以按钮“1”为例String:1Tag:p1其它和静态文本框相同。,13,界面激活保存静态界面后，利用工具栏上的运行按钮激活该界面。激活后可以看到两个同名文件：m和fig。m文件在M文本编辑器中打开，fig文件显示为操作界面，但是无法实现任何功能，需要编写回调函数。精细调整利用对齐工具，排列控件的位置，使控件的大小、位置更加协调。,14,精细调整利用对齐工具，排列控件的位置，使控件的大小、位置更加协调。,15,回调函数,在M文本编辑器中打开m文件，可以看到自动生成的回调函数，该函数的命名利用对象句柄进行区分，没有任何执行语句。回调函数：Tag_Callback(hObject,eventdata,handles)，通过加入自己的处理语句，可以实现所需功能。其中hObject是控件的句柄；eventdata是备用参数，目前没有定义；handles是用户数据，本身是一个结构数组，存放了当前窗口的所有对象的句柄，包括图形窗本身、所有控件和菜单的句柄。并且可以增加一些域用来传递用户数据。利用guidata(H,handles)可以更新H的用户数据。,16,4.2GUI程序设计示例,本节通过示例，演示MATLAB的GUI程序设计。,17,“HelloWorld”程序的设计,下面以一个类似于学习其它程序设计的第一个程序“HelloWorld”为例，讲解GUIDE的有关知识。程序的目标是当按下按钮时，由文本控件显示“HelloWorld”。,18,1.“HelloWorld”程序界面设计2.“HelloWorld”程序的设计3.程序测试运行,19,GUI设计中的界面设计部分比较容易。在窗口上添加一个按钮控件（PushButton）和一个文本控件（StaticText）。可双击控件调出属性编辑器进行其属性设置。,20,21,22,设按钮控件的“String”属性为“问候”，“Tag”属性为“helloBt”，见右图,按钮属性设置,23,设置文本控件的“String”属性为空，表示初始状态下不显示任何信息，“Tag”属性为“helloStr”，为显示清楚，设其“FontSize”属性为“28”。见右图,文本控件属性设置,24,“Tag”属性设置要唯一，因为“Tag”属性是唯一标识控件的。至此，我们的界面设计工作完成。保存时，会生成2个文件，helloworld.fig，helloworld.m。,25,此外可通过ToolsMenuEditor进行类似于Windows程序的菜单设计。编辑窗口见左图，效果见右图。,菜单设计的编辑窗口,菜单效果图,26,利用菜单编辑器可创建、设置、修改下拉式菜单和快捷菜单。选择Tools菜单的MenuEditor.子菜单，可打开菜单编辑器。,菜单编辑器(MenuEditor),菜单可通过编程实现，从GUI设计窗口的工具栏上选择MenuEditor命令按钮，打开菜单编辑程序。,27,菜单编辑器包括菜单的设计和编辑，菜单编辑器有八个快捷键，可以利用它们任意添加或删除菜单，可以设置菜单项的属性，包括名称(Label)、标识(Tag)、选择是否显示分隔线(Separatorabovethisitem)、是否在菜单前加上选中标记(Itemischecked)、调用函数(Callback)。,28,菜单编辑器左上角的第一个按钮用于创建一级菜单项。第二个按钮用于创建一级菜单的子菜单。,29,菜单编辑器左下角有两个按钮，选择第一个按钮可创建下拉式菜单。选择第二个按钮可创建ContextMenu菜单。选择它后，菜单编辑器左上角的第三个按钮就会变成可用，单击它就可以创建ContextMenu主菜单。在选中已经创建的ContextMenu主菜单后，可以单击第二个按钮创建选中的ContextMenu主菜单的子菜单。与下拉式菜单一样，选中创建的某个ContextMenu菜单，菜单编辑器的右边就会显示该菜单的有关属性，可以设置、修改菜单属性。,30,菜单编辑器左上角的第四个与第五个按钮用于对选中的菜单进行左移与右移，第六与第七个按钮用于对选中的菜单进行上移与下移，最右边的按钮用于删除选中的菜单。,31,32,33,按照要求，我们可以给按钮添加动作，即给它编写一个回调函数（Callback）。右键单击按钮，选择ViewCallbacksCallback自动打开helloworld.m文件并指向该回调函数。根据需要为其添加语句。程序将句柄集handles的helloStr（即文本控件）“String”属性设置为“HelloWorld”，即完成了设计要求。,34,35,指向该回调函数！,36,下面这段程序的意思是当点击按钮时，即由程序设置文本控件的“String”属性值为“HelloWorld”。functionhelloBt_Callback(hObject,eventdata,handles)set(handles.helloStr,String,HelloWorld!);,37,38,注意回调函数的概念，它指的是在对象的某一个事件发生时，MATLAB内部机制允许自动调用的函数。其几个参数的意思分别为hObject表示当前窗口的句柄；eventdata表示事件代码，为保留handles是该窗口中的所有句柄的集合。回调函数有的是针对窗口而言的，有的是对具体控件而言的，学会回调函数的编写有助于高效编写MATLABGUI程序。,39,在程序编辑窗口运行测试，或在命令窗口键入程序名称“helloworld”，即可运行。如下图：,40,41,42,43,注意：当不小心将helloworld.fig关掉后，再次编辑需要重新打开。其方法可以通过FileNewGUIOpenExistingGUI来打开。如按照一般理解选择FileOpen项的话，只能打开其运行窗口而不可编辑。,44,例2使用PushButton按钮与静态文本框设计GUI，在窗口中显示单击按钮次数。,(1)在界面上安装一个命令按钮和一个静态文本框,(2)使用对象的属性窗口设置控件的属性,45,打开该GUI的m文件，文件中已经自动生成代码。找到函数functionpushbutton1_Callback(hObject,eventdata,handles)在这个函数名称下面写入如下程序段：,persistentcifisempty(c)c=0endc=c+1;str=sprintf(TotalClicks:%d,c);set(handles.text1,String,str);,保存程序后，单击Click按钮，则在什么的文本框中显示单击次数。,46,例3制作一个简易的加减法计算器。,(1)在界面上安装两个编辑文本框、一个静态文本框与两个命令按钮,(2)使用对象的属性窗口设置控件的属性,47,打开该GUI的m文件ex11.m，在函数pushbutton1_Callback与pushbutton2_Callback中加入代码，如下所示：,functionpushbutton1_Callback(hObject,eventdata,handles)s1=str2double(get(handles.edit1,String)s2=str2double(get(handles.edit2,String)set(handles.text1,String,s1+s2);,functionpushbutton2_Callback(hObject,eventdata,handles)s1=str2double(get(handles.edit1,String)s2=str2double(get(handles.edit2,String)set(handles.text1,String,s1-s2);,48,49,例4使用3个单选钮控制静态文本框的背景颜色。,functionradiobutton1_Callback(hObject,eventdata,handles)set(handles.text1,BackGroundColor,r)functionradiobutton2_Callback(hObject,eventdata,handles)set(handles.text1,BackGroundColor,g)functionradiobutton3_Callback(hObject,eventdata,handles)set(handles.text1,BackGroundColor,b),50,functionslider1_Callback(hObject,eventdata,handles)v=get(handles.slider1,Value);str=sprintf(%.2f,v);set(handles.text1,String,str);,例5使用滚动条。,51,例6制作一个根据密度与体积计算质量的简易计算器。,(1)在界面上布置控件对象。,(2)使用对象的属性窗口设置控件的属性。,52,例7使用程序把基本控件安装在图形窗口上。,h1=uicontrol(style,edit,TooltipString,EditText)h2=uicontrol(style,checkbox,Position,90,20,30,20,TooltipString,Checkbox)h3=uicontrol(style,listbox,Position,150,20,40,20,TooltipString,Listbox)h4=uicontrol(style,pushbutton,Position,210,20,30,20,TooltipString,Pushbutton)h5=uicontrol(style,radiobutton,Position,260,20,30,20,TooltipString,Radiobutton)h6=uicontrol(style,slider,Position,310,20,30,20,TooltipString,Slider)h7=uicontrol(style,text,Position,370,20,30,20,TooltipString,StaticText)h8=uicontrol(style,toggle,Position,430,20,30,20,TooltipString,Togglebutton),上面程序虽然实现了控件的安装，但是，还不能完成具体的功能。如果要完成特定的功能，需要加入其他语句。,53,例8在图形窗口底部安装一个命令按钮、一个可编辑文本框、一个静态文本框。针对命令按钮（pushbutton）编写程序，使程序运行后，点击该命令按钮，便随机绘制出一些折线；同时可编辑文本框背景色变为蓝色，静态文本框背景色变为红色。,h1=uicontrol(style,pushbutton,Position,280,0,50,20)set(h1,String,PUSH,Callback,fun),主程序只创建安装了一个Pushbutton按钮，然后，在set语句中使用Callback属性调用函数fun。,主程序设计如下：,54,functionfunplot(rand(3,5)h2=uicontrol(style,edit,TooltipString,EditText,Position,80,0,30,20)h3=uicontrol(style,text,Position,440,0,30,20,TooltipString,StaticText)set(h2,BackGroundColor,001)set(h3,BackGroundColor,100),函数fun代码如下：,在函数fun中除了绘图之外，还制作了一个EditText、一个StaticText，并且把这两个控件的背景色设置为蓝色001与红色100。,55,56,控制系统典型环节的演示程序,1.程序功能描述2.程序界面设计3.程序代码设计4.程序测试运行,57,1.程序功能描述进行控制系统典型环节的演示，包括了典型环节运行效果的演示与代码的展示。也可以在代码区输入绘制曲线语句并通过点击定制曲线按钮绘制曲线。,58,2.程序界面设计根据程序功能要求，添加不同控件，并设置控件各自的属性。(1)Axes控件作用为显示图形，典型环节的阶跃响应曲线及定制曲线都在此处进行显示。“Tag”属性设为myAxes。(2)Panel控件用来盛放其它控件，这里盛放的是代码区。“Tag”属性设为uipanel。“Title”属性设为空。,59,(3)EditText控件用于输入和显示文本。此处作为代码区，主要作用为展示典型环节的代码、输入用户定制的曲线代码。“Tag”属性设为：strCode。“String”属性设为：Pleaseinputcommandforexample:x=0:0.1:4*pi;y=sin(x);这为用户定制曲线提供了一个例程。,60,(4)StaticText控件作为标识，提示位于其下方的ListBox控件选项是进行典型环节演示。“Tag”属性设为txtDemo，“String”属性设为典型环节演示。(5)ListBox控件类似于一组复选框，用户可从中选择不同选项。“Tag”属性设为：lstBox“String”属性设为：比例环节惯性环节比例微分环节比例积分环节,表示此列表共有4项内容即4个典型环节可选。,61,(6)PushButton控件表现为一个按钮。本例中使用了两个此控件。一个用于定制曲线的绘制。用户在代码区输入绘制曲线语句后，点击此按钮进行曲线绘制。“Tag”属性设为btnDraw，“String”属性设为定制曲线，“TooltipString”属性设为在代码区中输入曲线参数，绘制任意曲线。这样当用户将光标置于按钮上时，会有相应提示信息。一个用于关闭运行窗口。“Tag”属性设为btnClose，“String”属性设为关闭，“TooltipString”属性设为关闭窗口。,62,设定完成的界面草图如图,63,至此，本例所需的控件已设置完毕。在最初按照草图添加部署了所有的控件后，往往不会排列得很整齐。此时可根据需要进行控件的排列。,64,要将位于窗口右侧的4个控件竖排整齐，则可在窗口选ToolAlignObjects弹出的窗口中进行选择。,65,3.程序代码设计根据要求，在选择典型环节时需要设置回调函数。此外，对两个按钮控件也要设置回调函数。回调函数的生成在前一个例子已讲过，这里不重复。这里只给出相应的代码段供参考。,66,(1)定制曲线按钮的回调函数functionbtnDraw_Callback(hObject,eventdata,handles)trystr=char(get(handles.strCode,String);%将在代码区输入的代码转换成数组str0=;forii=1:size(str,1)%对str的每行操作str0=str0,deblank(str(ii,:);%将str第ii行去掉空格后作为向量str0的一个元素endend,67,eval(str0);%执行代码axes(handles.myAxes);%将myAxes设为当前坐标系plot(x,y);%绘制曲线catcherrordlg(请重新检查输入数据!);%如有数据错误，捕获并给出提示end,68,(2)典型环节列表框的回调函数functionlstBox_Callback(hObject,eventdata,handles)v=get(handles.lstBox,value);%取出所选项的值%对不同选项进行对应环节曲线的绘制和代码的展示switchvcase1,%比例环节str1=nump=3;denp=1;%绘制比例环节曲线代码str2=t=0:0.1:10;str3=y,t,x=step(nump,denp,t);%将代码作为数组赋值给代码