このサイトはアフィリエイト広告（Amazonアソシエイト含む）を掲載しています。 M5Stack

UIFlow2：Wi-Fi設定をJSONファイルから読み込んで自動接続する方法

今回は、UIFlowでネット接続の設定を config.json というJSONファイルから読み込む方法について解説します。

M5Stackを実際の現場で使う場合、IPアドレスなどのネットワーク設定をUIFlowプログラム内に固定でコーディングしてしまうと、台数が増えたときの設定・管理が非常に煩雑になりますよね。

理想的なのは、Webサーバー機能を搭載し、Web画面から各種設定を変更できる仕組みを用意することです。そうすれば、現場での運用が格段にラクになります。

今回はその準備段階として、設定情報をJSON形式のファイルに保存し、起動時にそれを読み込む方法について解説します。

次回は、この設定ファイルをWeb画面から編集できるようにする方法も紹介する予定です。

Contents
  1. JSONファイル読み込みのフロー概要
  2. JSONファイル読み込みのための準備
  3. JSONファイル読み込みフローの詳細
  4. まとめ

JSONファイル読み込みのフロー概要

今回解説するフローの動作は次の通り

  1. 次のconfig.jsonファイルを読み込んで、config.jsonで設定したWiFIに接続します。
  2. 接続した後、ディスプレイにssidとipアドレスを表示します。
JSON
{
  "ip": "192.168.13.10",
  "subnet": "255.255.255.0",
  "gateway": "192.168.13.1",
  "dns": "192.168.13.1",
  "ssid": "MyWiFi",
  "password": "12345678"
}

次の４つの関数に分けて処理します。

  1. ReadConfig：config.jsonをフラッシュメモリから読み込みます。
  2. SetVariables：読み込んだ値を変数に格納します。
  3. ConnectWiFi：WiFiに接続します。
  4. ShowLabel：ssidとipアドレスをディスプレイに表示します。

JSONファイル読み込みのための準備

本項のプラグラム作成前の準備として次の3つの手順を先にすませておきます。

  1. Softwareモジュールの追加
  2. JSONファイルの作成
  3. JSONファイルをM5Stackに転送

Softwareモジュールの追加

ファイル読み込みのためのSoftware設定から、FileIOモジュールの追加を行います。

①UIFlowのメイン画面左下のSoftwareをクリック

②ソフトウェアモジュールを追加する

次のダイアログが開いたら
FileIOを選択して、Confirmをクリック

③追加したモジュールの確認

追加されたモジュールはUIFlow2の左下に表示されます。

JSONファイルの作成

次のJSONファイルを作成して、ファイル名：config.json で保存します。

各種パラメータは、ご自身の環境にあわせて変更してください。

JSON
{
  "ip": "192.168.13.10",
  "subnet": "255.255.255.0",
  "gateway": "192.168.13.1",
  "dns": "192.168.13.1",
  "ssid": "MyWiFi",
  "password": "12345678"
}

JSONファイルの転送

Web Terminalを開いて、M5Stackを接続します。

接続したら、メニューバーのFile をクリック。

ダイアログが開くので、Send File to Here をクリック。
前の手順で作成した config.json を選択して開くをクリック。

メッセージを確認して、Confirmをクリック。

config.jsonがM5Stackにコピーされました。

JSONファイル読み込みフローの詳細

次の４つの関数とディスプレイを作成していきます。

  1. ReadConfig
  2. SetVariables
  3. ConnectWiFi
  4. ShowLabel

変数(Variables)の生成

この項で使用する変数を作成します。

関数 ReadConfig

フローの概要は次の通り

  • config.jsonを読み込みモードでOpenする
  • テキストをconfig_textに代入
  • config_textをmap辞書型のconfig_jsonに代入
  • ファイルをClose

関数 SetVariables

次に、Map(辞書型)のconfig_jsonからそれぞれの値を変数に代入します。

Map(辞書型)については次の記事を参考にしてください。

関連記事
JSONとは何？　JSONの使い方・応用例について解説

関数　ConnectWiFi

WiFiアクセスポイントに接続します。

wlan.ifconfig((ip,subnet,gateway,dns))

このコードについては、専用のブロックがないため、『System』のを使用します。

WiFiアクセスポイントへの接続が完了すると、Web TerminalにWiFi OK と表示します。

WiFI接続の手順について詳しく知りたい方は次の記事を参考にしてください。

関連記事
固定IPでWiFi接続する

関数　ShowLabel

下図のように、液晶ディスプレイ表示用のラベルを２つ追加します。

  • SSID： lbl_ssid
  • IPアドレス： lbl_ip

まとめ

この記事では、JSONファイルから各種設定を読み込み、M5Stackを起動する方法について解説しました。

M5Stackを実際の生産現場で活用する際には、複数台のM5Stackを運用することが想定されます。

そのような環境では、個別にプログラムを変更するのではなく、設定ファイルを使って柔軟に運用できる仕組みが求められます。

本記事が、M5Stackを現場で効率的に活用し、ソフトウェア管理の煩雑さを軽減するためのヒントとなれば幸いです。

-M5Stack