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

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

2023-11-10 94
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 今天我要做的功能时给速度表添加数字显示。就是下图中左侧的`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开发
|
7月前
|
算法
LabVIEW在同一个面板下描绘模拟波形和数字波形
LabVIEW在同一个面板下描绘模拟波形和数字波形
LabVIEW开发
57 0
Auto17750019513
|
7月前
|
数据采集 网络协议 安全
Bently Nevada 132417-01 输入/输出模块4通道监视器输入/输出模块体系触点 行程倍增 用于将3500架置于行程中的描述
Bently Nevada 132417-01 输入/输出模块4通道监视器输入/输出模块体系触点 行程倍增 用于将3500架置于行程中的描述
Auto17750019513
38 0
热爱嵌入式的小佳同学
|
7月前
|
存储 前端开发 人机交互
简易数字示波器制作-1
简易数字示波器制作
热爱嵌入式的小佳同学
102 1
厦门控匠科技
|
7月前
|
安全 算法
Honeywell 霍尼韦尔 UDC1200 和 UDC1700通用数字控制器
Honeywell 霍尼韦尔 UDC1200 和 UDC1700通用数字控制器
厦门控匠科技
50 0
皮卡丘敲级可爱
|
7月前
|
机器学习/深度学习 自然语言处理 数据可视化
“数字人交互，与虚拟的自己互动”——用PaddleAvatar打造数字分身，探索人机交互的未来
“数字人交互，与虚拟的自己互动”——用PaddleAvatar打造数字分身，探索人机交互的未来
皮卡丘敲级可爱
284 0
游客qytszqm66blbg
HMI-31-【运动模式】解决音乐模块图片显示问题
上一篇中，我们基本实现了音乐模块的布局显示，但是留了个小尾巴，就是图片显示，这个模块中，图片不是方正的，而是有透视的，但是呢，Qt的图像显示显示，我还没有研究那么深入，所以目前只能是像，但是肯定不是真真的透视。我是利用遮罩来实现的，其实还是平面的图片，仅仅是用了一个透视的图片模版来覆盖一下。
游客qytszqm66blbg
59 0
HMI-31-【运动模式】解决音乐模块图片显示问题
游客qytszqm66blbg
HMI-32-【运动模式】增加灯光面板和底本信息栏
上一篇中，我们把音乐模块的图片显示功能实现了，今天来给我们的运动模式收个小尾巴，把灯光控制面本和底部信息栏也显示出来，其实这个两个如果偷懒的换，可以把舒适模式的挪过来，但是考虑到布局，还是重新实现以下吧，方式和舒适模式基本一致，都是建立模块。这里不会太详细展开。
游客qytszqm66blbg
60 0
HMI-32-【运动模式】增加灯光面板和底本信息栏
游客qytszqm66blbg
HMI-29-【运动模式】转速表实现及中心油耗仪表实现
今天我要搞得就是中心的这个表，指针的是转速表 中心显示的油耗表。
游客qytszqm66blbg
62 0
HMI-29-【运动模式】转速表实现及中心油耗仪表实现
游客qytszqm66blbg
HMI-30-【运动模式】仪表右侧模块开始编写
今天喝了点小茶水，来了点写代码的感觉，那么今天就尝试吧运动模式仪表右侧的模块写了，我的资源文件中，只有音乐，所以右侧模块还是先把框架搭好，仅实现音乐模块。
游客qytszqm66blbg
79 0
HMI-30-【运动模式】仪表右侧模块开始编写
游客qytszqm66blbg
HMI-34-【运动模式】实现运动模式的UI上电逻辑控制
今天这界面上没有实际的增加，仅仅是实把运动模式UI上电控制逻辑实现了一下，其实到这个模块的时候，就会发现之前在写舒适模式的时候的一些问题了，有好内容可以抽象出来了，不用每次都实现一遍了。不过现在还比较懒，还是先以实现为主，和面的内容放在优化里面。废话不多说，开始搞事情。不过为了吸你们开下去，现在把目前进度放在了。
游客qytszqm66blbg
74 0

热门文章

最新文章

  • 1
    跟阿里云技术专家阙寒一起深度了解视频直播CDN技术
  • 2
    流批一体的近实时数仓的思考与设计
  • 3
    丰富、连接、待集成—MaxCompute 生态再出发
  • 4
    securecrt克隆会话与sshd 的 MaxSessions
  • 5
    McAfee揭秘网络最危险搜索关键词
  • 6
    微软再爆IE 0day漏洞 绿盟科技提供预警及防护手段
  • 7
    uboot命令分析+实现【转】
  • 8
    读书笔记--101个shell脚本 之#11--炫
  • 9
    SQL Server 深入解析索引存储(堆)
  • 10
    OAF_EO系列3 - Initialize详解和实现（案例）
  • 1
    【claude官网中文版】国内如何使用claude?记住这十大技巧！
    102
  • 2
    调用云端Qwen系列大模型（TURBO、PLUS、MAX和MAX_LATEST）在国际商业咨询智能体场景的实践探索
    55
  • 3
    已解决：国内如何使用Claude 3.5 Sonnet \ claude官网中文入口
    44
  • 4
    HarmonyOS 5.0 Next实战应用开发—‘我的家乡’【HarmonyOS Next华为公司完全自研的操作系统】
    64
  • 5
    自学记录鸿蒙API 13：实现多目标识别Object Detection
    159
  • 6
    《探索人工智能产业的可持续发展模式与策略》
    18
  • 7
    《人工智能助力社会学研究：数据挖掘与分析方法的深度探索》
    22
  • 8
    《软体机器人与仿生机器人的人工智能控制技术：挑战与突破》
    18
  • 9
    《探索机器人自主导航与路径规划技术的热点》
    21
  • 10
    《集成学习：堆叠泛化与提升法在人工智能中的应用热点》
    16

    • 相关电子书

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

    • 相关实验场景

    更多
  • 1分钟制作专属的RFID安全标签
    • 下一篇
    手把手教你白嫖阿里云服务器(免费领服务器)