うまくいっておるな。
作ってみたいと思うのだが。
画面制御まわりを見てみるか。
各画面表示処理のテスト用プログラムを作って実行してみた結果をまとめていますので、ぜひご覧ください。
これからはじめる方にお勧めの参考図書はこちら!
アイデアをカタチにする! M5Stack入門&実践ガイド | M5Stack&M5StickCではじめるIoT入門 | みんなのM5Stack入門 | ESP32&Arduino 電子工作 プログラミング入門 | みんなのArduino入門 |
確認する | 確認する | 確認する | 確認する | 確認する |
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) | テキストの原点を指定します。次のイメージにある〇番号の位置にそれぞれ指定できます。 |
その他描画系
図形描画
編集後記
いかがだったでしょうか。
M5Stackの標準で準備されているディスプレイ表示処理をまとめました。
リファレンスとしてご活用いただければと思います。
今後、他のディスプレイ描画ライブラリを使った場合の、プログラムの実行例などをご紹介していきたいと思います。
ご期待ください。
今回の記事は以上になります。
最後までご覧いただきありがとうございました。
これからはじめる方にお勧めの参考図書はこちら!