第 九 章 图形用户界面 (GUI) 制作

1. 第九章 图形用户界面(GUI)制作 教学目标 • 了解图形用户界面的一般结构和功能； • 掌握图形用户界面的设计原则,设计工具,界面菜单,用户控件。

2. 教学过程 1．图形用户界面概述 2．界面菜单 3．用户控件 4．图形用户界面设计工具

3. 9.1 图形用户界面概述 • 用户界面: 用户与计算机或计算机程序的接触点或交互方式 • 图形用户界面 • Graphical User Interfaces • GUI • 是由窗口、光标、按键、菜单、文字说明等对象（Objects）构成的一个用户界面。

4. GUI对象层次结构

5. 9.2 菜单 • 建立菜单和子菜单 • 图形窗的标准菜单 • 自制的用户菜单 • 现场菜单

6. 建立菜单和子菜单 • 采用函数uimenu建立菜单项 • Hm_1=uimenu(Hx_parent，‘PropertyName ‘，PropertyValue，...) • Hm_1---由uimenu生成的菜单项的句柄 • uimenu对象的属性值‘PropertyName ’ ，PropertyValue • Hx_parent---缺省的父辈对象的句柄

7. ‘ Label ’属性值菜单条和下拉菜单项上的文本字符串，以确认菜单项。‘ Callback ’ 属性值MATLAB字符串，当选中菜单项时，用以执行。

8. 图形窗的标准菜单 隐藏和恢复标准菜单的显示 （1）获得缺省设置的标准菜单 figure （2）隐去标准菜单的两种方法 set(H_fig , 'MenuBar','none')； set(gcf,'menubar',menubar); （3）恢复图形窗上标准菜单 set(gcf,'menubar','figure');

9. 自制的用户菜单 • 【例】自制一个带下拉菜单表的用户菜单。该菜单能使图形窗背景颜色设置为兰色或红色。 • [mygui002.m] Figure h_menu=uimenu(gcf,'label','Color'); h_submenu1=uimenu(h_menu,'label','Blue','callback','set(gcf,''Color'',''blue'')'); h_submenu2=uimenu(h_menu,'label','Red', 'callback','set(gcf,''Color'',''red'')');

10. 菜单的外观 属性: ' Position ' ，' Checked ' ，' Separator ‘

11. 颜色控制 • ‘ BackGroundColor ’属性 • 控制填充菜单背景的颜色。缺省值是浅灰。 • 另一颜色属性为' ForeGroundColor ' ， • 它确定菜单项文本的颜色，缺省值是黑色。

12. >>uimenu( ' Label ' ，' Test ' ，' CallBack ' ，' grid on；set(gca，' ' Box ' ' ，' ' on ' ' ) ' )； 回调属性

13. 现场菜单 【例】绘制一条Sa曲线，创建一个与之相联系的现场菜单，用以控制Sa曲线的颜色。 [mygui003.m] t=(-3*pi:pi/50:3*pi)+eps; y=sin(t)./t; hline=plot(t,y); cm=uicontextmenu; %创建现场菜单 %制作具体菜单项，定义相应的回调 uimenu(cm,'label','Red','callback','set(hline,''color'',''r''),') uimenu(cm,'label','Blue','callback','set(hline,''color'',''b''),') uimenu(cm,'label','Green','callback','set(hline,''color'',''g''),') set(hline,'uicontextmenu',cm)

14. 按钮 滑标 文本框等 Uicontrol由函数uicontrol生成 Hc_1=uicontrol(Hf_fig，' PropertyName ' ，PropertyValue，...) 9.3 用户控件（uicontrol）

15. 【例】对于传递函数为的归一化二阶系统， 制作一个能绘制该系统单位阶跃响应的图形用户界面。 mygui004.m （1）产生图形窗和轴位框： clf reset H=axes('unit','normalized','position',[0,0,1,1],'visible','off'); set(gcf,'currentaxes',H); str='\fontname{隶书}归一化二阶系统的阶跃响应曲线'; text(0.12,0.93,str,'fontsize',13); h_fig=get(H,'parent'); set(h_fig,'unit','normalized','position',[0.1,0.2,0.7,0.4]); h_axes=axes('parent',h_fig,... 'unit','normalized','position',[0.1,0.15,0.55,0.7],... 'xlim',[0 15],'ylim',[0 1.8],'fontsize',8);

