ＫＡＲＡＫＵＲＩ ＭＵＳＨＡ

注目キーワード

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

M5StickC Plus
すけろく
M5StickC Plusも時刻同期までできた。
うまくいっておるな。
げんろく
ああ、「M5StickC」向けに作成したプログラムが
微修正で実行できるからありがたい。
すけろく
そういえば、画面が大きくなったな。
値段も大きくなっているが。。。
げんろく
今回は新しいM5StickC Plusの
画面制御まわりを見てみるか。
この記事では、Arduino IDEを使ってM5StickC Plusのディスプレイに時刻や日付を表示させるため、画面制御の方法を確認します。
今回使用するライブラリは、M5社から提供されているM5StickC Plus向けのライブラリを使用します。
先代の「M5StickC」の画面制御については、次の過去記事で紹介していますので、旧版が見たい方は次の記事をどうぞ。
関連記事
【Arduino】M5StickCの画面制御を極める！画面表示のすすめ

この記事では、Arduino IDEを使ってM5StickCのディスプレイに時刻や日付を表示させます。 なんと！、 今回のプログラムを書き込むことで、M5StickCは時計になります。 生活に役立つものができますね！しかも、イ[…]

 

 

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

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

旧版との違いを意識してまとめて行きます。

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

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

 

Wi-Fiアクセスポイントへの接続方法や、時刻同期については次の記事で紹介している内容を使って行います。詳細は記事を参照してくださいね！

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

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

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

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

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

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

 

 

目次

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

M5StickC Plusにはディスプレイ装置が実装されていて、Arduino IDE用のライブラリの中に「M5.Lcd」クラスが用意されています。ディスプレイへのテキストや図形、画像の描画には「M5.Lcd」クラスを使うと便利です。

では「M5.Lcd」クラスの基本的な関数について押さえていきましょう！

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

画面プロパティ系

画面の向き

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

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

画面サイズ

画面サイズを確認することができます。画面の向きを変えると高さと幅が変わります。
画面が縦向きの場合：高さ（240px）、幅（135px)
画面が横向きの場合：高さ（135px）、幅（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) フォントサイズ（倍数）を指定します。

フォントの指定値と表示イメージは次の通りです。（高さ135px、幅240px：横向き指定の場合）
フォント自体のピクセル値と後で出てくるフォントサイズは異なります。

表示サイズは（フォント自体の大きさ×フォントサイズ）になります。
例：横向き画面上では26ピクセル数字フォントだとフォントサイズ（1）でも数字八桁で幅がぎりぎりです。

1 Adafruit 8ピクセルASCIIフォント
2 16ピクセルASCIIフォント
3 未設定 No Image
4 26ピクセルASCIIフォント
5 未設定 No Image
6 26ピクセル数字フォント
7 48ピクセル7セグ風フォント
8 75ピクセル数字フォント

 

文字描画

関数 説明
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) ピクセル単位で描画します。
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.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, 30, 30, YELLOW);
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.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.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);

 

 

M5StickC Plusのディスプレイに時計を表示しよう

それでは、前述の画面描画テストを実行したあとに、ディスプレイに時計を表示してみましょう。
今回は、後での使いまわしを考慮して、いろいろと関数にしています。

関数の用途 関数名
時計画面表示用 Clock_screen_display（）
フォント表示テスト用 display_char_test(rotate, Text)
色表示テスト用 display_color_test()
図形描画テスト用 display_shape_test()

プログラムの流れとしては、起動時処理であるSetup部分に描画テスト用の関数を実行しています。

テスト完了後に時計画面に切り替わりそのまま時計として使えるようにしています。

時計表示＆描画テストプログラム

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

 Arduino IDE スケッチ例

 

注意点としては、起動時にWi-Fiへ接続して時刻同期を行いますが、その際のWi-Fiアクセスポイントの情報はM5StickCにあらかじめ保存したものを読みだしています。時刻同期後はWiFi接続を解除するようにしています。
事前に保存する方法は、次の記事で紹介しています。

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

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

 

 M5StickC Plusへの書き込み

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

 

 プログラム実行結果

M5StickC Plusのディスプレイに時計が表示されれば成功です。

 

さて、これでWi-Fiアクセスポイントに接続して、時刻同期を行うことができました。

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

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

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

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