ASCII倶楽部

このページの本文へ

週替わりギークス 第220回

ソニー「toio」につなげて遊ぶ M5StickC+UnitV AI Camera準備編

2021年09月21日 12時00分更新

文● きゅんくん

  • この記事をはてなブックマークに追加
  • 本文印刷

 「M5StickC」と「UnitV AI Camera」を購入した。

 ソニーのロボットトイ「toio」に触れる機会があり、toioとM5StickC、UnitV AI Cameraを組み合わせたら、やれることが広がるだろうと考えたのだ。

 toioは、子供向けのおもちゃで、ゲームをして遊んだり、ビジュアルプログラミングで動きをコントロールできるハードウェアだ。開発者の田中章愛さんの書いた記事を読み、toioとM5StickCの連携に興味を持った。

ソニー・インタラクティブエンタテインメントのロボットトイ「toio」

 M5StickCというのは開発モジュール「M5Stack」の派生デバイスで、Arduino互換として動作し、無線機能を持つマイコンESP32を搭載している。ジャイロセンサや液晶画面(LCD)も搭載し、手軽に工作できる便利なデバイスだ。M5Stack、M5StickCは共に専用拡張モジュールを接続することでできることが広がるのが特徴。ブレッドボードなどを使わずに機能拡張できるのはお手軽だ。

 UnitV AI Cameraは、ニューラルネットワークプロセッサ(KPU)とデュアルコア 64ビット RISC-V CPUを使用しており、低コストかつ高いエネルギー効率で高性能な画像処理ができるのが特徴。ジャイロセンサやLCDが積まれているモデルもあるが、このモデルはシンプルにAIカメラのみ。M5StickCと組み合わせることで、ジャイロセンサやLCDを使うことができる。

 今回はまず「M5StickCを単体で使ってみる」「UnitV AI Cameraと組み合わせて使ってみる」という2つをやってみる。toioと組み合わせて使うのは次回だ。

●やったこと

  • 「M5StickC」を開封する
  • 「M5StickC」にPCからコードを書き込めるように設定する
  • 「M5StickC」のLCDに「Hello World」を映す
  • 「M5StickC」のLCDに画像を映す
  • 「M5StickC」のボタンを押したらLCDに画像が映るようにする
  • 「UnitV AI Camera」を開封する
  • 「UnitV AI Camera」を使えるように設定する
  • 「UnitV AI Camera」で撮影した動画をPCにストリーミングする
  • 「UnitV AI Camera」で顔認識をする
  • 「UnitV AI Camera」で顔認識できたら「M5StickC」のLCDが赤く光るようにする

●購入したもの

●必要なもの

  • 「Arduino IDE」の入ったPC

▲最後に完成した、顔認識した時にLCDが赤く光るというもの

M5StickCを準備する

 まずは、M5StickCを開封して遊んでみる。本体とケーブルが同封されている。

「M5StickC」パッケージ

ケーブルがセットになっている

本体の表面。LCDを備える

本体の裏面

USB type-CでPCに接続したところ

 電源を入れると、ジャイロセンサの値が可視化されてLCDに表示された。電源を入れた段階でどんなことができるのかイメージできるのはありがたい。

 まずはM5StickCにPCからコードを書き込めるように設定する。参考にしたのはこちらのサイトだ。

 初めに、M5Stackのサイトからドライバをインストールする。

 今回使うのはWindowsなので、ページのdriverの項のWindowsからドライバをインストールする。

 インストールしたドライバを実行して、指示通りにインストール。完了したら、M5StickCをPCに接続しなおす。

 次に、ESP32用ボードマネージャをインストールする。

 Arduino IDEを起動して、「ファイル」→「環境設定」を選択。「追加のボードマネージャのURLに「https://dl.espressif.com/dl/package_esp32_index.json」を追加し、「OK」をクリックする。

 「ツール」→「ボード」→「ボードマネージャ」を選択し、「esp32」で検索する。「esp32 by Espressif Systems」をインストールする。

 次に、「M5StickC」のボード設定をする。

 「ツール」→「ボード」→「ESP32 Arduino」→「M5Stick-C」を選択する。

 Windowsの「デバイスマネージャー」からM5StickCの接続されているCOMポート番号を調べて、Arduino IDEのシリアルポートにその番号を設定。

 デバイスマネージャーを見ながらM5StickCを抜き差しして、抜いた時に消えたポートがそれだ。

 最後に、M5StickC用のライブラリをインストールする。

 「ツール」→「ライブラリを管理…」を選択し、「M5StickC」で検索すると、「M5StickC by Yang Zhou」というものが出てくるので、インストールする。

 一応「M5Stack」で検索して、「M5Stack by M5Stack」もインストールした。

 これで準備は整った。

