RT-Thread 柿饼派UI---汽车仪表盘实现

2023-11-03 18:59
文章标签 实现 仪表盘 ui 汽车 thread rt 柿饼

本文主要是介绍RT-Thread 柿饼派UI---汽车仪表盘实现，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1.概述

经过4周的柿饼课程入门学习，终于迎来了最后作业。那么这次的作业题目是什么呢？

两选择：

  1. 炫酷汽车仪表盘实现
  2. 网络音频流播放器实现

恩，考虑再三。看着汽车仪表盘挺高大上，心里想着是不是可以把这个网络音频流播放器也集成上去。

所以就决定是你了－“炫酷汽车仪表盘”。

2.素材收集

如何实现一个炫酷的汽车仪表盘，心里也不知道。看看前辈是怎么做的。俗话说：“站得高，才能看得远”。

所以素材收集也就很自然的事了。

素材收集渠道

  • 现实世界的仪表盘

    有豪车的朋友看看能不能让我给您的仪表盘拍张靓照…

    可惜我是没有…

  • 百度一下

    如果可以科学上网，架个梯子什么的，谷歌是不错的选择。
    在这里插入图片描述

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dXqiBjcX-1609289351237)(D:\Persimmon\project\introduction-to-persimmon\4th_week\res\快照6.png)]

  • 阿里图库

    阿里图库有很多图标，免费，支持SVG、PNG、EPS等格式，使用起来非常方便。

在这里插入图片描述

3.制作效果图

在网上找了很久图片，获取很多灵感。把各个元素集合起来，动起手来，先这样，然后这样，最后就是下面这样了。

在这里插入图片描述在这里插入图片描述在这里插入图片描述

4.功能概设

  1. 速度指示

    • 数据显示
    • 指针显示

  2. 充电指示

    • 当用户进行充电时，电池图标进行动画播放。充电量进行数值显示。
    • 在充电过程中，指针动态地指向相应的数值。
    • 充电完成后，自动断开充电。

  3. 水温指示

    • 当用户行进时，水温逐渐升高。
    • 当用户停止行进时，水温逐渐降低。

  4. 油量指示

    • 动画效果

  5. 里程显示

    • 用户行进时，里程进行累加。

  6. 转向指示

    • 指示交替显示

  7. wifi

    • wifi扫描
    • wifi密码输入
    • wifi联接状态显示

  8. 音乐播放

    • 上一曲
    • 播放/暂停
    • 下一曲
    • 音量调节
    • 歌曲总时长显示
    • 歌曲实时时长显示
    • 歌曲播放进度显示
    • 歌曲进度条拖放播放
    • 歌曲播放模式设置（顺序播放、单曲循环、随机播放）
    • 歌曲列表显示
    • 歌曲列表点击播放

  9. 系统设置

    • 屏幕亮度调节

  10. 定位与天气

    • 城市列表显示
    • 根据选择的城市获取实时天气信息。
    • 根据实时天气信息进行语音播放。

  11. 视频播放

    以上为汽车仪表盘的相关功能设计。

5.功能实现

1.主要应用的控件

  • animatedImage
  • button
  • clock
  • imagebox
  • label
  • listctrl
  • panel
  • progressbar
  • slider
  • textbox

2.主要应用的接口

  • timer
  • audioplayer
  • 自定义面板

3.硬件外设

  • wifi模块
  • 8欧1W喇叭

4.仪表指示实现

  • 构建仪表

仪表构建主要运用clock控件，将指针设置为“秒针图片”，表盘设置为“背景图片”。如下所示：

在这里插入图片描述

  • 指定指针旋转点
    //设置指针旋转点
this.setData({ speed_yb: { second: { x: 124, y: 126 }, } });
this.setData({ charge_yb: { second: { x: 124, y: 126 }, } });
  • 指针旋转驱动
    this.setData({ speed_yb: { value: this.sec }, });

    在这里，改变“this.sec”的值，即可变更指针指向的角度。

    再根据仪表盘刻度，计算出每1度指对应的值，即可完成速度值、电量值的转换。从而实现指针的动态显示。

    举个例子：

在这里插入图片描述

