うまくいっておるな。
微修正で実行できるからありがたい。
値段も大きくなっているが。。。
画面制御まわりを見てみるか。
この記事では、Arduino IDEを使ってM5StickCのディスプレイに時刻や日付を表示させます。 なんと！、 今回のプログラムを書き込むことで、M5StickCは時計になります。 生活に役立つものができますね！しかも、イ[…]
今回使用するマイコンはこちら！
Aruduino で開発できます。
旧版との違いを意識してまとめて行きます。
また、今回の記事の最後でご紹介するプログラムを書き込むことで、M5StickC Plusは時計になります。
完成した際のイメージはこんな感じです。
Wi-Fiアクセスポイントへの接続方法や、時刻同期については次の記事で紹介している内容を使って行います。詳細は記事を参照してくださいね！
すけろく なんか、M5StickCが「在庫なし」になっている。 げんろく ああ、新しい「M5StickC Plus」が出たからな。 旧版は在庫限りになっているのだろう。 すけろく[…]
すけろく M5StickC Plusの大まかな違いは分かった。 WiFi接続をしてみるか。 げんろく そうだな。 M5StickCと同じように使えるのか確認してみよう。 この記事では、M5[…]
すけろく 前回は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接続を解除するようにしています。
事前に保存する方法は、次の記事で紹介しています。
すけろく M5StickC Plusの大まかな違いは分かった。 WiFi接続をしてみるか。 げんろく そうだな。 M5StickCと同じように使えるのか確認してみよう。 この記事では、M5[…]
M5StickC Plusへの書き込み
- 「ファイル」メニューから「名前を付けて保存」で任意の名前を付けて保存します。
- 「ツール」メニューから「ボード」情報を確認し、M5StickC Plusであるか確認します。
この際、「シリアルポート」にマイコンを接続したCOMポートが指定されているかも確認します。 - 「ツール」メニューから「シリアルモニタ」を選択してシリアルモニタを起動します。
- 「スケッチ」メニューから「マイコンボードに書き込む」を選択します。
プログラム実行結果
M5StickC Plusのディスプレイに時計が表示されれば成功です。
さて、これでWi-Fiアクセスポイントに接続して、時刻同期を行うことができました。
今回の記事は以上になります。
最後までご覧いただきありがとうございました。
今回使用したマイコンはこちら！
画面付きで小型のマイコンです。旧版のM5StickCから、ディスプレイサイズ、バッテリ容量が変更になっています。ブザーも実装されました。通信（WiFi/Bluetooth）機能、6軸加速度センサーも搭載されています。
Aruduino で開発できます。
これからはじめる方にお勧めの参考図書はこちら！
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から、ディスプレ […]
すけろく なんか、M5StickCが「在庫なし」になっている。 げんろく ああ、新しい「M5StickC Plus」が出たからな。 旧版は在庫限りになっているのだろう。 すけろく うむ。画面が大きくなったな。 値段も大きくなっておる。 げんろく そうだな。 M5StickC PlusでLチカでもしてみるか。 今回の記事では、「M5StickC Plus」を開発環境であるArduino IDEを使っ […]