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

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

2023-11-10 171
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 今天我要做的功能时给速度表添加数字显示。就是下图中左侧的`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
目录
相关文章
实沈
|
存储 C++
基于C++的简易文件压缩与解压缩工具设计与实现
基于C++的简易文件压缩与解压缩工具设计与实现
实沈
555 3
泡沫o0
|
存储 JSON 数据库
【C++ 软件设计思路】跨平台应用开发：如何选择合适的格式保存信息
【C++ 软件设计思路】跨平台应用开发：如何选择合适的格式保存信息
泡沫o0
304 0
67vpym2vvkfhs
|
安全 Linux API
一篇文章讲明白Metasploit详解详细图文教程
一篇文章讲明白Metasploit详解详细图文教程
67vpym2vvkfhs
742 0
fruge365
|
JavaScript
【vue】vue 里面使用 v-html 插入的文本带有换行符‘\n‘不换行
【vue】vue 里面使用 v-html 插入的文本带有换行符‘\n‘不换行
fruge365
1097 1
wljslmz
|
安全 网络安全 数据安全/隐私保护
深入理解WPA2的加密机制及其在无线网络安全中的作用
【8月更文挑战第24天】
wljslmz
1702 0
泡沫o0
|
消息中间件 存储 监控
【ZeroMQ的SUB视角】深入探讨订阅者模式、C++编程实践与底层机制
【ZeroMQ的SUB视角】深入探讨订阅者模式、C++编程实践与底层机制
泡沫o0
1391 1
DarrenPig
|
编解码 开发工具 vr&ar
RT-Thread 瑞萨 智能家居网络开发：RA6M3 HMI Board 以太网+GUI技术实践
RT-Thread 瑞萨 智能家居网络开发：RA6M3 HMI Board 以太网+GUI技术实践
DarrenPig
406 4
ModelScope运营小助手
|
并行计算 Linux iOS开发
llamafile：单个文件分发和运行LLM
为了方便更多的零基础的初学者体验大语言模型，llamafile 提出了单文件运行大模型的方案。
ModelScope运营小助手
1486 4
泡沫o0
|
前端开发 数据可视化 JavaScript
【五一创作】QML、Qt Quick /Qt中绘制圆形
【五一创作】QML、Qt Quick /Qt中绘制圆形
泡沫o0
1110 0
泡沫o0
|
消息中间件 Unix Linux
【ZMQ polling机制】ZMQ异步接收机制以及与epoll/select的对比分析
【ZMQ polling机制】ZMQ异步接收机制以及与epoll/select的对比分析
泡沫o0
892 0

热门文章

最新文章

  • 1
    CentOs7 安装 Mysql5.7
  • 2
    B站被删除的视频，该如何找回来？
  • 3
    轻量应用服务器支持带宽套餐升级至流量包套餐流程说明
  • 4
    MySQL数据库备份和恢复操作的步骤和注意事项
  • 5
    PostgreSQL 并行计算解说 之18 - parallel merge join
  • 6
    QT的密码输入框以及国际化的一些问题
  • 7
    .NET开发之快捷键篇
  • 8
    css padding 填充
  • 9
    iOS - 3DTouch 3D 触摸
  • 10
    嵌入式 hi3518平台指定网卡测试是否通外网
  • 1
    《用AI重构工业设备故障预警系统：从“被动维修”到“主动预判”的协作实践》
    40
  • 2
    《从0到1搭建客户画像系统：AI工具矩阵如何解决开发困局》
    31
  • 3
    快应用报错Module Error 分包要求 app.json#minPlatformVersion 不小于 1061, 当前值为 21解决方案-优雅草卓伊凡
    27
  • 4
    快应用打包rpk同时生成了rpk和rpks是为什么？怎么用？-优雅草卓伊凡
    19
  • 5
    Parameter ‘**‘ not found. Available parameters are [0, 1, param1, param2]解决办法
    21
  • 6
    【多光谱滤波器阵列设计的最优球体填充】使用MSFA设计方法进行各种重建算法时，图像质量可以提高至多2 dB，并在光谱相似性方面实现了显著提升（Matlab代码实现）
    21
  • 7
    【高创新】基于优化的自适应差分导纳算法的改进最大功率点跟踪研究（Matlab代码实现）
    42
  • 8
    机器会“看病”？深度学习正在颠覆医学成像！
    30
  • 9
    金融系统宕机一分钟，损失就是百万？聊聊智能化运维该怎么玩！
    32
  • 10
    【概率Copula分类器】实现d维阿基米德Copula相关的函数、HACs相关的函数研究（Matlab代码实现）
    23

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    2025云栖大会，阿里云百炼邀请您的参与和见证