MATLAB のビジュアル グラフィカル ユーザー インターフェイスの設計

1. グラフィカルユーザーインターフェースの設計

• MATLAB は、グラフィカル ユーザー インターフェイス開発環境 (GUIDE) を提供します。これにより、ユーザー インターフェイスの設計が便利かつ直感的になり、「見たものがそのまま得られる」という視覚的な設計が実現します。

1. グラフィカル ユーザー インターフェイス設計ウィンドウ

1.1 グラフィカル ユーザー インターフェイスの設計テンプレート

• guideMATLAB コマンド ウィンドウにコマンドを入力するか、MATLAB メイン ウィンドウで [ホーム] タブを選択し、[ファイル] コマンド グループの [新規コマンド] ボタンをクリックして、[アプリケーション] ⟶ \ longrightarrow$⟶$ GUIDE コマンドを実行すると、下図に示すように「GUIDE クイック スタート」ウィンドウが表示されます。

• MATLAB は、グラフィカル ユーザー インターフェイス設計用に 4 つのテンプレートを用意しました。つまり、空の GUI (デフォルト)、Uicontrols を使用した GUI (コントロール オブジェクトを使用したグラフィカル ユーザー インターフェイス テンプレート)、Axes とメニューを使用した GUI (座標軸とメニューを使用したグラフィカル ユーザー インターフェイス テンプレート)、およびモーダルです。質問ダイアログ (モーダル質問ダイアログを備えた GUI テンプレート)。
• ユーザーが別のテンプレートを選択すると、そのテンプレートに対応する GUI が「プレビュー」バーでプレビューされます。

1.2 グラフィカル ユーザー インターフェイス設計ウィンドウ

• GUIデザインテンプレートでテンプレートを選択し、「OK」ボタンをクリックすると、GUIデザインウィンドウが開きます。異なる GUI 設計モードを選択すると、GUI 設計ウィンドウに異なる結果が表示されます。次の図は、空の GUI デザイン テンプレートを選択した後に表示される GUI デザイン ウィンドウを示しています。

• グラフィカル ユーザー インターフェイス設計ウィンドウは、メニュー バー、ツール バー、コントロール ツールボックス、グラフィック オブジェクト設計領域などで構成されます。
• グラフィカル ユーザー インターフェイスのデザイン ウィンドウの左側にはコントロール ツールボックスがあり、「ボタン」、「編集可能テキスト」、「座標軸」、「パネル」、「ボタン グループ」などのコントロールが含まれています。コントロールを選択し、ドラッグしてグラフィック オブジェクト デザイン領域に追加し、コントロール オブジェクトを生成します。
• グラフィック オブジェクトを右クリックすると、ショートカット メニューが表示され、そこから対応するデザインのメニュー項目を選択できます。
• たとえば、[コールバックの表示] サブメニューで CallBack、CreateFcn、DeleteFcn、ButtonDownFen、KeyPressFcn およびその他のコマンドを選択すると、コード エディターを開いて、対応するイベントが発生したときに実行する必要があるプログラム コードを作成できます。
• GUI デザイン ウィンドウの下部にあるステータス バーは、現在のオブジェクトのタグ プロパティと位置プロパティを表示するために使用されます。

2. ビジュアルGUIデザインツール

• MATLAB で一般的に使用される GUI 設計ツールは、オブジェクト プロパティ インスペクター、メニュー エディター、ツールバー エディター、オブジェクト整列ツール、オブジェクト ブラウザー、およびタブ オーダー エディターです。

1.1 オブジェクトプロパティインスペクタ

• オブジェクトプロパティインスペクターを使用すると、各オブジェクトのプロパティ値を確認したり、オブジェクトのプロパティ値を変更および設定したりすることができます。オブジェクトをダブルクリックするか、オブジェクトを選択した状態で、GUI デザイン ウィンドウのツールバーから [プロパティ インスペクター] コマンド ボタンをクリックするか、 [表示] $⟶$「プロパティインスペクター」コマンドを実行して、下図に示すように「オブジェクトプロパティインスペクター」ウィンドウを開きます。

