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

注目キーワード

【Arduino】M5StickCの画面制御を極める！画面表示のすすめ

M5StickC

この記事では、Arduino IDEを使ってM5StickCのディスプレイに時刻や日付を表示させます。

なんと！、

今回のプログラムを書き込むことで、M5StickCは時計になります。
生活に役立つものができますね！しかも、インターネット経由で時刻を同期した時計です。

時計なので、デジタルで時刻を大きく表示し、日付を下に小さく表示させるようにしましょう。

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

いい感じですね！では早速作っていきましょう！

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

関連記事
【Arduino】M5StickCをWi-Fi接続する（２）

この記事では、Arduino IDEを使ってコンピュータをWi-Fiルータに接続する方法について紹介します。 Wi-Fi接続する方法は、２つあります。２回目の今回はマイコンにアクセスポイント情報（SSID、パスワード）を記憶させることでプ[…]

関連記事
【Arduino】M5StickCを時刻同期する

この記事では、Arduino IDEを使ってM5StickCをアクセスWi-Fiアクセスポイントに接続し、インターネットの時刻サービスを使って時刻を同期する方法について紹介します。 M5StickCなどのマイコンも内部に時刻をもってい[…]

 

目次

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

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

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

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

画面プロパティ系

画面の向き

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

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

画面サイズ

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

関数 説明
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) フォントサイズ（倍数）を指定します。

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

表示サイズは（フォント自体の大きさ×フォントサイズ）になります。
例：横向き画面上では8ピクセルASCIIフォントだとフォントサイズ（10）で高さ（80px)ぎりぎりです。

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, 40, 160, 40, RED);
M5.Lcd.drawLine(0, 0, 160, 80, BLUE);
M5.Lcd.drawLine(0, 80, 160, 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.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.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.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.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);

 

 

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

それでは腕試しにM5StickCのディスプレイに時計を表示してみましょう。
今回は、後での使いまわしを考慮して、時計画面表示用の関数Clock_screen_display（）を作っています。

時計画面表示プログラム

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

 Arduino IDE スケッチ例

 

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

関連記事
【Arduino】M5StickCをWi-Fi接続する（２）

この記事では、Arduino IDEを使ってコンピュータをWi-Fiルータに接続する方法について紹介します。 Wi-Fi接続する方法は、２つあります。２回目の今回はマイコンにアクセスポイント情報（SSID、パスワード）を記憶させることでプ[…]

 

 M5Stack／M5StickCへの書き込み

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

 

 プログラム実行結果

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

また、シリアルモニタ上には次の通り表示されているはずです。

Connecting to your-ssid
...............
WiFi connected
IP address: 
192.xxx.xxx.xxx
NTP : ntp.jst.mfeed.ad.jp
RTC 2021-04-16 11:43:18
Disconnect from WiFi
.
WiFi disconnected

さて、これでWi-Fiアクセスポイントに接続して、時刻同期を行うことができました。今回の記事は以上になります。
次回は、今回のこれまでの処理結果をシリアルモニターではなくM5StickCに搭載されているディスプレイ上に表示します。

今回使用したマイコンは・・・

M5StickC
ディスプレイ付きのマイコンです。非常にサイズが小さいですがディスプレイも搭載しており、使いやすいです。Amazonで確認
げんろく
どちらもディスプレイ付きとは思えない小さいサイズのマイコンです。センサーと組み合わせてIoTデバイスとして活躍できる機能を持っています。