MATLAB 程式設計入門篇 GUIDE.

Presentation on theme: "MATLAB 程式設計入門篇 GUIDE."— Presentation transcript:

1 MATLAB 程式設計入門篇 GUIDE

2 8-1 MATLAB第七版的 GUIDE簡介 使用 GUIDE 工具的好處如下： GUIDE 也有不盡人意之處
GUIDE 是 Graphic User Interface Design Environment 的簡稱。 它是一個 設計「圖形使用者介面」（Graphical User Interface，簡稱 GUI）的發展環境 。 使用 GUIDE 工具的好處如下： 可以產生每一個控制物件的標準反應函式，使用者只要填入所需的指令或敘述。 可以快速地「拉」出介面，具有「所見即所得」的性質。 GUIDE 也有不盡人意之處 比較不適用於複雜的 GUI 介面 。 無法將 GUI 應用程式集中於一個檔案。 執行效率可能比較差一些。

3 8-1 MATLAB第七版的 GUIDE簡介 欲啟動 MATLAB 7.x 的 GUIDE，只需在命令視窗下輸入「guide」即可開啟 GUIDE 的主面版：

4 8-1 MATLAB第七版的 GUIDE簡介 在「Create New GUI」的頁面中，你可以選擇幾個樣版： 如果你已經有之前所設計
Blank GUI (Default)：空白樣版 GUI with Uicontrols：含有 UI 控制物件（UI Controls）的樣版 GUI with Axes and Menu：含有圖軸和下拉選單的樣版 Modal Question Dialog：含有對話窗的樣版 如果你已經有之前所設計 的畫面，也可以點選 「Open Existing GUI」， 來開啟以前的檔案，如 右圖所示：

5 8-1 MATLAB第七版的 GUIDE簡介 為了簡化說明，我們先回到「Create New GUI」頁面，並點選「Blank GUI (Default)」來開啟空白樣版，其畫面如下：

6 8-1 MATLAB第七版的 GUIDE簡介 在上述的畫面中，左邊是各種 UI 控制物件和圖軸的選單，選取之後，你就可以在中間空白部分，以滑鼠點選並拖放來擺置你所需要的 UI 控制物件或圖軸等。 我們可以修改預設的 GUIDE 編輯面版，讓它更好用： 如果嫌左邊的圖式太小，可以點選 File/Preference，並點選「Show names in component palette」，就可以顯示左邊各個圖式的文字說明。 如果要在面版周圍顯示尺規（Ruler），可以在下拉選單選擇 「Tools/Grid and Rulers…」，然後再點選跳出視窗的「Show rulers」，就可以在面版周圍顯示尺規。

7 8-1 MATLAB第七版的 GUIDE簡介 經由上述的設定後，GUIDE 主面版顯示如下：

8 8-2 入門範例一 我們先改變 GUIDE 面版的大小(由拖放面版右下角的黑點來達成 ) 接著在面版上放置兩個控制物件 一個是「拉霸」
（Slider） 另一個是「可編輯文字 欄位」（Edit Text）

9 8-2 入門範例一 我們可以使用滑鼠右鍵來點選任一個 UI 控制物件，並選取「Inspect Properties」，以改變其性質。
以上面的拉霸為例，以滑鼠右鍵點選後，選取「Inspect Properties」，即可開啟「性質檢視器」（Property Inspector）。

10 8-2 入門範例一 在性質檢視器中，左邊是物件的性質，右邊則是此性質所對應的值，我們可以點選右邊來改變這些值。
完成物件代號的設定後，我們就可以設定物件的反應命令。我們希望這些反映命令能夠使這個 GUI 應用程式達到下列功能： 當使用者拖放拉霸時，能將拉霸的位置（預設值是介於 0 和 1 之間）顯示在文字欄位。 文字欄位值被改變時，拉霸的位置能夠隨之改變。 在 GUIDE 的環境下，一個物件的反應命令都是由一個特定的函式來完成，這個函式就稱為反應函式，而函式名稱就是「物件代號_Callback」。

