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

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

2023-11-10 114
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 今天我们来做中心仪表的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
目录
相关文章
花落已飘
|
Linux
QT桌面（实现界面的滑动切换）
QT桌面（实现界面的滑动切换）
花落已飘
509 1
泡沫o0
|
存储 开发框架 算法
【串口通信】使用C++和Qt设计和实现串口协议解析器（一）
【串口通信】使用C++和Qt设计和实现串口协议解析器
泡沫o0
3221 0
LuckiBit
|
9月前
|
存储 C语言
【C语言】static 关键字详解
`static` 关键字在C语言中用于控制变量和函数的作用域和生命周期。它可以用于局部变量、全局变量和函数，具有不同的效果。理解 `static` 关键字的用法有助于封装和管理代码，提高代码的可维护性和可靠性。
LuckiBit
609 3
DuckBro
|
索引
【Qt 学习笔记】Qt常用控件 | 多元素控件 | List Widget的说明及介绍
【Qt 学习笔记】Qt常用控件 | 多元素控件 | List Widget的说明及介绍
DuckBro
1114 3
游客j4mujezz7vm7y
|
12月前
|
NoSQL Go API
go语言操作Redis
go语言操作Redis
游客j4mujezz7vm7y
124 2
是谢添啊
|
算法 索引
二分查找算法&最靠左索引&最靠右索引详解与优化：图文全解+代码详注+思路分析（二）
二分查找算法&最靠左索引&最靠右索引详解与优化：图文全解+代码详注+思路分析
是谢添啊
209 0
泡沫o0
|
设计模式 开发框架 算法
【QML 创建界面】QML界面的动态创建及其其他方法 (Dynamic Creation of QML Interfaces and Other Methods)
【QML 创建界面】QML界面的动态创建及其其他方法 (Dynamic Creation of QML Interfaces and Other Methods)
泡沫o0
1531 0
小周sir
|
Serverless
函数计算FC怎么计费？
函数计算FC怎么计费？
小周sir
634 1
日星月云
|
算法
class081 状压dp-下【算法】
class081 状压dp-下【算法】
日星月云
97 2
游客qytszqm66blbg
HMI-29-【运动模式】转速表实现及中心油耗仪表实现
今天我要搞得就是中心的这个表，指针的是转速表 中心显示的油耗表。
游客qytszqm66blbg
150 0
HMI-29-【运动模式】转速表实现及中心油耗仪表实现

热门文章

最新文章

  • 1
    CentOs7 安装 Mysql5.7
  • 2
    B站被删除的视频，该如何找回来？
  • 3
    轻量应用服务器支持带宽套餐升级至流量包套餐流程说明
  • 4
    MySQL数据库备份和恢复操作的步骤和注意事项
  • 5
    PostgreSQL 并行计算解说 之18 - parallel merge join
  • 6
    QT的密码输入框以及国际化的一些问题
  • 7
    .NET开发之快捷键篇
  • 8
    css padding 填充
  • 9
    iOS - 3DTouch 3D 触摸
  • 10
    嵌入式 hi3518平台指定网卡测试是否通外网
  • 1
    《用AI重构工业设备故障预警系统：从“被动维修”到“主动预判”的协作实践》
    40
  • 2
    《从0到1搭建客户画像系统：AI工具矩阵如何解决开发困局》
    31
  • 3
    快应用报错Module Error 分包要求 app.json#minPlatformVersion 不小于 1061, 当前值为 21解决方案-优雅草卓伊凡
    27
  • 4
    快应用打包rpk同时生成了rpk和rpks是为什么？怎么用？-优雅草卓伊凡
    19
  • 5
    Parameter ‘**‘ not found. Available parameters are [0, 1, param1, param2]解决办法
    21
  • 6
    【多光谱滤波器阵列设计的最优球体填充】使用MSFA设计方法进行各种重建算法时，图像质量可以提高至多2 dB，并在光谱相似性方面实现了显著提升（Matlab代码实现）
    21
  • 7
    【高创新】基于优化的自适应差分导纳算法的改进最大功率点跟踪研究（Matlab代码实现）
    42
  • 8
    机器会“看病”？深度学习正在颠覆医学成像！
    30
  • 9
    金融系统宕机一分钟，损失就是百万？聊聊智能化运维该怎么玩！
    32
  • 10
    【概率Copula分类器】实现d维阿基米德Copula相关的函数、HACs相关的函数研究（Matlab代码实现）
    23

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    2025云栖大会，阿里云百炼邀请您的参与和见证