M5Stackも時刻同期や日本語表示までできた。
うまくいっておるな。
うまくいっておるな。
ああ、「M5Stack」でもノウハウがたまってきている。
そういえば、大きな画面を活かしたものを
作ってみたいと思うのだが。
作ってみたいと思うのだが。
わかった。今回はM5Stackのディスプレイにおける
画面制御まわりを見てみるか。
画面制御まわりを見てみるか。
この記事では、Arduino IDEを使ってM5Stackのディスプレイに文字や図形などを表示させる際の、画面制御の方法を確認します。
今回使用するライブラリは、M5社から提供されているM5Stack向けのライブラリを使用します。
各画面表示処理のテスト用プログラムを作って実行してみた結果をまとめていますので、ぜひご覧ください。
これからはじめる方にお勧めの参考図書はこちら！
 |
  |
  |
  |
  |
| アイデアをカタチにする! M5Stack入門&実践ガイド | M5Stack&M5StickCではじめるIoT入門 | みんなのM5Stack入門 | ESP32&Arduino 電子工作 プログラミング入門 | みんなのArduino入門 |
| 確認する | 確認する | 確認する | 確認する | 確認する |
目次
M5Stackのディスプレイ制御をおさえよう！
M5Stackにはディスプレイ装置が実装されていて、Arduino IDE用のライブラリの中に「M5.Lcd」クラスが用意されています。ディスプレイへのテキストや図形、画像の描画には「M5.Lcd」クラスを使うと便利です。
では「M5.Lcd」クラスの基本的な関数について押さえていきましょう！
- プロパティ系
- 画面の向き
- 画面サイズ
- カーソル位置
- 画面表示色
- 文字描画系
- フォント／フォント色／フォントサイズ
- 文字描画
- テキスト座標
- その他の描画系
- 図形描画
画面プロパティ系
画面の向き
M5Stackのディスプレイには以下の４つの向きがあります。使う方向に応じて向きを設定できます。
| 関数 | 説明 |
| 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 ～ ４
|
| 3 | 未設定 | No Image |
| 4 | 26ピクセルASCIIフォント | FontSize : 1 ～ ２
|
| 5 | 未設定 | No Image |
| 6 | 26ピクセル数字フォント | FontSize : 1 ～ ２
|
| 7 | 48ピクセル7セグ風フォント | FontSize : 1 ～ ２
|
| 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の標準で準備されているディスプレイ表示処理をまとめました。
リファレンスとしてご活用いただければと思います。
今後、他のディスプレイ描画ライブラリを使った場合の、プログラムの実行例などをご紹介していきたいと思います。
ご期待ください。
今回の記事は以上になります。
最後までご覧いただきありがとうございました。
これからはじめる方にお勧めの参考図書はこちら！
