LVGL を学ぶ
ブラウザでの UI 設計から ESP32 への組み込みまで、実際の手順に沿って学べるガイドです。
ギャラリーのペットをプロジェクトに追加し、デバイスの動作に合わせてアニメーションを切り替える方法を紹介します。データ取得中や温度の異常などを、キャラクターの動きで表現できます。
12 すべて
テンプレートや UI キットを探して PicoPixel で開くところから、編集・再利用し、実機向けの LVGL C コードを出力するまでの手順を紹介します。
Set up the PicoPixel LVGL MCP server for Claude, ChatGPT, Codex, or Cursor. Learn agent settings, reusable components, colors, fonts, and assets.
LVGL アニメーション画像ウィジェットの仕組みを学びます。同じサイズのフレーム列をアップロードし、再生時間とループを設定して、ディスプレイ上でフレーム単位のアニメーションを再生します。
スプライトとは何か、複数状態を持つアニメーション付きウィジェットの作り方、プロジェクト間での再利用方法を学びます。
ウィジェット同士をドラッグでつなぎ、クリックや値の変更をきっかけに画面を切り替えたり、表示を更新したりする方法を紹介します。
Create light and dark LVGL themes in PicoPixel with reusable color tokens, bind them to widgets, and add a Set Theme event that switches themes at runtime.
ライブラリに保存できるアセット、チーム内での共有、他のファイルからの利用、更新の反映方法を紹介します。Publish は一般公開ではなく、チーム内で再利用できるようにする操作です。
LVGL 用のフォント変換、付属フォントとアップロード、アラビア語・ヘブライ語の設定、日本語などの文字数が多いフォントの容量管理を説明します。
LVGLを使ってESP32向けのタッチスクリーンUIを作成し、ブラウザ上でビジュアルにデザインし、リアルタイムでプレビューして、ファームウェアに組み込めるCコードをエクスポートしましょう。初心者向けのわかりやすいガイドです。
PicoPixel コミュニティにペットを追加する 2 つの方法です。最速は Petdex URL を貼り付ける方法、もう一つはスプライトシートと sprite.json を GitHub にアップロードする方法です。AI ツールで独自のペットを作る流れも紹介します。
.picopixel ファイル、紹介画像、README 説明を含む GitHub リポジトリを作成し、PicoPixel ファイルをコミュニティテンプレートとして共有します。
無断転載、不適切な内容、開けないテンプレートなどを見つけた場合の報告方法です。Give feedback フォームに必要な情報と、送信後の対応を説明します。
