概要
PicoPixel は、組み込み UI を画面上で設計できる LVGL エディタです。Figma のようなワークスペースに、再利用可能なコンポーネント、ライブラリ、アセット管理、共同編集の機能を備え、試作から製品開発までを支援します。
作成した UI は C コードとして出力でき、LVGL が動作するさまざまなデバイスに組み込めます。現在は LVGL 8.x に対応しており、LVGL 9 への対応も予定しています。
テンプレート、UI キット、サンプル、スプライト、ウィジェット、完成アプリを使えば、すでにあるデザインをもとに作り始められます。PicoPixel 開発チームによるものも、コミュニティの作品もあります。自分の作品を共有する場合は、テンプレートの投稿方法をご覧ください。
テンプレートとは
PicoPixel のテンプレートは、通常の .picopixel ファイルです。自分のワークスペースからエクスポートするファイルと同じ形式で、特別な仕組みはありません。
画面、LVGL ウィジェット、再利用可能なコンポーネント、色、フォント、画像、アニメーション画像、スプライトなどを含められます。開いた後は自由に編集でき、不要な部分を削除したり、一部を別のファイルにコピーしたり、チームライブラリとして共有したり、LVGL C コードとして出力したりできます。
テンプレートはスクリーンショットではなく、編集できる PicoPixel プロジェクトです。自分の UI 開発にそのまま取り入れられます。
テンプレートを探す
PicoPixel のテンプレートギャラリーでは、種類で絞り込んだり、詳細ページで内容を確認したりして、目的に合うプロジェクトを探せます。取り込み方法も詳細ページから選べます。
同じファイルは GitHub でも公開しています。
ファイルを直接ダウンロードしたい場合や、変更履歴を確認したい場合、他の開発用アセットと一緒に管理したい場合は GitHub が便利です。
目的に合った種類を選ぶ
ギャラリーには次の種類があります。
- Full App：アプリ全体のプロジェクトです。将来的には、実機への書き込みを簡単にするファームウェアのバイナリを含む作品も増えるかもしれません。現時点では、UI ファイルを編集し、自分のファームウェア向けにコードを出力して使います。
- Example：特定のウィジェットやレイアウト、操作への反応、作業手順を学べるサンプルです。
- UI Kit：複数の製品で使い回せるコンポーネント、スタイル、画面、アセットのセットです。
- Template：自分の UI に合わせて編集できる画面やプロジェクトのひな型です。
- Sprite：状態に応じてアニメーションを切り替えられる、再利用可能な LVGL ウィジェットです。詳しくはスプライトとは？をご覧ください。
- Animated Image：LVGL のアニメーション画像とそのフレームを使うファイルやサンプルです。アニメーション画像の使い方で詳しく説明しています。
- Widget：自分の UI に追加して使える、設定済みの LVGL ウィジェットやコンポーネントです。
仕組みを学ぶなら Example、部品を再利用するなら UI Kit、完成イメージに近い画面から作るなら Template を選ぶと始めやすくなります。
ファイルを開く・インポートする
テンプレートギャラリーでプロジェクトを選ぶと、プレビュー画像や詳細情報、取り込み用のボタンがあるページが開きます。
ワークスペースに追加する方法は、主に次の 3 つです。
- Open in PicoPixel をクリックして、エディタで直接開く。
- Download .picopixel をクリックして保存する。後でインポートするほか、バックアップやファームウェアプロジェクトとの共有にも使えます。
- GitHubから
.picopixelファイルをダウンロードし、PicoPixel にドラッグ＆ドロップするか、エディタのインポート機能で開く。
取り込んだ後は、通常のプロジェクトと同じように名前の変更、複製、画面の編集、アセットの差し替え、フォントや色の調整ができます。準備ができたらエクスポートしましょう。
必要な部分を再利用する
テンプレート全体を新しいプロジェクトの土台にしても、必要な部品だけを取り出して使っても構いません。
多くのファイルには、画像、色、フォント、アニメーションのフレームセット、コンポーネントなどが含まれています。Assets タブで確認できます。
再利用可能なウィジェットやコンポーネントが含まれている場合は、ファイルをチームライブラリとして共有し、他のファイルからリンクできます。UI キットやウィジェット集に便利な方法です。元のファイルをライブラリとして管理し、各製品の UI から必要な部品を使えます。
ローカルライブラリとチームライブラリの違いや、リンク先への更新の反映方法は、ライブラリと再利用可能な LVGL コンポーネントのガイドをご覧ください。
実機向けにエクスポートする
UI ができたら、LVGL C コードとして出力し、ボードのファームウェアに組み込みます。使用するウィジェットとアセットに合わせてファームウェアと LVGL を設定すれば、LVGL に対応するさまざまなデバイスで動かせます。
大きな画像、多数のアニメーションフレーム、スプライト、大きなフォント、複雑な全画面レイアウトは、多くの RAM やフラッシュメモリを必要とします。PicoPixel では表示できても実機で表示されない場合は、LVGL の設定、画像サイズ、色深度、ヒープ容量、ディスプレイバッファの設定を確認してください。
テンプレートは開発の出発点であり、すべての実機での動作を保証するものではありません。特に画像やアニメーション、フォントを多く使う場合は、ボードの RAM とフラッシュメモリに収まるか確認してください。
共有と権利について
コミュニティのテンプレートは、PicoPixel チームとユーザーが制作しています。自分のファイルを共有する場合は、テンプレートの投稿方法に沿って、ファイルの場所、作者情報、説明、共有の許可をお知らせください。
投稿やインポートの前に、利用規約とプライバシーポリシーもご確認ください。画像、アイコン、フォント、スクリーンショット、ブランド素材などは、自分が権利を持つもの、または共有の許可があるものだけを投稿してください。
公開されている作品に問題がある場合は、コンテンツの報告方法をご覧ください。
次のステップ
- テンプレートギャラリー：利用できる
.picopixelファイルを探す - テンプレートの投稿方法：自分の作品をコミュニティと共有する
- ライブラリと再利用可能な LVGL コンポーネントのガイド：コンポーネントを複数のファイルで使う
- スプライトとは？：状態に応じて変化するアニメーションを作る
- アニメーション画像の使い方：画像のフレームを切り替えるアニメーションを学ぶ
