技术博客
首页 所有文章 标签 分类 关于
技术博客

目录

STM32学习笔记ESP8266-01S接入ONENETMQTT可视化View保姆级教程

 收录于 未分类
   约 1628 字   预计阅读 4 分钟 
https://bing.ee123.net/img/rand?artid=132104964

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

目录

概要

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

实验分为三大部分

1、 更新ESP8266-01S固件

2、ONENET平台创建产品

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

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

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

https://i-blog.csdnimg.cn/blog_migrate/b1d276d05cfe03dc8b40bd636f43a697.jpeg

https://i-blog.csdnimg.cn/blog_migrate/13aa3e13d12105a08760eb3eb5843101.png

更新ESP8266-01S固件

烧录软件和固件链接：

提取码：vcqd

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

https://i-blog.csdnimg.cn/blog_migrate/31e32a040fe205ffcb7c3c4728232136.png#pic_center

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

https://i-blog.csdnimg.cn/blog_migrate/2c5769451e2a9a7fbeee2f76809f7408.jpeg

以管理员身份运行 https://i-blog.csdnimg.cn/blog_migrate/80e9384cd1b9a554d0d7077e758904a2.png

https://i-blog.csdnimg.cn/blog_migrate/afb44576cb56f0c32606e29c96ee3570.png 点击“…”选择  固件文件夹文件

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

2、ERASE擦除原本固件

3、START下载新的固件

https://i-blog.csdnimg.cn/blog_migrate/4844fdde499fe804494138fc7078def6.png

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

https://i-blog.csdnimg.cn/blog_migrate/8cc217d2de9d8c8cd948553cd3f84fdd.png

打开串口后，发送AT\r\N，回传OK表示成功 https://i-blog.csdnimg.cn/blog_migrate/eadb1d8ae8a66749a44701a8e7c8e5e3.png

ONENET平台创建产品

多协议接入链接：

注册ONENET账号进入

https://i-blog.csdnimg.cn/blog_migrate/e286e1b7291bfdba3f2241e83cbe71fc.png

选择多协议接入

https://i-blog.csdnimg.cn/blog_migrate/b20b277b6077889155ba231a1d181533.png

选择MQTT添加产品

https://i-blog.csdnimg.cn/blog_migrate/2de45e066ab6d855a72a17eb8fd80301.png

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

https://i-blog.csdnimg.cn/blog_migrate/236175cd150e623472c7d7a713d9bbac.png

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

https://i-blog.csdnimg.cn/blog_migrate/12fa5c1bc1ae97c8b996073422c5dde3.png

自此平台创建完成

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

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

程序链接：

提取码：bof0

https://i-blog.csdnimg.cn/blog_migrate/bffb66c2b4f9eae9ba4cc84581eaa444.png

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

https://i-blog.csdnimg.cn/blog_migrate/88b33832b889554616fcb608fd84724c.png

https://i-blog.csdnimg.cn/blog_migrate/e856ba83171833550d457d3db97cd0e9.png

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

https://i-blog.csdnimg.cn/blog_migrate/2d35940f6071f3716738c8908bff7452.png

修改为自己的WIFI账号和密码 https://i-blog.csdnimg.cn/blog_migrate/f69765972d8f15a02f3eecc2295575a5.png

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

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

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

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

https://i-blog.csdnimg.cn/blog_migrate/34c8fa0601f246eb00cea3209d80c470.png

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

https://i-blog.csdnimg.cn/blog_migrate/7acd362f456113e009cb9b9dc5d6c6b6.png

到此程序代码修改完毕

STM32硬件连接

精英板ATK-ESP8266模块
3.3VVCC
3.3vEN
PA2RXD
PA3TXD
GNDGND
精英板DHT11温湿度模块
3.3VVCC
GNDGND
PB9OUT

硬件连接好后下载程序进

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

https://i-blog.csdnimg.cn/blog_migrate/f8c5b4cecfa632128028b882cc073ad8.png

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

https://i-blog.csdnimg.cn/blog_migrate/c35414faf19d26d763423e32988cb70a.png

点击数据流显示可以看见我们定义的数据名字和数据上传云端 https://i-blog.csdnimg.cn/blog_migrate/9b53839164f6e5fea95835685187209a.png

数据可视化View

参考文章链接：

1.创建可视化项目

view链接：

https://i-blog.csdnimg.cn/blog_migrate/89a61c5481f9f80a0082fea5ebb50350.png

https://i-blog.csdnimg.cn/blog_migrate/89d0466986f44d14fd05b95ba06b6fce.png

创建项目空白项目 https://i-blog.csdnimg.cn/blog_migrate/5bd36afca1c5ead621a2d7973eb12b4c.png

https://i-blog.csdnimg.cn/blog_migrate/3657f6334c4c4e3682e7064fdc733a35.png

创建好后进行编辑

https://i-blog.csdnimg.cn/blog_migrate/8612eac939a835af6819008ab8f82cdb.png

我们常用的模块就在这里面，有些是要会员才可以使用，对于初学者够用 https://i-blog.csdnimg.cn/blog_migrate/6cd344f0a0f8ce2cf441f8dd12bdd5e0.png

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

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

https://i-blog.csdnimg.cn/blog_migrate/a82fd72264719198ea3fc77c03beea93.png

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

https://i-blog.csdnimg.cn/blog_migrate/86030922296b3b1b377ae141bf956790.png

选择OneNET多协议

https://i-blog.csdnimg.cn/blog_migrate/a21b70d59c48be6b75796a612ad7de22.png

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

https://i-blog.csdnimg.cn/blog_migrate/6b3be8f1cfc6e16664d7eaffa72a3508.png

https://i-blog.csdnimg.cn/blog_migrate/9be6f4bbd90f896c7b152a976dc73594.png

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

https://i-blog.csdnimg.cn/blog_migrate/aec5ed07b43c5c9392a9af659ce3a68a.png

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

https://i-blog.csdnimg.cn/blog_migrate/d55247b40ddd8c18d52af059be882d41.png

折线图的数据过滤器代码

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.仪表盘使用

选择数据源

https://i-blog.csdnimg.cn/blog_migrate/8146d4ae83c349dbc22fff0695392ee9.png

仪表盘的数据过滤器代码

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

}]

4.控制按键开关的使用

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

https://i-blog.csdnimg.cn/blog_migrate/e486c94015914108a667e64ef36827fd.png

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

https://i-blog.csdnimg.cn/blog_migrate/ca28e48bfd6eda1f28c33f4c10466126.png

https://i-blog.csdnimg.cn/blog_migrate/e283f75f4cbd2242717d0593d4762816.png

5.文本的使用

文本显示当前 LED 状态

https://i-blog.csdnimg.cn/blog_migrate/185d4226c1f72c47213efe126338b822.png

https://i-blog.csdnimg.cn/blog_migrate/f465962bb7701c75d4ebe48edd8159b8.png

文本的数据过滤器代码

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开灯"
    }]

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

https://i-blog.csdnimg.cn/blog_migrate/8efec4e586232e036633f825c6ac4c7e.png

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

小结

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

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

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

更新于 2025-01-09
 笔记, 学习
返回 | 主页