11 8-2 入門範例一 我們以滑鼠右鍵點選拉霸，並選取「View Callbacks/Callback」，即可開啟 MATLAB 程式編輯器。
此程式編輯器會顯示反應命令必須加入的位置，拉霸的 Tag 是 mySlider，所以其反應函式是 mySlider_Callback()，所加進去的兩列敘述如下： 第一列敘述抓出拉霸的位置，並轉成數值。 第二列則將此數值設定為文字欄位的顯示文字。 position = num2str(get(handles.mySlider, 'Value')); set(handles.myText, 'String', position);

12 8-2 入門範例一

13 8-2 入門範例一 使用相同的方式，我們也可以加入文字欄位的反應命令，其反應函式是 myText_Callback()，所加進去的兩列敘述如下： 第一列抓出文字欄位的顯示文字，然後轉成數值。 第二列將拉霸的位置設定成此數值。 加入的位置如下所示： value = str2double(get(handles.myText, 'String')); set(handles.mySlider, 'Value', value);

14 8-2 入門範例一

15 8-2 入門範例一 按下 GUIDE 面版的工具列的三角形按鈕，即可開啟可使用的 GUI 介面
由於所產生的程式碼並不在 MATLAB 的搜尋路徑中，因此會先跳出一個詢問視窗：

16 8-2 入門範例一 直接按下「確定」後就會跳出我們所設計的 GUI 介面如下：
你可以直接移動拉霸，其位置就會顯示在文字欄位內；你也可以修改文字欄位的值，來指定拉霸的位置(收錄在本書光碟的 gui01.m 和 gui01.fig)。

17 8-2 入門範例一 在設計反應命令時，最重要的事，就是要能讓不同的 UI 控制物件都能存取其他物件以及相關資料，因為每一個 UI 控制物件的反應命令都是以函式的型式來進行。 因此 GUIDE 在每一個反應函式內提供了一個結構變數 handles，以便提供資料的共通，可達到下列兩項功能： 經由 handles 來存放或取用共通的資料。 經由 handles 來取得每一個 UI 控制物件的性質。

18 8-2 入門範例一 例如，若要在某一個控制物件的反應函式內存放變數 A，可以加入下列敘述：
handles.myData = A; % 將變數 A 存放在 handles 的 myData 欄位 guidata(hObject, handles) % 將新的 handles 存回整個 GUI 介面 A = handles.myData;

19 8-2 入門範例一 handles 本身也包含了同一個 GUI 介面下的所有控制物件，因此你可以在任一個反應函式內取用每一個控制物件，如下：
handles.mySlider：拉霸物件 handles.myText：文字欄位物件 如果整個 GUI 的名稱是 myGUI，那麼 handles.myGUI 就是指到整個 GUI 的圖形，因此若要關閉此視窗，也可以使用下列敘述： delete(handles.myGUI)

20 8-3 入門範例二 我們將改進前一個範例，在使用者輸入不合法的數值時，應用程式能夠回應錯誤訊息，並記錄錯誤的次數。
我們可以經由 GUIDE 面版開啟 myGUI01，然後點選下拉式選單「File/Save As…」將之儲存到 myGUI02。此時 GUIDE 會開啟 myGUI02.m，你必須在 myGUI02_OpeningFcn() 函式加入下列敘述： 此敘述必須加在 「guidata(hObject, handles);」之前，以保證新的 handles 會被保留。 handles.errorCount = 0;

21 8-3 入門範例二 接著修改文字欄位的反應命令，如下：
value = str2double(get(handles.myText, 'String')); % 判斷是否為介於 0 和 1 之間的純量數值 if isnumeric(value) & length(value)==1 & ... value >= get(handles.mySlider, 'Min') & ... value <= get(handles.mySlider, 'Max') set(handles.mySlider, 'Value', value); else % 若不合法，錯誤次數加一，並顯示相關訊息 handles.errorCount = handles.errorCount + 1; guidata(hObject, handles); % 儲存新的 handles errMsg=['數值不合法：第 ', num2str(handles.errorCount), ' 次錯誤']; set(handles.myText, 'String', errMsg); end

22 8-3 入門範例二 執行此應用程式，在第四次輸入不合法的數值後，畫面如下：
本範例收錄在本書光碟內的 gui02.m 和 gui02.fig。

23 8-4 入門範例三 在這個範例中，使用者可以使用下拉式選單來選取不同的聲音檔案，來顯示波形，並可播放聲音。
首先，我們可以擺置一個圖軸和一些 UI 控制物件，如下圖：

24 8-4 入門範例三

