1-Mind+数据可视化面板和SIoT V2

Mind+从1.8.0版本开始增加数据可视化面板，可以直观的呈现物联网数据。
在可视化面板中，一个项目包含多个小组件，小组件可以绑定topic，从而实现接收数据或者发送数据，整个项目可以指定一个数据源（当前仅支持SIOT V2）。

SIoT是一个针对学校场景的开源免费的MQTT服务器软件, 可一键创建本地物联网服务器。
SIOT包含一个MQTT服务器和一个数据库以及一个网页界面，MQTT服务器负责数据的转发以及判断是否存储，网页界面可以方便的查看数据或者简单的测试程序。
SIoT V2是新的升级，性能提升，可以支持更快的速度，同时使用QOS区分了快速数据以及存入数据的数据以应对不同的使用场景，网页界面也进行了更新更美观。

2-软件下载

下载链接：

  1. 腾讯微云下载（推荐）:
    链接: https://share.weiyun.com/6SFhgLQj

  2. 百度云盘下载：
    链接：https://pan.baidu.com/s/17clVjJXWTZh02FteKy3mcA?pwd=mind
    提取码：mind

  3. 阿里云盘下载：
    https://www.aliyundrive.com/s/tCqwJwGtZzL
    提取码: 3h4x

  4. 谷歌云盘下载：
    链接： 点击下载

3-启动SIoT V2（方法任选其一）

3.1-方法一：在电脑上运行SIoT

在Windows上运行时容易出现网络连接问题，不推荐，优点是不依赖其他硬件。

1.下载win版本的SIoT V2解压，双击start SIoT.bat**即可启动新版SIoT，启动之后会弹出小黑窗启动服务器。

注意运行的是start SIoT.bat而不是main.exe

注意:启动时需要将SIoT添加到允许应用通过防火墙,勾选专用网络和公用网络，否则外部设备可能无法访问。

2.在浏览器输入 127.0.0.1:8080 即可打开网页端口,登录账号依然为siot,密码为dfrobot，打开后可以新建Topic或查看消息。

注：如果打开还是老版的页面，可能之前打开过存在缓存，可以按CTRL+F5强制刷新页面缓存。

3.如果需要使用其他硬件访问电脑上的SIoT，需要确保设备（esp32掌控板等）可以通过WiFi正常连接运行SIoT的电脑。
查找电脑IP方法：在控制面板的网络连接中，找到当前WiFi网络对用的网卡获取当前电脑IP地址（一般是192.168开头），然后使用另外一个处于同一个WiFi网络下的手机，访问IP:端口，例如下图电脑IP为192.168.1.43，则手机打开浏览器输入192.168.1.43:8080，如果可以打开SIoT网页则说明网络通畅，如果无法打开说明网络不通畅，需要检查是否siot已经加入允许通过防火墙以及处于同一个WiFi网络下。

3.2-方法二：在行空板M10上运行SIoT（推荐）

在行空板上运行的优点是可以避免网络问题，数据独立存储，可24小时运行，推荐。

行空板上默认内置的是SIoT V1,而Mind+可视化平台需要使用SIoT V2，因此需要先进行升级。

  • 升级方法：
    1.下载升级文件：升级行空板SIOTV2.mp

    2.打开Mind+，在项目中打开上一步下载的升级行空板SIOTV2.mp文件。

    3.行空板连接电脑待启动完成，点击连接远程终端中选择10.1.2.3连接行空板，连接成功之后点击运行，等待行空板重启完成即可。

    4.此时打开行空板上的SIOT网页，按Ctrl+F5刷新页面，可以看到界面已经SIOTV2了，登录账号是siot，密码dfrobot。

4-可视化界面说明

4.1-打开可视化面板

  1. 打开Mind+1.8.0，在顶部菜单栏可以看到可视化面板的入口，点击即可弹出新窗口（方便一边编程调试一边看效果）。


    2.点击新建项目，选择新建空白项目，输入项目名称和描述后点击确认即可新建一个项目，点击编辑即可进入面板编辑页面。

4.2-连接SIoT V2服务器

进入页面后会弹出提示选择数据源，如果是电脑本地启动SIOT V2，则ip为127.0.0.1，如果要连接行空板上的SIoT V2，则ip可以填写行空板的ip。其他设置保持默认，确认后会提示连接成功，如果错误则检查SIoT是否已经运行且IP正确。


