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。

相关文章

openCV中KNN算法的实现

openCV中KNN算法的实现

《openCV中KNN算法的实现》KNN算法是一种简单且常用的分类算法,本文主要介绍了openCV中KNN算法的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的... 目录KNN算法流程使用OpenCV实现KNNOpenCV 是一个开源的跨平台计算机视觉库，它提供了各
阅读更多...
OpenCV图像形态学的实现

OpenCV图像形态学的实现

《OpenCV图像形态学的实现》本文主要介绍了OpenCV图像形态学的实现,包括腐蚀、膨胀、开运算、闭运算、梯度运算、顶帽运算和黑帽运算,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起... 目录一、图像形态学简介二、腐蚀（Erosion）1. 原理2. OpenCV 实现三、膨胀China编程（
阅读更多...
通过Spring层面进行事务回滚的实现

通过Spring层面进行事务回滚的实现

《通过Spring层面进行事务回滚的实现》本文主要介绍了通过Spring层面进行事务回滚的实现,包括声明式事务和编程式事务,具有一定的参考价值,感兴趣的可以了解一下... 目录声明式事务回滚：1. 基础注解配置2. 指定回滚异常类型3. ​不回滚特殊场景编程式事务回滚：1. ​使用 TransactionT
阅读更多...
Android实现打开本地pdf文件的两种方式

Android实现打开本地pdf文件的两种方式

《Android实现打开本地pdf文件的两种方式》在现代应用中,PDF格式因其跨平台、稳定性好、展示内容一致等特点,在Android平台上,如何高效地打开本地PDF文件,不仅关系到用户体验,也直接影响... 目录一、项目概述二、相关知识2.1 PDF文件基本概述2.2 android 文件访问与存储权限2.
阅读更多...
使用Python实现全能手机虚拟键盘的示例代码

使用Python实现全能手机虚拟键盘的示例代码

《使用Python实现全能手机虚拟键盘的示例代码》在数字化办公时代,你是否遇到过这样的场景：会议室投影电脑突然键盘失灵、躺在沙发上想远程控制书房电脑、或者需要给长辈远程协助操作？今天我要分享的Pyth... 目录一、项目概述：不止于键盘的远程控制方案1.1 创新价值1.2 技术栈全景二、需求实现步骤一、需求
阅读更多...
Spring Shell 命令行实现交互式Shell应用开发

Spring Shell 命令行实现交互式Shell应用开发

《SpringShell命令行实现交互式Shell应用开发》本文主要介绍了SpringShell命令行实现交互式Shell应用开发,能够帮助开发者快速构建功能丰富的命令行应用程序,具有一定的参考价... 目录引言一、Spring Shell概述二、创建命令类三、命令参数处理四、命令分组与帮助系统五、自定义S
阅读更多...
SpringBatch数据写入实现

SpringBatch数据写入实现

《SpringBatch数据写入实现》SpringBatch通过ItemWriter接口及其丰富的实现,提供了强大的数据写入能力,本文主要介绍了SpringBatch数据写入实现,具有一定的参考价值,... 目录python引言一、ItemWriter核心概念二、数据库写入实现三、文件写入实现四、多目标写入
阅读更多...
Android Studio 配置国内镜像源的实现步骤

Android Studio 配置国内镜像源的实现步骤

《AndroidStudio配置国内镜像源的实现步骤》本文主要介绍了AndroidStudio配置国内镜像源的实现步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,... 目录一、修改 hosts，解决 SDK 下载失败的问题二、修改 gradle 地址，解决 gradle
阅读更多...
SpringSecurity JWT基于令牌的无状态认证实现

SpringSecurity JWT基于令牌的无状态认证实现

《SpringSecurityJWT基于令牌的无状态认证实现》SpringSecurity中实现基于JWT的无状态认证是一种常见的做法,本文就来介绍一下SpringSecurityJWT基于令牌的无... 目录引言一、JWT基本原理与结构二、Spring Security JWT依赖配置三、JWT令牌生成与
阅读更多...
SpringBoot实现微信小程序支付功能

SpringBoot实现微信小程序支付功能

《SpringBoot实现微信小程序支付功能》小程序支付功能已成为众多应用的核心需求之一,本文主要介绍了SpringBoot实现微信小程序支付功能,文中通过示例代码介绍的非常详细,对大家的学习或者工作... 目录一、引言二、准备工作（一）微信支付商户平台配置（二）Spring Boot项目搭建（三）配置文件
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2