第7章 MATLAB圖形界面設(shè)計(jì)

1、第第7章章MATLAB 圖形界面設(shè)計(jì)圖形界面設(shè)計(jì)空白界面有控件的模板界面有軸對象和菜單的模板界面標(biāo)準(zhǔn)詢問窗口以以“GUI with axes and menu”模板創(chuàng)建的模板創(chuàng)建的GUI初始界面初始界面GUIDE工具欄上的工具按鈕 u對象瀏覽器對象瀏覽器(Object Browser)用于獲得當(dāng)前Matlab圖形用戶界面程序中的全部對象信息，對象的類型，同時(shí)顯示控件的名稱和標(biāo)識，在控件上雙擊鼠標(biāo)可以打開該控件的屬性編輯器；u布局編輯器布局編輯器(Layout Edtor)在圖形窗口中創(chuàng)建及布置圖形對象。布局編輯器是可以啟動(dòng)用戶界面的控制面板，上述工具都必須從布局編輯器中訪問，用用guide命令

2、可以啟動(dòng)，命令可以啟動(dòng)，或在啟動(dòng)平臺窗口中選擇或在啟動(dòng)平臺窗口中選擇GUIDE來啟動(dòng)布局編輯器；來啟動(dòng)布局編輯器；u幾何排列工具幾何排列工具(Alignment Tool)調(diào)整各對象相互之間的幾何關(guān)系和位置；u屬性查看器屬性查看器(Property Inspector)查詢并設(shè)置屬性值;u菜單編輯器菜單編輯器(Menu Editor)創(chuàng)建、設(shè)計(jì)、修改下拉式菜單和快捷菜單；uTab順序編輯器順序編輯器（Tab Order Editor）用于設(shè)置當(dāng)用戶按下鍵盤上的Tab鍵時(shí)，對象被選中的先后順序。 對象選擇按鈕，用來選取工作區(qū)的控件。單功能按鍵，按下操作代表一定功能實(shí)現(xiàn)。雙位按鍵，代表“開”“關(guān)”

3、兩種狀態(tài)。互斥選擇按鈕，多個(gè)選項(xiàng)互斥選擇時(shí)使用?；ト葸x擇按鈕，同時(shí)選中多個(gè)選項(xiàng)時(shí)使用。編輯文本框，可以自由輸入字符和字符串靜態(tài)文本框，用于顯示注釋，不可編輯?；瑒?dòng)塊，利用游標(biāo)滑動(dòng)，可以獲取不同值?？丶^(qū)域框，用于對控件區(qū)域進(jìn)行標(biāo)識。列表框，提供多個(gè)互容的可供選擇選項(xiàng)。彈出框，有多個(gè)選項(xiàng)，只能選擇其中一項(xiàng)。軸對象，用來顯示圖形。按鈕按鈕(Push Buttons)：執(zhí)行某種預(yù)定的功能或操作；開關(guān)按鈕開關(guān)按鈕(Toggle Button)：產(chǎn)生一個(gè)動(dòng)作并指示一個(gè)二進(jìn)制狀態(tài)（開或關(guān)），當(dāng)鼠點(diǎn)擊它時(shí)按鈕將下陷，并執(zhí)行callback（回調(diào)函數(shù)）中指定的內(nèi)容，再次點(diǎn)擊，按鈕復(fù)原，并再次執(zhí)行callbac

4、k 中的內(nèi)容；單選框單選框(Radio Button)：單個(gè)的單選框用來在兩種狀態(tài)之間切換，多個(gè)單選框組成一個(gè)單選框組時(shí)，用戶只能在一組狀態(tài)中選擇單一的狀態(tài)，或稱為單選項(xiàng)；復(fù)選框復(fù)選框(Check Boxes)：單個(gè)的復(fù)選框用來在兩種狀態(tài)之間切換，多個(gè)復(fù)選框組成一個(gè)復(fù)選框組時(shí)，可使用戶在一組狀態(tài)中作組合式的選擇，或稱為多選項(xiàng)；文本編輯器文本編輯器(Editable Texts)：用來使用鍵盤輸入字符串 的值，可以對編輯框中的內(nèi)容進(jìn)行編輯、刪除和替換等操作；靜態(tài)文本框靜態(tài)文本框(Static Texts):僅用于顯示單行的說明文字;滾動(dòng)條滾動(dòng)條(Slider)： 可輸入指定范圍的數(shù)量值；邊框邊框

