Skip to main content

XIAO ESP32C3 プリズムディスプレイ

note

この文書は AI によって翻訳されています。内容に不正確な点や改善すべき点がございましたら、文書下部のコメント欄または以下の Issue ページにてご報告ください。
https://github.com/Seeed-Studio/wiki-documents/issues

XIAO ESP32C3 プリズムディスプレイ

はじめに​

このチュートリアルをすべて実行するには、以下のものを準備する必要があります。

XIAO ESP32C3Grove Shield for XIAO
（バッテリーマネジメントチップ付き）		Grove Smart IR Gesture
センサー（PAJ7660）
今すぐ購入 🖱️
今すぐ購入 🖱️
今すぐ購入 🖱️

このプロジェクトでは、ESP32C3を使用してスプリッタープリズムを用いた三次元ディスプレイを作成します。このガイドでは、エンクロージャーの組み立て、関連する電子部品の接続、ファームウェアのインストールに必要な手順を説明します。また、追跡する暗号通貨リストの更新や、画像ブラウザで使用するアニメーション画像の縮小および処理に関する追加のドキュメントも提供しています。

主要な手順

  1. エンクロージャーのダウンロードと3Dプリント
  2. 関連する電子部品の接続
  3. 環境のセットアップ
  4. XIAO ESP32C3の設定

追加ドキュメント

  1. 新しい暗号通貨の追加
  2. アニメーション画像の縮小と処理

エンクロージャーのダウンロードと3Dプリント​

3Dエンクロージャーは2つの半分から構成されており、内部部品を組み立てた後に圧入して組み合わせるように設計されています。部品を正しく組み立てるために、印刷時にはサポート材を使用する必要があります。

部品はGitHubリポジトリで見つけることができ、STLビューアーでプレビュー可能です：
https://github.com/Timo614/xiao-prism-buddy/blob/main/docs/enclosure/xiao-prism-top.stl
https://github.com/Timo614/xiao-prism-buddy/blob/main/docs/enclosure/xiao-prism-bottom.stl

関連する電子部品の取り付け​

Groveシールドは、プリズムディスプレイのセットアップを簡素化します。これにより、はんだ付けを必要とせず、シンプルなブレッドボード用ワイヤーを使用して組み立てを完了できます。Groveシールドには、Xiaoピンに隣接する開いているピンに二次的なメスヘッダーをはんだ付けする必要があります。このシールドは、エンクロージャーに用意された2つのネジ穴にネジ止めする必要があります。これには少しコツが必要なので、最初にネジを入れてからシールドを下げ、各ネジを締めると便利です。

ここから、主に2つの接続があります：

  • ジェスチャーセンサーへのi2c接続
  • ディスプレイへのspi接続

i2c接続には、Grove 4ピンコネクタを使用してシールドからジェスチャーセンサーに接続します。

エンクロージャーは、ジェスチャーセンサーをしっかりと固定できるように設計されており、ネジでエンクロージャーの外側にしっかりと固定されます。ジェスチャーセンサーを正しく配置するには、まずUSB側を位置決めし、本体が平らになったらネジを取り付けます。

spi接続は、いくつかのピンを必要とするため、少し複雑です。

Xiaoの3V3はディスプレイのVCCピンに接続
XiaoのGNDはディスプレイのGNDピンに接続
XiaoのD0はディスプレイのCSピンに接続
XiaoのD1はディスプレイのBLピンに接続
XiaoのD2はディスプレイのDCピンに接続
XiaoのD3はディスプレイのRSTピンに接続
XiaoのD8 (SCK)はディスプレイのSCLピンに接続
XiaoのD10 (MOSI)はディスプレイのSDAピンに接続

すべてのコンポーネントにワイヤーを接続したら、デバイスを完全に組み立てることができます。エンクロージャーは、同様の公差で印刷された場合、圧入で閉じることができるように設計されています。

組み立てが完了したら、プリズムをスクリーンの上に置きます。

環境のセットアップ​

ローカル環境をセットアップする最も簡単な方法は、Visual Studio Code を使用することです。これにより、マシンの構成が簡素化されます。

  • GitHub からリポジトリをクローンします: https://github.com/Timo614/xiao-prism-buddy
  • リポジトリを Visual Studio Code で開きます
  • ESP-IDF 拡張機能をインストールします
  • ESP-IDF 5.0.4 をインストールします
  • ESP-IDF Espressif Device Target を esp32c3 に設定します
  • Wi-Fi ネットワーク用の環境変数を構成します（以下の手順を参照）
  • デバイスをビルド、フラッシュ、モニターします

XIAO ESP32C3 の構成​

