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。

相关文章

Linux下删除乱码文件和目录的实现方式

Linux下删除乱码文件和目录的实现方式

《Linux下删除乱码文件和目录的实现方式》：本文主要介绍Linux下删除乱码文件和目录的实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录linux下删除乱码文件和目录方法1方法2总结Linux下删除乱码文件和目录方法1使用ls -i命令找到文件或目录
阅读更多...
SpringBoot+EasyExcel实现自定义复杂样式导入导出

SpringBoot+EasyExcel实现自定义复杂样式导入导出

《SpringBoot+EasyExcel实现自定义复杂样式导入导出》这篇文章主要为大家详细介绍了SpringBoot如何结果EasyExcel实现自定义复杂样式导入导出功能,文中的示例代码讲解详细,... 目录安装处理自定义导出复杂场景1、列不固定，动态列2、动态下拉3、自定义锁定行/列，添加密码4、合并
阅读更多...
mybatis执行insert返回id实现详解

mybatis执行insert返回id实现详解

《mybatis执行insert返回id实现详解》MyBatis插入操作默认返回受影响行数,需通过useGeneratedKeys+keyProperty或selectKey获取主键ID,确保主键为自... 目录 两种方式获取自增 ID：1. ​​useGeneratedKeys+keyProperty（推
阅读更多...
Spring Boot集成Druid实现数据源管理与监控的详细步骤

Spring Boot集成Druid实现数据源管理与监控的详细步骤

《SpringBoot集成Druid实现数据源管理与监控的详细步骤》本文介绍如何在SpringBoot项目中集成Druid数据库连接池,包括环境搭建、Maven依赖配置、SpringBoot配置文件... 目录1. 引言1.1 环境准备1.2 Druid介绍2. 配置Druid连接池3. 查看Druid监控
阅读更多...
Linux在线解压jar包的实现方式

Linux在线解压jar包的实现方式

《Linux在线解压jar包的实现方式》：本文主要介绍Linux在线解压jar包的实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录linux在线解压jar包解压 jar包的步骤总结Linux在线解压jar包在 Centos 中解压 jar 包可以使用 u
阅读更多...
c++ 类成员变量默认初始值的实现

c++ 类成员变量默认初始值的实现

《c++类成员变量默认初始值的实现》本文主要介绍了c++类成员变量默认初始值,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧... 目录C++类成员变量初始化c++类的变量的初始化在C++中，如果使用类成员变量时未给定其初始值，那么它将被
阅读更多...
Qt使用QSqlDatabase连接MySQL实现增删改查功能

Qt使用QSqlDatabase连接MySQL实现增删改查功能

《Qt使用QSqlDatabase连接MySQL实现增删改查功能》这篇文章主要为大家详细介绍了Qt如何使用QSqlDatabase连接MySQL实现增删改查功能,文中的示例代码讲解详细,感兴趣的小伙伴... 目录一、创建数据表二、连接mysql数据库三、封装成一个完整的轻量级 ORM 风格类3.1 表结构
阅读更多...
基于Python实现一个图片拆分工具

基于Python实现一个图片拆分工具

《基于Python实现一个图片拆分工具》这篇文章主要为大家详细介绍了如何基于Python实现一个图片拆分工具,可以根据需要的行数和列数进行拆分,感兴趣的小伙伴可以跟随小编一起学习一下... 简单介绍先自己选择输入的图片，默认是输出到项目文件夹中，可以自己选择其他的文件夹，选择需要拆分的行数和列数，可以通过
阅读更多...
Python中将嵌套列表扁平化的多种实现方法

Python中将嵌套列表扁平化的多种实现方法

《Python中将嵌套列表扁平化的多种实现方法》在Python编程中,我们常常会遇到需要将嵌套列表（即列表中包含列表）转换为一个一维的扁平列表的需求,本文将给大家介绍了多种实现这一目标的方法,需要的朋... 目录python中将嵌套列表扁平化的方法技术背景实现步骤1. 使用嵌套列表推导式2. 使用itert
阅读更多...
Python使用pip工具实现包自动更新的多种方法

Python使用pip工具实现包自动更新的多种方法

《Python使用pip工具实现包自动更新的多种方法》本文深入探讨了使用Python的pip工具实现包自动更新的各种方法和技术,我们将从基础概念开始,逐步介绍手动更新方法、自动化脚本编写、结合CI/C... 目录1. 背景介绍1.1 目的和范围1.2 预期读者1.3 文档结构概述1.4 术语表1.4.1 核
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2