HMI-28-【运动模式】给速度表添加数字显示

​ 今天我要做的功能时给速度表添加数字显示。就是下图中左侧的888

文章目录

  • HMI-28-【运动模式】给速度表添加数字显示
    • 实现数字布局
    • 代码实现
    • 代码改进，隐藏实现
    • 整体进度
    • 第一阶段成果展示

关键字： QPainter、number、Opacity、StyleSheet、Qt

实现数字布局

​ 首先需要准备我们的素材，在PS中将数字资源导出，被稍作处理。

​ 在Qt的数字仪表界面中，添加3个Label用来显示三位数字，如下图所示

代码实现

​ 代码实现很简单，就是根据当前出入车速，解析出个十百对饮的数字，改变数字资源即可，代码如下：这里其实应该规范化一下，把实现函数在包一个函数。

void MDS_LeftMiniDisplay::setCarSpeed(int speed)
{int one,ten,hundred;one = speed%10;ten = (speed%100)/10;hundred = speed/100;switch (one) {default:{ui->label_number_3->setStyleSheet("QLabel{border-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/8.png);}");break;}case 0:{ui->label_number_3->setStyleSheet("QLabel{border-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/0.png);}");break;}case 1:{ui->label_number_3->setStyleSheet("QLabel{border-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/1.png);}");break;}case 2:{ui->label_number_3->setStyleSheet("QLabel{border-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/2.png);}");break;}case 3:{ui->label_number_3->setStyleSheet("QLabel{border-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/3.png);}");break;}case 4:{ui->label_number_3->setStyleSheet("QLabel{border-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/4.png);}");break;}case 5:{ui->label_number_3->setStyleSheet("QLabel{border-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/5.png);}");break;}case 6:{ui->label_number_3->setStyleSheet("QLabel{border-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/6.png);}");break;}case 7:{ui->label_number_3->setStyleSheet("QLabel{border-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/7.png);}");break;}case 8:{ui->label_number_3->setStyleSheet("QLabel{border-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/8.png);}");break;}case 9:{ui->label_number_3->setStyleSheet("QLabel{border-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/9.png);}");break;}}switch (ten) {default:{ui->label_number_2->setStyleSheet("QLabel{border-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/8.png);}");break;}case 0:{ui->label_number_2->setStyleSheet("QLabel{border-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/0.png);}");break;}case 1:{ui->label_number_2->setStyleSheet("QLabel{border-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/1.png);}");break;}case 2:{ui->label_number_2->setStyleSheet("QLabel{border-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/2.png);}");break;}case 3:{ui->label_number_2->setStyleSheet("QLabel{border-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/3.png);}");break;}case 4:{ui->label_number_2->setStyleSheet("QLabel{border-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/4.png);}");break;}case 5:{ui->label_number_2->setStyleSheet("QLabel{border-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/5.png);}");break;}case 6:{ui->label_number_2->setStyleSheet("QLabel{border-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/6.png);}");break;}case 7:{ui->label_number_2->setStyleSheet("QLabel{border-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/7.png);}");break;}case 8:{ui->label_number_2->setStyleSheet("QLabel{border-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/8.png);}");break;}case 9:{ui->label_number_2->setStyleSheet("QLabel{border-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/9.png);}");break;}}switch (hundred) {default:{ui->label_number_1->setStyleSheet("QLabel{border-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/8.png);}");break;}case 0:{ui->label_number_1->setStyleSheet("QLabel{border-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/0.png);}");break;}case 1:{ui->label_number_1->setStyleSheet("QLabel{border-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/1.png);}");break;}case 2:{ui->label_number_1->setStyleSheet("QLabel{border-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/2.png);}");break;}case 3:{ui->label_number_1->setStyleSheet("QLabel{border-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/3.png);}");break;}case 4:{ui->label_number_1->setStyleSheet("QLabel{border-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/4.png);}");break;}case 5:{ui->label_number_1->setStyleSheet("QLabel{border-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/5.png);}");break;}case 6:{ui->label_number_1->setStyleSheet("QLabel{border-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/6.png);}");break;}case 7:{ui->label_number_1->setStyleSheet("QLabel{border-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/7.png);}");break;}case 8:{ui->label_number_1->setStyleSheet("QLabel{border-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/8.png);}");break;}case 9:{ui->label_number_1->setStyleSheet("QLabel{border-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/9.png);}");break;}}
}

代码改进，隐藏实现

​ 已经改了，这样我的内部实现函数void MDS_LeftMiniDisplay::setCarSpeedNumber(int speed)是私有函数，实现不可见，更符合C++的规范吧。

