究極のドラッグ＆ドロップ LVGL エディター & GUI ビルダー。
PicoPixel の仕組み
PicoPixel は LVGL 開発をコード優先のプロセスからビジュアルなドラッグ＆ドロップワークフローに変えます。空白のキャンバスから本番環境対応の組み込み UI まで数分で — ビジュアルにデザインし、ライブ LVGL シミュレーターでプレビューし、クリーンな C code をエクスポート。インストール不要。
無料で始めましょう！デザインからデバイスまで 6 ステップ
インターフェースをデザインする
ブラウザで PicoPixel を開きます — ダウンロード不要、インストール不要。パレットから LVGL ウィジェットをピクセルパーフェクトなキャンバスにドラッグし、ビジュアルにスタイリングします。
- •ボタン、ラベル、スライダー、スイッチ、アーク、チャート、ドロップダウン、ローラー、チェックボックス、テキストエリア、タブビュー、コンテナ、画像
- •ターゲットのディスプレイ解像度をハードウェアに合わせて設定
- •色、ボーダー、パディング、フォント、不透明度、グラデーション、シャドウのスタイルを設定
- •アライメントと配置ツールでウィジェットを正確に配置
- •マルチページインターフェース用のスクリーンとレイヤーを整理
インタラクションを接続する
ビジュアルイベントエディターを使用して、C code を一行も書かずにウィジェットアクションを接続します。PicoPixel が LVGL イベントコールバックを自動生成します。
- •ボタン押下 → 別の画面に遷移
- •スライダーの値変更 → ラベルを更新
- •チェックボックスのトグル → パネルの表示/非表示
- •ドロップダウンの選択 → スタイルの変更またはアクションのトリガー
- •ウィジェットにアクションをドラッグ — コールバックコード不要
ライブシミュレーターでプレビュー
PicoPixel は LVGL を WebAssembly にコンパイルし、ブラウザで直接実行します。プレビューは実際の LVGL レンダリングエンジンです — モックアップではありません。
- •UI がハードウェアでどのようにレンダリングされるかを正確に確認
- •タッチインタラクション、スクロール、アニメーションをテスト
- •インタラクションオーバーレイでタップやスクロール可能な要素を表示
- •チームやクライアントとシミュレーターリンクを共有 — 開発環境不要
本番環境対応のコードをエクスポート
プロジェクトをクリーンな LVGL C ソースファイルとしてダウンロード。出力は標準 LVGL API 呼び出しを使用し、プロプライエタリな依存関係なし — 任意の LVGL プロジェクトにそのまま追加。
- •ウィジェット定義とレイアウトコード
- •スタイル宣言
- •イベントハンドラーバインディング
- •フォントと画像アセットの参照
- •標準 LVGL 8.x API — PicoPixel ランタイムライブラリなし
統合してフラッシュ
エクスポートしたファイルを ESP-IDF、Arduino、または PlatformIO プロジェクトに追加します。コンパイル、フラッシュすれば、デバイス上の UI はシミュレーターとピクセル単位で一致します。
- •ESP32、STM32、Arduino、Raspberry Pi Pico、および LVGL 互換プラットフォームで動作
- •UI ヘッダーをインクルードし、ディスプレイドライバーの設定後に ui_init() を呼び出す
- •ほとんどのセットアップでビルドシステムの変更は不要
- •または zip を AI コードアシスタントに渡して統合を任せる
コラボレーションとイテレーション
チームメンバーをプロジェクトに招待。全員がリアルタイムで同じキャンバスを編集。内蔵のバージョン管理で変更を追跡し、必要に応じてロールバック。
- •リアルタイム共同編集 — ライブカーソル、フィードバック、アノテーション
- •細粒度のセッション履歴を備えた内蔵バージョン管理
- •任意の以前の状態にロールバックしてバージョンを比較
- •ステークホルダーレビュー用にシミュレーターリンクを共有
なぜ LVGL にドラッグ＆ドロップなのか？
従来、LVGL で組み込み UI を構築するということは、C code を一行ずつ書くことを意味しました — ピクセル座標でウィジェットを配置し、関数呼び出しでスタイルを適用し、変更のたびに再コンパイル。機能しますが、フィードバックループは遅く、コードの可視化は困難です。
PicoPixel のドラッグ＆ドロップアプローチは、結果を即座に確認できるビジュアルエディターでそのサイクルを置き換えます。ボタンをキャンバスにドラッグし、サイズを変更し、色を変え、ラベルを追加 — ライブ LVGL シミュレーターがターゲットハードウェアでの正確な見た目を表示します。完了したら、ESP32、STM32、Arduino、および LVGL 互換プラットフォームでコンパイルできるクリーンな C code をエクスポート。
ビジュアルワークフローはプロトタイピングが速く、チームにとって容易で（デザイナーとエンジニアがリアルタイムで協力可能）、手書きと同じ品質の本番用 LVGL コードを生成します。すべての PicoPixel の機能を見る、または他の LVGL エディターとの詳細比較をお読みください。
よくある質問
PicoPixel を使うのに何かインストールが必要ですか？
いいえ。PicoPixel は完全にブラウザで動作します。エディターの URL を開き、サインインして、デザインを開始してください。デスクトップアプリ、プラグイン、SDK のインストールは不要です。
エディターではどの LVGL ウィジェットが使えますか？
PicoPixel は、ボタン、ラベル、スライダー、スイッチ、ドロップダウン、ローラー、アーク、バー、チャート、画像、チェックボックス、テキストエリア、タブビュー、コンテナなどのコア LVGL ウィジェットセットをサポートしています。追加ウィジェットのサポートを継続的に追加しています。
ライブシミュレーターはどの程度正確ですか？
シミュレーターは WebAssembly にコンパイルされた実際の LVGL レンダリングエンジンを実行します — モックアップや CSS の近似ではありません。プレビューに表示されるものは、ターゲットハードウェアとピクセル単位で一致します。
エクスポートされたコードはどのフォーマットを使用しますか？
PicoPixel は、クリーンで人間が読める LVGL C code（.c および .h ファイル）を含む zip ファイルをエクスポートします。出力にはウィジェットの作成、スタイリング、レイアウト、イベントハンドラーの設定が含まれます — すべて標準 LVGL API 呼び出しを使用し、プロプライエタリな依存関係はありません。
エクスポートされたコードを ESP-IDF、Arduino、PlatformIO で使用できますか？
はい。エクスポートされたコードは標準 LVGL API 呼び出しを使用するため、ESP-IDF、Arduino IDE、PlatformIO を含む LVGL をサポートするあらゆるビルドシステムで動作します。プロジェクトにファイルを追加し、ディスプレイドライバーの設定後に ui_init() を呼び出すだけです。プラットフォーム固有の詳細については、ESP32 ガイドをご覧ください。
PicoPixel は無料ですか？
はい。PicoPixel は個人・趣味目的での使用は無料で、クレジットカード不要です。商用利用は月額 17 ドル（年額 204 ドル）からとなります。充実した無料ティアは常に提供されます。