ビジュアルドラッグ＆ドロップ LVGL エディター。
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 は商用プロジェクトを含め無料で使用できます。クレジットカードは不要です。プラットフォームの成長とユーザーの増加に伴い、ストレージやサービスコストをカバーするための有料プランが導入される可能性があります。無料ティアは常に提供されます。
最初の LVGL インターフェースを無料でデザイン
ブラウザで PicoPixel を開き、LVGL ウィジェットをキャンバスにドラッグ＆ドロップし、数分で本番環境対応の C code をエクスポート。インストール不要。クレジットカード不要。
無料で始めましょう！