event editor の使い方

event editor とは？

event editor は、widgets 同士を接続し、片方の widget で何かが起きたとき、別の widget または screen 自体に何かを起こせるようにします。各接続は 3 つの単純な部分でできています。

• A source、ユーザーが操作する widget（例：button）。
• A trigger、ユーザーがそれに対して行うこと（例：click）。
• An action、結果として起きること（例：go to another screen）。通常は destination widget または screen に向かいます。

文として読むとこうです："When the user clicks this button, change to the Settings screen." これが 1 つの event です。好きなだけ追加して、インターフェース全体に動きを与えられます。

event editor を開く

任意の widget または screen を選択し、右サイドバーの Events タブに切り替えます（Design と Inspect の隣にあります）。ここでは各 event がカードとして表示され、開いて設定できます。

まだ event がない場合、PicoPixel は始め方を 3 つ表示します。

1. + ボタンをクリックして event を追加する。
2. widget または screen を選択し、そこから別の widget または screen へ接続をドラッグする。
3. ヘッダーの play ボタンで events view を実行し、試してみる。

widgets を接続する：node を destination にドラッグする

event を作る最速の方法は、キャンバス上で直接行うことです。

1. source widget、つまりユーザーに操作してほしいものを選択します。
2. 端に現れる小さな connection handle をつかみ、影響を与えたい widget または screen へ wire をドラッグします。
3. その destination にドロップします。PicoPixel は 2 つの間に曲線を描き、その wire 上に小さな node を置きます。
4. その node をクリックして trigger を選びます（現在のもの、たとえば "Clicked" が表示されます）。destination とその他の詳細は Events panel で設定します。

この視覚的な wire が event です。どの widgets が何につながっているか、一目で分かります。

trigger を選ぶ

trigger はユーザーが何をするかです。wire 上の node（または Events panel の Trigger ドロップダウン）をクリックして選びます。最も一般的なのは Clicked ですが、次のようなセットがあります。

• Clicked、タップして離す動作。日常的な "button press" で、最もよく使います。
• Pressed、指が触れた瞬間。
• Released、指が離れたとき。
• Long Pressed / Long Pressed Repeat、長押し、または長押しの繰り返し。
• Gesture、スワイプ。
• Value Changed、widget の値が変わったとき。slider が動く、switch が切り替わる、checkbox がオンになるなど。sliders、switches、rollers に自然な trigger です。
• Focused / Defocused、widget がフォーカスを得る、または失うとき。
• Screen Loaded / Screen Unloaded、screen が表示または離れるとき。画面が開いた瞬間に設定する用途に向いています。
• Scroll Begin / Scroll End、スクロールの開始または終了。
• Ready / Cancel、オンスクリーンキーボードなどの入力で使います。

action を選ぶ

action は何が起きるかです。平たく言うと、次を選べます。

• Change Screen、別の screen へ移動します。transition（Fade、または Slide left/right/up/down）、速度、遅延を選べます。マルチスクリーンアプリを作る方法です。
• Delete Screen、別の screen へ移動し、同時に 離れる screen を解放します（メモリが厳しいデバイスに便利）。
• Show Widget / Hide Widget、何かを表示または非表示にします。pop-ups、panels、"more info" セクションに最適です。
• Set State、widget に checked、disabled、focused、pressed などの state を追加、削除、切り替えます。
• Set Opacity、widget を完全表示（100）から非表示（0）へフェードします。
• Set Properties、widget の位置やサイズを変更します。
• Set Text、label や button に表示される文字を更新します。
• Set Sprite Mode、sprite を "Idle" や "Running" などの phase に切り替える、または開始/停止します。sprite に命を与える方法そのものです。
• Animated Image Mode、animated image を開始、停止、再起動します。
• Play Animation、widget に設定した timeline animation を実行します。
• Modify Flag、より細かな制御として LVGL flag を追加/削除/切り替えます（上級オプション）。
• Call Function、自分の custom C function を名前で呼び出します。カスタム処理のための逃げ道で、その関数はファームウェア側に書きます。

実例

Home screen に "Settings" button があり、別に Settings screen があるとします。接続するには：

1. Settings button を選択します。
2. そこから Settings screen へ接続をドラッグします（または Events panel で destination として選びます）。
3. trigger を Clicked に設定します。
4. action を Change Screen にし、destination を Settings screen にします。
5. 任意で Slide left transition を選ぶと、前へ進む感覚になります。

play ボタンを押し、live preview でボタンをタップすると、そのまま Settings へスライドします。コードもデバイスへの書き込みも不要です。

events の編集と削除

作成したすべての event は Events panel にカードとして表示されます。

• Edit、カードをクリックして展開し、trigger、action、destination、または action のオプションを変更します。
• Delete、カード上の ✕ で event を削除します。wire もキャンバスから消えます。

同じ widget に複数の events を付けられます。たとえば Pressed と Released にそれぞれ 1 つずつ付けると、より豊かなインタラクションを作れます。

次に進む

Events は静的な mock-up を本物のインターフェースに変えます。ここから：

• sprites guide で animated、multi-state widgets を作り、Set Sprite Mode で動かします。
• fonts guide で文字をシャープかつ小さく保ちます。
• ハードウェアに載せる準備ができたら、ESP32 tutorial に従って interactive UI を書き出して書き込みます。