IoT MQTT Panelを使ってみる

2025-10-03

未分類

概要

iPadやスマホで使えるMQTTアプリIoT MQTT Panelを試してみた。
下の画像が使用例。
STOPボタンを押すと右の黄色の帯にあるメッセージがパブリッシュされる。今回はボタンとスライダーを使ってみた。

設定概要

IoT MQTT Panelは、以下の３階層で設定する。

Connect-1                          ブローカー情報
   |------ Dshboard-1              パネルの集合
              |--------- Panel-1   ボタンやスライダーなどの部品
              |--------- Panel-2
              |--------- Panel-3

Connectionの設定

Connectionの一覧は、画面右上の3本横線をクリックして一覧画面を表示する。

Connectionの設定画面は、新規の場合は右下の+ボタンを、修正ならばConnection名右の3つボタンをクリックして表示する。
設定内容
・Connection name: コネクションを識別する名称。
・Broker address: ブローカーのアドレス。ここではIPアドレスを指定している。
・Port: ポート番号は規定値が設定済み。
・Dashboard name: 初回はダッシュボード名を指定する。

Panelの設定

パネルの設定画面は、新規ならば+ボタンを、修正ならばPanel名右の3つボタンをクリックして表示する。
Panel name: パネル名。ボタンやスライダーの表示に使われる。
Topic: トピック名。
Payload: ボタンの場合には、ここでパブリッシュするJSONパターンを記述する。
Payload min/max: スライダーの場合、選択範囲の上下限を設定する。
Payload step: スライダーの刻み。
JSON pattern for publish: パブリッシュするJSONパターンを記述する。<payload>を記述すると指定したスライダーの値に置き換わる。Payload is JSON Dataにチェックする。