25 8-4 入門範例三 接著，我們可以使用滑鼠右鍵來點選每一個 UI 控制物件，並選取「Inspect Properties」，以改變其性質，每個物件所改變的性質如下：

26 8-4 入門範例三 下一步我們要定義每個 UI 控制物件的反應命令，MATLAB 會在這些 UI 控制物件被點選時，同時呼叫每個物件所對應的反應命令。 首先，我們以滑鼠右鍵點選 Close 按鈕，並選取「View Callbacks/Callback」 此程式編輯器會顯示反應命令必須加入的位置，依本例而言，Close 按鈕的 Tag 是 closeButton，所以其反應命令也必須加在函數 closeButton_Callback 之內

27 8-4 入門範例三 加進去的命令是 close(gcbf)，如下：

28 8-4 入門範例三 提示：gcbf 的功能為傳回發號反應指令的視窗，這一類的指令相當好用，可整理如下：
gcbf 代表產生此反應命令的視窗，因此 close(gcbf) 即是代表關閉此 GUI 介面所在的視窗。 提示：gcbf 的功能為傳回發號反應指令的視窗，這一類的指令相當好用，可整理如下： gcf: get current figure （取得目前視窗） gca: get current axes （取得目前圖軸） gco: get current object （取得目前物件） gcbf: get callback figure （取得發號反應指令之視窗） gcbo: get callback object （取得發號反應指令之物件）

29 8-4 入門範例三 對於下拉式選單，我們在 soundFile_Callback() 函式內所加入的程式碼如下：
value=get(hObject, 'value'); % 取得此 UI 物件的選項 switch value % 依選項來載入聲音檔 case 1 load chirp.mat case 2 load handel.mat case 3 load laughter.mat end plot((1:length(y))/Fs, y); % 畫出聲音的波形 handles.y=y; % 紀錄聲音訊號 handles.Fs=Fs; % 紀錄取樣頻率 guidata(hObject, handles); % 儲存將用於其他函式之 handles

30 8-4 入門範例三 對上述反應命令，說明如下： hObject 代表此下拉式選單的物件，因此value=get(hObject, ‘value’) 即是此物件被選到的選項 依選項的不同，來載入不同的聲音檔案：chirp.mat（鳥叫聲）、handel.mat（歌聲）、laughter.mat（笑聲）。載入聲音資料後，y 就是聲音資料，而 Fs 是對應的取樣頻率。 由於這兩個變數會在其他 UI 物件的反應命令被用到，因此我們將這兩個變數儲存在 handles.y 和 handles.Fs，這個結構變數 handles 存在於每一個反應函式，其目的即是要提供在不同反應函式之間的資料互通。 一旦將資料加入 handles，我們就必須使用 guidata(hOject, handles) 來更新此 GUI 介面所擁有的 handles 變數。

31 8-4 入門範例三 對於「Play Sound」按鈕，我們在 playButton_Callback() 函式內所加入的程式碼如下：
我們先使用 isfield(handles, 'y') 來確認 y 是不是 handles 的一個性質，若是，代表相關聲音資料已經儲存在 handles 變數內，因此我們就抓出 y 和 Fs，並用 sound(y, Fs) 來播放聲音訊號。 if isfield(handles, 'y') y=handles.y; Fs=handles.Fs; sound(y, Fs); end

32 8-4 入門範例三 儲存檔案並關閉 MATLAB 編輯器，然後按下 GUIDE 面版的工具列的三角形按鈕，即可開啟可使用的 GUI 介面如下：

33 8-4 入門範例三 若在下拉式選單選取 handel，即可畫出相關的歌聲波形，此時再按下「Play Sound」，即可聽到動聽的歌聲，（記得要開喇叭），相關畫面如下(本範例收錄在本書光碟內的 gui03.m 和 gui03.fig。 )：

34 8-5 入門範例四 在這個範例中，我們要在視窗的最上方加入階層式的下拉式選單。 首先，先開啟空白面版，加入圖軸，如下：

35 8-5 入門範例四 接著，點選「View/View Callback/CreateFcn」，即可開啟 MATLAB 編輯器。
開啟後，請在 myGUI04_OpeningFcn() 函式加入下列命令： 此命令可以畫出 peaks 的三度空間的曲面。 接著，我們要使用階層式的選單來控制此曲面的呈現方式。 peaks;

