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项目。
设计图的所有权和解释权都归吉利汽车所有。
本项目所有资源文件均有打不死的小海复刻制作。
本项目代码暂时不会开源,有需要的源码的可与我联系,左上角二维码加微信。
本项目仅限学习交流、禁止商业使用。