アプリケーションを準備する次のステップは、Wi-Fi ネットワークの認証情報を構成することです。

Ctrl + Shift + P を押してクイックメニューを開き、menuconfig と入力します。これにより、ESP-IDF: SDK Configuration editor (Menuconfig) のエントリがリストに絞り込まれます。

このメニュー内で、Wi-Fi ネットワーク名とパスワードを設定してください。

新しい暗号通貨の追加​

Xiao Prism Buddy は CoinGecko によって動作しており、異なる暗号通貨を表示するように変更することができます。CoinGecko は、ユーザーにレート制限付きでアクセス可能な無料の API ティアを提供しています。

アプリケーションは /simple/price エンドポイントを15分ごとに呼び出し、設定された暗号通貨のセットを更新します。この呼び出しで使用される通貨は、リポジトリ内の config.h ファイルで設定可能であり、アプリ内で表示される通貨記号も同様です。呼び出し自体に関する詳細情報は API ドキュメント を参照してください。

現在、新しい暗号通貨を追加するプロセスは少し手間がかかりますが、以下の手順で実現できます:

  1. 暗号通貨の総数を更新して正しい数を反映させます（このハードコードされた値はページ内でのサイクル処理に使用されます） https://github.com/Timo614/xiao-prism-buddy/blob/main/main/controller/prism_controller.cpp#L29
  2. 暗号通貨モデルファイル内で既存の暗号通貨（例: bitcoin）を検索し、コードの各関連セグメント（データ初期化、CoinGecko レスポンス解析、CoinGecko GET リクエスト文字列など）に新しいエントリを追加します。 https://github.com/Timo614/xiao-prism-buddy/blob/main/main/model/prism_cryptocurrency.c
  3. 暗号通貨ビューのデータ構造を更新して新しい暗号通貨を反映させます。 https://github.com/Timo614/xiao-prism-buddy/blob/main/main/view_data.h#L54
  4. コントローラーロジック内で既存の暗号通貨（例: bitcoin）を検索し、イベントデータの処理とレンダリングに関連するロジックをコピーして追加します。 https://github.com/Timo614/xiao-prism-buddy/blob/main/main/controller/prism_controller.cpp
  5. 新しい暗号通貨に適したサイズの PNG ファイルを提供し、LVGL Online Image Converter を使用して PNG を C ファイルに変換し、上記のコントローラーで参照します。 https://lvgl.io/tools/imageconverter

アニメーション画像の縮小と処理​

マイクロコントローラーで作業する際の制約の1つは、利用可能なフラッシュメモリが少ないことです。GIFファイルはかなりのフラッシュメモリを消費するため、それらを含めることが難しくなります。このアプリケーションで使用される画像を変換するために一連のプロセスが実行されました。ここでは、他の人が同じ手順を実行して画像ブラウザの画像を自分の選んだものに変更したい場合のために、そのプロセスを記録しています。

  1. 適切なアニメーション画像を選択します。理想的には、透明でループ設定されており、適切な寸法を持つものが望ましいです。このプロセスを簡単にするために、特にLottieファイルを探すことが役立ちました。このアプリケーションでは、以下のリンクからいくつかの有用な画像を見つけることができました: https://lottiefiles.com/
  2. LottieからGIFへのコンバーターを使用して、Lottieファイルを透明なGIFファイルに変換します（例: https://lottiefiles.com/lottie-to-gif）
  1. 任意のGIF編集ツールを使用して以下の変更を行います（このアプリケーションの目的で使用したオンラインツール https://ezgif.com は、GIFの最適化スイートでこれらの機能を提供していました）:

3.1. フレーム間の数を減らし、約20フレームになるまで調整します

3.2. 画像を約100x100以下にリサイズします

3.3. フレーム数が減少したため、画像の速度を遅くします

3.4. GIFの色構成を減らしてサイズを縮小します

3.5. 必要に応じてGIFをさらに圧縮します

  1. LVGL Online Image Converter を使用して、GIFファイルをC配列に変換します。詳細は LVGLのドキュメント を参照してください。注意: 「Raw」カラー形式と「C array」出力形式を選択してください。

これらの手順を実行することで、Prismデバイスで表示するための効果的なGIF画像をサイズを縮小した状態で処理できます。最も簡単な方法は、既存の火やスイカの画像を置き換えてテストすることです。

技術サポートと製品ディスカッション​

弊社製品をお選びいただきありがとうございます！お客様が弊社製品をスムーズにご利用いただけるよう、さまざまなサポートをご提供しております。異なる好みやニーズに対応するため、複数のコミュニケーションチャネルをご用意しています。

Loading Comments...