36 8-5 入門範例四 首先，點選「Tools/Menu Editor」即可秀出選單編輯器，如下：

37 8-5 入門範例四 此時你可以點選左上角的圖示 一次，就會產生一個新的選單
此時你可以點選左上角的圖示 一次，就會產生一個新的選單 點選此選單後，右邊就會出現很多相關的選項，我們可將其中的「Label」改成「我的選單」，選單中的文字也會跟者改變，如下：

38 8-5 入門範例四 若要產生次選單，請點選圖示 ，依此方式即可產生階層式選單。 若要刪除選項，點選垃圾桶圖示 即可進行刪除。
若要產生次選單，請點選圖示 ，依此方式即可產生階層式選單。 若要刪除選項，點選垃圾桶圖示 即可進行刪除。 最後的選單如下：

39 8-5 入門範例四 此時，再對每一個最底層選項修改相關的反應函式，只要點選右邊的「View」按鈕，就可以開啟 MATLAB 編輯器。
在每個選項的反應函式所加入的命令如下表所示： 選項 命令 Shading/faceted shading faceted Shading/interp shading interp Shading/flat shading flat Colormap/Gray colormap gray Colormap/Cool colormap cool Colormap/Summer colormap summer

40 8-5 入門範例四 執行此應用程式，即可得到具有階層式下拉選單的 GUI，如下：
本範例收錄在本書光碟內的 gui04.m 和 gui04.fig。

41 8-6 其它說明 GUIDE 也提供樹狀的「物件瀏覽器」（Object Browsers）。
我們可以點選 GUIDE 的 「View/Object Browser」來開啟「物件瀏覽器」（Object Browsers）其外觀如下(以8-4的範例gui03.fig為例)： 我們可以在「物件瀏覽器」 中點選任一個物件，即可開 啟對應的「性質檢視器」。

42 8-6 其它說明 若要對齊物件，您可以點選 GUIDE 的「Tools/Align Objects」來開啟對齊功能，所開啟的視窗外觀如下：
使用此對其功能前，你必須先選取多個物件，然後再點選這個選單，來進行左右對齊或是上下對齊的功能

43 8-7 MATLAB第五版的 GUIDE簡介 MATLAB 第五版的 GUIDE 的主要工具可用圖形表示如下： 反應編輯器 對齊編輯器
選單編輯器 性質編輯器 GUIDE 控制面版

44 8-7 MATLAB第五版的 GUIDE簡介 其中最主要的工具，就是 GUIDE 的控制面版（Control Panel），對應的 MATLAB 指令是 「guide」。 從控制面版按鈕，還可以選擇其他四種編輯器，分別是： 性質編輯器（Property Editor），對應的 MATLAB 指令是「propedit」。 反應編輯器（Callback Editor），對應的 MATLAB 指令是 「cbedit」。 對齊編輯器（Alignment Editor），對應的 MATLAB 指令是「align」。 選單對齊器（Menu Editor），對應的 MATLAB 指令是 「menuedit」。

45 8-8 MATLAB第五版的 GUIDE：控制面版、性質編輯器和反應編輯器
呼叫其他工具的按鈕 加入新的圖軸或 UI 控制物件的按鈕 顯示編輯中的圖形

46 8-8 MATLAB第五版的 GUIDE：控制面版、性質編輯器和反應編輯器
此視窗即是「可編輯之視窗」（Controlled Figure），您可以點選控制面版的下半部，以加入新的圖軸或 UI 控制物件， 如下圖： 被編輯的圖形視窗 控制面版

47 8-8 MATLAB第五版的 GUIDE：控制面版、性質編輯器和反應編輯器

48 8-8 MATLAB第五版的 GUIDE：控制面版、性質編輯器和反應編輯器
接著我們可由控制面版開啟「反應編輯器」（Callback Editor），其外觀可說明如下： 物件瀏覽區 反應形式選單 反應指令編輯區

49 8-8 MATLAB第五版的 GUIDE：控制面版、性質編輯器和反應編輯器

50 8-8 MATLAB第五版的 GUIDE：控制面版、性質編輯器和反應編輯器
接著，我們可以畫出一個起始圖形（Initial Plot），只要在 MATLAB 指令視窗輸入下列敘述即可： 此時我們編輯的畫面如右： >> load chirp.mat >> plot((1:length(y))/Fs, y);

