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

概要

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_*の形を使ったほうがおすすめです。

色指定

ColorLovyanGFXM5StackRGB16bit32bitLovyanGFX color888
TFT_BLACKBLACK0000x00000x000000Ulcd.color888(0, 0, 0)
TFT_NAVYNAVY001280x000F0x000080Ulcd.color888(0, 0, 128)
TFT_DARKGREENDARKGREEN012800x03E00x008000Ulcd.color888(0, 128, 0)
TFT_DARKCYANDARKCYAN01281280x03EF0x008080Ulcd.color888(0, 128, 128)
TFT_MAROONMAROON128000x78000x800000Ulcd.color888(128, 0, 0)
TFT_PURPLEPURPLE12801280x780F0x800080Ulcd.color888(128, 0, 128)
TFT_OLIVEOLIVE12812800x7BE00x808000Ulcd.color888(128, 128, 0)
TFT_LIGHTGREYLIGHTGREY1921921920xC6180xC0C0C0Ulcd.color888(192, 192, 192)
TFT_DARKGREYDARKGREY1281281280x7BEF0x808080Ulcd.color888(128, 128, 128)
TFT_BLUEBLUE002550x001F0x0000FFUlcd.color888(0, 0, 255)
TFT_GREENGREEN025500x07E00x00FF00Ulcd.color888(0, 255, 0)
TFT_CYANCYAN02552550x07FF0x00FFFFUlcd.color888(0, 255, 255)
TFT_REDRED255000xF8000xFF0000Ulcd.color888(255, 0, 0)
TFT_MAGENTAMAGENTA25502550xF81F0xFF00FFUlcd.color888(255, 0, 255)
TFT_YELLOWYELLOW25525500xFFE00xFFFF00Ulcd.color888(255, 255, 0)
TFT_WHITEWHITE2552552550xFFFF0xFFFFFFUlcd.color888(255, 255, 255)
TFT_ORANGEORANGE25516500xFD200xFFA500Ulcd.color888(255, 165, 0)
TFT_GREENYELLOWGREENYELLOW173255470xAFE50xADFF2FUlcd.color888(173, 255, 47)
TFT_PINKPINK2551922030xFE190xFFC0CBUlcd.color888(255, 192, 203)
TFT_BROWN1507500x9A600x964B00Ulcd.color888(150, 75, 0)
TFT_GOLD25521500xFEA00xFFD700Ulcd.color888(255, 215, 0)
TFT_SILVER1921921920xC6180xC0C0C0Ulcd.color888(192, 192, 192)
TFT_SKYBLUE1352062350x867D0x87CEEBUlcd.color888(135, 206, 235)
TFT_VIOLET180462260x915C0xB42EE2Ulcd.color888(180, 46, 226)
TFT_TRANSPARENT03900x01200x002700Ulcd.color888(0, 39, 0)

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

LovyanGFX

上記にエクセルファイルと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);
}

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

https://github.com/m5stack/M5GFX/blob/master/src/lgfx/v1/lgfx_fonts.hpp

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

フォント指定

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

フォント名サンプル画像
&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

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

フォントサイズ

// 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);みたいに文字長を指定するときれいに前回の文字を塗りつぶしてくれます。

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

その他の機能

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

図形描画

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

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

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

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

画像描画

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

まとめ

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

コメント