M5StickCと人感センサーで画像表示

はじめに

前回M5StickCと人感センサーで人を感知すると液晶ディスプレイに文字を表示するスケッチを行いました。

今回は画像を作成して表示させます。

  1. 必要なもの
  2. 画像の作成
  3. スケッチ
  4. 実行

1．必要なもの

前回同様、M5StickCと人感センサーです。

番号

商品名

価格

参考販売店

1

M5StickC

1980円（セット）

1650円（本体のみ）

千石電商SwitchSience

2

M5StickC PIR Hat（AS312搭載）

380円

363円

千石電商

SwitchSience

 

2．画像の作成

まず参考となるスケッチ例を実行してみます。

[ファイル]⇒[スケッチ例]⇒[M5StickC]⇒[Advanced]⇒[Display]⇒[drawXBitmap]を開きます。

矢印マークをクリックしてマイコンボードに書き込みます。実行すると液晶ディスプレイ上でロゴが移動します。

ロゴの画像を表示する記述はdrawXBitmapの部分です。この部分を前回作成した人感センサーのスケッチに追加して、画像を表示します。

  • M5.Lcd.drawXBitmap(x, y, logo, logoWidth, logoHeight, TFT_WHITE);

    引数は先頭からX座標、Y座標、画像ファイル、幅(px)、高さ(px)、色となります。

    画像はインクルードされているxbm.hで指定します。xbm.hは隣のタブにあります。”logo[]=・・・”の部分が画像の情報になります。画像ファイルはXBM（XbitMap）というものを使用します。(モノクロの画像です）

 

以下の「Convert Image to XBM]で通常の画像ファイルをXBMファイルに変換できます。

画像編集ソフトでも変換可能です。ここではGIMPを使用して画像を作成してみます。

https://www.gimp.org/downloads　に移動してWindows10の場合は右側のオレンジをクリックしてダウンロードします。

GIMPをインストールできたら起動し[ファイル]⇒[新しい画像]を選択します。M5StickCの液晶ディスプレイのサイズは160×80(ピクセル)なのでそれよりも小さいキャンパスサイズを指定します。ここでは80×80にしています。

キャンパスに画像を作成できたら[ファイル]⇒[名前を付けてエクスポート]を選択します。

名前(N):の部分に適当なネーミングを記入します。

次に左下の[ファイル形式の選択]の右側の　⊞　をクリックして展開します。

「Xビットマップイメージ」を選択して右下の[エクスポート]をクリックします。

XXX.xbmというファイルができたら成功です。

今回使用用に作成した画像（cowとface)

 

3．スケッチ

スケッチ例です。PIRスケッチを元に作成しています。

次に画像ファイルを挿入します。

右上の▼をクリックして、新規タブを選択します。

下に「新規ファイルの名前」と表示されますので、ヘッダーファイルとして作成するxbm1.hと記入しOKを選択します。（ヘッダファイルの名前は任意ですが、メインプログラムで#include “XXX.h”と同じ名前に設定します。）

「xbm2.h」も同様に追加します。（空のファイルができました）

 

xbm1.hの中身について説明します。

