备案控制台
开发者社区 云计算 文章 正文

HMI-38-【节能模式】中心仪表mini仪表速度表实现

2023-11-10 21
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 今天我们来做中心仪表的mini仪表中的车速表，就是三个数字显示，数字素材因为我的艺术家给我设计的时候，偷懒了，没有用下图中的字体，还是沿用了运动和舒适模式中的字体，咱们就将就的用吧，没有办法呀，咱也不会搞美术呀。

HMI-38-【节能模式】中心仪表mini仪表速度表实现

​ 今天我们来做中心仪表的mini仪表中的车速表，就是三个数字显示，数字素材因为我的艺术家给我设计的时候，偷懒了，没有用下图中的字体，还是沿用了运动和舒适模式中的字体，咱们就将就的用吧，没有办法呀，咱也不会搞美术呀。

当前进度

​ 当前进度如下，今天在原来的基础上，实现了中心mini仪表的车速模拟，顺带手把限速表也做了，就是一个背景加上一个数字。

[TOC]

关键字： HIMI、QPainter、Qt、drawPixmap、eco

Mini仪表转速表实现

​ 转速表实现其实非常加单，完全可以借鉴舒适模式中的实现模式，这次我对数字素材做了加工，更加简单的，简单粗暴换图片即可，代码如下：

