SciLabでGUIを使ってみる

### 予備知識

```SciLab:各Exampleを実行する前にGUIパーツをリセット
xdel(winsid());
clear;
clearglobal;
```
※行末の`..`は継続行です

## いきなりExample
SciLab ヘルプのGUIの ___uicontorol___ のExampleを試してみる

```SciLab:uicontrolのExampleをちょっといじる
f=figure(0); // (window ID 0 を指定し)図を作成

// 位置を指定して、GUIオブジェクト（リストボックス）を作成
// figure fのstyleをlistboxに、positionをx:10,y:10,w:150,h:160
h=uicontrol(f,  'style','listbox',  'position',[10 10 150 160]);
// リストの値を設定する
set(h, 'string', "item 1|item 2|item3");
```
ここまで実行するとグラフィックウィンドウ０の左下にitem 1からitem 3までのリストボックスが表示される。

例ではこのあと要素の１と３を選択状態にするのですが、エラーになります。

```
set(h, 'value', [1 3]);// リストで要素1と3を選択
```
item 1とitem 3を選択済みにするためのコードだが、先にValueプロパティで設定できる最大値をMaxプロパティにセットしておかないといけない。

```SciLab:Maxを先に設定してから要素を選択済みにする
set(h, 'Max',3);
set(h, 'value', [1 3]);// リストで要素1と3を選択
//close(f);
```

## 使ってみた
<img src="https://qiita-image-store.s3.amazonaws.com/0/115334/1fa2dcd6-8825-a3c1-84a2-fc1c7188b8af.png" width="80%">
まずは余計なものを消す。

