【Arduino】ディスプレイ付きマイコン「M5StickC Plus」画面制御を極める！（Adafruit_GFXライブラリ）

2022年6月2日
2022年6月28日
Arduino, 統合開発環境（IDE), プログラミング, INSIDE TECH, M5StickC Plus

M5StickC Plus

すけろく

標準ライブラリでの画面描画はできた。
しかし、M5StickC Plus向けのライブラリなので
汎用性がないな。

げんろく

たしかに。
M5Stackや他のAruduino機器でも使えるものが必要だな。

すけろく

そのようなものがあるのか？

げんろく

よし。今回は、汎用的に使えるライブラリを紹介しよう。
Adafruit社が公開している「Adafruit_GFX」だ。

この記事では、Arduino IDEを使ってM5StickC Plusのディスプレイに時刻や日付を表示させるため、画面制御の方法を確認します。

今回は、Adafruit社から提供されているArduino IDE向けのライブラリ「Adafruit GFX Library」を使用します。

Arduino IDE共通で使用できるので、いろんなArduino対応機器で同じソースを使いたい場合に有効です。
※ただし、表示させるディスプレイによって必要な設定が異なるのでそのあたりはチューニングが必要です。

M5社の「M5StickC Plus」標準ライブラリを使った画面制御は、次の過去記事で紹介していますのでどうぞ。

【Arduino】ディスプレイ付きマイコン「M5StickC Plus」日本語表示の方法！（efont ライブラリ）

すけろく M5StickC Plusに英語を表示することは画面制御の記事で行えたが、日本語は表示できないのか？げんろくいや、方法はあるぞ。 eFontライブラリをM5StickC Plusで実[…]

今回使用するマイコンはこちら！

M5StickC Plus
画面付きで小型のマイコンです。旧版のM5StickCから、ディスプレイサイズ、バッテリ容量が変更になっています。ブザーも実装されました。通信（WiFi/Bluetooth）機能、6軸加速度センサーも搭載されています。
Aruduino で開発できます。Amazonで確認

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


アイデアをカタチにする! M5Stack入門&実践ガイド	M5Stack&M5StickCではじめるIoT入門	みんなのM5Stack入門	ESP32&Arduino 電子工作プログラミング入門	みんなのArduino入門
確認する	確認する	確認する	確認する	確認する

今回の記事では、「Adafruit GFX Library」を「M5StackC Plus」ディスプレイで使用するための設定と、描画を行う各関数を紹介します。

また、今回の記事の最後でご紹介するプログラムを書き込むことで、M5StickC Plusは時計になります。

完成した際のイメージはこんな感じです。

皆さんも挑戦してみてくださいね！

1 M5StickC PlusでAdafruit GFX Libraryを使うための設定
2 Adafruit GFXのディスプレイ制御をおさえよう！
3 M5StickC Plusの画面に時計を表示させよう
4 編集後記

M5StickC PlusでAdafruit GFX Libraryを使うための設定

今回使用する「Adafruit GFX Library」を「M5StickC Plus」で使用するためには、次の３つの設定が必要となります。

ディスプレイ対応ライブラリの読み込み
AdafruitGFXライブラリの読み込み
ディスプレイ接続GPIOの指定とインスタンス生成

ディスプレイ対応ライブラリの読み込み

「M5StickC Plus」のディスプレイは、「ST7789」というコントローラを使っています。このコントローラは、他のディスプレイ装置でも使われる一般的なものです。

「AdafruitGFX」から、「ST7789」を制御する場合は、「Adafruit_ST7789.h」をプログラム内で読み込む必要があります。

そのため、Arduino IDEのライブラリ管理で、「Adafruit ST7735 and ST7789 Library」というライブラリをインストールする必要があります。

事前にインストールしておきましょう！

AdafruitGFXライブラリの読み込み

「Adafruit GFX Library」を使用するためには、ライブラリとしてArduino IDEにインストールする必要があります。

そのため、Arduino IDEのライブラリ管理で、「Adafruit GFX Library」というライブラリをインストールする必要があります。