注意：由于Clock控制对秒针的控制是整型的，也就是要么是1秒，要么2秒等，没有1.5秒这种显示。所以对于仪表盘指针的显示精确度会较低，所以刻度跨度不宜太大，否则指示精度会很低。

  • 加速、减速、刹车实现

    有了指针旋转的驱动，则汽车的加速、减速，刹车实际上是对clock控件的value值控制。

    为了摸拟减速或阻力的效果。在定时器中对value值进行自减

    //速度表自动降速
this.timer1 = setInterval(function () {            if (37 < that.sec) {that.setData({ speed_yb: { value: that.sec-- }, });}
}, 100);//加速按钮
btn_up_click function(event){if (82 > this.sec) {//当为82时，达到满刻度this.sec += 3;if (79 < this.sec) {this.sec = 82;}}this.setData({ speed_yb: { value: this.sec }, });
}//刹车按钮
btn_down_click function(event){if (37 < this.sec) {this.sec -= 2;if (40 > this.sec) {this.sec = 37;}this.setData({ speed_yb: { value: this.sec }, });}
}

    充电效果同理。

5.水温、油量指示实现

  • 水温油量构建

    水温油量由imagebox、progressbar、label构成。

    对progressbar设置前景图片、背景图片，可以制作很多有意思的UI。

在这里插入图片描述

  • 业务逻辑实现

    对水温、油表的控制，实际上是对progressbar的控制。

    在定时器中，实现对水温的降低处理。

    在加速按钮中实现测量检测，当油量小于2时，给了警告信息、耗油处理。

    
this.timer1 = setInterval(function () {  ...//水温自动降低if (20 < that.water_temp && 0 == (that.time_cnt % 5)) {that.setData({ water_temp_bar: that.water_temp-- });}......
}, 100);//加速按钮
btn_up_click function(event){.....    //油量检测if (2 > this.cur_oil_vol) {this.setData({ panel_warning: { hide: false } });break;}//水温升高实现if (100 > this.water_temp) {this.speed_up_cnt++;if (2 == this.speed_up_cnt) {this.speed_up_cnt = 0;this.setData({ water_temp_bar: this.water_temp++ });}}                    //耗油实现if (0 < this.cur_oil_vol) {if (0 == (this.time_cnt % 5)) {this.cur_oil_vol--;var vol = 100 - this.cur_oil_vol;this.setData({ fuel_bar: vol });}}......
}

6.wifi

wifi接口在帮助文档中其实已经很详细了。这里分享一下wifi扫描列表的实现。

wifi列表的实现用到了自定义面板。由3个imagebox和1个button组成。如下所示：

在这里插入图片描述
在这里插入图片描述

代码实现：

onLoad: function (event) {var that = this;//--------------wifi start------------------this.wifi = pm.createWifi();// 监听扫描 WiFi 结束事件，并配置事件回调函数this.wifi.onScanEvent(function (res) {if (res) {that.wifiArray = new Array();for (var i = 0; i < res.length; i++) {var item = res[i];var wifiItem = new Object();wifiItem.wifi_name = new Object();wifiItem.wifi_name.value = item.ssid;wifiItem.wifi_name.id = wifi_button + i;wifiItem.wifi_conn = new Object();wifiItem.wifi_conn.id = 'wifi_conn' + i;that.wifiArray.push(wifiItem);}// 将搜索到的wifi信息绑定到自定义面板that.setData({wifi_list: {list: {empty: true,page: that,items: [{xml: "Panels/wifi",items: that.wifiArray}]}}});}else {console.log("WiFi cannot be scanned.");}});this.wifi.onConnectEvent(function (res) {if (res) {console.log("wifi is connected");console.dir(res);} else {console.log("wifi is connected fail");}});this.wifi.onNetworkEvent(function (res) {if (res) {that.setData({ lbl_tips: 'wifi - \"' + that.wifiArray[that.sel_wifi_index].wifi_name.value + '\"连接成功' });var conn = that.wifiArray[that.sel_wifi_index].wifi_conn.id;that.setData({ conn: { value: 'wifi_tick.png' } });}});//--------------wifi end------------------this.wifiScan();
}//选择wifi
sel_wifi_index: 0,on_wifi_select: function (event) {if (typeof (this.wifiArray) == "object") {this.sel_wifi_index = parseInt(event.target.id.substring(wifi_button.length));this.setData({ panel_link: { hide: false } });}},//连接wifion_btn_wifi_link_click: function (event) {var info = new Object();info.ssid = this.wifiArray[this.sel_wifi_index].wifi_name.value;info.password = this.wifi_passwd;console.log('wifi info >>');console.dir(info)if (this.wifi.connect(info) == true) {console.log("connect success  wifi password :" + info.password);} else {console.log("connect fail");}this.setData({ panel_link: { hide: true } });},//记录输入的密码信息onTextbox: function (event) {this.wifi_passwd = event.detail.value;console.log("passwd:" + this.wifi_passwd);},//wifi扫描wifiScan: function (event) {if (this.wifi.scan() == true) {console.log("scan WiFi success");} else {console.log("scan WiFi fail");}},

7.音乐播放器

Audio Player 接口在帮助文档中也有很详细的介绍。

在这里插入图片描述
在这里插入图片描述

其主要功能：上一曲、播放/暂停、下一曲，音量调节、总时长显示、当前时长显示、播放模式选择、进度条拖放等。

audioplayer在播放的时候，会触发onPlay函数，得到歌曲的总时长，注意单位是秒。在播放过程中，会不断触发onTimeUpdate函数，得到歌曲当前的播放时长，注意单位是毫秒。利用这两个值和进度条，即可实现总时长、当前播放时长、进度条显示和进度条拖放功能。

关键代码：

volume = 50;	     //音量调节
process = 0;         //当前歌曲播放时长
music_max_time = 0;  //歌曲总时长
is_set_voice = 0;    //是否在进行音量设置
is_music_play = 0;   //是否播放
music_sel_no = 0;    //歌曲序号
music_play_mode = 0; //播放模式：0，顺序播放；1，单曲循环；2，随机播放var page = {musics: [{ ename: 'bubi', name: '不必' },{ ename: 'dayu', name: '大鱼' },{ ename: 'qiangu', name: '千古' },{ ename: 'zuoshou', name: '左手' },{ ename: 'lvse', name: '绿色' },{ ename: 'xiangyu', name: '像鱼' },{ ename: 'tianxiawushuan', name: '天下无双' },{ ename: 'youhebuke', name: '有何不可' },{ ename: 'fuxishaonv', name: '佛系少女' },],onLoad: function (event) {//音乐列表this.setData({ panel_voice: { hide: true } });var v = audio.getVolume();this.setData({ slider_voice: v });var music_item = new Array();// 循环或得到 musics 内的音乐信息for (var i = 0; i < this.musics.length; i++) {var item = new Object();item.btn_music_select = new Object();item.btn_music_select.value = this.musics[i].name;item.btn_music_select.id = 'music' + i;item.lbl_music_index = new Object();item.lbl_music_index.value = (i + 1) + ".";music_item.push(item);}// 绑定音乐信息到页面music_list列表控件this.setData({music_list: {list: {page: this,items: [{xml: 'Panels/music',items: music_item}]}}})//显示歌曲播放时长、总时长audio.onTimeUpdate(function (e) {progress = e / music_max_time;that.setData({ slider_process: { value: progress } });var time_str = that.get_music_time(e / 1000) + "/" + that.get_music_time(music_max_time);that.setData({ lbl_music_time: { value: time_str } });});//显示歌曲总时长audio.onPlay(function (e) {music_max_time = e;var time_str = that.get_music_time(0) + "/" + that.get_music_time(e);that.setData({ lbl_music_time: { value: time_str } });});this.timer1 = setInterval(function () {...//更新音乐播放声音与时间if (1 == update) {audio.setVolume(volume);update = 0;}else if (2 == update) {audio.seek(progress);update = 0;}that.time_cnt %= 10000000;......}, 100);}//根据秒获取“00：00”格式的字符串get_music_time: function (time) {var m = Math.floor((time / 60 % 60)) < 10 ? '0' + Math.floor((time / 60 % 60)) : Math.floor((time / 60 % 60));var s = Math.floor((time % 60)) < 10 ? '0' + Math.floor((time % 60)) : Math.floor((time % 60));return result = m + ":" + s;},//点击歌曲列表时，播放对应的歌曲on_music_select: function (event) {audio.stop();music_sel_no = parseInt(event.target.id.substring(5));console.log("music select no:" + music_sel_no);audio.setSrc("/mnt/sd0/filesystem/" + this.musics[music_sel_no].ename + ".mp3");audio.play();},//上一曲on_music_pre: function (event) {audio.stop();if (0 == music_play_mode) {if (0 < music_sel_no) {music_sel_no--;}else {music_sel_no = this.musics.length;}}else if (2 == music_play_mode) {music_sel_no = get_range_num(0, this.musics.length);}audio.setSrc("/mnt/sd0/filesystem/" + this.musics[music_sel_no].ename + ".mp3");audio.play();},//播放on_music_play: function (event) {is_music_play = !is_music_play;if (is_music_play) {audio.play();audio.seek(progress);this.setData({ btn_music_play: { norImg: 'pause.png' } });return;}audio.pause();this.setData({ btn_music_play: { norImg: 'play_music.png' } });},//下一曲on_music_next: function (event) {audio.stop();if (0 == music_play_mode) {if (this.musics.length > music_sel_no) {music_sel_no++;}else {music_sel_no = 0;}}else if (2 == music_play_mode) {music_sel_no = get_range_num(0, this.musics.length);}audio.setSrc("/mnt/sd0/filesystem/" + this.musics[music_sel_no].ename + ".mp3");audio.play();},//音量调节面板显示与隐藏on_music_voice: function (event) {is_set_voice = !is_set_voice;this.setData({ panel_voice: { visible: is_set_voice } });},//音量调节on_vol_change: function (event) {volume = event.detail.value;update = 1;},//进度条拖放on_proc_change: function (event) {console.log("silder value:" + event.detail.value);console.log("music_max_time:" + music_max_time);progress = event.detail.value / 1000 * music_max_time;update = 2;console.log("on_proc_change=>" + progress);},//播放模式选择on_play_mode_change: function (event) {music_play_mode++;music_play_mode = music_play_mode % 3;switch (music_play_mode) {case 0:this.setData({ btn_play_mode: { norImg: 'shunxu.png' } });break;case 1:this.setData({ btn_play_mode: { norImg: 'danquxunhuan.png' } });break;case 2:this.setData({ btn_play_mode: { norImg: 'music_sj.png' } });break;default:break;}},
}