RAMにデータを保存するためのpgmspace.hをインクルードします。(なくても問題なく動作しますが、Arduinoのバージョンによっては必要かも）

メインプログラムで使用している画像サイズをdefineで定義します。

次に画像ファイル情報を記入します。

PROGMEMの後に、型と配列名を記載します。配列名は何でもいいですが、メインプログラムでcowとfaceにしているのでこの名前で指定しています。

配列の中身はXBMファイルの中身をはりつければいいです。XBM画像ファイルをテキストエディタで開くと配列の中身が記述されていますのでそれを張り付ければ完了です。

xbm2.hも同様に設定します。defineは定義済みですのでここでは必要ないです。

 

ソースコードの内容

  • #include “xbm1.h”  #include “xbm2.h”
    作成したxbm1.hとxbm2.hファイルをインクルードします。
  • M5.begin()
    M5の初期化を行います。
  • M5.Lcd.setRotation(3)
    液晶ディスプレイを回転させます。3を指定するとM5StickCの左側が上になり横長に利用できます。
  • M5.Lcd.fillScreen(BLACK)
    液晶ディスプレイを黒く塗りつぶします。（BLACKはTFT_BLACKでも可）
  • pinMode(36,INPUT_PULLUP)
    36番ピンをプルアップ(1)で初期化します。
  • check = digitalRead(36)
    36番ピンの情報をリードします。(センサーに反応した場合は1、そうでない場合は0となります。)
  • int x = random(M5.Lcd.width() – D_Width_80)
    X座標は通常時はランダム値にし、画像がランダムな場所に表示されるようにしました。
  • M5.Lcd.drawXBitmap(x, y, cow, D_Width_80, D_Height_80, TFT_WHITE,TFT_BLACK)
    画像を表示します。画像の色は白、バックカラーは黒にしています。
  • delay(500)
    プログラムを指定した時間だけ止めます。単位はミリ秒です。
  • M5.Lcd.drawXBitmap(x, y, cow, D_Width_80, D_Height_80, TFT_BLACK,TFT_BLACK)
    色もバックカラーも黒にして画像を消しています。

 

参考までにxbm1.hとxbm2.hの内容は以下となります。

xbm2.h

 

PROGMEMについて

Arduinoでは、変数の値はSRAMに保存されます。なので、一度に大量の数値を変数で扱おうとすると、SRAMを圧迫して動作が不安定になります。これは、ちょっとしたスケッチを書くのであれば、全然気にならないんですが、ビットマップや多量の文章なんかを扱おうとすると、問題になってきます。

そこで、そういった大量の数値群は、比較的大きいスケッチ用記憶領域「フラッシュメモリ」へさけておき、必要な時に必要な分だけ「SRAM」に読み込んで負担を軽くする、という機能があります。それがPROGMEMです。

4.実行

実行するとセンサー無反応のときはcow、反応時はfaceを表示しています。想定通りの動作です。

M5StickCで人感センサー

 

はじめに

前回はM5StickCを使用してHello Worldを行いました。

今回はM5SticCを使用して人感センサーを使用します。

  1. 用意するもの
  2. Arduinoにスケッチ
  3. 実行
  4. スケッチの書き換え

 

1．用意するもの

用意するものは以下となります。

番号

商品名

価格

参考販売店

1

M5StickC

1980円（セット）

1650円（本体のみ）

千石電商SwitchSience

2

M5StickC PIR Hat（AS312搭載）

380円

363円

千石電商

SwitchSience

M5StickC PIR HatはM5StickCに接続できる人感センサー（赤外線センサー）です。赤外線が検出されると2秒間High(1)になります。

 

2．Arduinoのスケッチ

arduino.exeを起動します。

[ファイル]⇒[スケッチ例]⇒[M5StickC]⇒[HAT]⇒[PIR]の順番でスケッチを開きます。

  • M5.begin()
    M5StickCをのLCD（液晶ディスプレイ）を初期化します。
  • M5.LCD.setRotation(3)
    画面を3回転します。（引数×90度）
    3回回転させるとM5StickCの左側が上になり、画面を横長に使用できます。
  • M5.Lcd.fillScreen(BLACK)
    画面を黒に塗りつぶします。REDにすると赤にWHITEにすると白と、変更できます。
  • M5.Lcd.println(“PIR TEST”)
    PIR TESTを表示します。print文が改行無しで表示、plintlnは表示＋改行となります。
  • M5.Lcd.setCursor(60, 20, 4)
    カーソルの位置情報を指定します。左からX座標、Y座標、フォントサイズです。
  • M5.Lcd.println(digitalRead(36))
    digitalRead(36)で36番ピンからデータをリードします。値はHigh（1）またはLow(0)となります。printlnで取得した値を表示します。
    36番ピンは下の図のG36 と記載されている部分になります。

 

3.実行

M5StickCにセンサーを取り付けます。

M5StickCをPCに接続してスケッチを書き込みます。

近づくと1になり、離れると0となります。

 

4．スケッチの書き換え

背景色を変更する場合は、M5.Lcd.fillScreen(色を指定）で設定できます。

M5.Lcd.setTextColor(色1,色2)を指定することで、文字の色と文字の色の背景色を設定できます。

変更したスケッチと実行内容は以下となります。GREENYELLOWで黄緑に変更しました。文字の色は赤と黒にしました。

センサーの反応がない時にOK表示、反応した場合にあNGと表示するようにしました。

M5StickCでHello World

はじめに

M5StickCを使用して「Hello World]を表示します。

  1. 用意するもの
  2. 開発環境
  3. M5StickCについて
  4. プログラムの実行　

 

1.用意するもの

必要なものは以下の通りです。

番号 商品名 価格 参考販売店
1 M5StickC

税込1980円

(本体のみなら1650円）

 SwitchSience

 

2.開発環境

Windows10での実行方法です。

2.1Arduino IDEのインストール

Arduino IDEをインストールします。Windows ZIP fileを選択するとZIPファイルがダウンロードされます。任意のフォルダでZIPファイルを解凍し、arduino.exeをクリックしするとArduino IDEが起動します。

 

「このアプリの機能のいくつかがWindows Defenderファイアウォールでブロックされています。」とセキュリティ警告画面がでますので、「アクセスを許可する」をクリックします。

 

2.2USBドライバーのインストール

USBドライバーをインストールします。

以下のURLからCP210x_VCP_Windows.zipをダウンロードします。

https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/drivers/CP210x_VCP_Windows.zip

ファイルを解凍し、CP210xVCPInstaller_x64_v6.7.0.0.exe(64bitCPU用）もしくはCP210xVCPInstaller_x86_v6.7.0.0.exe(32bitCPU用）を実行します。

[コントロールパネル]⇒[システムとセキュリティ]⇒[システム]の「システムの種類：」を見れば32bitか64bitの確認ができます。

Macユーザの場合はCP210x_VCP_windos.zipがCP210x_VCP_MacOS.zipになります。

 

exeファイルをダブルクリックで実行、もしくは右クリックから「管理者として実行」で実行します。「次へ」「同意します」「つぎへ」でインストールは完了します。

 

2.3ESP32のボードマネージャのインストール

arduino.exeを起動します。

Arduinoを起動したら[ファイル]⇒[環境設定]を選択します。

「追加のボードマネージャのURL：」にESP32のボードマネージャのURLを入力します。

ESP32ボードマネージャURL: https://dl.espressif.com/dl/package_esp32_index.json

次に[ツール]⇒[ボード:”Arduino Uno”]⇒[ボードマネージャ]を選択し開きます。



esp32と入力すると、候補があらわれるのでインストールをクリックします



2.4M5StickC用のライブラリインストール

[スケッチ]⇒[ライブラリをインクルード]⇒[ライブラリを管理]を選択します。

検索にm5stick coreと入力すると候補があらわれます。「M5Stick Core development kit」を選択してインストールします。

 

参考1：Arduino IDEが起動しない場合の対処方法について

起動しない場合の解決例が２つあります。

Arduinoが起動しない場合の対処方法　その1

以下の2つのファイルを削除したのち、arduino.exeを実行します。

C:\Users\ユーザ名\AppData\Local\Arduino15\package_index.json

C:\Users\ユーザ名\AppData\Local\Arduino15\cache

arduinoが起動しない場合の対処方法　その2

arduino.exeファイルと同じフォルダにportableという名前のフォルダを作成したのち、arduino.exeを実行します。

 

参考2：ESP32について

ESP32はESPRESSIFという会社が製造しているマイコンボードです。

GitHubで公開している資料は以下にあります。

公開している資料：https://github.com/espressif/arduino-esp32/blob/master/docs/arduino-ide/boards_manager.md

 

3．M5StickCについて

M5StickCは、下の写真の右のように4.8 x 2.4 x 1.4cmのスティック状の小型端末です。MPUはESP32と同じアーキテクチャのESP32-picoが使われています。80 x 160ピクセルのカラー液晶画面、ボタン3個、LED、赤外線送信機、マイク、6軸加速度・ジャイロセンサなどが搭載されています。プログラムはArduino IDEか、UIFlowという開発環境を使ってBlocklyまたはMicroPythonで開発します。

 

SwitchSienceでセットになっているタイプをでは以下のようなものがひとまとめになっています。

 

  • 1 x M5StickC
  • 1 x 腕時計マウンタ
  • 1 x ネジ固定用マウンタ
  • 1 x LEGO互換マウンタ
  • 1 x USB Type-Cケーブル

M5StickCのアップグレード版にM5StickC Plusがあります。こちらはディスプレイが18.7%拡大していますが、2200円でUSB Type-Cケーブルが付属しません。本体のみのようです。

 

4．プログラムの実行

Arduinoを起動します。[ツール]⇒[ボード:”Arduino Uno”]⇒[ESP32 Arduino]⇒[M5Stick-C]を選択します。

次に[ファイル]⇒[スケッチ例]⇒[M5Stick]⇒[Basics]⇒[HelloWorld]を選択してスケッチを開きます。

M5StickCとUSBTypCのケーブルをつなぎます。USBのほうはArduinoが設定済みのPCに接続します。接続すると、シリアルポートが設定します。[ツール]⇒[シリアルポート]⇒[COM??]を選びます。(??は数字です）

右向きの矢印（マイコンボードに書き込む）をクリックします。

Hello Worldが表示されました。