【STM32学习笔记】ESP8266-01S接入ONENET（MQTT）可视化View保姆级教程_stm32 esp-01s onenet

目录

概要

更新ESP8266-01S固件

ONENET平台创建产品

STM32通过ESP8266-01S连接上ONENET云平台

STM32硬件连接

数据可视化View

1.创建可视化项目

2.使用控件，基本折线图

3.仪表盘使用​编辑

4.控制按键开关的使用

 5.文本的使用

小结

---

概要

本文章以MCU（STM32F103）WIFI（ESP8266-01S） 云平台（移动云ONENET）

实验分为三大部分

1、 更新ESP8266-01S固件

2、ONENET平台创建产品

3、利用ESP8266-01S连接上ONENET云平台

4、利用云平台做可视化View界面并获取数据到stm32中

先看实验效果！！！   利用STM32F103ZET6正点原子的精英版为主控；获取DHT11温湿度上传到云平台，云平台按键和裸板按键同步控制LED 

更新ESP8266-01S固件

烧录软件和固件链接：https://pan.baidu.com/s/1DCAWTv-348RU5hVn7O4syw 
提取码：vcqd

 如果用USB_TTL下载器更新连接方式如下图所示

 实物使用（这里的话为了方便我使用了ESP LINK）

 以管理员身份运行

 点击“...”选择  固件文件夹文件

1、选择好下载模式和串口

2、ERASE擦除原本固件

3、START下载新的固件

执行后显示完成，代表固件更新成功

 

 打开串口后，发送AT\r\N，回传OK表示成功

 --------------------------------------------------------------------------------------------------------------------------------

ONENET平台创建产品

多协议接入链接：

 ​​​公开协议产品列表 (10086.cn)

注册ONENET账号进入 

选择多协议接入 

选择MQTT添加产品

除了下面的联网方式选择wifi，设备接入选择MQTT，操作系统选择Android，其他随便选择。

 创建完成后选择设备列表添加设备（里面数据随便填）

 自此平台创建完成

--------------------------------------------------------------------------------------------------------------------------------

STM32通过ESP8266-01S连接上ONENET云平台

可以下载这个例程来进行修改

程序链接：https://pan.baidu.com/s/1LDkiWLTzg9MppEkpY-b0VQ 
提取码：bof0

修改我们创建的ONENET（MQTT）信息

 

修改下面的产品ID、鉴权信息、设备ID

 修改为自己的WIFI账号和密码

 

 这个是自己添加上传云端的数据

根据自己的需求进行删除或者增加

如果增加在函数下发进去添加，格式为下方数据

memset(text, 0, sizeof(text));
sprintf(text, "Hum,%.2f;", Hum); //Temp是数据流的一个名称，Hum是湿度值
strcat(buf, text);

 这个代码部分是云端回传解析信息，按键控制等

 到此程序代码修改完毕

STM32硬件连接

硬件连接好后下载程序进

 运行初始化串口会打印WIFI连接信息

连接成功后云端设备会显示在线

 点击数据流显示可以看见我们定义的数据名字和数据上传云端

数据可视化View

参考文章链接：仪表盘，折线图、地图，ONENET应用编辑器2.0（View 2.0）控件使用_goview大屏对接_记录学习顺便写写的博客-CSDN博客

1.创建可视化项目

 view链接：可视化项目 (10086.cn)

 创建项目空白项目

 

创建好后进行编辑

 我们常用的模块就在这里面，有些是要会员才可以使用，对于初学者够用

2.使用控件，基本折线图

选择基本折线图拖到空白处

点击数据;管理数据 新增数据源

选择OneNET多协议

 

 按照提示填写你自己的信息创建即可

 产品ID和key去OneNET多协议查看

点击管理数据源选择刚才我们创建的数据源模板 

折线图的数据过滤器代码

return [{
    x: data[data.length - 4].at,//X轴是时间
    y: data[data.length - 4].value,//Y轴是数据值
 
}, {
    x: data[data.length - 3].at,
    y: data[data.length - 3].value,
 
}, {
    x: data[data.length - 2].at,
    y: data[data.length - 2].value,
 
}, {
    x: data[data.length - 1].at,
    y: data[data.length - 1].value,
 
}
]

3.仪表盘使用

 选择数据源

仪表盘的数据过滤器代码

function last(arr) {
    var len = arr ? arr.length : 0;
    if (len) return arr[len - 1];
}
return [{
    value: last(data).value,
    name: '温度'
 
}]

4.控制按键开关的使用

拖动开关到空白处，选择数据源（按照上面的教程创建），取消过滤器

 

 样式这里要添加标识符knob:{V}  代码也要相同才可以识别（如果添加其他按键功能者添加相应的标识符）

 

 5.文本的使用

文本显示当前LED状态

 

文本的数据过滤器代码

function last(arr) {
    var len = arr ? arr.length : 0;
    if (len) return arr[len - 1];
}
if (last(data).value == 0)
    return [{
 
        "value": "LED0关灯"
    }]
 
else
    return [{
 
        "value": "LED0开灯"
    }]

文本显示温度（取消过滤器） 

通用的几个控制器件设置，其他的可根据自己的需求进行添加

小结

遇到问题：STM32连接云端时如果一直卡在AT；ESP01S模块的EN引脚可能要复位（手动拔插就行）

注意：如果添加数据，记得程序也要添加，否则云端识别不到；云端按键控制样式命令内容要和程序判断要相同；

程序是3秒上传一次数据文本显示可能不是实时更新LED状态，可根据自己调整或者在程序处理云端回传数据时上传状态