void MDS_LeftMiniDisplay::setCarSpeed(int speed)
{this->setCarSpeedNumber(speed);
}void MDS_LeftMiniDisplay::setCarSpeedNumber(int speed)
{int one,ten,hundred;one = speed%10;ten = (speed%100)/10;hundred = speed/100;switch (one) {default:{ui->label_number_3->setStyleSheet("QLabel{border-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/0.png);}");break;}case 0:{ui->label_number_3->setStyleSheet("QLabel{border-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/0.png);}");break;}case 1:{ui->label_number_3->setStyleSheet("QLabel{border-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/1.png);}");break;}case 2:{ui->label_number_3->setStyleSheet("QLabel{border-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/2.png);}");break;}case 3:{ui->label_number_3->setStyleSheet("QLabel{border-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/3.png);}");break;}case 4:{ui->label_number_3->setStyleSheet("QLabel{border-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/4.png);}");break;}case 5:{ui->label_number_3->setStyleSheet("QLabel{border-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/5.png);}");break;}case 6:{ui->label_number_3->setStyleSheet("QLabel{border-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/6.png);}");break;}case 7:{ui->label_number_3->setStyleSheet("QLabel{border-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/7.png);}");break;}case 8:{ui->label_number_3->setStyleSheet("QLabel{border-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/8.png);}");break;}case 9:{ui->label_number_3->setStyleSheet("QLabel{border-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/9.png);}");break;}}switch (ten) {default:{ui->label_number_2->setStyleSheet("QLabel{border-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/0.png);}");break;}case 0:{ui->label_number_2->setStyleSheet("QLabel{border-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/0.png);}");break;}case 1:{ui->label_number_2->setStyleSheet("QLabel{border-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/1.png);}");break;}case 2:{ui->label_number_2->setStyleSheet("QLabel{border-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/2.png);}");break;}case 3:{ui->label_number_2->setStyleSheet("QLabel{border-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/3.png);}");break;}case 4:{ui->label_number_2->setStyleSheet("QLabel{border-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/4.png);}");break;}case 5:{ui->label_number_2->setStyleSheet("QLabel{border-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/5.png);}");break;}case 6:{ui->label_number_2->setStyleSheet("QLabel{border-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/6.png);}");break;}case 7:{ui->label_number_2->setStyleSheet("QLabel{border-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/7.png);}");break;}case 8:{ui->label_number_2->setStyleSheet("QLabel{border-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/8.png);}");break;}case 9:{ui->label_number_2->setStyleSheet("QLabel{border-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/9.png);}");break;}}switch (hundred) {default:{ui->label_number_1->setStyleSheet("QLabel{border-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/0.png);}");break;}case 0:{ui->label_number_1->setStyleSheet("QLabel{border-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/0.png);}");break;}case 1:{ui->label_number_1->setStyleSheet("QLabel{border-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/1.png);}");break;}case 2:{ui->label_number_1->setStyleSheet("QLabel{border-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/2.png);}");break;}case 3:{ui->label_number_1->setStyleSheet("QLabel{border-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/3.png);}");break;}case 4:{ui->label_number_1->setStyleSheet("QLabel{border-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/4.png);}");break;}case 5:{ui->label_number_1->setStyleSheet("QLabel{border-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/5.png);}");break;}case 6:{ui->label_number_1->setStyleSheet("QLabel{border-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/6.png);}");break;}case 7:{ui->label_number_1->setStyleSheet("QLabel{border-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/7.png);}");break;}case 8:{ui->label_number_1->setStyleSheet("QLabel{border-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/8.png);}");break;}case 9:{ui->label_number_1->setStyleSheet("QLabel{border-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/9.png);}");break;}}
}

整体进度

​ 目前速度表的指针已经可以动了，并且也有数字显示了，如下图：

第一阶段成果展示

​ 目前以完成HUD界面及接口开发，液晶仪表舒适模式开发。展示如下：

全网最帅Qt开发吉利汽车仪表

说明：

本项目中所使借鉴原型来自：[吉利] 博瑞GE | 仪表HMI设计、吉利汽车HMI项目。

设计图的所有权和解释权都归吉利汽车所有。

本项目所有资源文件均有**打不死的小海**复刻制作。

本项目代码暂时不会开源，有需要的源码的可与我联系，左上角二维码加微信。

本项目仅限学习交流、禁止商业使用。

