注目キーワード

【Arduino】「M5Stack」画面制御を極める!(公式ライブラリ)

すけろく
M5Stackも時刻同期や日本語表示までできた。
うまくいっておるな。
げんろく
ああ、「M5Stack」でもノウハウがたまってきている。
すけろく
そういえば、大きな画面を活かしたものを
作ってみたいと思うのだが。
げんろく
わかった。今回はM5Stackのディスプレイにおける
画面制御まわりを見てみるか。
この記事では、Arduino IDEを使ってM5Stackのディスプレイに文字や図形などを表示させる際の、画面制御の方法を確認します。
今回使用するライブラリは、M5社から提供されているM5Stack向けのライブラリを使用します。

各画面表示処理のテスト用プログラムを作って実行してみた結果をまとめていますので、ぜひご覧ください。

 

これからはじめる方にお勧めの参考図書はこちら!

 

M5Stackのディスプレイ制御をおさえよう!

M5Stackにはディスプレイ装置が実装されていて、Arduino IDE用のライブラリの中に「M5.Lcd」クラスが用意されています。ディスプレイへのテキストや図形、画像の描画には「M5.Lcd」クラスを使うと便利です。

では「M5.Lcd」クラスの基本的な関数について押さえていきましょう!

  • プロパティ系
    • 画面の向き
    • 画面サイズ
    • カーソル位置
    • 画面表示色
  • 文字描画系
    • フォント/フォント色/フォントサイズ
    • 文字描画
    • テキスト座標
  • その他の描画系
    • 図形描画

 

画面プロパティ系

画面の向き

M5Stackのディスプレイには以下の4つの向きがあります。使う方向に応じて向きを設定できます。

関数 説明
M5.Lcd.setRotation(value) 画面の向きを指定します。(value=0~3)

 

 

 

画面サイズ

画面サイズを確認することができます。画面の向きを変えると高さと幅が変わります。
画面が縦向きの場合:高さ(240px)、幅(320px)
画面が横向きの場合:高さ(320px)、幅(240px)

関数 説明
M5.Lcd.height() 画面の高さを返します(int16_t)
M5.Lcd.width() 画面の幅を返します。(int16_t)

カーソル位置

関数 説明
M5.Lcd.setCursor(x, y) 画面の中のカーソルの位置を指定します。
M5.Lcd.setCursor(x, y, font) 画面の中のカーソルの位置とフォントを指定します。
※フォントについては、文字描画系で記載します。

画面表示色

関数 説明
M5.Lcd.color565(r, g, b) RGBカラーを2バイト(int16_t)に変換します。
M5.Lcd.fillScreen(color) 画面全体を指定した色で塗りつぶします。
Color=int16_t

ライブラリ内に定義済みの色は次の通りです。色名(文字列)で指定できます。

BLACK DARKGREY ORANGE
NAVY BLUE GREENYELLOW
DARKGREEN GREEN PINK
DARKCYAN CYAN OLIVE
MAROON RED YELLOW
PURPLE MAGENTA
LIGHTGREY WHITE

 

 

文字描画系

フォント/フォントカラー/フォントサイズ

フォントは以下のものが含まれています。フォントカラーは、画面色のものを参照してください。

関数 説明
M5.Lcd.setTextFont(font) フォントを指定します。(font=1~8)
M5.Lcd.setTextColor(Fcolor, Bcolor) フォントの色(Fcolor)および背景色(Bcolor)を指定します。
M5.Lcd.setTextSize(size) フォントサイズ(倍数)を指定します。

フォントの指定値と表示イメージは次の通りです。(高さ240px、幅320px:横向き指定の場合)
フォント自体のピクセル値と後で出てくるフォントサイズは異なります。

表示サイズは(フォント自体の大きさ×フォントサイズ)になります。

1 Adafruit 8ピクセルASCIIフォント FontSize : 1 ~ 5

2 16ピクセルASCIIフォント FontSize : 1 ~ 4

3 未設定 No Image
4 26ピクセルASCIIフォント FontSize : 1 ~ 2

5 未設定 No Image
6 26ピクセル数字フォント FontSize : 1 ~ 2

7 48ピクセル7セグ風フォント FontSize : 1 ~ 2

8 75ピクセル数字フォント FontSize : 1

 

文字描画

関数 説明
M5.Lcd.print(text)
M5.Lcd.println(text)
文字を描画します。(text=String)
printは改行なし、printlnは改行ありになります。

