电子工程师技术服务社区
公告
登录
|
注册
首页
技术问答
厂商活动
正点原子
板卡试用
资源库
下载
文章
社区首页
文章
STM32MP157 Mini开发板评测 ECHARTS温度表盘的数据更新
分 享
扫描二维码分享
STM32MP157 Mini开发板评测 ECHARTS温度表盘的数据更新
WEB
linux
js
艾克
关注
发布时间: 2021-11-08
丨
阅读: 1067
在使用Linux开发板上的单总线接口获得DHT11的温湿度数据后,按计划要推送到WEB页面进行显示,结合echarts的仪表盘控件进行可视化展示。DHT11的温湿度数据见文章 [STM32MP157 Mini开发板评测 读取DHT11温湿度](https://www.icxbk.com/article/detail?aid=2399 "STM32MP157 Mini开发板评测 读取DHT11温湿度") 要实时更新数据就要掌握两点,一是表盘的数值定时刷新;二是要获得服务器的实时数据。服务器端的代码已经写好:[Linux C构建支持WebSocket的服务器](https://www.icxbk.com/article/preview?astatus=1&aid=2416 "Linux C构建支持WebSocket的服务器") 接下来需要实现客户端代码。自然还是使用JavaScript创建socket客户端,打开网页时和和服务器进行连接,继而获得服务器推送的数据。 以下参考代码: ```javascript function connect() { //al
ert(""); var wsServer = 'ws://192.168.0.140:8000'; try { svc_websocket = new WebSocket(wsServer); } catch (evt) { console.log("new WebSocket error:" + evt.data); svc_websocket = null; if (typeof(connCb) != "undefined" && connCb != null) connCb("-1", "connect error!"); return; } //al
ert(""); svc_websocket.onopen = svc_onOpen; svc_websocket.onclose = svc_onClose; svc_websocket.onmessage = svc_onMessage; svc_websocket.onerror = svc_onError; } ``` 程序中的wsServer变量定义的IP和端口号需要和服务器代码设定保持一致。创建新的WebSocket对象后,只需要等待事件触发后做相应处理即可。我们把接受消息单独写为一个函数: ```javascript function svc_onMessage(evt) { //输出接收到的数据内容 console.log(evt.data); } ``` 这样就准备好了客户端的通信部分。那么表盘部分如何处置呢,我们使用echarts官方的例子,暂时只修改需要的部分,一处就够。重点加了注释。 ```javascript function chart_temp(){ //对应好DOM中ID var chartDom = document.getElementById('chart3'); var myChart = echarts.init(chartDom); var option; //属性配置 option = { series: [ { type: 'gauge', center: ['50%', '60%'], startAngle: 200, endAngle: -20, min: 0, max: 60, splitNumber: 12, itemStyle: { color: '#FFAB91' }, progress: { show: true, width: 30 }, pointer: { show: false }, axisLine: { lineStyle: { width: 30 } }, axisTick: { distance: -45, splitNumber: 5, lineStyle: { width: 2, color: '#999' } }, splitLine: { distance: -52, length: 14, lineStyle: { width: 3, color: '#999' } }, axisLabel: { distance: -20, color: '#999', fontSize: 20 }, anchor: { show: false }, title: { show: false }, detail: { valueAnimation: true, width: '60%', lineHeight: 40, borderRadius: 8, offsetCenter: [0, '-15%'], fontSize: 40, fontWeight: 'bolder', formatter: '{value} °C', color: 'auto' }, //表盘的数据输入,定义一个变量就可以,var temp ,也可以是数值表示初始值 data: [ { value: 20 } ] }, { type: 'gauge', center: ['50%', '60%'], startAngle: 200, endAngle: -20, min: 0, max: 60, itemStyle: { color: '#FD7347' }, progress: { show: true, width: 8 }, pointer: { show: false }, axisLine: { show: false }, axisTick: { show: false }, splitLine: { show: false }, axisLabel: { show: false }, detail: { show: false }, data: [ { value: 20 } ] } ] }; //定时刷新表盘,只修改了数值 setInterval(function () { const random = +(Math.random() * 60).toFixed(2); myChart.setOption({ series: [ { //例子中使用的是随机数random,可以改为变量temp data: [ { value: random } ] }, { data: [ { value: random } ] } ] }); }, 2000); ``` 知道了怎么获得数据,和如何更新数据,那么服务端和客户端使用了不一样的编程语言,数据类型如何处理呢? 假设温度值23.5。 (1)服务器部分: 可以是字符串"23.5",也可以是浮点数值23.5; (2)客户端部分: 不论接受到的是文本还是数值,都可以很方便的处理。举个例子: ```javascript 数值类型: var temp = 23.5 文本类型 var temp = "23.5" Number(temp) 就可以把"23.5"转为23.5 ``` 掌握了这几点,本地数据展示到浏览器就很容易实现了。算是完成了计划的小项目。也对物联网方面的知识补充多多少少有些补充,总结需要的几个技术点: (1)WebSocket通信,客户端和服务端可以是不同的技术栈实现。 (2)echarts的例子应用,需要简要了解些JavaScript的语法。 (3)Linux下的IO使用和驱动编写,简单级别,参考开发板教程。 (4)使用浏览器调试HTML和JavaScript的方法。 (5)兴趣和坚持完成一个技术想法实现的毅力。 最后,欢迎关注转发和交流,微信搜索 懂一点技术的老王。实践是掌握技能的有效方法。
原创作品,未经权利人授权禁止转载。详情见
转载须知
。
举报文章
点赞
(
0
)
艾克
关注
评论
(0)
登录后可评论,请
登录
或
注册
相关文章推荐
MK-米客方德推出工业级存储卡
Beetle ESP32 C3 蓝牙数据收发
Beetle ESP32 C3 wifi联网获取实时天气信息
开箱测评Beetle ESP32-C3 (RISC-V芯片)模块
正点原子数控电源DP100测评
DP100试用评测-----开箱+初体验
Beetle ESP32 C3环境搭建
【花雕体验】16 使用Beetle ESP32 C3控制8X32位WS2812硬屏之二
X
你的打赏是对原创作者最大的认可
请选择打赏IC币的数量,一经提交无法退回 !
100IC币
500IC币
1000IC币
自定义
IC币
确定
X
提交成功 ! 谢谢您的支持
返回
我要举报该内容理由
×
广告及垃圾信息
抄袭或未经授权
其它举报理由
请输入您举报的理由(50字以内)
取消
提交