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

Posted 2022-02-14 DreamLife.

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HMI-28-运动模式给速度表添加数字显示相关的知识，希望对你有一定的参考价值。

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("QLabelborder-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/8.png);");
        break;
    
    case 0:
    
        ui->label_number_3->setStyleSheet("QLabelborder-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/0.png);");
        break;
    
    case 1:
    
        ui->label_number_3->setStyleSheet("QLabelborder-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/1.png);");
        break;
    
    case 2:
    
        ui->label_number_3->setStyleSheet("QLabelborder-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/2.png);");
        break;
    
    case 3:
    
        ui->label_number_3->setStyleSheet("QLabelborder-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/3.png);");
        break;
    
    case 4:
    
        ui->label_number_3->setStyleSheet("QLabelborder-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/4.png);");
        break;
    
    case 5:
    
        ui->label_number_3->setStyleSheet("QLabelborder-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/5.png);");
        break;
    
    case 6:
    
        ui->label_number_3->setStyleSheet("QLabelborder-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/6.png);");
        break;
    
    case 7:
    
        ui->label_number_3->setStyleSheet("QLabelborder-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/7.png);");
        break;
    
    case 8:
    
        ui->label_number_3->setStyleSheet("QLabelborder-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/8.png);");
        break;
    
    case 9:
    
        ui->label_number_3->setStyleSheet("QLabelborder-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/9.png);");
        break;
    

    

    switch (ten) 
    default:
    
        ui->label_number_2->setStyleSheet("QLabelborder-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/8.png);");
        break;
    
    case 0:
    
        ui->label_number_2->setStyleSheet("QLabelborder-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/0.png);");
        break;
    
    case 1:
    
        ui->label_number_2->setStyleSheet("QLabelborder-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/1.png);");
        break;
    
    case 2:
    
        ui->label_number_2->setStyleSheet("QLabelborder-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/2.png);");
        break;
    
    case 3:
    
        ui->label_number_2->setStyleSheet("QLabelborder-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/3.png);");
        break;
    
    case 4:
    
        ui->label_number_2->setStyleSheet("QLabelborder-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/4.png);");
        break;
    
    case 5:
    
        ui->label_number_2->setStyleSheet("QLabelborder-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/5.png);");
        break;
    
    case 6:
    
        ui->label_number_2->setStyleSheet("QLabelborder-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/6.png);");
        break;
    
    case 7:
    
        ui->label_number_2->setStyleSheet("QLabelborder-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/7.png);");
        break;
    
    case 8:
    
        ui->label_number_2->setStyleSheet("QLabelborder-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/8.png);");
        break;
    
    case 9:
    
        ui->label_number_2->setStyleSheet("QLabelborder-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/9.png);");
        break;
    

    

    switch (hundred) 
    default:
    
        ui->label_number_1->setStyleSheet("QLabelborder-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/8.png);");
        break;
    
    case 0:
    
        ui->label_number_1->setStyleSheet("QLabelborder-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/0.png);");
        break;
    
    case 1:
    
        ui->label_number_1->setStyleSheet("QLabelborder-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/1.png);");
        break;
    
    case 2:
    
        ui->label_number_1->setStyleSheet("QLabelborder-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/2.png);");
        break;
    
    case 3:
    
        ui->label_number_1->setStyleSheet("QLabelborder-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/3.png);");
        break;
    
    case 4:
    
        ui->label_number_1->setStyleSheet("QLabelborder-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/4.png);");
        break;
    
    case 5:
    
        ui->label_number_1->setStyleSheet("QLabelborder-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/5.png);");
        break;
    
    case 6:
    
        ui->label_number_1->setStyleSheet("QLabelborder-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/6.png);");
        break;
    
    case 7:
    
        ui->label_number_1->setStyleSheet("QLabelborder-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/7.png);");
        break;
    
    case 8:
    
        ui->label_number_1->setStyleSheet("QLabelborder-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/8.png);");
        break;
    
    case 9:
    
        ui->label_number_1->setStyleSheet("QLabelborder-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("QLabelborder-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/0.png);");
        break;
    
    case 0:
    
        ui->label_number_3->setStyleSheet("QLabelborder-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/0.png);");
        break;
    
    case 1:
    
        ui->label_number_3->setStyleSheet("QLabelborder-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/1.png);");
        break;
    
    case 2:
    
        ui->label_number_3->setStyleSheet("QLabelborder-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/2.png);");
        break;
    
    case 3:
    
        ui->label_number_3->setStyleSheet("QLabelborder-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/3.png);");
        break;
    
    case 4:
    
        ui->label_number_3->setStyleSheet("QLabelborder-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/4.png);");
        break;
    
    case 5:
    
        ui->label_number_3->setStyleSheet("QLabelborder-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/5.png);");
        break;
    
    case 6:
    
        ui->label_number_3->setStyleSheet("QLabelborder-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/6.png);");
        break;
    
    case 7:
    
        ui->label_number_3->setStyleSheet("QLabelborder-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/7.png);");
        break;
    
    case 8:
    
        ui->label_number_3->setStyleSheet("QLabelborder-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/8.png);");
        break;
    
    case 9:
    
        ui->label_number_3->setStyleSheet("QLabelborder-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/9.png);");
        break;
    

    

    switch (ten) 
    default:
    
        ui->label_number_2->setStyleSheet("QLabelborder-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/0.png);");
        break;
    
    case 0:
    
        ui->label_number_2->setStyleSheet("QLabelborder-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/0.png);");
        break;
    
    case 1:
    
        ui->label_number_2->setStyleSheet("QLabelborder-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/1.png);");
        break;
    
    case 2:
    
        ui->label_number_2->setStyleSheet("QLabelborder-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/2.png);");
        break;
    
    case 3:
    
        ui->label_number_2->setStyleSheet("QLabelborder-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/3.png);");
        break;
    
    case 4:
    
        ui->label_number_2->setStyleSheet("QLabelborder-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/4.png);");
        break;
    
    case 5:
    
        ui->label_number_2->setStyleSheet("QLabelborder-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/5.png);");
        break;
    
    case 6:
    
        ui->label_number_2->setStyleSheet("QLabelborder-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/6.png);");
        break;
    
    case 7:
    
        ui->label_number_2->setStyleSheet("QLabelborder-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/7.png);");
        break;
    
    case 8:
    
        ui->label_number_2->setStyleSheet("QLabelborder-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/8.png);");
        break;
    
    case 9:
    
        ui->label_number_2->setStyleSheet("QLabelborder-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/9.png);");
        break;
    

    

    switch (hundred) 
    default:
    
        ui->label_number_1->setStyleSheet("QLabelborder-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/0.png);");
        break;
    
    case 0:
    
        ui->label_number_1->setStyleSheet("QLabelborder-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/0.png);");
        break;
    
    case 1:
    
        ui->label_number_1->setStyleSheet("QLabelborder-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/1.png);");
        break;
    
    case 2:
    
        ui->label_number_1->setStyleSheet("QLabelborder-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/2.png);");
        break;
    
    case 3:
    
        ui->label_number_1->setStyleSheet("QLabelborder-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/3.png);");
        break;
    
    case 4:
    
        ui->label_number_1->setStyleSheet("QLabelborder-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/4.png);");
        break;
    
    case 5:
    
        ui->label_number_1->setStyleSheet("QLabelborder-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/5.png);");
        break;
    
    case 6:
    
        ui->label_number_1->setStyleSheet("QLabelborder-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/6.png);");
        break;
    
    case 7:
    
        ui->label_number_1->setStyleSheet("QLabelborder-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/7.png);");
        break;
    
    case 8:
    
        ui->label_number_1->setStyleSheet("QLabelborder-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/8.png);");
        break;
    
    case 9:
    
        ui->label_number_1->setStyleSheet("QLabelborder-image:url(:/Sport/Resources/MeterDisplay/Sport/MDSL/number/9.png);");
        break;

整体进度

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

第一阶段成果展示

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

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

说明：

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

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

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

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

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

以上是关于HMI-28-运动模式给速度表添加数字显示的主要内容，如果未能解决你的问题，请参考以下文章

HMI-35-运动模式实现速度表和转速表自检

小型数字系统---运动码表设计

装饰模式

匀加速系统模式开发匀加速系统模式详解

进度条达到产品目标移动应用数据加载策略模式交互设计标准与信息表诉方式

AddForce();AddRelativeForce();FixedUpdate()