Help us understand the problem. What is going on with this article?

M5Stackでいろんなデータを取得・表示してみよう!

M5Stackとは

M5Stackは、320 x 240 TFTカラーディスプレイ、microSDカードスロット、スピーカーを備えたコンパクトで便利な開発モジュールです。ESP32を搭載しているため、Wi-FiおよびBluetooth通信を扱え、Arduino環境での開発が可能です。

引用元:M5Stack Basic - スイッチサイエンス

Wi-Fi通信ができて、なおかつディスプレイがある。つまり・・・

インターネットの情報が活用できて、取得したデータをもとにディスプレイに表示できる!!

ということです。

ただ、ディスプレイに表示すると言っても取得結果を文字で表示するだけでは物足りなさを感じてしまいます:sleepy:
せっかくなら見た目もいい感じにしてみたい・・・。
そこで今回は、インターネットの情報を活用して、なおかつ手軽にリッチな見た目で表示する方法をご紹介します:bulb:

作品例

  • お天気情報の表示:sunny:

  • 電車の遅延状況の表示:tram:

作り方

上記のような作品を作る時のおおまかな流れについて説明します。
具体的な作り方が気になる人は、上記のお天気情報の記事はありますのでこちらからどうぞ!

準備物

  • M5Stack
  • microSDカード

作りたいものを決める

まずはここからです。こういうものが作りたいなーというのを考えましょう。
特に思いつかなければ、次にご紹介するAPIの一覧から探すのも手です。

APIの選定

何を作りたいかを決めたら、そのデータを取得できるAPIを探します。
私の場合ですが、お天気情報であればdrk7.jpを、遅延状況であれば鉄道遅延情報のjsonを利用しました。
こちらの記事で一覧になっているので、参考にすると良いかもしれませんね。

使用するAPIを決めたら、そのAPIがどのようなデータが取得できるのかを頭の中に入れておきましょう。
次の「画像の作成」の際に、どこに何を表示するかを考えるためにです。

画像の作成

M5Stackのディスプレイサイズは320x240であるため、画像に関してもそのサイズに合わせる必要があります。
Windowsであればペイントを使ってサイズ指定をした上で画像の準備を進めていきます。
無題.png

画像作成時のポイントとしては・・・

変動する値以外の文字は画像に入れ込もう!

たとえば、お天気情報であれば、以下のような画像を利用しています。
20190711224334.jpg
「0-」や「6-」はその時間からの降水確率を表していますが、時間の範囲は変わらないため画像に入れ込んでいます。
こういった文字の描画はM5Stack側でも出来ますが、文字の位置調整が少し大変で、また日本語の文字の描画は少し面倒なので、極力手間を減らすために画像に入れちゃいましょう:bulb:

APIによるデータの取得

Wi-Fi接続

こちらの記事を参考に、Wi-Fi接続してみましょう。

データの取得

HTTPClientを利用してAPIからデータを取得します。
下記では変数responseに取得結果が入ります。

#include <HTTPClient.h>
:
HTTPClient http;
http.begin("APIのURL");
int httpCode = http.GET();
if (httpCode > 0) {
    String response = http.getString();
    //以降、データに応じた処理
} else {
    Serial.println("Error on HTTP request");
}
http.end();

取得したデータに応じた処理

レスポンスの形式がJSONであれば、deserializeJSONを利用するのが良いです。keyを辿って目的の値を取得することができます。(実際に使っている例はこちらの記事のコードを参考にしてください)

また、レスポンスにAという値が含まれていたら1を、含まれてなければ2を描画するものを考えているのであれば、deserializeJSONを利用しなくてもStringクラスのindexOf関数を利用すると良いかと思います。

画像や文字の描画

画像に関してはM5.Lcd.drawJpgFileで描画をしましょう!
320x240で画像を用意すれば、M5Stackのスクリーン全体を使って表示されます。
サンプルコードはこちら

文字に関しては以下の関数を使って描画しましょう!

  • 色: M5.Lcd.setTextColor(COLOR);
  • テキストサイズ: M5.Lcd.setTextSize(SIZE);
  • 描画位置: M5.Lcd.setCursor(x,y);
  • 描画: M5.Lcd.print(TEXT);

おわりに

今回はM5StackのWi-Fi通信とディスプレイを活用した、データの取得・表示方法についてご紹介しました。
画像の準備をするだけで、見た目も良いものが手軽に作れるので、ぜひぜひ皆さんのアイディアを形にしてみてください!

kuracux
stmn-co
名古屋のITスタートアップベンチャーです。「一人でも多くの人に、感動を届け、幸せを広める。」の経営理念のもと、 エンゲージメント経営コンサルティング「TUNAG」などのサービスを展開しています。
https://stmn.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした