M5Stack M5StickC Plus2動作確認 その1 画面まわり

概要

M5Stack M5StickC Plus2発売

概要技適取得後なかなか発売されていなかったM5StickC Plus2がやっと発売されました。おそらくPlusの在庫が減るのを待っていたと思うのですが、古いのが欲しい人向けに在庫が残っているときに販売しても良かったのになと思います。完全な互...

lang-ship.com

2023.12.16

M5StickC Plus2をM5Unifiedでどの用に使えばいいのかを確認していきたいと思います。

画面の向き

#include <M5Unified.h>

void setup(void) {
  auto cfg = M5.config();
  M5.begin(cfg);
  M5.Display.setTextSize(2);
}

void loop(void) {
  M5.delay(1000);
  static int rotation = -1;

  M5.Display.clear(TFT_RED);
  rotation = (rotation + 1) % 8;
  M5.Display.setRotation(rotation);
  M5.Display.setCursor(0, 0);
  M5.Display.printf("Rotation = %d\n", M5.Display.getRotation());
}

M5.Display.setRotation()で設定可能です。0-7が指定可能で、4以降は左右反転した鏡面指定になります。

Rotation	画面の向き
M5.Display.setRotation(0)
M5.Display.setRotation(1)
M5.Display.setRotation(2)
M5.Display.setRotation(3)
M5.Display.setRotation(4)
M5.Display.setRotation(5)
M5.Display.setRotation(6)
M5.Display.setRotation(7)

画面の大きさ

int width  = M5.Display.width();
int height = M5.Display.height();

上記で取得可能です。基本的には横135ドットの縦240ドットなのですが、画面を回転させることで縦横が入れ替わります。

画面の明るさ

#include <M5Unified.h>

void setup(void) {
  auto cfg = M5.config();
  M5.begin(cfg);
  M5.Display.setTextSize(2);
}

void loop(void) {
  M5.delay(10);
  static int brightness = -1;

  M5.Display.clear(TFT_RED);
  brightness = (brightness + 1) % 256;
  M5.Display.setBrightness(brightness);
  M5.Display.setCursor(0, 0);
  M5.Display.printf("Brightness = %d\n", M5.Display.getBrightness());
  Serial.printf("Brightness = %d\n", M5.Display.getBrightness());
}

M5.Display.setBrightness()で液晶のバックライトの明るさを設定可能です。0-255が設定可能で、通常は255でよいと思います。省電力や深夜に暗くする場合などに設定してください。

またPWMを利用してバックライトの明るさ制御をしていますので、PWMの7チャンネルがこの用途ですでに使われています。他の用途でPWMを利用する場合にはバッティングしないように注意してください。

画面クリア

#include <M5Unified.h>

void setup(void) {
  auto cfg = M5.config();
  M5.begin(cfg);
  M5.Display.setTextSize(2);
}

void loop(void) {
  M5.Display.clear(TFT_RED);
  M5.delay(1000);
  M5.Display.fillScreen(TFT_BLUE);
  M5.delay(1000);
  M5.Display.fillRect(0, 0, M5.Display.width(), M5.Display.height(), TFT_YELLOW);
  M5.delay(1000);
}

いろいろな方法がありますがclear()かfillScreen()を使うのが無難だと思います。色の指定はREDとかも定義されていますがTFT_*の形を使ったほうがおすすめです。

色指定

