第十三章 圖形介面

(編譯及圖示摘自mathworks.com)

什麼是圖形介面 GUI?

圖形介面(GUI)是藉圖形展示裝置、指令元件或程式執行結果，使用者因此可以在交談的模式下執行特定的軟體。因此，利用 GUI介面，可以不經由敘述檔或輸入指令群，只要利用滑鼠選擇參數及執行指令即可。在這種情況下，使用者不必知道程式的內容或其執行的方式，可立即獲得所要的答案。

圖形介面GUI元件包括選單、工具欄、按鈕、點圈鈕、列單盒、滑尺等等。在MATLAB中，亦可利用 GUI 顯示表格式的資料或圖形，亦可設為群組件使用。

下面為一個簡單之圖形介面之示範：



在此圖形介面中，包括下列組件：

• 一組圖形座標元件。
• 一組下拉式選單，例如對應於三個函數peaks, membrane及 sinc之選擇。
• 固定文字元件以標明跳出式選單。
• 三個按鈕可以提供不同繪圖功能，包括：表面圖 surface、表面網線圖mesh及等高線圖 contour等。

這個程式儲存於simple_gui.m檔案中，每次執行時即可出現上述之圖面。再利用滑鼠進行點選即可得到不同的結果。但是，如何做才能達到這等境界呢？

GUI如何工作?

在GUI介面中，每一元件均與一或數個使用者自定的函數或程式相關，此相關之程序稱為回叫程式(callbacks)。每一個回叫程式可以經由按鈕觸動、滑鼠點入、選單項目選定或游標滑過特定元件等動作後產生的事件下執行。這些回叫程式都要經過 GUI之程式設計者加以事先規劃。

前節所述之GUI中，利用跳出式選單可以選定資料組合，然後按鍵進入執行繪圖型式。在按下特定按鈕時即會依其內容執行相對應於該按鈕之回叫程式，執行後即會繪出所期盼的圖形。

這種程式設計的過程通常屬事件驅型。亦即當某特定事件發生時(例如按下按鈕、更換數據等等)，則該事件立即形成。利用這事件之發生，再觸發對應程式之執行。這些事件通常都是使用者藉GUI介面以交談的形式產生。

在程式執行過程中，回叫程式並無法控制事件發生之順序，亦無法確定何者會被執行。有時甚至另一個回叫在執行期間，另一個回叫程式又被啟動，且同時進行，其情況變得更為複雜。

要從何處起頭呢?

當然首先必須設計一個屬於自己的 GUI介面。但是事先必須決定要做什麼事，而且要使用者怎樣操作。在這些界面之應用元件中，到底要使用那些元件或幾個元件，設計者必須胸有成竹才能順利完成，有時必須先列出相關參考資料，以為備用。

其次，必須決定使用何種技巧去產生新的 GUI介面。還好，MATLAB讓初學者有機會使用GUIDE這個輔助指令進行圖形設計。它的名稱因為前三個字母是 GUI，配合起來稱為GUIDE雖是巧合，但也包含了引導的意義。利用GUIDE可以直接建造自己的GUI介面。其中並提供一些簡化標準對話盒的函數，可以直接引用。其應用存乎一心，但可依經驗、喜好及對GUI功能上之要求而有不同的進境。下面的表中列出幾個可用的元件：

GUI	Technique
對話盒	MATLAB提供一些標準對話盒之選項，可以產生簡單之函數呼叫，其連結可參考相關輔助。
僅含有數個元件之GUI介面	若僅包含一些元件之程式設計較為簡單，每一個元件可以利用單一函數進行呼叫。
略為複雜性之GUI介面	可以利用GUIDE指令簡化設計之過程
包括甚多元件之複雜GUI介面，有些甚至必須與其他 GUI介面發生交談者	直接撰寫程式以便完全控制所有元件置放之位置，以增加其可複製性。

GUIDE之使用法

GUIDE是MATLAB圖形介面之發展環璄，以簡化GUI介面之製作。利用這些工具可設定圖形位置、大小、屬性及畫面之布置與規劃。

GUI介面之畫面編輯器(Layout Editor)

GUIDE指令中含有畫面編輯器，使用者利用滑鼠選項可以移動預設之 GUI元件，諸如按鈕、文字區、滑標、座標軸等等，也可以置入選單及選單中之文字項目。

編輯器中同時提供GUI介面所需之大小，並修改其外觀及畫面內容，諸如元件之對齊、鍵入順序、階層型選單內容及相關參數之設定等。

GUI圖面經規劃完成後，GUIDE 會自動產生兩個檔案，一為般之 M-檔案，另一為以.fig為附屬之檔案，後者僅能執行，不直接開啟，必須經由guide才能檢視。兩個之名稱相同，可以控制GUI介面之運作。每次執行此檔案時，會將原設計之介面初始化，並令其與對應之 GUI 回叫程式相連，因此只要利用滑鼠選項，產生特定事件，即可執行該程式。同時，此檔案亦可利用M-檔案編輯器進行編輯，並增加或更改回叫程式之內容。

設計 GUI應用例

以前面介紹之simple_qui程式為例，其內之元件可分為下面幾個大類：



