LoginSignup
2
0

More than 1 year has passed since last update.

M5Stack Core2で降水確率を表示する

Last updated at Posted at 2022-05-13

アウトプットは大事
雨が降っても基本傘はささないタイプなので雨はあまり気にしない

天気予報を取得して降水確率を表示する

気象庁のHPからJsonデータを取得して
M5StackCore2に表示したい
天気予報ではなく、降水確率を知りたい

今回も様々なページを参考にさせていただきました。
「UIFLOW JSON」とかで検索してね。
(M5Stackキーワードで調べちゃうと、ArudinoのほうがメインなのでUIFLOWで検索したほうがヒットしやすいことに気が付きました)

つまづきまくったスタート、デバッグも試行錯誤

Wifiを接続して、HTTPブロックでJson取得はできている。
参考ページの通りに作ってみたけど、表示されない。
ひとつづつ分解しながら確認していっています。

GetDataは内容がラベル表示されました。
変数JsonDataにGetDataを代入、ラベル表示させるとなにも表示されない。。
リストの空チェックブロックを追加したらFalseと表示されたので、中身は入っているということですね。。

UIFLOWでのデバッグの仕方もわからない:tired_face:
ラベルに表示させるにしても表示されなかったり失敗してしまう…もはや中身がわからないから解決のヒントが思いつかない。
(表示させる変数が違ったかもしれない。そういうケアレスミス多すぎ)

グラフィックのテキスト表示ブロックを使ってJSON形式に変換して変数の表示させると中身が確認できました。
image.png
リストとして取得できているデータを確認しながら、抽出、整形していきました。

問題解決、降水確率だけ表示できた

  • リスト化
  • リストの中から必要KeyのValueを抽出

を必要な項目にぶち当たるまで繰り返す。

VSCodeでJsonを一度表示させて、何番目のデータか確認しながらやるとはかどりました。
緑がリストの処理で、ピンクがマップで処理しているところ
image.png
紫の数値が降水確率なのですが。
気象庁の降水確率は以下の内容でした

  • 当日、翌日が表示されている
  • 6時間ごとの%
  • すでに経過した時間帯はJsonから削除されていて、HTML上では”-”での表記
  • %はMAXで8個、MINで5個

コード的にはよろしくないと思いますが、%をMAXの8個になるまで項目数を追加して
当日分だけの4個になるよう後ろから削除していくというループブロックを付けました。

関数ブロックでHTTPからラベル更新までを定義して、ボタンを押したら再取得するようにしました。
image.png

image.png
色がやばい
本当はもっと市町村まで狭めた予報をGETしたかった。

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0