Color	LovyanGFX	M5Stack	R	G	B	16bit	32bit	LovyanGFX color888
	TFT_BLACK	BLACK	0	0	0	0x0000	0x000000U	lcd.color888(0, 0, 0)
	TFT_NAVY	NAVY	0	0	128	0x000F	0x000080U	lcd.color888(0, 0, 128)
	TFT_DARKGREEN	DARKGREEN	0	128	0	0x03E0	0x008000U	lcd.color888(0, 128, 0)
	TFT_DARKCYAN	DARKCYAN	0	128	128	0x03EF	0x008080U	lcd.color888(0, 128, 128)
	TFT_MAROON	MAROON	128	0	0	0x7800	0x800000U	lcd.color888(128, 0, 0)
	TFT_PURPLE	PURPLE	128	0	128	0x780F	0x800080U	lcd.color888(128, 0, 128)
	TFT_OLIVE	OLIVE	128	128	0	0x7BE0	0x808000U	lcd.color888(128, 128, 0)
	TFT_LIGHTGREY	LIGHTGREY	192	192	192	0xC618	0xC0C0C0U	lcd.color888(192, 192, 192)
	TFT_DARKGREY	DARKGREY	128	128	128	0x7BEF	0x808080U	lcd.color888(128, 128, 128)
	TFT_BLUE	BLUE	0	0	255	0x001F	0x0000FFU	lcd.color888(0, 0, 255)
	TFT_GREEN	GREEN	0	255	0	0x07E0	0x00FF00U	lcd.color888(0, 255, 0)
	TFT_CYAN	CYAN	0	255	255	0x07FF	0x00FFFFU	lcd.color888(0, 255, 255)
	TFT_RED	RED	255	0	0	0xF800	0xFF0000U	lcd.color888(255, 0, 0)
	TFT_MAGENTA	MAGENTA	255	0	255	0xF81F	0xFF00FFU	lcd.color888(255, 0, 255)
	TFT_YELLOW	YELLOW	255	255	0	0xFFE0	0xFFFF00U	lcd.color888(255, 255, 0)
	TFT_WHITE	WHITE	255	255	255	0xFFFF	0xFFFFFFU	lcd.color888(255, 255, 255)
	TFT_ORANGE	ORANGE	255	165	0	0xFD20	0xFFA500U	lcd.color888(255, 165, 0)
	TFT_GREENYELLOW	GREENYELLOW	173	255	47	0xAFE5	0xADFF2FU	lcd.color888(173, 255, 47)
	TFT_PINK	PINK	255	192	203	0xFE19	0xFFC0CBU	lcd.color888(255, 192, 203)
	TFT_BROWN		150	75	0	0x9A60	0x964B00U	lcd.color888(150, 75, 0)
	TFT_GOLD		255	215	0	0xFEA0	0xFFD700U	lcd.color888(255, 215, 0)
	TFT_SILVER		192	192	192	0xC618	0xC0C0C0U	lcd.color888(192, 192, 192)
	TFT_SKYBLUE		135	206	235	0x867D	0x87CEEBU	lcd.color888(135, 206, 235)
	TFT_VIOLET		180	46	226	0x915C	0xB42EE2U	lcd.color888(180, 46, 226)
	TFT_TRANSPARENT		0	39	0	0x0120	0x002700U	lcd.color888(0, 39, 0)

上記のような色が指定できます。

LovyanGFX

lang-ship.com

上記にエクセルファイルとPDFでテキストコピーできる元データがあるので使ってみてください。

テキスト描画

#include <M5Unified.h>

void setup(void) {
  auto cfg = M5.config();
  M5.begin(cfg);

  M5.Display.setCursor(0, 0);
  M5.Display.setFont(&lgfxJapanGothic_24);
  M5.Display.print("日本語描画");
}

void loop(void) {
  M5.delay(1);
}

上記のようにフォントを指定することで日本語も描画可能です。

M5GFX/src/lgfx/v1/lgfx_fonts.hpp at master · m5stack/M5GFX

Graphics library for M5Stack series. Contribute to m5stack/M5GFX development by creating an account on GitHub.

github.com

使えるフォントはどんどん増えているので、なにが使えるのかを調べるのはソースファイルを見るのがおすすめです。とはいっても使うまでわからないと思うので、代表的なフォントを抜き出した表を作成しました。

フォント指定

フォントデータは利用したものだけフラッシュのサイズを消費します。たくさん指定すると結構な容量のなるので注意してください。

フォント名	サンプル画像
&Font0
&Font2
&Font4
&Font6
&Font7
&Font8
&lgfxJapanGothic_8 &lgfxJapanGothic_12 &lgfxJapanGothic_16 &lgfxJapanGothic_20 &lgfxJapanGothic_24 &lgfxJapanGothic_28 &lgfxJapanGothic_36 &lgfxJapanGothic_40
&lgfxJapanGothicP_8 &lgfxJapanGothicP_12 &lgfxJapanGothicP_16 &lgfxJapanGothicP_20 &lgfxJapanGothicP_24 &lgfxJapanGothicP_28 &lgfxJapanGothicP_32 &lgfxJapanGothicP_36 &lgfxJapanGothicP_40
&lgfxJapanMincho_8 &lgfxJapanMincho_12 &lgfxJapanMincho_16 &lgfxJapanMincho_20 &lgfxJapanMincho_24 &lgfxJapanMincho_28 &lgfxJapanMincho_32 &lgfxJapanMincho_36 &lgfxJapanMincho_40
&lgfxJapanMinchoP_8 &lgfxJapanMinchoP_12 &lgfxJapanMinchoP_16 &lgfxJapanMinchoP_20 &lgfxJapanMinchoP_24 &lgfxJapanMinchoP_28 &lgfxJapanMinchoP_32 &lgfxJapanMinchoP_36 &lgfxJapanMinchoP_40
&efontJA_10 &efontJA_12 &efontJA_14 &efontJA_16 &efontJA_24

日本語フォントはサイズ別に種類が違い、１文字でも描画するとすべての文字が読み込まれるので注意してください。

フォントサイズ

// 2倍にする
M5.Display.setTextSize(2);

// 0.5倍にする
M5.Display.setTextSize(0.5);

// 横2倍、縦1.5倍にする
M5.Display.setTextSize(2, 1.5);

フォントサイズはもとの文字データを拡大して描画するための機能です。少数点指定もできますので、微妙なサイズに調整して描画が可能です。日本語フォントなどは容量が大きいので、ちょっとしたことはフォントサイズにて変更してあげることでフラッシュの容量を節約することができます。

描画位置の指定

// カーソルとprint系関数で描画する基本テキスト描画
M5.Display.setCursor(0, 0);
M5.Display.print("改行無し");
M5.Display.println("自動改行");
M5.Display.printf("printf構文\n");

// 歴史的経緯で残っているカーソルなし描画テキスト関数
M5.Display.drawString(posX, posY, "カーソル無し", &AsciiFont8x16);

ちょっとしたことだとdrawString()関数は非常に便利だと思います。カーソルがないので画面外に出た場合には文字が表示されません。

printf系関数はカーソル位置があるので、画面外にでると自動で折り返してくれます。

文字色の指定

// 背景を黒で塗りつぶしてから、文字を白で描画
M5.Display.setTextColor(TFT_WHITE, TFT_BLACK);

// 背景はそのままで、文字を赤で描画
M5.Display.setTextColor(TFT_RED);

デフォルトは黒背景で塗りつぶしてから文字を白く描画をします。1色だけ指定すると背景の塗りつぶしを行いませんので、背景に画像などがある場合には便利です。

逆に前回の文字を上書きしたいときには背景塗りつぶしを指定して、printf(“%8d”, cnt);みたいに文字長を指定するときれいに前回の文字を塗りつぶしてくれます。

ちなみに背景色と文字色を同じ色にすると、塗りつぶしがなくなる実装のようです。

その他の機能

LovyanGFX入門 その2 フォント描画系

概要前回は基本描画系を調べましたが、今回はフォント系です。このへんは中に入っているスケッチ例を見れば詳しく書いてあるのですが、個人的におすすめする方法を中心に書いてあります。上記にまとめるときに使ったデータがあります。フォント描画系の概要フ...

lang-ship.com

2020.10.06

上記にもう少し丁寧に書いてあります。少し古いですがM5UnifiedのもとになっているLovyanGFXの解説となります。

図形描画

よくある描画系は揃ってあります。

LovyanGFX入門 その1 基本描画系

概要らびやんさん作のLovyanGFXを、自作M5Liteライブラリなどで利用させていただいていますが、描画系の解説用として、LovyanGFXの使い方を確認しなおしたいと思います。上記にまとめた資料が置いてあります。LovyanGFXとは...

lang-ship.com

2020.09.30

上記の記事が参考になるはずです。

M5.Display.startWrite();
M5.Display.fillRect(0, 0, M5.Display.width(), M5.Display.height(), TFT_YELLOW);
M5.Display.endWrite();

描画は基本的にstartWrite()とendWrite()関数の間に行うと早く描画できます。描画前の初期化をStartとEndでスキップすることできます。

画像描画

LovyanGFX入門 その5 画像描画

概要前回は仕組みの部分を紹介しましたが、今回は画像を表示する方法を紹介したいと思います。複数の方法がありますので、状況に応じて使い分けてください。画像データの準備横72、縦60ドットの画像を適当に作り、これを表示してみたいと思います。一度J...

lang-ship.com

2020.10.28

ちょっと面倒です。SDカードなどがないのでプログラムの中に画像ファイルを埋め込んで、そのデータを描画することになります。上記の記事を参考にしてみてください。

まとめ

画面まわりはM5Unifiedがあるので、実際のところ他の機種とほとんど変わらないと思います。とはいえ、あまり情報がないので今後もう少しまとめていきたいと思います。