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 ネイティブのエディターとシミュレーターへ変える複数の専用レンダラーを含め、元のコードベース全体に大幅な変更が必要でした。この深いアーキテクチャ作業がなければ、PicoPixel は現在の専用プラットフォームではなく、基本的な LVGL プラグインにとどまっていたでしょう。
PicoPixel のローンチ時、LVGL チームはとても温かい言葉と祝福を送ってくれました。
彼らはこのプロジェクトをエコシステムへの前向きな追加として歓迎し、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 mode など、新機能も定期的に追加しています。
インフラの拡張中は一時的な制限が出ることがあります。皆さんの忍耐とフィードバックは本当に大きな支えです。何かあれば、遠慮なく連絡してください。