实验八图形用户界面设计.docx
- 文档编号:27833976
- 上传时间:2023-07-05
- 格式:DOCX
- 页数:25
- 大小:428.08KB
实验八图形用户界面设计.docx
《实验八图形用户界面设计.docx》由会员分享,可在线阅读,更多相关《实验八图形用户界面设计.docx(25页珍藏版)》请在冰豆网上搜索。
实验八图形用户界面设计
实验八 图形用户界面(GUI)设计
(说明:
本次实验在4学时内独立完成)
一、实验目的
1.熟悉各种控件和界面菜单的制作。
2.学会编写控件对象的回调程序(callback函数)。
3.熟练使用GUI开发工具GUIDE设计用户界面。
二、实验预备知识
图形用户界面(GraphicalUserInterface,简称GUI)是指由窗口、光标、按键、菜单、文字说明等对象构成的一个人与计算机的交互界面。
用户通过一定的方法(如鼠标或键盘)选择、激活这些图形对象,使计算机产生某种动作或变化,比如实现计算、绘图等。
GUI的最重要组成是用户菜单(uimenu)和用户控件(uicontrol)。
关于界面菜单,可以参考课件相关部分的介绍,这里主要介绍控件的类型、属性和制作方法。
1.用户控件的类型
控件是事件响应的图形对象。
当某一事件发生时,应用程序会做出响应并执行某些预定的功能子程序(即回调函数Callback)。
MATLAB中有10种不同类型的控件(下图):
①单功能按钮(PushButton);②单选按钮(RadioButton);③双位按钮(ToggleButton);④复选框(CheckBox);⑤列表框(ListBox);⑥弹出框(PopupMenu);⑦静态文本框(StaticText);⑧可编辑文本框(EditText);⑨滑标或滚动条(Slider);⑩框架(Frame)。
这些控件大致可分为两种,一种为动作控件,鼠标点击这些控件时会产生相应的响应;一种为静态控件,是不产生响应的控件,如静态文本框等。
表1给出了各种控件的描述。
2.用户控件的属性
每种控件都有一些可以设置的属性参数,用于表现控件的外形、功能及效果。
属性由两部分组成:
属性名和属性值,它们必须是成对出现的。
用户可以在创建控件对象时,设定其属性值,未指定时将使用系统缺省值。
下面介绍部分较常用的控件属性:
●Tag取值为字符串,定义了控件的标识(标签),在任何程序中都可
以通过这个标识控制该控件对象。
●Style表明控件对象的类型,取值为表1所列10种当中之一。
●String定义控件对象的标题或选项内容(即控件上用户想要显示的内容),取值为字符
串或数组。
●Units单位属性,取值可以是pixels,normalized(归一化),inches,centimeters或points。
GUI设计时经常使用归一化单位。
表1:
各种控件的外形、特征及应用
●Position指明控件的位置。
其值是4元素向量[leftbottomwidthheight],前2个指明控件左下角在其父对象(一般是图形窗)左下角的位置,后两个指明控件的高度和宽度。
这些值的单位由Units属性给出。
●Max控件的最大值属性,其值为一标量,不同的控件类型有不同的最大值属性。
默认值是1。
对于滑标(滚动条),Max属性值定义了滑标的最大值;对于弹出式菜单,则定义了最大下标值;对于可编辑文本框,当Max-Min>1时,可编辑多行文本。
●Min控件的最小值属性,其值为一标量,不同的控件类型有不同的最小值属性。
默认值是0。
对于滑标,Min属性值定义了滑标的最小值;对于弹出式菜单,则定义了最小下标值。
●Value控件的当前值属性,其值为一标量或向量,取决于控件类型。
单选按钮以及复选框被选中(on态)时,其当前值属性Value的属性值应设定为Max属性的值(即该控件类型的最大值);反之未被选中时(off态,默认),则Value属性设定为Min的属性值。
对于滑标,其Value属性值的设置范围是[Min,Max];对于弹出式菜单,把Value值设置为1时,表示选中第一项,设置2则选中第二项,以此类推,反之,选中第一项,则弹出菜单的value值为1,......;文本对象和功能按钮无此属性。
●Callback回调属性,其值为字符串,可以是某个M文件名或一小段MATLAB语句,当用户激活某个控件对象时,应用程序就运行该属性定义的子程序,使控件产生动作。
后面将重点介绍callback程序的编写。
3.制作用户控件
用户控件通过使用命令uicontrol来制作,其使用格式为:
H=uicontrol(H_parent,’PN’,PV,…)
其中,H是用户控件的句柄,H_parent是其父对象句柄。
PN,PV为(属性名,属性值)二元组,用来定义控件的属性。
例1:
h1=uicontrol(gcf,'style','radio','string','斜体','units',...
'normalized','position',[0.60.40.10.05]);
%用uicontrol指令在当前窗口创建一个单选按钮(radiobutton)
set(h1,’Value’,get(h1,’Max’));%单选按钮“斜体”默认为选中状态
h2=uicontrol(gcf,'style','slider','Max',2.02,'Min',0.02,...
'sliderstep',[0.010.05],'value',0.5,'units','normalized',...
'position',[0.60.480.20.05]);
%该语句创建了一个滑标,其中Max和Min属性的值决定了滑标表示的数值的上下限,即[0.022.02]。
滑标的sliderstep属性是一个二元数组,第一个元素决定由两端箭头操纵滑动时的步长(微调),本例为0.01×(2.02-0.02);第二个元素决定游标操纵滑动时的步长(粗调),本例为0.05×(2.02-0.02)。
h3=uicontrol(gcf,'style','text','string','当前滑标值=0.5',...
'units','normalized','position',[0.60.550.20.04]);%创建文本框
set(h2,'callback',['z=get(gcbo,''value'');','set(h3,''string'',[''当前滑标值='',num2str(z)])']);
%在文本框显示滑标当前值;gcbo返回当前正在执行回调动作的对象(此处是h2)的句柄
h_check1=uicontrol(gcf,'style','checkbox','string',...
'最大峰值','units','normalized','position',[0.60.320.20.04]);
h_check2=uicontrol(gcf,'style','checkbox','string',…
'上升时间(0->0.95)','units','normalized','position',...
[0.60.250.20.04]);%创建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,''value'');','set(h3,''string'',[''当前滑标值='',num2str(z)])']);%单引号中的双引号代表单引号
滑标对象h2的callback属性值(单引号对中的内容)包含下列2条指令
z=get(gcbo,'value');
set(h3,'string',['当前滑标值=',num2str(z)]);%用[]构成字串矩阵
这两条指令的目的是把滑标选择的数值实时地在文本框h3中显示出来。
第一条指令是获取当前正在执行回调动作的对象(即滑标的移动)的当前值value,第二条指令是把该值作为文本框(h3是其句柄)的显示字串。
注意,这里z是数值,把它显示为字符时,要用num2str函数先转换成字符型数据。
如果回调属性有较多条Matlab语句,为了提高效率,一般把它们集中写成一个函数M文件,称之为回调函数(callback函数)。
其一般格式:
上例中,如果把回调程序写成M文件,则代码如下:
functioncallslider(h2,h3)
z=get(h2,'value');
set(h3,'string',['当前滑标值=',num2str(z)]);
相应地,callback属性值应改为回调函数名:
set(h2,'callback',’callslider(h2,h3)’);
该指令将调用回调函数,并把滑标句柄h2和文本框句柄h3传递给回调函数的输入参数。
6.GUI开发环境(GUIDevelopmentEnvironment,GUIDE)
MATLAB提供了一套可视化的创建图形用户界面的工具GUIDE,使用GUIDE可方便的创建GUI应用程序,无需用户编写繁琐的控件和菜单的创建程序。
它可以根据用户设计的GUI布局,自动生成M文件的框架,用户使用这一框架编制自己的应用程序。
打开GUI开发工具GUIDE的方法:
在命令窗口输入guide,出现下图所示的对话窗。
点选BlankGUI(Default),再点OK,引出GUI空白界面编辑器,如下图所示。
图中左侧的“对象模板区”呈现的所有控件和组件的默认外形,若想使控件、组件图标和其名称一起显示,应采用下列步骤设置:
●点击界面编辑器的菜单项File->Preference,引出GUI选项设置界面;
●勾选“Shownamesincomponentpalette”项,再点击OK;
一般来说,在利用界面编辑器设计应用界面之前,应根据任务要求绘制应用界面的草图,合理地布局各个控件,然后再使用界面编辑器设计、制作自己的GUI界面。
图:
GUI界面编辑器
三、实验内容及要求
1.实例练习一
上机练习指导书中例1的程序,初步熟悉控件的制作、控件属性的设置以及回调函数的编写。
2.实例练习二——电子波动性MATLAB仿真的界面设计
练习给实验五设计GUI界面。
界面要求如下:
①缝宽a,缝间距b,观察屏的距离D以及加速电压U通过界面输入;
②可选择电子数N=200、N=2000、N=20000;
③可选择绘制概率密度的理论分布曲线;
④能设置坐标轴背景色和电子颜色。
界面布局(草图)如图所示。
其中使用:
1个轴对象(Axes,用于显示图形)、5个静态文本框(Statictext,注释用。
一个显示标题,其余四个显示参数名)、4个编辑框(Edittext,用于输入参数值)、1个弹出框(Popupmenu,提供3种互斥选项)、1个单选按钮(Radiobutton)、1个单功能按钮(Pushbutton,用于运行仿真)、2个界面菜单(用于颜色设置)。
绘制好草图之后,进入GUIDE开发环境设计界面。
具体步骤如下:
⑴开启GUI界面编辑器
命令窗口输入guide指令,点选BlankGUI(Default),引出GUI空白界面编辑器。
⑵为界面设计工作区引入坐标参考系
目的是为了方便在界面上进行控件的布置。
方法:
点击界面编辑器菜单Tools®GridandRulers,弹出对话框,全部勾选即可(网格的大小可选)。
⑶界面窗属性设置
●拖拉界面设计工作区右下角的小黑方块句柄,使其长宽调整到希望的大小,它就是未来
应用界面出现时的“默认大小”。
●双击界面编辑器的设计工作区,引出“窗属性编辑器”(下图),设置下列属性值:
Resizeon%该设置很重要,它决定未来界面窗是否可缩放
Unitsnormalized%采用归一化单位计量窗口大小和位置,缩放时将保持该比例
⑷根据要求进行界面的构建
按照前面的草图,布置各个控件和组件。
①“轴”组件的创建
●在对象模板区,点选“轴(Axes)”图标到设计工作区的适当位置;
●用鼠标拉出适当大小的“轴位框”,以供绘制电子的衍射图形使用;
●双击轴位框,引出“属性编辑器(PropertyInspector)”,进行如下属性设置:
Unitsnormalized%采用相对度量单位,缩放时保持轴与界面之间的比例
NextPlotadd%相当于holdon功能,以添加的方式绘制多个电子图形
Boxon%封闭轴位框
XLim[-5e-55e-5]%X轴范围
YLim[-4e-54e-5]%Y轴范围
要注意Tag(标签)属性的值,其默认值是Aexs1,可以改。
在回调函数中就是通过这个标识名来控制该对象的。
另外,通过改变Position属性的4个值(它们的单位是相对单位,即normalized),还可以精确调整轴位框的位置和大小(下同)。
2制作显示大标题的“静态文本框”控件
所设计的GUI界面总计有5个静态文本框,一个用于显示大标题,其余四个显示仿真
参数的名称。
先介绍显示标题的静态文本框的制作,其余的后面介绍。
●点选对象模板区的“StaticText”图标到设计工作区上端的适当位置,并用鼠标拉出适当的大小(提示:
还可以在Position属性中精确调整其大小)。
●双击静态文本框,引出属性编辑器,设置属性:
Unitsnormalized%采用相对度量单位,窗缩放时保持与界面之间的比例
String电子波动性的MATLAB仿真%显示大标题
Tagtext1%该文本框的标识名,默认值text1,可以改
FontUnitsnormalized%采用相对度量单位,窗缩放时保持字体大小比例
FontSize0.5%框内字体的相对大小(框高度为1)
FontWeightBold%粗体字
③制作“组件盘”
下面引入“组件盘(Panel)”作为仿真的参数区。
在组件盘内集中布置4个显示仿真参数
名的静态文本框和4个输入参数值的可编辑文本框以及1个弹出框(见草图)。
●点选模板区的“组件盘(Panel)”图标到轴位框右侧的适当位置(参见草图),并拉出适当的大小以容纳8个文本框和1个弹出框。
●双击组件盘,引出属性编辑器,设置属性:
Unitsnormalized%采用相对度量单位,缩放时保持与界面之间的比例
Taguipanel1%默认值的标识名,可以改
Title仿真参数%组件盘的标题
TitlePositioncentertop%标题位置
FontSize9.0%框内字体的相对大小(单位points)
顺便指出,当字体大小的单位选为normalized时,FontSize总显示为-1,而无法设置。
④制作4个显示仿真参数名的“静态文本框”控件
●点选4个对象模板区的“StaticText”图标到组件盘的适当位置(参考草图),并用鼠标拉出适当的大小。
●双击其中第一个静态文本框,引出属性编辑器,设置属性:
Unitsnormalized%采用相对度量单位,缩放时保持与界面之间的比例
Stringa(nm)%缝宽a,单位nm
Tagtext2%该文本框的标识名,默认值text2,可以改
FontUnitsnormalized%采用相对度量单位,缩放时保持字体大小比例
FontSize0.6%框内字体的相对大小(框高度为1)
●仿照上述方法,依次设置其余3个静态文本框的属性。
⑤制作4个用于输入相应参数值的“可编辑文本框(EditText)”
●点选4个对象模板区的“EditText”图标到组件盘的适当位置(注意与相应参数对应,参考草图),并用鼠标拉出适当的大小。
●双击其中第一个文本框(用于输入参数a的值),引出属性编辑器,设置属性:
Unitsnormalized%采用相对度量单位,缩放时保持与界面之间的比例
String200%缝宽a为200nm
Tagedit1%该文本框的标识名,默认值edit1,可以改
FontUnitsnormalized%采用相对度量单位,缩放时保持字体大小比例
FontSize0.5%框内字体的相对大小(框高度为1)
●仿照上述方法,依次设置其余3个编辑文本框的属性,各参数初始值:
缝间距b=1mm,加速电压U=1000V,观察屏距离D=0.25m。
⑥制作“弹出框(Pop-upMenu)”
●点选对象模板区的“Pop-upMenu”图标到组件盘的适当位置(参考草图),并用鼠标拉出适当的大小。
●双击弹出框,引出属性编辑器,设置属性:
Unitsnormalized%采用相对度量单位,缩放时保持与界面之间的比例
StringN=2000
N=200
N=20000%三种可供选择的电子数目,注意要写成3行的形式
Tagpopupmenu1%该文本框默认的标识名,可以改
FontUnitsnormalized%采用相对度量单位,缩放时保持字体大小比例
FontSize0.6%框内字体的相对大小(框高度为1)
Value1.0%弹出框的当前值属性的默认值,=1默认选第一项,=2选第二项,=3第三项
至此,组件盘内的快件都已制作完毕。
如果拖动组件盘,则组件盘内所有的控件都将随之移动。
注意,“先有组件盘,然后把控件放置在组件盘”的次序不能颠倒,否则各组件不会随之移动。
⑥制作“按钮组(ButtonGroup)”
草图中有2个按钮:
单选按钮(radiobutton)和单功能按钮(pushbutton)。
类似于上面组件盘的引入,这里引入按钮组,将这2个按钮统统放置其中。
这样整个界面显得干净,整齐。
●点选模板区的“按钮组(ButtonGroup)”图标到组件盘下方的适当位置(参见草图),并拉出适当的大小以容纳至少2个按钮。
●双击ButtonGroup,引出属性编辑器,设置属性:
Unitsnormalized%采用相对度量单位,缩放时保持与界面之间的比例
Taguipanel2%默认值的标识名,可以改
Title%按钮组的标题为空,也可设置
⑦制作“单选按钮(RadioButton)”
●点选模板区的“单选按钮(RadioButton)”图标到按钮组中的适当位置(参见草图),并拉出适当的大小。
●双击单选按钮,引出属性编辑器,设置属性:
Unitsnormalized%采用相对度量单位,缩放时保持与界面之间的比例
String概率密度理论曲线%注释字串
Tagradiobutton1%默认标识名
FontUnitsnormalized%采用相对度量单位,缩放时保持字体大小比例
FontSize0.55%框内字体的相对大小(按钮高度为1)
Value0%单选按钮当前值属性的默认值,=0默认不选,=1默认选取
⑧制作“单功能按钮(PushButton)”
●点选模板区的“单功能按钮(PushButton)”图标到按钮组中的适当位置(参见草图),并拉出适当的大小。
●双击单功能按钮,引出属性编辑器,设置属性:
Unitsnormalized%采用相对度量单位,缩放时保持与界面之间的比例
String运行仿真%注释字串
Tagpushbutton1%默认标识名
FontUnitsnormalized%采用相对度量单位,缩放时保持字体大小比例
FontSize0.5%框内字体的相对大小(按钮高度为1)
9制作界面菜单
●点击GUI界面编辑器的菜单Tools®MenuEditor引入菜单编辑器,如下图所示。
●点击菜单编辑器界面上的“NewMenu”图标
后,在编辑器的“MenuBar”页左侧的菜单结构框里就出现未命名的菜单“Untitled1”。
●点击未命名菜单“Untitled1”,在编辑器右侧的“菜单属性(UIMenuProperties)”栏里,就会出现需要填写的若干属性条目。
●填写或者勾选属性条目如下:
Label背景颜色%菜单名
TagMenu1%菜单的标识,回调函数中通过该标识名控制该菜单
Enablethisitem勾选%使该菜单可操作
●再给“背景颜色”菜单创建2个子菜单:
“黑色”和“白色”子菜单。
点击菜单编辑器的
工具图标,就会在菜单结构框的“背景颜色”菜单下衍生出一个未命名的子菜单“Untitled2”。
在该子菜单的属性栏中设置:
Label黑色%子菜单名
TagMenu11%子菜单的标识
类似地,创建第二个子菜单“白色”菜单,其属性
Label白色%子菜单名
TagMenu12%子菜单的标识
●仿照上述方法,再创建一个名为“电子颜色”的顶层菜单,其下包含2个子菜单:
“红色”和“白色”子菜单。
菜单属性分别设置如下:
Label电子颜色%顶层菜单名
TagMenu2%顶层菜单的标识
Label红色%第一个子菜单名
TagMenu21%第一个子菜单的标识
Label白色%第二个子菜单名
TagMenu22%第二个子菜单的标识
制作后的菜单结构如图所示。
至此,本题的GUI界面制作完毕。
保存界面之后(文件名ElectronsWave_GUI),系统会生成2个文件,一个是.fig文件,用于保存界面的制作代码;另一个是.m文件,用于编写回调函数。
点击界面编辑器上的
图标运行GUI界面,将出现草图所示的效果。
但是,目前的应用界面还只是“静态”的界面,无法“动”起来。
要想使得各个控件能执行用户的意图,必须编写回调函数(callback函数)。
在系统生成的m文件中,包含有界面上各个控件的回调函数的模板,找到各个控件的回调函数,在其中做相应的更改即可。
要正确编写回调函数,首先要了解GUIDE自动生成的ElectronWave_GUI.m文件的结构。
⑸GUIDE自动生成的M文件的结构
点击界面编辑器上的
图标,可以打开ElectronWave_GUI.m文件。
该M文件是一个主函数,内含若干个回调子函数,具体结构和相关说明如下:
●主函数
functionvarargout=ElectronsWave_GUI(varargin)
●子函数
◆界面启动子函数和输出子函数
functionElectronsWave_GUI_OpeningFcn(hObject,eventdata,handles,varargin)
functionvarargout=ElectronsWave_GUI_OutputFcn(hObject,eventdata,handles)
◆编辑框回调子函数组(
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 实验八 图形用户界面设计 实验 图形 用户界面 设计