うまくいっておるな。
作ってみたいと思うのだが。
画面制御まわりを見てみるか。
各画面表示処理のテスト用プログラムを作って実行してみた結果をまとめていますので、ぜひご覧ください。
これからはじめる方にお勧めの参考図書はこちら！
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の標準で準備されているディスプレイ表示処理をまとめました。
リファレンスとしてご活用いただければと思います。
今後、他のディスプレイ描画ライブラリを使った場合の、プログラムの実行例などをご紹介していきたいと思います。
ご期待ください。
今回の記事は以上になります。
最後までご覧いただきありがとうございました。
これからはじめる方にお勧めの参考図書はこちら！
M5Stack の他の記事はこちらからどうぞ！
すけろく ううーん。 どうしたものか。 げんろく どうした？ 浮かない顔をして。 すけろく ChatGPTをマイコンから使ってみたいのだが、 どうすればよいのかわからなくてな。 げんろく そうか。 ChatGPTもAPIをもっているから、マイコンで文章を作って ChatGPT APIに送信すればよいと思うぞ。 今回はそのあたりを使ってみようか！ 皆さん、「ChatGPT」は活用されていますか？ 私 […]
すけろく 最近メダカの飼育が流行っているらしいの～ げんろく そうだな。日本の水質にも適用能力が高い魚だからな。 我が家でも飼育してみるか。 すけろく そうなると、メダカに快適な環境を整える必要があるな。 げんろく よし。 まずは、メダカが快適に過ごせる水温か確認するぞ！ 皆さん、お家で何か動植物を飼っていますか？ 今回、縁あって、げんろく宅にも「メダカ」さんがやってくることになりました。 メダカ […]
すけろく んーどうしたものか。 げんろく どうした？ 深刻な顔をして。 すけろく M5Stackにプログラムを書き込んだら 起動しなくなってな。 電源ON／OFFでも無理なのだ。 げんろく 書き込んだプログラムか、バッテリーの 過放電か。工場出荷時に戻してみてはどうだ？ この記事では、M5Stackにプログラムを書き込んだ結果、うまく動作しなくなった場合の対処方法を記載します。 ご紹介するのは「工 […]
すけろく んー。 どうしたものか… げんろく どうした？深刻な顔をして。 すけろく 「城の守りを固めるため、敵の接近を検知してみせよ！」 と殿から宿題をもらっての。 げんろく なるほど、それならば人感センサーを使ってみてはどうか？ 敵が勝手に部屋に入ったりするのを検知できるぞ！ この記事では、M5Stackと、「人感センサー（HC-SR501）」を使って、人が近づいた際に検知して反応するプログラム […]
すけろく 前回は、RTC非搭載のM5Stackでの時刻同期を行ったが、 RTC搭載の場合はどうするのかな。 げんろく うむ。 RTCは、M5Stack Core 2 などで搭載されている。 ちょっと、プログラム内容が異なるから、実装してみるか。 この記事では、M5StackをアクセスWi-Fiアクセスポイントに接続し、インターネットの時刻サービス(NTPサーバー）と時刻を同期する方法 […]
すけろく ん～。 げんろく どうした難しい顔をして。 すけろく M5Stackのディスプレイにいろいろ描画しているのだが。 画像がチラチラしてみずらいのだ。 げんろく 描画タイミングとか、メモリを使うとか しておるのか？ すけろく ・・・ げんろく 今回は、そのあたりを見てみようか。 この記事では、Arduino IDEを使ってM5Stackのディスプレイに文字や画像を表示する際のちらつきや、安定 […]
すけろく M5StackでPCファンの回転を制御することはできたが LEDの点灯制御はまだだな。 げんろく そうだったな。 LEDの点灯制御もM5Stackで行うことができるぞ！ 実際に動かしてみよう この記事では、M5StackとLED搭載のパソコン用冷却ファンを使ったLED発光制御の方法について紹介します。 前回は、M5Stackで冷却ファンを使った回転速度制御をおこないましたが、今回はL […]
すけろく M5Stackを使って、モーターをコントロールしてみたいな。 げんろく それならば、モーターコントロールを学べるPC冷却ファン制御というものをやってみるか。 すけろく ん？ パソコン用の冷却ファンをコントロールできるのか？ げんろく 仕組みはモーターと同じだからな。 とにかくやってみよう！ この記事では、M5Stackとパソコン用の冷却ファンを使って回転速度制御を行います。 […]
すけろく 標準ライブラリでの画面描画はできた。 しかし、M5Stack向けのライブラリなので 汎用性がないな。 げんろく たしかに。 M5StickCや他のAruduino機器でも使えるものが必要だな。 すけろく そのようなものがあるのか？ げんろく よし。今回は、汎用的に使えるライブラリを紹介しよう。 lovyan03さんが公開されている「Lovyan_GFX」だ。 この記事では、Arduino […]
すけろく M5Stackも時刻同期や日本語表示までできた。 うまくいっておるな。 げんろく ああ、「M5Stack」でもノウハウがたまってきている。 すけろく そういえば、大きな画面を活かしたものを 作ってみたいと思うのだが。 げんろく わかった。今回はM5Stackのディスプレイにおける 画面制御まわりを見てみるか。 この記事では、Arduino IDEを使ってM5Stackのディスプレイに文字 […]
すけろく M5Stackに英語表記で時計を表示することは 前回の記事で行えたが、日本語は表示できないのか？ げんろく いや、方法はあるぞ。 eFontライブラリをM5Stackで実行できるように 修正して提供してくれているものを使うのだ。 すけろく ぜひ、やってみたいの～ この記事では、Arduino IDEを使ってM5Stackのディスプレイに日本語を表示させるための方法を紹介します。 今回使用 […]
すけろく 前回は、Wi-Fiアクセスポイントに 接続することができた。 次は時刻同期かな。 げんろく うむ。 時刻同期は、全ての基本だからな。 実装してみるか。 この記事では、M5StackをアクセスWi-Fiアクセスポイントに接続し、インターネットの時刻サービス(NTPサーバー）と時刻を同期する方法について紹介します。 M5Stackは、内蔵タイマであるRTCが搭載されているモデル（例：M5St […]
すけろく M5Stackは、Wi-Fi機能がついているのか。 げんろく ESP32のおかげだな、2.4GhzのWi-Fi接続に 対応している。 すけろく では、早速Wi-Fi接続してみよう。 げんろく せっかくなので、microSDから読みだした Wi-Fi アクセスポイント情報を使って 接続してみよう！ この記事では、M5Stackに実装されているWi-Fi機能を使って、Wi-Fiルータに接続す […]
すけろく M5StackとほかのWebサービスなどとの データのやり取りにJSON形式を使いたいのだが。 げんろく うむ。 M5StackでもJSON形式が使えるか試してみるか。 この記事では、Arduino IDEを使ってM5StackのプログラムでJSON形式を取り扱う方法を紹介します。 JSON形式データは、Webサービスやほかのコンピュータとのやり取りにも使用される汎用形式なので、取り扱う […]
すけろく M5Stackは、各モデル共通でmicroSDカードの スロットが搭載されているな！ げんろく そうだな。microSDカードへの読み書きが できるのでログの記録や、データ読み出しからの 画面表示ができる。 すけろく ファイルの中身を画面に表示することができるのか！ それはいいな！ げんろく では、手始めにmicroSDカードに入っている テキストファイルの中身を表示してみよう。 この記 […]
すけろく M5StackをArduino IDEで使ってみたいのだが。 げんろく ライブラリも揃っているしな。 開発する前に、M5Stack用の設定をArduino IDEに 施す必要がある。 すけろく M5Stack開発ボードの登録とライブラリの インストールだな。 げんろく わかってきたではないか。 新しい機器をArduino IDEで使う場合の初期設定だな。 この記事では、Arduino I […]
すけろく 今回はM5Stackを取り上げたいと思うがどうだ？ げんろく なんだ、急にやる気を出して。 どういった風の吹き回しだ？ すけろく M5Stickとは異なり、いろいろな種類のモデルがあって 良さそうだからな。 げんろく 開発用モデルから、実用を意識したモデルまで 様々だからな。 面白い、やってみるか！ 今回の記事では、「M5Stack」を各モデルを比較して、用途に応じた使い方をまとめていま […]