51 8-8 MATLAB第五版的 GUIDE：控制面版、性質編輯器和反應編輯器
這個圖形視窗仍然在 GUIDE 的控制之下，要使他變成一般可用的圖形使用者介面，我們必需在 GUIDE 的控制面版的「Figure List」下，選取「Control #n」（n 通常是 1，代表受控視窗的辨識號碼），然後再按下「Apply」（或直接雙擊「Control #n」），即可啟動此視窗，並將此產生此視窗之程式碼儲存到一個 M 檔案。 要修改 tguide1.m，只需先叫出此視窗（在 MATLAB 指令視窗下輸入 tguide1 ），然後在 MATLAB 指令視窗下輸入 guide ，即可使用 GUIDE 各項工具來編輯 tguide1.m 所產生的視窗。

52 8-9 MATLAB第五版的 GUIDE：對齊編輯器

53 8-9 MATLAB第五版的 GUIDE：對齊編輯器
每個對齊按鍵的功能如下： ：水平向上對齊 ：水平向下對齊 ：水平向中對齊 ：垂直向中對齊 ：垂直向右對 ：垂直向左對齊 ：端點方塊不變，其餘上下等距 ：端點方塊不變，其餘左右等距 ：所有方塊上下等距，距離可自訂（此例距離為 20 points） ：所有方塊左右等距，距離可自訂（此例距離為 30 points）

54 8-9 MATLAB第五版的 GUIDE：對齊編輯器
在使用這些對齊按鍵時，您必需先選擇要對齊的方塊，然後在選一個對齊按鍵，再按下 Apply 即可。若發覺產生的效果並非預期之效果，您可以按 Revert 來恢復原狀。 以下是一個向垂直中央線對齊的例子：

55 8-9 MATLAB第五版的 GUIDE：對齊編輯器
下面的圖，則是垂直等距拉開（但端點方塊位置不變）的例子：

56 8-10 MATLAB第五版的 GUIDE：選單編輯器
選單編輯器（Menu Editor）可讓您編輯在圖形視窗下的選單。 我們將以一個實例，來說明如何將新的表單加入圖形視窗之中。 首先，我們畫出 peaks 曲面： 接著，我們呼叫 GUIDE 來編輯包含 peaks 曲面的圖形視窗： >> peaks >> guide

57 8-10 MATLAB第五版的 GUIDE：選單編輯器
點選 GUIDE 控制面版的 「Menu Editor」即可開啟選單編輯器，其外觀如下：

58 8-10 MATLAB第五版的 GUIDE：選單編輯器
欲加入新選項，先選取物件瀏覽區中的「figure」，然後按下「New Menu」，接著在「Label」欄位輸入「我的選項」（其餘欄位可不用更改），並按下「Apply」，這樣就完成了建立第一個選項的工作。此過程可用下圖說明：

59 8-10 MATLAB第五版的 GUIDE：選單編輯器
接著，我們要在「我的選項」下加入次選單（Submenu）。 先選取物件瀏覽區的「我的選項」 然後按下「New Menu」，在「Label」欄位填入「Shading」，這是在「我的選項」下的一個次選單。 我們要在此次選單內加入三個選項 首先，還是選取物件瀏覽區的「Shading」，然後按下「New Menu」，在「Label」欄位填入「faceted」，在「Callback」欄位填入「shading faceted」 接著重複上述步驟，但在「Label」欄位填入「flat」，在「Callback」欄位填入「shading flat」 最後，再重複上述步驟，但在「Label」欄位填入「interp」，在「Callback」欄位填入「shading interp」

60 8-10 MATLAB第五版的 GUIDE：選單編輯器
此過程可用右圖說明： 我們可以雙擊 GUIDE 控制面版的「Control #1」，並將此圖形視窗儲存至一個 M 檔案。

61 8-10 MATLAB第五版的 GUIDE：選單編輯器
此檔案儲存於 tguide2.m 您可以直接在 MATLAB 指令視窗下輸入 tguide2 ，即可產生前述之圖形使用者介面，其外觀如下： 此時我們就可以點選 「我的選項／Shading」 之的 faceted、flat 或 interp，來呈現不同的 曲面效果 。