M5StackのWiFi設定をSDカードから読み込ーむ（UIFlow 1.9.0）

# はじめに

バスがあと何分で着くかだけを表示するミニサイネージを作ったのですが、これを販売する際に各家庭のWiFiの設定が必要になります。そこで、SDカードにWiFi設定を書き込んでもらうことで接続できるようにしました。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">最寄りのバス停にバスがあと何分で着くかだけを表示するものなんだけど、1番よく使う<a href="https://twitter.com/hashtag/%E7%86%8A%E6%9C%AC?src=hash&amp;ref_src=twsrc%5Etfw">#熊本</a> <a href="https://twitter.com/hashtag/MaaS?src=hash&amp;ref_src=twsrc%5Etfw">#MaaS</a> <a href="https://twitter.com/hashtag/M5Stack?src=hash&amp;ref_src=twsrc%5Etfw">#M5Stack</a> <a href="https://twitter.com/hashtag/GTFS?src=hash&amp;ref_src=twsrc%5Etfw">#GTFS</a> <a href="https://t.co/pjmSrhtCe0">pic.twitter.com/pjmSrhtCe0</a></p>&mdash; がちもとさん@メタバース熊本 (@sotongshi) <a href="https://twitter.com/sotongshi/status/1471274080100040705?ref_src=twsrc%5Etfw">December 16, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

# 開発環境
- Windows 10 PC
- M5Stack

# 実装

1．M5Stackの初期設定はこちらからお願いします

https://qiita.com/SatoshiGachiFujimoto/items/33b7e23b232b3bfecda6

2．M5Stackを起動したらSetupボタンを押し、internet modeでM5Stackを起動します

|Setup|Switch mode|WiFi Select|API Key|
|:--|:--|:--|:--|
|![269893086_1281722332328893_5202382083153560272_n.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/b953d9bc-8ad0-c034-4e23-29b4bae5b47b.jpeg)|![269942523_2633103400169744_6138935889549450247_n.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/1750a7dd-7374-cb00-e0ce-adb3bbc253b8.jpeg)|![270202412_1055651548551711_6811585464114346183_n.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/49a46cfb-2b44-6372-585b-1d7275b79230.jpeg)|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/a487522d-90ec-befc-87e2-4cc4bda05372.png)|

3．RebootするとAPI Keyが表示されるので、PCから https://flow.m5stack.com/ に接続し、API Keyを入力しましょう

4．settings.jsonにSSIDとPasswordを記述し、SDカードに置いときます

~~~settings.json
{
    "SSID":"xxxx",
    "Password":"yyyy"
}
~~~

5．UIFlowでプログラムを書きます

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/df993125-736b-84d6-f02f-65737ba3ae48.png)


6．BlocklyからPythonにすると
**wifiCfg.doConnect(str((json_data['SSID'])), str((json_data['Password'])))**
が変数などの初期化部分に記述されてしまうようです。。
settings.jsonを読み込んだあとにWiFiに接続するように変更しましょう。

~~~main.py
from m5stack import *
from m5ui import *
from uiflow import *
import wifiCfg
import json

setScreenColor(0x222222)
json_data = None
lcd.font(lcd.FONT_DejaVu24)
with open('/sd/settings.json', 'r') as fs:
  json_data = json.loads((fs.read()))
wifiCfg.doConnect(str((json_data['SSID'])), str((json_data['Password'])))
if wifiCfg.wlan_sta.isconnected():
  lcd.print(((str('Connected to ') + str(str((json_data['SSID']))))), 0, 0, 0xffffff)
else:
  lcd.print(((str('Not connected to ') + str(str((json_data['SSID']))))), 0, 0, 0xffffff)
~~~

7．Runで実行、もしくはDownloadでM5Stackにデプロイします。

<img width="400" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/c0083316-187a-f269-17bd-d1c8b432e272.png">

Blocklyに戻るとPythonの方も元に戻るので注意してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/fc6626c6-61f9-13d3-2d84-db3b21d7adc1.png)

お疲れ様でした。