• あるいは、MATLAB コマンド ウィンドウのコマンド ラインにコマンド「inspect」を入力して、オブジェクト プロパティ インスペクターを開きます。
• オブジェクトを選択した後、オブジェクト プロパティ インスペクターを通じてオブジェクトのプロパティを表示したり、オブジェクトのプロパティを簡単に変更したりすることもできます。

2.2 メニューエディタ

• メニュー エディタを使用すると、ドロップダウン メニューとショートカット メニューを作成、設定、変更できます。GUI デザイン ウィンドウのツールバーから [メニュー エディター] コマンド ボタンをクリックするか、 [ツール] $⟶$「メニューエディタ」コマンドを実行すると、下図に示すように「メニューエディタ」ウィンドウが開きます。

• メニュー エディタの左上隅にある最初のボタンは、第 1 レベルのメニュー項目を作成するために使用され、クリックすると第 1 レベルのメニュー項目を作成できます。2 番目のボタンは、サブメニューを作成するために使用されます。作成した第 1 レベルのメニュー項目を選択した後、このボタンをクリックすると、選択した第 1 レベルのメニュー項目のサブメニューを作成できます。
• 作成したメニュー項目を選択すると、メニュー エディターの右側にメニュー項目の関連プロパティが表示され、メニュー項目のプロパティを設定および変更できます。
• 下図はメニューエディタで作成した「曲線描画」と「パラメータ設定」の2つの第1階層メニューと、「曲線描画」の第1階層メニューの下に「サインカーブ」と「コサイン」の2つの項目を示しています。 「パラメータ設定」の１階層目には「枠線」、「カラー」、「マーク」の３つのサブメニューがあります。

• メニューエディタの左上隅にある4番目と5番目のボタンはメニュー項目のレベルを変更するために使用され、6番目と7番目のボタンは選択したメニューを水平方向に上下に移動するために使用され、最後に右側のボタンが使用されます。選択したメニューを削除します。
• メニューの主なプロパティは、メニュー エディターの右側にリストされます。「label」属性の値は、メニュー項目の識別子として使用される文字列です。「label」属性の値は、メニュー項目の名前を定義するために使用される文字列です。 「ショートカット キー」属性はメニュー項目のショートカット キーの定義に使用される任意の文字です。3 つのチェック ボックスはメニュー項目の外観属性を表します。「コールバック」属性の値は文字列です。スクリプト ファイル名または MATLAB コマンドのグループ。
• メニュー項目が選択されると、MATLAB はこのコールバック関数を自動的に呼び出して、対応するメニュー項目に応答します。
• メニュー エディターには 2 つのタブがあり、[メニュー バー] タブを選択してドロップダウン メニューを作成します。
• 「コンテキストメニュー」タブを選択し、ショートカットメニューを作成します。[コンテキスト メニュー] タブを選択すると、メニュー エディタの左上隅にある 3 番目のボタンが使用可能になります。このボタンをクリックしてショートカット メニューを作成します。

2.3 ツールバーエディタ

• ツールバー エディタを使用して、ツールバーを作成、設定、および変更します。
• GUI 設計ウィンドウのツールバーから [ツールバー エディター] コマンド ボタンをクリックするか、 [ツール] $⟶$「ツールバーエディタ」コマンドを実行すると、下図に示すように「ツールバーエディタ」ウィンドウが開きます。

• 「ツールバーエディタ」ウィンドウの上部はデザインされたツールバー、左半分はツールパレット、右半分はツールボタンの追加と削除、ツールボタンやツールバーのプロパティの設定に使用されます。セパレータを使用すると、ツール ボタンのグループ化効果が得られます。
• 「新規」や「開く」などのボタンは、クリックされたときのみコールバック メソッドを設計でき、通常はデフォルトのコールバック メソッドを使用します。「拡大」「縮小」などのトグルボタンは、「クリック時のコールバック」メソッドを設計できるだけでなく、ボタンのオン・オフ時のコールバックメソッドも設計できます。

