HMI-43-【节能模式】顶部标题栏和底部信息栏及灯光及启动动画

简介: 今天来实现以下节能模式的Title底部信息栏,灯光系统,以及启动动画。

HMI-43-【节能模式】顶部标题栏和底部信息栏及灯光及启动动画

​ 今天来实现以下节能模式的Title底部信息栏,灯光系统,以及启动动画。

当前进度

​ 到今天位置,三个模式基本有了雏形,总算有个交代了,哎呀呀,感谢众多网友的支持,才得以坚持到这里。


[TOC]

关键字: HIMIQPainterQtlighteco

顶部信息栏

​ 顶部信息栏基本和前面两个模式没有太多的区别。直接贴部分代码

void MDE_Title::setTime(QString time)
{
    ui->label_time->setText(time);
}

void MDE_Title::setDirection(int direction)
{
    m_Direction = direction;
    switch (direction) {
    case DIRECTION_N:
        ui->label_direction_text->setText("N");
        break;
    case DIRECTION_NE:
        ui->label_direction_text->setText("NE");
        break;
    case DIRECTION_E:
        ui->label_direction_text->setText("E");
        break;
    case DIRECTION_SE:
        ui->label_direction_text->setText("SE");
        break;
    case DIRECTION_S:
        ui->label_direction_text->setText("S");
        break;
    case DIRECTION_SW:
        ui->label_direction_text->setText("SW");
        break;
    case DIRECTION_W:
        ui->label_direction_text->setText("W");
        break;
    case DIRECTION_NW:
        ui->label_direction_text->setText("NW");
        break;
    }
}

void MDE_Title::setTemperature(QString temperature)
{
    ui->label_temperature->setText(temperature);
}

bool MDE_Title::eventFilter(QObject *watched, QEvent *event)
{
    if(watched == ui->label_direction && event->type() == QEvent::Paint)
        drawDirection(m_Direction);
    return QWidget::eventFilter(watched,event);
}

void MDE_Title::drawDirection(int direction)
{
    QPainter painter(ui->label_direction);
    painter.setRenderHint((QPainter::SmoothPixmapTransform));
    painter.setRenderHint(QPainter::HighQualityAntialiasing);
    painter.translate(20,20);
    painter.save();
    painter.rotate(direction*45+90);
    painter.drawPixmap(-16,-10,32,20,QPixmap(":/Economic/Resources/MeterDisplay/Economic/MDET/Direction/7.png"));
    painter.restore();
}

底部信息栏

​ 这个和运动不是一模一样。没有代码。

灯光

​ 三个模式用的是一个灯光控制,除了位置有点区别外,其他没有区别。

启动动画

启动动画还是前面的,直接搬过来用就可以。

void MD_Economic::slotShaoAll(int number)
{
    m_title->setGeometry(0,-110+1.1*number,1920,110);
    if(m_title->y() >-110)
    {
        m_title->show();
    }

    m_bottom->setGeometry(0,790-1.4*number,1920,70);
    if(m_bottom->y()<720)
    {
        m_bottom->show();
    }

    m_left->setGeometry(-500 +6.2*number,130,500,460);
    if(m_left->x()>-500)
    {
        m_left->show();
    }
    m_center->setGeometry((622+ (675/2.0 - 675.0/200.0*number)),(27+ (674/2 - 674/200.0*number)),6.75*number,6.74*number);
    if(m_center->width()>10)
    {
        m_center->show();
        if(m_center->width() == 675)
        {
//            m_center->powerUpFinished();
        }
    }
    m_right->setGeometry(2420 - 11.2*number,130,500,460);
    if(m_right->x()< 1920)
    {
        m_right->show();
    }
    if(number == 100)
    {
        emit signalPowerUpfinished();
        m_lightControl->show();
    }

}

藏在缝隙里面的话

​ 能写到这里,真的要感谢众多的网友的支持,多亏了大家前期的支持及鼓励。才能有今天写完的这一刻。和面准写多媒体模块了,UI已经找美术在做了。就是照搬吉利博瑞 2017块的多媒体。期待吧。


说明:

本项目中所使借鉴原型来自:[吉利] 博瑞GE | 仪表HMI设计吉利汽车HMI项目

设计图的所有权和解释权都归吉利汽车所有。

本项目所有资源文件均由打不死的小海复刻制作。

本项目代码暂时不会开源,有需要的源码的可与我联系,左上角二维码加微信。

本项目仅限学习交流、禁止商业使用。


博客签名2021

相关文章
|
1月前
ThreeJs的场景实现鼠标拖动旋转控制
这篇文章介绍了如何在Three.js中实现通过鼠标拖动来旋转场景中的模型,并提供了实现这一功能的代码示例。
76 0
HMI-32-【运动模式】增加灯光面板和底本信息栏
上一篇中,我们把音乐模块的图片显示功能实现了,今天来给我们的运动模式收个小尾巴,把灯光控制面本和底部信息栏也显示出来,其实这个两个如果偷懒的换,可以把舒适模式的挪过来,但是考虑到布局,还是重新实现以下吧,方式和舒适模式基本一致,都是建立模块。这里不会太详细展开。
HMI-32-【运动模式】增加灯光面板和底本信息栏
|
图形学
|
开发框架 iOS开发
手机软键盘弹起导致页面变形的一种解决方案
手机软键盘弹起导致页面变形的一种解决方案
453 0
|
存储 C++ Python
C++复刻:[流光按钮]+[悬浮波纹按钮]
[流光按钮]+[悬浮波纹按钮]
168 0
|
Android开发
4.2 锁屏小部件亮屏时不显示边框
4.2 锁屏小部件亮屏时不显示边框
114 0
4.2 锁屏小部件亮屏时不显示边框
|
Java
swing中一些常见的鼠标事件(鼠标形状的改变、鼠标接近、按下(图标的切换)、鼠标接近、离开(字体颜色的改变)、鼠标拖拽等)还有系统托盘+对话框
swing中一些常见的鼠标事件(鼠标形状的改变、鼠标接近、按下(图标的切换)、鼠标接近、离开(字体颜色的改变)、鼠标拖拽等)还有系统托盘+对话框
482 0
swing中一些常见的鼠标事件(鼠标形状的改变、鼠标接近、按下(图标的切换)、鼠标接近、离开(字体颜色的改变)、鼠标拖拽等)还有系统托盘+对话框
|
C++
Qt Qwdget 汽车仪表知识点拆解5 标题栏图标闪烁
先贴上效果图,注意,没有写逻辑,都是乱动的
144 0
Qt Qwdget 汽车仪表知识点拆解5 标题栏图标闪烁