はじめに
2024年11月14日、Moddable SDK 5.2.0がリリースされて、カメラ機能が含まれていました。
積みボードを崩すつもりが、積んでしまった件
カメラ機能を試すため、新しいボードを積んでしまいました。
Seeed Studio XIAO ESP32S3 Sense
M5Stack AtomS3R Cam
M5Stack AtomS3R M12
環境構築(再構築)
xs-devツールを使用して環境を構築します。
xs-devツールを更新します。(私の環境では、v0.30.4 -> V0.33.1 へ更新)
npm update xs-dev
最初、SDKを更新(update)しようとしましたが、エラーが出たので環境を再構築しました。
環境を破棄します。
xs-dev teardown
Moddable SDKをインストールします。
xs-dev setup
環境変数(IDF_PYTHON_ENV_PATH)の問題でエラーが出たので、ターミナルを開き直します。
ESP-IDFをインストールします。
xs-dev setup --device esp32
ターミナルを開き直します。
エラーが発生しました。
インストールされているPythonのバージョンが3.9と異なると、エラーが発生します。
Last login: Sat Nov 23 12:51:54 on ttys000
Detecting the Python interpreter
Checking "python3" ...
Python 3.13.0
"python3" has been detected
Checking Python compatibility
Checking other ESP-IDF version.
Not using an unsupported version of tool openocd-esp32 found in PATH: 0.12.0. To use it, run '/opt/homebrew/opt/python@3.13/bin/python3.13 /Users/kitazaki/.local/share/esp32/esp-idf/tools/idf_tools.py export --prefer-system'
WARNING: Error while accessing the ESP-IDF version file in the Python environment: [Errno 2] No such file or directory: '/Users/kitazaki/.espressif/python_env/idf5.3_py3.13_env/idf_version.txt'
Adding ESP-IDF tools to PATH...
WARNING: Error while accessing the ESP-IDF version file in the Python environment: [Errno 2] No such file or directory: '/Users/kitazaki/.espressif/python_env/idf5.3_py3.13_env/idf_version.txt'
Checking if Python packages are up to date...
ERROR: /Users/kitazaki/.espressif/python_env/idf5.3_py3.13_env/bin/python doesn't exist! Please run the install script or "idf_tools.py install-python-env" in order to create it
ESP-IDFを再インストールします。
cd $IDF_PATH
./install.sh esp32
.zprofileに環境変数(MODDABLE、IDF_PATH)が設定されていることを確認します。
export MODDABLE="/Users/ユーザ名/.local/share/moddable"
export PATH="${MODDABLE}/build/bin/mac/release:$PATH"
export IDF_PATH="/Users/ユーザ名/.local/share/esp32/esp-idf"
source $IDF_PATH/export.sh
サンプルプログラムの実行
$MODDABLE/examples/io/imagein/camera ディレクトリにサンプルプログラムがあります。
camera-balls
camera-server
camera-server-jpeg
camera-server-motion-jpeg
camera-test
結論から言うと、AtomS3R CamやXIAO ESP32S3 Senseのように、デバイスにディスプレイが存在しないと動かないサンプルがありました。(ビルドでエラーが出ます)
camera-balls
camera-server
camera-test
動いたサンプル
camera-server-jpeg
ブラウザでデバイス(HTTPサーバ)へアクセスすると、デバイスのカメラで撮影したJPEG画像を表示します。
XIAO ESP32S3 Sense と M5Stack AtomS3R M12 で動作しました。
AtomS3R Camに搭載されているカメラ(GC0308)はJPEGを出力できないため、ビルド後の実行時にエラー("camera init failed")が発生します。
READMEにも記載されています。
cd $MODDABLE/examples/io/imagein/camera/camera-server-jpeg
UPLOAD_PORT=/dev/cu.usbmodem11101 mcconfig -d -m -p esp32/xiao_esp32s3_sense ssid="SSID" password="PASSWORD"
デバッガ(xsbug)のログに表示されるURLへブラウザでアクセスします。
camera-server-motion
ブラウザでデバイス(HTTPサーバ)へアクセスすると、デバイスのカメラで撮影した動画(Motion JPEG)を表示します。
XIAO ESP32S3 Sense と M5Stack AtomS3R M12 で動作しました。
AtomS3R Camは動作しませんでした。(JPEG出力に対応していないため)
XIAO ESP32S3 Sense は連続で動作させるとデバイスが高温になるので、注意してください。(ヒートシンクが発売されています)
M5Stack AtomS3R M12 は連続で動作させると画像が乱れ始めました。
カメラデバイス、または、画像データの処理速度が追いついていないかもしれません。(調査中)
調査完了 (2024年11月24日時点)
AtomS3R Camで動かす方法を探っていきます。
Cam と M12 は同じピン配列なので、同じデバイス定義ファイルで問題なさそうです。
デバイス定義ファイル(m5atom_s3r)
ピン配列
サンプルプログラム
AtomS3R Camにディスプレイを追加することでサンプルプログラムを動かすことができました。
以下のサンプルプログラムを使用します。
camera-server
ディスプレイが必要な理由
GC0308はJPEG出力に対応していないためRGB565で出力させますが、BMPを処理するのにCommodettoライブラリを使用するためscreen定義が必要です。
$MODDABLE/examples/manifest_commodetto.json を include している
↓
$MODDABLE/build/devices/esp32/setup/commodetto.js を preload している
↓
screen定義がないとエラー("no screen configured")を出力
最初、I2C接続のOLEDディスプレイ(SSD1306)を使用しましたが、エラー("unsupported pixel format")で動きませんでした。
SPI接続のIPSディスプレイ(ST7789)を使用してサンプルプログラムを動かすことができました。
ディスプレイのないデバイスにディスプレイを追加する方法(メモ)はこちらです。
プログラムの変更点
ディスプレイを使用するため、manifest.jsonに定義を追加します。
- include
- ST7789ドライバー
- config
- screen定義
- defines
- spi
- ili9341 (ST7789ドライバーはili9341ドライバーを使用しています)
{
"include": [
"$(MODDABLE)/examples/manifest_base.json",
"$(MODDABLE)/examples/manifest_net.json",
"$(MODDABLE)/examples/manifest_commodetto.json",
"$(MODULES)/network/http/manifest.json",
"$(MODDABLE)/modules/io/imagein/camera/manifest.json",
"$(MODULES)/drivers/st7789/manifest.json"
],
"modules": {
"commodetto/Bitmap": "$(COMMODETTO)/commodettoBitmap",
"commodetto/Poco": "$(COMMODETTO)/commodettoPoco",
"commodetto/*": "$(COMMODETTO)/commodettoPocoBlit",
"commodetto/PixelsOut": "$(COMMODETTO)/commodettoPixelsOut",
"*": [
"./main",
"./bmpSpooler"
]
},
"preload": [
"commodetto/*",
"bmpSpooler"
],
"config": {
"screen": "st7789",
"touch": ""
},
"defines": {
"spi": {
"mosi_pin": 6,
"miso_pin": -1,
"sck_pin": 7
},
"ili9341": {
"cs_pin": -1,
"dc_pin": 5,
"rst_pin": 8,
"spi_port": "SPI3_HOST",
"hz": 20000000,
"width": 240,
"height": 240
}
}
}
画像サイズが大きいとエラー(RangeError)が出るため、画像サイズを小さくします。
let width = 176, height = 144;
↓
let width = 96, height = 96;
動作結果
デバッガ(xsbug)のログに出力されるURLへブラウザ(Firefoxはエラーが出ます。Chrome、または、Safariを使用します)からアクセスして、無事に画像(BMP)を表示できました。
