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

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

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

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

当前进度

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


[TOC]

关键字: HIMIQPainterQtdrawPixmapeco

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

相关文章
|
4月前
|
传感器 运维 安全
LabVIEW电动汽车核心部件检测系统
LabVIEW电动汽车核心部件检测系统
44 1
|
安全 芯片
基于STM32的铁路自动围栏系统设计
当系统监测到有列车即将通过铁路交叉口时,公路信号灯会立刻变为红灯,蜂鸣器也会发出警报声音,以提醒行人和车辆注意安全。同时,铁路两侧的围栏也会自动关闭,在列车通过后再次打开。这样,就能有效地防止公路车辆和行人误闯铁路区域,保障了路人的安全。
106 0
|
12月前
HMI-37-【节能模式】中心仪表实现
节能模式下,做难做的就是中心仪表了,其他两个都很简单了。那么今天就把这个给实现了。
HMI-37-【节能模式】中心仪表实现
|
12月前
HMI-39-【节能模式】实现中心仪表转速表自检及左右仪表布局
昨天我们把中心仪表的迷你仪表应写出来了,并且实现了速度表的显示,今天我们来搞一下这个中心仪表的自检,也就是转速表的自检。
HMI-39-【节能模式】实现中心仪表转速表自检及左右仪表布局
|
12月前
HMI-29-【运动模式】转速表实现及中心油耗仪表实现
今天我要搞得就是中心的这个表,指针的是转速表 中心显示的油耗表。
HMI-29-【运动模式】转速表实现及中心油耗仪表实现
|
12月前
HMI-42-【节能模式】实现油量表和水温表
今天我来搞一下水温表和油量表。其实就是两个进度条。搞一下。
HMI-42-【节能模式】实现油量表和水温表
|
12月前
HMI-30-【运动模式】仪表右侧模块开始编写
今天喝了点小茶水,来了点写代码的感觉,那么今天就尝试吧运动模式仪表右侧的模块写了,我的资源文件中,只有音乐,所以右侧模块还是先把框架搭好,仅实现音乐模块。
HMI-30-【运动模式】仪表右侧模块开始编写
|
12月前
HMI-35-【运动模式】实现速度表和转速表自检
今天咱们给速度表和转速表增加一个自检功能, 就是从小走大最大再回到最小。用到的和上篇一样,也是有一个自己写的定时器。
|
12月前
HMI-34-【运动模式】实现运动模式的UI上电逻辑控制
今天这界面上没有实际的增加,仅仅是实把运动模式UI上电控制逻辑实现了一下,其实到这个模块的时候,就会发现之前在写舒适模式的时候的一些问题了,有好内容可以抽象出来了,不用每次都实现一遍了。不过现在还比较懒,还是先以实现为主,和面的内容放在优化里面。废话不多说,开始搞事情。不过为了吸你们开下去,现在把目前进度放在了。
|
数据管理 数据库
便携式钻孔测斜仪软件运行状态
设备启动后,自动进入测斜仪程序主界面(若设置了程序自动启动),主界面见图 5.1。若未设置程序自动启动,则可通过双击系统桌面上的测量【APP】程序快捷方式,进入软件。
便携式钻孔测斜仪软件运行状态