ディスプレイ表示するものがあるそうな。
ちょうど、アイコンをアニメーションさせたいと
思っておったわ。
面白そうだな。やってみるか！
今回は、単色のアイコンを使って天気情報を
視覚的に伝える画面を作ってみよう。
この記事では、Arduino IDEを使ってM5StickC Plusのディスプレイに画像（ビットマップ）を表示させる方法を紹介します。
今回は、Adafruit社から提供されているArduino IDE向けのライブラリ「Adafruit GFX Library」を使用します。
Arduino IDE共通で使用できるので、いろんなArduino対応機器で同じソースを使いたい場合に有効です。
※ただし、表示させるディスプレイによって必要な設定が異なるのでそのあたりはチューニングが必要です。今回はM5StickC Plusで実行することを前提としています。
「Adafruit GFX Library」の基本的な使い方や、標準描画に関する内容は、次の過去記事で紹介しています。
まずは次の記事で基本を押さえることをおススメします。
「Adafruit GFX Library」の基本的な使い方はこちら
すけろく 標準ライブラリでの画面描画はできた。 しかし、M5StickC Plus向けのライブラリなので 汎用性がないな。 げんろく たしかに。 M5Stackや他のAruduino機器でも使える[…]
また、M5社の「M5StickC Plus」標準ライブラリを使った画面制御は、次の過去記事で紹介していますのでどうぞ。
すけろく M5StickC Plusに英語を表示することは 画面制御の記事で行えたが、日本語は表示できないのか？ げんろく いや、方法はあるぞ。 eFontライブラリをM5StickC Plusで実[…]
今回使用するマイコンはこちら！
Aruduino で開発できます。
これからはじめる方にお勧めの参考図書はこちら！
画像を表示する方法を見ていくわけですが、せっかくなので、使えるプログラムに組み込んで紹介しますね。
「M5StackC Plus」ディスプレイに現在の天気の情報を表示するプログラムを作ります。
プログラムの中で、「Adafruit GFX Library」を使用して天気アイコン画像（晴れ、曇り、雨、雪など）をアニメーションしてみます。
天気をわかりやすく伝えるために、アイコンをアニメーションさせますよ！
完成した際のイメージはこんな感じです。
皆さんも挑戦してみてくださいね！
どうやって天気情報を取得するか
お天気情報の取得ですが、OpenWeatherというインターネットサイトで提供されている情報を「M5StickC Plus」からWi-Fiに接続して取得します。
取得するデータはJSON形式と呼ばれるデータ構造になります。
OpenWeatherから天気情報を取得するためのプログラムについては次の記事で扱っていますので、ご確認ください。
OpenWeatherから天気情報をJSONで取得する方法はこちら
すけろく 前回の記事でJSON形式データは取り扱うことができた。 これでインターネットにあるサービスを活用できるな。 げんろく そうだな。 今回は天気情報を提供しているサイトからJSON形式データを[…]
以降では、天気情報の取得方法は理解しているものとして書きますので、心配な方は前述の記事を参照ください。
ディスプレイに表示させる情報をどうするか
天気情報を「M5StickC Plus」のディスプレイ上に表示させる際のレイアウトを考えてみます。
まず、どのような情報を表示させるかですが、次の内容にします。
- 天気情報
１）天気（晴れ、雨、曇り、雪など）
２）気温
３）気圧 - 日付／時刻情報
１）日付
２）曜日
３）時刻（時：分） - 作成者ロゴ
天気情報
OpenWeatherへのデータ取得リクエストURLは次のようにします。
| 項目 | 値（例 ） |
| API名 | CurrentWeather 現在の天気を取得するためのAPI |
| 取得する場所 | 東京の緯度（35.6828）、軽度（139.759）を指定します。 |
| ローカライズ | 日本（ja）を指定します。 |
| データ単位 | 摂氏（Metric）を指定します。 |
上記の項目をもとにした場合、リクエストURLは次のようになります。
https://api.openweathermap.org/data/2.5/weather?lat=35.6828387&lon=139.7594549&units=metric&lang=ja&appid={API Key}
OpenWeatherから取得したJSON形式データから、次の情報を抜き出して利用します。
| キー名 | 値（例） |
| [“weather”][0][“id”] | 天気IDです。OpenWeatherでは以下のようにIDで分類されています。 200番～500番台 ：雨 600番台 ：雪 700番台 ：その他（嵐、突風など） 800番 ：晴れ 801～800番台 ：曇り 詳細を知りたい方は次を参照して下さい OpenWeatherの天気ID |
| [“main”][“temp”] | 気温（℃：摂氏） 標準はK：ケルビンを単位とするデータですが、今回は摂氏データを取得するようにします。 |
| [“main”][“pressure”] | 気圧（hPa) |
| [“main”][“humidity”] | 湿度（％） |
OpenWeatherからのJSONデータ取得方法はこちら
すけろく 前回の記事でJSON形式データは取り扱うことができた。 これでインターネットにあるサービスを活用できるな。 げんろく そうだな。 今回は天気情報を提供しているサイトからJSON形式データを[…]
日付／時刻情報
「M5StickC Plus」で使用できるRTCのしくみを使って現時刻を取得して表示します。
時刻の表示方法は、次の記事で紹介してます。
時刻同期と日付／時刻の表示方法はこちら
すけろく 前回はWiFi接続することができた。 次は時刻同期がしたいな。 げんろく たしかに。時刻同期は基本だからな。 以前M5StickCでやったプログラムをベースに 実装してみ[…]
作成者ロゴ
今回は、「M5StickC Plus」を起動してからWi-Fi接続して時刻同期するまでに時間がかかるので、その間に当ブログのキャラクタ（げんろく）のアイコンとサイト名を表示させてみます。
アイコンは、以下の画像を使い、単色で表示できるようにしています。
| 元画像 | 編集後の画像 |
|
|
天気情報を表示させる画面の構成
「M5StickC Plus」のディスプレイ上に前述の情報を表示させる際の画面構成を次のように考えてみました。
| 項目 | 項目の説明 | 値 | 色 |
| 画面全体色 | 画面の背景色 | ー | 黒 |
| ①アイコン表示部分 | お天気アイコンを表示させるエリア 天気によってアイコン、色が変わる画像は80×80px |
●「雨」アイコン（１，２） ●「雪」アイコン（１、２） ●「注意」アイコン（１、２） ●「晴れ」アイコン（１、２） ●「曇り」アイコン（１，２） |
●「雨」：青 ●「雪」：ライトグレイ ●「注意」：黄色 ●「晴れ」：オレンジ ●「曇り」：ダークグレイ |
| ②日付表示部分 | 日付（月日）を表示させるエリア 月と日は「／」で区切る （フォントは24ポイント」 |
●月：%02d（二桁表示） ●日：%02d（二桁表示） |
白 |
| ③天気項目名表示部分 | 以下の天気情報の項目名を表示する 固定表示 （天気、気温、気圧、湿度） （フォントは12ポイント） |
固定表示 （天気、気温、気圧、湿度） |
白 |
| ④天気情報表示部分 | 以下の天気情報を文字表示する （天気、気温、気圧、湿度） （フォントは、12ポイント） |
●天気：雨、雪、晴れ、曇り、その他（OpenWeatherの記述をそのまま表示） ●気温（摂氏）： %02d（２桁表示）+「℃」 ●気圧（hPa) ： %04d (4桁表示)＋「hPa」 ●湿度（%) ： %02d（２桁表示）＋「％」 |
白 |
| ⑤時刻表示部 | 時：分を表示させる （フォントは12ポイント） |
●時：%02d（二桁表示） ●分：%02d（二桁表示） |
緑 |
| ⑥ロゴ表示部分 | 当ブログの名前を表示する （フォントは９ポイント） |
「＠KARAKURI-MUSHA」 | 白 |
起動時の諸条件にかかわらず固定表示になるのは、「③天気項目名表示部分」、「⑥ロゴ表示部分」になります。
その他の部分は次の通り情報が更新された時点で表示を切り替えます。
- 日時変更時 ⇒「②日付表示部分」と「⑤時刻表示部」の情報を更新します
- 天気情報取得時 ⇒「①アイコン表示部分」と「④天気情報表示部分」の情報を更新します
描画の流れとしては、各情報の描画タイミングに違いがあるため、次のとおり描画するタイミング（関数）を分けて描画します。
- 固定表示部分：「Setup」関数
- 日時変更 ：「日時表示」関数
- 天気情報取得：「天気情報更新」関数
天気アイコンの描画方法
天気アイコンの描画は、アニメーションさせるため、繰り返し処理部（「loop」関数）で記載します。
天気ステータス格納用変数の値によって、「Adafruit GFX Library」の「drawBitmap」関数で描画させるアイコンを変更します。
| 関数 | 説明 |
| drawBitmap(x, y, uint8_t bitmap, w, h color, bgcolor) | カーソル位置（x, y）をビットマップデータの左上を支点として、w, h（ピクセル）の大きさでcolorの色で描画します。 |
drawBitmap()は、白黒画像に色をつけて表示する仕組みですね。２値画像を渡して、1が立っている場所はcolorの色で表示し、0のところは元の色を残してスキップするようです。
カラー画像を表現するには、同じ画像を色ごとに多色刷りしていくしかなさそうです。
今回は、天気を表す単純なアイコンを単色で表現したいので、この関数を使っていきます。
M5StickC Plusにビットマップデータを渡すためには
M5StickC Plusにビットマップデータを渡すためには、BMP形式ファイルを2値化して8ピクセルごとにまとめていく必要があります。
その変換を行ってくれるサイトやツールがいろいろありますが、今回は次のサイトを使って変換しました。
このサイトの良いところは、BMP形式ファイルを指定すると、Arduino IDEなどで使えるプログラム記述を生成してくれるところです。
生成されたデータをコピペするだけで良いので助かります。
例えば、天気「雨」のアイコンを変換すると次のような値になりました。
| 雨のアイコンイメージ | 変換後の値 |
|
 （クリックすると大きくなります。） |
