MATLAB 程式設計入門篇 握把式圖形與 GUI 設計

Presentation on theme: "MATLAB 程式設計入門篇 握把式圖形與 GUI 設計"— Presentation transcript:

1 MATLAB 程式設計入門篇 握把式圖形與 GUI 設計
張智星 (Roger Jang) 清大資工系 多媒體檢索實驗室

2 握把式圖形 (Handle Graphics)
MATLAB 程式設計入門篇 握把式圖形 (Handle Graphics) 基本概念 每一個構成圖形的基本單位都可視為一個物件 (Object)，例如： 曲線、曲面、圖軸、文字… 每個物件都有一個獨一無二的握把 (Handle)，就像每一個人都有一個獨一無二的身份證字號 根據物件的握把，就可以存取圖形物件的所有性質

3 MATLAB 程式設計入門篇 圖形物件的階層結構 圖形物件階層結構（Hierarchy）

4 MATLAB 程式設計入門篇 階層結構的一個例子

5 MATLAB 程式設計入門篇 圖形物件的性質存取 可以分兩種方法： 以 MATLAB 所提供的圖形使用者介面（GUI，Graphical User Interface）進行圖形物件的性質存取 以 MATLAB 命令列進行圖形物件的性質存取

6 MATLAB 的性質編輯器 先畫完圖，再使用 propedit 開啟性質編輯器，例如
>>peaks; % 畫出 peaks 3D 圖 >>propedit; % 開啟性質編輯器 若不在命令列下達 propedit，也可以點選工具列上面的 圖示來開啟圖形編輯功能。

7 進行圖形編輯 啟動圖形編輯功能後，直接以滑鼠左鍵點選圖形物件（例如圖軸），然後點選右鍵選取所需要修改的性質，就可以達到修改圖形的效果。
MATLAB 程式設計入門篇 進行圖形編輯 啟動圖形編輯功能後，直接以滑鼠左鍵點選圖形物件（例如圖軸），然後點選右鍵選取所需要修改的性質，就可以達到修改圖形的效果。

8 圖形物件的性質存取 以命令列進行圖形物件的性質存取 set：設定某個性質的值 get：取得某個性質的值
MATLAB 程式設計入門篇 圖形物件的性質存取 以命令列進行圖形物件的性質存取 set：設定某個性質的值 get：取得某個性質的值 findobj：在握把式圖形的階層式結構中，找出您要的物件

9 set 範例 t = 0:0.1:4*pi; y = exp(-t/5).*sin(t);
MATLAB 程式設計入門篇 set 範例 set範例:hg02.m t = 0:0.1:4*pi; y = exp(-t/5).*sin(t); h = plot(t, y); % h 為曲線的握把 set(h, 'Linewidth', 3); % 將曲線寬度改為 3 set(h, 'Marker', 'o');%將曲線的線標改成小圓圈 set(h, 'MarkerSize', 20);% 將線標的大小改成 20

10 set 範例 單獨使用 set(h)，可以列出 h 的所有性質，以及這些性質的可能值和預設值，例如：
MATLAB 程式設計入門篇 set 範例 單獨使用 set(h)，可以列出 h 的所有性質，以及這些性質的可能值和預設值，例如： >> h=plot(humps); >> set(h, 'linestyle')

11 get 範例 >>get(h, 'LineWidth') % 取得曲線寬度 ans =3;
MATLAB 程式設計入門篇 get 範例 get範例: >>get(h, 'LineWidth') % 取得曲線寬度 ans =3; >> get(h, 'Color') % 取得曲線顏色 ans = >> get(h) %列出 h 的所有性質的值 …

12 findobj 範例 >> plot(rand(10,2)); % 畫出兩條曲線
MATLAB 程式設計入門篇 findobj 範例 findobj範例: >> plot(rand(10,2)); % 畫出兩條曲線 >> h=findobj(0, 'type', 'line') % 找出曲線的握把 h = >> set(h, 'LineWidth', 3); % 經由握把將曲線寬度改為 3

13 MATLAB 程式設計入門篇 MATLAB GUI 程式設計 MATLAB GUI 程式設計的兩種方式 M 檔案 GUIDE 發展環境

14 M檔案 範例 M 檔案的GUI 設計 Uicontrol Mouse Events
MATLAB 程式設計入門篇 M檔案 M 檔案的GUI 設計 Uicontrol Mouse Events 範例 xpsound、travel、truss、lorenz 等

