ch09_图形用户界面（GUI）.doc

第 9 章 图形用户界面GUI图形用户界面（Graphical User Interfaces ，GUI）是由窗、轴、按键、菜单、工具图标、文字说明等对象（Objects）构成的一个用户界面。用户通过鼠标或键盘选择、激活这些图形对象，实现计算、绘制图表和产生动画等。图形用户界面不仅形象生动、界面友善、操控灵活，而且为人们提供了定性定量结合、局域全域结合、时域频域结合、模拟数字结合的数据探索、科学分析的仿真平台。图形用户界面的出现，使过往视为经典的一些方法和技巧逐趋暗淡失色，而新的方法和技巧则日渐彩华升腾，人们的研发理念和思维方式已经和正在发生深刻的变化。本书作者正是出于这种认识组织本章内容的。图形用户界面开发工具（Graphical User Interface Development Environment，GUIDE），简称界面开发工具，是一种程式性的设计工具。使用GUIDE设计界面遵循一定的设计步骤，而较少依赖技巧。MATLAB 新版本倡导使用GUIDE开发图形用户界面。为此，本章以四个节次五个算例介绍了GUIDE的功能和用法、界面控件的机理和属性、各种控件、菜单、图标的详细制作步骤。与此同时，本章还有少量篇幅用以介绍“图形用户界面的手工设计法”。编写这部分内容的目的在于：一，其本身简明；二，它能帮助读者更好地理解用户界面的工作机理。本章所有算例界面都是彩色的，请读者从随书光盘mbook目录上的“ch09_图形用户界面.doc”文件中查看；而实现界面所需的带exm前缀文件名的M文件和FIG文件则都存放在随书光盘mfile目录上。9.1 设计原则和一般步骤9.1.1 设计原则9.1.2 一般制作步骤9.2 借助GUIDE创建GUI9.2.1 GUIDE通览 1 GUIDE的启动图9.2-1 显示模板预览的GUIDE Quick Start对话窗 2 Preferences 设置对版面编辑器的影响图9.2-2 带空白模板的GUIDE 3 GUIDE的功能分区（1）版面设计区（2）工具条和菜单条 4 待设计用户界面的性状预设图9.2-3 未来界面窗性状设置对话窗（1）未来界面窗的缩放性（2）未来界面窗的访问权限（3）涉及界面窗的其他设置 5 设计区的坐标参照和位置编排器（1）版面设计区的坐标参照系图9.2-4 “格尺”对话框（默认状态）图9.2-5 设计辅助工具和功能（2）组件位置编排器图9.2-6 编排器对三个组件进行对中处理 6 控件组件属性值的初始设置（1）控件或组件属性值初始设置的必要性（2）在GUIDE中设置控件或组件属性值的方式（3）对象属性观察器的引出（4）属性观察器简介（图9.2-7）图9.2-7 属性观察器示例 7 创建界面的文件保存和再命名（1）对应GUIDE创建界面的两个伴生文件（2）GUIDE所创建界面的保存操作图9.2-8 激活保存操作提示对话框（3）GUIDE自动生成文件的再命名9.2.2 控件的运作机理及创建用于构建用户界面的组件（Components）中，有一类可专称为控件（Controls）。其原因在于：它们都是借助uicontrol用户界面控件指令（User Interface Controls）制作而成的。它们的特征都是由Style等属性被赋予不同“值”后形成的。这些控件的模板被排列在GUIDE左侧的模板区内，参见图9.2-5。为帮助读者更好地掌握和运用控件，本节将分三小节展开。第一小节，通过对各控件关键属性、操作方法、触发回调、回调子函数程式和控件外形变化的关联性阐述，深入浅出地剖析控件的运作机理和使用要领。第二小节，介绍常需读者动手设置的若干通用属性。第三小节，提供典型算例，供读者体验和参考。 1 各控件的运作机理 2 常需设置的控件通用属性9.2.3 GUI界面的创建示例 1 二阶系统阶跃响应演示界面【例9.2-1】为归一化二阶系统单位阶跃响应制作制作如图9.2-9所示的用户界面。要求：（1）通过编辑框和滑键都能输入阻尼比。（2）刚启动的界面初始形态如图9.2-9所示。（3）在刚启动的初始界面上，响应曲线用红线绘制；而一旦界面被操作，则响应曲线将用蓝线绘制。（4）在列表框中的三个选项可以任意组合。图9.2-9 用户界面的初始状态（1）GUIDE的开启图9.2-10 设计本例用户界面的GUIDE（2）对未来界面窗属性设置图9.2-11 窗属性编辑器（3）辅助设计功能的引入（4）根据题目要求进行界面构建图9.2-12 执行文件尚未填写时的生成界面（5）由GUIDE自动产生的exm090201.m文件结构（6）编写界面开启程序function exm090201_OpeningFcn(hObject, eventdata, handles, varargin)% This function has no output args, see OutputFcn.% hObject handle to figure% eventdata reserved - to be defined in a future version of MATLAB% handles structure with handles and user data (see GUIDATA)% varargin command line arguments to exm090201 (see VARARGIN)%U_Start -U Start zeta=0.3; set(handles.edit1,String,num2str(zeta)set(handles.slider1,Value,zeta) set(handles.gridon,Value,0) set(handles.gridoff,Value,1) set(handles.listbox1,Value,1) handles.t=0:0.05:15; %handles.Color=Red; %handles.zeta=zeta;%handles.flag=0; handles=surfplot(handles);%handles.flag=1; %handles.Color=Blue; %U_End -U Endhandles.output = hObject;%guidata(hObject, handles);（7）可编辑框的回调子函数function edit1_Callback(hObject, eventdata, handles)% hObject % eventdata reserved - to be defined in a future version of MATLAB% handles %U_Start-U_Startsz=get(hObject,String); %zeta=str2double(sz); %set(handles.slider1,Value,zeta) handles.zeta=zeta;%handles=surfplot(handles); guidata(hObject, handles);%U_End-U_End（8）滑键回调子函数function slider1_Callback(hObject, eventdata, handles)%U_Start-U_Startzeta=get(hObject,Value);%set(handles.edit1,String,num2str(zeta)%handles.zeta=zeta;%handles=surfplot(handles);%guidata(hObject, handles);%U_End-U_End（9）无线电按键回调子函数function gridon_Callback(hObject, eventdata, handles)%U_Start-U_Startset(handles.gridoff,Value,0)grid on%U_End-U_End function gridoff_Callback(hObject, eventdata, handles)%U_Start-U_Startset(handles.gridon,Value,0)grid off%U_End-U_End（10）列表框回调子函数function listbox1_Callback(hObject, eventdata, handles)%U_Start-U_Startlistindex=get(hObject,Value);%if any(listindex=1) set(handles.listbox1,Value,1)endhandles.flag=0;%handles=surfplot(handles);handles.flag=1;%guidata(hObject, handles);%U_End-U_End（11）绘图子函数function handles=surfplot(handles)% handles=surfplot(handles)% handleszeta=handles.zeta;t=handles.t;listindex=get(handles.listbox1,Value);Nt=length(t);if handles.flag=0 clazmin=get(handles.slider1,Min);zmax=get(handles.slider1,Max);zt=zmin:0.05:zmax; Nz=length(zt); ZT,T=meshgrid(zt,t); Y=zeros(Nt,Nz); for k=1:Nz Y(:,k)=step(tf(1,1,2*zt(k),1),t); end surface(ZT,T,Y) shading flatelse delete(handles.g1) delete(handles.rline)endxz=ones(1,Nt)*zeta;y1=ones(1,Nt)*1;y=step(tf(1,1,2*zeta,1),t);gz=zeta,zeta,xz,zeta,zeta,xz;gt=t(1),t(1),t,t(end),t(end),fliplr(t);gy=0,1,y1,1,0,0*y1;handles.g1=line(gz,gt,gy,Color,g,LineWidth,1);% handles.rline=line(xz,t,y,Color,handles.Color,LineWidth,2);K=length(get(handles.listbox1,Value);for jj=1:K switch listindex(jj)% case 1 case 2 k95=min(find(y0.95);k952=(k95-1),k95; t95=interp1(y(k952),t(k952),0.95); line(zeta,t95,0.95,marker,+,markeredgecolor,k,markersize,6); case 3 ym,km=max(y); if km0 line(zeta,t(km),ym,marker,.,markeredgecolor,k,markersize,5); end case 4ii=max(find(abs(y-1)0.05); if iiNt line(zeta,t(ii+1),y(ii+1),Color,r,Marker,o,MarkerSize,5) end endendxlabel(zeta)ylabel(t)zlabel(y)alpha(0.7)view(75,44)（12）用户界面的运行图9.2-13 显示列表框全部选项的界面示例 2 多指令输入的演示界面【例9.2-2】制作一个用户界面，该界面启动后的初始状态如图9.2-14所示。界面上的图形，由可编辑框中输入的指令生成。本例目的：演示可编辑框的“多行字符输入”使用法；演示弹出框的“选项行字符”使用法；演示检录框、切换键、按键的使用方法。图9.2-14 题目要求的用户界面初始态（1）在GUIDE中进行界面配置图9.2-15 在GUIDE上进行界面设计（2）界面执行文件的完整化function exm090202_OpeningFcn(hObject, eventdata, handles, varargin)%U_Start-U_StartclaCH=get(handles.edit1,String);%Nch=size(CH,1);for n=1:Ncheval(CHn);% % end%ic=get(handles.popupmenu1,Value);% clm=get(handles.popupmenu1,String);% colormap(clmic)% set(handles.togglebutton1,Value,1)set(handles.togglebutton1,String,Axis off)%U_End-U_Endhandles.output = hObject;guidata(hObject, handles);function edit1_Callback(hObject, eventdata, handles)%U_Start-U_StartCH=get(hObject,String);%Nch=size(CH,1);%for n=1:Nch eval(CHn);%end%U_End-U_Endfunction popupmenu1_Callback(hObject, eventdata, handles)%U_Start-U_Startic=get(hObject,Value);% clm=get(hObject,String);% colormap(clmic)% %U_End-U_Endfunction checkbox1_Callback(hObject, eventdata, handles)%U_Start-U_Startif get(hObject,Value) grid onelse grid offend%U_End-U_Endfunction checkbox2_Callback(hObject, eventdata, handles)%U_Start-U_Startif get(hObject,Value) box onelse box offend%U_End-U_Endfunction togglebutton1_Callback(hObject, eventdata, handles)%U_Start-U_StartVTB=get(hObject,Value);%if VTB% axis off set(hObject,String,Axis on) set(handles.checkbox1,Enable,off) set(handles.checkbox2,Enable,off)else % axis on set(hObject,String,Axis off) set(handles.checkbox1,Enable,on) set(handles.checkbox2,Enable,on)end%U_End-U_Endl 按键回调子函数function pushbutton1_Callback(hObject, eventdata, handles)%U_Start-U_Startclose(handles.figure1)%U_End-U_End（3）完成界面的创建9.2.4 界面菜单和工具图标的创建 1 标准菜单条和工具条的配置【例9.2-3】在例9.2-1产生的界面上，配置MATLAB标准图形窗菜单，并对曲面上的特征点轨迹给以注释，如图9.2-16。本例演示：如何利用已有界面制作新界面；通过对界面窗“MenuBar”和“ToolBar”属性的设置，产生标准菜单条和工具条；“静态文本框”内容的动态变化。 图9.2-16 带标准菜单和文字注释的图形用户界面（1）利用已有界面制作新界面（2）利用属性编辑器为界面配置标准菜单条和工具条（3）按本题要求修改原界面（4）修改exm090203.m文件function edit1_Callback(hObject, eventdata, handles)% hObject % eventdata reserved - to be defined in a future version of MATLAB% handles %U_Start-U_Startlistindex=get(handles.listbox1,value);sz=get(hObject,String); %zeta=str2double(sz); %set(handles.slider1,Value,zeta) handles.zeta=zeta;%handles=surfplot(handles); guidata(hObject, handles);%U_End-U_End表9.2-13 surfplot子函数修改前后的对照原surfplot子函数的最后五条指令xlabel(zeta)ylabel(t)zlabel(y)alpha(0.7)view(75,44)修改后surfplot的最后七条指令annotation= ;! 黑十字线是“上升时间点”的轨迹;! 小黑点线是“最大峰值点”轨迹;! 小红圈线是“镇定时间点”轨迹;set(handles.mark,String,annotation(listindex)xlabel(zeta)ylabel(t)zlabel(y)alpha(0.7)view(75,44)（4）本例界面与例9.2-1界面的不同 2 定制菜单的创建和变量handles的观察【例9.2-4】以例9.2-3制作的界面为基础，进行修改，创建定制菜单。本例有两个目的：为用户界面配置定制菜单；用来控制界面上坐标框是否封闭，参见图9.2-17。本例演示：定制菜单的制作步骤；菜单编辑器的使用及其回调子函数的编写；实现子函数间参数传递的handles变量的观察。图9.2-17 带定制菜单的用户界面（1）以exm090203用户界面为基础制作新界面（2）定制菜单在菜单编辑器中的创建图9.2-18 菜单编辑器的外形和功能分区（3）定制菜单项回调子函数的编写function boxon_Callback(hObject, eventdata, handles)%U_Start-U_Startbox on set(handles.boxon,Enable,off) set(handles.boxoff,Enable,on) %U_End-U_Endfunction boxoff_Callback(hObject, eventdata, handles)%U_Start-U_Startbox off set(handles.boxoff,Enable,off) set(handles.boxon,Enable,on) %U_End-U_End（4）保存M文件，完成创建图9.2-19 handles的结构和保存内容 3 现场菜单创建和Tag属性应用【例9.2-5】在例9.2-4产生的界面exm090204为基础，制作一个与坐标相关联的现场菜单，对响应曲线的颜色进行设置。本例要求的界面见图9.2-20。本例演示：借助GUIDE创建现场菜单的步骤；菜单编辑器的使用及其回调子函数的编写；借助GUI数据，管理和共享色彩数据；图形对象专用名属性Tag的应用。图9.2-20 带现场菜单和预定义工具图标的图形用户界面（1）以exm090204用户界面为基础制作新界面（2）现场菜单在菜单编辑器中的创建图9.2-21 创建现场菜单及其菜单项的菜单编辑器（3）使现场菜单与界面上的轴对象相关联（4）编写各现场菜单项的回调子函数function cyan_line_Callback(hObject, eventdata, handles)%U_Start-U_Startset(handles.rline,Color,Cyan)%set(handles.cyan_line,Checked,on)set(handles.magenta_line,Checked,off)set(handles.black_line,Checked,off)set(handles.blue_line,Checked,off)handles.Color=Cyan;%guidata(hObject, handles);%U_End-U_Endfunction magenta_line_Callback(hObject, eventdata, handles)%U_Start-U_Startset(handles.rline,Color,Magenta)set(handles.cyan_line,Checked,off)set(handles.magenta_line,Checked,on)set(handles.black_line,Checked,off)set(handles.blue_line,Checked,off)handles.Color=Magenta;guidata(hObject, handles);%U_End-U_Endfunction black_line_Callback(hObject, eventdata, handles)%U_Start-U_Startset(handles.rline,Color,Black)set(handles.cyan_line,Checked,off)set(handles.magenta_line,Checked,off)set(handles.black_line,Checked,on)set(handles.blue_line,Checked,off)handles.Color=Black;guidata(hObject, handles);%U_End-U_Endfunction blue_line_Callback(hObject, eventdata, handles)%U_Start-U_Startset(handles.rline,Color,Blue)set(handles.cyan_line,Checked,off)set(handles.magenta_line,Checked,off)set(handles.black_line,Checked,off)set(handles.blue_line,Checked,on)handles.Color=Blue;guidata(hObject, handles);%U_End-U_End（5）实现响应曲线的多色彩选择时M文件的工作机理9.3 全手工编程创建GUI在GUIDE辅助下得到的界面由两个伴生文件体现。界面及其组件的生成参数在FIG文件中，其码不可读；体现界面及其组件所发生的“事件”的程序在M文件中，它可读。由于这个原因，读者无法从GUIDE辅助产生的文件中看到“体现界面的码的全貌”，从而阻碍了读者对界面生成机理的洞悉。全手工编写的程序包含了生成界面的全部信息，如组件的几何属性、标识属性、回调属性等。文件源码透明，界面生成文件简洁，界面工作机理勾画清晰。基于此，本书作者建议读者不要轻易放过本节内容。不论是GUIDE辅助编程，还是全手工编程，用户界面的创建过程还是大抵相同的：先在纸上进行界面几何布局设计；然后在MATLAB环境中编写生成界面组件布置的程序；再编写各控件的回调函数；最后进行检验确认。本节内容着重于程序的编写，请读者阅读时，特别注意注释。本节有两小节：第一小节介绍创建界面的M脚本文件的编写；第二小节介绍内容创建界面的嵌套函数的编写。9.3.1 采用M脚本文件创建用户界面【例9.3-1】采用手工编写的M脚本文件创建一个与例9.2-2功能相同的用户界面（见图9.2-14），并且以“exm090301由全手工编写的脚本M文件所创建的用户界面”作为该界面的名称。本例演示：如何通过指令直接描述界面及其控件的类型、位置、颜色、名称等；如何编写Callback属性的回调函数。（1）界面轮廓设计（2）根据草图编写% exm090301_1.mclosetitlestr=exm090301由全手工编写的脚本 M 文件所创建的用户界面;handles.figure=figure(unit,normalized,position,0.3,0.3,0.428,0.540,. Color,0.836,0.816,0.784,.% menubar,none,. numbertitle,off,. defaultuicontrolunits,normalized,. defaultuicontrolhorizontal,left,. name,titlestr);handles.axes=axes(Units,normalized,position,0.07,0.372,0.645,0.554,. FontUnits,normalized,FontSize,0.055,visible,on);handles.edit=uicontrol(Style,edit,. position,0.141,0.043,0.502,0.230,. BackgroundColor,1,1,1);handles.pop=uicontrol(style,popup,. position,0.766,0.852,0.18,0.074,. BackgroundColor,1,1,1, string,spring;summer;autumn;winter,. FontUnits,normalized,FontSize,0.43);handles.check1=uicontrol(Style,checkbox,. position,0.784,0.593,0.145,0.074,. string,Grid on, FontUnits,normalized,FontSize,0.43); handles.check2=uicontrol(Style,checkbox,. position,0.784,0.498,0.145,0.074,. string,Box on, FontUnits,normalized,FontSize,0.43);handles.toggle=uicontrol(Style,togglebutton,. position,0.766,0.352,0.18,0.074,. string,Axes off, FontUnits,normalized,FontSize,0.43);handles.push=uicontrol(Style,pushbutton,. position,0.766,0.117,0.18,0.074,. string,Close, FontUnits,normalized,FontSize,0.43);图 9.3-1 手工编写程序生成的静态界面（3）编写反映状态和回调动作的M码% exm090301_2.mclosetitlestr=exm090301由全手工编写的脚本M文件所创建的用户界面;handles.figure=figure(unit,normalized,position,0.3,0.3,0.428,0.540,. Color,0.836,0.816,0.784,. menubar,none,. numbertitle,off,. defaultuicontrolunits,normalized,. defaultuicontrolhorizontal,left,. name,titlestr);handles.axes=axes(Units,normalized,position,0.07,0.372,0.645,0.554,. FontUnits,normalized,FontSize,0.055,visible,on);edit_str=% 所示界面是运行下列指令的结果;.% ezsurf(x2*exp(-x2