HMI-38-节能模式中心仪表mini仪表速度表实现
Posted DreamLife.
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HMI-38-节能模式中心仪表mini仪表速度表实现相关的知识，希望对你有一定的参考价值。
HMI-38-【节能模式】中心仪表mini仪表速度表实现
今天我们来做中心仪表的mini仪表中的车速表，就是三个数字显示，数字素材因为我的艺术家给我设计的时候，偷懒了，没有用下图中的字体，还是沿用了运动和舒适模式中的字体，咱们就将就的用吧，没有办法呀，咱也不会搞美术呀。
当前进度
当前进度如下，今天在原来的基础上，实现了中心mini仪表的车速模拟，顺带手把限速表也做了，就是一个背景加上一个数字。
文章目录
关键字：
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("QLabelborder-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/0.png);");
break;
case 0:
ui->label_one->setStyleSheet("QLabelborder-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/0.png);");
break;
case 1:
ui->label_one->setStyleSheet("QLabelborder-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/1.png);");
break;
case 2:
ui->label_one->setStyleSheet("QLabelborder-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/2.png);");
break;
case 3:
ui->label_one->setStyleSheet("QLabelborder-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/3.png);");
break;
case 4:
ui->label_one->setStyleSheet("QLabelborder-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/4.png);");
break;
case 5:
ui->label_one->setStyleSheet("QLabelborder-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/5.png);");
break;
case 6:
ui->label_one->setStyleSheet("QLabelborder-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/6.png);");
break;
case 7:
ui->label_one->setStyleSheet("QLabelborder-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/7.png);");
break;
case 8:
ui->label_one->setStyleSheet("QLabelborder-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/8.png);");
break;
case 9:
ui->label_one->setStyleSheet("QLabelborder-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("QLabelborder-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/0.png);");
break;
case 0:
ui->label_one->setStyleSheet("QLabelborder-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/0.png);");
break;
case 1:
ui->label_one->setStyleSheet("QLabelborder-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/1.png);");
break;
case 2:
ui->label_one->setStyleSheet("QLabelborder-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/2.png);");
break;
case 3:
ui->label_one->setStyleSheet("QLabelborder-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/3.png);");
break;
case 4:
ui->label_one->setStyleSheet("QLabelborder-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/4.png);");
break;
case 5:
ui->label_one->setStyleSheet("QLabelborder-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/5.png);");
break;
case 6:
ui->label_one->setStyleSheet("QLabelborder-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/6.png);");
break;
case 7:
ui->label_one->setStyleSheet("QLabelborder-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/7.png);");
break;
case 8:
ui->label_one->setStyleSheet("QLabelborder-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/8.png);");
break;
case 9:
ui->label_one->setStyleSheet("QLabelborder-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/9.png);");
break;
switch (ten)
default:
ui->label_ten->setStyleSheet("QLabelborder-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/0.png);");
break;
case 0:
ui->label_ten->setStyleSheet("QLabelborder-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/0.png);");
break;
case 1:
ui->label_ten->setStyleSheet("QLabelborder-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/1.png);");
break;
case 2:
ui->label_ten->setStyleSheet("QLabelborder-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/2.png);");
break;
case 3:
ui->label_ten->setStyleSheet("QLabelborder-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/3.png);");
break;
case 4:
ui->label_ten->setStyleSheet("QLabelborder-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/4.png);");
break;
case 5:
ui->label_ten->setStyleSheet("QLabelborder-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/5.png);");
break;
case 6:
ui->label_ten->setStyleSheet("QLabelborder-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/6.png);");
break;
case 7:
ui->label_ten->setStyleSheet("QLabelborder-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/7.png);");
break;
case 8:
ui->label_ten->setStyleSheet("QLabelborder-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/8.png);");
break;
case 9:
ui->label_ten->setStyleSheet("QLabelborder-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("QLabelborder-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/0.png);");
break;
case 0:
ui->label_one->setStyleSheet("QLabelborder-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/0.png);");
break;
case 1:
ui->label_one->setStyleSheet("QLabelborder-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/1.png);");
break;
case 2:
ui->label_one->setStyleSheet("QLabelborder-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/2.png);");
break;
case 3:
ui->label_one->setStyleSheet("QLabelborder-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/3.png);");
break;
case 4:
ui->label_one->setStyleSheet("QLabelborder-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/4.png);");
break;
case 5:
ui->label_one->setStyleSheet("QLabelborder-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/5.png);");
break;
case 6:
ui->label_one->setStyleSheet("QLabelborder-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/6.png);");
break;
case 7:
ui->label_one->setStyleSheet("QLabelborder-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/7.png);");
break;
case 8:
ui->label_one->setStyleSheet("QLabelborder-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/8.png);");
break;
case 9:
ui->label_one->setStyleSheet("QLabelborder-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/9.png);");
break;
switch (ten)
default:
ui->label_ten->setStyleSheet("QLabelborder-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/0.png);");
break;
case 0:
ui->label_ten->setStyleSheet("QLabelborder-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/0.png);");
break;
case 1:
ui->label_ten->setStyleSheet("QLabelborder-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/1.png);");
break;
case 2:
ui->label_ten->setStyleSheet("QLabelborder-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/2.png);");
break;
case 3:
ui->label_ten->setStyleSheet("QLabelborder-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/3.png);");
break;
case 4:
ui->label_ten->setStyleSheet("QLabelborder-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/4.png);");
break;
case 5:
ui->label_ten->setStyleSheet("QLabelborder-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/5.png);");
break;
case 6:
ui->label_ten->setStyleSheet("QLabelborder-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/6.png);");
break;
case 7:
ui->label_ten->setStyleSheet("QLabelborder-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/7.png);");
break;
case 8:
ui->label_ten->setStyleSheet("QLabelborder-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/8.png);");
break;
case 9:
ui->label_ten->setStyleSheet("QLabelborder-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/9.png);");
break;
switch (hunderd)
default:
ui->label_hundred->setStyleSheet("QLabelborder-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/0.png);");
break;
case 0:
ui->label_hundred->setStyleSheet("QLabelborder-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/0.png);");
break;
case 1:
ui->label_hundred->setStyleSheet("QLabelborder-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/1.png);");
break;
case 2:
ui->label_hundred->setStyleSheet("QLabelborder-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/2.png);");
break;
case 3:
ui->label_hundred->setStyleSheet("QLabelborder-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/3.png);");
break;
case 4:
ui->label_hundred->setStyleSheet("QLabelborder-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/4.png);");
break;
case 5:
ui->label_hundred->setStyleSheet("QLabelborder-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/5.png);");
break;
case 6:
ui->label_hundred->setStyleSheet("QLabelborder-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/6.png);");
break;
case 7:
ui->label_hundred->setStyleSheet("QLabelborder-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/7.png);");
break;
case 8:
ui->label_hundred->setStyleSheet("QLabelborder-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/8.png);");
break;
case 9:
ui->label_hundred->setStyleSheet("QLabelborder-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("QLabelborder-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("QLabelborder-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/%1.png);").arg(one));
ui->label_ten->setStyleSheet(QString("QLabelborder-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("QLabelborder-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/%1.png);").arg(one));
ui->label_ten->setStyleSheet(QString("QLabelborder-image:url(:/Economic/Resources/MeterDisplay/Economic/Number/%1.png);").arg(ten));
ui->label_hundred->setStyleSheet(QString("QLabelborder-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));
第二阶段成果展示
目前以完成HUD界面及接口开发，液晶仪表舒适模式和运动模式的开发。展示如下：
基于Qt的汽车仪表模拟 2.0
第一阶段成果展示
目前以完成HUD界面及接口开发，液晶仪表舒适模式开发。展示如下：
基于Qt的汽车仪表模拟 1.0)
说明：
本项目中所使借鉴原型来自：[吉利] 博瑞GE | 仪表HMI设计、吉利汽车HMI项目。
设计图的所有权和解释权都归吉利汽车所有。
本项目所有资源文件均有**打不死的小海**复刻制作。
本项目代码暂时不会开源，有需要的源码的可与我联系，左上角二维码加微信。
本项目仅限学习交流、禁止商业使用。
以上是关于HMI-38-节能模式中心仪表mini仪表速度表实现的主要内容，如果未能解决你的问题，请参考以下文章