AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

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

2023-11-10 101
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 今天我要做的功能时给速度表添加数字显示。就是下图中左侧的`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
目录
相关文章
LabVIEW开发
|
8月前
|
算法
LabVIEW在同一个面板下描绘模拟波形和数字波形
LabVIEW在同一个面板下描绘模拟波形和数字波形
LabVIEW开发
61 0
Auto17750019513
|
8月前
|
数据采集 网络协议 安全
Bently Nevada 132417-01 输入/输出模块4通道监视器输入/输出模块体系触点 行程倍增 用于将3500架置于行程中的描述
Bently Nevada 132417-01 输入/输出模块4通道监视器输入/输出模块体系触点 行程倍增 用于将3500架置于行程中的描述
Auto17750019513
40 0
楠竹11
|
8月前
|
人工智能 UED
“视觉AI任意门”AnyDoor，只需点两下鼠标就可以实现任意场景物体交换
【2月更文挑战第17天】“视觉AI任意门”AnyDoor，只需点两下鼠标就可以实现任意场景物体交换
楠竹11
387 1
“视觉AI任意门”AnyDoor，只需点两下鼠标就可以实现任意场景物体交换
zuoben
|
数据可视化 物联网
Threejs物联网，养殖场3D可视化（三）模型展示，轨道控制器设置，模型沿着路线运动，模型添加边框，自定义样式显示标签，点击模型获取信息
Threejs物联网，养殖场3D可视化（三）模型展示，轨道控制器设置，模型沿着路线运动，模型添加边框，自定义样式显示标签，点击模型获取信息
zuoben
981 15
Threejs物联网，养殖场3D可视化（三）模型展示，轨道控制器设置，模型沿着路线运动，模型添加边框，自定义样式显示标签，点击模型获取信息
游客qytszqm66blbg
HMI-30-【运动模式】仪表右侧模块开始编写
今天喝了点小茶水，来了点写代码的感觉，那么今天就尝试吧运动模式仪表右侧的模块写了，我的资源文件中，只有音乐，所以右侧模块还是先把框架搭好，仅实现音乐模块。
游客qytszqm66blbg
85 0
HMI-30-【运动模式】仪表右侧模块开始编写
游客qytszqm66blbg
HMI-29-【运动模式】转速表实现及中心油耗仪表实现
今天我要搞得就是中心的这个表，指针的是转速表 中心显示的油耗表。
游客qytszqm66blbg
73 0
HMI-29-【运动模式】转速表实现及中心油耗仪表实现
游客qytszqm66blbg
HMI-31-【运动模式】解决音乐模块图片显示问题
上一篇中，我们基本实现了音乐模块的布局显示，但是留了个小尾巴，就是图片显示，这个模块中，图片不是方正的，而是有透视的，但是呢，Qt的图像显示显示，我还没有研究那么深入，所以目前只能是像，但是肯定不是真真的透视。我是利用遮罩来实现的，其实还是平面的图片，仅仅是用了一个透视的图片模版来覆盖一下。
游客qytszqm66blbg
64 0
HMI-31-【运动模式】解决音乐模块图片显示问题
游客qytszqm66blbg
HMI-32-【运动模式】增加灯光面板和底本信息栏
上一篇中，我们把音乐模块的图片显示功能实现了，今天来给我们的运动模式收个小尾巴，把灯光控制面本和底部信息栏也显示出来，其实这个两个如果偷懒的换，可以把舒适模式的挪过来，但是考虑到布局，还是重新实现以下吧，方式和舒适模式基本一致，都是建立模块。这里不会太详细展开。
游客qytszqm66blbg
66 0
HMI-32-【运动模式】增加灯光面板和底本信息栏
游客qytszqm66blbg
HMI-27-【运动模式】解决转速表指针弧光
今天我们要解决的是液晶仪表中运动模式下，转速表指针问题，因为转速表不是标准的圆，需要处理一下下。因为这个代码时间有点长，现在还得好好缓缓，好多接口还得在回去看舒适模式，尽量还是保持统一。
游客qytszqm66blbg
64 0
游客qytszqm66blbg
HMI-34-【运动模式】实现运动模式的UI上电逻辑控制
今天这界面上没有实际的增加，仅仅是实把运动模式UI上电控制逻辑实现了一下，其实到这个模块的时候，就会发现之前在写舒适模式的时候的一些问题了，有好内容可以抽象出来了，不用每次都实现一遍了。不过现在还比较懒，还是先以实现为主，和面的内容放在优化里面。废话不多说，开始搞事情。不过为了吸你们开下去，现在把目前进度放在了。
游客qytszqm66blbg
80 0

热门文章

最新文章

  • 1
    TMPFS详解
  • 2
    开源/免费/强大的移动端触摸滑动插件 — Swiper
  • 3
    阿里高级技术专家谈开源DDD框架：COLA4.1，分离架构和组件（下）
  • 4
    选择DDOS防御的几个关键因素
  • 5
    阿里云RPA（机器人流程自动化）干货系列之二：认识RPA（下）
  • 6
    对象存储 OSS图片高级压缩的功能使用及示例
  • 7
    蚂蚁端智能：超实时端特征中心的建设与实践
  • 8
    虚拟桌面Profile福音----View 5
  • 9
    Guice系列之用户指南（三）
  • 10
    一步一步学Mule ESB——（第二篇：Ajax篇）
  • 1
    Spring AI，搭建个人AI助手
    91
  • 2
    DeepSeek爆火，如何免费部署到你的电脑上？获取顶级推理能力教程来了
    1152
  • 3
    DiffuEraser：阿里通义实验室推出的视频修复模型，支持高清修复、时间一致性优化
    45
  • 4
    Baichuan-Omni-1.5：百川智能开源全模态理解与生成模型，支持文本、图像、音频和视频的多模态输入和输出
    53
  • 5
    深度学习中模型训练的过拟合与欠拟合问题
    104
  • 6
    Deploy Github Pages With GPG Signing
    93
  • 7
    NEON LiDAR 数据导出的地表数字模型 (DSM) 和地形数字模型 (DTM)1m分辨率
    89
  • 8
    ​2013-至今激光雷达点云树冠顶部距裸露地面的高度（树冠高度模型；CHM）1m分辨率
    27
  • 9
    NOAA 巴罗阿拉斯加观测站的受体在 1982 年至 2011 年这 30 年间 12 个选定年份（8 月 15 日至 10 月 15 日）的随机时间倒拉格朗日传输模型输出结果
    21
  • 10
    美团面试：MySQL为什么 不用 Docker部署？
    100

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    DataWorks售前咨询