趣味の開発ノート

ITの学習やプログラミング・ノーコードアプリ開発のことなど。

【M5Stack】基本のスケッチ例「HelloWorld」を読み解く

M5Stack開発について理解を深めたくて、Arduino IDEで見られるスケッチ例を読解していこうと思う。

まずは基本の「Hello World」から。

今回はArduinoスケッチの基本構造と、M5Stackで画面に文字表示する基本を抑えたい。

スケッチ例「HelloWorld」

Arduino IDEのメニューから [ファイル] > [スケッチ例] > [M5Stack] > [Basics] > [HelloWorld] を選択。

f:id:massa_potato:20220227121134p:plain

M5Stackに書き込むと、ディスプレイの左上に小さく「Hello World」と表示させるという、シンプルなもの。

f:id:massa_potato:20220227130553j:plain

スケッチを読む

コメントなどは省略している。

▼スケッチ例「Hello World

#include <M5Stack.h>

void setup(){
  M5.begin();
  M5.Power.begin();

  M5.Lcd.print("Hello World");
}

void loop() {

}

Arduinoスケッチの基本構造:setup()とloop()

Arduinoスケッチには、setup()loop()という2つの関数(=処理のまとまり)がある。

  • setup()関数:M5Stackが動き出したときに、最初に一度だけ実行される
  • loop()関数:M5Stackが起動している間、繰り返し実行される

基本的には、setup()関数にマイコンやセンサなどを使うための初期設定を記述して、その後loop()関数でセンサ値を測ったりその値を使ったりする処理を記述する、という流れ。

void setup() {
    // 最初に1度だけ実行したい処理
}

void loop() {
    // 起動の間ずっと繰り返し実行したい処理
}

M5ライブラリを使う

ライブラリのインクルード
M5Stackを操作するためのライブラリ(ファイル)を、最初に#include <M5Stack.h>として取り込んでいる。

これにより、スケッチ内でM5オブジェクトが使えるようになる。

M5オブジェクトの初期化

M5.begin()
setup()関数内で、まずM5.begin()としてM5オブジェクトを初期化して、M5Stackを動かす準備をしている。
公式ドキュメントによると、

シリアルポートバッファクリア、ボーレート設定:115200、LCD初期化、電源管理チップAXP192の初期化を行います。

ということだけど、今の知識じゃあまりよくわからない。
とりあえず「M5Stackを使うならまず初めに記述する」と考えて良いかも。

試しにこの記述をなくしてコンパイル・書き込みをしてみると、エラーは出ずに書き込みが完了するが、画面に何も表示されなかった。

github.com

Powerクラスの初期化

M5.Power.begin()
続いて、M5.Power.begin()として電源に関するクラスの初期化を行っている様子。
これはなくても問題なく動かすことはできる。

どんなケースで必要なんだろう?
サンプルスケッチの英文コメントを眺めると、ざっくり「バッテリーを制御するならこの関数を呼ぶ」ということだろうか?

Power chip connected to gpio21, gpio22, I2C device Set battery charging voltage and current If used battery, please call this function in your project

github.com

ディスプレイに文字を表示する

M5.Lcd.print("Hello World") ディスプレイ操作にはM5.Lcdクラスを利用する。

github.com

ディスプレイへ文字を表示する関数はいろいろある。

単純に文字表示をしたい場合は、print(), printf()を使うと良い。
ただ、この関数だけだと画面上のどこに表示するか指定できないので、setCursor()と組み合わせる必要がある。

M5Stackディスプレイの座標を指定して文字表示をしたい場合は、drawString()が便利かもしれない。

▼ディスプレイに文字表示する関数

関数 書式 解説
print M5.Lcd.print("表示する文字列") 文字列を表示する
printf M5.Lcd.printf("書式を指定した文字列", arg1[, arg2, ...]) 書式(通常のCスタイルフォーマット)を指定して文字列を表示する
drawString M5.Lcd.drawString("文字列", poX, poY, フォント整数) 座標(poX, poY)に指定のフォントで文字列を表示する

ディスプレイに文字を表示するdrawString()の活用

座標の考え方

  • ピクセル単位でposX, posYを指定
  • スクリーンは 横 320 x 高さ 240(ピクセル)なので、この範囲内に収める
  • 左上が原点 (0, 0)、右下が(320, 240)

テキストサイズとpxの関係

  • テキストサイズは1〜7の整数値
  • サイズが1上がるにつれて、7pxずつ増えていく

(参考)
www.1ft-seabass.jp

drawString()関数を活用して、サイズと色を変えながらいくつか書いてみた。
よくセットで使いそうなsetTextColor(), setTextSize()関数についても、最後にまとめた。

▼drawString()を使ったサンプル

#include <M5Stack.h>

void setup(){
  // 初期設定
  M5.begin();

  // 表示1
  M5.Lcd.setTextColor(TFT_WHITE); // 色コードを指定
  M5.Lcd.setTextSize(1); // 1〜7
  M5.Lcd.drawString("Hello World", 0, 0, 1);

  // 表示2
  M5.Lcd.setTextColor(TFT_YELLOW); // 色コードを指定
  M5.Lcd.setTextSize(2); // 1〜7
  M5.Lcd.drawString("Hello World", 0, 8, 1);

  // 表示3
  M5.Lcd.setTextColor(TFT_RED); // 色コードを指定
  M5.Lcd.setTextSize(3); // 1〜7
  M5.Lcd.drawString("Hello World", 0, 22, 1);

  // 表示4
  M5.Lcd.setTextColor(TFT_GREEN); // 色コードを指定
  M5.Lcd.setTextSize(4); // 1〜7
  M5.Lcd.drawString("Hello World", 0, 43, 1);

  // 表示5
  M5.Lcd.setTextColor(TFT_DARKGREEN); // 色コードを指定
  M5.Lcd.setTextSize(5); // 1〜7
  M5.Lcd.drawString("Hello World", 0, 71, 1); 

  // 表示6
  M5.Lcd.setTextColor(TFT_BLUE); // 色コードを指定
  M5.Lcd.setTextSize(6); // 1〜7
  M5.Lcd.drawString("Hello World", 0, 108, 1); 

  // 表示7(縦が画面外に出るので表示されない?)
  M5.Lcd.setTextColor(TFT_BLACK); // 色コードを指定
  M5.Lcd.setTextSize(7); // 1〜7
  M5.Lcd.drawString("Hello World", 0, 150, 1);
}

void loop() {

}

f:id:massa_potato:20220227133530j:plain

  • 縦が画面外にはみ出るものは表示されない様子。
  • drawString()のフォント指定があまりよくわからない。とりあえず「1」を指定しておけば問題ない。

▼テキストの色とサイズを変更する関数

関数 書式 解説
setTextColor M5.Lcd.setTextColor(色コード) 文字の色を引数で指定した色に設定する
setTextSize M5.Lcd.setTextSize(整数) 文字サイズを設定する(指定できる整数は1〜7)

今回のまとめ

Arduino IDEのM5Stackのスケッチ例「Hello World」を見ながら、スケッチの基本構造とM5 Stackで画面に文字表示する基本を見てきた。

Powerオブジェクトやフォントの指定など現段階でわからないところがあったが、それらが必要なスケッチ例が出てきたらそのときにまとめようと思う。