1、实验八 图形用户界面设计实验八 图形用户界面(GUI)设计（说明：本次实验在4学时内独立完成）一、实验目的 1. 熟悉各种控件和界面菜单的制作。 2. 学会编写控件对象的回调程序（callback函数）。 3. 熟练使用GUI开发工具GUIDE设计用户界面。二、实验预备知识图形用户界面(Graphical User Interface，简称GUI) 是指由窗口、光标、按键、菜单、文字说明等对象构成的一个人与计算机的交互界面。用户通过一定的方法（如鼠标或键盘）选择、激活这些图形对象，使计算机产生某种动作或变化，比如实现计算、绘图等。GUI的最重要组成是用户菜单(uimenu)和用户控件(uico
2、ntrol)。关于界面菜单，可以参考课件相关部分的介绍，这里主要介绍控件的类型、属性和制作方法。1. 用户控件的类型控件是事件响应的图形对象。当某一事件发生时，应用程序会做出响应并执行某些预定的功能子程序（即回调函数Callback）。MATLAB中有10种不同类型的控件(下图)：单功能按钮(Push Button)；单选按钮(Radio Button)；双位按钮(Toggle Button)；复选框(Check Box)；列表框(List Box)；弹出框(Popup Menu)；静态文本框(Static Text)；可编辑文本框(Edit Text)；滑标或滚动条(Slider)；框架(F
3、rame)。这些控件大致可分为两种，一种为动作控件，鼠标点击这些控件时会产生相应的响应；一种为静态控件，是不产生响应的控件，如静态文本框等。 表1给出了各种控件的描述。2. 用户控件的属性每种控件都有一些可以设置的属性参数，用于表现控件的外形、功能及效果。属性由两部分组成：属性名和属性值，它们必须是成对出现的。用户可以在创建控件对象时，设定其属性值，未指定时将使用系统缺省值。 下面介绍部分较常用的控件属性： Tag 取值为字符串，定义了控件的标识(标签)，在任何程序中都可 以通过这个标识控制该控件对象。 Style 表明控件对象的类型，取值为表1所列10种当中之一。 String 定义控件对象
4、的标题或选项内容（即控件上用户想要显示的内容），取值为字符串或数组。 Units 单位属性，取值可以是pixels, normalized(归一化), inches, centimeters或 points。GUI设计时经常使用归一化单位。表1：各种控件的外形、特征及应用 Position 指明控件的位置。其值是4元素向量left bottom width height, 前2个指明控件左下角在其父对象(一般是图形窗)左下角的位置，后两个指明控件的高度和宽度。这些值的单位由Units属性给出。 Max 控件的最大值属性，其值为一标量，不同的控件类型有不同的最大值属性。默认值是1。对于滑标(滚动
5、条)，Max属性值定义了滑标的最大值；对于弹出式菜单，则定义了最大下标值；对于可编辑文本框，当MaxMin 1 时，可编辑多行文本。 Min 控件的最小值属性，其值为一标量，不同的控件类型有不同的最小值属性。默认值是0。对于滑标，Min属性值定义了滑标的最小值；对于弹出式菜单，则定义了最小下标值。 Value 控件的当前值属性，其值为一标量或向量，取决于控件类型。单选按钮以及复选框被选中（on 态）时，其当前值属性Value的属性值应设定为Max属性的值（即该控件类型的最大值）；反之未被选中时（off态，默认），则Value属性设定为Min的属性值。对于滑标，其Value属性值的设置范围是Mi
6、n, Max；对于弹出式菜单，把Value值设置为1时，表示选中第一项，设置2则选中第二项，以此类推，反之，选中第一项，则弹出菜单的value值为1，.；文本对象和功能按钮无此属性。 Callback 回调属性，其值为字符串,可以是某个M文件名或一小段MATLAB语句，当用户激活某个控件对象时，系统就计算该属性的值（即执行字符串里的内容，通常是一段程序），使控件产生动作。后面将重点介绍callback程序的编写。3. 制作用户控件用户控件通过使用命令uicontrol来制作，其使用格式为：H=uicontrol(H_parent,PN,PV,)其中，H是用户控件的句柄，H_parent是其父对
7、象句柄。PN,PV为(属性名，属性值)二元组，用来定义控件的属性。例1：h1=uicontrol(gcf,style,radio,string,斜体, units,.normalized,position,0.6 0.4 0.1 0.05)；% 用uicontrol指令在当前窗口创建一个单选按钮(radiobutton)set(h1,Value,get(h1,Max); % 单选按钮“斜体”默认为选中状态h2=uicontrol(gcf,style,slider,Max,2.02,Min,0.02,.sliderstep,0.01 0.05,value,0.5,units,normalized
8、,.position,0.6 0.48 0.2 0.05);% 该语句创建了一个滑标，其中Max和Min属性的值决定了滑标表示的数值的上下限，即0.02 2.02。滑标的sliderstep属性是一个二元数组，第一个元素决定由两端箭头操纵滑动时的步长(微调)，本例为0.01(2.020.02)；第二个元素决定游标操纵滑动时的步长(粗调)，本例为0.05(2.020.02)。h3=uicontrol(gcf,style,text,string,当前滑标值=0.5,. units,normalized,position,0.6 0.55 0.2 0.04); %创建文本框set(h2,callba
9、ck,z=get(gcbo,value);,set(h3,string,当前滑标值=,num2str(z); % 在文本框显示滑标当前值；gcbo 返回当前正在执行回调动作的对象(此处是h2)的句柄h_check1=uicontrol(gcf,style,checkbox,string,.最大峰值,units,normalized,position,0.6 0.32 0.2 0.04);h_check2=uicontrol(gcf,style,checkbox,string,上升时间(0-0.95),units,normalized,position,.0.6 0.25 0.2 0.04);
10、% 创建2个复选框程序运行结果如图所示，若只勾选第一个复选框“最大峰值”，则该控件的当前值value等于最大值Max(=1)，第二个复选框的当前值value值则等于最小值Min(=0)。在命令窗口输入get(h_check1,value)以及get(h_check2,value)可以查看到两个复选框的当前值。5. 编写回调函数设置控件之后，要想让控件产生动作，完成用户的意图就需要合理设置控件的回调属性(callback)，把能完成用户意图的一条或几条Matlab指令以字符串(i.e.加单引号对)的形式设置为callback的属性值，如例1中：set(h2,callback,z=get(gcbo
11、,value);,set(h3,string,当前滑标值=,num2str(z); % 单引号中的双引号代表单引号滑标对象h2的callback属性值（单引号对中的内容）包含下列2条指令z=get(gcbo,value);set(h3,string,当前滑标值=,num2str(z)；% 用构成字串矩阵这两条指令的目的是把滑标选择的数值实时地在文本框h3中显示出来。第一条指令是获取当前正在执行回调动作的对象（即滑标的移动）的当前值value，第二条指令是把该值作为文本框（h3是其句柄）的显示字串。注意，这里z是数值，把它显示为字符时，要用num2str函数先转换成字符型数据。如果回调属性有较多
12、条Matlab语句，为了提高效率，一般把它们集中写成一个函数M文件，称之为回调函数（callback函数）。其一般格式：上例中，如果把回调程序写成M文件，则代码如下：function callslider(h2,h3)z=get(h2,value);set(h3,string,当前滑标值=,num2str(z)；相应地，callback属性值应改为回调函数名：set(h2,callback,callslider(h2,h3);该指令将调用回调函数，并把滑标句柄h2和文本框句柄h3传递给回调函数的输入参数。6. GUI开发环境(GUI Development Environment, GUIDE
13、)MATLAB提供了一套可视化的创建图形用户界面的工具GUIDE，使用GUIDE可方便的创建GUI应用程序，无需用户编写繁琐的控件和菜单的创建程序。它可以根据用户设计的GUI布局，自动生成M文件的框架，用户使用这一框架编制自己的应用程序。 打开GUI开发工具GUIDE的方法：在命令窗口输入guide，出现下图所示的对话窗。点选Blank GUI(Default)，再点OK，引出GUI空白界面编辑器，如下图所示。图中左侧的“对象模板区”呈现的所有控件和组件的默认外形，若想使控件、组件图标和其名称一起显示，应采用下列步骤设置： 点击界面编辑器的菜单项File-Preference，引出GUI选项设
14、置界面； 勾选“Show names in component palette”项，再点击OK；一般来说，在利用界面编辑器设计应用界面之前，应根据任务要求绘制应用界面的草图，合理地布局各个控件，然后再使用界面编辑器设计、制作自己的GUI界面。图：GUI界面编辑器三、实验内容及要求1. 实例练习一上机练习指导书中例1的程序，初步熟悉控件的制作、控件属性的设置以及回调函数的编写。2. 实例练习二 电子波动性MATLAB仿真的界面设计 练习给实验五设计GUI界面。界面要求如下： 缝宽a，缝间距b，观察屏的距离D以及加速电压U通过界面输入； 可选择电子数N=200、N=2000、N=20000； 可选
15、择绘制概率密度的理论分布曲线； 能设置坐标轴背景色和电子颜色。界面布局(草图)如图所示。需使用的控件清单： 1个轴对象 (Axes，用于显示图形)、5个静态文本框(Static text，注释用。一个显示标题，其余四个显示参数名)、4个编辑框(Edit text，用于输入参数值)、1个弹出框(Popup menu，提供电子数的3种互斥选项)、1个单选按钮(Radio button)、1个单功能按钮(Push button，用于运行仿真)、2个界面菜单（用于颜色设置）。绘制好草图之后，进入GUIDE开发环境设计界面。具体步骤如下： 开启GUI界面编辑器 命令窗口输入guide指令，点选Blank
16、 GUI(Default)，引出GUI空白界面编辑器。 为界面设计工作区引入坐标参考系 目的是为了方便在界面上进行控件的布置。方法：点击界面编辑器菜单ToolsGrid and Rulers，弹出对话框，全部勾选即可（网格的大小可选）。 界面窗属性设置 拖拉界面设计工作区右下角的小黑方块句柄，使其长宽调整到希望的大小，它就是未来应用界面出现时的“默认大小”。 双击界面编辑器的设计工作区，引出“窗属性编辑器”（下图），设置下列属性值： Resize on % 该设置很重要，它决定未来界面窗是否可缩放 Units normalized % 采用归一化单位计量窗口大小和位置，缩放时将保持该比例 根据
17、要求进行界面的构建 按照前面的草图，布置各个控件和组件。 “轴”组件的创建 在对象模板区，点选“轴(Axes)”图标到设计工作区的适当位置； 用鼠标拉出适当大小的“轴位框”，以供绘制电子的衍射图形使用； 双击轴位框，引出“属性编辑器(Property Inspector)”，进行如下属性设置： Units normalized % 采用相对度量单位，缩放时保持轴与界面之间的比例 NextPlot add % 相当于hold on 功能，以添加的方式绘制多个电子图形Box on % 封闭轴位框XLim -5e-5 5e-5 % X轴范围YLim -4e-5 4e-5 % Y轴范围要注意Tag(标
18、签)属性的值，其默认值是Aexs1，可以改。在回调函数中就是通过这个标识名来控制该对象的。另外，通过改变Position属性的4个值（它们的单位是相对单位，即normalized），还可以精确调整轴位框的位置和大小（下同）。2 制作显示大标题的“静态文本框”控件所设计的GUI界面总计有5个静态文本框，一个用于显示大标题，其余四个显示仿真参数的名称。先介绍显示标题的静态文本框的制作，其余的后面介绍。 点选对象模板区的“Static Text”图标到设计工作区上端的适当位置，并用鼠标拉出适当的大小(提示：还可以在Position属性中精确调整其大小)。 双击静态文本框，引出属性编辑器，设置属性：U
19、nits normalized % 采用相对度量单位，窗缩放时保持与界面之间的比例 String 电子波动性的MATLAB仿真 % 显示大标题 Tag text1 % 该文本框的标识名，默认值text1，可以改 FontUnits normalized % 采用相对度量单位，窗缩放时保持字体大小比例 FontSize 0.5 % 框内字体的相对大小(框高度为1) FontWeight Bold % 粗体字 制作“组件盘”下面引入“组件盘(Panel)”作为仿真的参数区。在组件盘内集中布置4个显示仿真参数名的静态文本框和4个输入参数值的可编辑文本框以及1个弹出框（见草图）。 点选模板区的“组件盘
20、(Panel)”图标到轴位框右侧的适当位置（参见草图），并拉出适当的大小以容纳8个文本框和1个弹出框。 双击组件盘，引出属性编辑器，设置属性：Units normalized % 采用相对度量单位，缩放时保持与界面之间的比例 Tag uipanel1 % 默认值的标识名，可以改 Title 仿真参数 % 组件盘的标题 TitlePosition centertop % 标题位置 FontSize 9.0 % 框内字体的相对大小(单位points)顺便指出，当字体大小的单位选为normalized时，FontSize总显示为-1，而无法设置。 制作4个显示仿真参数名的“静态文本框”控件 点选4个
21、对象模板区的“Static Text”图标到组件盘的适当位置(参考草图)，并用鼠标拉出适当的大小。 双击其中第一个静态文本框，引出属性编辑器，设置属性：Units normalized % 采用相对度量单位，缩放时保持与界面之间的比例 String a(nm) % 缝宽a，单位nm Tag text2 % 该文本框的标识名，默认值text2，可以改 FontUnits normalized % 采用相对度量单位，缩放时保持字体大小比例 FontSize 0.6 % 框内字体的相对大小(框高度为1) 仿照上述方法，依次设置其余3个静态文本框的属性。 制作4个用于输入相应参数值的“可编辑文本框(E
22、dit Text)” 点选4个对象模板区的“Edit Text”图标到组件盘的适当位置(注意与相应参数对应，参考草图)，并用鼠标拉出适当的大小。 双击其中第一个文本框（用于输入参数a的值），引出属性编辑器，设置属性：Units normalized % 采用相对度量单位，缩放时保持与界面之间的比例 String 200 % 缝宽a为200nm Tag edit1 % 该文本框的标识名，默认值edit1，可以改 FontUnits normalized % 采用相对度量单位，缩放时保持字体大小比例 FontSize 0.5 % 框内字体的相对大小(框高度为1) 仿照上述方法，依次设置其余3个编辑
23、文本框的属性，各参数初始值：缝间距b=1m，加速电压U=1000V，观察屏距离D=0.25m。 制作“弹出框(Pop-up Menu)” 点选对象模板区的“Pop-up Menu”图标到组件盘的适当位置(参考草图)，并用鼠标拉出适当的大小。 双击弹出框，引出属性编辑器，设置属性：Units normalized % 采用相对度量单位，缩放时保持与界面之间的比例 String N=2000N=200N=20000 % 三种可供选择的电子数目，注意要写成3行的形式 Tag popupmenu1 % 该文本框默认的标识名，可以改 FontUnits normalized % 采用相对度量单位，缩放时
24、保持字体大小比例 FontSize 0.6 % 框内字体的相对大小(框高度为1) Value 1.0 % 弹出框的当前值属性的默认值，=1 默认选第一项，=2 选第二项，=3 第三项至此，组件盘内的快件都已制作完毕。如果拖动组件盘，则组件盘内所有的控件都将随之移动。注意，“先有组件盘，然后把控件放置在组件盘”的次序不能颠倒，否则各组件不会随之移动。 制作“按钮组(Button Group)” 草图中有2个按钮：单选按钮(radio button)和单功能按钮(push button)。类似于上面组件盘的引入，这里引入按钮组，将这2个按钮统统放置其中。这样整个界面显得干净，整齐。 点选模板区的“
25、按钮组(Button Group)”图标到组件盘下方的适当位置（参见草图），并拉出适当的大小以容纳至少2个按钮。 双击Button Group，引出属性编辑器，设置属性：Units normalized % 采用相对度量单位，缩放时保持与界面之间的比例 Tag uipanel2 % 默认值的标识名，可以改 Title % 按钮组的标题为空，也可设置 制作“单选按钮(Radio Button)” 点选模板区的“单选按钮(Radio Button)”图标到按钮组中的适当位置（参见草图），并拉出适当的大小。 双击单选按钮，引出属性编辑器，设置属性：Units normalized % 采用相对度量单
26、位，缩放时保持与界面之间的比例 String 概率密度理论曲线 % 注释字串 Tag radiobutton1 % 默认标识名 FontUnits normalized % 采用相对度量单位，缩放时保持字体大小比例 FontSize 0.55 % 框内字体的相对大小(按钮高度为1) Value 0 % 单选按钮当前值属性的默认值，=0 默认不选，=1 默认选取 制作“单功能按钮(Push Button)” 点选模板区的“单功能按钮(Push Button)”图标到按钮组中的适当位置（参见草图），并拉出适当的大小。 双击单功能按钮，引出属性编辑器，设置属性：Units normalized %
27、采用相对度量单位，缩放时保持与界面之间的比例 String 运行仿真 % 注释字串 Tag pushbutton1 % 默认标识名 FontUnits normalized % 采用相对度量单位，缩放时保持字体大小比例 FontSize 0.5 % 框内字体的相对大小(按钮高度为1) 9 制作界面菜单 点击GUI界面编辑器的菜单ToolsMenu Editor引入菜单编辑器，如下图所示。 点击菜单编辑器界面上的“New Menu”图标后，在编辑器的“Menu Bar”页左侧的菜单结构框里就出现未命名的菜单“Untitled1”。 点击未命名菜单“Untitled1”，在编辑器右侧的“菜单属性(
28、UIMenu Properties)”栏里，就会出现需要填写的若干属性条目。 填写或者勾选属性条目如下： Label 背景颜色 % 菜单名 Tag Menu1 % 菜单的标识，回调函数中通过该标识名控制该菜单 Enable this item 勾选 % 使该菜单可操作 再给“背景颜色”菜单创建2个子菜单：“黑色”和“白色”子菜单。点击菜单编辑器的工具图标，就会在菜单结构框的“背景颜色”菜单下衍生出一个未命名的子菜单“Untitled2”。在该子菜单的属性栏中设置：Label 黑色 % 子菜单名 Tag Menu11 % 子菜单的标识类似地，创建第二个子菜单“白色”菜单，其属性Label 白色
29、% 子菜单名 Tag Menu12 % 子菜单的标识 仿照上述方法，再创建一个名为“电子颜色”的顶层菜单，其下包含2个子菜单：“红色”和“白色”子菜单。菜单属性分别设置如下：Label 电子颜色 % 顶层菜单名 Tag Menu2 % 顶层菜单的标识Label 红色 % 第一个子菜单名 Tag Menu21 % 第一个子菜单的标识Label 白色 % 第二个子菜单名 Tag Menu22 % 第二个子菜单的标识制作后的菜单结构如图所示。至此，本题的GUI界面制作完毕。保存界面之后（文件名ElectronsWave_GUI），系统会生成2个文件，一个是.fig文件，用于保存界面的制作代码；另一个
30、是.m文件，用于编写回调函数。点击界面编辑器上的图标运行GUI界面，将出现草图所示的效果。但是，目前的应用界面还只是“静态”的界面，无法“动”起来。要想使得各个控件能执行用户的意图，必须编写回调函数（callback函数）。在系统生成的m文件中，包含有界面上各个控件的回调函数的模板，找到各个控件的回调函数，在其中做相应的更改即可。要正确编写回调函数，首先要了解GUIDE自动生成的ElectronWave_GUI.m文件的结构。 GUIDE自动生成的M文件的结构点击界面编辑器上的图标，可以打开ElectronWave_GUI .m文件。该M文件是一个主函数，内含若干个回调子函数，具体结构和相关说明如下： 主函数function varargout = ElectronsWave_GUI(varargin) 子函数 界面启动子函数和输出子函数 function ElectronsWave_GUI_OpeningFcn(hObject, eventdata, handles, varargin)function varargout = ElectronsWave_GUI_OutputFcn(hObject, even
