第四讲MATLAB图形界面设计

单击此处编辑母版标题样式,*,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,MATLAB,的,GUI,程序设计可以用两种方式实现，一种是借助,GUI,开发工具,GUIDE,，一种是利用,m,文件代码构建界面。采用,GUIDE,进行设计的方法直观方便，容易上手。,本章主要介绍利用,GUIDE,方法进行设计的步骤。,第,4,讲,MATLAB,图形界面设计,4.1 GUI,设计工具,Guide,简介,MATLAB,提供了用户图形界面开发程序,GUIDE,，支持可视化编辑。,它是一种基于事件或者说是事件驱动的程序（,event driven,），类似于方便易用的,Visual Basic,。,4.1.1 GUIDE,的启动,可以如下不同方式启动,GUIDE,：,1.,在命令窗口提示符下输入,guide,；,2.,在工具栏选打开；,3.,在,Start,菜单中选,MATLAB ,；,4. MATLAB File,菜单中选,New GUI,。,空白界面,有控件的模板界面,有轴对象和菜单的模板界面,标准询问窗口,4.1.2 GUI,界面的创建,用户,创建,新的,GUI,，也可,打开,已有的,GUI,。创建界面时还可在模板基础上进行，在选择,GUI,模板时，启动界面右侧提供了预览。,以,“,GUI with axes and menu,”,模板创建的,GUI,初始界面,。,GUIDE,工具栏上的工具按钮,对象浏览器,(Object Browser),用于获得当前,Matlab,图形用户界面程序中的全部对象信息，对象的类型，同时显示控件的名称和标识，在控件上双击鼠标可以打开该控件的属性编辑器；,布局编辑器,(Layout,Edtor,),在图形窗口中创建及布置图形对象。布局编辑器是可以启动用户界面的控制面板，上述工具都必须从布局编辑器中访问，,用,guide,命令可以启动，或在启动平台窗口中选择,GUIDE,来启动布局编辑器；,几何排列工具,(Alignment Tool),调整各对象相互之间的几何关系和位置；,属性查看器,(Property Inspector),查询并设置属性值,;,菜单编辑器,(Menu Editor),创建、设计、修改下拉式菜单和快捷菜单；,Tab,顺序编辑器,（,Tab Order Editor,）,用于设置当用户按下键盘上的,Tab,键时，对象被选中的先后顺序。,用户控件,对象选择按钮,，用来选取工作区的控件。,单功能按键,，按下操作代表一定功能实现。,双位按键,，代表“开”“关”两种状态。,互斥选择按钮,，多个选项互斥选择时使用。,互容选择按钮,，同时选中多个选项时使用。,编辑文本框,，可以自由输入字符和字符串,静态文本框,，用于显示注释，不可编辑。,滑动块,，利用游标滑动，可以获取不同值。,控件区域框,，用于对控件区域进行标识。,列表框,，提供多个互容的可供选择选项。,弹出框,，有多个选项，只能选择其中一项。,轴对象,，用来显示图形。,按钮,(Push Buttons),：,执行某种预定的功能或操作；,开关按钮,(Toggle Button),：,产生一个动作并指示一个二进制状态（开或关），当鼠点击它时按钮将下陷，并执行,callback,（回调函数）中指定的内容，再次点击，按钮复原，并再次执行,callback,中的内容；,单选框,(Radio Button),：,单个的单选框用来在两种状态之间切换，多个单选框组成一个单选框组时，用户只能在一组状态中选择单一的状态，或称为单选项；,复选框,(Check Boxes),：,单个的复选框用来在两种状态之间切换，多个复选框组成一个复选框组时，可使用户在一组状态中作组合式的选择，或称为多选项；,文本编辑器,(Editable Texts),：,用来使用键盘输入字符串 的值，可以对编辑框中的内容进行编辑、删除和替换等操作；,静态文本框,(Static Texts):,仅用于显示单行的说明文字,;,滚动条,(Slider),：,可输入指定范围的数量值；,边框,(Frames),：,在图形窗口圈出一块区域；,列表框,(List Boxes),：,在其中定义一系列可供选择的字符串；,弹出式菜单,(Popup Menus),：,让用户从一列菜单项中选择一项作为参数输入；,此外还有坐标轴,(Axes),， 用于显示图形和图象。,修改控件属性,每个控件不可能是完全符合界面设计要求的，需要对其属性进行设置，以获得所需界面显示效果。,可以通过双击该控件，或利用下拉菜单,View: Property Inspector,打开控件属性对话框。,例如右图是“,+”,按钮的属性列表。,下面对各控件的主要属性进行一下说明。,1),双击设计工作区空白部分，打开整个图形窗属性框。,MunuBar,: none %,图形窗是否使用标准菜单,Name:,caculator,%,图形窗名称,Resize: off %,图形窗不能缩放,Tag:,mainWnd,%,图形窗的句柄,handles.mainWnd,2),静态文本编辑框的属性设置。,FontSize,: 15%,字体大小,FontUnits,: points%,字体大小的度量单位,HorizontalAlignment,: Center%,对齐方式,String: Expression%,待显示的字符,Tag: text1%,静态文本框句柄,handles.text1,Units: points%,文本框度量单位,Units,或,FontUnits,可选择：,inches(,英寸,),，,centimeters (,厘米,),，,normalized(,按比例缩放,),，,points(,点阵,),，,pixels (,像素,),，,characters(,字符,),。如果选择,normalized,，那么当,resize,设为,on,时，控件或字体大小随着整个窗口的缩放而改变。,水平对齐方式,Horizontal Alignment,可以是,left, center, right,。,控件句柄,Tag,有默认值，建议修改为带有具体含义的字符串，以增加程序可读性和方便回调函数调用。,3),可编辑文本框的属性设置。,String: 0%,初始状态下显示数字,0,Tag:,pExp,%,可编辑文本框的句柄,其它和静态文本框相同,4),单功能按钮属性设置。以按钮“,1”,为例,String: 1,Tag: p1,其它和静态文本框相同。,界面激活,保存静态界面后，利用工具栏上的,运行按钮,激活该界面。激活后可以看到两个同名文件：,m,和,fig,。,m,文件在,M,文本编辑器中打开，,fig,文件显示为操作界面，但是无法实现任何功能，需要编写回调函数。,精细调整,利用,对齐工具,，排列控件的位置，使控件的大小、位置更加协调。,精细调整,利用,对齐工具,，排列控件的位置，使控件的大小、位置更加协调。,回调函数,在,M,文本编辑器中打开,m,文件，可以看到自动生成的回调函数，该函数的命名利用对象句柄进行区分，没有任何执行语句。,回调函数：,Tag_Callback(hObject,eventdata, handles),，通过加入自己的处理语句，可以实现所需功能。,其中,hObject,是控件的句柄；,eventdata,是备用参数，目前没有定义；,handles,是用户数据，本身是一个结构数组，存放了当前窗口的所有对象的句柄，包括图形窗本身、所有控件和菜单的句柄。并且可以增加一些域用来传递用户数据。,利用,guidata,( H, handles ),可以更新,H,的用户数据。,4.2 GUI,程序设计示例,本节通过示例，演示,MATLAB,的,GUI,程序设计,。,“Hello World”,程序的设计,下面以一个类似于学习其它程序设计的第一个程序“,Hello World”,为例，讲解,GUIDE,的有关知识。,程序的目标是当按下按钮时，由文本控件显示“,Hello World”,。,1.,“,Hello World,”,程序界面设计,2.,“,Hello World,”,程序的设计,3.,程序测试运行,GUI,设计中的界面设计部分比较容易。在窗口上添加一个按钮控件（,Push Button,）和一个文本控件（,Static Text,）。可双击控件调出属性编辑器进行其属性设置。,设按钮控件的“,String”,属性为“问候”，“,Tag”,属性为“,helloBt,”,，见右图,按钮属性设置,设置文本控件的,“,String,”,属性为空，表示初始状态下不显示任何信息，,“,Tag,”,属性为,“,helloStr,”,，为显示清楚，设其,“,FontSize,”,属性为,“,28,”,。见右图,文本控件属性设置,“,Tag,”,属性设置要唯一，因为,“,Tag,”,属性是唯一标识控件的。,至此，我们的界面设计工作完成。,保存时，会生成,2,个文件，,helloworld.fig,，,helloworld.m,。,此外可通过,ToolsMenu Editor,进行类似于,Windows,程序的菜单设计。编辑窗口见左图，效果见右图。,菜单设计的编辑窗口,菜单效果图,利用菜单编辑器可创建、设置、修改下拉式菜单和快捷菜单。选择,Tools,菜单的,Menu Editor.,子菜单，可打开菜单编辑器。,菜单编辑器,(Menu Editor),菜单可通过编程实现，从,GUI,设计窗口的工具栏上选择,Menu Editor,命令按钮，打开菜单编辑程序。,菜单编辑器包括,菜单的设计和编辑,，菜单编辑器有八个快捷键，可以利用它们任意添加或删除菜单，可以设置菜单项的属性，包括名称,(Label),、,标识,(Tag),、,选择是否显示分隔线,(Separator above this item),、,是否在菜单前加上选中标记,(Item is checked),、,调用函数,(Callback),。,菜单编辑器左上角的第一个按钮用于创建一级菜单项。第二个按钮用于创建一级菜单的子菜单。,菜单编辑器左下角有两个按钮，选择第一个按钮可创建下拉式菜单。选择第二个按钮可创建,Context Menu,菜单。选择它后，,菜单编辑器左上角的第三个按钮就会变成可用,，单击它就可以创建,Context Menu,主菜单。在选中已经创建的,Context Menu,主菜单后，可以单击第二个按钮创建选中的,Context Menu,主菜单的子菜单。与下拉式菜单一样，选中创建的某个,Context Menu,菜单，菜单编辑器的右边就会显示该菜单的有关属性，可以设置、修改菜单属性。,菜单编辑器左上角的第四个与第五个按钮用于对选中的菜单进行左移与右移，第六与第七个按钮用于对选中的菜单进行上移与下移，最右边的按钮用于删除选中的菜单。,按照要求，我们可以给按钮添加动作，即给它编写一个回调函数（,Callback,）。,右键单击按钮，选择,View CallbacksCallback,自动打开,helloworld.m,文件并指向该回调函数。,根据需要为其添加语句。程序将句柄集,handles,的,helloStr,（即文本控件）“,String”,属性设置为“,Hello World”,，即完成了设计要求。,指向该回调函数！,下面这段程序的意思是当点击按钮时，即由程序设置文本控件的“,String”,属性值为“,Hello World”,。,function,helloBt_Callback(hObject,eventdata, handles),set(handles.helloStr,String,Hello,World !);,注意回调函数的概念，它指的是在对象的某一个事件发生时，,MATLAB,内部机制允许自动调用的函数。,其几个参数的意思分别为,hObject,表示当前窗口的句柄；,eventdata,表示事件代码，为保留,handles,是该窗口中的所有句柄的集合。,回调函数有的是针对窗口而言的，有的是对具体控件而言的，学会回调函数的编写有助于高效编写,MATLAB GUI,程序 。,在程序编辑窗口运行测试，或在命令窗口键入程序名称“,helloworld,”,，即可运行。如下图：,注意：,当不小心将,helloworld.fig,关掉后，再次编辑需要重新打开。其方法可以通过,FileNewGUIOpen Existing GUI,来打开。,如按照一般理解选择,FileOpen,项的话，只能打开其运行窗口而不可编辑。,例,2,使用,Push Button,按钮与静态文本框设计,GUI,，在窗口中显示单击按钮次数。,(1),在界面上安装一个命令按钮和一个静态文本框,(2),使用对象的属性窗口设置控件的属性,打开该,GUI,的,m,文件，文件中已经自动生成代码。找到函数,function pushbutton1_Callback(hObject,eventdata, handles),在这个函数名称下面写入如下程序段：,persistent c,if,isempty(c,),c=0,end,c=c+1;,str,=,sprintf(Total,Clicks: %,d,c,);,set(handles.text1,String,str);,保存程序后，单击,Click,按钮，则在什么的文本框中显示单击次数。,例,3,制作一个简易的加减法计算器。,(1),在界面上安装两个编辑文本框、一个静态文本框与两个命令按钮,(2),使用对象的属性窗口设置控件的属性,打开该,GUI,的,m,文件,ex11.m,，在函数,pushbutton1_Callback,与,pushbutton2_Callback,中加入代码，如下所示：,function pushbutton1_Callback(hObject,eventdata, handles),s1=str2double(get(handles.edit1,String),s2=str2double(get(handles.edit2,String),set(handles.text1,String,s1+s2);,function pushbutton2_Callback(hObject,eventdata, handles),s1=str2double(get(handles.edit1,String),s2=str2double(get(handles.edit2,String),set(handles.text1,String,s1-s2);,例,4,使用,3,个单选钮控制静态文本框的背景颜色。,function radiobutton1_Callback(hObject,eventdata, handles),set(handles.text1,BackGroundColor,r),function radiobutton2_Callback(hObject,eventdata, handles),set(handles.text1,BackGroundColor,g),function radiobutton3_Callback(hObject,eventdata, handles),set(handles.text1,BackGroundColor,b),function slider1_Callback(hObject,eventdata, handles),v=get(handles.slider1,Value);,str,=sprintf(%.2f,v);,set(handles.text1,String,str);,例,5,使用滚动条。,例,6,制作一个根据密度与体积计算质量的简易计算器。,(1),在界面上布置控件对象。,(2),使用对象的属性窗口设置控件的属性。,例,7,使用程序把基本控件安装在图形窗口上。,h1=,uicontrol(style,edit,TooltipString,Edit,Text),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,Static Text),h8=uicontrol(style,toggle,Position,430,20,30,20,TooltipString,Togglebutton),上面程序虽然实现了控件的安装，但是，还不能完成具体的功能。如果要完成特定的功能，需要加入其他语句,。,例,8,在图形窗口底部安装一个命令按钮、一个可编辑文本框、一个静态文本框。针对命令按钮（,pushbutton,）编写程序，使程序运行后，点击该命令按钮，便随机绘制出一些折线；同时可编辑文本框背景色变为蓝色，静态文本框背景色变为红色。,h1=uicontrol(style,pushbutton,Position,280,0,50,20),set(h1,String,PUSH,Callback,fun),主程序只创建安装了一个,Pushbutton,按钮，然后，在,set,语句中使用,Callback,属性调用函数,fun,。,主程序设计如下：,function fun,plot(rand(3,5),h2=,uicontrol(style,edit,TooltipString,Edit Text,Position,80,0,30,20),h3=,uicontrol(style,text,Position,440,0,30,20,TooltipString,Static Text,),set(h2,BackGroundColor,0 0 1),set(h3,BackGroundColor,1 0 0),函数,fun,代码如下：,在函数,fun,中除了绘图之外，还制作了一个,Edit Text,、一个,Static Text,，并且把这两个控件的背景色设置为蓝色,0 0 1,与红色,1 0 0,。,控制系统典型环节的演示程序,1.,程序功能描述,2.,程序界面设计,3.,程序代码设计,4.,程序测试运行,1.,程序功能描述,进行控制系统典型环节的演示，包括了典型环节运行效果的演示与代码的展示。也可以在代码区输入绘制曲线语句并通过点击定制曲线按钮绘制曲线。,2.,程序界面设计,根据程序功能要求，添加不同控件，并设置控件各自的属性。,(1),Axes,控件,作用为显示图形，典型环节的阶跃响应曲线及定制曲线都在此处进行显示。“,Tag”,属性设为,myAxes,。,(2),Panel,控件,用来盛放其它控件，这里盛放的是代码区。“,Tag”,属性设为,uipanel,。“,Title”,属性设为空。,(3),Edit Text,控件,用于输入和显示文本。此处作为代码区，主要作用为展示典型环节的代码、输入用户定制的曲线代码。,“,Tag”,属性设为：,strCode,。,“,String”,属性设为：,Please input command,for example:,x=0:0.1:4*pi;,y=,sin(x,);,这为用户定制曲线提供了一个例程,。,(4),Static Text,控件,作为标识，提示位于其下方的,ListBox,控件选项是进行典型环节演示。“,Tag”,属性设为,txtDemo,，“,String”,属性设为典型环节演示。,(5),ListBox,控件,类似于一组复选框，用户可从中选择不同选项。,“,Tag”,属性设为：,lstBox,“String”,属性设为：,比例环节,惯性环节,比例微分环节,比例积分环节,表示此列表共有,4,项内容即,4,个典型环节可选,。,(6),Push Button,控件,表现为一个按钮。本例中使用了两个此控件。,一个用于,定制曲线的绘制,。,用户在代码区输入绘制曲线语句后，点击此按钮进行曲线绘制。“,Tag”,属性设为,btnDraw,，“,String”,属性设为定制曲线，“,TooltipString,”,属性设为在代码区中输入曲线参数，绘制任意曲线。这样当用户将光标置于按钮上时，会有相应提示信息。,一个用于,关闭运行窗口,。,“,Tag”,属性设为,btnClose,，,“,String”,属性设为关闭，,“,TooltipString,”,属性设为关闭窗口。,设定完成的界面草图如图,至此，本例所需的控件已设置完毕。在最初按照草图添加部署了所有的控件后，往往不会排列得很整齐。此时可根据需要进行控件的排列。,要将位于窗口右侧的,4,个控件竖排整齐，则可在窗口选,ToolAlign Objects,弹出的窗口中进行选择。,3.,程序代码设计,根据要求，在选择典型环节时需要设置回调函数。此外，对两个按钮控件也要设置回调函数。,回调函数的生成在前一个例子已讲过，这里不重复。这里只给出相应的代码段供参考。,(1),定制曲线按钮的回调函数,function,btnDraw_Callback(hObject,eventdata, handles),try,str,=,char(get(handles.strCode,String,);,%,将在代码区输入的代码转换成数组,str0=;,for ii=1:size(str,1) %,对,str,的每行操作,str0=str0,deblank(str(ii,:);,%,将,str,第,ii,行去掉空格后作为向量,str0,的一个元素,end,end,eval(str0);%,执行代码,axes(handles.myAxes,);%,将,myAxes,设为当前坐标系,plot(x,y,); %,绘制曲线,catch,errordlg,(,请重新检查输入数据,!); %,如有数据错误，捕获并给出提示,end,(2),典型环节列表框的回调函数,function,lstBox_Callback(hObject,eventdata, handles),v=,get(handles.lstBox,value,); %,取出所选项的值,%,对不同选项进行对应环节曲线的绘制和代码的展示,switch v,case 1, %,比例环节,str1=,nump,=3;denp=1; %,绘制比例环节曲线代码,str2=t=0:0.1:10;,str3=,y,t,x,=,step(nump,denp,t,);,%,将代码作为数组赋值给代码区,String,属性,set(handles.strCode,String,char(str1,str2,str3);,%,将所选环节名称显示在,panel,控件上,set(handles.uipanel,Title,比例环节,);,case 2, %,惯性环节,str1=,numg,=1;deng=0.2 1;,str2=t=0:0.1:10;,str3=,y,t,x,=,step(numg,deng,t,);,set(handles.strCode,String,char(str1,str2,str3);,set(handles.uipanel,Title,惯性环节,),case 3, %,比例微分,str1=K=2;T=0.1;N=5;numpd=K*T,K;denpd,=T/N 1;,str2=t=0:0.1:10;,str3=y,t,x=step(numpd,denpd,t);,set(handles.strCode,String,char(str1,str2,str3);,set(handles.uipanel,Title,比例微分环节,);,case 4, %,比例积分,str1=K=4;T=0.2;numpi=K*T K;denpi=T 0;,str2=t=0:0.1:10;,str3=y,t,x=step(numpi,denpi,t);,set(handles.strCode,String,char(str1,str2,str3);,set(handles.uipanel,Title,比例积分环节,);,end,axes(handles.myAxes); %,将,myAxes,设为当前坐标系,btnDraw_Callback(hObject,eventdata,handles) %,调用定制曲线按钮的回调函数进行曲线绘制,(3),关闭窗口按钮的回调函数,function,btnClose_Callback(hObject,eventdata, handles),close(gcf,);,%,关闭当前图形窗口,4.,程序测试运行,运行程序后，出现如图所示程序首界面,输入绘制曲线的代码，如：,x=0:0.1:4*,pi;y,=,cos(x,);,点击定制曲线按钮后，出现如图运行结果。,比例环节演示结果,如图所示,(a),(b),惯性环节演示结果如图所示,(c),比例微分环节演示结果如图所示,(d),比例积分环节演示结果如图所示,