APP安装

从(《磁保持WIFI智能插座》https://oshwhub.com/oldfox126/ci-bao-chi-wifi-zhi-neng-cha-zuo )项目的工程附件中下载安卓手机APP-MQTT dashboard_v0.4.5_apkpure.com.apk.zip,解压并传到安卓手机上安装APP。

我为什么要使用这个APP,因为好多同类型的MQTT APP,界面就是黑乎乎的一坨(懂的自然懂)。
而这个APP的界面,包括字体、大小、颜色、图标、背景色、位置等好多选项可以自定义,最终呈现的效果可以很漂亮(颜值既正义),它就是众多黑乎乎的MQTT  APP中的一股清流。

这是该APP自带的示例:

虽然很漂亮,但以上界面不太适合我们这个《磁保持WIFI智能插座》项目,我们最终设置好的界面类似于:

 

设置MQTT服务器

进APP以后默认是这个界面,首先点一下右上角

点MQTT connections

 

点第一个服务器进去操作

 

点编辑

在服务器参数设置界面,红框的位置输入:broker-cn.emqx.io ,其他地方都保持默认。填好以后点右上角的保存。

到这里MQTT服务器参数就设置好了

 

 

新增一个仪表盘

进这个界面以后点击左上角进菜单

在菜单里面选择Dashboards

点右上角的+号新建一个仪表盘

输入你想要的名字(比如磁保持WIFI插座),然后点右上角的保存。

 

给仪表盘增加装置

在仪表盘列表,点击刚新增的仪表盘(磁保持WIFI插座

在插座这个界面点击右上角的+号增加一个装置

 

装置类型选择Toggle(切换开关,在ON/OFF两种状态间切换)

填写切换开关的参数:

Name:开关
MQTT enable:打开
MQTT connection:选择 broker-cn.emqx.io
Subscribe to topic:
oldfox126/esp12s/hf3f/s4QEJYlo/stat/relay
Qos(Qos for subscribe/Qos for publish):2
Topic for publish:
oldfox126/esp12s/hf3f/s4QEJYlo/relay/in

上面这个加粗黑体字的部分,实际上是:《配网操作说明》 https://oshwhub.com/article/ci-bao-chi-WIFIzhi-neng-cha-zuo-ruan-jian-diao-shi-shuo-ming 此文中的topic参数:oldfox126/esp12s/hf3f/s4QEJYlo ,所以只要在配网的时候把topic参数保存在手机微信或者记事本,需要用的时候直接复制出来就好。

******以下所有设置中的 oldfox126/esp12s/hf3f/s4QEJYlo 都应该替换成你自己的topic参数******

全部填好以后,点界面右上角的保存。

保存好以后界面是这样,再点击右上角的+号增加一个装置

这次装置类型选择Text(文本)

填写文本装置相应的参数并点右上角的保存:

Name:当前时间
MQTT enable:打开
connection:broker-cn.emqx.io
Subscribe: oldfox126/esp12s/hf3f/s4QEJYlo/stat/time
Qos:0 
publish:无

QOS是质量、优先级,取值0-2,0最低,2最高。这里的当前时间值因为每秒钟都要接收,不太重要所以取值0;上面的开关值比较重要所以Oos取值2。

到这里仪表盘装置已经开始运行了(时间在走)

但是很奇怪,时间后面有一个单位,要修改一下。
当前时间4个字上按住不放,出来的菜单里面选择Edit

在编辑界面依次点击 Design(设计) -> Unit(单位) -> Show unit(显示单位) -> 关闭显示,然后点右上角的保存。

 

好了时间显示终于正常了。


但是显示的地方太窄了,我想拉宽一点,点这里修改界面(可以更改装置的上下左右位置以及装置大小)

当前时间这个装置的右下角这里按住不放,往右边拖到边,放手

把当前时间拉到足够的宽度以后,点右上角的保存。

最终效果:

 

其他的仪表盘装置设置请自行完成,必须的参数列在下面(没错,我就是懒):

1.
类型:Gauge
Name:计时器
Min:0
Max:100
step:1
default:50
MQTT enable:打开
connection:broker-cn.emqx.io
Subscribe:oldfox126/esp12s/hf3f/s4QEJYlo/stat/countdown
Qos:2
publish:oldfox126/esp12s/hf3f/s4QEJYlo/countdown/in

2.
类型:Toggle
Name:定时器
MQTT enable:打开
connection:broker-cn.emqx.io
Subscribe:oldfox126/esp12s/hf3f/s4QEJYlo/stat/timer
Qos:2
publish:oldfox126/esp12s/hf3f/s4QEJYlo/timer/start

3.
类型:Date & Time
Name:设置定时开
Format date & time: HH::mm
MQTT enable:打开
connection:broker-cn.emqx.io
Subscribe and publish:oldfox126/esp12s/hf3f/s4QEJYlo/timer/starttime
Qos:2

4.
类型:Date & Time
Name:设置定时关
Format date & time: HH::mm
MQTT enable:打开
connection:broker-cn.emqx.io
Subscribe and publish:oldfox126/esp12s/hf3f/s4QEJYlo/timer/endtime
Qos:2

5.
类型:Text
Name:定时开
MQTT enable:打开
connection:broker-cn.emqx.io
Subscribe:oldfox126/esp12s/hf3f/s4QEJYlo/stat/starttime
Qos:0
publish:无

6.
类型:Text
Name:定时关
MQTT enable:打开
connection:broker-cn.emqx.io
Subscribe:oldfox126/esp12s/hf3f/s4QEJYlo/stat/endtime
Qos:0
publish:无

7.
类型:Text
Name:当前固件版本
MQTT enable:打开
connection:broker-cn.emqx.io
Subscribe:oldfox126/esp12s/hf3f/s4QEJYlo/stat/ver
Qos:0
publish:无

8.
类型:Toggle
Name:升级固件
MQTT enable:打开
connection:broker-cn.emqx.io
Subscribe:oldfox126/esp12s/hf3f/s4QEJYlo/ota
Qos:2
publish:oldfox126/esp12s/hf3f/s4QEJYlo/ota
Confirm send:打开
Message*:确定要进行在线升级?

(完)