イベントサンプル

含まれるもの

• 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 のイベントエディタガイド、ESP32 LVGL UI チュートリアル、PicoPixel のテンプレートの使い方 のガイドを参照してください。

活用例

次のような UI の試作や、機能の確認に活用できます。

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