m5stackで3時間ごとの天気予報を表示する

やりたいこと

どうも

あーした　てんきに　なぁあれ

で明日の天気を操作できるようになりたい、「とま」です。

でもそんなことできないので天気予報を知りたいです。

そんなときに、スマホで見れるでしょって思うかもしれません。

たしかに見れますが、「電源オン→パスワード入力→スワイプ」とめんどうですよね。

そこで、m5stackに搭載されているボタンを押すだけで天気予報が表示できるようにします。

必要なもの

以下のものが必要です。

m5stack（必須）

紳士のたしなみとして持ってますよね？持ってないなら買いましょう。

m5stackならなんでも大丈夫です。私はm5stack fireを使っています。

wifi環境（必須）

ネットワークにつながらないと天気情報を取得できませんので必要です。

以下のどちらかを準備してください。

固定回線のwifiルーター
スマホのテザリング

SDカード（必須）

天気予報をアイコン表示するためのJPGファイルを格納しておきます。

openweathermapのアカウント（必須）

天気予報はopenweathermapのAPIにより取得しています。アカウントを作成する必要があります。

導入手順

サンプルプログラムを使うためには以下の手順を行う必要があります。

openweathermapのアカウント取得する
m5stackのOS（UIFLOW）の導入
m5stackにプログラムを転送する
SDカードに画像を保存してm5stackに差し込む
m5stackのボタンを押して天気予報を表示する

openweathermapのAPI Keyを取得する

openweathermapのアカウントを取得する

openweathermapのサイトにアクセスします。

以下を入力します。

username：ユーザーネーム
email：登録するメールアドレス
password：パスワード
Repeat Password：パスワードの確認のためもう一度入力する
I am 16 years old and over：16歳以上ならばチェックする
I agree with Privacy Policy：プライバシーポリシーポリシーなどを読み、同意するならチェックする
私はロボットではありません：ロボットでないならチェックする

openweathermapのAPI Keyを表示する

アカウント作成するとホーム画面になっています。そこで「API keys」タブをクリックします。すると下記の画面になります。

そこからAPI Keyがわかります。

登録したメールアドレスにもAPI Keyが通知されています。

m5stackのOS（UIFLOW）の導入

サイトからM5Burnerをダウンロードします。

m5stackを接続するためにCP210X Driverも必要ですのでダウンロードします。

macの場合には「アプリケーション」にインストールする必要があります。でないとOSのダウンロードができません。

左ウィンドウからUIFLOWのダウンロードができます。

Eraseボタンでm5stackを初期化して、BurnボタンからM5stackに書き込んでください。

m5stackにプログラムを転送する

「Visual Studio Code」をインストールしM5Stackを接続する

転送プログラムとしてVisual Studio Codeを使用しましたのでインストールします。サイトからダウンロードしてください。

m5stack用の機能拡張をインストールする

Extentionsをインストールするので、□が四つある場所をクリックします。

「Search Extentions in Marketpalce」に「m5stack」と入力します。現れた「vscode-m5stack-mpy」をインストールします。

m5stackをUSBモードにします

プログラムを転送したいためUSBモードにします。

電源ボタンをクリックして再起動した後に、すぐに「Cボタン（一番右のボタン）」を押します。するとsetup画面になります。

そこからキー操作で「Wsitch to USB mode」を選択します。

これでUSBモードにすることができました。

VS CodeとPCを接続します。

下に「Add M5Stack」と出ていますのでクリックします。すると上にどれと接続するか出るのでm5stackのものをチェックしてOKを押します。

m5stackにプログラムを転送します

ファイルメニューに「M5STACK DEVICE」があります。開くとプログラムリストを見ることができます。

「apps」の右にuploadボタンがありますのでそこからアップロードします。

ほかのプログラムは基本的にルートに配置します（しています）。

上記の例でいうと、/dev/cu.SLAB_USBtoUARTと書かれている箇所にカーソルを充てると同様にアップロードボタンが現れます。

アップロードするファイルは2つです。

WeatherStaion.py（apps配下）
ntptime.py（ /dev/cu.SLAB_USBtoUART 配下）

WeatherStaion.pyの変更

以下の部分を変更します。

g_api_key   = "input your key"# Global input your api key
g_city_code = 0 # Global input your city code

g_api_keyは先ほど見たAPI keyを入れます。

g_city_codeは以下の操作から入れます。

http://bulk.openweathermap.org/sampleを開くとcity.list.json.gzがありますので、ダウンロードして解凍します。すると町と対応するcodeの一覧がありますので、そこから天気予報を表示したいcodeをg_city_codeに入れてください。

ntptime.py の変更

ntptime.pyの以下の場所を変更します。

NTP_DELTA = 3155673600

から

NTP_DELTA = 3155673600 - (9*60*60)

に変更します。

SDカードに画像を保存してm5stackに差し込む

SDカードにgithubに挙げているデータを格納します。SD直下にlog.jpgファイルが存在するように配置してください。

m5stackのボタンを押して天気予報を表示する

ボタンを押せば天気予報を表示します。

Aボタン（一番左）：画面のON/OFFする
Bボタン（真ん中）：画像大での天気予報表示する
Cボタン（一番右）：画像小と気温予報を表示する