イベントサンプル

含まれるもの

• 480 x 480 の LVGL インタラクション画面。組み込みディスプレイと素早い実験に向いたサイズです。
• 5 つのボタン例。それぞれ異なる種類の UI 応答を示します。
• 不透明度コントロール。Low Opacity と High Opacity ボタンが同じ画像ターゲットに接続されています。
• テキスト更新例。Change Text ボタンでラベルを変更します。
• プロパティ変更例。Set Properties - Size でターゲットオブジェクトのサイズを変更します。
• アニメーショントリガー。Play Animation でイベント駆動の動きやトランジションを実演します。
• イベントエディタの配線プレビュー。コネクタ線と Clicked トリガーノードが表示されます。
• インスペクタ側のアクション設定。ソース、トリガー、アクション、不透明度値、宛先フィールドを示します。
• 画像ターゲット。状態変化を確認しやすいシンプルなシアンの PicoPixel 風グラフィックを使います。
• Doto 32 フォントアセット。キャンバス上のドット表示テキストに使われます。

アセットの概要

このテンプレートは一目で理解できる小ささを保っています。アセットパネルのローカルライブラリには次のものがあります。

• 画像: 1。画像ターゲットで再利用される 500 x 500 のシアンのグラフィックです。
• 色: 0。色はデザイン内に直接適用されています。
• フォント: 1、Doto 32。ドット風ラベルテキストに使われます。
• ウィジェット: 0。保存済みウィジェットアセットではなく、画面レベルのイベント配線に集中しています。

レイヤーパネルでは、プロジェクトがシンプルな 1 画面のインタラクション実験室として表示されます。

• Screen 1。480 x 480 のキャンバスです。
• Button 1 から Button 5。各例のクリック可能なソースです。
• Image 1、Image 2、Image 3。不透明度、サイズ、アニメーション変更の目に見えるターゲットです。
• Label 1。テキスト変更例で使うテキストターゲットです。

すべてのソースと宛先が同じ画面で見えるため、学習に役立ちます。

イベントエディタの構造

イベントビューが有効なとき、PicoPixel は LVGL レイアウトの上にインタラクショングラフを重ねて表示します。スクリーンショットではプロジェクトが Contains Events と示され、ボタンソースから宛先へコネクタ線が描かれています。

• Low Opacity と High Opacity はどちらも Clicked トリガーを使い、同じ画像ターゲットへ接続されています。
• Change Text は Clicked トリガーを使い、ドット風テキストラベルを指します。
• Set Properties - Size は Clicked トリガーを使い、リサイズ対象の画像ターゲットを指します。
• Play Animation は Clicked トリガーを使い、アニメーション再生用の画像ターゲットを指します。
• 右側のイベントパネルには、選択中のイベントが Source、Trigger、Action、Opacity などの値設定、Destination とともに表示されます。

このレイアウトこそが、このテンプレートの主な学習価値です。PicoPixel のビジュアルイベントグラフが、トリガーとターゲットの関係を隠さずに、ユーザー入力を LVGL オブジェクト変更へ対応付ける方法を示します。

LVGL に向いている理由

LVGL アプリケーションでは、小さなインタラクションがたくさん必要になります。ボタンをクリックする、ラベルを更新する、オブジェクトの状態を変える、画像を動かす、画面を切り替える、アニメーションを開始する、といったものです。この例は、それらのパターンを見える形で再利用しやすく保ちます。

• ボタンはネイティブの LVGL 入力オブジェクトなので、同じパターンをタッチ、エンコーダーフォーカス、その他の入力ドライバで使えます。
• トリガーが明示的で、エディタ内の Clicked ノードにより、何が各アクションを開始するのかが分かります。
• ターゲットは通常の LVGL オブジェクトで、画像やラベルを含むため、エクスポート後の UI もファームウェアから編集できます。
• 不透明度とプロパティ変更は軽量で、小さな組み込みディスプレイにも適しています。
• アニメーション配線が受け渡しを教えるため、ユーザーイベントから独立して実行できる視覚的変化への流れが分かります。
• プロジェクトは標準の LVGL 8.x UI コードとしてエクスポートされるため、ESP-IDF、Arduino、PlatformIO、STM32、Zephyr、その他の LVGL ビルドに統合できます。

ランタイムパターン

PicoPixel はイベント配線を生成できますが、概念は通常の LVGL コールバックにそのまま対応します。エクスポート済み UI をカスタムファームウェアロジックで拡張する必要がある場合、基本パターンはイベントコードを確認し、ターゲットオブジェクトを更新することです。

static void low_opacity_clicked_cb(lv_event_t * e)
{
    if (lv_event_get_code(e) != LV_EVENT_CLICKED) return;

    lv_obj_set_style_opa(ui_target_image, LV_OPA_30, 0);
}

static void change_text_clicked_cb(lv_event_t * e)
{
    if (lv_event_get_code(e) != LV_EVENT_CLICKED) return;

    lv_label_set_text(ui_status_label, "Clicked");
}

一般的な配線にはビジュアルエディタを使い、ファームウェア状態、センサーデータ、デバイス設定、ネットワーク応答に依存する処理だけをカスタム C コールバックに任せます。

カスタマイズ案

無料の LVGL インタラクションテンプレートとして使い、デモコントロールを自分の製品 UI に置き換えてください。

• 5 つのデモボタンを設定トグル、メニュー項目、ダッシュボード操作、ハードウェアコマンドに置き換えます。
• 不透明度アクションを無効/有効状態、警告状態、選択/未選択状態に変えます。
• テキストアクションを Connected、Saving、Armed、Charging、Complete のようなステータスメッセージに使います。
• サイズプロパティ例を進捗インジケーター、展開カード、押下状態効果、通知パルスに変えます。
• アニメーション例をページ遷移、確認フィードバック、ローディング状態、注意喚起に使います。
• 1 画面の例が理解できたら、複数の LVGL 画面間のナビゲーションアクションを追加します。
• ボタンを、輝度変更、リレーの切り替え、モード選択、キャリブレーション開始などの実際のファームウェアイベントと組み合わせます。

自分のプロジェクトへのエクスポート

PicoPixel でテンプレートを開き、イベントグラフを確認し、主要なソースとターゲットの名前を変更してから、プロジェクトを LVGL C コードとしてエクスポートします。生成されたファイルは、他の PicoPixel エクスポートと同じように既存の組み込みプロジェクトへ追加できます。

ESP32 プロジェクトでは、通常の流れは次のとおりです。

1. ディスプレイと入力ドライバを設定します。
2. このイベントテンプレートを開き、ボタン、ラベル、画像、アクションを調整します。
3. PicoPixel UI を LVGL C としてエクスポートします。
4. エクスポートされたファイルを ESP-IDF、Arduino、または PlatformIO プロジェクトに追加します。
5. LVGL とディスプレイドライバの準備ができた後に ui_init() を呼び出します。
6. ビジュアルイベントエディタだけでは足りない場所にのみ、カスタムファームウェアコールバックを追加します。

詳しくは、PicoPixel event editor guide、ESP32 LVGL UI tutorial、using PicoPixel templates のガイドを参照してください。

最適な用途

このテンプレートは、次のような明確な出発点が欲しい場合に適しています。

• LVGL イベント例
• ボタンクリックのインタラクションデモ
• ESP32 タッチ UI プロトタイプ
• 設定画面とコントロールパネル
• スマートホームダッシュボード
• ウェアラブルまたはハンドヘルドメニュー
• アニメーショントリガー例
• テキストと画像の状態変化
• PicoPixel のビジュアルイベントが LVGL の挙動になる仕組みの学習