STEP 01
デザイン
- LVGL ウィジェットのドラッグ＆ドロップ
- 色・フォント・レイアウトをスタイル設定
- リアルタイムでアニメーション
同じキャンバスをチームで同時に編集。コメントを残し、お互いの変更をその場で確認できます。
PicoPixel とは？
PicoPixel はブラウザベースの LVGL ビジュアルエディターです。コンポーネントをライブキャンバスにドラッグ＆ドロップし、ビジュアルにスタイリングし、ESP32 などでコンパイル可能なクリーンな C コードをエクスポートできます。
組み込み UI の Figma と考えてください — リアルタイム共同編集、内蔵シミュレーター、インストール不要。すべての機能を見るか、使い方をご覧ください。
こちらの企業・組織の開発者にも利用されています
主な機能
LVGL GUI 設計に必要なすべて
LVGL UI の開発を支えるビジュアルツール — ドラッグ＆ドロップレイアウトから製品向けコードの出力まで。
ビジュアルデザインキャンバス
ピクセル単位で調整できる LVGL キャンバスにウィジェットを配置。変更した結果をその場で確認できます。
内蔵バージョン管理
内蔵のバージョン管理で変更を記録。Actions パネルで作業履歴を確認し、必要な時点に戻せます。
アセットライブラリ
ウィジェット、画像、フォント、色を保存して再利用。ドラッグ＆ドロップで次の UI にも使えます。
簡単共有
シミュレーターのリンクをチームやクライアントと共有。その時点の 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 エディターと比較。
こんにちは、Ed です。
cat ./about.md