5、(Frames)：在圖形窗口圈出一塊區(qū)域；列表框列表框(List Boxes)：在其中定義一系列可供選擇的字符串；彈出式菜單彈出式菜單(Popup Menus)： 讓用戶從一列菜單項(xiàng)中選擇一項(xiàng)作為參數(shù)輸入；此外還有坐標(biāo)軸(Axes)， 用于顯示圖形和圖象?？梢酝ㄟ^雙擊該控件，或利用下拉菜單View: Property Inspector打開控件屬性對話框。例如右圖是“+”按鈕的屬性列表。 Units或或FontUnits可選擇：可選擇：inches(英寸英寸)，centimeters (厘米厘米)， normalized(按比例縮放按比例縮放)，points(點(diǎn)陣點(diǎn)陣)， pixels (像素

6、像素)， characters(字符字符)。如果選擇。如果選擇normalized，那么當(dāng)，那么當(dāng)resize設(shè)為設(shè)為on時(shí)，控件或字體大小隨著整個(gè)窗口的縮放而改時(shí)，控件或字體大小隨著整個(gè)窗口的縮放而改變。變。 水平對齊方式水平對齊方式 Horizontal Alignment可以是可以是left, center, right。 控件句柄控件句柄Tag有默認(rèn)值，建議修改為帶有具體含義的字有默認(rèn)值，建議修改為帶有具體含義的字符串，以增加程序可讀性和方便回調(diào)函數(shù)調(diào)用。符串，以增加程序可讀性和方便回調(diào)函數(shù)調(diào)用。n精細(xì)調(diào)整n利用對齊工具，排列控件的位置，使控件的大小、位置更加協(xié)調(diào)。顯示控件名稱的設(shè)置界

7、面 對界面左側(cè)的控件如果不夠熟悉的話，可以通過FilePreferences選項(xiàng)，選中“Show names in component palette” GUI設(shè)計(jì)界面在顯示控制圖標(biāo)的同時(shí)，還顯示控件名稱 按鈕屬性設(shè)置 文本控件屬性設(shè)置 菜單設(shè)計(jì)的編輯窗口菜單效果圖利用菜單編輯器可創(chuàng)建、設(shè)置、修改下拉式菜單和快捷菜單。選擇 Tools 菜單的 Menu Editor.子菜單，可打開菜單編輯器。菜單編輯器菜單編輯器(Menu Editor)菜單可通過編程實(shí)現(xiàn)，從GUI設(shè)計(jì)窗口的工具欄上選擇Menu Editor命令按鈕，打開菜單編輯程序。 菜單編輯器包括菜單的設(shè)計(jì)和編輯，菜單編輯器有八個(gè)快捷鍵，

8、可以利用它們?nèi)我馓砑踊騽h除菜單，可以設(shè)置菜單項(xiàng)的屬性，包括名稱(Label)、標(biāo)識(Tag)、選擇是否顯示分隔線(Separator above this item)、是否在菜單前加上選中標(biāo)記(Item is checked)、調(diào)用函數(shù)(Callback)。 菜單編輯器左上角的第一個(gè)按鈕用于創(chuàng)建一級菜單項(xiàng)。第二個(gè)按鈕用于創(chuàng)建一級菜單的子菜單。菜單編輯器左下角有兩個(gè)按鈕，選擇第一個(gè)按鈕可創(chuàng)建下拉式菜單。選擇第二個(gè)按鈕可創(chuàng)建Context Menu菜單。選擇它后，菜單編輯器左上角的第三個(gè)按鈕就會(huì)變成可用，單擊它就可以創(chuàng)建Context Menu主菜單。在選中已經(jīng)創(chuàng)建的Context Menu主菜單

9、后，可以單擊第二個(gè)按鈕創(chuàng)建選中的Context Menu主菜單的子菜單。與下拉式菜單一樣，選中創(chuàng)建的某個(gè)Context Menu菜單，菜單編輯器的右邊就會(huì)顯示該菜單的有關(guān)屬性，可以設(shè)置、修改菜單屬性。 菜單編輯器左上角的第四個(gè)與第五個(gè)按鈕用于對選中的菜單進(jìn)行左移與右移，第六與第七個(gè)按鈕用于對選中的菜單進(jìn)行上移與下移，最右邊的按鈕用于刪除選中的菜單。例例10 使用Push Button按鈕與靜態(tài)文本框設(shè)計(jì)GUI，在窗口中顯示單擊按鈕次數(shù)。(1) 在界面上安裝一個(gè)命令按鈕和一個(gè)靜態(tài)文本框(2) 使用對象的屬性窗口設(shè)置控件的屬性打開該GUI的 m 文件，文件中已經(jīng)自動(dòng)生成代碼。找到函數(shù)functio