4.3-界面说明

可视化界面非常简洁，与Mind+编程界面类似，顶部是菜单栏，左侧为组件栏，中间编辑区，右侧设置栏。

基础操作：

  • 从组件栏拖出组件到编辑区即为添加组件，从编辑区将组件拖回组件栏即为删除组件。
  • 在编辑区空白处按住鼠标右键可以拖动画布。
  • 点击编辑区或组件，在右侧设置栏即可设置对应属性。

组件分为4大类：

  • 基础组件：包括常用的交互类组件，收/发MQTT数据。
  • 显示组件：主要为各种显示效果的组件，接收MQTT发过来的数据。
  • 图表组件：主要为各种图表类型的组件，从数据库拉取一段数据并显示出来，注意MQTT发送的消息需要保存到数据库（QOS1）才能被图表组件显示出来。
  • 装饰组件：无数据收发功能，主要是静态装饰作用，用来辅助界面设计，例如可以使用静态图片组件插入一张设计好的背景图让整个界面更美观。

当没有选中任何组件时，右侧设置栏为全局设置。

  • 布局设置：控制画布大小，全屏时仅显示画布内的组件
  • 项目设置：
    • 主题设置：可将画布设置为浅色或深色，同时将所有组件切换为浅色或深色。
    • 封面设置：控制项目管理页面当前项目显示的图片，默认自动生成编辑区的缩略图，也可以本地上传图片。

4.4-添加组件

与拖动积木编程类似，从左侧组件栏拖动组件到编辑区即为新增组件，从编辑区将组件拖会组件区即为删除组件。
此处我们新增一个开关用来发送数据，一个单行文字框用来接收数据。

4.5-绑定Topic

点击组件，右侧设置栏会显示当前选择组件的属性设置，选择Topic下拉可以选择绑定一个Topic（相当于MQTT编程中的发送消息给Topic和订阅Topic），此处会列出SIoT界面上的Topic。如果没有或者需要新增，则需要到SIoT页面上创建，创建好了之后，点击画布再点击组件，topic下拉即刷新。此处我们给输入框和单行文本框均绑定siot/测试这个topic.

4.6-组件之间通信

此时，输入框输入字符，点击发送，则此文本就发送给了siot/测试这个topic，由于单行文本框绑定了siot/测试这个topic，因此也会收到数据并显示出来。
查看SIoT服务器网页上的数据详情，会发现数据库同时也收到了这条消息。

5-MQTT通讯硬件控制

接下来我们将可视化面板的数据源切换为行空板上的SIoT V2，通过开关控制行空板。

5.1-连接行空板上的SIoT服务器

在可视化平台上输入行空板的IP，USB线连接电脑时为10.1.2.3，点击完成即连接到了行空板上的SIoT服务器。

开关按钮选择Topic为siot/测试，按钮开启发送on，关闭发送off

5.2-案例1：按钮控制LED灯

编写一个程序，连接行空板上的SIoT V2，接收Topic为siot/测试的数据，收到on就打开板载的L灯，收到off就关闭板载的L灯。
扩展中加载行空板和MQTT。

编程如下：
MQTT平台选择SIOT，服务器输入行空板的IP，此处SIOT运行行空板上，因此填127.0.0.1或10.1.2.3均可以：
其中topic填写与可视化平台中按钮相同的topic。推荐在物联网平台双击topic复制而非手动输入：

程序说明：连接SIOT服务器，订阅siot/测试这个topic，当此topic收到on就打开P25L灯，收到off就关闭L灯：

连接行空板，如果提示有库需要升级，则必须点击升级，然后点击运行。

点击按钮即可控制行空板背面的L灯亮灭：

5.3-案例2：使用图表显示数据

编写一个程序，连接行空板上的SIoT V2，将板载光线传感器数据实时发送给siot/光线的Topic，可视化平台使用折线图进行显示。

首先新建一个topic，用于光线数据的收发：

可视化平台上新增一个折线图，并选择siot/光线的Topic：

