MATLABでUIを作る
今回のブログ担当のシロハです。
最近MATLABでUIを作成する機会があったので、
今回はMATLABのUIの作り方について書くことにしました。さっそく本題。
UIの作り方
まずUIの作り方として、
1:手作業でボタンなどのオブジェクトを配置する方法
2:MATLABスクリプトでオブジェクトを配置する方法
の2通りがあります。
今回の記事では、2.のMATLABスクリプトでオブジェクトを配置する方法について解説します。
まず初めに、MATLABのUIを作るうえで必要な要素について考えます。
1:オブジェクトを配置するためのウィンドウの表示
2:ユーザーが操作するオブジェクトを配置する(ボタン、スライダー、テキストボックスなど)
3:オブジェクトを操作した時に実行される処理(関数)の定義
作りたいものによってはもう少し増える可能性もありますが、
今回はこれら3点を踏まえて作成できるUIを作成します。
まずは1～3の簡単な説明からになります。
1:オブジェクトを配置するためのウィンドウの表示の仕方
‘figure’関数を使用すれば簡単にウィンドウを表示できます。
例：figure(‘Position’,[100,100,600,400])
上記例では’Position’のオプションを指定しています。
これは、ウィンドウサイズを変更するオプションです。
他にも様々なオプションがあるので、必要に応じて追加してください。
参考URL
https://jp.mathworks.com/help/matlab/ref/matlab.ui.figure-properties.html
2:ユーザーが操作するオブジェクトを配置する(ボタン、スライダー、テキストボックスなど)
オブジェクトの配置には’uicontrol’関数を使用します。
また、配置するオブジェクトの種類をオプションとして定義する必要があります。
他にも、オブジェクトを配置する位置、表示する文字列や文字の大きさ、
ボタンを押したときに実行される関数との紐付などもuicontrolのオプションとして記述できます。
使い方はこの後、使用例と共に説明します。
3:オブジェクトを操作した時に実行される処理の定義
オブジェクトに関数を紐づけることで、オブジェクトを操作した時に関数を実行できます。
それによって、オブジェクトを操作したときに任意の動作を起こすことが出来ます。
今回つくるUIについて
例題として、加減乗除を実行するUIを作成します。
必要なオブジェクトは
・演算ボタン(+,-,×,÷の計4つ)
・演算したい数値を入力する場所(今回はテキストボックスを使用する。数は2つ)
・演算結果の表示(1つ)
となります。
また、ボタンを押したときに実行される関数も作成する必要があります。
UIの作成
必要な要素は、ウィンドウとボタンです。
まず、
figure(‘Position’,[100 100 600 400])
のように記述してウィンドウを作成します。
この後ボタンを配置するのですが、全部書くと長くなるので、オブジェクトの種類ごとにピックアップします。
1:エディットボックス
edit1 = uicontrol(‘Style’,’edit’,... ‘Position’,[120 150 50 25],... ‘String’,’10’)
‘Style’のオプションに、’edit’を指定すると、エディットボックスを配置することが出来ます。
今回の例では、演算したい数字をユーザーが入力できるようにするために使用します。
2:テキストボックス
text = uicontrol(‘Style’,’text’,... ‘Position’,[195 150 20 20],... ‘String’,’□’,... ‘Fontsize’,15)
‘Style’オプションに、’text’を指定すると、テキストボックスを配置することが出来ます。
今回の例では、+,-,×,÷の記号の表示のために使用します。また、演算ボタンを押したときに、押したボタンに応じたマークに変えるようにしています
3:プッシュボタン
Add = uicontrol(‘Style’,’pushbutton’,...
‘Position’,[120 250 75 30],...
‘String’,’+’,...
‘Callback’,@add,... %add関数を呼び出す
‘UserData’,{edit1,edit2,text,Answer}) %先に定義した他オブジェクトの呼び出しこれまでの2つと大きく違うのは、’Callback’,’UserData’の２つです。
この２つは初めてUIを作るときに最も迷うところだと思います。
まずCallBackは、ボタンを押したときに呼び出す関数のことです。
上の例の場合、ボタンを押したときに’add’という関数を呼び出すようになります。
次にUserDataですが、これはCallBackで呼び出した'関数で使用するオブジェクトの宣言'です。
上の例の場合、{edit,edit2,text,Answer}の4つのオブジェクトを引数としてAdd関数を呼び出します。
主に、オブジェクトの持っている要素を使用する、またオブジェクトに要素を定義・上書きする場合に使用します。
add関数の作り方について
function add(source,event) % 関数の宣言
Data1 = source.UserData{1,1}; %UserDataの呼び出し
Data2 = source.userData{1,2};
Symbol = source.UserData{1,3};
Symbol.String = ‘+’; %記号の変更
Answer = source.UserData{1,4};
Answer.String = [‘=’,num2str(str2double(Data.String)+str2double(Data.String))]; %演算処理UIの関数では、UI上のデータを書き換えるためにUserDataを呼び出して、データを上書きする必要があります。
先ほどの例では、UserData{1,3}とUserData{1,4}を書き換えています。(それぞれ4・5行目と6・7行目)
UserDataの{1,1}と{1,2}も呼び出していますが、これは演算処理に必要なため呼び出しています。
ちなみにAdd関数を走らせる前後を比較すると下の画像のようになります。
{1,1},{1,2}は関数で演算する数値を呼び出すために、
{1,3}は呼び出す関数に応じた記号を表示するために、
{1,4}は演算結果を表示するために必要でした。
まとめ
add関数が理解できれば、引き算・掛け算・割り算も同じように作成できます。
実際、+になっているところをそれぞれの演算に変えて、関数名を任意の文字列に変えるだけなので、簡単ですね。
というわけで改めて流れを確認すると、
オブジェクトを操作した時に実行してほしい関数を作成する
⇒ウィンドウを作る
⇒ウィンドウ上にオブジェクトを配置する
⇒オブジェクトのオプションを設定する
となります。
せっかくなので、今回作成したコードも貼っておきます。
(関数部分は上で書いたadd関数とほぼ同じなので割愛)
figure('Position',[100 100 600 400]);
%入力値1
edit1 = uicontrol('Style','edit',...
'Position',[120 150 50 25],...
'String','10');
%入力値2
edit2 = uicontrol('Style','edit',...
'Position',[240 150 50 25],...
'String','20');
%演算記号
text = uicontrol('Style','text',...
'Position',[195 150 20 20],...
'String','□',...
'Fontsize',15);
%演算結果
Answer = uicontrol('Style','text',...
'Position',[320 150 100 20],...
'Fontsize',12,...
'String','=');
%足し算
Add = uicontrol('Style','pushbutton',...
'Position',[120 250 75 30],...
'String','+',...
'Callback',@add,...
'UserData',{edit1,edit2,text,Answer});
%引き算
Subtraction = uicontrol('Style','pushbutton',...
'Position',[220 250 75 30],...
'String','-',...
'Callback',@subtraction,...
'UserData',{edit1,edit2,text,Answer});
%掛け算
Multiplication = uicontrol('Style','pushbutton',...
'Position',[320 250 75 30],...
'String','×',...
'Callback',@multiplication,...
'UserData',{edit1,edit2,text,Answer});
%割り算
Division = uicontrol('Style','pushbutton',...
'Position',[420 250 75 30],...
'String','÷',...
'Callback',@division,...
'UserData',{edit1,edit2,text,Answer});