HMI-28-【运动模式】给速度表添加数字显示相关推荐

  1. Suunto Traverse 运动模式添加

    程序员身体素质也要硬,所以最近买了个Suunto Traverse运动手表,入手这个手表就是看中了续航时间比较长,不用老充电,之前买了个Ticwatch Pro向乎每天都要充电,太烦心了. Trave ...

  2. HMI-33-【运动模式】补上油量表和水温表

    HMI-33-[运动模式]补上油量表和水温表 ​ 上一篇,以为是做了一个收尾,写了灯光控制面板和底部的信息栏,但是,有位眼见的小伙伴江山壹角,直接不给我面子,说我的水温表和油量表不会动.截图位置,我记 ...

  3. suunto android 跑步软件,SUUNTO APP | 自定义运动模式教程

    原标题:SUUNTO APP | 自定义运动模式教程 SUUNTO腕表本身搭载了大量预设的运动模式, 使您的腕表在运动时,实时显示最相关的数据. 现在除了腕表本身预设的运动模式之外, 您可利用 SUU ...

  4. Mini Cheetah 代码分析（七）控制器自动切换运动模式

    正常情况下,需要在运行mit_ctrl控制器后,有两种指令下发方式:一种是通过游戏手柄遥控器发送射频信号,机器人上的接收器接收到后再处理:另一种是通过在Qt仿真界面的窗口通过lcm通讯发送指令.如果需 ...

  5. 华为手环6鸿蒙,华为手环6新品曝光 支持连续血氧监测96种运动模式

    [宅秘新闻]近些年,华为在智能穿戴市场取得了长足的发展,最新数据显示,2020年第四季度中国可穿戴设备出货量达3026万台,其中华为出货达676.1万台,市场份额占比22.3%,同比增长9.4%.近日 ...

  6. 华为 GT Runner深度测评：100+的运动模式，你想要它都有

    运动手表是目前普及程度最为广泛的可穿戴产品,入局智能穿戴的品牌众多,华为在穿戴方面投入也比较大,华为造表所带来的运动健康理念是有目共睹的,在GT系列手表之上,不仅有着多样的运动模式,同样也有专业的运动 ...

  7. 荣耀手表GS Pro开箱： 103种运动模式、超长续航更安心

    前段时间参加花粉俱乐部的众测活动,很荣幸可以参与荣耀手表GS Pro的众测.荣耀手表GS Pro刚刚到手就迫不及待给大家做一期开箱了,这一次的手表非常有质感,在机身盒子上就做了磨砂处理,映入眼帘的就是 ...

  8. wordpress怎么修改html,WordPress后台编辑器HTML模式界面中添加修改删除按钮

    在WordPress编辑器HTML模式界面中添加 按钮一文中,我大致介绍了怎么在后台添加一些自定义的按钮,本文则更为详细全面的对wordpress后台编辑器HTML模式下的按钮自定义进行详解,以让开发 ...

  9. 19.7 主动模式和被动模式 添加监控主机 添加自定义模板 处理图形

    9月11日任务 19.7 主动模式和被动模式 19.8 添加监控主机 19.9 添加自定义模板 19.10 处理图形中的乱码 19.11 自动发现 扩展 zabbix监控交换机(思科) http:// ...

最新文章

  1. 如何优雅地拿到30k月薪的offer？这几个大咖就是来帮你搞定薪水和面试官的
  2. 【 FPGA 】寄存器输出的不稳定态
  3. IIS7.5 HTTP 错误 500.19 - Internal Server Error 问题的解决方案
  4. Python 怎么样在函数内部对全局变量进行修改
  5. npm、webpack、vue-cli 快速上手版
  6. SpringCloud微服务：阿里开源组件Nacos，服务和配置管理
  7. python语句可以采用交互式执行方式_怎么在Python交互式命令行中运行脚本?
  8. [原]go lang windows环境搭建
  9. 配置用户组策略环回处理模式
  10. SLAM_ORB-SLAM3回环检测是怎么做的？
  11. sumo添加车辆_SUMO 交通控制接口 —— TraCI
  12. Python 并发简介（多线程、多进程）
  13. android炫酷的效果
  14. 042_Unicode对照表八
  15. 圆形矢量场field driven strength效果
  16. QCC3040---system state module
  17. 通过微信授权接口，获取用户微信账户信息
  18. DPU芯片企业中科驭数加入龙蜥社区，构建异构算力生态
  19. 对于手机号和邮箱的格式验证
  20. 前端 报错！ 总结：

热门文章

  1. win7系统提示非正版 该如何激活
  2. BUUCTF misc 来首歌吧
  3. vos3000 检测版本失败 网络连接失败 版本检验超时如何解决
  4. WebStorm注册机本地破解教程
  5. RFID标签打印机在加工制造业中的应用
  6. 快递100接口的简单使用：
  7. 用jk触发器设计一个011序列检测器的设计分析过程
  8. 使用Word公式编辑器
  9. 计算机大学英语教材,大学英语教材在中国
  10. 手怎么画？怎样才能画好人物的手部？