注意が必要なのは、上記のM5.Lcd.print(text)を連続で描画するとカーソル位置は文字描画後の終端座標が次の描画の開始点となります。次に記載するテキスト座標と合わせて表示域を制御する必要があります。

 

テキスト座標

関数 説明
M5.Lcd.setTextDatum(datum) テキストの原点を指定します。次のイメージにある〇番号の位置にそれぞれ指定できます。

 

 

その他描画系

図形描画

関数  表示イメージ 説明
M5.Lcd.drawPixel(x, y, color) ピクセル単位で描画します。
画像は正弦波(Sine Wave)を表示してみました。
M5.Lcd.drawLine(x0, y0, x1, y1, color) 線を描画します。
M5.Lcd.drawLine(0, 68, 240, 68, RED);
M5.Lcd.drawLine(0, 0, 240, 135, BLUE);
M5.Lcd.drawLine(0, 135, 240, 0, GREEN);
M5.Lcd.drawCircle(x0, y0, r, color) 円を描画します。
M5.Lcd.drawCircle(10, 10, 10, RED);
M5.Lcd.drawCircle(50, 30, 30, BLUE);
M5.Lcd.drawCircle(100, 60, 30, GREEN);
M5.Lcd.drawCircle(150, 90, 30, YELLOW);
M5.Lcd.drawCircle(200, 120, 30, PURPLE);
M5.Lcd.drawRect(x, y, w, h, color) 四角形を描画します。
M5.Lcd.drawRect(10, 10, 10, 10, RED);
M5.Lcd.drawRect(50, 30, 20, 20, BLUE);
M5.Lcd.drawRect(100, 40, 30, 30, GREEN);
M5.Lcd.drawRect(150, 60, 40, 40, YELLOW);
M5.Lcd.drawRect(200, 90, 50, 50, PURPLE);
M5.Lcd.drawTriangle(x0, y0, x1, y1, x2, y2, color) 塗りつぶした三角形を描画します。
M5.Lcd.drawTriangle(15, 5, 0, 15, 30, 15, RED);
M5.Lcd.drawTriangle(60, 30, 30, 60, 90, 60, BLUE);
M5.Lcd.drawTriangle(100, 40, 50, 75, 150, 75, GREEN);
M5.Lcd.drawTriangle(150, 60, 100, 100, 240, 100, YELLOW);
M5.Lcd.drawTriangle(200, 80, 150, 125, 300, 125, PURPLE);
M5.Lcd.fillCircle(x0, y0, r, color) 塗りつぶした円を描画します。
M5.Lcd.fillCircle(10, 10, 10, RED);
M5.Lcd.fillCircle(50, 30, 30, BLUE);
M5.Lcd.fillCircle(100, 60, 30, GREEN);
M5.Lcd.fillCircle(150, 90, 30, YELLOW);
M5.Lcd.fillCircle(200, 120, 30, PURPLE);
M5.Lcd.fillRect(x0, y0, x1, y1, color) 塗りつぶした四角形を描画します。
M5.Lcd.fillRect(10, 10, 10, 10, RED);
M5.Lcd.fillRect(50, 30, 20, 20, BLUE);
M5.Lcd.fillRect(100, 40, 30, 30, GREEN);
M5.Lcd.fillRect(150, 60, 30, 30, YELLOW);
M5.Lcd.fillRect(200, 90, 50, 50, PURPLE);
M5.Lcd.fillTriangle(x0, y0, x1, y1, x2, y2, color) 塗りつぶした三角形を描画します。
M5.Lcd.fillTriangle(15, 5, 0, 15, 30, 15, RED);
M5.Lcd.fillTriangle(60, 30, 30, 60, 90, 60, BLUE);
M5.Lcd.fillTriangle(100, 40, 50, 75, 150, 75, GREEN);
M5.Lcd.fillTriangle(150, 60, 100, 100, 240, 100, YELLOW);
M5.Lcd.fillTriangle(200, 80, 150, 125, 300, 125, PURPLE);

 

編集後記

いかがだったでしょうか。

M5Stackの標準で準備されているディスプレイ表示処理をまとめました。

リファレンスとしてご活用いただければと思います。

今後、他のディスプレイ描画ライブラリを使った場合の、プログラムの実行例などをご紹介していきたいと思います。

ご期待ください。

 

今回の記事は以上になります。

最後までご覧いただきありがとうございました。

 

これからはじめる方にお勧めの参考図書はこちら!