void MDE_CenterMini::setCarSpeed(int speed)
{
    int one = speed % 10;
    int ten = speed /10 % 10;;
    int hunderd = speed /100;

    if(speed <10)
    {
        ui->label_one->setGeometry(150,140,120,86);
        ui->label_one->show();
        ui->label_ten->hide();
        ui->label_hundred->hide();
        switch (one) {
        default:
        {
            ui->label_one->setStyleSheet("QLabel{border-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/0.png);}");
            break;
        }
        case 0:
        {
            ui->label_one->setStyleSheet("QLabel{border-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/0.png);}");
            break;
        }
        case 1:
        {
            ui->label_one->setStyleSheet("QLabel{border-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/1.png);}");
            break;
        }
        case 2:
        {
            ui->label_one->setStyleSheet("QLabel{border-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/2.png);}");
            break;
        }
        case 3:
        {
            ui->label_one->setStyleSheet("QLabel{border-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/3.png);}");
            break;
        }
        case 4:
        {
            ui->label_one->setStyleSheet("QLabel{border-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/4.png);}");
            break;
        }
        case 5:
        {
            ui->label_one->setStyleSheet("QLabel{border-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/5.png);}");
            break;
        }
        case 6:
        {
            ui->label_one->setStyleSheet("QLabel{border-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/6.png);}");
            break;
        }
        case 7:
        {
            ui->label_one->setStyleSheet("QLabel{border-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/7.png);}");
            break;
        }
        case 8:
        {
            ui->label_one->setStyleSheet("QLabel{border-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/8.png);}");
            break;
        }
        case 9:
        {
            ui->label_one->setStyleSheet("QLabel{border-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/9.png);}");
            break;
        }
        }
    }
    else if(speed >= 10 && speed < 100)
    {
        ui->label_one->setGeometry(200,140,120,86);
        ui->label_ten->setGeometry(100,140,120,86);
        ui->label_one->show();
        ui->label_ten->show();
        ui->label_hundred->hide();
        switch (one) {
        default:
        {
            ui->label_one->setStyleSheet("QLabel{border-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/0.png);}");
            break;
        }
        case 0:
        {
            ui->label_one->setStyleSheet("QLabel{border-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/0.png);}");
            break;
        }
        case 1:
        {
            ui->label_one->setStyleSheet("QLabel{border-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/1.png);}");
            break;
        }
        case 2:
        {
            ui->label_one->setStyleSheet("QLabel{border-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/2.png);}");
            break;
        }
        case 3:
        {
            ui->label_one->setStyleSheet("QLabel{border-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/3.png);}");
            break;
        }
        case 4:
        {
            ui->label_one->setStyleSheet("QLabel{border-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/4.png);}");
            break;
        }
        case 5:
        {
            ui->label_one->setStyleSheet("QLabel{border-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/5.png);}");
            break;
        }
        case 6:
        {
            ui->label_one->setStyleSheet("QLabel{border-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/6.png);}");
            break;
        }
        case 7:
        {
            ui->label_one->setStyleSheet("QLabel{border-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/7.png);}");
            break;
        }
        case 8:
        {
            ui->label_one->setStyleSheet("QLabel{border-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/8.png);}");
            break;
        }
        case 9:
        {
            ui->label_one->setStyleSheet("QLabel{border-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/9.png);}");
            break;
        }
        }
        switch (ten) {
        default:
        {
            ui->label_ten->setStyleSheet("QLabel{border-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/0.png);}");
            break;
        }
        case 0:
        {
            ui->label_ten->setStyleSheet("QLabel{border-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/0.png);}");
            break;
        }
        case 1:
        {
            ui->label_ten->setStyleSheet("QLabel{border-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/1.png);}");
            break;
        }
        case 2:
        {
            ui->label_ten->setStyleSheet("QLabel{border-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/2.png);}");
            break;
        }
        case 3:
        {
            ui->label_ten->setStyleSheet("QLabel{border-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/3.png);}");
            break;
        }
        case 4:
        {
            ui->label_ten->setStyleSheet("QLabel{border-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/4.png);}");
            break;
        }
        case 5:
        {
            ui->label_ten->setStyleSheet("QLabel{border-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/5.png);}");
            break;
        }
        case 6:
        {
            ui->label_ten->setStyleSheet("QLabel{border-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/6.png);}");
            break;
        }
        case 7:
        {
            ui->label_ten->setStyleSheet("QLabel{border-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/7.png);}");
            break;
        }
        case 8:
        {
            ui->label_ten->setStyleSheet("QLabel{border-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/8.png);}");
            break;
        }
        case 9:
        {
            ui->label_ten->setStyleSheet("QLabel{border-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/9.png);}");
            break;
        }
        }
    }
    else if(speed >= 100 && speed < 1000)
    {
        ui->label_one->setGeometry(250,140,120,86);
        ui->label_ten->setGeometry(150,140,120,86);
        ui->label_hundred->setGeometry(50,140,120,86);
        ui->label_one->show();
        ui->label_ten->show();
        ui->label_hundred->show();
        switch (one) {
        default:
        {
            ui->label_one->setStyleSheet("QLabel{border-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/0.png);}");
            break;
        }
        case 0:
        {
            ui->label_one->setStyleSheet("QLabel{border-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/0.png);}");
            break;
        }
        case 1:
        {
            ui->label_one->setStyleSheet("QLabel{border-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/1.png);}");
            break;
        }
        case 2:
        {
            ui->label_one->setStyleSheet("QLabel{border-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/2.png);}");
            break;
        }
        case 3:
        {
            ui->label_one->setStyleSheet("QLabel{border-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/3.png);}");
            break;
        }
        case 4:
        {
            ui->label_one->setStyleSheet("QLabel{border-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/4.png);}");
            break;
        }
        case 5:
        {
            ui->label_one->setStyleSheet("QLabel{border-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/5.png);}");
            break;
        }
        case 6:
        {
            ui->label_one->setStyleSheet("QLabel{border-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/6.png);}");
            break;
        }
        case 7:
        {
            ui->label_one->setStyleSheet("QLabel{border-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/7.png);}");
            break;
        }
        case 8:
        {
            ui->label_one->setStyleSheet("QLabel{border-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/8.png);}");
            break;
        }
        case 9:
        {
            ui->label_one->setStyleSheet("QLabel{border-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/9.png);}");
            break;
        }
        }
        switch (ten) {
        default:
        {
            ui->label_ten->setStyleSheet("QLabel{border-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/0.png);}");
            break;
        }
        case 0:
        {
            ui->label_ten->setStyleSheet("QLabel{border-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/0.png);}");
            break;
        }
        case 1:
        {
            ui->label_ten->setStyleSheet("QLabel{border-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/1.png);}");
            break;
        }
        case 2:
        {
            ui->label_ten->setStyleSheet("QLabel{border-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/2.png);}");
            break;
        }
        case 3:
        {
            ui->label_ten->setStyleSheet("QLabel{border-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/3.png);}");
            break;
        }
        case 4:
        {
            ui->label_ten->setStyleSheet("QLabel{border-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/4.png);}");
            break;
        }
        case 5:
        {
            ui->label_ten->setStyleSheet("QLabel{border-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/5.png);}");
            break;
        }
        case 6:
        {
            ui->label_ten->setStyleSheet("QLabel{border-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/6.png);}");
            break;
        }
        case 7:
        {
            ui->label_ten->setStyleSheet("QLabel{border-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/7.png);}");
            break;
        }
        case 8:
        {
            ui->label_ten->setStyleSheet("QLabel{border-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/8.png);}");
            break;
        }
        case 9:
        {
            ui->label_ten->setStyleSheet("QLabel{border-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/9.png);}");
            break;
        }
        }
        switch (hunderd) {
        default:
        {
            ui->label_hundred->setStyleSheet("QLabel{border-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/0.png);}");
            break;
        }
        case 0:
        {
            ui->label_hundred->setStyleSheet("QLabel{border-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/0.png);}");
            break;
        }
        case 1:
        {
            ui->label_hundred->setStyleSheet("QLabel{border-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/1.png);}");
            break;
        }
        case 2:
        {
            ui->label_hundred->setStyleSheet("QLabel{border-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/2.png);}");
            break;
        }
        case 3:
        {
            ui->label_hundred->setStyleSheet("QLabel{border-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/3.png);}");
            break;
        }
        case 4:
        {
            ui->label_hundred->setStyleSheet("QLabel{border-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/4.png);}");
            break;
        }
        case 5:
        {
            ui->label_hundred->setStyleSheet("QLabel{border-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/5.png);}");
            break;
        }
        case 6:
        {
            ui->label_hundred->setStyleSheet("QLabel{border-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/6.png);}");
            break;
        }
        case 7:
        {
            ui->label_hundred->setStyleSheet("QLabel{border-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/7.png);}");
            break;
        }
        case 8:
        {
            ui->label_hundred->setStyleSheet("QLabel{border-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/8.png);}");
            break;
        }
        case 9:
        {
            ui->label_hundred->setStyleSheet("QLabel{border-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/9.png);}");
            break;
        }
        }
    }
}

