备案控制台
探索云世界
开发者社区 开发与运维 文章 正文

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

2023-11-10 31
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 今天我要做的功能时给速度表添加数字显示。就是下图中左侧的`888`

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

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

9169a5da45824e6e9205b254aab6874f.png

[TOC]

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

实现数字布局

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

image-20220130212808778

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

image-20220130212956855

代码实现

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

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;
    }

    }
}

整体进度

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

说明：

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

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

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

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

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

博客签名2021

文章标签：
C++
游客qytszqm66blbg
目录
相关文章
Auto17750019513
|
2月前
|
数据采集 网络协议 安全
Bently Nevada 132417-01 输入/输出模块4通道监视器输入/输出模块体系触点 行程倍增 用于将3500架置于行程中的描述
Bently Nevada 132417-01 输入/输出模块4通道监视器输入/输出模块体系触点 行程倍增 用于将3500架置于行程中的描述
Auto17750019513
9 0
厦门控匠科技
|
4月前
A-B罗克韦尔 6155R-NPXPDC 不带显示屏的紧凑型工业计算机
A-B罗克韦尔 6155R-NPXPDC 不带显示屏的紧凑型工业计算机
厦门控匠科技
20 0
皮卡丘敲级可爱
|
4月前
|
机器学习/深度学习 自然语言处理 数据可视化
“数字人交互，与虚拟的自己互动”——用PaddleAvatar打造数字分身，探索人机交互的未来
“数字人交互，与虚拟的自己互动”——用PaddleAvatar打造数字分身，探索人机交互的未来
皮卡丘敲级可爱
106 0
游客qytszqm66blbg
|
6月前
HMI-30-【运动模式】仪表右侧模块开始编写
今天喝了点小茶水，来了点写代码的感觉，那么今天就尝试吧运动模式仪表右侧的模块写了，我的资源文件中，只有音乐，所以右侧模块还是先把框架搭好，仅实现音乐模块。
游客qytszqm66blbg
38 0
HMI-30-【运动模式】仪表右侧模块开始编写
游客qytszqm66blbg
|
6月前
HMI-34-【运动模式】实现运动模式的UI上电逻辑控制
今天这界面上没有实际的增加，仅仅是实把运动模式UI上电控制逻辑实现了一下，其实到这个模块的时候，就会发现之前在写舒适模式的时候的一些问题了，有好内容可以抽象出来了，不用每次都实现一遍了。不过现在还比较懒，还是先以实现为主，和面的内容放在优化里面。废话不多说，开始搞事情。不过为了吸你们开下去，现在把目前进度放在了。
游客qytszqm66blbg
40 0
游客qytszqm66blbg
|
6月前
HMI-29-【运动模式】转速表实现及中心油耗仪表实现
今天我要搞得就是中心的这个表，指针的是转速表 中心显示的油耗表。
游客qytszqm66blbg
24 0
HMI-29-【运动模式】转速表实现及中心油耗仪表实现
游客qytszqm66blbg
|
6月前
HMI-32-【运动模式】增加灯光面板和底本信息栏
上一篇中，我们把音乐模块的图片显示功能实现了，今天来给我们的运动模式收个小尾巴，把灯光控制面本和底部信息栏也显示出来，其实这个两个如果偷懒的换，可以把舒适模式的挪过来，但是考虑到布局，还是重新实现以下吧，方式和舒适模式基本一致，都是建立模块。这里不会太详细展开。
游客qytszqm66blbg
33 0
HMI-32-【运动模式】增加灯光面板和底本信息栏
游客qytszqm66blbg
|
6月前
HMI-33-【运动模式】补上油量表和水温表
上一篇，以为是做了一个收尾，写了灯光控制面板和底部的信息栏，但是，有位眼见的小伙伴`江山壹角`，直接不给我面子，说我的水温表和油量表不会动。截图位置，我记仇哈。
游客qytszqm66blbg
23 0
游客qytszqm66blbg
|
6月前
HMI-31-【运动模式】解决音乐模块图片显示问题
上一篇中，我们基本实现了音乐模块的布局显示，但是留了个小尾巴，就是图片显示，这个模块中，图片不是方正的，而是有透视的，但是呢，Qt的图像显示显示，我还没有研究那么深入，所以目前只能是像，但是肯定不是真真的透视。我是利用遮罩来实现的，其实还是平面的图片，仅仅是用了一个透视的图片模版来覆盖一下。
游客qytszqm66blbg
26 0
HMI-31-【运动模式】解决音乐模块图片显示问题
游客qytszqm66blbg
|
6月前
HMI-27-【运动模式】解决转速表指针弧光
今天我们要解决的是液晶仪表中运动模式下，转速表指针问题，因为转速表不是标准的圆，需要处理一下下。因为这个代码时间有点长，现在还得好好缓缓，好多接口还得在回去看舒适模式，尽量还是保持统一。
游客qytszqm66blbg
21 0

热门文章

最新文章

  • 1
    解决关于Windows Defender Antivirus Service自启造成运行python程序时，Windows的cpu和内存占用过高问题
  • 2
    订票系统不再瘫痪 阿里云确认与12306合作
  • 3
    iOS - 手动下架的应用后快速恢复上架
  • 4
    du 和 df以及lsof
  • 5
    库克：苹果不是只做富人生意，还一直坚持让世界变得更好
  • 6
    WiGig无线标准正式开始提供验证 最高可达8Gbps
  • 7
    IBM推出新的16位量子处理器
  • 8
    Android:随笔——对页面的View进行截图
  • 9
    shell MAC 地址 校验
  • 10
    【系统优化】数据库系统load飙高问题解决思路
  • 1
    DataWorks产品使用合集之DataWorks中，如果一个虚拟节点被设置为冻结状态，那么它的所有子节点也将被冻结如何解决
    21
  • 2
    DataWorks产品使用合集之DataWorks发布任务的方法如何解决
    25
  • 3
    DataWorks产品使用合集之DataWorks中，配置DataHub数据源如何解决
    21
  • 4
    Nacos 1.4.1核心功能组件及使用入门
    22
  • 5
    DataWorks产品使用合集之在 DataWorks 中，有一个 MySQL 数据表，数据量非常大且数据会不断更新将这些数据同步到 DataWorks如何解决
    14
  • 6
    基于直方图的图像阈值计算和分割算法FPGA实现,包含tb测试文件和MATLAB辅助验证
    13
  • 7
    DataWorks产品使用合集之在DataWorks中，要实现MySQL数据源的增量同步如何解决
    15

    • 相关电子书

    更多
  • 营销设计场景下的图像和文字生成
  • 运动手环是伪需求 智能装备才是“王道”
  • 低成本自动三维室内重建系统

    • 相关实验场景

    更多
  • 函数计算部署AI艺术字应用，生成新春文字头像
  • Gazebo环境下基于ROS的阿克曼小车键盘控制
  • 1分钟制作专属的RFID安全标签
    • 下一篇
    2024年阿里云免费云服务器及学生云服务器申请教程参考