8.获取天气及语音播报

这个部分的功能是建立上联网成功后的。

6.视频分享

RT-Thread 第4周柿饼派学习入门课程－决赛作品

7.工程源码

git clone https://gitee.com/fyywhy/introduction-to-persimmon.git

以上为这次作业的分享，经过4周柿饼的学习，对柿饼的认识要深入很多，柿饼基于RT-Thread实时操作系统。在RT-Thread上实现了各种外设驱动。让开发者在使用柿饼的时候，可以专注于业务层面的实现。这样无疑会大缩短开发时间，也提高了开发效率。不过目前的椒饼派IO还比较少，希望以后能丰富起来。可玩性就更强了。

这篇关于RT-Thread 柿饼派UI---汽车仪表盘实现的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/340228。

相关文章

HarmonyOS学习(七)——UI（五）常用布局总结

HarmonyOS学习(七)——UI（五）常用布局总结

自适应布局 1.1、线性布局（LinearLayout） 通过线性容器Row和Column实现线性布局。Column容器内的子组件按照垂直方向排列，Row组件中的子组件按照水平方向排列。 属性说明space通过space参数设置主轴上子组件的间距，达到各子组件在排列上的等间距效果alignItems设置子组件在交叉轴上的对齐方式，且在各类尺寸屏幕上表现一致，其中交叉轴为垂直时，取值为Vert
阅读更多...
hdu1043（八数码问题，广搜 + hash（实现状态压缩） ）