其中包括三個按鈕（Surf, Mesh, Contour)、一串靜態文字(Select Data)、一組下拉選單(Peaks, ...)及一個圖軸。開始時，先下guide之指令：

>> guide



待上圖出現後，可以依左邊視窗內之項目選擇，其中之第一項空白GUI為預設值，其餘三項均為示範例。本節將採用空白的編輯視窗，以執行自定的範例。若guide 之視窗已經打開，則可選擇開啟新視窗，最後之畫面編輯視器亦會出現如下：


畫面編輯器之正中央為畫面之所在，可放置所需之元件，其空間大小可以按右下角進行調整。也可以利用圖上緣之View選單（或按滑鼠之右鍵），選擇其對應之屬性檢視表(Property Inspector)，以設定此GUI之屬性。屬性檢視表分別儲存許多有關此選單或元件之特性參數，其內容包括視窗之正確之尺寸及顏色等。輸入尺寸時，必須先選擇適當單位。亦即先至Units項下，選擇公分或英寸。然後到Position處更改原點位置(x,y)與窗格之寬度與高度值。記得選定後，必須將單位換為文字(character)，否則其他元件對應時不易對齊。


每一元件有一對應之屬性檢視表，只要指向不同元件，表中即會出現屬於該元件之對應值；利用此表可以更改元件之顏色、大小、位置、回叫程式及參數值。在後來增添之元件都有這種對應表之設計，只要指向該元件然後按滑鼠右鍵即可找到對應之屬性檢視表或Property Inspector。

畫面編輯器之左方為諸元件之選項，若要同時出現元件之對應名稱，則可在檔案項下按Preferences，在其元件名稱顯示選項下打勾即可。

增添元件(Add Elements)

要增加一個元件，只要由左邊之元件標示上選取即可。在本例中，要先選擇三個Push Button，可利用滑鼠分別拉到想要置放的大概位置，此時即使不對齊也無所謂。其大小若相同，則可採用拷貝的方式。



其次再依次增加一個靜態文字元件、一組跳出式選單及一組圖形座標等。將其相關位置安排如下圖。此時各元件都事先給一個名稱，但這個名稱可以事後在屬性檢視表中加以更改。

對齊(Align)

三個按鈕位置並不對齊，若要令其對齊在一垂直線上，用手調的也可以，也可使用對齊指令。首先可以將要對齊之三個按鈕選取，再至工具選項中，選擇物件對齊(Align Objects)之指令，即會出現此相關指令之選單如下：



選單中可以選擇元件之間距(20畫素)以及對齊之方式（上下或左右對齊），然後按OK即可。最後之結果會變成非常整齊、美觀如下圖：

屬性檢視表(Property Inspector)

待各元件之相關位置底定後，即可以開始更改各元件之標示名稱及其內所需之參數。前文曾提及，每一元件均有對應之屬性檢視表(Property Inspector)，因此先將屬性檢視器叫出，然後用滑鼠指定要更改標示之按鈕，即可顯示其對應之屬性。呼叫屬性檢視表也可由View中或按滑鼠右鍵出現之輔助單中進行選擇，但通常只要呼叫第一次即可，其他元件只要指向改變，屬性表之內容也會隨之改變：

按鈕(Push Bottom)

在GUI畫面中先選定其中一個按鈕，此時若屬性檢視表已出現，其內容即會出現對應於該按鈕之屬性參數。在諸多參數中，先找到string這個屬性，這是元件的外在稱呼，在本例中可先將其內容更改為Surf。此時只要將滑鼠點在檢視器之其他地方，即可觀察其改變。其他按鈕也可依同樣的方式改變其標示名稱，其餘兩按鈕名稱可改為"Mesh"、"Contour"。

跳出式選單(Pop-up Menu)

其次再由GUI畫面先選定Pop-up Menu這個按鈕。同樣在對應之屬性檢視器中，按下String，此時會出現一個String之輸入視窗。此時可將原內容刪去，改輸入Peaks、 Membrane、 Sinc等三項，按下OK結束，此時選單內容即會隨之改變。

靜態文字(Static Texts)

在諸元件中，有時必須在圖版上置放一些文字說明，或在選擇前作提示。這些文字僅能供使用者觀察，不能供其修改或選擇，此元件因此稱為靜態文字元件。這種文字元件在設計過程中仍然可以修改，而且其大小、顏色也可以設定。因此，要更改其內容時，同樣可在GUI畫面中選取該文字元件，在其對應之屬性檢視器中，可直接更改String項下之內容。本例請將其改為"Select Data"，作為其下選單之說明。選完後，只要按下OK即可改變內容。

最後之結果如下圖：

儲存檔案

如前所言，將上述畫面存檔時，Guide會產生兩個檔，一為Fig檔，一為M檔。前者屬二位元檔，為內容畫面之說明。後者為附屬名為.m為一般程式檔案，可以利用編輯器查看。此兩檔案必須同時放在一個目錄之下，才能執行。本例以simple_gui為檔名存檔，因此目錄中會有simple_gui.fig及simple_gui.m兩檔案出現。

執行該程式時只要在指令行打入該名稱即可。即：

>> simple_gui

結果如下：


只是目前之內容空洞，點選按鈕時也沒有反應。若要使它具有生命，仍需要繼續後段的程式加入才行。