2--matlabGUI人机用户界面设计演示幻灯片.ppt

Click to edit Master text styles,Second level,Third level,Fourth level,Fifth level,*,Click to edit Master title style,Click to edit Master text styles,Second level,Third level,Fourth level,Fifth level,Click to edit Master title style,第二讲 图形用户界面,GUI,1,即 在,MATLAB,中创建图形用户界面的方法有两种,图形句柄,GUIDE,都需要使用,M,语言编程。,利用图形句柄创建的,GUI,只有一个,M,文件，而利用,GUIDE,创建的,GUI,由两个文件,:M,文件和外观文件,fig,文件。,2,2.1 GUIDE,工具入门,使用图形句柄创建,GUI,的过程繁琐，而且在程序编写好之前，用户图形界面是不可见的。所以为了便于创建图形用户界面，,MATLAB,提供了一个开发环境，能够帮助用户创建图形用户界面，这就是,GUIDE,Graphic User Interface Development Environment,。,在,MATLAB,中启动,GUIDE,的方法：,guide,或者通过“,Start”,菜单选择“,MATLAB”,下的“,GUIDE”,命令。,3,这时，将直接启动,GUIDE Quick Start,窗体，在这个窗体中，可以初步选择图形用户界面的类型，如图所示。,图,GUIDE,的快速启动界面,4,在快速启动界面中，可以选择四种类型的新建界面：,*空白界面,(Black GUI),。,*具有图形控件的界面,(GUI With Uicontrols),。,*具有菜单和坐标轴的界面,(GUI With Axes and Menu),。,*模式对话框,(Modal Question Dialog),。,5,以空白界面类型为例，单击“,OK”,按钮，这时,MATLAB,将启动,GUIDE,的图形界面，如图所示。,图,具有空白界面的,GUIDE,图形界面,6,在,GUIDE,界面的左侧为,MATLAB,的控件面板，控件面板包含了能够在画布上绘制的图形控件：,(Push Button),、单选按钮,(Toggle Button),、,单选框,(Radio Button),、复选框,(Checkbox),、,文本框,(Edit Text),、静态文本框,(Static Text),、滚动条,(Slider),、组别框,(Frame),、,列表框,(Listbox),、下拉框,(Popup Menu),和坐标轴,(Axes),。,7,图,GUIDE,工具栏上的工具按钮,此外，在,GUIDE,的界面的工具栏上包含了一些常用的工具。,8,利用对象对齐工具，可以很方便地对对象设计编辑器中设计区内多个对象的位置进行调整。从对象设计编辑器界面的工具栏上选择按钮，或者选择“,Tools”,菜单下的“,Align Objects.”,选项，可以打开对象位置调整器，如图所示：,图,排列工具栏外观图,1,、对齐工具,9,2,、属性察看器,利用对象属性编辑器，可以查看、修改和设置每个对象的属性值，在对象设计编辑器界面工具栏上选择“,View”,下的“,Inspect Properties”,选项，可以打开对象属性编辑器。另外，在,Matlab,命令窗口的命令行输入,inspect,，也可以打开对象属性编辑器。对象属性编辑器如图所示：,图,属性编辑器外观图,10,3,、菜单编辑器,利用菜单编辑器，可以创建、设置、修改下拉式菜单和弹出式菜单。在,GUIDE,中单击工具栏上的按钮，或者选择“,Tools”,菜单中的“,Menu Editor”,选项，打开菜单编辑器的界面，如图所示：,图 菜单编辑器界面图,GUIDE,能够创建两种类型的菜单。一种是在图形窗口菜单栏中显示的菜单栏菜单；另一种是当用户在图形对象上单击鼠标右键时产生的上下文菜单。可以使用菜单编辑器来创建这两种类型的菜单。,11,4,、对象浏览器,利用对象浏览器，可查看当前所创建的图形对象。从对象设计编辑器界面的工具栏上选择，或者选择“,View”,菜单下的“,Object Browser”,选项，可以打开对象浏览器。,图 对象浏览器,12,2.2 GUI,设计,13,14,【,例,1】,设计一个带有三个按钮和一个坐标轴的图形用户界面，当用鼠标点击三个按钮时，分别在坐标轴内画,sphere,、,membrane,和,peaks,三个图形。,15,设置控件属性,图中,共有三个按钮，且每个按钮行使相应的功能，在按钮上双击鼠标左键可以打开按钮属性编辑器，如图所示，该图的左侧是按钮的所有属性，右侧是其属性值。,图,按钮属性编辑器外观图,16,编写回调程序,前三部的工作结束后，界面上的三个按钮就要行使其功能了。首先，点击菜单栏上的保存按钮进行文件的保存，此时，会弹出“,save as”,对话框，如图所示，进行,FIG,文件保存，文件命名为,myGUI,。,图 保存图形界面的对话框图,17,同时，,Matlab,会自动创建一个同名的,M,文件，并且自动打开，如图所示。,图,自动生成的,M,文件,其次，在自动生成的,M,文件中，找到与三个按钮有关的回调子函数，本例中的回调子函数见图,7-16,所示的光标定位处（这里我们仅截取了按钮,1,的回调子函数）。,18,图,7-16,按钮,1,的回调子函数定位图,19,下面就可以在该子函数的空白处填写回调程序了。,例如，按钮“,sphere”,的回调程序为：,sphere;,axis tight;,按钮“,peaks”,的回调程序为：,peaks;,axis tight;,按钮“,membrane”,的回调程序为：,membrane;,axis tight;,上面的三个回调程序在自动生成的命名为,myGUI,的,M,文件,编辑器中录入的情况如图,7-17,所示，为了减少图占用太大,的空间，将编辑器中三个子函数部分的解释性语句已删去。,20,图,7-17 M,文件编辑器中的三个按钮的回调子函数,21,程序录入后，点击保存图标，将,M,文件重新保存，,然后点击,M,文件编辑器上的运行快捷按钮或返回,到图,7-13,未被激活的图形界面，点击工具栏上的,运行图标，此时则生成如图,7-18(a),所示的被激活,的图形界面。当点击“,sphere”,按钮时，在空白的,坐标轴处出现球体，如图,7-18(b),所示；点击,“,peaks”,按钮时，在空白的坐标轴处出现尖峰图，,如图,7-18(c),所示；点击“,membrane”,按钮时，在,空白的坐标轴处出现,membrane,图，如图,7-18(d),所示。,22,(a),(b),(c)(d),图,7-18,运行结果,(a),被激活后的界面；,(b)sphere,图；,(c)peaks,图；,(d)membrane,图,23,至此，图形界面的,GUI,向导设计就完成了。还有一点需要说明的是，在编写回调程序时，也可以在属性编辑器的,Callback,属性中录入代码。事实上，两种方法得到的结果是相同的。但是，第二种方法（直接修改,Callback,属性值）适用于代码语句少的的情况，如果函数体由多条语句组成，最好采用本例所使用的方法。,24,25,26,27,28,29,30,31,例,3,：设计一个如下图所示的简易加减法计算器图形用户界面（,GUI,），实现加法或减法运算，以及乘法和除法运算（添加乘法和除法按钮）。,32,需用模块：,7,个静态文本框（数据,1,、数据,2,、等号、计算结果，显示结果，加法、减法）；,2,个编辑文本框（数据,1,输入窗口、数据,2,输入窗口）；,2,个按钮（,Plus,、,Sub,）。,添加回调函数：,在函数,function edit1_Callback(hObject,eventdata,handles),下添加如下代码：,input=str2num(get(hObject,String);,if(isempty(input),set(hObject,String,0),end,guidata(hObject,handles);,33,添加回调函数：,同理，在,edit2_Callback,下添加上述代码。,input=str2num(get(hObject,String);,if(isempty(input),set(hObject,String,0),end,guidata(hObject,handles);,34,在函数,function Plus_Callback(hObject,eventdata,handles),下添加如下代码：,a=get(handles.edit1,string);b=get(handles.edit2,string);total=str2num(a)+str2num(b);c=num2str(total);set(handles.text,string,c);guidata(hObject,handles);,添加回调函数：,35,在函数,function Sub_Callback(hObject,eventdata,handles),下添加如下代码：,a=get(handles.edit1,string);b=get(handles.edit2,string);total=str2num(a)-str2num(b);c=num2str(total);set(handles.text,string,c);guidata(hObject,handles);,添加回调函数：,36,注意：,在上述 添加回调函数代码可看出，对于数据输出结果的返回语句,set(handles.text,string,c);,故在,7,个静态文本的属性设置中，数据输出结果的静态文本框的,Tag,属性设置应为,text,，与程序保持一致,37,最终运行结果：,38,2.2,创建图形用户界面外观,举例：用,GUIDE,创建图形用户界面。,界面中包含一个坐标轴用来显示三维表面,(surface),；,而且界面中包含两个按钮，用来绘制三维表面和修改颜色；,通过几个文本框将颜色数值显示出来；,通过滚动条修改三维表面的网格线色彩。,在图形界面上有一个菜单，通过菜单命令可以清除当前坐标轴的内容。,39,图,7-13,图形用户界面的例子,利用,GUIDE,工具创建图形用户界面,40,在该图形用户界面中包含如下控件：,*两个按钮,(push button),，分别完成绘制三维曲面和改变色彩的功能；,*五个静态文本框,(static text),，分别用来完成显示不同信息的功能；,*一个滚动条,(slide),，用来完成改变三维曲面上的分隔线色彩；,*一个坐标轴,(axes),，用来显示三维曲面,;,*,一个菜单,(menu),，用来完成清除坐标轴的功能。,下面将详细介绍创建该图形用户界面的方法和步骤。,41,首先，进行界面设计。在这一过程中，需要对界面空间的布局、控件的大小等进行设计。,然后，利用,GUIDE,的外观编辑功能，将必要的控件依次绘制在界面的,“,画布,”,上。在这一过程中，主要将所有控件摆放在合适的位置，并且设置控件合适的大小。,第三步，设置控件的属性，这一步骤重点需要设置控件重要的属性值，例如控件的回调函数、标签和显示的文本等。,第四步，针对不同的控件需要完成的功能进行,M,语言编程。,42,选择,“,Tools,”,菜单下的,“,Grid and Rulers,”,命令，在弹出的对话框中可以设置画布上网格线的尺寸，画布上的网格线可以帮助用户来设置控件的尺寸以及确定对齐控件的位置，所以需要选择合适的网格尺寸，默认的数值为,50,像素。,图,7-15,设置网格尺寸,43,将不同的控件绘制在画布上，如图,7-16,所示。,选择四个静态文本框，单击,GUIDE,工具栏中的对齐工具按钮，在弹出的排列工具对话框中，分别选择垂直方向上均匀分布、水平方向上左边界对齐按钮，如图,7-18,所示。,44,图,7-16,放置图形用户界面的控件,45,图,7-18,对齐工具对话框,46,在界面之中还需要创建菜单，创建菜单可以通过菜单编辑器完成。单击工具栏上的菜单编辑器按钮，可以打开菜单编辑器对话框，在对话框中单击创建新菜单按钮，则可以创建新的菜单，设置菜单属性如图,7-20,所示。,47,图,7-20,创建菜单,48,设置菜单的,Label,属性和,Tag,属性。,Tag,属性将在后面编写界面应用程序时使用。,再添加一个子菜单项，单击新建菜单项按钮，同样在菜单编辑器对话框中设置菜单项的,Label,属性和,Tag,属性分别为,Done,和,ClearAxesDone,。,49,图,7-21,激活界面察看效果,到现在，整个图形界面元素就基本上创建完毕了，这时可以单击,GUIDE,工具栏中的,Run,按钮，激活图形界面，如图,7-21,所示。,50,7.5,图形用户界面编程,7.5.1,设置对象属性,控件的,String,属性和,Tag,属性：前者为显示在控件上的文本，后者相当于为控件取个名字，这个名字为控件在应用程序中的,ID,，控件的句柄和相应的回调函数都与这个名字有直接的关系。设置控件的属性可以使用,GUIDE,的属性察看器和控件浏览器完成。,单击工具条中的,控件浏览器,按钮，在弹出的对话框中，可以察看所有已经添加在图形界面中的对象以及对象的,String,和,Tag,属性，如图,7-22,所示。,51,图,7-22,控件对象浏览器,52,首先设置图形窗体的属性，用鼠标,双击,控件对象浏览器中的,“,figure(ex2),”,，可以,打开属性察看器编辑修改,和察看图形窗体的,属性,。这里需要修改的属性包括图形的,Name,属性和,Tag,属性，将,Name,属性设置为,ex2,，将,Tag,属性设置为,ex2Gui,，如图,7-23,所示。,53,然后双击控件对象浏览器中的,uicontrol(pushbutton1Push Button),，这时将打开按钮对象的属性察看器，同时，在,GUIDE,的外观编辑器中，可以看到画布上的第一个按钮被选中了。这时，需要将该按钮的,String,属性设置为,Draw,，将,Tag,属性设置为,btnDraw,，如图,7-24,所示。,54,图,7-24,设置按钮的属性,55,依此类推，分别将其他的控件设置为如下的属性：,第二个按钮：,*,String:Change Color,。,*,Tag:ChangeColor,。,静态文本框,1,：,*,String:Color,。,静态文本框,2,：,*,String:Red,。,*,Tag:txtRed,。,*,HorizontalAlignment:left,。,56,静态文本框,3,：,*,String:Green,。,*,Tag:txtGreen,。,*,HorizontalAlignment:left,。,静态文本框,4,：,*,String:Blue,。,*,Tag:txtBlue,。,*,HorizontalAlignment:left,。,静态文本框,5,：,*,String:Edge Color,。,滚动条：,*,Tag:sliderEdgeColor,。,57,图,7-25,设置控制对象属性得到的效果,58,7.5.2,编写回调函数,完成了前面的工作之后，就要通过编写控件的回调函数来实现不同控件的界面功能了。图形用户界面的功能主要通过控件响应用户的动作来完成，特别在,MATLAB,的图形用户界面应用程序中，用户界面控件主要响应用户的鼠标动作,单击动作也就是选中控件的动作。响应鼠标动作的方法通过编写回调函数来完成。,MATLAB,图形用户界面控件的回调函数，是指在界面控件被选中的时候，响应动作的,M,语言函数。在回调函数中，一般需要完成如下功能：,*获取发出动作的对象句柄。,*根据发出的动作，设置影响的对象属性。,59,一般回调函数的声明为,function object_Callback(hObject,eventData,handles),其中：,*,object,为发生事件的控件的,Tag,属性字符串。,*,hObject,为发生事件的控件的句柄。,*,eventData,为保留字段，目前版本的,MATLAB,还暂时不使用。,*,handles,为一个结构，这个结构中包含所有界面上控件的,Tag,属性值，还可以添加用户自己的数据。,60,首先，程序的头部为程序的初始化和调度代码，一般情况下，用户不需要修改这部分代码。在程序执行的过程中，这部分代码起到了调度程序的功能，分别完成了打开图形界面、初始化以及响应用户动作的功能。一般地，此段代码如下：,%Begin initialization code-DO NOT EDIT,gui_Singleton=1;,gui_State=struct(gui_Name,mfilename,.,gui_Singleton,gui_Singleton,.,gui_OpeningFcn,simple_gui_OpeningFcn,.,gui_OutputFcn,simple_gui_OutputFcn,.,61,gui_LayoutFcn,.,gui_Callback,);,if nargin&isstr(varargin1),gui_State.gui_Callback=str2func(varargin1);,end,if nargout,varargout1:nargout=gui_mainfcn(gui_State,varargin:);,else,gui_mainfcn(gui_State,varargin:);,end,%End initialization code-DO NOT EDIT,62,在调度代码的后面紧跟着两个子函数，这两个子函数就是,GUI,的回调函数。第一个回调函数是,function ex2_OpeningFcn(hObject,eventdata,handles,varargin),该函数负责打开图形界面，同时，若程序中需要对一些全局的参数进行初始化或者设置时，可以将初始化用户数据的代码添加在该子函数中。,第二个回调函数是,function varargout=ex2_OutputFcn(hObject,eventdata,handles),该子函数负责将图形界面的句柄返回给用户的输出参数。,63,接下来的子函数是分别用来,响应用户的动作输入,，,完成相应功能,的,GUI,控件回调子函数。在这里首先编写,Draw,按钮的回调函数,。在,M,文件中找到函数,btnDraw_Callback,，并且添加相应的代码：,function,btnDraw,_Callback(hObject,eventdata,handles),%,绘制三维曲面,hsurfc=surf(peaks(30),FaceColor,blue);,%,保存三维曲面的句柄,handles.hsurface=hsurfc;,guidata(hObject,handles);,64,%,设置相应的文本显示当前色彩数值,set(handles.txtRed,String,Red:0);,set(handles.txtGreen,String,Green:0);,set(handles.txtBlue,String,Blue:1);,在上述的代码中，首先绘制了三维曲面，然后将三维曲面的句柄保存在,handles,结构中。最后还设置了相应色彩的文本属性以显示不同的色彩数值。,65,注意：再次强调,在,GUIDE,创建的,M,函数文件中，若修改了,handles,结构，则需要通过,guidata,函数将,handles,的结构保存起来，只有这样才能够通过,handles,结构将不同的用户数据传递到相应的子函数中。,若此时执行,M,文件，单击“,Draw”,按钮之后，就可以在坐标轴中观察到程序的输出效果,三维的曲面，如图,7-27,所示。,66,图,7-27,绘制曲面的效果,67,继续修改,M,文件，在不同控件的回调函数中添加代码完成用户界面的功能。,Simple GUI,的,M,代码,(,回调函数部分,),如下：,单击,“,Change Color,”,按钮,的,回调函数,：,001%-Executes on button press in btnChangeColor.,002function,btnChangeColor,_Callback(hObject,eventdata,handles),003%,修改曲面色彩,004%,获取曲面的句柄,005hsurf=handles.hsurface;,006%hsurf=findobj(gcf,Type,Surface);,68,007%,生成随机的色彩,008newColor=rand(1,3);,009%,设置曲面的色彩,010,set,(hsurf,FaceColor,newColor);%Set face color of surface,011%,设置相应的,文本显示,当前色彩数值,012set(handles.txtRed,String,Red:num2str(newColor(1,1);,013set(handles.txtGreen,String,Green:num2str(newColor(1,2);,014set(handles.txtBlue,String,Blue:num2str(newColor(1,3);,69,滚动条的回调函数,：,001%-Executes on slider movement.,002function,sliderEdgeColor,_Callback(hObject,eventdata,handles),003%,修改曲面的边缘色彩,004%,获取对象句柄,005hsurf=handles.hsurface;,006%,获取滚动条当前的数值,008 newRead=,get,(hObject,Value);%Get new color from slider 009 EdgeColor=rand(1,3);%generate new color,010 EdgeColor(1)=newRead;%Assign value to first element,011,set,(hsurf,EdgeColor,EdgeColor);,70,设置窗口背景色：,001%-Executes during object creation,after setting all properties.,002function sliderEdgeColor_CreateFcn(hObject,eventdata,handles),003,004usewhitebg=1;,005if usewhitebg,006 set(hObject,BackgroundColor,.9.9.9);,007 else,008 set(hObject,BackgroundColor,get(0,defaultUicontrolBackgroundColor);,009end,71,菜单命令的回调函数,：,001%-,002function CleartheAxes_Callback(hObject,eventdata,handles),003,004%-,005function,ClearAxesDone,_Callback(hObject,eventdata,handles),006%,清除当前的坐标轴内容,007,cla,72,图,7-28,图形用户界面简单例子的执行状态,73,7.6,小 结,在本章介绍了在,MATLAB,中创建图形用户界面的方法，介绍了,MATLAB,中图形对象的层次以及图形对象句柄的使用方法，以及,MATLAB,创建图形用户界面应用程序的集成开发环境,GUIDE,的使用方法。,通过简单的示例说明了创建图形用户界面的过程。,74,Thank You!,