hdu1043（八数码问题，广搜 + hash（实现状态压缩） ）

利用康拓展开将一个排列映射成一个自然数，然后就变成了普通的广搜题。 #include<iostream>#include<algorithm>#include<string>#include<stack>#include<queue>#include<map>#include<stdio.h>#include<stdlib.h>#include<ctype.h>#inclu
阅读更多...
【专题】2024飞行汽车技术全景报告合集PDF分享（附原数据表）

【专题】2024飞行汽车技术全景报告合集PDF分享（附原数据表）

原文链接： https://tecdat.cn/?p=37628 6月16日，小鹏汇天旅航者X2在北京大兴国际机场临空经济区完成首飞，这也是小鹏汇天的产品在京津冀地区进行的首次飞行。小鹏汇天方面还表示，公司准备量产，并计划今年四季度开启预售小鹏汇天分体式飞行汽车，探索分体式飞行汽车城际通勤。阅读原文，获取专题报告合集全文，解锁文末271份飞行汽车相关行业研究报告。 据悉，业内人士对飞行汽车行业
阅读更多...
【C++】_list常用方法解析及模拟实现

【C++】_list常用方法解析及模拟实现

相信自己的力量，只要对自己始终保持信心，尽自己最大努力去完成任何事，就算事情最终结果是失败了，努力了也不留遗憾。💓💓💓 目录   ✨说在前面 🍋知识点一：什么是list？ •🌰1.list的定义 •🌰2.list的基本特性 •🌰3.常用接口介绍 🍋知识点二：list常用接口 •🌰1.默认成员函数 🔥构造函数（⭐） 🔥析构函数 •🌰2.list对象
阅读更多...
【Prometheus】PromQL向量匹配实现不同标签的向量数据进行运算