事前にインストールしておきましょう！

ライブラリのインストールは、次の記事で紹介しています。

【Arduino】ライブラリの管理

Arduino IDE」では、使用する機能やセンサー、ボードを使用するプログラムで使用できる有効なライブラリが公開されています。ライブラリを使用すると、効率的かつ品質を確保したプログラミングが可能です。ここでは、Ardu[…]

ディスプレイ接続GPIO指定とインスタンス生成

「M5StickC Plus」のディスプレイ制御を行うためにプログラム内で、以下のように定義します。

#include "SPI.h"                           // SPIライブラリ
#include <M5StickCPlus.h>       // M5StickC 用ライブラ
#include <Adafruit_GFX.h>        // Adafruit GFX Library
#include <Adafruit_ST7789.h>   // ST7789ライブラリ

// ESP32-PICO （M5StickCPlus） TFT接続GPIO
#define TFT_CS 5 
#define TFT_DC 23 
#define TFT_RST 18

Adafruit_ST7789 tft = Adafruit_ST7789(TFT_CS, TFT_DC, TFT_RST);  // ←インスタンス生成「tft」

void setup() {
   tft.init(135, 240);
   tft.setRotation(3)       // ←生成したインスタンス「tft」の各関数を呼び出して使う
}

Adafruit GFXのディスプレイ制御をおさえよう！

「Adafruit GFX Library」でのディスプレイ制御について押さえていきます。

基本的な関数について押さえていきましょう！

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

画面プロパティ系

画面の向き

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