这个代码是又臭又长，不过到时好理解哈，下面我给他升级一下(也不难懂哈)：

void MDE_CenterMini::setCarSpeed(int speed)
{
    int one = speed % 10;
    int ten = speed /10 % 10;;
    int hunderd = speed /100;

    if(speed <10)
    {
        ui->label_one->setGeometry(150,140,120,86);
        ui->label_one->show();
        ui->label_ten->hide();
        ui->label_hundred->hide();
        ui->label_one->setStyleSheet(QString("QLabel{border-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/%1.png);}").arg(one));
    }
    else if(speed >= 10 && speed < 100)
    {
        ui->label_one->setGeometry(200,140,120,86);
        ui->label_ten->setGeometry(100,140,120,86);
        ui->label_one->show();
        ui->label_ten->show();
        ui->label_hundred->hide();
        ui->label_one->setStyleSheet(QString("QLabel{border-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/%1.png);}").arg(one));
        ui->label_ten->setStyleSheet(QString("QLabel{border-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/%1.png);}").arg(ten));

    }
    else if(speed >= 100 && speed < 1000)
    {
        ui->label_one->setGeometry(250,140,120,86);
        ui->label_ten->setGeometry(150,140,120,86);
        ui->label_hundred->setGeometry(50,140,120,86);
        ui->label_one->show();
        ui->label_ten->show();
        ui->label_hundred->show();
        ui->label_one->setStyleSheet(QString("QLabel{border-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/%1.png);}").arg(one));
        ui->label_ten->setStyleSheet(QString("QLabel{border-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/%1.png);}").arg(ten));
        ui->label_hundred->setStyleSheet(QString("QLabel{border-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/%1.png);}").arg(hunderd));
    }
}

