PicoPixel について — ブラウザベースの LVGL エディタ
PicoPixel とは？
LVGL で動く組み込みユーザーインターフェースのために作られた、ブラウザベースのビジュアルデザインツールです。
キャンバスにウィジェットをドラッグ＆ドロップし、画面を見ながら細部を調整できます。イベントエディタで操作と動作を結び付け、再利用するアセットを管理し、ターゲット環境に組み込める C コードを出力できます。 組み込み UI のための Figma のようなものです。
すべてブラウザで動作するため、インストールは不要です。PicoPixel は無料で利用できます。
ボタン、スライダー、スイッチ、アーク、チャート、ドロップダウン、ローラー、チェックボックス、テキストエリア、タブビュー、コンテナ、画像
C コードを書かずに、操作に応じた動作を設定
WebAssembly で実機の表示をピクセル単位まで再現
ライブカーソル、注釈、共有可能なシミュレータリンク
細かなセッション履歴とワンクリックロールバック
ESP32、STM32、RP2040 などに対応するクリーンな LVGL 8.x コード
オープンソースの先駆者たちに支えられて
LVGL と、ライブラリを完全なオープンソースとして育ててきた LVGL チームの素晴らしい仕事がなければ、これは存在しませんでした。LVGL を自由でアクセスしやすいものに保つという決断があったからこそ、PicoPixel のようなツールが生まれました。
LVGL エコシステムに貢献しているすべての人に心から感謝しています。コアメンテナー、Issue を報告しドライバを書くコミュニティメンバー、そして LVGL で作ることを選ぶすべての開発者の皆さん、ありがとうございます。
PicoPixel のフロントエンドは Penpot のフォークとして始まりました。オープンソースの成果によって土台を築いてくださった Penpot チームとコミュニティに心から感謝しています。PicoPixel が安定版に達し次第、私たちのバージョンを公開する予定です。
PicoPixel を LVGL に対応させるには、汎用デザインプラットフォームを LVGL ネイティブのエディターとシミュレーターへ変える複数の専用レンダラーを含め、元のコードベース全体に大幅な変更が必要でした。単なるプラグインにとどまらず、LVGL 専用の開発環境を実現できたのは、こうした設計からの見直しがあったからです。
PicoPixel のローンチ時、LVGL チームはとても温かい言葉と祝福を送ってくれました。
LVGL チームは、エコシステムを広げる新しいツールとして PicoPixel を歓迎し、LVGL 向けの開発ツールが増えていくことへの期待を伝えてくれました。
なぜ作ったのか
組み込みデバイス向け UI の構築は、これまでピクセル座標を手書きし、低レベルのグラフィックスライブラリと格闘する作業でした。C コードを書き、書き込み、表示を確認し、調整して、また書き込む。その繰り返しです。
組み込み開発者にも、Web やモバイルの開発者が使っているようなビジュアルなデザイン体験が必要だと考えています。PicoPixel は、ドラッグ＆ドロップエディタ、ハードウェア上での見え方を正確に示すライブシミュレータ、チームでリアルタイムに設計できる共同作業フローによって、そのギャップを埋めます。
仕組み
キャンバスからハードウェアまで、6つのステップで。
デザイン
LVGL ウィジェットをピクセル単位で正確なキャンバスに配置し、ビジュアルにスタイルを整えます。
操作に動作を設定
ボタン押下を画面遷移へ、スライダー変更をラベル更新へ。C コードは不要です。
プレビュー
WebAssembly で動くライブ LVGL シミュレータで UI を確認します。モックではなく実際のレンダリングエンジンです。
エクスポート
独自ライブラリへの依存のない製品向けの LVGL C コード（.c / .h ファイル）を生成します。
書き込み
エクスポートしたファイルを ESP-IDF、Arduino、PlatformIO プロジェクトに追加して、ハードウェアへ書き込みます。
改善を重ねる
内蔵バージョン管理を使い、チームとリアルタイムに改善を重ねます。
Ed からのメモ
現在は計器ディスプレイを開発していて、時間の多くを東京と深圳の間で過ごしています。ハードウェアを作っている方、あるいはどちらかの街にいる方がいれば、飲みながら話せたらうれしいです。
PicoPixel の前は、大手証券会社で数年働いていました。その前後にはApple に買収されたスタートアップにもいて、Watch のプロトタイプをいくつか担当しました。そこで、またハードウェアに近い場所へ戻りたいという気持ちが生まれ、最終的にこのプロジェクトにつながりました。
今作っているものや、PicoPixel にほしい機能を、ぜひ聞かせてください。気軽に声をかけてもらえたらうれしいです。
オープンベータ
現在の開発状況について。
PicoPixel はオープンベータ中で、現在は一人の開発者が構築・保守しています。ウィジェットセットは継続的に増えており、LVGL v9.x 対応も計画中です。最近追加したキーフレームとタイムラインを使う Animation モードなど、新機能も定期的に追加しています。
インフラの拡張に伴い、一時的に利用を制限する場合があります。ご理解とフィードバックに支えられています。気になることがあれば、ぜひお知らせください。