関数	説明
setRotation(value)	画面の向きを指定します。(value=0～3）
getRotation()	画面の向きを取得します。

画面サイズ

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

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

カーソル位置

関数	説明
setCursor(x, y)	画面の中のカーソルの位置を指定します。
getCursorX()	画面の中のカーソルのX軸位置を取得します。
getCursorY()	画面の中のカーソルのY軸位置を取得します。

画面表示色

関数	説明
fillScreen(uint16_t Color)	画面全体を指定した色で塗りつぶします。 Color＝int16_t

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

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

文字描画系

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

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

関数	説明
setFont(const GFXfont *f )	フォントを指定します。※後述
setTextColor(Fcolor)	フォントの色(Fcolor)を指定します。
.setTextSize(size)	フォントサイズ（倍数）を指定します。

ライブラリには複数のフォントが登録されています。

フォントの指定値と表示イメージは次の通りです。（高さ135px、幅240px：横向き指定の場合）

フォントは、次の表の12pt(ポイント)フォントとそのフォントのピクセル違い（9pt、12pt、18pt、24pt）があります。

※ピクセルで考える場合は、上記のポイントをピクセルに変換するする必要があります。

フォント名	表示
FreeMono12pt7b
FreeMonoBold12pt7b
FreeMonoBoldOblique12pt7b
FreeMonoOblique12pt7b
FreeSans12pt7b
FreeSansBold12pt7b
FreeSansBoldOblique12pt7b
FreeSansOblique12pt7b
FreeSerif12pt7b
FreeSerifBold12pt7b
FreeSerifBoldItalic12pt7b
FreeSerifItalic12pt7b

文字描画

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

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

テキスト座標

テキスト座標は、次のポイントにおける⑥が基準となります。

カーソル位置を指定する際には注意が必要です。

（例：setCursor(10,10)で指定した場合、⑥の位置が(10,10)になります。）

その他描画系

図形描画

関数	説明
drawPixel(x, y, color)	ピクセル単位で描画します。
drawLine(x0, y0, x1, y1, color)	線を描画します。 drawLine(0, 0, 240, 135, Display_Color_Red); drawLine(0, 67, 240, 67, Display_Color_Green); drawLine(0, 135, 240, 0, Display_Color_Blue);
drawFastHLine(x, y, w, color)	水平線を描画します。 drawFastHLine(50, 30, 140, Display_Color_RED); drawFastHLine(50, 60, 140, Display_Color_RED); drawFastHLine(50, 90, 140, Display_Color_RED); drawFastHLine(50, 120, 140, Display_Color_RED)
drawFastVLine(x, y, h, color)	垂直線を描画します。 drawFastVLine(50, 20, 100, Display_Color_RED); drawFastVLine(100, 20, 100, Display_Color_RED); drawFastVLine(150, 20, 100, Display_Color_RED); drawFastVLine(200, 20, 100, Display_Color_RED)
drawCircle(x0, y0, r, color)	円を描画します。 drawCircle(20, 75, 10, Display_Color_Green); drawCircle(70, 75, 30, Display_Color_Green); drawCircle(160, 75, 50, Display_Color_Green);
fillCircle(x0, y0, r, color)	塗りつぶした円を描画します。 fillCircle(20, 75, 10, Display_Color_Green); fillCircle(70, 75, 30, Display_Color_Green); fillCircle(160, 75, 50, Display_Color_Green);
drawRect(x, y, w, h, color)	四角形を描画します。 drawRect(20, 60, 20, 20, Display_Color_Red); drawRect(50, 50, 20, 40, Display_Color_Red); drawRect(80, 40, 20, 60, Display_Color_Red); drawRect(110, 30, 20, 80,Display_Color_Red); drawRect(140, 40, 20, 60,Display_Color_Red); drawRect(170, 50, 20, 40,Display_Color_Red); drawRect(200, 60, 20, 20,Display_Color_Red);
fillRect(x0, y0, x1, y1, color)	塗りつぶした四角形を描画します。 fillRect(20, 60, 20, 20, Display_Color_Red); fillRect(50, 50, 20, 40, Display_Color_Red); fillRect(80, 40, 20, 60, Display_Color_Red); fillRect(110, 30, 20, 80,Display_Color_Red); fillRect(140, 40, 20, 60,Display_Color_Red); fillRect(170, 50, 20, 40,Display_Color_Red); fillRect(200, 60, 20, 20,Display_Color_Red);
drawTriangle(x0, y0, x1, y1, x2, y2, color);	三角形を描画します。 drawTriangle(20, 65, 40, 65, 30, 35, Display_Color_BLUE); drawTriangle(20, 65, 40, 65, 30, 95, Display_Color_RED); drawTriangle(50, 65, 70, 65, 60, 35, Display_Color_GREEN); drawTriangle(50, 65, 70, 65, 60, 95, Display_Color_GREEN);
fillTriangle(x0, y0, x1, y1, x2, y2, color)	塗りつぶした三角形を描画します。 fillTriangle(20, 65, 40, 65, 30, 35, Display_Color_BLUE); fillTriangle(20, 65, 40, 65, 30, 95, Display_Color_RED); fillTriangle(50, 65, 70, 65, 60, 35, Display_Color_GREEN); fillTriangle(50, 65, 70, 65, 60, 95, Display_Color_GREEN);
drawRoundRect(x0, y0, x1, y1, rad, Color)	drawRoundRect(20, 60, 20, 20, 45, Display_Color_RED); drawRoundRect(50, 50, 20, 40, 45, Display_Color_RED); drawRoundRect(80, 40, 20, 60, 45, Display_Color_RED); drawRoundRect(110, 30, 20, 80,45, Display_Color_RED); drawRoundRect(140, 40, 20, 60,45, Display_Color_RED); drawRoundRect(170, 50, 20, 40,45, Display_Color_RED); drawRoundRect(200, 60, 20, 20,45, Display_Color_RED);
fillRoundRect(x0, y0, x1, y1, rad, Color)	fillRoundRect(20, 60, 20, 20, 45, Display_Color_RED); fillRoundRect(50, 50, 20, 40, 45, Display_Color_RED); fillRoundRect(80, 40, 20, 60, 45, Display_Color_RED); fillRoundRect(110, 30, 20, 80,45, Display_Color_RED); fillRoundRect(140, 40, 20, 60,45, Display_Color_RED); fillRoundRect(170, 50, 20, 40,45, Display_Color_RED); fillRoundRect(200, 60, 20, 20,45, Display_Color_RED);

円弧描画系の「drawCircleHelper」、「fillCircleHelper」はありますが、実行しても描画されないようになっています。

M5StickC Plusの画面に時計を表示させよう

それでは、実際にプログラミングしてみましょう。

今回は、これまで紹介した、「Adafruit GFX Library」の標準機能を使って、M5StickC Plusのディスプレイに時計を表示させます。

ライブラリを追加する

今回使うライブラリ「Adafruit ST7735 and ST7789 Library」と「Adafruit GFX Library」をインストールします。

※当ブログでプログラムした際のバージョンは以下の通りです。

「Adafruit ST7735 and ST7789 Library」：「1.9.3」
「Adafruit GFX Library」：「1.11.1」

ライブラリのインストールは、次の記事で紹介しています。

【Arduino】ライブラリの管理

時刻同期のためのWi-Fi接続設定

今回作成する時計表示プログラムでは、Wi-Fi接続や時刻同期が必要です。Wi-Fiアクセスポイントへの接続方法や、時刻同期については次の記事で紹介している内容を使って行います。詳細は記事を参照してくださいね！

【Arduino】M5StickC Plus 先代M5StickC との違いとLチカを確認する

すけろくなんか、M5StickCが「在庫なし」になっている。げんろくああ、新しい「M5StickC Plus」が出たからな。旧版は在庫限りになっているのだろう。すけろく[…]

【Arduino】ディスプレイ付きマイコン「M5StickC Plus」WiFi接続をしよう

すけろく M5StickC Plusの大まかな違いは分かった。 WiFi接続をしてみるか。げんろくそうだな。 M5StickCと同じように使えるのか確認してみよう。この記事では、M5[…]

【Arduino】ディスプレイ付きマイコン「M5StickC Plus」時刻同期しよう

すけろく前回はWiFi接続することができた。次は時刻同期がしたいな。げんろくたしかに。時刻同期は基本だからな。以前M5StickCでやったプログラムをベースに実装してみ[…]

AdafruitGFXを使った時計表示プログラム

Arduino IDEを起動して、「ファイル」メニューから「新規ファイル」を選択し、表示されるスケッチに以下のように記述します。

Arduino IDE スケッチ例

M5StickC Plusへの書き込み

「ファイル」メニューから「名前を付けて保存」で任意の名前を付けて保存します。
「ツール」メニューから「ボード」情報を確認し、M5StickC Plusであるか確認します。
この際、「シリアルポート」にマイコンを接続したCOMポートが指定されているかも確認します。
「ツール」メニューから「Patition Scheme」を「”No OTA(Large APP)”」にします。
※ここを変更しないと、スケッチが大きいというエラーになります。
「ツール」メニューから「シリアルモニタ」を選択してシリアルモニタを起動します。
「スケッチ」メニューから「マイコンボードに書き込む」を選択します。

プログラム実行結果

M5StickC Plusのディスプレイに以下のとおり表示されれば成功です。

また、シリアルモニタには次のように表示されます。

Connecting to ”Wi-Fi接続先のSSID”
....
WiFi connected
IP address: 
192.xxx.xxx.xxx
NTP : ntp.jst.mfeed.ad.jp
RTC 2022-06-02 11:01:51
Disconnect from WiFi
.
WiFi disconnected

編集後記

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

「Adafruit GFX Library」は汎用のライブラリということもあり、M5StickC Plusのディスプレイに合わせた設定をプログラム内で行う必要がありましたが、その他の描画系関数は、どれも似ているので扱いやすいです。

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

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

今回使用したマイコンはこちら！

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


アイデアをカタチにする! M5Stack入門&実践ガイド	M5Stack&M5StickCではじめるIoT入門	みんなのM5Stack入門	ESP32&Arduino 電子工作プログラミング入門	みんなのArduino入門
確認する	確認する	確認する	確認する	確認する

【Arduino】ディスプレイ付きマイコン「M5StickC Plus」画面制御を極める！（Adafruit_GFXライブラリ）