技術

ESP-IDF + Slint で M5Stack CoreS3 の画面を描画する

  • 正月休みのときに1日あそんでた記録
  • 個人用メモなので画像はありません

なにをしようとしたか

  • タッチパネルにボタンを配置
  • ボタンの押下に押下に応じてセンサーをON/OFFする
    • センサー部分はセンサーによって実装が全然違う
  • プロジェクト作成してビルドできるようになるところまでをメモしておく

それぞれの説明

M5Stack CoreS3

  • 公式サイト
  • 組み込み開発プラットフォーム
    • タッチパネル・バッテリ・各種センサ・拡張端子（Grove）がまとまってる
  • 開発フレームワークはいくつかある
    • Arduino
    • PlatformIO
    • ESP-IDF
    • MicroPython

ESP-IDF

  • 公式サイト
  • Espressifの公式SDK
    • ビルドシステム・ドライバ・FreeRTOS・ネットワークスタック等いろいろはいってる
  • VSCode拡張機能を使うと、プロジェクト作成〜ビルド〜フラッシュ〜モニタまでVSCode内で完結できる

Slint

  • 公式サイト ← かっこいい
  • Rustで作られた宣言的UIのGUIフレームワーク
  • .slint形式でUI定義を作成し、そこから各言語のコードが生成される形になってる

環境構築

事前準備

  • Ubuntu 24.04にVSCodeとPythonをインストール
  • PCとM5StackをUSBで接続

ESP-IDF拡張機能とESP-IDF本体のインストール

  1. VSCodeの拡張機能でESP-IDFをインストール
  2. コマンドパレットから ESP-IDF: Configure ESP-IDF extension を実行
  3. EXPRESSを押下
  4. Select ESP-IDF versionで5.2.xを選択し、Installを押下
    • この5.2.xじゃないとCoreS3とSlint両方がうまく動かなかった
  5. 指定したバージョンのインストールがはじまる

Slint のインストール

  • ESP Component Registry の依存関係として追加する
    • Slint単体でのインストールはしない
  • コードハイライトのためにVSCodeのSlint拡張機能をいれてもいいかも

開発

プロジェクト作成

  1. コマンドパレットから ESP-IDF: New Project を実行
  2. 使用するESP-IDFのバージョンを選択
  3. ウインドウ内でいろいろ設定して、Choose Templateを押下
    • プロジェクト名
    • プロジェクトのディレクトリ
    • ESP-IDF Target : esp32s3を選択（CoreS3がs3チップを使用しているので）
    • ESP-IDF Board : ESP32-S3 chip (via builtin USB-JTAG)を選択（←なんだかよくわかんない）
    • serial port : 接続しているUSBのポートを選択（ふつうは /dev/ttyACM0 になる？）
  4. テンプレートを選択して、Create project using template xxx を押下
    • ESP-IDF -> get-started -> sample_project を選択するといいかも
  5. プロジェクトが作成されるので、Open Project を押下

SDK Configuration を変更する

画面下部のステータスバーからSDK Configuration Editorを起動する

  • ESP System Settings > Main task stack size
    • 8192以上にする
  • Serial flasher config > Flash size
    • 16MBにする（CoreS3にあわせる）

ディレクトリ構成を変更する

  • デフォルトだとmain配下に.cファイルとCMakeLists.txtが格納されている
  • C++で開発するので.cファイルは削除する
  • 以下の構成にするとよさそう
main
├ img
│ └ 画像ファイル
├ include
│ └ ヘッダファイル
├ src
│ └ main.cpp（必要に応じて増やす）
├ ui
│ └ ui_main.ui（必要に応じて増やす）
└ CMakeLists.txt

idf_component.ymlを編集する

  • ここに各種コンポーネントを書くと、ビルドするときにダウンロードしてきて組み込んでくれる
  • Slintもここで記載する
  • 本当は’*’ではなく、ちゃんとバージョン指定したほうがいいのかも
    • バージョンはここで確認できる
dependencies:
  (中略)
  slint/slint: '*'
  espressif/m5stack_core_s3: '*'

（main配下の）CMakeLists.txtを修正する

  • ディレクトリ構成とコンポーネントに合わせる
  • ファイル追加したら追記する
idf_component_register(
    SRCS "src/main.cpp" "src/xxx.cpp" "src/yyy.cpp"
    INCLUDE_DIRS "include" 
    REQUIRES slint m5stack_core_s3
    )
slint_target_sources(
    ${COMPONENT_LIB} "ui/ui_main.slint")

コードを書く

  • 人間のやるところじゃないのでAIに書かせる
  • 困ったらSlintの問題なのか、ESP-IDFの問題なのかを切り分けて考えることが重要
    • Slintに関してはここに詳しい実装方法の記載がある
      • VSCode拡張機能ではなくidf.pyコマンドを使用した形の記載方法なので注意
    • ESP-IDFについては調べればいっぱいでてくるはず

ビルド

  • 画面下部のステータスバーでBuild Projectを押下する

フラッシュ（書き込み）

  • M5Stackの電源が入っていて、USBで接続されていることを確認
  • 画面下部のステータスバーでFlash Deviceを押下する
    • Flash MethodはUARTを選択
  • 書き込みが完了すると勝手に動き始める　

メモ

なんでこの組み合わせなの？

  • Slint を触ってみたかった
  • 他にもいろいろ選択肢はある
    • とっつきやすいのはMicroPython
    • M5Unified + M5GFX がいいのかも
  • 正直Slintが必須じゃないなら、情報が多い別のやり方にするべき

Flashミスしてぶっ壊れた場合

  • 動いていた地点まで戻して再度Flash
  • M5Burnerでなにかを選択して書き込む

ほかに考えるべきこと

やりたいことに応じたタスク分割

  • UIでイベントループになるので、センサとか通信とかは別タスクにする
  • 最初は単一タスクでやってみて、うまく動かなかったら分割を考えるとかでよさそう

各種センサとの通信

  • Grove端子があるので、センサを買うときはGrove対応センサを選ぶとよい
    • Groveケーブルは黒赤白黄と黒赤黄白の2パターンあるので注意（2時間ぐらい奪われた）
    • センサ側とM5Stack側、どちらもちゃんと公式サイトを確認してピンの仕様を理解する

ネットワーク接続

  • SDK Configuration EditorでSSIDとか設定する
  • アプリ側でもいろいろやる必要あり（AI任せでなんとかなる）

スポンサーリンク

コメント

タイトルとURLをコピーしました