基于掌控板及SIoT平台的Web物联网控制系统

SIoT为一个为教育定制的跨平台的开源MQTT服务器程序，S指科学（Science）、简单（simple）的意思。SIoT支持Win10、Win7、Mac、Linux等操作系统，一键启动，无需用户注册或者系统设置即可使用。
SIoT为“虚谷物联”项目的核心软件，是为了帮助中小学生理解物联网原理，并且能够基于物联网技术开发各种创意应用。因为其重点关注物联网数据的收集和导出，是采集科学数据的最好选择之一。

1、准备工作

1）主要的硬件：掌控板、micro:bit掌控I/O扩展板…；

可以在dfrobot商城购买，并可在商品详情页面的相关文档下的产品维库中查看相关的资料。地址：https://www.dfrobot.com.cn

2）软件：SIoT、Mind+（mPythonX）、代码编辑器（如Notepad++、Visual Studio Code、Sublime Text等）。

SIoT下载地址： 两个地址都可以下载。下载完后，可以在software文件夹看见各个版本的SIoT，使用最新的即可。
①github项目开源地址：https://github.com/vvlink/SIoT/
②码云镜像地址：https://gitee.com/vvlink/SIoT?_from=gitee_search

Mind+下载地址：http://mindplus.cc/

mPythonX下载地址：
http://static.steamaker.cn/files/mpythonx-0.6.0-win.exe

Sublime Text下载地址：https://www.sublimetext.com/3

2、SIoT的使用

1）启动SIoT.exe
打开相应版本的SIoT，我用的是SIoT1.3版本。双击SIoT.exe文件，可以看见如下图所示的页面，可以获取到IP来进行登录Web管理界面。

注：SIoT启动后，计算机就成为了一个标准的MQTT服务器，使用任何一款MQTT客户端程序就可以访问。所以SIoT打开后不要关闭，让其一直在后台运行，否则会连接失败。

2)登录Web管理界面
要进入Web管理界面可以使用计算机的IP进行登录：IP:8080（如果在本机访问，计算机IP可以是127.0.0.1，也可以是局域网的IP地址，或者用“localhost”。）。如下图所示：

默认的账号：siot；密码：dfrobot

服务器地址：计算机局域网IP地址（在启动SIoT环境的时候会显示在黑框中，有时会显示多个IP地址，需要逐个尝试，一般为192或者172开头。）
MQTT端口：1883
注意：可以通过config.json文件修改用户名、密码和Web端口等信息。

如果SIoT连接失败，可以考虑以下两点：①掌控板和电脑需要连接在同一个局域网下，如连接同一个无线路由器（可以利用电脑开启热点，或电脑和掌控板都连接手机热点），通过【win+R】→【cmd】→【ipconfig】可以查看电脑当前的IP；②8080端口是否被占用。

3）添加Topic：
点击【发送消息】→填入【主题（项目ID/设备名）】及【消息】→点击【发送】即可创建新的Topic。

注意主题的填写，/是必须的。

3、Mind+编程

Mind+编程主要是为了实现掌控板和SIoT互联。其原理是通过MQTT通讯，即订阅/发布Topic。

打开【扩展】，选择掌控板作为主控板，在网络服务下选择MQTT和WIFI功能模块，再选择一些需要的传感器/执行器。
WIFI及MQTT配置如下图所示：

4、制作Web控制页面

Web控制界面的制作先是使用Bootstrap进行界面布局，然后使用jQuery（一个 JavaScript库）监测按钮时间，并通过jQuery get() 方法请求SIoT接口，实现控制命令的下发，从而达到控制的目的。

Bootstrap、 jQuery、jQuery get() 方法的使用可以查看菜鸟教程，地址：https://www.runoob.com/
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap地址：https://v3.bootcss.com/

具体步骤：
① 在static目录下新建一个HTML文件，如demo.html。demo.html的head部分可以使用login.html的head部分（login.html是SIoT的登录界面文件。所在路径：./SIoT1.3/static/login.html）；

② 在body部分布局制作自己需要的界面（使用Bootstrap前端架构），并为自定义界面的组件（如按钮）设置ID用来添加动作（使用 JavaScript ）。实际上，添加动作就是调用SIoT提供的一系列的WebAPI。

WebAPI（在【高级操作技巧】目录下）的具体内容可以查看SIoT使用手册（SIoT文档）：https://siot.readthedocs.io/zh_CN/latest/

1） 发布消息：
Http://SIoT的IP:8080/publish?topic=项目ID/设备ID&msg=消息&iname=用户名&ipwd=密码

2）获取最新数据（即订阅。获取topicid（主题）“项目ID/设备ID”的最新一条消息）：
Http://SIoT的IP:8080/lastmessage?topic=项目ID/设备ID&iname=用户名&ipwd=密码
3）获取消息列表（获取topicid（主题）“项目ID/设备ID”从“2019-04-04”到“2019-07-01”的数据）：
Http://SIoT的IP:8080/messages?topic=项目ID/设备ID&iname=用户名&ipwd=密码&pnum=1&psize=10&begin=2019-04-04&end=2019-07-01

③ 使Web上线
完成了以上的工作后，Web控制也算是完成了，为了可以使用手机来进行控制（需要在同一局域网内），可以把本地地址改为http://IP地址:8080/html/XXX.html（如http://10.12.190.100:8080/html/demo.html）。为了方便访问可以使用【草料二维码（地址：https://cli.im/）】把地址做成二维码。

4、代码

地址

5、效果图