2.4 オブジェクトの整列ツール

• [オブジェクトの整列] ツールを使用すると、GUI オブジェクト設計領域内の複数のオブジェクトの位置を調整できます。
• 複数のオブジェクトを選択した状態で、GUI デザイン ウィンドウのツールバーの [オブジェクトの位置合わせ] コマンド ボタン文字列をクリックするか、 [ツール] $⟶$「オブジェクトの整列」コマンドを実行すると、下図に示すように「オブジェクトの整列」ウィンドウが開きます。

• 「オブジェクトの整列」ウィンドウの「整列」グループボタンは整列方向の調整に使用され、「分散」グループボタンはオブジェクトの間隔の調整に使用されます。

2.5 オブジェクトブラウザ

• オブジェクト ブラウザを使用すると、現在の設計段階での各ハンドル グラフィック オブジェクトを表示できます。
• GUI デザイン ウィンドウのツールバーから [オブジェクト ブラウザ] コマンド ボタン パッドをクリックするか、[表示] $⟶$「オブジェクトブラウザ」コマンドを実行すると、下図に示すように「オブジェクトブラウザ」ウィンドウが開きます。

• [オブジェクト ブラウザ]ウィンドウには、作成された各グラフィックス オブジェクトとグラフィックス ウィンドウ オブジェクトが表示されます。図内の任意のオブジェクトをマウスでダブルクリックして、オブジェクトのプロパティ インスペクター インターフェイスに入ります。

2.6 タブシーケンスエディタ

• Tab キー順序エディターを使用すると、ユーザーがキーボードの Tab キーを押したときにオブジェクトが選択される順序を設定できます。
• GUI デザイン ウィンドウのツールバーから [タブ オーダー エディター] ボタンをクリックするか、 [ツール] $⟶$「Tab Key Order Editor」コマンドで「Tab Key Order Editor」ウィンドウを開きます。
• たとえば、GUI デザイン ウィンドウで 3 つのオブジェクトが作成された場合、それらに対応するタブ シーケンス エディターは次のようになります。

• [タブ オーダー エディター] ウィンドウで、追加したオブジェクトを確認できます。インターフェイスの左上隅には 2 つのボタンがあり、それぞれ Tab キーを押したときにオブジェクトが選択される順序を設定するために使用されます。

3. ビジュアル GUI 設計例

• 上記で紹介したグラフィカル ユーザー インターフェイス設計ツールを使用すると、使いやすいインターフェイス、簡単な操作、強力な機能を備えたグラフィカル ユーザー インターフェイスを設計し、オブジェクトのイベント応答プロセスを記述することで対応するタスクを完了できます。以下に、これらのツールの具体的な使用方法を例を挙げて説明します。
• たとえば、グラフィカル ユーザー インターフェイス設計ツールを利用して、次の図に示すユーザー インターフェイスを設計します。このインターフェイスには、曲面プロット、グリッド プロット、等高線プロットなどのグラフィックスを表示するための Axes オブジェクトが含まれています。グラフィックスを描画する機能は 3 つのコマンド ボタンによって実現され、ユーザーは対応するボタンをクリックすることで対応するグラフィックスを描画できます。グラフの描画に必要なデータはリスト ボックスから選択します。リスト ボックスには 3 つのオプションがあり、それぞれ MATLAB のデータ関数 Peaks、Membrane、およびユーザー定義の描画データ Sinc に対応しており、ユーザーは対応するオプションを選択することで、対応する描画データをロードできます。