ディスプレーに「Hello World」を表示

 まずは新しいデバイスを触るときの定番、「Hello World」をLCDに表示する。

 「ファイル」→「スケッチ例」→「M5StickC」→「Basics」→「Hello World」を選択すると、「Hello World」のコードが出てくる。

 M5StickCを接続した状態で左上の「→」を押すと、M5StickCにコードがコンパイルされて書き込まれる。

 すると、小さく「Hello World」と表示された。

「Hello World」が表示されたが、小さい

 しかし、小さくて見にくすぎる。
 諸々調整をかけて、見やすい「Hello World」にした。

見やすい「Hello World」

 コードはこちらだ。


#include 

// the setup routine runs once when M5StickC starts up
void setup(){
  // Initialize the M5StickC object
  M5.begin();
  M5.Lcd.setTextSize(2);
  M5.Lcd.setRotation(1);
  // LCD display
  M5.Lcd.print(" Hello World");
}

// the loop routine runs over and over again forever
void loop() {
}

 元のコードからテキストサイズとローテーションを変えることで、見やすくしている。" Hello World"とHのまえにスペースを入れて中央に表示する工夫もした。

ディスプレーに画像を表示

 次は、LCDに画像を表示する。参考にしたのはこちらのサイト

 まずは、表示したい画像をPhotoshopなどでM5StickCのLCDサイズに合わせて縮小する。M5StickCのLCDの解像度は80×160なので、それ以下にするとよい。

 画像をコードに変換するサイトで、縮小した画像を16Bit RGB565 Dump(little endian)に変換する。データ名は「img」のままにした。

 (てか何このサイト、神なの…?)

 出力されたデータをメモ帳などに貼り付け、拡張子を”.h”にして保存する。保存場所はこれから作るArduino IDEの「M5StickC_img.ino」と同じフォルダにする。

 今回の画像は先日開催した個展のロゴ画像なので「keioukairai.h」というファイル名にした。

 Arduino IDEでM5StickCに書き込むコードはこちら。画像の縦横比の関係で、画像表示位置を「5」ずらしてある。


#include 
#include "keioukairai.h"
 
void setup() {
  M5.begin();
  M5.Axp.ScreenBreath(10);          
  M5.Lcd.setRotation(3);            
  M5.Lcd.setSwapBytes(false);       
}
 
void loop() {
  M5.update();
  M5.Lcd.startWrite();
  M5.Lcd.pushImage(0, 5, imgWidth, imgHeight, img);
  M5.Lcd.endWrite();
}

先日開催した個展のロゴ画像が表示された

 次に「M5」と書いてあるボタンを押したらLCDに画像が表示され、ボタンから手を離したら画像が消える、ということをやってみる。
 参考にしたのはこちらのサイト

 「ボタンを押したら●●が起きる」というif文と、先ほどの画像表示のコードを組み合わせる。

 こちらも忘れずに画像コードを同じフォルダに入れる。

 LCDを暗くするときはこちらのサイトを参考にRGBで指定した。

 コードはこちら。


#include 
#include "keioukairai.h"
#define TFT_BLACK       0x0000
 
void setup() {
  M5.begin();
  M5.Axp.ScreenBreath(10);          
  M5.Lcd.setRotation(3);            
  M5.Lcd.setSwapBytes(false);       
}
 
void loop() {
  M5.update();
  M5.Lcd.setCursor(0, 0);
  
  if ( M5.BtnA.wasPressed() ) {
    M5.Lcd.startWrite();
    M5.Lcd.pushImage(0, 5, imgWidth, imgHeight, img);
    M5.Lcd.endWrite();
  }
  if ( M5.BtnA.wasReleased() ) {
    M5.Lcd.fillScreen(TFT_BLACK);
  }
}

 ボタンを押したらLCDに画像が表示されるようにできた。

カテゴリートップへ

この連載の記事

ASCII倶楽部の新着記事

会員専用動画の紹介も!