编程将数据发送给这个Topic：
注意在新版本中，发送数据新增了一个存数据库的积木，如果需要发送的数据能在SIoT V2的网页端或者可视化平台的图表类组件上看到，需要使用发送保存到数据库的积木，否则使用不存数据库的积木，可以让发送数据更快。

Q 行空板上运行报错提示"AttributeError:module 'siot' has no attribute 'publish_save'？
A 说明板子上的siot的python库版本低了，需要更新。查看解决办法：点击查看

点击运行：

可以看到可视化平台数据已经收到了，遮住行空板上的光线传感器或者打光数据会变化。

多条折线图：
折线图可以显示多条折线图的数据，方法是将多个数据使用逗号分隔开合并发送到topic，在图表组件属性中的折线配置中增加一条折线：

程序：

效果：

5.4-案例3：网络图片组件实现图传

编写一个程序，连接行空板上的SIoT V2，行空板上插上一个USB摄像头，将摄像头画面进行base64编码，然后发送给siot/摄像头的Topic，可视化平台使用网络图片组件进行显示。

  • 首先新建一个topic，用于图像数据的收发：

  • 可视化平台上连接行空板数据源10.1.2.3，新增一个网络图片组件，并选择siot/摄像头的Topic：

  • 编程将数据发送给这个Topic：

    • 网络图片组件接收一个base64编码的图片数据，因此先在用户库搜base64加载一个能将图片转base64的扩展库：
    • 然后因为需要将行空板摄像头画面发送到SIOTV2，因此还需要加载**行空板（用来连接行空板）、MQTT（用来发送数据到siot）、OpenCV（用来获取摄像头画面）**三个库：
    • 然后进行编程，运行程序。
      注意1：如果运行报了**AttributeError: module 'siot' has no attribute 'publish_save'**错误，请查看本文最后的常见问题中的解决办法。
      注意2：图像数据量很大，因此使用发布的积木的时候不保存到数据库。

  • 程序运行起来之后，可以看到数据可视化界面上网络图片中已经出现了摄像头画面。

6-更多案例

图片
链接 [教程]【行空板】用Python玩转开源硬件-第10课：IoT校园物联网大屏系统
图片
链接 基于云雀气象仪与Mind+数据面板的大屏可视化校园气象站

7-常见问题

Q 行空板上运行报错提示"AttributeError:module 'siot' has no attribute 'publish_save'？
A 说明板子上的siot的python库版本低了，需要更新。查看解决办法：点击查看
Q 提示“网络受限 2,”怎么办？
A 查看程序中MQTT服务器设置，端口需要是1883
Q 如果需要对公网访问应该映射哪些端口？
A 可映射8080、1883、1888这三个端口
Q 在windows上运行SIOT V2，其他电脑或手机或板子无法访问怎么办？
A 可以使用同局域网内的另外一个手机或电脑访问此电脑的ip的8080端口网页，如果不能打开，说明可能是被windows防火墙拦截或没有加入允许应用通过防火墙列表，可以将SIoT V2添加到列表中，直到能访问。
Q 运行将摄像头画面传到网络图片组件的时候报错提示**frame = cv2.cvtColor(frame,cv2.COLOR_BGR2RGB) 。。。cv2.error：openCV 。。。 src empty() in function"cvtColor"**或者卡在摄像头初始化界面是为什么？
A 说明摄像头初始化失败了，首先查看USB摄像头是否正确连接，如果代码在行空板上运行则usb摄像头要插到行空板上，如果没有连接行空板则代码在电脑上运行 摄像头要插电脑usb口上；如果连接正确，则可能是摄像头没有正确识别，可以将打开摄像头的编号填-1 自动识别。
Q 打开可视化界面时候报错白屏，提示ENOENT怎么办？
A ENOENT是Error NO ENTity文件不存在的错误，可能是杀毒软件把文件删了，可以给Mind+所在文件夹目录添加到杀毒软件的白名单，然后重新下载mind+解压
Q obloq发送的数据在siot网页上显示不了为什么？
A 使用625及以后版本的siot客户端，另外需要注意如果是在电脑上运行，需要运行.bat而不是.exe。
Q 登陆siot网页提示“需要授权”是为什么？
A 账号或密码输入错误，默认账号为全小写字母siot，默认密码是全小写dfrobot，前后没有空格。
如下图的错误为siot前面多输入了一个空格:
Turn to the Top