• 操作手順は以下の通りです。
• (1) グラフィカル ユーザー インターフェイスのデザイン ウィンドウを開き、関連するグラフィック オブジェクトを追加します。
• まず、「GUIDE クイック スタート」ウィンドウを開き、「空白の GUI (デフォルト)」オプションを選択し、「OK」ボタンをクリックしてグラフィカル ユーザー インターフェイスのデザイン ウィンドウを開きます。GUI デザイン ウィンドウ コントロール ツールボックスで「座標軸」コントロールを選択し、グラフィックス ウィンドウで四角形をドラッグして、四角形のサイズと位置を調整します。さらに 3 つのボタン、リスト ボックス、静的テキスト ボックスを追加し、それらのサイズと位置を調整します。
• (2) プロパティインスペクタを使用して、インターフェイスオブジェクトのプロパティを設定します。
• 最初のボタンの String プロパティと Tag プロパティを「Mesh」に設定し、2 番目のボタンの String プロパティと Tag プロパティを「Surf」に設定し、3 番目のボタンの String プロパティと Tag プロパティを「Contour3」に設定します。
• リスト ボックスの Tag プロパティを ChooseFun に設定し、リスト項目を追加します。 String プロパティ名の後ろにあるアイコンをクリックし、開いたテキスト エディターに 3 つのオプション (Peaks、Membrane、Sinc) を入力します。それぞれの間の区切り文字として「I」を使用します。オプション文字を使用するか、Enter キーを区切り文字として使用します。1 行に 1 つのオプションが 3 行入力されていることに注意してください。
• 静的テキストの String プロパティを「描画パラメータの選択」に設定します。
• (3) オブジェクト整列ツールを使用してコントロールの位置を調整します。
• 3 つのボタンを選択し、オブジェクトの整列ツールを使用して、最初の 3 つのボタンが同じ幅と高さ、同じ間隔で左揃えに設定されます。
• (4) GUI を保存します。
• 「ファイル」を選択$⟶$「保存」コマンドまたはツールバーの「図を保存」ボタンをクリックして、デザインしたグラフィックインターフェイスを .fig ファイルとして保存します。
• たとえば、これを guidemo.fig として保存すると、システムは自動的に guidemo.m ファイルを生成します。この M ファイルは、各グラフィック オブジェクトのプログラム コードを保存するために使用されます。
• (5) 制御機能を実現するコードを記述します。
• 実装コードが比較的単純な場合は、コントロールの CallBack プロパティを直接変更できます。より複雑なプログラム コードの場合は、M ファイルを作成することをお勧めします。
• グラフィカル ユーザー インターフェイス設計ウィンドウのツールバーにある [エディタ] ボタンをクリックして M ファイルを開くと、グラフィカル ユーザー インターフェイス開発環境によって対応するコールバック関数フレームが自動的に追加され、この時点で対応するプログラム コードを入力できます。
• コールバック関数は、イベントを処理するプログラムです。オブジェクトが情報を処理し、イベントに応答する方法を定義します。この関数はアクティブには実行されませんが、メイン制御プログラムによって呼び出されます。メイン制御プログラムは常にフォアグラウンドで動作しており、さまざまなメッセージを分析、キューイング、処理します。制御がトリガーされると、指定されたコールバック関数を呼び出します。実行が完了すると、制御はメイン制御プログラムに戻ります。
• gcbo をコールバックを実行しているオブジェクトのハンドルとし、オブジェクトのプロパティをクエリするために使用できます。例えば：

get(gcbo,'Value')	%获取回调对象的状态

• MATLAB は、Tag プロパティを各コントロールの一意の識別子とみなします。グラフィカル ユーザー インターフェイス開発環境が M ファイルを生成するとき、Tag 属性はプレフィックスとして使用され、コールバック関数のキーワード Callback の前に配置され、アンダースコアで接続されて関数名になります。例えば：

function pushbutton1_Callback(hObject,eventdata,handles)

