しかし、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から、ディスプレイサイズ、バッテリ容量が変更になっています。ブザーも実装されました。通信（WiFi/Bluetooth）機能、6軸加速度センサーも搭載されています。
Aruduino で開発できます。Amazonで確認
これからはじめる方にお勧めの参考図書はこちら！
 |
  |
  |
  |
  |
| アイデアをカタチにする! M5Stack入門&実践ガイド | M5Stack&M5StickCではじめるIoT入門 | みんなのM5Stack入門 | ESP32&Arduino 電子工作 プログラミング入門 | みんなのArduino入門 |
| 確認する | 確認する | 確認する | 確認する | 確認する |
今回の記事では、「Adafruit GFX Library」を「M5StackC Plus」ディスプレイで使用するための設定と、描画を行う各関数を紹介します。
また、今回の記事の最後でご紹介するプログラムを書き込むことで、M5StickC Plusは時計になります。
完成した際のイメージはこんな感じです。
皆さんも挑戦してみてくださいね！
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 IDE 1.8.xバージョンのライブラリ管理方法を紹介した記事です。 Arduino IDEは、より新しいバージョン「2.0.x」が発表されています。 機能がよりリッチになった「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 IDE 1.8.xバージョンのライブラリ管理方法を紹介した記事です。 Arduino IDEは、より新しいバージョン「2.0.x」が発表されています。 機能がよりリッチになった「Ardu[…]
時刻同期のためのWi-Fi接続設定
今回作成する時計表示プログラムでは、Wi-Fi接続や時刻同期が必要です。Wi-Fiアクセスポイントへの接続方法や、時刻同期については次の記事で紹介している内容を使って行います。詳細は記事を参照してくださいね！
すけろく なんか、M5StickCが「在庫なし」になっている。 げんろく ああ、新しい「M5StickC Plus」が出たからな。 旧版は在庫限りになっているのだろう。 すけろく[…]
すけろく M5StickC Plusの大まかな違いは分かった。 WiFi接続をしてみるか。 げんろく そうだな。 M5StickCと同じように使えるのか確認してみよう。 この記事では、M5[…]
すけろく 前回は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のディスプレイに合わせた設定をプログラム内で行う必要がありましたが、その他の描画系関数は、どれも似ているので扱いやすいです。
今回の記事は以上になります。
最後までご覧いただきありがとうございました。
今回使用したマイコンはこちら！
画面付きで小型のマイコンです。旧版のM5StickCから、ディスプレイサイズ、バッテリ容量が変更になっています。ブザーも実装されました。通信（WiFi/Bluetooth）機能、6軸加速度センサーも搭載されています。
Aruduino で開発できます。Amazonで確認
これからはじめる方にお勧めの参考図書はこちら！
M5StickC Plus の他の記事はこちらからどうぞ！
すけろく んーどうしたものか。 げんろく どうした？ 深刻な顔をして。 すけろく M5Stackにプログラムを書き込んだら 起動しなくなってな。 電源ON／OFFでも無理なのだ。 げんろく 書き込んだプログラムか、バッテリーの 過放電か。工場出荷時に戻してみてはどうだ？ この記事では、M5Stackにプログラムを書き込んだ結果、うまく動作しなくなった場合の対処方法を記載します。 ご紹介するのは「工 […]
すけろく 以前、Bluetooth Serialを使って データをPCに送信したが、何か良い使い方はないかな。 げんろく 最近、土壌水分センサーとやらを手に入れた。 これで計測した水分量をPCに送信してみるか？ すけろく それは良いな。 今後、使い道が広がっていきそうな予感がする。 この記事では、ディスプレイ付きマイコン「M5StickC Plus」に搭載されている「Bluetooth」を使って、 […]
すけろく 前回の記事で6軸IMUのデータをPCでグラフ化したが、 うまく傾き検知ができているようだ。 げんろく そうだな。 微細な傾きも検知できているようだ。 すけろく 傾き検知の機能を使って何かできないかな？ げんろく なら、机を離れる時にノートなどの見守りを してくれる「デスク見守り君」を作るぞ！ 今回の記事では、ディスプレイ付きマイコン「M5StickC Plus」を使って、「デスク見守り君 […]
すけろく これまで、M5StickC PlusでWi-Fi接続を使ったデータの やり取りは見てきたが、Bluetoothはまだだな。 げんろく 確かに。 Bluetoothについてはまだだった。 すけろく 近距離ならBluetooth通信も有効だ。 何か作れないかの。 げんろく では、今回はBluetoothを使った通信の一つ、 Bluetooth Serialについて触れてみよう。 この記事では […]
すけろく M5StickC Plusには、筐体の動きや傾きを検知する センサーが標準で搭載されているらしいな。 げんろく 6軸IMUのことか。 加速度、角速度を測るセンサーだ。 計算で姿勢角度も分かる。 すけろく んんっ！？ 難しい単語が出てきたな。。 げんろく よし。 物体の動きを計測する要素について M5StickC Plusを使って試してみるぞ！ この記事では、ディスプレイ付きマイコン「M5 […]
すけろく 前回作ったお天気表示プログラムは なかなか、評判が良いな。 げんろく うれしいな。 ただ、お天気情報は起動時のみ取得というところが 課題だ。 げんろく 今回は、１時間に１回お天気情報を後進するように してみよう。 この記事では、Arduino IDEを使ってM5StickC Plusのディスプレイに、お天気情報を１時間に１回更新表示する方法を紹介します。 画面描画は主に、Adafruit […]
すけろく 汎用ライブラリの「AdafruitGFX」にビットマップ画像を ディスプレイ表示するものがあるそうな。 げんろく いかにも。機能は実装されている。 ちょうど、アイコンをアニメーションさせたいと 思っておったわ。 すけろく うむ。 面白そうだな。やってみるか！ げんろく わかった。 今回は、単色のアイコンを使って天気情報を 視覚的に伝える画面を作ってみよう。 この記事では、Arduino […]
すけろく 標準ライブラリでの画面描画はできた。 しかし、M5StickC Plus向けのライブラリなので 汎用性がないな。 げんろく たしかに。 M5Stackや他のAruduino機器でも使えるものが必要だな。 すけろく そのようなものがあるのか？ げんろく よし。今回は、汎用的に使えるライブラリを紹介しよう。 Adafruit社が公開している「Adafruit_GFX」だ。 この記事では、Ar […]
すけろく 前回の記事でJSON形式データは取り扱うことができた。 これでインターネットにあるサービスを活用できるな。 げんろく そうだな。 今回は天気情報を提供しているサイトからJSON形式データを 取得してM5StickC Plusの画面に表示してみよう。 前回の記事では、次の画像のように、Arduino IDEを使い、M5StickC Plusのディスプレイにインターネットのサイトから取得した […]
すけろく 普段、何気なくブラウザでインターネットサイトを 見ているが、URLの最初のHttpsとはなんだ？ げんろく httpsはHttpの通信を暗号化して行うものだ。 ちょっと違いを押さえてみるか。 すけろく あと、Arduino IDEでプログラムを作る際の 注意点なんかも頼む。 げんろく わかった。 プログラムに組み込む方法も見てみよう。 皆さんが普段パソコン（PC）やスマホ、タブレットのブ […]
すけろく Pythonなどでは、JSONでデータを扱っていたが、 Arduino IDEで扱うことはできるのか？ げんろく それなら「ArduinoJSON」ライブラリがあるぞ！ 取り扱うデータで使用するメモリサイズの 計算ツールもあるから便利だ。 この記事では、Arduino IDEを使ってM5StickC PlusのプログラムでJSON形式を取り扱う方法を紹介します。 今回使用するライブラリは […]
すけろく M5StickC Plusに英語を表示することは 画面制御の記事で行えたが、日本語は表示できないのか？ げんろく いや、方法はあるぞ。 eFontライブラリをM5StickC Plusで実行できるように 修正して提供してくれているものを使うのだ。 すけろく ぜひ、やってみたいの～ この記事では、Arduino IDEを使ってM5StickC Plusのディスプレイに日本語を表示させるため […]
すけろく M5StickC Plusも時刻同期までできた。 うまくいっておるな。 げんろく ああ、「M5StickC」向けに作成したプログラムが 微修正で実行できるからありがたい。 すけろく そういえば、画面が大きくなったな。 値段も大きくなっているが。。。 げんろく 今回は新しいM5StickC Plusの 画面制御まわりを見てみるか。 この記事では、Arduino IDEを使ってM5Stick […]
すけろく 前回はWiFi接続することができた。 次は時刻同期がしたいな。 げんろく たしかに。時刻同期は基本だからな。 以前M5StickCでやったプログラムをベースに 実装してみよう。 この記事では、M5StickC PlusをアクセスWi-Fiアクセスポイントに接続し、インターネットの時刻サービス(NTPサーバー）と時刻を同期する方法について紹介します。 今回使用す […]
すけろく M5StickC Plusの大まかな違いは分かった。 WiFi接続をしてみるか。 げんろく そうだな。 M5StickCと同じように使えるのか確認してみよう。 この記事では、M5StickC Plusに実装されているWiFi機能を使って、Wi-Fiルータに接続する方法について紹介します。 今回使用するマイコンはこちら！ M5StickC Plus 画面付きで小型のマイコンです。旧版のM5 […]
すけろく なんか、M5StickCが「在庫なし」になっている。 げんろく ああ、新しい「M5StickC Plus」が出たからな。 旧版は在庫限りになっているのだろう。 すけろく うむ。画面が大きくなったな。 値段も大きくなっておる。 げんろく そうだな。 M5StickC PlusでLチカでもしてみるか。 今回の記事では、「M5StickC Plus」を開発環境であるArduino IDEを使っ […]