他にもいろいろとツールはあるようなので、皆さんの環境にあったツールを使って変換してください！
天気情報表示プログラムを作る
それでは、実際にプログラミングしてみましょう。
今回は、これまで紹介した、「Adafruit GFX Library」を使って、「M5StickC Plus」のディスプレイに天気情報を表示させます。
OpenWeatherからの天気情報取得は「M5StickC Plus」起動時に1回読み込みます。
定期実行、ボタン押下時実行などを行う場合は、プログラムを編集してくださいね！
ライブラリを追加する
今回使うライブラリ「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アクセスポイントへの接続方法や、時刻同期については次の記事で紹介している内容を使って行います。詳細は記事を参照してくださいね！
Wi-Fi接続の方法は、次の記事で紹介しています。
すけろく なんか、M5StickCが「在庫なし」になっている。 げんろく ああ、新しい「M5StickC Plus」が出たからな。 旧版は在庫限りになっているのだろう。 すけろく[…]
すけろく M5StickC Plusの大まかな違いは分かった。 WiFi接続をしてみるか。 げんろく そうだな。 M5StickCと同じように使えるのか確認してみよう。 この記事では、M5[…]
すけろく 前回はWiFi接続することができた。 次は時刻同期がしたいな。 げんろく たしかに。時刻同期は基本だからな。 以前M5StickCでやったプログラムをベースに 実装してみ[…]
OpenWeatherからJSONデータを取得する方法
今回のプログラムでは、天気情報の取得も必要になります。データ取得にはHTTP通信が必要になります。
OpenWeatherからの情報取得方法や、HTTP通信時の証明書を記載する方法については、次の記事で紹介しています。詳細は、記事を参照してください。
JSONデータの取得やHTTP通信の方法は、次の記事で紹介しています。
すけろく 普段、何気なくブラウザでインターネットサイトを 見ているが、URLの最初のHttpsとはなんだ？ げんろく httpsはHttpの通信を暗号化して行うものだ。 ちょっと違いを押さえてみるか[…]
すけろく 前回の記事でJSON形式データは取り扱うことができた。 これでインターネットにあるサービスを活用できるな。 げんろく そうだな。 今回は天気情報を提供しているサイトからJSON形式データを[…]
AdafruitGFXを使った天気表示プログラム
Arduino IDEを起動して、「ファイル」メニューから「新規ファイル」を選択し、表示されるスケッチに以下のように記述します。
Arduino IDE スケッチ例
（１）メインプログラム
①Wi-Fi接続のSSID、パスワード（Wi-Fi設定を「M5StickC Plus」へ保存済みの場合は編集不要）
②OpenWeatherのAPIキーと緯度、経度
③OpenWeatherのルート証明書（スケッチ例では、「”Please correct it to the value that suits your environment.”」と記載しています）
（２）アイコン画像定義ファイル
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
https://api.openweathermap.org/data/2.5/weather?lat=35.6828&lon=139.759&units=metric&lang=ja&appid=API-Key
[HTTPS] begin...
[HTTPS] GET...
[HTTPS] GET... code: 200
{"coord":{"lon":139.759,"lat":35.6828},"weather":[{"id":803,"main":"Clouds","description":"曇りがち","icon":"04d"}],"base":"stations","main":{"temp":18.09,"feels_like":18.15,"temp_min":17.44,"temp_max":19.49,"pressure":1002,"humidity":84},"visibility":10000,"wind":{"speed":3.09,"deg":30},"clouds":{"all":75},"dt":1654582291,"sys":{"type":2,"id":268395,"country":"JP","sunrise":1654543515,"sunset":1654595669},"timezone":32400,"id":1861060,"name":"日本","cod":200}
Disconnect from WiFi
.
WiFi disconnected
編集後記
いかがだったでしょうか。
「Adafruit GFX Library」のビットマップ描画関数は、単色のアイコン用途で有効ですね。
今回の記事は以上になります。
最後までご覧いただきありがとうございました。
今回使用したマイコンはこちら！
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を使っ […]