• このうち、hObject はイベントのソース コントロール、eventdata はイベント データ、handles はグラフィカル インターフェイス内のすべてのオブジェクトのハンドルを保存します。
• ハンドルはグラフィックス ウィンドウ内のすべてのオブジェクトのハンドルを保存します。ハンドルを使用してオブジェクトのプロパティを取得または設定できます。たとえば、グラフィックス ウィンドウのボタン Button1 がクリックされたときに、グラフィックス ウィンドウのオブジェクト Text1 のテキストを「ようこそ」に設定するには、function Button1_Callback(hObject, eventdata, handles)関数の本体に次のステートメントを追加します。

set(handles.text1,'String','Welcome') ;

• グラフィカルユーザーインターフェース開発環境では、guidataハンドルの生成・維持機能を利用し、必要に応じてフィールドを追加したり、ハンドルの指定フィールドにデータを保存したりすることで、グラフィックハンドルとデータを関連付けることができ、グラフィックハンドル間でのデータ共有を実現します。コールバック。
• ① グラフィックウィンドウを開くイベントの応答コードを記述します。MATLAB エディターの [エディター] タブを選択し、[ナビゲーション] コマンド グループの [移動] コマンド ボタンをクリックし、ポップアップ メニューで [関数] を選択し、 で始まるコメント ステートメントの下に次のコードを入力しますguidemo. _OpeningFcn。%varargin

handles.peaks=peaks(35);
handles.membrane=membrane;
[x,y]=meshgrid(-8:0.3:8);
r=sqrt(x.^2+y.^2);
sinc=sin(r)./(r+eps);
handles.sinc=sinc;
handles.current_data=handles.sinc;
surf(handles.current_data)

• ②リストボックスのレスポンスコードを記述します。ChooseFun_ Callback関数を選択し、%handlesで始まるコメント ステートメントの下に次のコードを入力します。

str=get(hobject,'String');
val=get(hobject,'Value');
%设置用所选函数产生当前数据集
switch str{
    
    val}
case 'Peaks'
	handles.current_data=handles.peaks; 
case 'Membrane'
	handles.current_data=handles.membrane;
case 'Sinc'
	handles.current_data=handles.sinc;
end
%保存句柄结构
guidata(hobject,handles)

• ③メッシュボタンのレスポンスコードを記述します。関数を選択しMesh _Callback、この領域に次のコードを追加します。

mesh(handles.current_data)

• ④ Surfボタンのレスポンスコードを記述します。関数を選択しSurf_Callback、この領域に次のコードを追加します。

surf(handles.current_data)

• ⑤ Contour3ボタンのレスポンスコードを記述します。関数を選択しContour3_Callback、この領域に次のコードを追加します。

contour3(handles.current_data)

• 各制御オブジェクトには関数ステートメントによってガイドされる関数があり、ユーザーは対応する関数本体にプログラム コードを追加して指定されたタスクを完了できることがわかります。
• グラフィカル ユーザー インターフェイス ファイルの実行時にオブジェクトの 1 つをクリックすると、MATLAB メカニズムの下で関数が自動的に呼び出されます。
• ⑥ GUIを実行します。
• プログラム コードを保存した後、GUI デザイナーで [ツール] を選択します$⟶$「実行」コマンド、またはツールバーの「グラフィックの実行」コマンドボタンをクリックして、目的の GUI を取得します。
• グラフィカル インターフェイスを保存した後、コマンド ライン ウィンドウにファイル名を直接入力して実行することもできます。たとえば、「guidemo」と入力すると、上で保存したインターフェイスを実行できます。
• たとえば、グラフィックス ウィンドウのデフォルト メニューとカスタム メニュー項目「設定」を上の例のグラフィックス ウィンドウに追加します。「設定」メニュー項目の内容を下の図に示します。「グリッド線」サブメニュー項目は座標軸へのグリッド線の追加を制御し、「境界線」サブメニュー項目は座標軸へのフレームの追加を制御します。 「背景色」サブメニュー項目 グラフィックス ウィンドウの背景色を制御します。