10、n pushbutton1_Callback(hObject, eventdata, handles)在這個(gè)函數(shù)名稱下面寫入如下程序段：persistent cif isempty(c) c=0endc=c+1;str=sprintf(Total Clicks: %d,c);set(handles.text1,String,str);保存程序后，單擊Click按鈕，則在什么的文本框中顯示單擊次數(shù)。例例11 制作一個(gè)簡易的加減法計(jì)算器。(1) 在界面上安裝兩個(gè)編輯文本框、一個(gè)靜態(tài)文本框與兩個(gè)命令按鈕(2) 使用對象的屬性窗口設(shè)置控件的屬性 打開該GUI的 m 文件ex11.m，在函數(shù)pushbu

11、tton1_Callback 與 pushbutton2_Callback中加入代碼，如下所示：function pushbutton1_Callback(hObject, eventdata, handles)s1=str2double(get(handles.edit1,String)s2=str2double(get(handles.edit2,String)set(handles.text1,String,s1+s2);function pushbutton2_Callback(hObject, eventdata, handles)s1=str2double(get(handles.

12、edit1,String)s2=str2double(get(handles.edit2,String)set(handles.text1,String,s1-s2);例例12 使用3個(gè)單選鈕控制靜態(tài)文本框的背景顏色。function radiobutton1_Callback(hObject, eventdata, handles)set(handles.text1,BackGroundColor,r)function radiobutton2_Callback(hObject, eventdata, handles)set(handles.text1,BackGroundColor,g)f

13、unction radiobutton3_Callback(hObject, eventdata, handles)set(handles.text1,BackGroundColor,b)function slider1_Callback(hObject, eventdata, handles)v=get(handles.slider1,Value);str=sprintf(%.2f,v);set(handles.text1,String,str);例例13 使用滾動(dòng)條。例例14 制作一個(gè)根據(jù)密度與體積計(jì)算質(zhì)量的簡易計(jì)算器。(1) 在界面上布置控件對象。(2) 使用對象的屬性窗口設(shè)置控件的屬性

14、。例例15 使用程序把基本控件安裝在圖形窗口上。h1=uicontrol(style,edit,TooltipString,Edit Text)h2=uicontrol(style,checkbox,Position,90,20,30,20,TooltipString,Checkbox)h3=uicontrol(style,listbox,Position,150,20,40,20,TooltipString,Listbox)h4=uicontrol(style,pushbutton,Position,210,20,30,20,TooltipString,Pushbutton)h5=uicon

15、trol(style,radiobutton,Position,260,20,30,20,TooltipString,Radiobutton)h6=uicontrol(style,slider,Position,310,20,30,20,TooltipString,Slider)h7=uicontrol(style,text,Position,370,20,30,20,TooltipString,Static Text)h8=uicontrol(style,toggle,Position,430,20,30,20,TooltipString,Togglebutton) 上面程序雖然實(shí)現(xiàn)了控件的

16、安裝，但是，還不能完成具體的功能。如果要完成特定的功能，需要加入其他語句。例例16 在圖形窗口底部安裝一個(gè)命令按鈕、一個(gè)可編輯文本框、一個(gè)靜態(tài)文本框。針對命令按鈕（pushbutton）編寫程序，使程序運(yùn)行后，點(diǎn)擊該命令按鈕，便隨機(jī)繪制出一些折線；同時(shí)可編輯文本框背景色變?yōu)樗{(lán)色，靜態(tài)文本框背景色變?yōu)榧t色。 h1=uicontrol(style,pushbutton,Position,280,0,50,20) set(h1,String,PUSH,Callback,fun) 主程序只創(chuàng)建安裝了一個(gè)Pushbutton按鈕，然后，在set語句中使用Callback屬性調(diào)用函數(shù)fun。 主程序設(shè)計(jì)如

17、下：function fun plot(rand(3,5) h2=uicontrol(style,edit,TooltipString,Edit Text,Position,80,0,30,20) h3=uicontrol(style,text,Position,440,0,30,20,TooltipString,Static Text) set(h2,BackGroundColor,0 0 1) set(h3,BackGroundColor,1 0 0) 函數(shù)fun代碼如下：在函數(shù)fun中除了繪圖之外，還制作了一個(gè)Edit Text、一個(gè)Static Text，并且把這兩個(gè)控件的背景色設(shè)置為

18、藍(lán)色0 0 1與紅色1 0 0。例例17 制作依附于某對象的彈出式菜單。m=uicontextmenu;subplot(1,3,1)h1=line(1,2,2,2,LineWidth,8,UIContextMenu,m)c1=subplot(1,3,2);line(1 2,1 3);c2=subplot(1,3,3);plot(rand(2);uimenu(m,Label,line,Callback,c1);uimenu(m,Label,plot,Callback,c2);編寫程序如下：程序運(yùn)行后，先繪制出右圖第一個(gè)圖所示圖形，在藍(lán)色寬條上單擊鼠標(biāo)右鍵，出現(xiàn)菜單，菜單上有兩個(gè)選項(xiàng)line與pl

19、ot，選擇line繪制出右圖第二個(gè)圖所示線段；選擇plot繪制出右圖第三個(gè)圖所示兩條（隨機(jī)）線段。布置控件布置控件：一個(gè)坐標(biāo)系、一個(gè)文本框、一個(gè)復(fù)選框，一個(gè)按鈕；定義文本框的屬性：定義文本框的屬性：String-簡單設(shè)計(jì)示例，F(xiàn)ontName-隸書，F(xiàn)ontSize22；定義坐標(biāo)系定義坐標(biāo)系: Visibleoff； 定義按鈕屬性定義按鈕屬性: String開始繪圖，F(xiàn)ontName, ForegroundColor, FontSize, BackgroundColor,Callback-surf(peaks(30)；定義復(fù)選框定義復(fù)選框: String3D旋轉(zhuǎn),Callbackrotate3

20、d。例例18 用于繪圖和圖形旋轉(zhuǎn)的GUI。布局編輯器中編輯完成的圖形用戶界面 運(yùn)行所創(chuàng)建的圖 形用戶界面程序 點(diǎn)擊按鈕的結(jié)果 選擇三維旋轉(zhuǎn)功能后對圖形進(jìn)行的旋轉(zhuǎn)操作 例例19 設(shè)計(jì)一個(gè)簡單信號分析儀的程序，要求根據(jù)輸入的兩個(gè)頻率和時(shí)間間隔，計(jì)算函數(shù) x=sin(2f1t)+sin(2f2t) 的值，并對函數(shù)進(jìn)行快速傅立葉變換，最后分別繪制時(shí)域和頻域的曲線。（一）設(shè)計(jì)圖形界面（一）設(shè)計(jì)圖形界面設(shè)計(jì)步驟：u在布局編輯器中布置控件：本例中使用了2個(gè)坐標(biāo)系、3個(gè)文本編輯框、1個(gè)按鈕和3個(gè)靜態(tài)文本框；u使用幾何位置排列工具對控件的位置進(jìn)行調(diào)整：u設(shè)計(jì)控件的屬性：為顯示美觀，首先將文本編輯框和靜態(tài)文本框的

21、字號分別設(shè)置為20和16，將3個(gè)靜態(tài)文本框的標(biāo)題分別改為“頻率1”、“頻率2”和“時(shí)間”，將按鈕的標(biāo)題改為“繪圖”。u設(shè)置其他繪圖屬性。如設(shè)置主窗口的標(biāo)題為“信號分析儀”。上述步驟基本完成了圖形界面的設(shè)計(jì)，如下圖所示：上述圖形界面設(shè)計(jì)運(yùn)行后顯示的圖形如下：其設(shè)置如右圖所示（二）設(shè)置控件的標(biāo)識（二）設(shè)置控件的標(biāo)識 控件的標(biāo)識(Tag)用于對各控件的識別。每個(gè)控件在創(chuàng)建時(shí)都會(huì)由開發(fā)環(huán)境自動(dòng)產(chǎn)生一個(gè)標(biāo)識，在程序設(shè)計(jì)中，為了編輯、記憶和維護(hù)的方便，一般為控件設(shè)置一個(gè)新的標(biāo)識。（三）編寫代碼（三）編寫代碼 GUI圖形界面的功能，還是要通過一定的設(shè)計(jì)思路和計(jì)算方法，由特定的程序來實(shí)現(xiàn)。為了實(shí)現(xiàn)程序的功能，

22、還需要在運(yùn)行程序前編寫一些代碼，完成程序中變量的賦值、輸入輸出、計(jì)算及繪圖等工作。 本例設(shè)置第一個(gè)坐標(biāo)軸的標(biāo)識為：frequency_axes, 用于顯示頻域圖形; 第二個(gè)坐標(biāo)軸的標(biāo)識為：time_axes, 用于顯示時(shí)域圖形。三個(gè)文本編輯框的標(biāo)識為f1_input, f2_input, t_input,分別用于輸入兩個(gè)頻率和自變量時(shí)間的間隔。由于不需要返回3個(gè)靜態(tài)文本框和按鈕的值，這些控件的標(biāo)識可以使用缺省值。（1） 從從GUI獲得用戶輸入的數(shù)據(jù)。獲得用戶輸入的數(shù)據(jù)。本例中輸入的3個(gè)數(shù)據(jù)分別為頻率1、頻率2和時(shí)間間隔。f1=str2double(get(handles.f1_input,St

23、ring);f2=str2double(get(handles.f2_input,String);t=eval(get(handles.t_input,String);1. 設(shè)置對象的初始值設(shè)置對象的初始值分別設(shè)置三個(gè)文本編輯框的初始值為：f1_input=20f2_input=50t_input=0:0.001:0.52. 編寫代碼編寫代碼為按鈕的調(diào)用函數(shù)編寫代碼，這段代碼放在按鈕的調(diào)用函數(shù)pushbutton1_Callback()中，代碼包括以下部分：（2）計(jì)算數(shù)據(jù)。）計(jì)算數(shù)據(jù)。計(jì)算函數(shù)值，按指定點(diǎn)進(jìn)行快速傅立葉變換，并計(jì)算頻域的幅值和頻域分辨率。x=sin(2*pi*f1*t)+sin

24、(2*pi*f2*t);y=fft(x,512);m=y.*conj(y)/512;f=1000*(0:256)/512;（3）在第一個(gè)坐標(biāo)軸中繪制頻域曲線。）在第一個(gè)坐標(biāo)軸中繪制頻域曲線。axes(handles.frequency_axes)plot(f,m(1:257)set(handles.frequency_axes,XminorTick,on)grid on（4）在第二個(gè)坐標(biāo)軸中繪制時(shí)域曲線。）在第二個(gè)坐標(biāo)軸中繪制時(shí)域曲線。axes(handles.time_axes) %選擇適當(dāng)?shù)淖鴺?biāo)軸plot(t,x)set(handles.time_axes,XminorTick,on)gr

25、id on3. 運(yùn)行程序運(yùn)行程序表示此列表共有4項(xiàng)內(nèi)容即4個(gè)典型環(huán)節(jié)可選。設(shè)定完成的界面草圖如圖(1) 定制曲線按鈕的回調(diào)函數(shù)function btnDraw_Callback(hObject, eventdata, handles)try str=char(get(handles.strCode,String); %將在代碼區(qū)輸入的代碼轉(zhuǎn)換成數(shù)組 str0=; for ii=1:size(str,1) %對str的每行操作 str0=str0,deblank(str(ii,:); %將str第ii行去掉空格后作為向量str0的一個(gè)元素 endendeval(str0);%執(zhí)行代碼 axes(

26、handles.myAxes);%將myAxes設(shè)為當(dāng)前坐標(biāo)系 plot(x,y); %繪制曲線catch errordlg(請重新檢查輸入數(shù)據(jù)!); %如有數(shù)據(jù)錯(cuò)誤，捕獲并給出提示end(2) (2) 典型環(huán)節(jié)列表框的回調(diào)函數(shù)典型環(huán)節(jié)列表框的回調(diào)函數(shù)function lstBox_Callback(hObject, eventdata, handles)v=get(handles.lstBox,value); %取出所選項(xiàng)的值%對不同選項(xiàng)進(jìn)行對應(yīng)環(huán)節(jié)曲線的繪制和代碼的展示switch v case 1, %比例環(huán)節(jié) str1=nump=3;denp=1; %繪制比例環(huán)節(jié)曲線代碼 str2=t=0:0.1:10; str3=y,t,x=step(nump,denp,t); % 將代碼作為數(shù)組賦值給代碼區(qū)String屬性 set(handles.strCode,String,char(str1,str2,str3); % 將所選環(huán)節(jié)名稱顯示在panel控件上 set(handles.uipanel,Title,比例環(huán)節(jié)); case 2, %慣性環(huán)節(jié) str1=numg=1;deng=0.2 1; str2=t=0:0.1:10; str3=y,t,x=step(numg,