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

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

2023-11-10 50
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 今天我们来做中心仪表的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
目录
相关文章
游客dng4gjyb342he
|
3天前
电路板设计中射频反馈线的优化
最近,我们的信号完整性小组 要求重新设计现有的5千兆赫接地共面波导射频反馈线,以提高客户板上Wi-Fi子系统的性能。测量结果表明,给水线阻抗的阻抗约为38欧姆。
游客dng4gjyb342he
17 3
LabVIEW开发
|
6月前
|
存储 传感器 编解码
LabVIEW风力涡轮机的雷电流测量系统中集成高速摄像机
LabVIEW风力涡轮机的雷电流测量系统中集成高速摄像机
LabVIEW开发
44 1
游客qytszqm66blbg
HMI-37-【节能模式】中心仪表实现
节能模式下，做难做的就是中心仪表了，其他两个都很简单了。那么今天就把这个给实现了。
游客qytszqm66blbg
50 0
HMI-37-【节能模式】中心仪表实现
游客qytszqm66blbg
HMI-39-【节能模式】实现中心仪表转速表自检及左右仪表布局
昨天我们把中心仪表的迷你仪表应写出来了，并且实现了速度表的显示，今天我们来搞一下这个中心仪表的自检，也就是转速表的自检。
游客qytszqm66blbg
62 0
HMI-39-【节能模式】实现中心仪表转速表自检及左右仪表布局
游客qytszqm66blbg
HMI-29-【运动模式】转速表实现及中心油耗仪表实现
今天我要搞得就是中心的这个表，指针的是转速表 中心显示的油耗表。
游客qytszqm66blbg
58 0
HMI-29-【运动模式】转速表实现及中心油耗仪表实现
游客qytszqm66blbg
HMI-35-【运动模式】实现速度表和转速表自检
今天咱们给速度表和转速表增加一个自检功能， 就是从小走大最大再回到最小。用到的和上篇一样，也是有一个自己写的定时器。
游客qytszqm66blbg
63 0
河北稳控科技
便携式钻孔测斜仪测区如何设置
完成当前测区的添加(新建) 、删除操作。WIN5/612 便携式钻孔测斜仪的数据以区域进行划分，一个区域代表一个地理区域,亦或是一个工程、一个工地。设备默认保存最近一次测量时使用测区名称，对同一测区进行测量时无需再次选择设置。若需更换当前测区名称，请按照以下步骤操作。
河北稳控科技
72 0
便携式钻孔测斜仪测区如何设置
河北稳控科技
|
数据管理 数据库
便携式钻孔测斜仪软件运行状态
设备启动后，自动进入测斜仪程序主界面（若设置了程序自动启动），主界面见图 5.1。若未设置程序自动启动，则可通过双击系统桌面上的测量【APP】程序快捷方式，进入软件。
河北稳控科技
91 0
便携式钻孔测斜仪软件运行状态
河北稳控科技
|
传感器 存储
手持VH501TC多功能混合传感器信号采集读数仪使用方法
电池仓位于设备背面下半部分， 仅当使用 5 号电池供电时需要操作电池仓，锂电池供电的设备无需操作电池仓。默认情况下，电池仓盖处于锁定状态无法直接打开，在需要安装或者更换电池时，应将水平拨动开关推至解锁侧，在电池安装完成后必须将开关推至锁定侧。注意：在安装电池时必须按照仓内+/-符号对应电池的正/负极，错误的安装极性会永久性损坏设备。
河北稳控科技
103 0
手持VH501TC多功能混合传感器信号采集读数仪使用方法
河北稳控科技
|
传感器 存储 物联网
多功能手持读数仪振弦混合信号采集仪的版本区别
VH501TC手持采集读数仪，设备是专用的多类型传感器手持式读数仪，主测传感类型为单弦式振弦传感器，辅测传感类型为电压、电流传感。采用 32 位 ARM 处理器和大尺寸全彩屏、阵列按键设计，彩屏，不受阳光影响，清楚明了。操作界面简单友好，各项数据全屏显示，如振弦频率，频模，温度，采集质量，时间显示，电压电流，激励电压，激励方法，温度传感器及剩余电量。指示灯显示说明运行情况，DB9和通讯航空接口连接稳固，后盖更换电池方便。按键回弹手感好，整机好握持，单手操作，操作舒适，在完成快速测读的同时还具备很好的操控体验。外壳坚固耐用，方便携带能在不同工况场景下使用。
河北稳控科技
93 0
多功能手持读数仪振弦混合信号采集仪的版本区别

热门文章

最新文章

  • 1
    Flutter之禅 内存优化篇
  • 2
    《Cadence 16.6电路设计与仿真从入门到精通》——2.4 Design Entry CIS原理图图形界面　
  • 3
    记一次对网络抖动经典案例的分析
  • 4
    国外成人网站xHamster大量用户信息黑市变卖，部分账号涉及英美政府官员
  • 5
    用户密码以BCrypt加密的方式来防范被破解
  • 6
    带你理清CPU，cache和存储器之间的逻辑运作
  • 7
    Git设置代理服务器
  • 8
    【DSW Gallery】PAI-DSW开通及授权
  • 9
    吐血整理：机器学习的30个基本概念，都在这里了（手绘图解）
  • 10
    MOSS站点的迁移(备份还原)
  • 1
    设计模式之 5 大创建型模式，万字长文深剖 ，近 30 张图解！
    47
  • 2
    《C++新特性：为多线程数据竞争检测与预防保驾护航》
    41
  • 3
    Kotlin - 区间与数组
    41
  • 4
    Kotlin - 参数与异常
    39
  • 5
    Kotlin - 运算符与中缀表达式
    34
  • 6
    Kotlin - 函数与Lambda表达式
    23
  • 7
    Kotlin - 分支与循环
    19
  • 8
    天气预报1天-中国气象局-地址查询版免费API接口教程
    20
  • 9
    《C++智能合约与区块链底层交互全解析：构建坚实的去中心化应用桥梁》
    19

    • 相关电子书

    更多
  • 低成本自动三维室内重建系统
  • 惠充电——共享充电+共享电能
  • 短距离无线系统与航空无 线电系统攻击

    • 相关实验场景

    更多
  • 基于函数计算一键部署掌上游戏机
  • Gazebo环境下基于ROS的阿克曼小车键盘控制
  • 物联网设备安全：实时检测7类安全风险（Agentless）
  • 新能源电动车监控数据上报
    • 下一篇
    阿里云OSS设置跨域访问