16. h_text=uicontrol(h_fig,'style','text',... 'unit','normalized','position',[0.67,0.73,0.25,0.14],... 'horizontal','left','string',{'输入阻尼比系数','zeta ='}); h_edit=uicontrol(h_fig,'style','edit',... 'unit','normalized','position',[0.67,0.59,0.25,0.14],... 'horizontal','left',... 'callback',[... 'z=str2num(get(gcbo,''string''));',... 't=0:0.1:15;',... 'for k=1:length(z);',... 's2=tf(1,[1 2*z(k) 1]); ',... 'y(:,k)=step(s2,t);',... 'plot(t,y(:,k));',... 'if (length(z)>1) ,hold on,end,',... 'end;', 'hold off,']); （2）在坐标框右侧生成作解释用的“静态文本”和可接受输入的“编辑框”：

17. （3）形成坐标方格控制按键 h_push1=uicontrol(h_fig,'style','push',... 'unit','normalized','position',[0.67,0.37,0.12,0.15],... 'string','grid on','callback','grid on'); h_push2=uicontrol(h_fig,'style','push',... 'unit','normalized','position',[0.67,0.15,0.12,0.15],... 'string','grid off','callback','grid off');

18. （4）输入阻尼比系数，可得单位阶跃响应曲线（4）输入阻尼比系数，可得单位阶跃响应曲线

19. 9.4 图形用户界面设计工具

20. 1 启动GUI • 命令窗口中输入guide命令。

21. 2 布局(Layout)编辑器 • 当用户在GUIDE 中打开一个GUI时，该GUI将显示在 Layout编辑器中，Layout编辑器是所有GUIDE工具的控制面板。

22. 布局(Layout)编辑器 • 用户可以使用鼠标拖动模板左边的控件(按钮、坐标轴、单选按钮等)到中间的布局区域 。

23. 3 GUIDE模板介绍 • GUIDE Quick Start对话框提供了几种常用的GUI模板 。

24. 4 运行GUI • 单击工具栏最右边的绿色按钮，即运行当前的GUI窗口。

25. 5 创建GUI对象 • GUI窗口的布局 • 改变GUI窗口的大小 • 控件的添加和对齐 • GUI控件的属性控制 • 属性查看器的显示 • 一些常用的属性 • 菜单的添加 • 主菜单的创建 • 弹出式菜单的的创建

26. （1）GUI窗口的布局 • 改变GUI窗口的大小 。 • 单击网格区域的右下角，当鼠标变为箭头形式时，拖动鼠标，即可适时改变窗口的大小 。

27. （2）GUI控件的属性控制 • 属性查看器的显示 • 用户可以使用如下3种方式打开： • 在布局窗口中双击某个控件。 • 在View 菜单中选择Property Inspector选项。 • 右击某个控件并从弹出的快捷菜单中选择Inspect Properties选项。

28. （3）主菜单的创建1 • 菜单属性的设置 • 单击右图中的菜单标题Untitled 1，将在菜单编辑器的右边显示该菜单的属性提供给用户进行编辑，如Label、Tag、Accelerator、Separator和Checked等属性。

29. （3）主菜单的创建2 • 给菜单增添菜单项 • 用户可以使用工具栏上的New Menu Item图标给当前菜单增添菜单项 。

30. 6. GUI 编 程 • GUI的M文件 • 与句柄结构共享数据 • M文件中的函数和响应 • 控件的使用 • 使用句柄结构进行GUI数据操作

31. （1）与句柄结构共享数据 • 当运行GUI时，M文件创建一个包含所有GUI对象(如控件、菜单和坐标轴)的句柄结构，句柄结构作为一个每个响应的输入来处理。用户使用句柄结构可以实现如下操作。 • 在各响应之间实现数据共享； • 访问GUI数据。

32. 在各响应之间实现数据共享 • 用户欲取得变量X的数据，可以先将句柄结构的一个域设为X，然后在使用guidata函数保存该句柄结构，如下所示： • handles.current_data = X; • guidata(hObject,handles) • 用户可以在其他任何响应中重新得到该变量的值，使用的操作如下。 • X = handles.current_data;

33. （2） M文件中的函数和响应 • 用户可以给GUI的M文件的如下部分增加程序代码： • 打开函数(Opening function)，该函数在GUI可见之前实施操作。 • 输出函数(Output function)，在必要的时候向命令行输出数据。 • 响应(Callbacks)，在用户激活GUI中的相应控件时实施操作。

34. 打开函数 • 打开函数包含有在GUI可见之前进行操作的代码，用户可以在打开函数中访问GUI的所有控件，因为所有DUI中的对象都在调用打开函数之前就已经创建。 • 如果用户需要在访问GUI之前实现某些操作(如创建数据或图形)，那么可以通过在打开函数中增添代码来加以实现。 • 对于一个文件名为my_gui的GUI来说，它的打开函数的定义语句如下。 • function my_gui_OpeningFcn(hObject, eventdata, handles, varargin)

