「植物の自動水やり機」に使うIoT OnOffの代わりにGitHubで見つけたMYHELLOIOTを使う方法

「M5StackではじめるIoT電子工作」の作例として載っている「植物の自動水やり機」はIoT OnOffというスマホアプリを使っています。

しかし、最近App StoreからIoT OnOffが消えてしまいました。

Goolge Playではこの手のアプリがたくさん見つかりますが、App Storeだと無料のアプリでは見つけることができませんでした。

そこで、捜索範囲をアプリ以外にも広げたところ、GitHubでPWA(Progressive Web Apps)で動作するMQTTダッシュボードを見つけました。

MQTTダッシュボード「MYHELLOIOT」

MYHELLOIOTはPWAで動作するMQTTダッシュボードです。iOS、Android、Windows、macOS、LinuxなどのOSに関係なく、主要なブラウザで動作することができます。

使い勝手はお世辞にもいいとは言えず、ダッシュボードを作るためにはJSXコードを書く必要があります。幸いサンプルJSXコードが幾つか用意されているので、それを参考にすれば使えないことはない感じになっています。

MYHELLOIOTはGitHub上でホストされていて、次のURLにアクセスすれば直ぐに使うことができます。

https://adrianromero.github.io/myhelloiot/

アクセスするとこんな画面が表示されます。

メニュー

各メニューをクリックすると次の画面が表示されます。

About
「MYHELLOIOT」の説明が書かれた最初に表示される画面
Credentials
MQTTブローカーのユーザー認証情報設定画面
MQTT Connection
MQTTブローカーの設定画面

※MQTTブローカーはウェブソケットを使って接続する必要があります。
Dashboard
「About」メニューのサンプルコードのリンクをクリックすると、自動的に「Dashboard」のメニューに書き込まれます。
上矢印アイコンからファイルをアップロードすることもできます。

「植物の自動水やり機」に使うIoT OnOffの代わりにMYHELLOIOTを使う方法

「about」メニューの画面キャプチャに付けた「①接続設定」から「③接続ボタン」の順番に作業を行いますが、事前に「②JSXコード入力」に使うJSXコードを準備します。

JSXコードの準備

「自動水やり機.jsx」のJSXコードをテキストエディタにコピーします。
５箇所ある「subtopic="トピック名"」を修正します。
トピック名は"年月日時分/plant/moist"という形式になっているので、５箇所の年月日時分"202211031040"を修正開始時の年月日時分で置き換えます。
※Arduinoのソースコード"WaterringPotted.ino"の7行目、"(IoT OnOffのDevice IDに置き換える)"の部分を同じ年月日時分に修正してください。
「自動水やり機.jsx」というファイル名で保存します。。

自動水やり機.jsx

<Dashboard title="自動水やり機">
  <PanelFlex>
    <Card title="土壌水分（小さいほど大きい）">
      <InputUnit subtopic="202211031040/plant/moist"
        format={NumberValueFormat({
          style: "decimal",
        })}
      />
    </Card>
    <Card title="水残量不足（1:真 4:偽）">
      <InputUnit subtopic="202211031040/plant/empty"
        format={ValueFormat({
        })}
      />
    </Card>
    <Card title="土壌水分設定">
      <ViewUnit
        subtopic="202211031040/plant/limit"
        format={NumberIconFormat({
          style: "decimal",
        })}
      />
      <SliderUnit
        pubtopic="202211031040/plant/limit"
        puboptions={{ retain: true }}
        subtopic="202211031040/plant/limit"
        limits={{ min: 1000, max: 3000, step: 10 }}
      />
    </Card>
    </PanelFlex>
</Dashboard>

①接続設定

「About」メニュー画面の「Sets Mosquito test broker url」をクリックします。