Handle Graphics, GUI, GUIDE 握把式圖形 GUI 設計 GUIDE 彭旭霞助理教授國立清華大學生醫工程與環境科學系 1
Contents 握把式圖形 (Handle Graphics) GUI: M file GUI: GUIDE 2
握把式圖形 (Handle Graphics) 每個構成圖形的基本單位都可視為一個物件 (Object): 曲線 曲面 圖軸 文字 每個物件都有一個獨一無二的握把 (Handle) ( 就像每一個人都有一個獨一無二的身份證字號 ) 根據物件的握把可以存取圖形物件的所有性質 3
圖形物件的階層結構 圖形物件階層結構 (Hierarchy) 4
Ex.: 階層結構 5
圖形物件的性質存取 方法一 : 以 MATLAB 所提供的圖形使用者介面 (GUI,Graphical User Interface) 進行圖形物件的性質存取 方法二 : 以 MATLAB 命令列進行圖形物件的性質存取 6
方法一 : MATLAB 的性質編輯器 先畫完圖, 再使用 propedit 開啟性質編輯器 ex.: >>peaks; >>propedit; % 畫出 peaks 3D 圖 % 開啟性質編輯器 若不在命令列下達 propedit, 也可以點選工具列上面的圖示來開啟圖形編輯功能 : 也可選擇 : Edit/Figure Properties 7
進行圖形編輯 啟動圖形編輯功能後, 直接以滑鼠左鍵點選圖形物件 (ex. 圖軸 ) 點選右鍵選取所需要修改的性質, 就可以達到修改圖形的效果 8
方法二 : 圖形物件的性質存取 以命令列進行圖形物件的性質存取 -set: 設定某個性質的值 - get: 取得某個性質的值 - findobj: 在握把式圖形的階層式結構中找出需要的物件 9
Ex.: set 單獨使用 set(h), 可列出 h 的所有性質, 以及這些性質的可能值和預設值, 例如 : >> h=plot(humps); >> set(h, linestyle ) >> set(h) 10
Ex.: set 11
Ex.: get >> get(h, 'LineWidth') % 取得曲線寬度 ans =3; >> get(h, 'Color') % 取得曲線顏色 ans = 0 0 1 >> get(h) % 列出 h 的所有性質的值 12
Ex.: findobj >> plot(rand(10,2)); % 畫出兩條曲線 >> h=findobj('type', 'line') % 找出曲線的握把 h = 172.0011 171.0022 >> set(h, 'LineWidth',3); % 經由握把將曲線寬度改為 3 ( 看 Figure 中的曲線變化 ) 13
Contents 握把式圖形 (Handle Graphics) GUI: M file GUI: GUIDE 14
MATLAB GUI MATLAB GUI (Graphic User Interface) M 檔案 GUIDE 發展環境 15
GUI: M 檔案 M 檔案的 GUI 設計 uicontrol Mouse Events Example: xpsound travel truss lorenz 等 16
Ex.: uicontrol 17
UI 控制物件 Uicontrol 產生 UI (User Interface) 控制物件 按鈕 (Push Button)<=default 滑動棒 (Sliding Bar) 圓形按鈕 (Radio Button) 框架 (Frame) 核計方塊 (Check Box) 文字欄位 (Edit Box) 列表式選單 (List Menu) 下拉式選單 (Popup Menu) 18
Ex.: uicontrol 19
Ex.: uicontrol 的完整範例 : ui01.m 20
Ex.: uicontrol 的完整範例 : cb2.m; cb3.m 21
Ex.: uicontrol 的完整範例 ( 自行練習 ) 上例潛在問題 - 有三個檔案, 管理不方便 - 使用的變數都在 MATLAB 基本工作空間中, 容易造成變數的相衝及覆蓋 解決 : Switchyard( 調車廠 ) Programming 程式設計概念 - tag 的使用 22
Ex.: uicontrol 的完整範例 : tag 23
Ex.: uicontrol 的完整範例 : tag 24
Ex.: uicontrol 的完整範例 : tag 25
GUI: M 檔案 M 檔案的 GUI 設計 uicontrol Mouse Events Example: xpsound travel truss lorenz 等 26
滑鼠事件 (Mouse Events) 主要滑鼠事件 WindowButtonDownFcn: 滑鼠按鈕按下時反應指令 WindowButtonMotionFcn: 滑鼠移動時的反應指令 WindowButtonUpFcn: 滑鼠按鈕釋放時的反應指令 27
滑鼠事件的使用 若希望滑鼠先被按下然後在移動滑鼠時, 才會觸發移動時的反應指令, 必須做下列事項 : 在滑鼠按鈕被按下時, 設定 WindowButtonMotionFcn 及 WindowButtonUpFcn 的值 在滑鼠按鈕被釋放時, 清除 WindowButtonMotionFcn 及 WindowButtonUpFcn 的值 因此, 只有在滑鼠按鈕被按下, 且滑鼠在移動時, 對應於 WindowButtonMotionFcn 的反應指令才會被呼叫 28
Ex.: 滑鼠事件 : mouse01.m 29
Ex.: 滑鼠事件 30
滑鼠事件的範例 31
Contents 握把式圖形 (Handle Graphics) GUI: M file GUI: GUIDE 32
GUIDE 簡介 GUIDE: Graphic User Interface Design Environment 設計 圖形使用者介面 ( 簡稱 GUI) 的發展環境 GUIDE 的好處 : - 可產生每個控制物件的標準反應函式, 使用者只要填入所需的指令或敘述 - 所見即所得 : 快速地 拉 出介面 GUIDE 的小缺點 : - 比較不適用於複雜的 GUI 介面 - 無法將 GUI 應用程式集中於一個檔案 - 執行效率可能比較差一些 33
GUIDE 簡介 啟動 GUIDE: 命令視窗下輸入 guide 34
GUIDE 簡介 在 Create New GUI 的頁面中, 你可以選擇幾個樣版 : Blank GUI (Default): 空白樣版 GUI with Uicontrols: 含有 UI 控制物件 (UI Controls) 的樣版 GUI with Axes and Menu: 含有圖軸和下拉選單的樣版 Modal Question Dialog: 含有對話窗的樣版 如果你已經有之前所設計的畫面, 也可以點選 Open Existing GUI, 來開啟以前的檔案, 如右圖所示 : 35
GUIDE 簡介 Blank GUI (Default): 開啟空白樣版 跳出兩個視窗 : figure & function ( 檢查路徑, 多了一個同名的.m 檔案 ) 36
GUIDE 簡介 Figure: - 左邊 : 各種 UI 控制物件和圖軸的選單 - 選取選單 : 可在中間空白部分以滑鼠點選並拖放來擺置所需的 UI 控制物件或圖軸 可修改預設的 GUIDE 編輯面版, 讓它更好用 : - 若要放大左邊圖式並顯示圖式文字說明 : - 點選 File/Preference - 並點選 Show names in component palette - 若要在面版周圍顯示尺規 (Ruler): - 在下拉選單選擇 Tools/Grid and Rulers - 然後再點選跳出視窗的 Show rulers 37
Example 1 改變 GUIDE 面版大小 : 拖放面版右下角的黑點來達成 在面版上放置兩個控制物件 ( 試著調整位置與大小 ) - Edit Text: 可編輯文字 - Slider 38
Example 1 Inspect Properties: 滑鼠右鍵點選任一個 UI 控制物件以改變其性質 39
Example 1: Inspect Properties 左邊 : 物件的性質 右邊 : 性質所對應的值 ( 點選右邊以改變這些值 ) 完成物件代號的設定後 : 可設定物件的反應命令 : - e.g. 想要把 slider 位置與文字欄位輸入的數字互相對在一起 - 目的一 : 拖放 slider, 將 slider 的位置 ( 預設值 : 0 ~ 1 ) 顯示在文字欄 - 目的二 : 文字欄位值被改變 : slider 的位置能夠隨之改變 在 GUIDE 的環境下 - 物件的反應命令由特定的反應函式來完成 - 反應函式名稱 : 物件代號 _Callback 40
Example 1 滑鼠右鍵點選 slider 並選取 View Callbacks/Callback => 開啟 MATLAB 程式編輯器 此程式編輯器會顯示反應命令必須加入的位置 slider 的 Tag: slider1 ( 看 fig 左下角 ) 反應函式 : slider1_callback() 程式自動產生程式碼 加進去兩列 : 使用者加入程式碼 41
Example 1 加入文字欄位的反應命令, 其反應函式是 edit1_callback() 加進去的兩列敘述 : 42
Example 1.fig: 只是設計, 無法執行 開啟可使用的 GUI 介面 : 按下 GUIDE 面版的工具列的三角形按鈕 由於所產生的程式碼並不在 MATLAB 的搜尋路徑中, 因此會先跳出一個詢問視窗 : 43
Example 1 跳出我們所設計的 GUI 介面如下 : 目的一 : 拉動 slider, slider 的位置就會顯示在文字欄位內 目的二 : 修改文字欄位的值, 可指定 slider 位置 44
Example 1 設計反應命令時 - 要能讓不同的 UI 控制物件都能存取其他物件及相關資料 - 因為每個 UI 控制物件的反應命令都是以函式的型式來進行 GUIDE 在每個反應函式內提供了一個結構變數 handles - 以便提供資料的共通, 並達到下列兩項功能 : - 經由 handles 存放或取用共通的資料 - 經由 handles 取得每一個 UI 控制物件的性質 45
Example 1: handles 若要在某一個控制物件的反應函式內存放變數 A, 可以加入下列敘述 : handles.mydata = A; % 將變數 A 存放在 handles 的 mydata 欄位 guidata(hobject, handles) % 將新的 handles 存回整個 GUI 介面 若要在另一個控制物件的反應函式裡面使用變數 A, 只要加入下列敘述即可 : A = handles.mydata; 46
Example 1 handles 本身也包含了同一個 GUI 介面下的所有控制物件, 因此你可以在任一個反應函式內取用每一個控制物件, 如下 : handles.slider1:slider 物件 handles.edit1: 文字欄位物件 47
Example 2 改進 : 若輸入不合法的數值時能回應錯誤訊息並記錄錯誤次數 - 由 GUIDE 面版開啟 gui01_test - 點選 File/Save As 將之儲存成 gui02_test - 此時 GUIDE 會開啟 gui02_test.m - 在 gui02_test_openingfcn() 函式加入敘述 : 48
Example 2 修改文字欄位的反應命令 : 49
Example 2 執行此應用程式, 在第 7 次輸入不合法的數值後 : 50
Example 4: 選單編輯器 ( 自行練習 ) 目的 : 在視窗的最上方加入階層式的下拉式選單 開啟空白面版並加入圖軸 : 51
Example 4 開啟 MATLAB 編輯器 : 點選 View/View Callback/CreateFcn 畫圖 : 在 gui04_test_openingfcn() 函式加入 peaks; 52
Example 4: 選單編輯器 目的 : 設計階層式的選單來控制此曲面的呈現方式 選單編輯器 : 點選 Tools/Menu Editor 產生新選單 : 點選左上角的圖示一次 改變選單性質 : 點選選單, 右邊出現相關選項, 可改選單名字等特性 53
Example 4: 次選單 產生次選單 : 點選圖示 => 可產生多層階層式選單 刪除選項 : 點選某一選單, 再點選圖示 開啟每個選單的編輯器 54
Example 4 目的 : 對每個最底層選項修改相關的反應函式 點選右邊 View=> 開啟 MATLAB 編輯器 在每個選項的反應函式所加入的命令如下表所示 : 選項 Shading/faceted Shading/interp Shading/flat Colormap/Gray Colormap/Cool Colormap/Summer 命令 shading faceted shading interp shading flat colormap gray colormap cool colormap summer 55
Example 4 56
其它說明 ( 自行練習 ) 樹狀物件瀏覽器 (Object Browsers) 點選 GUIDE 的 View/Object Browser 來開啟物件瀏覽 物件瀏覽器 : 點選任一個物件開啟對應的性質檢視器 57
其它說明 ( 自行練習 ) 對齊物件 : 點選 GUIDE 的 Tools/Align Objects 使用對齊功能 : 先選取多個物件再點選這個選單來進行對齊對齊前 對齊後 58