注目キーワード

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

すけろく
標準ライブラリでの画面描画はできた。
しかし、M5StickC Plus向けのライブラリなので
汎用性がないな。
げんろく
たしかに。
M5Stackや他のAruduino機器でも使えるものが必要だな。
すけろく
そのようなものがあるのか?
げんろく
よし。今回は、汎用的に使えるライブラリを紹介しよう。
Adafruit社が公開している「Adafruit_GFX」だ。

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

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

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

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

関連記事

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

 

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

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

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

 

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

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

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

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

 

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

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

  • ディスプレイ対応ライブラリの読み込み
  • 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 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のディスプレイには以下の4つの向きがあります。使う方向に応じて向きを設定できます。

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

 

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

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

関連記事

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

関連記事

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

関連記事

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

 

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

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

 Arduino IDE スケッチ例

 

 M5StickC Plusへの書き込み

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

 

 プログラム実行結果

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のディスプレイに合わせた設定をプログラム内で行う必要がありましたが、その他の描画系関数は、どれも似ているので扱いやすいです。

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

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

 

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

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