はじめに

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

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

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

1．必要なもの

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

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を表示しています。想定通りの動作です。