15 uicontrol範例1 h = uicontrol; % 產生按鈕 set(h, 'String', '請按我！');
MATLAB 程式設計入門篇 uicontrol範例1 範例7-3：uicontrol01.m h = uicontrol; % 產生按鈕 set(h, 'String', '請按我！'); % 在按鈕表面加入文字「請按我！」 cmd = 'fprintf(''有人按我一下喔！\n''); '; % 定義按鈕被按後的反應指令 set(h, 'Callback',cmd); % 設定按鈕的反應指令

16 MATLAB 程式設計入門篇 uicontrol範例1

17 UI 控制物件 Uicontrol產生UI (User Interface) 控制物件 按鈕（Push Button）
MATLAB 程式設計入門篇 UI 控制物件 Uicontrol產生UI (User Interface) 控制物件 按鈕（Push Button） 滑動棒（Sliding Bar） 圓形按鈕（Radio Button） 框架（Frame） 核計方塊（Check Box） 文字欄位（Edit Box） 列表式選單（List Menu） 下拉式選單（Popup Menu）

18 uicontrol範例2: uicontrol02.m close all % 關閉所有圖形視窗
MATLAB 程式設計入門篇 uicontrol範例2: uicontrol02.m close all % 關閉所有圖形視窗 uicontrol('style', 'push', 'position', [ ]); uicontrol('style', 'slide', 'position', [ ]); uicontrol('style', 'radio', 'position', [ ]); uicontrol('style', 'frame', 'position', [ ]); uicontrol('style', 'check', 'position', [ ]); uicontrol('style', 'edit', 'position', [ ]); uicontrol('style', 'list', 'position', [ ], 'string', '1|2|3|4'); uicontrol('style', 'popup', 'position', [ ], 'string', 'one|two|three');

19 MATLAB 程式設計入門篇 uicontrol範例2

20 MATLAB 程式設計入門篇 uicontrol的完整範例之一 另一個uicontrol的完整範例是 ui01.m

21 uicontrol的完整範例之二 ui01.m的潛在問題 解決方案：使用Switchyard Programming的程式設計概念
MATLAB 程式設計入門篇 uicontrol的完整範例之二 ui01.m的潛在問題 需要使用三個檔案，管理不方便。 使用的變數都在 MATLAB 基本工作空間中，容易造成變數的相衝及覆蓋。 解決方案：使用Switchyard Programming的程式設計概念 範例：ui02.m（請仔細研讀！） ‘tag’的使用

22 滑鼠事件 (Mouse Events) 主要滑鼠事件 WindowButtonDownFcn：定義滑鼠按鈕按下時反應指令
MATLAB 程式設計入門篇 滑鼠事件 (Mouse Events) 主要滑鼠事件 WindowButtonDownFcn：定義滑鼠按鈕按下時反應指令 WindowButtonMotionFcn：定義滑鼠移動時的反應指令 WindowButtonUpFcn：定義滑鼠按鈕釋放時的反應指令

23 滑鼠事件的使用 我們希望滑鼠先被按下，然後再移動滑鼠時，才會觸發移動時的反應指令。欲達到此效果，我們必須做下列事項：
MATLAB 程式設計入門篇 滑鼠事件的使用 我們希望滑鼠先被按下，然後再移動滑鼠時，才會觸發移動時的反應指令。欲達到此效果，我們必須做下列事項： 在滑鼠按鈕被按下時，設定 WindowButtonMotionFcn 及 WindowButtonUpFcn 的值。 在滑鼠按鈕被釋放時，清除 WindowButtonMotionFcn 及 WindowButtonUpFcn 的值。 因此，只有在滑鼠按鈕被按下，且滑鼠在移動時，對應於 WindowButtonMotionFcn 的反應指令才會被呼叫。

24 MATLAB 程式設計入門篇 滑鼠事件的範例 一個滑鼠事件 (Mouse Events)的範例：mouse01.m（請仔細研讀！）

25 MATLAB 程式設計入門篇 如何使用UserData 在 Switchyard Programming 時，若要在不同的函數呼叫下存取相同的變數，有幾種方法： 使用UserData 每一個圖形物件都具有的欄位 可用來儲存一些特定的資料 使用全域變數 好處：程式碼較簡短 壞處：較難偵錯