ESP32 タッチスクリーン UI をビジュアルに構築

1. インターフェースをデザイン

ブラウザで PicoPixel を開き、新しいプロジェクトを作成します。LVGL ウィジェット — ボタン、ラベル、スライダー、チャート、アーク、スイッチなど — をキャンバスにドラッグ＆ドロップします。ESP32 のスクリーンに合わせてディスプレイ解像度を設定：一般的な SPI TFT は 320×240、丸型 GC9A01 ディスプレイは 240×240、大型パネルは 800×480。色、フォント、スペースをビジュアルにスタイリングします — この段階で C コードは不要です。

2. ライブ LVGL シミュレーターでプレビュー

PicoPixel は LVGL を WebAssembly にコンパイルし、ブラウザで直接実行します。プレビューは実際の LVGL レンダリングエンジンであり、モックアップではありません。ハードウェアに触れる前に、タッチ操作、スクロール、アニメーションをテストできます。チームメイトやクライアントにシミュレーターリンクを共有してフィードバックを得ることも可能です。

3. UI ファイルをエクスポート

LVGL C コード（.c および .h ファイル）を含む zip ファイルをエクスポートします。出力にはウィジェットの作成、スタイリング、レイアウト、イベントバインディングが含まれます — すべて標準 LVGL 8.x API 呼び出しを使用。プロプライエタリな依存関係も PicoPixel ランタイムライブラリもありません。LVGL v9.x サポートを予定しています。

4. 統合してフラッシュ

エクスポートされたファイルを ESP-IDF、Arduino、または PlatformIO プロジェクトに展開します。UI ヘッダーをインクルードし、LVGL ディスプレイと入力ドライバーの設定後に ui_init() を呼び出します。コンパイル、フラッシュすれば、ESP32 上の UI がシミュレーターとピクセル単位で一致します。より速い方法として、zip を AI コードアシスタント（Claude Code、Codex など）に渡して統合を自動的に処理させることもできます。

ESP32 バリアント

PicoPixel は LVGL 8.x をサポートする任意の ESP32 バリアントで動作する標準 LVGL コードを生成します：

• •ESP32（オリジナル）— SRAM が限られており、シンプルな UI に最適
• •ESP32-S2 — USB OTG サポート、中程度のディスプレイ対応能力
• •ESP32-S3 — ほとんどのディスプレイプロジェクトに推奨。PSRAM 搭載のデュアルコアで、複雑な UI に十分なパワー
• •ESP32-C3 — RISC-V シングルコア。軽量 UI に適しています
• •ESP32-C6 — Wi-Fi 6 + Bluetooth 5.3。C3 と同等のディスプレイ対応能力
• •ESP32-P4 — 専用 GPU とハードウェアピクセル処理を備えた最新バリアント。複雑な高解像度 GUI に最適。Waveshare および Guition ボードでテスト済み。

人気の開発ボード

LVGL 対応のすべての ESP32 開発ボードと互換性があります：

• •LILYGO T-Display / T-Display-S3
• •M5Stack Core2 / CoreS3
• •Waveshare ESP32-S3 / ESP32-P4 ディスプレイボード
• •Guition ESP32-P4 ディスプレイボード
• •Elecrow ディスプレイボード
• •Adafruit Feather ESP32-S3 TFT
• •Espressif ESP32-S3-BOX / BOX-3
• •Sunton ボード（人気の低価格 ESP32 ディスプレイボード）

対応ディスプレイドライバー

PicoPixel はプラットフォームに依存しない LVGL コードを生成します — ディスプレイドライバーは LVGL ポート設定で処理されます。ESP32 で LVGL と動作する一般的なディスプレイコントローラー：

• •ST7789（小型 TFT で最も一般的）
• •ILI9341（240×320 ディスプレイ）
• •ILI9488（320×480 ディスプレイ）
• •GC9A01（丸型ディスプレイ）
• •ST7796（大型ディスプレイ）
• •SSD1306（小型 OLED）
• •MIPI DSI ディスプレイ（ESP32-P4）

ディスプレイが LVGL で動作するなら、PicoPixel の出力もそのまま動作します。

ESP-IDF 統合

PicoPixel のエクスポートは純粋に UI コードです — lv_init()、ディスプレイドライバー登録、ティック処理は含まれません。プロジェクトには既に動作する LVGL 8.x セットアップが必要です。PicoPixel の UI を追加するには：

1. 1.PicoPixel から UI をエクスポート（.zip ファイルがダウンロードされます）
2. 2.プロジェクトの components/ フォルダー内に ui/ ディレクトリを作成
3. 3.エクスポートされたファイルを components/ui/ に展開
4. 4.components/ui/ に CMakeLists.txt を作成し、lvgl への依存関係でソースを登録
5. 5.main/CMakeLists.txt の REQUIRES リストに ui を追加
6. 6.main.c に #include "ui/ui.h" をインクルードし、ディスプレイ設定後に ui_init() を呼び出す
7. 7.ビルドしてフラッシュ：idf.py build && idf.py flash

Arduino IDE 統合

スケッチには LVGL 8.x がインストール済みで、動作するディスプレイドライバーが設定されている必要があります。

1. 1.PicoPixel から UI をエクスポート（.zip ファイルがダウンロードされます）
2. 2.スケッチの src/ ディレクトリ内に ui/ フォルダーを作成
3. 3.エクスポートされたファイルを src/ui/ に展開
4. 4..ino ファイルに #include "src/ui/ui.h" をインクルード
5. 5.setup() 内で lv_init() とディスプレイドライバー設定後に ui_init() を呼び出す
6. 6.Arduino IDE は src/ 内のすべての .c ファイルを再帰的に自動コンパイル — ビルド設定の変更は不要
7. 7.ESP32 にアップロード

PlatformIO 統合

プロジェクトの lib_deps に LVGL 8.x があり、動作するディスプレイドライバーが設定されている必要があります。

1. 1.PicoPixel から UI をエクスポート（.zip ファイルがダウンロードされます）
2. 2.エクスポートされたファイルを src/ui/ に展開
3. 3.main.cpp に #include "ui/ui.h" をインクルード
4. 4.LVGL セットアップ後に ui_init() を呼び出す
5. 5.platformio.ini の変更は不要 — PlatformIO は src/ 内のすべてのソースを自動コンパイル
6. 6.ビルドしてフラッシュ：pio run --target upload

AI アシスト統合

より速い方法として、PicoPixel から zip をエクスポートし、AI コードアシスタントに渡してください。Claude Code、GitHub Copilot、または Codex に「これらの PicoPixel UI ファイルを ESP32 LVGL プロジェクトに追加してください」と伝えれば、ほとんどのアシスタントがファイル配置、インクルード、ビルド設定を自動的に処理できます。