基于掌控板和SIOT的响应式Web物联网设备管理插件

前言

SIoT为“虚谷物联”项目的核心软件，是一个为中小学STEM教育定制的跨平台的开源MQTT服务器程序，可一键创建本地物联网服务器，摆脱网络困扰，重点关注物联网数据的收集和导出，与Mind+结合可轻松上手物联网。

本项目在以下两篇SIoT官方案例的基础上进行修改，基于SIoT编写一个网页管理插件，实现远程控制掌控板的开关灯。

为 SIoT 写一个物联网设备管理插件https://mc.dfrobot.com.cn/thread-309135-1-1.html
基于掌控板和SIoT平台搭建物联网控制系统https://mc.dfrobot.com.cn/thread-300165-1-1.html

1、硬件

硬件	数量
掌控板	1
Type-C数据线	1

2、软件

软件
Mind+
SIoT
Adobe Dreamweaver 2021

3、实施过程

1、点此下载所需用到的SIoT1.3、智慧农场插件及控制页面源码。
2、把SIoT1.3中的“static”文件夹替换成智慧农场插件中的“static”：

3、复制“static”路径下的“devices.html”文件，重命名为“sfarm.html”。然后在“modules”文件夹中，也将“devices.js”文件复制一份，改名为“sfarm.js”：


4、双击运行SIoT.exe，可以看到一个黑色的窗口，上面会有你电脑的IP地址：
（注：使用SIoT过程中一定不要关该窗口）
（ 电脑每次连接WIFI，都会生成一个IP地址，每个IP地址对应的电脑都是唯一的。运行SIOT程序后会在电脑上建立一个SIOT服务器，其他设备要访问这个服务器，需要知道这个SIOT服务器所在电脑的IP地址）

5、打开浏览器，在网址栏输入在你电脑的IP地址加上“:8080”或者127.0.0.0:8080（127.0.0.0是本机的环回地址）,点击键盘enter键，出现以下页面，证明SIoT搭建成功：
（注： “:” 需在英文输入法下输入）

如果打不开的话：

   ①检查SIoT的小黑窗是否打开。

   ②检查IP地址是否错误，如果有多个IP地址就一个一个尝试。

   ③关闭网络防火墙。

6、默认账号：siot，密码：dfrobot。输入账号、密码后登陆。

7、将下载下来的控制页面源码复制到static目录下，然后用Adobe Dreamweaver 2021打开框框中的这些html文件，在代码中用"< a > < /a >"这一标识符链接到了dingzhi.html这个页面：


我的SIoT界面布局如下：

8、Topic的格式为：项目ID/设备名。例如：2018A14102/RED。

从上图可以看出有四个Topic，其中框出来的三个Topic是我新创建的，用来接收Web的控制消息。2018A14102/RED用来控制掌控板上0号红灯的亮灭，2018A14102/GREEN用来控制掌控板上1号绿灯的亮灭，2018A14102/BLUE用来控制掌控板上2号蓝灯的亮灭。
怎么创建Topic呢？我们可以在SIoT的发送消息界面向你想创建的主题发送消息或在dingzhi.html这一文件的function中向Topic发送消息，消息发送成功后，系统会自动根据Topic创建“项目”和“设备”。若项目和设备已存在，则直接向该Topic发送消息：

核心代码如下：

$(function(){
			$('#LedRedOn').click(function(){
				$.get("http://192.168.31.144:8080/publish?topic=2018A14102/RED&msg=LedRedOn&iname=siot&ipwd=dfrobot");
			});
			$('#LedRedOff').click(function(){
				$.get("http://192.168.31.144:8080/publish?topic=2018A14102/RED&msg=LedRedOff&iname=siot&ipwd=dfrobot");
			});
			$('#LedGreenOn').click(function(){
				$.get("http://192.168.31.144:8080/publish?topic=2018A14102/GREEN&msg=LedGreenOn&iname=siot&ipwd=dfrobot");
			});
			$('#LedGreenOff').click(function(){
				$.get("http://192.168.31.144:8080/publish?topic=2018A14102/GREEN&msg=LedGreenOff&iname=siot&ipwd=dfrobot");
			});
			$('#LedBlueOn').click(function(){
				$.get("http://192.168.31.144:8080/publish?topic=2018A14102/BLUE&msg=LedBlueOn&iname=siot&ipwd=dfrobot");
			});
			$('#LedBlueOff').click(function(){
				$.get("http://192.168.31.144:8080/publish?topic=2018A14102/BLUE&msg=LedBlueOff&iname=siot&ipwd=dfrobot");
			});
			$('#AllOn').click(function(){
				$.get("http://192.168.31.144:8080/publish?topic=2018A14102/RED&msg=LedRedOn&iname=siot&ipwd=dfrobot");
				$.get("http://192.168.31.144:8080/publish?topic=2018A14102/GREEN&msg=LedGreenOn&iname=siot&ipwd=dfrobot");
				$.get("http://192.168.31.144:8080/publish?topic=2018A14102/BLUE&msg=LedBlueOn&iname=siot&ipwd=dfrobot");
			});
			$('#AllOff').click(function(){
				$.get("http://192.168.31.144:8080/publish?topic=2018A14102/RED&msg=LedRedOff&iname=siot&ipwd=dfrobot");
				$.get("http://192.168.31.144:8080/publish?topic=2018A14102/GREEN&msg=LedGreenOff&iname=siot&ipwd=dfrobot");
				$.get("http://192.168.31.144:8080/publish?topic=2018A14102/BLUE&msg=LedBlueOff&iname=siot&ipwd=dfrobot");
			});
		});

9、接下来需要修改“sfarm.html”文件以及其他html文件，按照自己的需求修改即可。“sfarm.html”的核心工作是修改“< section>”和“< /section>”之间的内容：

10、接下来是Mind+编程：

实现功能：当点击Led控制界面的按钮时，Web端就会通过SIoT上相对应的Topic将Message发送出去。掌控板连上SIoT，订阅Topic，当接收到已订阅Topic的MQTT消息后，就会执行相应的开关灯操作。

4、实验效果

Led控制页面：

SIoT页面Led控制（插件）：

SIoT页面2018A14102/GREEN主题消息详情：

实验效果视频：https://www.bilibili.com/video/BV1oU4y1b7no/

最后是我在SIoT官方案例下实现的基于掌控板和SIOT的响应式web物联网设备管理插件界面：
https://download.csdn.net/download/jzqs_/18144001