注目キーワード

【Arduino】ディスプレイ付きマイコン「M5StickC Plus」で画像描画する(Adafruit_GFXライブラリ)

すけろく
汎用ライブラリの「AdafruitGFX」にビットマップ画像を
ディスプレイ表示するものがあるそうな。
げんろく
いかにも。機能は実装されている。
ちょうど、アイコンをアニメーションさせたいと
思っておったわ。
すけろく
うむ。
面白そうだな。やってみるか!
げんろく
わかった。
今回は、単色のアイコンを使って天気情報を
視覚的に伝える画面を作ってみよう。

この記事では、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で実[…]

 

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

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

これからはじめる方にお勧めの参考図書はこちら!

 

画像を表示する方法を見ていくわけですが、せっかくなので、使えるプログラムに組み込んで紹介しますね。

「M5StackC Plus」ディスプレイに現在の天気の情報を表示するプログラムを作ります。

プログラムの中で、「Adafruit GFX Library」を使用して天気アイコン画像(晴れ、曇り、雨、雪など)をアニメーションしてみます。

天気をわかりやすく伝えるために、アイコンをアニメーションさせますよ!

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

皆さんも挑戦してみてくださいね!

 

どうやって天気情報を取得するか

お天気情報の取得ですが、OpenWeatherというインターネットサイトで提供されている情報を「M5StickC Plus」からWi-Fiに接続して取得します。

取得するデータはJSON形式と呼ばれるデータ構造になります。

OpenWeatherから天気情報を取得するためのプログラムについては次の記事で扱っていますので、ご確認ください。

OpenWeatherから天気情報をJSONで取得する方法はこちら

関連記事

すけろく 前回の記事でJSON形式データは取り扱うことができた。 これでインターネットにあるサービスを活用できるな。 げんろく そうだな。 今回は天気情報を提供しているサイトからJSON形式データを[…]

 

以降では、天気情報の取得方法は理解しているものとして書きますので、心配な方は前述の記事を参照ください。

 

ディスプレイに表示させる情報をどうするか

天気情報を「M5StickC Plus」のディスプレイ上に表示させる際のレイアウトを考えてみます。

まず、どのような情報を表示させるかですが、次の内容にします。

  • 天気情報
    1)天気(晴れ、雨、曇り、雪など)
    2)気温
    3)気圧
  • 日付/時刻情報
    1)日付
    2)曜日
    3)時刻(時:分)
  • 作成者ロゴ

 

天気情報

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
●「雨」アイコン(1,2)
●「雪」アイコン(1、2)
●「注意」アイコン(1、2)
●「晴れ」アイコン(1、2)
●「曇り」アイコン(1,2)
●「雨」:青
●「雪」:ライトグレイ
●「注意」:黄色
●「晴れ」:オレンジ
●「曇り」:ダークグレイ
②日付表示部分 日付(月日)を表示させるエリア
月と日は「/」で区切る
(フォントは24ポイント」
●月:%02d(二桁表示)
●日:%02d(二桁表示)
③天気項目名表示部分 以下の天気情報の項目名を表示する
固定表示
(天気、気温、気圧、湿度)
(フォントは12ポイント)
固定表示
(天気、気温、気圧、湿度)
④天気情報表示部分 以下の天気情報を文字表示する
(天気、気温、気圧、湿度)
(フォントは、12ポイント)
●天気:雨、雪、晴れ、曇り、その他(OpenWeatherの記述をそのまま表示)
●気温(摂氏):
%02d(2桁表示)+「℃」
●気圧(hPa) :
%04d (4桁表示)+「hPa」
●湿度(%)       :
%02d(2桁表示)+「%」
⑤時刻表示部 時:分を表示させる
(フォントは12ポイント)
●時:%02d(二桁表示)
●分:%02d(二桁表示)
⑥ロゴ表示部分 当ブログの名前を表示する
(フォントは9ポイント)
「@KARAKURI-MUSHA」

 

起動時の諸条件にかかわらず固定表示になるのは、「③天気項目名表示部分」、「⑥ロゴ表示部分」になります。

その他の部分は次の通り情報が更新された時点で表示を切り替えます。

  • 日時変更時   ⇒「②日付表示部分」と「⑤時刻表示部」の情報を更新します
  • 天気情報取得時 ⇒「①アイコン表示部分」と「④天気情報表示部分」の情報を更新します

 

描画の流れとしては、各情報の描画タイミングに違いがあるため、次のとおり描画するタイミング(関数)を分けて描画します。

  • 固定表示部分:「Setup」関数
  • 日時変更  :「日時表示」関数
  • 天気情報取得:「天気情報更新」関数

 

天気アイコンの描画方法

天気アイコンの描画は、アニメーションさせるため、繰り返し処理部(「loop」関数)で記載します。

天気ステータス格納用変数の値によって、「Adafruit GFX Library」の「drawBitmap」関数で描画させるアイコンを変更します。

関数 説明
drawBitmap(x, y, uint8_t bitmap, w, h color, bgcolor) カーソル位置(x, y)をビットマップデータの左上を支点として、w, h(ピクセル)の大きさでcolorの色で描画します。

drawBitmap()は、白黒画像に色をつけて表示する仕組みですね。2値画像を渡して、1が立っている場所はcolorの色で表示し、0のところは元の色を残してスキップするようです。

カラー画像を表現するには、同じ画像を色ごとに多色刷りしていくしかなさそうです。

今回は、天気を表す単純なアイコンを単色で表現したいので、この関数を使っていきます。

 

M5StickC Plusにビットマップデータを渡すためには

M5StickC Plusにビットマップデータを渡すためには、BMP形式ファイルを2値化して8ピクセルごとにまとめていく必要があります。

その変換を行ってくれるサイトやツールがいろいろありますが、今回は次のサイトを使って変換しました。

変換サイト image2cpp

このサイトの良いところは、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」では、使用する機能やセンサー、ボードを使用するプログラムで使用できる有効なライブラリが公開されています。ライブラリを使用すると、効率的かつ品質を確保したプログラミングが可能です。 ここでは、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 スケッチ例

(1)メインプログラム

メインプログラム内の「各自で準備された設定に変更してください。」と記載した箇所は、皆さんが各自の環境に合わせて編集してから書き込んでください。
①Wi-Fi接続のSSID、パスワード(Wi-Fi設定を「M5StickC Plus」へ保存済みの場合は編集不要)
②OpenWeatherのAPIキーと緯度、経度
③OpenWeatherのルート証明書(スケッチ例では、「”Please correct it to the value that suits your environment.”」と記載しています)

 

(2)アイコン画像定義ファイル

※天気アイコンは、ライセンス関係があり、省略しています。皆さんで準備をしてくださいね!

 

 M5StickC Plusへの書き込み

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

 

 プログラム実行結果

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」のビットマップ描画関数は、単色のアイコン用途で有効ですね。

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

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

 

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

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