电子工程师技术服务社区
公告
登录
|
注册
首页
技术问答
厂商活动
正点原子
板卡试用
资源库
下载
文章
社区首页
文章
STM32MP157 Mini开发板评测 WEB温度表盘
分 享
扫描二维码分享
STM32MP157 Mini开发板评测 WEB温度表盘
MP157
linux
WEB
js
艾克
关注
发布时间: 2021-10-11
丨
阅读: 922
按照评测的项目来进行一些实际案例。同时也是对一些好用的技术的记录和分享。这次在miniMP157的板卡上来运行个web应用,实现一个温度表盘。 ## 一、仪表盘的示例 单纯讲一个仪表盘的实现有很多方式的,用过单片机的老王知道仅GUI库都不下5个。网上找几个图片,给大家看看这里说的的表盘究竟是什么样子。 ![](https://cf05.ickimg.com/bbsimages/202110/533ef5615ab30d1089297644f7c01d4b.png) ![](https://cf05.ickimg.com/bbsimages/202110/799f0ebc07a967b4523de34fd3269816.png) ![](https://cf05.ickimg.com/bbsimages/202110/bc6ae33ec105e8561cf17ef0481dae32.png) ## 二、仪表盘的实现方案 既然有那么多的实现方式可以选择,那如何在STM32MP157上制作一个温度表盘呢?带着这个问题老王查询了一番资料。大概有以下几个方案: (1)基于LCD显示屏的UI设计,自行绘制显示内容,构造出表盘效果; (2)基于Qt的UI设计,自行构造表盘效果或者使用第三方控件; (3)使用浏览器作为显示,利用Javascript表盘控件实现; 根据显示效果和代码难度,以及更多的可扩展性,老王决定优先用第(3)种方案来制作一个示例。那么很快就发现还是有很多选择,其中不少都是好心的网友自行设计并开源的。不过对比之后,私看中了echarts。开源自百度的商业前端数据可视化团队,是个纯净的js控件,很多图表案例。不仅仅是折线图、柱状图、饼图,甚至于雷达图、K线、热力图这些都有,包括炫酷的3D控件也可以实现。这也为老王的可扩展想法实现奠定了基础。 ![](https://cf05.ickimg.com/bbsimages/202110/3d018ed86a95d9d38a7a94b35b6df202.png) ## 三、WEB表盘方案的具体实现 公众号里是有一篇关于js的应用的文章。[JavaScript的应用案例](https://mp.weixin.qq.com/s?__biz=Mzg5MDY0NjE4OQ==&mid=2247483696&idx=1&sn=60eb728d0a5c20abd19303b7d78b178b&chksm=cfd83af2f8afb3e4c5cc3993815d8d16df646ff6aca6384bb7a4f9fd235d8c70874b66dc7c62&token=48423183&lang=zh_CN#rd "JavaScript的应用案例") 来看WEB表盘的实现: (1)软件环境。STM3MP157的Linux 系统上安装nginx。一台和开发板同一局域网的电脑并安装有较新版本的浏览器(似乎是一句废话)。 (2)HTML代码实现WEB页面效果。参考代码如下 ```html
在线温度监测
cript type="text/javascript" src="../js/jquery-3.6.0.min.js">
cript src="../js/bootstrap.bundle.min.js">
cript src="https://cdn.jsdelivr.net/npm/moment@2.29.1/locale/zh-cn.js">
cript src= "https://cdn.jsdelivr.net/npm/echarts@5.2.0/dist/echarts.min.js">
cript src="dashboard.js">
温度监测表盘
cript type="text/javascript"> connect();
cript type="text/javascript"> setInterval("getTime();",1000);
``` 没有表盘的页面效果是这样的,添加了时间显示。 ![](https://cf05.ickimg.com/bbsimages/202110/58bc6fa7f35439a0e975edadeebf9a6a.png) (3)编写Javascript代码实现控件的加载和动态效果。调试后的代码如下 ```javascript function chart_temp(){ var chartDom = document.getElementById('chart1'); 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: '#FFAFFF' }, 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' }, 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: [ { data: [ { value: random } ] }, { data: [ { value: random } ] } ] }); }, 2000); option && myChart.setOption(option); } ``` 首先运行下单个表盘的效果 ![](https://cf05.ickimg.com/bbsimages/202110/fe99ed83d43df415cc44fd8cb24cfa46.gif) 再运行下多个表盘的效果 ![](https://cf05.ickimg.com/bbsimages/202110/83621bc248812524725296b49067b214.gif) 实例就是这么容易的产生了,得益于js控件的易用性。待做好温度采集再来对接数据到WEB端。STM32MP157因为Linux软件生态的丰富性在很多项目功能的实现方式上有了更多的选择,也倒不必再拘泥于某种实现方案较劲了。 ------------ 以上内容论坛首发,公众号 懂一点技术的老王 中同步更新。欢迎关注交流。 ![](https://cf05.ickimg.com/bbsimages/202110/d0e08b783cda522c7757cd659376fddb.jpg)
原创作品,未经权利人授权禁止转载。详情见
转载须知
。
举报文章
点赞
(
0
)
艾克
关注
评论
(1)
登录后可评论,请
登录
或
注册
xbk_619187
170
天前...
ST 原装正品现货,有价格优势!欢迎咨询 QQ:53358029
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字以内)
取消
提交