TOMATEチュートリアル
Raspberry Pi を使用する場合
GUI環境のRaspberry Pi OSをインストールしたラズベリーパイとタッチモニタの組み合わせが必要です。
TOMATEのインストールには、LAN経由でSSH接続できる環境が必要です。
raspberrypi.com
osoyoo.com
ラズベリーパイ２以上のご使用をおすすめします。
ラズベリーパイのタッチモニタはDSI接続を推奨します。
DSI接続のタッチモニタは、OS標準のデバイスドライバからバックライトの輝度調整が行うことができるため、TOMATEではこのデバイスドライバを使用して輝度を調整しています。
これら機能を使用しない場合はHDMI接続のタッチモニタで問題ありません。
Windows PCを使用する場合
タッチパネル付きのWindows PCまたは、通常のPC＋マウス操作でも動作します。
microsoft.com
Windows環境では、画面の起動調整やスリープ機能は使用できません。
ラズベリーパイには、標準のGUI環境のRaspberry Pi OSをインストールします。
https://www.raspberrypi.com/software/ から Raspberry Pi Imagerアプリをダウンロード・インストールし、実行します。
「OSを選ぶ」ボタンを押し、推奨のRaspberry Pi OS(32-bit) を選択します。
OSを選択すると、右下に「設定アイコン」が表示されます。
設定から、「SSHを有効化する」をチェックして、「ユーザー名」と「パスワード」を設定します。
ユーザー名とパスワードは控えておいてください。
ここで入力した内容は、TOMATEからラズベリーパイへアップロードするときに必要となります。
設定後、インストール先のストレージを選択し、「書き込む」ボタンを押すとインストールが開始されます。
ここでは、基本操作の説明を中心に、簡単な画面を作成してみます。
【解説動画】
作画する前に、まず、表示させるタッチモニタに合わせ、解像度を設定します。
アプリ画面右側の「情報ツール」に、現在の解像度が表示されています。
[メニュー ： ツール ： 設定] を選択し、設定画面にて、表示させるタッチパネルの「画面サイズ」の値を設定します。
設定では他に、表示の回転、スタートページ、描画速度、標準輝度*、標準音量*、自動消灯時間*、輝度設定コマンド*、フルスクリーン指定、言語指定（英語・日本語）が行なえます。
* ラズベリーパイ用の設定
設定内容は、プロジェクトごとに保存されます。（言語設定は除く）
まずは、画面に図形を描いてみます。
アプリ画面左側、描画ツールの図形をクリックすると、描画モードになります。
描画エリア上の適当な位置でマウスを左クリックしながらドラッグし、クリックを離すと図形が描画されます。
ファイルやWEBブラウザ上に表示されている、BMP・JPG・PNGなどのイメージ画像を、
描画エリアへドラッグアンドドロップすることで、イメージを描画することができます。
画面に表示された図形を「オブジェクト」といいます。
ESCキーを押すと、描画モードから選択モードに戻ります。
描画されたオブジェクトには、それぞれプロパティが付随しています。 アプリ下側の「プロパティエリア」に情報が追加されます。
プロパティには、オブジェクトのＩＤ・X座標・Y座標・W幅・H高さ・V表示・B点滅・Pタッチ動作の振る舞い（長押し/連続）・♪タッチ音・スクリプトの指定を行うことができます。
ID=ON_DISPオブジェクトは、そのページが表示されたときに実行するスクリプトを記述するためのオブジェクトです。 ページごとに１つ用意され、削除することはできません。
オブジェクトを選択して、V欄のチェックを外すと、オブジェクトの表示が消えます。
また、オブジェクトのB欄に1ms単位の時間を指定すると、オブジェクトが点滅表示します。
P欄に正数の時間を指定すると、オブジェクトをタッチしたときに、反応までの長押し時間を指定できます。
負数の時間を指定すると、オブジェクトをタッチしたときに、指定した間隔で連続して反応します。
動作環境によりますが、1ms単位の時間指定は100ms以上を推奨します。
短い時間を指定しても処理によって追従しない場合があります。
♪タッチ音はコンボボックスとなっており、クリックすると、「メニュー：メディア登録」で登録されている音源を選択することができます。
オブジェクトに音を指定すると、タッチするごとに指定された音が鳴るようになります。
TOMATEでは、デフォルトで４種類の音源が登録されています。
ON_DISPの♪欄に音源を指定すると、ページが表示されるときに１回音を鳴らします。
プロパティの「Script」欄にスクリプトを記入することで、そのオブジェクトをタッチしたときの動作を追加することができます。 ここでは <@next> と記述します。
「情報ツール」は、ページ追加、ページ背景色の指定、選択されたオブジェクトの文字入力や、図形の塗り色、線種・線幅・線色、文字色・文字位置の指定を行うことができます。
ON_DISPを除く全てのオブジェクトには、文字を表示することができます。
オブジェクトを選択した状態で、情報ツールのテキストボックス欄に文字を入力し、「文字書込」ボタンを押すと選択されているオブジェクトの中心に文字が表示されます。
描画エリアにて、オブジェクトを右クリックすることにより、メニューが表示され、四隅の丸めや面取り、イメージの回転・反転など、図形の加工を行うことができます。
情報ツールの
ボタンを押すと、ページが追加されます。
TOMATEでは、ページごとの画面はタブで管理されています。
タブをクリックすると、描画ページが切り替わります。
また、タブをドラッグすることにより、ページの並びを変更することができます。
タブの並び順がページの順番となります。
タブを右クリックすると、メニューが表示され、ページ名の変更・複製・削除などが行えます。
ここで、1ページ目と同様に、ボタンを作成し、ボタンのスクリプトに <@prev> と記入してください。
スクリプト <page>
コマンドはページ移動で使用するコマンドです。
<@next>はタッチしたときに次のページに切り替えます。 <@prev>は前のページに切り替えます。 <ページ名> と入力すれば、指定したページへ切り替わります。
出来上がったら、「メニュー：実行：テスト」か、F5キーを押してください。
テストウインドウが開いて、ボタンをクリックするたびにページが切り替わります。
ここでは、スクリプトを中心として説明します。
【解説動画】
TOMATEスクリプトには、以下のユニークなコマンドが用意されています。
|
内容 |
|
|
[ ] |
変数の表示 |
|
< > |
ページ移動 |
|
( ) |
変数演算 |
|
xxx{ } |
コマンド |
|
“ “ |
Output.txt への出力 |
また、区切り記号として以下の記号を使用します。
|
区切り記号 |
内容 |
|
： |
コマンドの区切り コマンド内 項目の区切り |
|
， |
コマンド内 設定値の区切り |
各コマンドは、コロン：で区切ることで、１つのオブジェクトに複数のコマンドを使用できます。
例） (cnt+=1)
: <@next> : “Next page”
オブジェクトをタッチすると、cnt+=1し、次のページへ移動し、output.txtへ”Next page”と出力
TOMATEスクリプト内で扱う文字は、基本的に文字列と数値の区別は必要ありません。
数値を文字列として扱う場合や、文字列中にTOMATEスクリプトで使用される、括弧、カンマ、コロンを使用する場合は、シングルクォーテーション‘’で括ることで、一括りの文字列として認識します。
TOMATEスクリプトには、２種類の動作を行うものがあります。
１．常時表示に反映されるもの （スクリプトリファレンスに 
アイコンが記載）
２．タッチ動作または、INPUT.TXTに入力されたとき実行 （
アイコンが記載）
実際に作成してみましょう。
適当なオブジェクトを描いて、そのオブジェクトのスクリプト欄に [cnt]
と記入してください。
これにより、変数 cnt
に設定された値を、そのオブジェクト内に表示するようになります。
スクリプト [var] は重要なコマンドです。
これは常時、変数の内容をオブジェクトに表示させます。
コマンドによっては、 [var] の内容に従い、別の文字列として表示させるものもあります。
スクリプトに変数を使用したら、「変数エリア」にその変数名を記入してください。
変数欄では、’=’ で変数の初期値を記入できます。
TOMATEでは、変数値が数値だけなら数値として、文字列が含まれているものは文字列として扱います。
ここでは cnt=0 と入力します。
変数の設定は、a=b=c=0などと、変数名をイコールで続けて記述することができます。
終端に書かれた値に初期化されます。
変数値の初期値を入力すると、描画されたオブジェクトの中の文字列がその変数値へと変化します。
このときオブジェクトに表示される文字書式は、「情報ツール」で設定された書式となります。
今度は、タッチ動作のスクリプトを記入してみましょう。
ボタンとなるオブジェクトを描いて、そのスクリプト欄に
|
(cnt+=1) : var{ cnt : 1 } |
と入力します。
スクリプト (式) は、変数の演算を行うコマンドです。
TOMATEでは 「+=」や、「-=」 などの「代入演算子」のみを採用しています。
左辺は必ず変数となり、 [ ] で括る必要はありません。
ただし、右辺に変数を使う場合は、[ ]で括る必要があります。
さらに、（式:下限,上限）と指定することができます。 スクリプト (cnt+=1)を、
(cnt+=1:0,10) と入力すると、cntの値が0〜10の範囲でループします。
(cnt+=1:10) とすると、cntの値が10でストップします。
スクリプト var{ } は、Output.txtへ変数値の出力を行うコマンドです。
これで、このオブジェクトをタッチ（クリック）するたびに、cnt+1され、cntの変化に応じて表示オブジェクトの表示値が変化します。
作成が完了したら、ツールボタンの 
を押すか、メニュー：実行：テスト（F5キー）を操作してください。
テストウインドウが表示され、画面のPUSHボタンを押すごとに、表示が１ずつ増加します。
さらに、入出力ウインドウのOutput.txt欄に変数cntの値を表示します。
入出力インターフェイス
入出力ウインドウでは、Output.txtの内容確認と、Input.txtにコマンドを書き込み、動作確認を行うことができます。
TOMATEでは、外部インターフェイスとして、Input.txt / Output.txtという２つのファイルにて、
外部プログラムとのやり取りを行うことができます。
この２つのファイルはTOMATE実行時にTOMATEを実行しているフォルダ上に自動的に作成されます。
|
Input.txt |
外部からTOMATEへコマンドを入力するためのインターフェイス |
|
Output.txt |
TOMATEから外部へ情報を出力するためのインターフェイス |
外部プログラムからOutput.txtの内容を読み込むことにより、TOMATE上での操作内容や変数内容を読み込むことができます。
また、外部プログラムからInput.txtへコマンドを書き込むことにより、TOMATEへ指示を出すことができます。
入出力ウインドウのInput.txtにスクリプトを書き込み、[Write]ボタンを押すと、コマンドが即時実行されます。
ただし、Input.txtに書き込めるのは、スクリプトリファレンスに
アイコンが付いたコマンドだけです。
例えば、msg{Hello} とinput.txt欄に入力し、[書き込み]ボタンを押してください。
テストウインドウ上に、「Hello」と表示されたメッセージボックスが開きます。
msg{}コマンドは手軽にメッセージを表示させることができるコマンドです。
任意にボタン数やボタンに表示させる文字などを設定することができます。
何も指定しない場合、[OK]ボタンのみが表示されます。
ボタンが押されるとメッセージボックスは消去されます。
ここでは、キーパッド・メッセージボックス・セレクターの各パーツについて解説します。
【解説動画】
TOMATEスクリプトには、ユーザーインターフェイス用に３種類のパーツが用意されています。
|
パーツ名 |
スクリプト |
ページ名 |
内 容 |
|
キーパッド |
pad{ } |
_PAD_ |
数値を入力するためのテンキーインターフェイス |
|
メッセージ |
msg{ } |
_MSG_ |
メッセージ表示または、確認を問い合わせるインターフェイス （最大３ボタン） |
|
セレクター |
sel{ } |
_SEL_ |
複数の選択肢からアイテムを選択するインターフェイス |
キーパッド
キーパッドは数値入力用のインターフェイスです。
|
[V] : pad{ Title : Min, Max, Digit : Command } pad{ [V] : Title : Min, Max, Digit : Command } |
変数[V]の値に対して、キーパッド入力により、数値の変更ができるようになります。
[V]をコマンドの外に出すと、オブジェクトに数値を表示します。
コマンドの中に入れると、表示されずに、設定のみが行なえます。
Min,Maxの値を指定すると、その範囲内で入力が制限されます。
範囲を超えたものは最小値・最大値に設定されます。
Digitの値を設定すると、入力桁数が制限されます。この桁数は符号、小数点を含んだ桁数となります。
Commandは[ENT]が押されたときに実行するコマンドを設定できます。
キーパッド外観の外を押すと入力がキャンセルとなります。
メッセージボックス
メッセージボックスは、メッセージを表示したり、問い合わせをするためのインターフェイスです。
|
msg{ Message : Button1=Command1, Button2=Command2, Button3=Command3 } |
文字列Messageをボックスに表示します。
Button1,2,3にはボタンに表示する文字列を指定し、‘=’でつなげ、Command1,2,3に押されたときのコマンドを指定します。 Buttonを指定した数でボタン配置の表示が変化します。
Buttonは省略できます。 単に msg{Message}と入力するだけで、 ”OK” ボタンが自動で付加されます。
Buttonを押すとメッセージは消去され、コマンドが指定されている場合、コマンドを実行します。
セレクター
セレクターは複数の項目から１つを選択するインターフェイスです。
|
[V] : sel{ Title : 0=item0, 1=item1, ... , #=item# } sel{ [V] : Title : 0=item0, 1=item1, ... , #=item# } |
[V] はオブジェクトに変数値を表示させますが、後に続くsel{ } コマンドにより、
変数値に対応した「項目名」を表示します。
変数値に対応する値と項目名を’=’でつなげて記述します。 値は省略することができ、省略すると自動で0,1,2・・・と数字が割り振られます。 変数に対応する値は数字でも文字列でも構いません。
項目数が１画面に表示できる項目数を超えると、ページ切り替えボタンを自動的に表示します。
セレクター外観の外を押すと入力がキャンセルとなります。
パーツのカスタム
各パーツはカスタムすることができます。
メニュー：ツール：部品編集：パーツ名：Load を選択すると、描画エリアに部品のページが追加されます。
パーツのページ名は変更せずに使用してください。
各部品のページで、色やフォントを変更することができます。
キーパッドに文字を追加したり、セレクターの１ページあたり表示数を増やしたりすることができます。
部品ページのオブジェクトのスクリプトは、特殊なコマンドとなっており、通常のTOMATEスクリプトは記述できません。
カスタムしたパーツは、そのままプロジェクトのページとして保存・実行することができます。
また、部品ページを開いた状態で、メニュー：ツール：部品編集：パーツ名：Save を選択すると、カスタムした部品をデフォルトとして保存することができ、他のプロジェクトでも使用することができます。
プロジェクトに部品ページが無い場合は、デフォルトとして保存された部品が呼び出されます。
ここでは、１つのボタン操作でSTART/STOPを行い、サイコロの目をランダムに変化させるプロジェクトを作成します。
【解説動画（前編）】
【解説動画（後編）】
TOMATEでは、描画エリアに描いたオブジェクトをひとまとめにして、図形データとして保存する機能を搭載しています。
１． 新規ページに、四角と丸図形を使用して、１〜６のサイコロの目を作成します。
２． 作成した、「１」のサイコロをひとまとめに選択し、「ファイル：部品を画像として保存」 を選択します。
同様に２〜６のサイコロを画像として保存します。
３． メニュー：ツール：メディア登録：イメージ画像を選択します。 画像リストダイアログが開きます。
２で作成した６個のサイコロのイメージファイルを登録します。
４． 新しいページに、四角図形を２つ描画し、片方のスクリプト欄にimg{[d1]} 、もう一方にimg{[d2]}と入力します。 変数欄に、d1=d2=1と記入します。 ２つの四角オブジェクトにサイコロが描かれます。
５． START/STOPボタンを描画し、スクリプト欄に以下のコマンドを入力し、変数欄に btn=0 と入力します。
|
dsp{
[btn] : 0=START, white, blue : 1=STOP, white, red }
: if{ (btn==0) : int{10 : cmd{ rnd{[d1]:1,6} : rnd{[d2]:1,6} : (btn=1) } } : cmd{
int{0: } : (btn=0) : var{d1, d2} } } |
【スクリプト解説】
・ img{ } コマンドはオブジェクトにイメージ画像を表示するコマンドです。 番号（１-6）を指定すると、イメージ登録されている図形を表示します。 [変数]の指定もできます。 表示されるイメージは、元図の縦横比を保った状態でオブジェクトサイズに合わせ表示されます。
登録番号は、１〜であることに注意してください。 登録外の番号を指定すると何も表示されません。
・ dsp{ } は、[変数]の値に応じて、指定された文字列と配色でオブジェクトに表示するコマンドです。
btn=0のとき青地に白文字で”START”と表示され、btn=1のとき赤地に白文字で”STOP”と表示されます。
・ if{ } は、式の真偽値を判定し、真偽に割り当てられたコマンドを実行します。
if{ (比較式) : 比較式が真のとき実行するコマンド : 偽のとき実行するコマンド }
真偽はコロンで区切られるため、真偽のコマンドは1つのみ実行できます。
・ cmd{ } は、複数のコマンドを１つにまとめることができます。 if{}文中のコマンドは、真偽それぞれ１つのコマンドしか記載することができません。 int{}コマンドも同様です。 このため、cmd{ }で複数コマンドを１つのコマンドにまとめています。
・ int{ } は、一定時間ごとに指定されたコマンドを実行します。 指定する時間はx1msとなり、0と指定すると停止します。 サンプルでは、10msと指定していますが、この値を大きくするとサイコロの回転が遅くなります。
・ rnd{ } は、指定した範囲の乱数を発生させ、[変数]に設定するコマンドです。
・ var{ } は、指定した変数の値を
output.txt へ出力するコマンドです。
{ }で括られ、変数の中身がカンマ区切りで出力されます。
例） さいの目が1,2だった場合、 var{ d1, d2 }
→ output.txt に {1,2}
作成したプロジェクトを実行すると、１の目のサイコロが２つ、「START」と表示されたボタンが１つ表示され、STARTボタンを押すと、STOP表示に切り替わり、サイコロが高速で回転し始めます。
STOPボタンを押すと、２つのサイコロがランダムの目で停止します。 このとき、 output.txt に止まったさいの目が {1,2} のように出力されます。
ユーザープログラムにて、output.txt の文字列を読み込むことで、
ＴＯＭＡＴＯで作成した画面とのインターフェイスとして、処理を行うことができます。
ここでは、ラズベリーパイへのアップロードを行ってみましょう。
アップロードをするには、LAN上にタッチパネルと接続されたラズベリーパイデバイスが必要です。
プロジェクトを作成しテスト動作も確認したら、ツールボタンの
をクリックするか、メニュー：実行：アップロード（F6）を操作すると、Tomate-SSHウインドウが開きます。
各テキストボックスに、接続するラズベリーパイのログイン情報を記載してください。
|
Server |
設定したホスト名 （デフォルト：raspberrypi.local） （または ラズベリーパイのIPv4アドレス） |
|
ID |
設定したユーザー名 （デフォルト：pi） |
|
Password |
設定したパスワード （デフォルト：raspberry） |
|
Directory |
/home/ユーザー名/ （デフォルト：/home/pi/） |
☑ Run at Startup ・ ☑ Reboot after uploaded ・☑ Initialize to default
setupsにはチェックを入れておきます。
これで、アップロード終了後、ラズベリーパイが再起動し、TOMATEが自動起動するようになります。
アップロードに成功すると、再起動後に、ラズベリーパイのタッチモニタ上にTOMATEで作成した画面が表示され、実行されます。
アップロードが失敗する場合
設定したユーザー名とパスワードをご確認ください。
また、Serverにホスト名（raspberrypi.local）を指定している場合、稀にアップロードが失敗することがあります。 このような場合、IPアドレスを指定すれば、この失敗は緩和されます。
ラズベリーパイのIPアドレスを調べる場合、Windowsのコマンドプロンプトから以下のコマンドを入力します。
|
ping -4 raspberrypi.local （または設定したホスト名） |
pingが成功すれば、以下のようなメッセージが返ってきます。
|
raspberrypi.local [192.168.x.xx]に ping を送信しています 32 バイトのデータ: |
[192.168.x.xx] がラズベリーパイのIPアドレスです。 このアドレスをServer欄に入力してください。
自動起動をキャンセルしたい場合
自動起動をキャンセルしたい場合、◻ Run at Startupのチェックを外してアップロードしてください。
再起動後、自動起動設定がラズベリーパイから取り除かれます。
TOMATEは、低い処理能力でも対応できるよう、表示更新を行うべき部品にのみ更新処理を行うよう設計されています。
しかし、部品数が多くなり、一度に表示する項目が多くなると処理が遅くなる場合があります。
また、バックグラウンドに高解像度の画面を表示させ、その上にある部品が表示更新された場合でも、処理が遅くなることがあります。
実行させるデバイスの処理能力に合わせ、画面を作成する必要があります。
TOMATEでは、確認用としてFPSを表示させる機能を搭載しています。
「メニュー：ツール：設定」 の設定ダイアログにて、「描画速度」欄の「FPS表示」にチェックを入れると画面右上に赤い文字でFPSを表示するようになります。
これにより、お使いのシステムでどの程度処理できているかを確認することができます。
処理能力を速くする方法としては以下の方法をお試しください。
・ 一度に複数の表示を変化させないようにする
・ ページ内の部品数を減らす
・ バックグラウンドなど、大きな画像を表示させない
・ 画面解像度を下げる
コマンドを使用したサンプルプロジェクトです。
コマンド使用例
|
ファイル名 |
主なコマンド |
内容 |
|
bar{ } |
プログレスバーコマンド使用例 |
|
|
brt{}, slp{} |
Raspberry Pi用 輝度・スリープ調整 |
|
|
ckb{ } |
チェックボックスコマンド使用例 |
|
|
dsp{ } |
dsp{ } コマンド使用例 |
|
|
if{ } |
IF分岐使用例 |
|
|
int{ } |
インターバルコマンド使用例 |
|
|
pad{}, sel{}, msg{} |
部品を使用したサンプル |
|
|
pro{ } |
プロパティコマンド使用例 |
|
|
snd{ }, bgm{ }, vol{ } |
サウンド関連コマンド使用例 |
|
|
tim{ } |
日付・時刻表示コマンド使用例 |
デモプロジェクト
|
ファイル名 |
内容 |
|
4.応用編で紹介した、サイコロがランダムに回転するルーレットです。 STARTボタンを押すと回転が始まり、STOPボタンを押すと回転が止まります。 STOPしたときに、output.txtにさいの目を出力します。 |
|
|
bar{}コマンドを利用した、グラフ表示サンプルです。 タイトルをタッチするたびに、d1〜d7の値が0〜100のランダムに設定され、グラフが描画されます。 |
|
|
ハムスター時計 「いらすとや」のイラストを使ったデジタル時計です。 6:00〜16:00までは morning ページ 16:00〜20:00までは evening ページ 20:00〜6:00までは nightページを自動で切り替え表示します。 ハムスターをタッチすると、マニュアル’M’が表示され、時計の文字を押して、手動で画面を切り替えることができます。 もう一度ハムスターを押すと、自動ページ切換えに戻ります。 |
注意事項
・ プロジェクトの画面サイズはすべて800x480となっています。
解像度を変更したい場合、「メニュー：ツール：解像度変更」を操作し、ご使用環境の解像度へ変更してご利用ください。
・ 日本語フォントがインストールされていない環境を考慮し、文字フォントは“Segoe UI”フォントを使用しています。
日本語をご使用になる場合は、プロジェクトを開き、Ctrl-Aでページの全オブジェクトを選択してから、フォントボタンを押してフォントを指定することにより、フォントを一括で変更することができます。
©
2022 
許可無き複製、転載は禁止します。