概要
画面にボタンを置くだけでは、タップしたときに何も起こりません。そこで使うのがイベントエディタです。「このボタンを押したら、こう動く」というルールを、コードを書かずに設定できます。このガイドでは、接続の作り方と、選べるトリガーやアクションを紹介します。
イベントエディタとは
イベントエディタでは、あるウィジェットへの操作を、別のウィジェットや画面の動作に結び付けます。基本になるのは次の 3 つです。
- 操作元（Source）：ユーザーが操作するボタンなどのウィジェット。
- トリガー（Trigger）：クリックなど、動作を起こすきっかけ。
- アクション（Action）：画面の切り替えなど、実行する処理。通常は対象となる**接続先（Destination）**のウィジェットや画面を指定します。
例えば「ユーザーがこのボタンをクリックしたら、Settings 画面に切り替える」で、1 つのイベントになります。必要なだけ追加して、UI に操作への反応を設定できます。
ウィジェット同士をドラッグでつないで設定するため、スクリプトは不要です。エクスポート時に、PicoPixel が対応する LVGL コードを生成します。
イベントエディタを開く
ウィジェットか画面を選択し、右サイドバーの Events タブを開きます。Design と Inspect の隣にあります。イベントはカードとして表示され、開くと設定できます。
まだイベントがない場合は、次の操作が案内されます。
- + ボタンでイベントを追加する。
- ウィジェットや画面を選び、別のウィジェットや画面に向かって接続をドラッグする。
- ヘッダーの play ボタンでイベントビューを実行し、動作を試す。
キャンバス上でウィジェットをつなぐ
キャンバスから直接つなぐと、手早く設定できます。
- 操作元のウィジェットを選びます。
- 端に表示される小さな接続ハンドルをつかみ、動かしたいウィジェットや画面までドラッグします。
- 接続先で離すと、2 つを結ぶ曲線と、その上に小さなノードが表示されます。
- ノードをクリックしてトリガーを選びます。ノードには「Clicked」など、現在のトリガーが表示されます。接続先やその他の詳細は Events パネルで設定します。
この接続線がイベントを表しています。何と何がつながっているか、キャンバス上で確認できます。
ドラッグせずに設定することもできます。Events パネルの + を押し、ドロップダウンからトリガー、アクション、接続先を選んでください。どちらでも同じイベントを作れます。
トリガーを選ぶ
トリガーは、アクションを実行するきっかけです。接続線上のノードか、Events パネルの Trigger ドロップダウンで選びます。よく使う Clicked のほか、次の種類があります。
- Clicked：タップして離したとき。一般的なボタン操作に使います。
- Pressed：指が触れた瞬間。
- Released：指を離したとき。
- Long Pressed / Long Pressed Repeat：長押ししたとき、または押し続けている間に繰り返し実行するとき。
- Gesture：スワイプなどのジェスチャーをしたとき。
- Value Changed：スライダー、スイッチ、チェックボックス、ローラーなどの値が変わったとき。
- Focused / Defocused：ウィジェットがフォーカスを得たとき、または失ったとき。
- Screen Loaded / Screen Unloaded：画面が表示されたとき、または表示を終えたとき。画面を開いた直後の設定にも使えます。
- Scroll Begin / Scroll End：スクロールが始まったとき、または終わったとき。
- Ready / Cancel：画面上のキーボードなどで、入力を確定・取り消したとき。
ボタンには Clicked、スライダーやスイッチには Value Changed が適しています。ウィジェットに合うトリガーを選ばないと、操作してもイベントが実行されない場合があります。
アクションを選ぶ
アクションは、トリガーを受けて実行する処理です。
- Change Screen：別の画面へ切り替えます。Fade や Slide left/right/up/down などの効果、速度、遅延を設定できます。
- Delete Screen：別の画面へ切り替えると同時に、元の画面を解放します。メモリが限られたデバイスで便利です。
- Show Widget / Hide Widget：ウィジェットを表示・非表示にします。ポップアップや詳細パネルに使えます。
- Set State：ウィジェットの checked、disabled、focused、pressed などの状態を追加・解除・切り替えます。
- Set Opacity：不透明度を変更します。100 で完全表示、0 で見えなくなります。
- Set Properties：ウィジェットの位置やサイズを変更します。
- Set Text：ラベルやボタンの表示文字を変更します。
- Set Sprite Mode：スプライトを「Idle」「Running」などのモードに切り替えたり、再生・停止したりします。
- Animated Image Mode：アニメーション画像を再生・停止・最初から再生します。
- Play Animation：ウィジェットに設定したタイムラインアニメーションを再生します。
- Modify Flag：LVGL のフラグを追加・解除・切り替えます。細かな制御が必要な場合に使う上級者向けの設定です。
- Call Function：自分で書いた C 関数を名前で指定して呼び出します。独自の処理が必要な場合は、ファームウェア側に関数を用意します。
設定画面を開く例
Home 画面に「Settings」ボタンがあり、別に Settings 画面を作ってあるとします。
- Settings ボタンを選びます。
- Settings 画面に向かって接続をドラッグします。Events パネルで接続先を選んでも構いません。
- トリガーを Clicked にします。
- アクションを Change Screen にし、接続先に Settings 画面を指定します。
- 必要に応じて Slide left を選ぶと、次の画面に進むような切り替えになります。
play ボタンでプレビューを開き、ボタンをタップすると、Settings 画面に切り替わります。コードの記述や実機への書き込みは不要です。
キャラクターを反応させる場合は、ボタンのトリガーを Clicked、アクションを Set Sprite Mode にし、対象のスプライトと「Happy」などのモードを選びます。スプライト自体の作り方はスプライトガイドをご覧ください。
イベントを編集・削除する
作成したイベントは Events パネルにカードで表示されます。
- 編集：カードを開き、トリガー、アクション、接続先、その他の設定を変更します。
- 削除：カードの ✕ をクリックします。キャンバス上の接続線も削除されます。
同じウィジェットに複数のイベントを設定できます。例えば Pressed と Released に別々の処理を設定すれば、押している間と離した後の反応を変えられます。
次のステップ
- スプライトガイド：複数のアニメーションを持つウィジェットを作り、Set Sprite Mode で切り替える
- フォントガイド：読みやすさを保ちながらフォントの容量を抑える
- ESP32 チュートリアル：操作できる UI を出力し、実機で動かす