35. 输出函数 • 输出函数将输出结果返回给命令行。 • 在用户需要将某个变量传递给另一个GUI时尤其实用。 • UIDE在输出函数中生成如下代码。 • % --- Outputs from this function are returned to the command line. • function varargout = my_gui_OutputFcn(hObject, eventdata, handles) • % Get default command line output from handles structure • varargout{1} = handles.output;

36. （3）控件的使用 • “开关”按钮(Toggle Button) • 按钮(Radio Buttons) • “复选框”控件(Check Boxes) • “文本框”控件(Edit Text) • “滚动条”控件(Sliders) • “列表框”控件(List Boxes) • “弹出菜单”控件(Pop-Up Menus) • 控件板(Panels)

37. 控件的使用举例1 • 按钮(Radio Buttons)的响应 • 在图形界面中添加该控件之后，该控件将在指定位置添加按钮，按钮的标识字符由属性String控制，而返回值由Value值控制。 • 在GUI的M文件中使用如下形式的代码来编制Radio按钮的响应程序： • if (get(hObject,'Value') == get(hObject,'Max')) • % then rsdio button is selected-take approriate action • else • % radio button is not selected-take approriate action • end

38. 控件的使用举例2 • “复选框”控件(Check Boxes)的响应 • 在图形界面中添加该控件之后，该控件将提供复选功能，将显示文本字符串及选择框 。 • 在GUI的M文件中使用如下形式的代码来编制“复选框”控件的响应程序 ： • function checkbox1_Callback(hObject, eventdata, handles) • if (get(hObject,'Value') == get(hObject,'Max')) • % then checkbox is checked-take approriate action • else • % checkbox is not checked-take approriate action • end

39. 控件的使用举例3 • “文本框”控件(Edit Text)的响应 • 在图形界面中添加该控件之后，该控件的属性相当于其他语言设计中的文本框属性，允许用户动态地编辑或是输入文本字符串。 • 如果需要获取用户在文本框中输入的字符串，可以在响应程序中输入如下代码： • function edittext1_Callback(hObject, eventdata, handles) • user_string = get(hObject,'string'); • % proceed with callback..

40. （4）使用句柄结构进行GUI数据操作 • GUIDE提供了一种机制来存储和检索共享的数据，这些操作都通过包含有GUI控件句柄的相同结构来实现，这种机制就称为句柄结构。 • 句柄结构包含有GUI的所有控件的句柄，它在M文件中被传递给每一个响应。因此，该响应对保存任意共享数据十分有用。

41. 7. example Creating Graphical User Interfaces Open a New GUI in the Layout Editor Set the GUI Figure Size Select Property Inspector from the View menu. Reset the Units property to characters. Add the Components Add the panel and push buttons to the GUI. (A panel Three push buttons)

42. Add the remaining components to the GUI. (A static text A pop-up menu An axes)

43. Align the Components

44. Setting Properties for GUI Components In the field next to Name, type Simple GUI,

45. A panel's Title property controls the title that appears at the top or bottom of the panel. In the field to the right of Title, change Panel to Plot Types. String Property for Push Buttons and Static Text select the push button in the Layout Editor and then, in the Property Inspector, come to String. In the field to the right of String, change Push Button to Surf, Similarly, change the String property of the middle push button to Mesh, the bottom push button to Contour, and the Static Text to Select Data. String Property for Pop-Up Menus A pop-up menu's String property controls the list of menu items. click the icon next to String opens the String property edit box. Delete Pop-up Menu in the String property edit box, and type peaks, membrane, and sinc on three separate lines

47. Callback Properties The Opening Function Note that GUIDE names the opening function with the name of the M-file prefixed to _OpeningFcn. % Create the data to plot handles.peaks=peaks(35); handles.membrane=membrane; [x,y] = meshgrid(-8:.5:8); r = sqrt(x.^2+y.^2) + eps; sinc = sin(r)./r; handles.sinc = sinc; handles.current_data = handles.peaks; surf(handles.current_data)

48. Push Button Callbacks Using the Object Browser to Identify Callbacks Surf push button callback: % Display surf plot of the currently selected data surf(handles.current_data); Add this code to the Mesh push button callback: % Display mesh plot of the currently selected data mesh(handles.current_data); Add this code to the Contour push button callback: % Display contour plot of the currently selected data contour(handles.current_data);

49. Pop-up Menu Callback The pop-up menu enables users to select the data to plot. Add the following code to the plot_popup_Callback after the comments following the function definition. val = get(hObject,'Value'); str = get(hObject, 'String'); switch str{val}; case 'peaks' % User selects peaks handles.current_data = handles.peaks; case 'membrane' % User selects membrane handles.current_data = handles.membrane; case 'sinc' % User selects sinc handles.current_data = handles.sinc; end guidata(hObject,handles)

50. axes(handles.Axes_01);