スピードメーターサンプル

含まれるもの

• 480 x 480 ダッシュボード画面。正方形キャンバス向けで、丸型ディスプレイにも調整しやすいサイズです。
• LVGL arc ゲージ。メインの速度リングとして arc ウィジェットを使うため、インジケーターをコードから更新できます。
• 大きな数値速度ラベル。プレビューでは 135 と表示され、計器パネルの中で見やすく目立つ表示になっています。
• 単位ラベル。現在は km/h で、mph、%、RPM、W、その他の測定単位に変更できます。
• オドメーターグループ。9138 km と表示され、走行距離、トリップ距離、稼働時間、バッテリー航続距離、その他の補助的な値に使えます。
• PRND のシフト位置表示。D が円形の状態インジケーターで強調されています。
• 暗色の組み込みダッシュボードスタイル。高コントラストの白いタイポグラフィと赤/ピンクのゲージアクセントを使います。
• 画像ファイルを使用しない構成。UI は軽量で、LVGL オブジェクトとして編集可能なままです。
• 3 つの同梱フォントスタイル。スクリーンショットの Plus Jakarta Sans のテキスト階層に合わせています。
• 1 つの再利用可能なウィジェットアセット。テンプレートのローカルライブラリに表示され、他の PicoPixel プロジェクト内で素早く再利用できます。

アセットの概要

このテンプレートは意図的に軽量です。アセットパネルのローカルライブラリには次のものがあります。

• 画像: 0。ゲージは静的スクリーンショットではありません。
• 色: 0。現在のパレットはデザイン内に直接適用されています。
• フォント: 3。Plus Jakarta Sans を複数サイズで使っています。
• ウィジェット: 1。別のプロジェクトへドロップできる再利用可能なスピードメーターウィジェットプレビューです。

同梱フォントセットは、ゲージ内の視覚階層に合わせたサイズです。

• PlusJakartaSans ExtraLight 16。オドメーターの接尾辞など、小さな補助テキストに使われます。
• PlusJakartaSans Light 20。km/h やシフト位置テキストなどの補助ラベルに使われます。
• PlusJakartaSans SemiBold 110。中央の大きな速度値に使われます。

つまり、LVGL エクスポートは不要な画像アセットを持たず、編集可能な基本要素、つまりラベル、コンテナ、arc、フォントに集中できます。

LVGL 向けの構造

スクリーンショットは、ビットマップに偏らない、小さくエクスポートしやすい階層を示しています。デザインは 1 つの画面、グループ化用コンテナ、複数のラベル、オドメーターグループ、メイン arc を中心に作られています。

• Screen 1 は 480 x 480 のキャンバスです。
• ルートコンテナがゲージレイアウトを保持し、ダッシュボードを中央に保ちます。
• オドメーターテキストは、数値と km 接尾辞を一緒に移動できるようにグループ化されています。
• 中央の速度値は大きなラベルなので、lv_label_set_text または lv_label_set_text_fmt で実行時更新しやすくなっています。
• メインゲージは LVGL arc なので、同じ見た目を lv_arc_set_value で駆動できます。
• PRND 行はラベルで作られ、アクティブなシフト位置は小さな円形コンテナで強調されています。

これは LVGL スピードメーターテンプレートに求めたい構造です。ダイヤルは編集可能で、テキストはライブ更新でき、エクスポートされたコードは通常の LVGL パターンに近いままです。

LVGL に向いている理由

この例は、見た目のよいスクリーンショット以上に役立ちます。組み込みハードウェア上で LVGL が得意とするものを中心に設計されています。

• Arc 描画は LVGL ネイティブなので、速度リングに大きな透明画像は不要です。
• ラベルは低コストで更新できるため、速度、距離、バッテリー航続距離、モードテキストの変更に理想的です。
• 視覚状態が明示的なので、ファームウェアから arc 値、中央ラベル、オドメーター、シフト位置を個別に更新できます。
• デザインがコンパクトで、インポート画像アセットはなく、ダッシュボードの見た目に必要なフォントだけを含みます。
• 標準の LVGL 8.x UI コードとしてエクスポートされるため、ESP-IDF、Arduino、PlatformIO、STM32、Zephyr、その他の LVGL プロジェクトに統合できます。

カスタマイズ案

無料の LVGL ゲージの土台として使い、自分の製品やデモに合わせて細部を調整してください。

• 速度範囲を車両の速度範囲から 0-100、0-240、0-8000 RPM、バッテリー残量、スロットル位置、温度などに変更します。
• arc の太さ、開始角、終了角、色をディスプレイ形状に合わせて調整します。
• 赤/ピンクのアクセントをブランドカラー、警告色、または範囲ベースの色に置き換えます。
• km/h を mph、RPM、%、W、V、A、C、F に置き換えます。
• オドメーター行をトリップ距離、稼働時間、残り航続距離、ラップ数、総エネルギーに使います。
• PRND を ECO、SPORT、PARK、AUTO、MANUAL のようなカスタムモードに置き換えます。
• 小さなアイコン、バッテリーバー、警告インジケーター、方向指示状態、RPM 用の 2 つ目の arc を追加します。
• 値の変化を、ラベルを瞬時に切り替えるのではなく、LVGL タイマーやアニメーションコールバックでアニメーションさせます。

実データとの連携

PicoPixel からエクスポートした後は、生成された UI ファイルをプロジェクト内に保持し、ファームウェアループ、イベントハンドラ、または LVGL タイマーから名前付きオブジェクトを更新します。正確なオブジェクト名はエクスポート前にウィジェットへ付けた名前によって変わりますが、ランタイムパターンは次のようになります。

static void dashboard_set_speed(int speed_kph, uint32_t odometer_km)
{
    lv_arc_set_value(ui_speed_arc, speed_kph);
    lv_label_set_text_fmt(ui_speed_value_label, "%d", speed_kph);
    lv_label_set_text_fmt(ui_odo_label, "%lu km", (unsigned long)odometer_km);
}

速度が GPS、CAN、UART、BLE、モーターコントローラー、シミュレートデータのどれから来る場合でも、ハードウェア固有の解析は UI コードの外に置いてください。UI 関数には整理された値を渡し、LVGL の更新だけを担当させます。

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

PicoPixel でテンプレートを開き、必要であれば表示サイズを調整し、主要ウィジェットの名前を変更してから、プロジェクトを LVGL C コードとしてエクスポートします。生成されたファイルは、他の LVGL UI と同じように既存の組み込みプロジェクトへ追加できます。

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

1. ディスプレイとタッチ/入力ドライバを設定します。
2. PicoPixel UI を LVGL C としてエクスポートします。
3. エクスポートされたファイルを ESP-IDF、Arduino、または PlatformIO プロジェクトに追加します。
4. LVGL とディスプレイドライバの準備ができた後に ui_init() を呼び出します。
5. テレメトリループ、イベントキュー、または lv_timer からスピードメーターの値を更新します。

より広い手順については、ESP32 LVGL UI チュートリアル と PicoPixel のテンプレートの使い方 のガイドを参照してください。

活用例

次のような UI を作る際の土台に使えます。

• LVGL スピードメーターデモ
• ESP32 ダッシュボードプロトタイプ
• 丸型ディスプレイの車両の計器パネル
• E-bike、スクーター、ゴーカート、RC テレメトリ画面
• 産業用ゲージパネル
• シミュレーターダッシュボード
• モーター速度または RPM 表示
• バッテリー航続距離と走行モードインターフェース

より複雑な計器クラスタを作る前に、通常のウィジェットから LVGL ゲージを構築する方法を見たい場合にも、よい学習用ファイルです。