• 操作手順は以下の通りです。
• (1) 作成したGUIファイルを開きます。
• まず、「GUIDE クイック スタート」ウィンドウを開き、「既存の GUI を開く」タブを選択し、上記の例で作成した GUI ファイル guidemo.fig を選択し、ファイルを開いて guidemo1.fig として保存します。
• (2) グラフィックウィンドウのデフォルトメニューを表示します。
• Figure ウィンドウの空白部分をダブルクリックして「プロパティ インスペクター」ウィンドウを開き、Figure ウィンドウの MenuBar プロパティを Figure に設定します。ユーザー独自のメニュー システムを確立するためにグラフィックス ウィンドウのデフォルト メニューをキャンセルする必要がある場合は、グラフィックス ウィンドウの MenuBar プロパティを none に設定できます。
• (3) カスタムメニューを追加します。
• GUI デザイン ウィンドウのツールバーにある [メニュー エディター] コマンド ボタンをクリックして [メニュー エディター] ウィンドウを開き、新しい第 1 レベルのメニュー項目を作成し、その [ラベル] プロパティを [設定] に設定し、[マーク] プロパティを設定します。 to Optionで、「ショートカットキー：Ctrl+」属性をOに設定します。
• 次に、新しく作成した「設定」メニュー項目の下に 3 つの第 2 レベルのサブメニュー項目を作成し、それぞれの「タグ」プロパティを「グリッド線」、「境界線」、「背景色」に設定し、タグのプロパティを hgon、hbon、うーん。
• 「背景色」メニュー項目の「このメニュー項目の区切り線」プロパティを選択して、このメニュー項目の上に区切り線を追加します。
• 次に、「背景色」メニュー項目の下に 3 つの第 3 レベルのサブメニュー項目を作成します。その「ラベル」属性はそれぞれ「黄」、「青」、「白」に設定され、「マーク」属性はそれぞれ hweYellow、hwcBlue に設定されます。 、 hwcWhite 、「ショートカット キー: Ctrl+」プロパティはそれぞれ Y、B、W に設定されます。
• 「グリッド線」と「白」メニュー項目の「このメニュー項目の前にチェックマークを追加する」プロパティをチェックして、これら 2 つのメニュー項目の前に記号「√ \ surd」が付くようにします$\surd$」。
• (4) カスタムメニュー機能を実現するコードを記述します。
• ①メニュー項目「グリッド線」に対するレスポンスコードを記述します。hgon_Callback関数を選択し、%handlesで始まるコメント ステートメントの下に次のコードを入力します。

if strcmp (get (gcbo, 'Checked'), 'on')
	set (gcbo, 'Checked', 'off');
	grid off;
else
	set (gcbo, 'Checked', 'on') ;
	grid on;
end

• ②メニュー項目「枠線」に対するレスポンスコードを記述します。関数を選択しhbon_Callback、この領域に次のコードを追加します。

if strcmp (get (gcbo, 'Checked'), 'on')
	set (gcbo, 'Checked', 'off') ;
	box off;
else
	set (gcbo, 'Checked' , 'on') ;
	box on;
end

• ③ 3色のメニュー項目のレスポンスコードを記述します。関数を選択しhwcYellow_Callback、この領域に次のコードを追加します。

set(gcbf,'Color','y');
set(gcbo,'Checked','on');
set(handles.hwcBlue,'Checked','off');
set(handles.hwcWhite,'Checked','off');

• 関数を選択しhwcBlue_ Callback、この領域に次のコードを追加します。

set(gcbf,'Color','b');
set(gcbo,'Checked','on');
set(handles. hwcYellow,'Checked','off');
set(handles. hwcWhite,'Checked','off');

• 関数を選択しhwcWhite_ Callback、この領域に次のコードを追加します。

set(gcbf,'Color','w');
set(gcbo,'Checked','on');
set(handles.hwcYellow,'Checked','off');
set(handles.hwcBlue,'Checked','off');

• (5) GUI を保存して実行します。