限速表实现

​ 限速表实现就更简单了，就是两个label，一个用来做背景，一个用来做数字显示，直接上接口实现：

void MDE_Center::setSpeedLimit(int speed, bool visable)
{
    if(visable)
    {
        ui->label_speedlimit_number->show();
        ui->label_speedlimit_back->show();
        ui->label_speedlimit_number->setText(QString::number(speed,10));
    }
    else
    {
        ui->label_speedlimit_number->hide();
        ui->label_speedlimit_back->hide();
        ui->label_speedlimit_number->setText(QString::number(speed,10));
    }
}

说明：

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

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

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

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

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

博客签名2021

游客qytszqm66blbg
目录
相关文章
LabVIEW开发
|
3天前
|
存储 传感器 编解码
LabVIEW风力涡轮机的雷电流测量系统中集成高速摄像机
LabVIEW风力涡轮机的雷电流测量系统中集成高速摄像机
LabVIEW开发
10 1
LabVIEW开发
|
2天前
|
数据采集 存储 监控
LabVIEW多设备控制与数据采集系统
LabVIEW多设备控制与数据采集系统
LabVIEW开发
15 4
LabVIEW开发
|
2天前
|
传感器 存储 数据采集
LabVIEW MEMS电容式压力传感器测试系统
LabVIEW MEMS电容式压力传感器测试系统
LabVIEW开发
25 4
LabVIEW开发
|
3天前
|
传感器 编解码 运维
LabVIEW开发感应电机在线匝间短路故障诊断系统
LabVIEW开发感应电机在线匝间短路故障诊断系统
LabVIEW开发
11 1
LabVIEW开发
|
2天前
|
编解码 监控 定位技术
LabVIEW使用单板RIO开发远程监控电源信号
LabVIEW使用单板RIO开发远程监控电源信号
LabVIEW开发
13 3
LabVIEW开发
|
3天前
|
传感器 算法 流计算
LabVIEW液压支架控制系统的使用与各种配置的预测模型的比较分析
LabVIEW液压支架控制系统的使用与各种配置的预测模型的比较分析
LabVIEW开发
8 0
LabVIEW开发
|
4天前
|
数据采集 存储 传感器
LabVIEW开发监控聚变实验脉冲电源
LabVIEW开发监控聚变实验脉冲电源
LabVIEW开发
11 0
游客qytszqm66blbg
|
6月前
HMI-37-【节能模式】中心仪表实现
节能模式下，做难做的就是中心仪表了，其他两个都很简单了。那么今天就把这个给实现了。
游客qytszqm66blbg
32 0
HMI-37-【节能模式】中心仪表实现
游客qytszqm66blbg
|
6月前
HMI-39-【节能模式】实现中心仪表转速表自检及左右仪表布局
昨天我们把中心仪表的迷你仪表应写出来了，并且实现了速度表的显示，今天我们来搞一下这个中心仪表的自检，也就是转速表的自检。
游客qytszqm66blbg
33 0
HMI-39-【节能模式】实现中心仪表转速表自检及左右仪表布局
游客qytszqm66blbg
|
6月前
HMI-29-【运动模式】转速表实现及中心油耗仪表实现
今天我要搞得就是中心的这个表，指针的是转速表 中心显示的油耗表。
游客qytszqm66blbg
25 0
HMI-29-【运动模式】转速表实现及中心油耗仪表实现