请选择 进入手机版 | 继续访问电脑版

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

[复制链接]
欣荣 发表于 2021-1-1 10:30:25 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
1.概述

颠末4周的柿饼课程入门学习,终于迎来了最后作业。那么这次的作业题目是什么呢?
两选择:

  • 炫酷汽车仪表盘实现
  • 网络音频流播放器实现
恩,考虑再三。看着汽车仪表盘挺高大上,心里想着是不是可以把这个网络音频流播放器也集成上去。
所以就决定是你了-“炫酷汽车仪表盘”。
2.素材收集

如何实现一个炫酷的汽车仪表盘,心里也不知道。看看前辈是怎么做的。俗话说:“站得高,才华看得远”。
所以素材收集也就很自然的事了。
素材收集渠道


  • 现实世界的仪表盘
    有豪车的朋侪看看能不能让我给您的仪表盘拍张靓照…
    惋惜我是没有…
  • 百度一下
    如果可以科学上网,架个梯子什么的,谷歌是不错的选择。

    [外链图片转存失败,源站大概有防盗链机制,发起将图片生存下来直接上传(img-dXqiBjcX-1609289351237)(D:\Persimmon\project\introduction-to-persimmon\4th_week\res\快照6.png)]
  • 阿里图库
    阿里图库有许多图标,免费,支持SVG、PNG、EPS等格式,使用起来非常方便。

3.制作效果图

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

4.功能概设


  • 速度指示

    • 数据显示
    • 指针显示

  • 充电指示

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

  • 水温指示

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

  • 油量指示

    • 动画效果

  • 里程显示

    • 用户行进时,里程举行累加。

  • 转向指示

    • 指示瓜代显示

  • wifi

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

  • 音乐播放

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

  • 系统设置

    • 屏幕亮度调治

  • 定位与天气

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

  • 视频播放
    以上为汽车仪表盘的相关功能设计。
5.功能实现

1.主要应用的控件



  • animatedImage
  • button
  • clock
  • imagebox
  • label
  • listctrl
  • panel
  • progressbar
  • slider
  • textbox
2.主要应用的接口



  • timer
  • audioplayer
  • 自界说面板
3.硬件外设



  • wifi模块
  • 8欧1W喇叭
4.仪表指示实现



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



  • 指定指针旋转点

    1. //设置指针旋转点this.setData({ speed_yb: { second: { x: 124, y: 126 }, } });this.setData({ charge_yb: { second: { x: 124, y: 126 }, } });
    复制代码
  • 指针旋转驱动

    1. this.setData({ speed_yb: { value: this.sec }, });
    复制代码
    在这里,改变“this.sec”的值,即可变更指针指向的角度。
    再根据仪表盘刻度,盘算出每1度指对应的值,即可完成速度值、电量值的转换。从而实现指针的动态显示。
    举个例子:

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


  • 加快、减速、刹车实现

    有了指针旋转的驱动,则汽车的加快、减速,刹车实际上是对clock控件的value值控制。
    为了摸拟减速或阻力的效果。在定时器中对value值举行自减
    1. //速度表自动降速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时,给了告诫信息、耗油处理惩罚。
    1. 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组成。如下所示:


代码实现:
  1. 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 = &#39;wifi_conn&#39; + 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: &#39;wifi - "&#39; + that.wifiArray[that.sel_wifi_index].wifi_name.value + &#39;"毗连乐成&#39; });            var conn = that.wifiArray[that.sel_wifi_index].wifi_conn.id;            that.setData({ conn: { value: &#39;wifi_tick.png&#39; } });        }    });    //--------------wifi end------------------    this.wifiScan();}//选择wifisel_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 } });        }    },        //毗连wifi        on_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(&#39;wifi info >>&#39;);            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函数,得到歌曲当前的播放时长,注意单元是毫秒。使用这两个值和进度条,即可实现总时长、当前播放时长、进度条显示和进度条拖放功能。
关键代码:
  1. 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: &#39;bubi&#39;, name: &#39;不必&#39; },        { ename: &#39;dayu&#39;, name: &#39;大鱼&#39; },        { ename: &#39;qiangu&#39;, name: &#39;千古&#39; },        { ename: &#39;zuoshou&#39;, name: &#39;左手&#39; },        { ename: &#39;lvse&#39;, name: &#39;绿色&#39; },        { ename: &#39;xiangyu&#39;, name: &#39;像鱼&#39; },        { ename: &#39;tianxiawushuan&#39;, name: &#39;天下无双&#39; },        { ename: &#39;youhebuke&#39;, name: &#39;有何不可&#39; },        { ename: &#39;fuxishaonv&#39;, name: &#39;佛系少女&#39; },    ],        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 = &#39;music&#39; + 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: &#39;Panels/music&#39;,                        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 ? &#39;0&#39; + Math.floor((time / 60 % 60)) : Math.floor((time / 60 % 60));        var s = Math.floor((time % 60)) < 10 ? &#39;0&#39; + 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: &#39;pause.png&#39; } });            return;        }        audio.pause();        this.setData({ btn_music_play: { norImg: &#39;play_music.png&#39; } });    },    //下一曲    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: &#39;shunxu.png&#39; } });                break;            case 1:                this.setData({ btn_play_mode: { norImg: &#39;danquxunhuan.png&#39; } });                break;            case 2:                this.setData({ btn_play_mode: { norImg: &#39;music_sj.png&#39; } });                break;            default:                break;        }    },}
复制代码
8.获取天气及语音播报

这个部门的功能是创建上联网乐成后的。
  6.视频分享


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

7.工程源码

  1. git clone https://gitee.com/fyywhy/introduction-to-persimmon.git
复制代码
以上为这次作业的分享,颠末4周柿饼的学习,对柿饼的认识要深入许多,柿饼基于RT-Thread实时操作系统。在RT-Thread上实现了各种外设驱动。让开发者在使用柿饼的时候,可以专注于业务层面的实现。这样无疑会大缩短开发时间,也提高了开发效率。不外现在的椒饼派IO还比力少,希望以后能丰富起来。可玩性就更强了。

来源:https://blog.csdn.net/fyywhy/article/details/111941235
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

发布主题

专注素材教程免费分享
全国免费热线电话

18768367769

周一至周日9:00-23:00

反馈建议

27428564@qq.com 在线QQ咨询

扫描二维码关注我们

Powered by Discuz! X3.4© 2001-2013 Comsenz Inc.( 蜀ICP备2021001884号-1 )