STEP 01
デザイン
- LVGL ウィジェットのドラッグ＆ドロップ
- 色・フォント・レイアウトをスタイル設定
- リアルタイムでアニメーション
リアルタイムコラボレーション編集 — フィードバックを残し、変更をリアルタイムで確認し、チームを同期。
PicoPixel とは？
PicoPixel はブラウザベースの LVGL ビジュアルエディターです。コンポーネントをライブキャンバスにドラッグ＆ドロップし、ビジュアルにスタイリングし、ESP32 などでコンパイル可能なクリーンな C コードをエクスポートできます。
組み込み UI の Figma と考えてください — リアルタイムコラボレーション、内蔵シミュレーター、インストール不要。すべての機能を探索するか、使い方をご覧ください。
これらの組織のメイカーが利用中
主な機能
LVGL GUI 設計に必要なすべて
LVGL の完全なビジュアルツールキット — ドラッグ＆ドロップレイアウトから本番対応コードのエクスポートまで。
ビジュアルデザインキャンバス
ピクセルパーフェクトな LVGL キャンバスにウィジェットを追加。構築しながらすべての変更をリアルタイムで確認。
内蔵バージョン管理
内蔵バージョン管理であらゆる変更を追跡。アクションパネルで詳細なセッション履歴と正確なロールバックが可能。
アセットライブラリ
再利用可能なウィジェット、画像、フォント、カラー — ドラッグ＆ドロップで新しいインターフェースを構築。
簡単共有
クライアントやチームメンバーにシミュレーターリンクを送信 — 進捗を確認し、UI をライブで操作できます。
イベントエディター
ウィジェットやボタンにイベントハンドラーをドラッグ＆ドロップ。コードを書かずに LVGL アクション、トランジション、コールバックを接続。
アニメーションエディタ
位置、サイズ、不透明度などをビジュアルタイムライン上でキーフレーム化。フレームをまたいでアニメーションを重ね、コードを1行も書かずに滑らかな LVGL トランジションをプレビューできます。
Arduino、ESP32 など幅広く対応
PicoPixel は標準的な LVGL C コードを生成し、LVGL ポートを持つあらゆるプラットフォームでコンパイル可能 — ESP32、STM32、Arduino、Raspberry Pi Pico、その他数十種類のマイクロコントローラーに対応。
使い方
白紙のキャンバスから本番対応 C コードまで、3 ステップで。
STEP 02
プレビュー
- 内蔵 LVGL シミュレーター
- 共有可能なプレビューリンク
- チームやクライアントとレビュー
STEP 03
1 /* sprite.c */
2 lv_obj_t *scr = lv_scr_act();
3 lv_img_set_src(spr, &sprite);
4 lv_anim_start(&a); // idle
ui.cscreens.cactions.c
エクスポート
- 整理された LVGL ソースコード
- 実機にフラッシュして動作確認
- 他の LVGL エディターと比較。
