ディスプレイ表示するものがあるそうな。
ちょうど、アイコンをアニメーションさせたいと
思っておったわ。
面白そうだな。やってみるか！
今回は、単色のアイコンを使って天気情報を
視覚的に伝える画面を作ってみよう。
この記事では、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.”」と記載しています）
| #include "SPI.h" // SPI通信制御ライブラリ | |
| #include <WiFi.h> // Wifi制御用ライブラリ | |
| #include <Preferences.h> // 不揮発静メモリ制御ライブラリ | |
| #include <time.h> // 時刻制御用ライブラリ | |
| #include <M5StickCPlus.h> // M5StickC 用ライブラリ | |
| #include <Adafruit_GFX.h> // 画面描画ライブラリ | |
| #include <Adafruit_ST7789.h> // ディスプレイ固有設定 | |
| #include <HTTPClient.h> // Http制御クライアントライブラリ | |
| #include <WiFiClientSecure.h> // Https制御クライアントライブラリ | |
| #include <ArduinoJson.h> // JSONデータ制御用ライブラリ | |
| #include "efont.h" // Unicode表示用ライブラリ | |
| #include "efontM5StickCPlus.h" // Unicode表示用ライブラリ | |
| #include "efontEnableJa.h" // Unicode表示用ライブラリ（日本語） | |
| #include "Original_Icon_src.h" // 自作アイコン画像定義ファイルの読み込み | |
| // ※この部分は皆さんで画像を作成してくださいね！ | |
| // ESP32-PICO （M5StickCPlus） TFT接続GPIO | |
| #define TFT_CS 5 // SPI(CS)通信用GPIO | |
| #define TFT_DC 23 // SPI(DC)通信用GPIO | |
| #define TFT_RST 18 // SPI(RST)通信用GPIO | |
| Adafruit_ST7789 tft = Adafruit_ST7789(TFT_CS, TFT_DC, TFT_RST); // ディスプレイ制御インスタンス生成 | |
| // ------------------------------------------------------------ | |
| // 定数/変数 定義部 Constant / variable definition section. | |
| // ------------------------------------------------------------ | |
| // NTP接続情報 NTP connection information. | |
| const char* NTPSRV = "ntp.jst.mfeed.ad.jp"; // NTPサーバーアドレス NTP server address. | |
| const long GMT_OFFSET = 9 * 3600; // GMT-TOKYO(時差９時間）9 hours time difference. | |
| const int DAYLIGHT_OFFSET = 0; // サマータイム設定なし No daylight saving time setting | |
| // 時刻・日付の生成 Time / date generation. | |
| RTC_TimeTypeDef RTC_TimeStruct; // RTC時刻 Times of Day. | |
| RTC_DateTypeDef RTC_DateStruct; // RTC日付 Date | |
| int smin = 0; // 分単位の変更状況管理用 | |
| // 色の定義 color definitions | |
| const uint16_t TFT_Color_BLACK = 0x0000; // 黒 | |
| const uint16_t TFT_Color_DARKGLEY = 0x7BEF; // ダークグレイ | |
| const uint16_t TFT_Color_ORANGE = 0xFDA0; // オレンジ | |
| const uint16_t TFT_Color_NAVY = 0x000F; // ネイビー | |
| const uint16_t TFT_Color_BLUE = 0x001F; // 青 | |
| const uint16_t TFT_Color_GREENYELLOW = 0xB7E0; // 黄緑 | |
| const uint16_t TFT_Color_DARKGREEN = 0x03E0; // ダークグリーン | |
| const uint16_t TFT_Color_GREEN = 0x07E0; // 緑 | |
| const uint16_t TFT_Color_PINK = 0xFC9F; // ピンク | |
| const uint16_t TFT_Color_DARKCYAN = 0x03EF; // ダークシアン | |
| const uint16_t TFT_Color_CYAN = 0x07FF; // シアン | |
| const uint16_t TFT_Color_OLIVE = 0x7BE0; // オリーブ | |
| const uint16_t TFT_Color_MAROON = 0x7800; // マルーン | |
| const uint16_t TFT_Color_RED = 0xF800; // 赤 | |
| const uint16_t TFT_Color_YELLOW = 0xFFE0; // 黄 | |
| const uint16_t TFT_Color_PURPLE = 0x780F; // 紫 | |
| const uint16_t TFT_Color_MAGENTA = 0xF81F; // マゼンタ | |
| const uint16_t TFT_Color_LIGHTGREY = 0xC618; // ライトグレイ | |
| const uint16_t TFT_Color_WHITE = 0xFFFF; // 白 | |
| // JSON用 | |
| const size_t mem_cap = 2048; // JSON形式データ格納用メモリサイズ | |
| StaticJsonDocument<mem_cap> n_jsondata; // JSON形式データ格納用 | |
| // 天気ステータス格納用 | |
| uint8_t Weather_Stats = 0; // 0:初期化 1:雨 2:雪 3:注意 4:晴れ 5:曇り | |
| // OpenWeatherへのhttpsクエリ生成用 | |
| const String sitehost = "api.openweathermap.org"; // OpenWeatherのサイトホスト名 | |
| const String lang = "ja"; // 言語設定 | |
| // ======================================================================== | |
| // 各自で準備された設定に変更してください。 ここから↓ | |
| // ======================================================================== | |
| Preferences preferences; | |
| char ssid[33]; // アクセスポイント情報（SSID）の格納用 | |
| char password[65]; // アクセスポイント情報（パスワード）の格納用 | |
| // OpenWeatherへのhttpsクエリ生成用 | |
| const String Api_KEY = ”Please correct it to the value that suits your environment.”; // API-KEY（ユーザにより変わります。（皆さんで個別に入れましょう！）） | |
| char geo_lat[20] = "35.6828"; // 緯度（東京以外を指定する場合は編集してください） | |
| char geo_lon[20] = "139.759"; // 経度（東京以外を指定する場合は編集してください） | |
| // OpenWeatherのルート証明書を定義 // OpenWeatherのルート証明署を入力してください。（皆さんで個別に入れましょう！） | |
| const char* ow_rootca = \ | |
| "-----BEGIN CERTIFICATE-----\n" \ | |
| ”Please correct it to the value that suits your environment.” | |
| "-----END CERTIFICATE-----\n"; | |
| // ======================================================================== | |
| // 各自で準備された設定に変更してください。 ここまで↑ | |
| // ======================================================================== | |
| // ------------------------------------------------------------ | |
| // 関数 定義部 Function definition section. | |
| // ------------------------------------------------------------ | |
| // ============================================================ | |
| // 時刻同期 関数 Time synchronization function. | |
| // ============================================================ | |
| void time_sync(const char* ntpsrv, long gmt_offset, int daylight_offset) { | |
| // NTPサーバの時間とローカルの時刻を同期 Synchronize NTP server time to local time | |
| configTime(gmt_offset, daylight_offset, ntpsrv); // NTPの設定 | |
| // Get local time | |
| struct tm timeInfo; // tmオブジェクトをtimeinfoとして生成 | |
| if (getLocalTime(&timeInfo)) { // timeinfoに現在時刻を格納 | |
| // 現在時刻の格納が正常終了したら実行 | |
| Serial.print("NTP : "); // シリアルモニターに表示 | |
| Serial.println(ntpsrv); // シリアルモニターに表示 | |
| // 時刻の取り出し | |
| RTC_TimeTypeDef TimeStruct; // 時刻格納用の構造体を生成 | |
| TimeStruct.Hours = timeInfo.tm_hour; // 時を格納 | |
| TimeStruct.Minutes = timeInfo.tm_min; // 分を格納 | |
| TimeStruct.Seconds = timeInfo.tm_sec; // 秒を格納 | |
| M5.Rtc.SetTime(&TimeStruct); // 時刻の書き込み | |
| RTC_DateTypeDef DateStruct; // 日付格納用の構造体を生成 | |
| DateStruct.WeekDay = timeInfo.tm_wday; // 曜日を格納 | |
| DateStruct.Month = timeInfo.tm_mon + 1; // 月（0-11）を格納※1を足す | |
| DateStruct.Date = timeInfo.tm_mday; // 日を格納 | |
| DateStruct.Year = timeInfo.tm_year + 1900; // 年を格納（1900年からの経過年を取得するので1900を足す） | |
| M5.Rtc.SetData(&DateStruct); // 日付を書き込み | |
| Serial.printf("RTC %04d-%02d-%02d %02d:%02d:%02d\n", // シリアルモニターに表示 | |
| DateStruct.Year, DateStruct.Month, DateStruct.Date, | |
| TimeStruct.Hours, TimeStruct.Minutes, TimeStruct.Seconds); | |
| } | |
| else { | |
| Serial.print("NTP Sync Error "); // シリアルモニターに表示 | |
| } | |
| } | |
| // ============================================================ | |
| // 時計表示関数 Clock screen display function. | |
| // ============================================================ | |
| void Clock_screen_display() { | |
| char buf[60]; // 文字列データ生成用 | |
| static const char *_wd[7] = {"Sun", "Mon", "Tue", "Wed", "Thr", "Fri", "Sat"}; // 曜日の定義 Definition of the day of the week. | |
| // 時刻・日付の取り出し Extraction of time and date. | |
| M5.Rtc.GetTime(&RTC_TimeStruct); // 時間情報の取り出し Get time information. | |
| M5.Rtc.GetData(&RTC_DateStruct); // 日付情報の取り出し Get date information. | |
| // 画面書き換え処理 Screen rewriting process. | |
| if (smin == RTC_TimeStruct.Minutes) { // 分単位の変更がかかったかどうか確認 | |
| tft.fillRect(82, 103, 35, 11, TFT_Color_BLACK); // 「秒」だけが変わった場合、秒表示エリアだけ書き換え Rewrite only the display area of seconds. | |
| } else { | |
| tft.fillRect(3, 97, 90, 17, TFT_Color_BLACK); // 「分」が変わったら時刻全体を書き換え Rewrite the entire screen when the "minute" changes. | |
| } | |
| tft.setTextColor(TFT_Color_GREEN); // 時刻表示色の設定 | |
| // 数字・文字表示部分 | |
| // 時刻表示 | |
| tft.setCursor(3, 114); // カーソル位置指定 | |
| tft.setFont(&FreeSansBold12pt7b); // フォント指定 | |
| tft.setTextSize(1); // フォントサイズ指定 | |
| sprintf(buf,"%02d:%02d", RTC_TimeStruct.Hours, RTC_TimeStruct.Minutes); // 文字列生成 | |
| tft.print(buf); // 画面に文字列を描画 | |
| // 日付表示 | |
| tft.setCursor(81, 36); // カーソル位置指定 | |
| tft.setFont(&FreeSans24pt7b); // フォント指定 | |
| tft.setTextSize(1); // フォントサイズ指定 | |
| tft.setTextColor(TFT_Color_WHITE); // フォント色の指定 | |
| sprintf(buf,"%02d/%02d", RTC_DateStruct.Month, RTC_DateStruct.Date); // 文字列生成 | |
| tft.print(buf); // 画面に文字列を描画 | |
| // 曜日表示（En) | |
| tft.setCursor(200, 36); // カーソル位置指定 | |
| tft.setFont(&FreeSans9pt7b); // フォント指定 | |
| tft.setTextSize(1); // フォントサイズ指定 | |
| tft.setTextColor(TFT_Color_WHITE); // フォント色の指定 | |
| sprintf(buf,"%s", _wd[RTC_DateStruct.WeekDay]); // 文字列生成 | |
| tft.print(buf); // 画面に文字列を描画 | |
| smin = RTC_TimeStruct.Minutes; // 表示した「分」を保存 | |
| } | |
| // ============================================================ | |
| // https要求実行 関数 | |
| // ============================================================ | |
| bool Https_GetRes(String url_str, // 引数１：要求（GET）実行先のURL（文字列） | |
| String *payload) { // 引数２：要求結果の格納用 | |
| if (WiFi.status() != WL_CONNECTED) // Wi-Fi接続の確認 | |
| return false; // 未接続の場合Falseを戻す | |
| // OpenWeather に対して天気データを要求 | |
| // https通信を行い、JSON形式データを取得する | |
| WiFiClientSecure *client = new WiFiClientSecure; // インスタンス生成 | |
| if(client) { | |
| client -> setCACert(ow_rootca); // ルート証明書のセット | |
| { | |
| HTTPClient https; // HTTPClientのhttpsスコープブロックを追加 | |
| Serial.print("[HTTPS] begin...\n"); // シリアルモニタに出力 | |
| if (https.begin(*client, url_str)) { // HTTPS要求セット | |
| Serial.print("[HTTPS] GET...\n"); // シリアルモニタに出力 | |
| int httpCode = https.GET(); // HTTPS要求実行 | |
| if (httpCode > 0) { // 結果コードが0以上の場合 | |
| Serial.printf("[HTTPS] GET... code: %d\n", httpCode); // シリアルモニタに出力 | |
| if (httpCode == HTTP_CODE_OK || httpCode == HTTP_CODE_MOVED_PERMANENTLY) { // 結果が正常出会った場合 | |
| *payload = https.getString(); // 要求結果を格納 | |
| Serial.println(*payload); // シリアルモニタに出力 | |
| return true; // 関数の戻り値として「True]を返す | |
| } | |
| } else { // 結果がエラーであった場合 | |
| Serial.printf("[HTTPS] GET... failed, error: %s\n", https.errorToString(httpCode).c_str()); // シリアルモニタにエラー出力 | |
| return false; // 関数の戻り値として「False]を返す | |
| } | |
| https.end(); // HTTPS処理の終了 | |
| } else { // 接続ができなかった場合 | |
| Serial.printf("[HTTPS] Unable to connect\n"); // シリアルモニタにエラー出力 | |
| return false; // 関数の戻り値として「False」を返す | |
| } | |
| } | |
| delete client; // インスタンスの削除 | |
| } else { // インスタンスが正常に生成できなかった場合 | |
| Serial.println("Unable to create client"); // シリアルモニタにエラーを出力 | |
| return false; // 関数の戻り値として「False」を返す | |
| } | |
| } | |
| // ============================================================ | |
| // OpenWeatherデータ取得：描画 関数 | |
| // ============================================================ | |
| void OpenWeather_get_print() { | |
| // 天気情報取得用URLの生成 | |
| String url = "https://" + String(sitehost); // 要求先ホストの指定 | |
| url += "/data/2.5/weather?"; // APIの指定 | |
| url += "lat=" + String(geo_lat) + "&lon=" + String(geo_lon); // 経度、緯度の指定 | |
| url += "&units=metric&lang=" + lang; // 言語設定の指定 | |
| url += "&appid=" + Api_KEY; // APIキーの指定 | |
| Serial.println(url); // シリアルポート出力 | |
| // 天気情報の取得とJSONデータからの値の取得 | |
| String payload; // 取得データ格納用 | |
| // OpenWeatherへのデータを要求が正常に行えた場合 | |
| if (Https_GetRes(url, &payload)){ | |
| DeserializationError error = deserializeJson(n_jsondata, payload); // JSONデータの格納 | |
| if (error) { // JSONデータ格納に失敗した場合 | |
| Serial.print(F("deserializeJson() failed: ")); // シリアルモニタに出力 | |
| Serial.println(error.f_str()); // シリアルモニタにエラーを出力 | |
| } else { // 正常な場合はJSON形式データから値を取得して画面表示 | |
| // JSON形式データから値の取得 | |
| const int weather_id = n_jsondata["weather"][0]["id"]; // 天気IDの取得 | |
| const String weather_str = n_jsondata["weather"][0]["description"]; // 天気概況の取得 | |
| const double temp_v = n_jsondata["main"]["temp"]; // 気温の取得 | |
| const double temp_p = n_jsondata["main"]["pressure"]; // 気圧の取得 | |
| const double temp_h = n_jsondata["main"]["humidity"]; // 湿度の取得 | |
| String weather_v; // 天気格納用 | |
| String temp_v_str = String(int(temp_v)) + "℃"; // 温度を格納 | |
| String temp_p_str = String(int(temp_p)) + "hPa"; // 気圧を格納 | |
| String himi_v_str = String(int(temp_h)) + "％"; // 湿度を格納 | |
| // 画面表示内容の生成 | |
| if (weather_id >= 200 && weather_id < 600) { // 雨と判定 | |
| weather_v = "雨"; | |
| Weather_Stats = 1; // 天気ステータス設定 | |
| } | |
| else if (weather_id >= 600 && weather_id < 700) { // 雪と判定 | |
| weather_v = "雪"; | |
| Weather_Stats = 2; // 天気ステータス設定 | |
| } | |
| else if (weather_id >= 700 && weather_id < 800) { // その他の天気と判定 | |
| weather_v = weather_str; // その他の天気概要の設定 | |
| Weather_Stats = 3; // 天気ステータス設定 | |
| } | |
| else if (weather_id == 800) { // 晴と判定 | |
| weather_v = "晴れ"; | |
| Weather_Stats = 4; // 天気ステータス設定 | |
| } | |
| else { // 曇りと判定 | |
| weather_v = "曇り"; | |
| Weather_Stats = 5; // 天気ステータス設定 | |
| } | |
| // 画面表示文字列の文字データへの変換と表示（efont) | |
| M5.Lcd.setTextColor(TFT_Color_WHITE, TFT_Color_BLACK); // フォントカラーの指定 | |
| char charBuf[100]; // 文字列バッファの定義 | |
| tft.setFont(&FreeSans9pt7b); | |
| weather_v.toCharArray(charBuf, 100); // 天気の文字列変換 | |
| printEfont(charBuf, 129, 41, 1); // 天気の描画 | |
| temp_v_str.toCharArray(charBuf, 100); // 気温の文字列変換 | |
| printEfont(charBuf, 129, 59, 1); // 気温の描画 | |
| temp_p_str.toCharArray(charBuf, 100); // 気圧の文字列変換 | |
| printEfont(charBuf, 129, 77, 1); // 気圧の描画 | |
| himi_v_str.toCharArray(charBuf, 100); // 湿度の文字列変換 | |
| printEfont(charBuf, 205, 59, 1); // 湿度の描画 | |
| } | |
| } | |
| // OpenWeatherへのデータを要求が失敗した場合 | |
| else { | |
| Serial.println("Connection failed (OpenWeather)"); // シリアルモニタに出力 | |
| } | |
| } | |
| // ============================================================ | |
| // 起動時処理 関数 | |
| // ============================================================ | |
| void setup() { | |
| // put your setup code here, to run once: | |
| M5.begin(); // M5StickCPlusの初期化 | |
| M5.Lcd.setRotation(1); // 画面の向きを指定（eFont用） | |
| // シリアルコンソールの開始 Start serial console. | |
| Serial.begin(115200); // シリアル通信の開始 | |
| delay(500); // シリアル通信確保までの待機 | |
| // initialise the display | |
| tft.init(135, 240); // 画面の初期化（AdaftuitGFX用） | |
| tft.setRotation(3); // 画面の向きを指定（AdafruitGFX用） | |
| tft.fillScreen(TFT_Color_BLACK); // 画面全体を黒で塗りつぶし | |
| // Karakuri-Mushaロゴの描画 | |
| tft.setCursor(30, 125); // カーソル位置指定 | |
| tft.setFont(&FreeSans9pt7b); // フォント指定 | |
| tft.setTextSize(1); // フォントサイズ指定 | |
| tft.setTextColor(TFT_Color_WHITE); // フォントカラー指定 | |
| tft.print("@KATAKURI-MUSHA"); // ロゴ文字の表示 | |
| tft.drawBitmap(80, 27, (uint8_t*)epd_bitmap_genroku_icon, 80, 80, TFT_Color_WHITE,TFT_Color_BLACK); // げんろく画像の描画 | |
| // Wi-Fiアクセスポイント情報取得 | |
| preferences.begin("AP-info", true); // 名前空間"AP-info"の指定と読み込みモード（true) | |
| preferences.getString("ssid", ssid, sizeof(ssid)); // ssidの値を指定 | |
| preferences.getString("pass", password, sizeof(password)); // passwordの値を指定 | |
| preferences.end(); // 処理終了 | |
| // Wi-Fi接続 We start by connecting to a WiFi network | |
| Serial.println(); // シリアルモニタに出力 | |
| Serial.println(); // シリアルモニタに出力 | |
| Serial.print("Connecting to "); // シリアルモニタに出力 | |
| Serial.println(ssid); // シリアルモニタに出力 | |
| WiFi.begin(ssid, password); // Wi-Fi接続開始 | |
| while (WiFi.status() != WL_CONNECTED) { // Wi-Fi接続の状況を監視（WiFi.statusがWL_CONNECTEDになるまで繰り返し | |
| delay(500); | |
| Serial.print("."); } | |
| // Wi-Fi接続結果をシリアルモニタへ出力 | |
| Serial.println(""); // シリアルモニタに出力 | |
| Serial.println("WiFi connected"); // シリアルモニタに出力 | |
| Serial.println("IP address: "); // シリアルモニタに出力 | |
| Serial.println(WiFi.localIP()); // シリアルモニタに出力 | |
| // 時刻同期関数 | |
| time_sync(NTPSRV, GMT_OFFSET, DAYLIGHT_OFFSET); // 時刻同期関数の実行 | |
| // 画面内の固定表示部分の描画 | |
| tft.fillScreen(TFT_Color_BLACK); // 画面を黒で塗りつぶし | |
| tft.setCursor(30, 133); // カーソル位置指定 | |
| tft.setFont(&FreeSans9pt7b); // フォント指定 | |
| tft.setTextSize(1); // フォントサイズ指定 | |
| tft.setTextColor(TFT_Color_WHITE); // フォントカラー指定 | |
| tft.print("@KATAKURI-MUSHA"); // ロゴ文字の表示 | |
| tft.fillRect(3, 92, 236, 2, TFT_Color_RED); // 横線（TFT_Color_RED）１ | |
| tft.fillRect(132, 96, 109, 2, TFT_Color_RED); // 横線（TFT_Color_RED）２ | |
| tft.fillRect(148, 100, 93, 2, TFT_Color_RED); // 横線（TFT_Color_RED）３ | |
| tft.fillRect(164, 104, 77, 2, TFT_Color_RED); // 横線（TFT_Color_RED）４ | |
| tft.fillRect(180, 108, 61, 2, TFT_Color_RED); // 横線（TFT_Color_RED）５ | |
| tft.fillRect(196, 112, 45, 2, TFT_Color_RED); // 横線（TFT_Color_RED）６ | |
| // パラメータ名の記述 | |
| M5.Lcd.setTextColor(TFT_Color_WHITE, TFT_Color_BLACK); // フォントカラーの指定 | |
| printEfont("天気:", 85, 41, 1); // パラメータ名描画１ | |
| printEfont("気温:", 85, 59, 1); // パラメータ名描画２ | |
| printEfont("気圧:", 85, 77, 1); // パラメータ名描画３ | |
| printEfont("湿度:", 167, 59, 1); // パラメータ名描画３ | |
| // OpenWeatherからのデータ取得と描画 | |
| OpenWeather_get_print(); // OpenWeatherからのデータ取得描画関数の実行 | |
| } | |
| // ============================================================ | |
| // 繰り返し処理 関数 | |
| // ============================================================ | |
| void loop() { | |
| M5.update(); // M5状態更新 M5 status update. | |
| Clock_screen_display(); // 時計表示 Clock display. | |
| delay(980); | |
| // Wi-Fi接続の切断処理 | |
| if (WiFi.status() == WL_CONNECTED) { // Wi-Fiからの切断 | |
| Serial.println("Disconnect from WiFi"); // シリアルモニタに出力 | |
| WiFi.disconnect(); // Wi-Fi接続の切断 | |
| while (WiFi.status() !=WL_DISCONNECTED) { // Wi-Fi接続の状況を監視（WiFi.statusがWL_DISCONNECTEDになるまで繰り返し | |
| delay(500); // 待機 | |
| Serial.print(".");} // シリアルモニタに出力 | |
| Serial.println(""); // Wi-Fi切断結果をシリアルモニタへ出力 | |
| Serial.println("WiFi disconnected"); // Wi-Fi切断結果をシリアルモニタへ出力 | |
| } | |
| // 天気アイコンの表示処理（2つのアイコンを交互に表示することでアニメ化） | |
| switch (Weather_Stats) { // Weather＿Statsの値によって表示するアイコンを変更 | |
| case 1: | |
| tft.drawBitmap(1, 8, (uint8_t*)epd_bitmap_Rain01, 80, 80, TFT_Color_BLUE,TFT_Color_BLACK); // 雨：アイコン１描画 | |
| delay(800); | |
| tft.drawBitmap(1, 8, (uint8_t*)epd_bitmap_Rain02, 80, 80, TFT_Color_BLUE,TFT_Color_BLACK); // 雨：アイコン２描画 | |
| delay(800); | |
| break; | |
| case 2: | |
| tft.drawBitmap(1, 8, (uint8_t*)epd_bitmap_Snow01, 80, 80, TFT_Color_WHITE,TFT_Color_BLACK); // 雪：アイコン１描画 | |
| delay(800); | |
| tft.drawBitmap(1, 8, (uint8_t*)epd_bitmap_Snow02, 80, 80, TFT_Color_WHITE,TFT_Color_BLACK); // 雪：アイコン２描画 | |
| delay(800); | |
| break; | |
| case 3: | |
| tft.drawBitmap(1, 8, (uint8_t*)epd_bitmap_Caut01, 80, 80, TFT_Color_YELLOW,TFT_Color_BLACK); // 注意：アイコン１描画 | |
| delay(800); | |
| tft.drawBitmap(1, 8, (uint8_t*)epd_bitmap_Caut02, 80, 80, TFT_Color_YELLOW,TFT_Color_BLACK); // 注意：アイコン２描画 | |
| delay(800); | |
| break; | |
| case 4: | |
| tft.drawBitmap(1, 8, (uint8_t*)epd_bitmap_Sun01, 80, 80, TFT_Color_ORANGE,TFT_Color_BLACK); // 晴れ：アイコン１描画 | |
| delay(800); | |
| tft.drawBitmap(1, 8, (uint8_t*)epd_bitmap_Sun02, 80, 80, TFT_Color_ORANGE,TFT_Color_BLACK); // 晴れ：アイコン２描画 | |
| delay(800); | |
| break; | |
| case 5: | |
| tft.drawBitmap(1, 8, (uint8_t*)epd_bitmap_Cloud01, 80, 80, TFT_Color_LIGHTGREY,TFT_Color_BLACK); // 曇り：アイコン１描画 | |
| delay(800); | |
| tft.drawBitmap(1, 8, (uint8_t*)epd_bitmap_Cloud02, 80, 80, TFT_Color_LIGHTGREY,TFT_Color_BLACK); // 曇り：アイコン２描画 | |
| delay(800); | |
| break; | |
| } | |
| } |
（２）アイコン画像定義ファイル
| #include <M5StickCPlus.h> // M5StickC 用ライブラリ | |
| // 'genroku-icon', 80x76px | |
| const unsigned char epd_bitmap_genroku_icon [] PROGMEM = { | |
| 0xff, 0xff, 0xff, 0xd5, 0x9b, 0xff, 0x3f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xd5, 0x9a, 0xff, | |
| 0x5f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xfe, 0x55, 0x9a, 0x7f, 0x5f, 0xff, 0xff, 0xff, 0xff, 0xff, | |
| 0xfe, 0x55, 0xba, 0xbf, 0x6f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xfe, 0xd5, 0xaa, 0xbf, 0x6f, 0xff, | |
| 0xff, 0xff, 0xff, 0xff, 0xfe, 0xb5, 0xaa, 0xbf, 0x6f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xfe, 0xab, | |
| 0xaa, 0xbf, 0x6f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xfe, 0xaa, 0xdc, 0xbf, 0x6f, 0xff, 0xff, 0xff, | |
| 0xff, 0xff, 0xff, 0xdc, 0xd4, 0xbf, 0x6f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x55, 0xd4, 0xbf, | |
| 0x6f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x66, 0xc4, 0xbe, 0xef, 0xff, 0xff, 0xff, 0xff, 0xff, | |
| 0xff, 0xea, 0x00, 0x7e, 0xef, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xb0, 0x00, 0x7d, 0xef, 0xff, | |
| 0xff, 0xff, 0xff, 0xff, 0xff, 0xc0, 0x00, 0x3d, 0xef, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xc0, | |
| 0x00, 0x1b, 0xef, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x80, 0x00, 0x03, 0xdf, 0xff, 0xff, 0xff, | |
| 0xff, 0xff, 0xff, 0x00, 0x00, 0x07, 0xdf, 0xff, 0xff, 0xff, 0xff, 0xff, 0xfe, 0x00, 0x00, 0x0f, | |
| 0xdf, 0xff, 0xff, 0xff, 0xff, 0xff, 0xfe, 0x00, 0x00, 0x1f, 0xbf, 0xff, 0xff, 0xff, 0xff, 0xff, | |
| 0xfc, 0x00, 0x00, 0x3f, 0xbf, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf3, 0xc0, 0x00, 0x7f, 0x3f, 0xff, | |
| 0xff, 0xff, 0xff, 0xff, 0xf7, 0xc0, 0x00, 0xff, 0x7f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xef, 0xc0, | |
| 0x01, 0xfe, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xef, 0xc0, 0x07, 0xfc, 0x7f, 0xff, 0xff, 0xff, | |
| 0xff, 0xff, 0xff, 0xc0, 0x0f, 0xf8, 0x7f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xdf, 0xc0, 0x3f, 0xf0, | |
| 0x3f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xdf, 0xf1, 0xff, 0xe0, 0x3f, 0xff, 0xff, 0xff, 0xff, 0xff, | |
| 0xdf, 0xff, 0xff, 0xc0, 0x1f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xef, 0xff, 0xff, 0x00, 0x0f, 0x07, | |
| 0xff, 0xff, 0xff, 0xff, 0xe7, 0xff, 0xfc, 0x00, 0x0c, 0xfb, 0xff, 0xff, 0xff, 0xff, 0xf3, 0xff, | |
| 0xf0, 0x00, 0x03, 0xff, 0xff, 0xff, 0xff, 0xf8, 0x78, 0xff, 0x80, 0x00, 0x03, 0xc7, 0xff, 0xff, | |
| 0xff, 0xef, 0x98, 0x00, 0x00, 0x00, 0x01, 0xb7, 0xff, 0xff, 0xff, 0xef, 0xf0, 0x00, 0x00, 0x00, | |
| 0x01, 0x73, 0xff, 0xff, 0xff, 0xe6, 0x70, 0x00, 0x00, 0x00, 0x00, 0xf3, 0xff, 0xff, 0xff, 0xef, | |
| 0xa0, 0x00, 0x00, 0x50, 0x00, 0x77, 0xff, 0xff, 0xff, 0xf3, 0xe0, 0x00, 0x3f, 0xff, 0xe0, 0x27, | |
| 0xff, 0xff, 0xff, 0xf5, 0xc0, 0x0f, 0xff, 0xff, 0xf0, 0x07, 0xff, 0xff, 0xff, 0xfb, 0x80, 0x7f, | |
| 0xf7, 0xff, 0xf8, 0x0f, 0xff, 0xff, 0xff, 0xfc, 0x81, 0xff, 0xed, 0xff, 0xfc, 0x07, 0xff, 0xff, | |
| 0xff, 0xff, 0x07, 0xf3, 0xf7, 0xf0, 0xfc, 0x03, 0xff, 0xff, 0xff, 0xfe, 0x0f, 0xeb, 0xf3, 0xcf, | |
| 0xb6, 0x00, 0xff, 0xff, 0xff, 0xfe, 0x1f, 0xf5, 0xf3, 0xb8, 0xce, 0x00, 0x1f, 0xff, 0xff, 0xfc, | |
| 0x3c, 0xf9, 0xff, 0x60, 0x6e, 0x01, 0xef, 0xff, 0xff, 0xe0, 0x07, 0x9d, 0xfe, 0xc0, 0x2e, 0x00, | |
| 0xf7, 0xff, 0xff, 0xc0, 0x6c, 0x6f, 0xfe, 0x80, 0x1f, 0x00, 0x97, 0xff, 0xff, 0xf0, 0x50, 0x17, | |
| 0xfe, 0x80, 0x37, 0x80, 0x03, 0xff, 0xff, 0xe0, 0x60, 0x1b, 0xfe, 0x81, 0xf7, 0x80, 0x2b, 0xff, | |
| 0xff, 0xc0, 0xa0, 0x0b, 0xfe, 0x80, 0xff, 0xc0, 0x0f, 0xff, 0xff, 0x80, 0xa0, 0x0b, 0xff, 0x40, | |
| 0x6f, 0xe0, 0x1f, 0xff, 0xff, 0xc0, 0xa0, 0x7b, 0xff, 0x60, 0x5f, 0xf0, 0x13, 0xff, 0xff, 0x01, | |
| 0xa0, 0x3b, 0xff, 0x9d, 0xdf, 0xf0, 0x1d, 0xff, 0xff, 0x81, 0xd0, 0x1b, 0xff, 0xe2, 0x7f, 0xf0, | |
| 0xce, 0xff, 0xfe, 0x87, 0xe8, 0x37, 0xff, 0xff, 0xff, 0xf8, 0x46, 0xff, 0xfd, 0x07, 0xf7, 0xcf, | |
| 0xff, 0xff, 0xff, 0x00, 0x80, 0xff, 0xfd, 0x0f, 0xff, 0x7f, 0xff, 0xff, 0xf9, 0x95, 0xe0, 0xff, | |
| 0xff, 0x8f, 0xff, 0xff, 0xff, 0xff, 0xef, 0xd1, 0xec, 0xff, 0xfa, 0x67, 0xff, 0xff, 0xe3, 0xff, | |
| 0xdf, 0x82, 0x2c, 0xff, 0xf8, 0xe7, 0xff, 0xff, 0x03, 0xff, 0xef, 0xaa, 0xaf, 0xff, 0xfa, 0xc7, | |
| 0xff, 0xfe, 0x03, 0xff, 0xf7, 0x05, 0x2f, 0xff, 0xfe, 0x96, 0x61, 0xfe, 0x03, 0xff, 0xf8, 0x40, | |
| 0x2f, 0xff, 0xfe, 0x93, 0x7d, 0xff, 0x87, 0xff, 0xff, 0x8b, 0x1f, 0xff, 0x7e, 0x88, 0x3d, 0xff, | |
| 0xef, 0xdf, 0xff, 0x86, 0x1f, 0xff, 0x7e, 0xa9, 0xfd, 0xff, 0xef, 0xff, 0xff, 0x06, 0xbf, 0xff, | |
| 0x7e, 0x34, 0x1b, 0xff, 0xd3, 0xbf, 0xfe, 0x3c, 0x3f, 0xff, 0x7f, 0x54, 0x47, 0xfc, 0x3c, 0xff, | |
| 0xf8, 0x78, 0x3f, 0xff, 0x7f, 0x9b, 0x1f, 0xff, 0xff, 0xff, 0xe0, 0x60, 0xbf, 0xff, 0x7f, 0x8b, | |
| 0x8f, 0xff, 0xff, 0xfe, 0x00, 0x80, 0xff, 0xff, 0xdb, 0xa7, 0x40, 0x3f, 0xff, 0x00, 0x03, 0x00, | |
| 0x9f, 0xff, 0x00, 0x30, 0xf0, 0x00, 0x00, 0x60, 0x0f, 0x01, 0x0f, 0xff, 0x00, 0x10, 0x08, 0x00, | |
| 0x00, 0x00, 0x7f, 0x01, 0x01, 0xff, 0x00, 0x10, 0x0e, 0x00, 0x00, 0x00, 0xff, 0x82, 0x00, 0x7f, | |
| 0x00, 0x18, 0x0f, 0xf0, 0xc0, 0x40, 0xff, 0x80, 0x00, 0x0f, 0x00, 0x08, 0x0f, 0xf0, 0x07, 0x00, | |
| 0xf8, 0x80, 0x00, 0x01, 0x00, 0x08, 0x0f, 0xf0, 0x00, 0x00, 0xe0, 0xc0, 0x00, 0x00, 0x00, 0x04, | |
| 0x0c, 0x78, 0x00, 0x00, 0x00, 0xc0, 0x00, 0x00 | |
| }; | |
| // 'Cloud01', 80x80px | |
| const unsigned char epd_bitmap_Cloud01 [] PROGMEM = { | |
| }; | |
| // 'Cloud02', 80x80px | |
| const unsigned char epd_bitmap_Cloud02 [] PROGMEM = { | |
| }; | |
| // 'Rain01', 80x80px | |
| const unsigned char epd_bitmap_Rain01 [] PROGMEM = { | |
| }; | |
| // 'Rain02', 80x80px | |
| const unsigned char epd_bitmap_Rain02 [] PROGMEM = { | |
| }; | |
| // 'Sun01', 80x80px | |
| const unsigned char epd_bitmap_Sun01 [] PROGMEM = { | |
| }; | |
| // 'Sun02', 80x80px | |
| const unsigned char epd_bitmap_Sun02 [] PROGMEM = { | |
| }; | |
| // 'Snow01', 80x80px | |
| const unsigned char epd_bitmap_Snow01 [] PROGMEM = { | |
| }; | |
| // 'Snow02', 80x80px | |
| const unsigned char epd_bitmap_Snow02 [] PROGMEM = { | |
| }; | |
| // 'Caut01', 80x80px | |
| const unsigned char epd_bitmap_Caut01 [] PROGMEM = { | |
| }; | |
| // 'Caut02', 80x80px | |
| const unsigned char epd_bitmap_Caut02 [] PROGMEM = { | |
| }; | |
| // Array of all bitmaps for convenience. (Total bytes used to store images in PROGMEM = 4896) | |
| const int epd_bitmap_allArray_LEN = 11; | |
| const unsigned char* epd_bitmap_allArray[epd_bitmap_allArray_LEN] = { | |
| epd_bitmap_genroku_icon, | |
| epd_bitmap_Cloud01, | |
| epd_bitmap_Cloud02, | |
| epd_bitmap_Rain01, | |
| epd_bitmap_Rain02, | |
| epd_bitmap_Sun01, | |
| epd_bitmap_Sun02, | |
| epd_bitmap_Snow01, | |
| epd_bitmap_Snow02, | |
| epd_bitmap_Caut01, | |
| epd_bitmap_Caut02 | |
| }; |
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を使っ […]