资讯详情

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

头图

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

当我今天要做的功能时，给速度表添加数字显示器。下图左侧888

文章目录

  • HMI-28-运动模式向速度表添加数字显示
    • 实现数字布局
    • 代码实现
    • 代码改进，隐藏实现
    • 整体进度
    • 展示第一阶段成果

QPainter、number、Opacity、StyleSheet、Qt

实现数字布局

首先，我们需要准备我们的材料PS导出数字资源，稍作处理。

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

代码实现

代码实现非常简单，即根据当前的进出速度，分析100对饮料的数字，改变数字资源，代码如下：实际上应该标准化，包装函数中的实现函数。

void MDS_LeftMiniDisplay::setCarSpeed(int speed) {     int one,ten,hundred;     one = speed;     ten = (speed0)/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(:/port/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;
    }

    }
}

整体进度

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

第一阶段成果展示

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

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

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

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

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

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

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

标签： 50固态继电器mds75eb

锐单商城拥有海量元器件数据手册、 IC替代型号，打造 电子元器件IC百科大全！

锐单商城 - 一站式电子元器件采购平台