```
//********************************************************************
//   CLEAN
//********************************************************************
xdel(winsid());
clear;
clearglobal;
```
GUI部品をクリックしたときに呼び出すコールバック関数を定義する。cb_slide_K1()は、スライダーK1をスライドしたときの処理。"SL_K1"のタグがついたGUI部品の"value"の値を読み込み、文字列に変換したものを"K1"タグのついたGUI部品(テキスト）の"string"にセットする。
cb_doit(dim)は、K1,K2の"string"をよみとり、引数dimに指定した処理を行う。

```
********************************************************************
//   GUI FUNCTIONS
//********************************************************************
function cb_slide_K1()
    k1 = get("SL_K1", "value");
    set("K1", "string", string(k1));
endfunction
function cb_slide_K2()
    k2 = get("SL_K2", "value");
    set("K2", "string", string(k2));
endfunction
function cb_doit(dim)
    k1 = evstr(get("K1", "string"));
    k2 = evstr(get("K2", "string"));
    select dim
        case 1 then
            //...
        case 2 then
            //...
        else
    end
    //...
endfunction
```
ウインドウにフレームを２つセットする。

```
********************************************************************
//   GUI
//********************************************************************
// TOP WINDOW
sb_top_fig=figure(...
"dockable", "off", "infobar_visible", "off", ...
"toolbar_visible", "off", "toolbar", "none", ...
"menubar_visible", "off", "menubar", "none", ...
"layout", "none", "resize", "off", ...
"visible", "off", ...
"figure_position", [0 0], ...
"axes_size", [400, 150], ...
"figure_name", "SANDBOX GUI", ...
"layout", "gridbag", ...
"tag", "SANDBOX_top_figure");

// FRAME
// MEMO
//  GRIDBAG では createConstraints("gridbag", grid, weight, fill, anchor, padding)
//     grid  [pos_x, pos_y, width, height]
//     weight [weight_x, weight_y]
//     fill {"none"} | "horizontal" | "vertical" | "both"
//     anchor {"center"} | "upper" | "upper_right" | "right" | "lower_right" | "lower" | "lower_left" | "left" | "upper_left"
sb_vars_frame = uicontrol(sb_top_fig, ...
"layout", "gridbag", ...
"style", "frame", ...
"constraints", createConstraints("gridbag", [1, 1, 1, 1], [1, 0.5], "both"));
```
１つ目には、文字"K1"と値を表示するテキストと、スライダーで構成させるGUI部品を２セットセット.

```
// VAR1 K1
uicontrol(sb_vars_frame, ...
"style", "text", ...
"string", "K1 : ", ...
"constraints", createConstraints("gridbag", [1, 1, 1, 1], [0.5, 1], "horizontal", "center"), ...
"margins", [5 5 5 5], ...
"horizontalAlignment", "center");
uicontrol(sb_vars_frame, ...
"style", "text", ...
"string", "0.1", ...
"constraints", createConstraints("gridbag", [2, 1, 1, 1], [1, 1], "horizontal", "center"), ...
"tag", "K1", ...
"margins", [5 5 5 5]);
uicontrol(sb_vars_frame, ...
"Style"     , "slider", ...
"String"    , "Start", ...
"margins", [5 5 5 5], ...
"Max",0.5, ...
"tag", "SL_K1", ...
"callback"  , "cb_slide_K1()", ...
"constraints", createConstraints("gridbag", [3, 1, 1, 1], [1, 1], "horizontal", "center"));

// VAR2 K2
uicontrol(sb_vars_frame, ...
"style", "text", ...
"string", "K2 : ", ...
"constraints", createConstraints("gridbag", [1, 2, 1, 1], [0.5, 1], "horizontal", "center"), ...
"margins", [5 5 5 5], ...
"Max",0.2, ...
"horizontalAlignment", "center");
uicontrol(sb_vars_frame, ...
"style", "text", ...
"string", "0.05", ...
"constraints", createConstraints("gridbag", [2, 2, 1, 1], [1, 1], "horizontal", "center"), ...
"tag", "K2", ...
"margins", [5 5 5 5]);
uicontrol(sb_vars_frame, ...
"Style"     , "slider", ...
"String"    , "Start", ...
"margins", [5 5 5 5], ...
"tag", "SL_K2", ...
"callback"  , "cb_slide_K2()", ...
"constraints", createConstraints("gridbag", [3, 2, 1, 1], [1, 1], "horizontal", "center"));
```
２つめのフレームには、ボタンを４つわりあてる。

```
//slider frame
action_frame = uicontrol(sb_top_fig, ...
"layout", "gridbag", ...
"style", "frame", ...
"constraints", createConstraints("gridbag", [1, 2, 1, 1], [1, 1], "both"));
//"border", createBorder("line","navy blue"), ...

// The associated callback needs to be interruptible (when clicking on stop or reset for example)
uicontrol("parent", action_frame, ...
"Style"     , "pushbutton", ...
"String"    , "Do Z1", ...
"margins", [5 5 5 5], ...
"callback"  , "cb_doit(1)", ...
"constraints", createConstraints("gridbag", [1, 1, 1, 1], [1, 1], "horizontal", "center"));
uicontrol("parent", action_frame, ...
"Style"     , "pushbutton", ...
"String"    , "Do Z2", ...
"margins", [5 5 5 5], ...
"callback"  , "cb_doit(2)", ...
"constraints", createConstraints("gridbag", [2, 1, 1, 1], [1, 1], "horizontal", "center"));
uicontrol("parent", action_frame, ...
"Style"     , "pushbutton", ...
"String"    , "Do Z4", ...
"margins", [5 5 5 5], ...
"callback"  , "cb_doit(4)", ...
"constraints", createConstraints("gridbag", [3, 1, 1, 1], [1, 1], "horizontal", "center"));
uicontrol("parent", action_frame, ...
"Style"     , "pushbutton", ...
"String"    , "Do Z6", ...
"margins", [5 5 5 5], ...
"callback"  , "cb_doit(6)", ...
"constraints", createConstraints("gridbag", [4, 1, 1, 1], [1, 1], "horizontal", "center"));
```
完成したので表示する

```
sb_top_fig.visible = "on";
```


<!--
##Exampleその２(uicontrolプロパティ)
うまく動かないときは、Exampleの先頭にこのページの最初にかいたGUIパーツのリセットの3行を挿入するとよい。

### GUI 部品のツリー構造
　counter_main_fig
　　counter_frame
　　　　text      ラベル "Counter :"
　　　　text      値　　 <-- タグ"count",変数名"string"でアクセス
　　buttons_frame
　　　　pushbutton <-- counter_start()を呼び出す
　　　　pushbutton <-- counter_stop()を呼び出す
　　　　pushbutton <-- counter_reinit()を呼び出す

### ソースへのコメント

`SciLab:出展_uicontrolプロパティのexample
//=========
// callbak
//=========
function counter_start()    // Callback called after a click on start pushbutton
    global Stop//グローバル変数としてStopを宣言
    Stop=%f; //初期値はFALSE(%fは定数)
    while %t //常時「真」なので無限ループ
        //タグ"count"を持つコントロールのstringプロパティから数値を取得する
        i = evstr(get("count", "string"));
        // この値を１増やす
        set("count", "string", string(i+1));
        if Stop then
            break
        end
    end
endfunction

function counter_stop()    // Callback called after a click on stop pushbutton
    global Stop
    Stop=%t
endfunction

function counter_reinit()
...
endfunction

// TOPLEVELを作成
counter_main_fig = figure( ...
...
"visible", "off", ...    // 最初は非表示にしておく
...
"tag", "counter_main_figure");

// Counter frame

// カウンターフレーム中のGUIコンポーネント
uicontrol(counter_frame, ...
"style", "text", ...
"string", "Counter : ", ...
...
"horizontalAlignment", "center");

uicontrol(counter_frame, ...
"style", "text", ...
"string", "0", ... //<<<---変数
"constraints", createConstraints("gridbag", [2, 1, 1, 1], [1, 1], "horizontal", "center"), ...
"tag", "count", ... //<<<---タグ"count"で識別
"margins", [5 5 5 5]);

// Buttons frame
...
// The associated callback needs to be interruptible (when clicking on stop or reset for example)
uicontrol("parent", buttons_frame, ...
"Style"     , "pushbutton", ...
"String"    , "Start", ...
"callback"  , "counter_start()", ...
"margins", [5 5 5 5], ...
"constraints", createConstraints("gridbag", [1, 1, 1, 1], [1, 1], "horizontal", "center"));

...
counter_main_fig.visible = "on";//表示する
`
-->

##SciLab関連ドキュメントリンク
*install*
[macOSでSciLabを動かすまで](https://qiita.com/0x20FE/items/2ba5e60685816485ea4c)
[SciNoteのオートコンプリートをとめたい](https://qiita.com/0x20FE/items/cb17fda3f7456a807d41)

*実践*
[SciLabでCSV読み込み](https://qiita.com/0x20FE/items/dd6cbf94be0f2c20d002)
[SciLabでGUIを使ってみる](https://qiita.com/0x20FE/items/cf9cdad0e4be88714118)
[Mac/Windows共用scilabスクリプト]()未公開
[SciLabでフィルタを適用する]()未公開
[プロットメモ]()未公開
[プロットあれこれ]()未公開

*他の言語と比較・書き換え*
[Scilab (NumPy) - plotの書き方](https://qiita.com/0x20FE/items/311ac0e61a129e6a01fa)
 [配列と文字列処理の比較](https://qiita.com/0x20FE/items/ b6ea768692297b721951)
   [関数とオブジェクトの書き方メモ](https://qiita.com/0x20FE/items/02e2a6d8380851272a2c)
  [Scilab,NumPy,R行列処理の比較](https://qiita.com/0x20FE/items/75622186ba8a0c6086ce)