【Prometheus】PromQL向量匹配实现不同标签的向量数据进行运算

✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯，先赞后看哦~🎈🎈 🏆 作者简介：景天科技苑 🏆《头衔》：大厂架构师，华为云开发者社区专家博主，阿里云开发者社区专家博主，CSDN全栈领域优质创作者，掘金优秀博主，51CTO博客专家等。 🏆《博客》：Python全栈，前后端开发，小程序开发，人工智能，js逆向，App逆向，网络系统安全，数据分析，Django，fastapi
阅读更多...
让树莓派智能语音助手实现定时提醒功能

让树莓派智能语音助手实现定时提醒功能

最初的时候是想直接在rasa 的chatbot上实现，因为rasa本身是带有remindschedule模块的。不过经过一番折腾后，忽然发现，chatbot上实现的定时，语音助手不一定会有响应。因为，我目前语音助手的代码设置了长时间无应答会结束对话，这样一来，chatbot定时提醒的触发就不会被语音助手获悉。那怎么让语音助手也具有定时提醒功能呢？ 我最后选择的方法是用threading.Time
阅读更多...
Android实现任意版本设置默认的锁屏壁纸和桌面壁纸（两张壁纸可不一致）

Android实现任意版本设置默认的锁屏壁纸和桌面壁纸（两张壁纸可不一致）

客户有些需求需要设置默认壁纸和锁屏壁纸  在默认情况下 这两个壁纸是相同的  如果需要默认的锁屏壁纸和桌面壁纸不一样 需要额外修改 Android13实现 替换默认桌面壁纸： 将图片文件替换frameworks/base/core/res/res/drawable-nodpi/default_wallpaper.*  （注意不能是bmp格式） 替换默认锁屏壁纸： 将图片资源放入vendo
阅读更多...
C#实战|大乐透选号器[6]：实现实时显示已选择的红蓝球数量

C#实战|大乐透选号器[6]：实现实时显示已选择的红蓝球数量

哈喽，你好啊，我是雷工。 关于大乐透选号器在前面已经记录了5篇笔记，这是第6篇； 接下来实现实时显示当前选中红球数量，蓝球数量； 以下为练习笔记。 01 效果演示 当选择和取消选择红球或蓝球时，在对应的位置显示实时已选择的红球、蓝球的数量； 02 标签名称 分别设置Label标签名称为：lblRedCount、lblBlueCount
阅读更多...
Kubernetes PodSecurityPolicy：PSP能实现的5种主要安全策略

Kubernetes PodSecurityPolicy：PSP能实现的5种主要安全策略

Kubernetes PodSecurityPolicy：PSP能实现的5种主要安全策略 1. 特权模式限制2. 宿主机资源隔离3. 用户和组管理4. 权限提升控制5. SELinux配置 💖The Begin💖点点关注，收藏不迷路💖 Kubernetes的PodSecurityPolicy（PSP）是一个关键的安全特性，它在Pod创建之前实施安全策略，确保P
阅读更多...
工厂ERP管理系统实现源码（JAVA）

工厂ERP管理系统实现源码（JAVA）

工厂进销存管理系统是一个集采购管理、仓库管理、生产管理和销售管理于一体的综合解决方案。该系统旨在帮助企业优化流程、提高效率、降低成本，并实时掌握各环节的运营状况。 在采购管理方面，系统能够处理采购订单、供应商管理和采购入库等流程，确保采购过程的透明和高效。仓库管理方面，实现库存的精准管理，包括入库、出库、盘点等操作，确保库存数据的准确性和实时性。 生产管理模块则涵盖了生产计划制定、物料需求计划、
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2