HMI-34-【运动模式】实现运动模式的UI上电逻辑控制

简介: 今天这界面上没有实际的增加,仅仅是实把运动模式UI上电控制逻辑实现了一下,其实到这个模块的时候,就会发现之前在写舒适模式的时候的一些问题了,有好内容可以抽象出来了,不用每次都实现一遍了。不过现在还比较懒,还是先以实现为主,和面的内容放在优化里面。废话不多说,开始搞事情。不过为了吸你们开下去,现在把目前进度放在了。

HMI-34-【运动模式】实现运动模式的UI上电逻辑控制

​ 今天这界面上没有实际的增加,仅仅是实把运动模式UI上电控制逻辑实现了一下,其实到这个模块的时候,就会发现之前在写舒适模式的时候的一些问题了,有好内容可以抽象出来了,不用每次都实现一遍了。不过现在还比较懒,还是先以实现为主,和面的内容放在优化里面。废话不多说,开始搞事情。不过为了吸你们开下去,现在把目前进度放在了。

目前进度

​ 本期进度展示中有问题,能发现问题的小伙伴有奖。


[TOC]

关键字: HMIQTimer动画uiQt

搞一个自己定时器,不用QTimer

​ 至于为什么不用QTimer,之前的博客中有写,使用Qt时间久的人也知道为啥不用哈。这里就不展开说了,仅仅是简单的搞一个线程,开定时发个数就可以满足目前功能。代码如下:

/**
 * @brief The MoveFrom_Sport class
 * 这个类的作用就是用来代替QTimer,至于为什么,多用用就QTimer就知道为什么了
 */
class MoveFrom_Sport : public QThread
{
    Q_OBJECT
public:
    /**
     * @brief run
     * 线程RUN函数,所有的线程操作都应该放在这里
     */
    virtual void run();
public:
    bool flagRun = true;
signals:
    /**
     * @brief signalNumberChanged
     * @param number
     * 线程触发信号,其实就是定时器功能
     */
    void signalNumberChanged(int number);
private:
    int m_number = 0;
};
void MoveFrom_Sport::run()
{
    while (flagRun)
    {
        emit signalNumberChanged(m_number);
        m_number++;
        if(m_number>100)
        {
            flagRun = false;
            m_number = 0;
        }
        msleep(5);
    }
}

实现动画

​ 有了定时器了,那实现动画就很简单了,只是这个简单不简单,算错一点就废了,因为整个UI基本是按照像素来的,并不是自适应,所以对控件坐标及大小就要算明白了,直接看代码吧

void MD_Sport::slotShaoAll(int number)
{
    m_title->setGeometry(212,0.89*number-66,1456,66);
    if(m_title->y() >0)
    {
        m_title->show();
    }
    m_bottom->setGeometry(0,790-1.4*number,1920,70);
    if(m_bottom->y()<720)
    {
        m_bottom->show();
    }

    m_left->setGeometry(-491 +5.89*number,121,491,492);
    if(m_left->x()>-491)
    {
        m_left->show();
    }

    m_center->setGeometry((615+ (675/2.0 - 675.0/200.0*number)),(20+ (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(2380 - 10.34*number,137,460,516);
    if(m_right->x()< 1920)
    {
        m_right->show();
    }


    if(number == 100)
    {
        emit signalPowerUpfinished();
        m_lightControl->show();
    }
}

​ 这里中心仪表没有出现的位置了,只能由小变大,但是有部分指针虽然我设置栅格布局,但是在中心仪表中有mini仪表是通过代码生成,生成的时候并没有给布局,也没有在中心仪表中留位置,这里就多高两个函数,到了一定阶段看,在显示mini仪表。

void MDS_Center::powerUp()
{
    centerDisplay->hide();
    ui->label_pointer->hide();
    ui->label_drawOil->hide();
    ui->label_drawWater->hide();

}

void MDS_Center::powerUpFinished()
{
    centerDisplay->show();
    ui->label_pointer->show();
    ui->label_drawOil->show();
    ui->label_drawWater->show();
}

​ ok了,今天就到这里了,下面将实现运动模式下的自检功能。期待吧n_n


说明:

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

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

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

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

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


博客签名2021

相关文章
|
4月前
|
设计模式 编解码 API
Flutter UI设计模式与实现:深入探索与实践
【7月更文挑战第20天】Flutter以其独特的声明式UI模式和丰富的UI组件库,为移动应用开发提供了强大的支持。通过深入理解Flutter的UI设计模式和实现技巧,开发者可以构建出高性能、可维护性强的UI界面。同时,随着Flutter生态的不断完善和发展,相信未来Flutter将在移动应用开发领域发挥更加重要的作用。
|
Web App开发 测试技术
Chrome-headless 模式,没有UI界面的自动化UI测试
Chrome-headless 模式,没有UI界面的自动化UI测试
Chrome-headless 模式,没有UI界面的自动化UI测试
|
XML 前端开发 定位技术
Android MVVM框架使用(十三)UI更新 (App启动白屏优化、适配Android10.0深色模式)
Android MVVM框架使用(十三)UI更新 (App启动白屏优化、适配Android10.0深色模式)
407 0
Android MVVM框架使用(十三)UI更新 (App启动白屏优化、适配Android10.0深色模式)
|
存储 设计模式 测试技术
浅谈UI自动化必备的PO模式
PO模式的全名叫做page Object:页面-对象模式。简单的说就是:一个页面是一个类,元素在页面中,所以每个元素的定位信息是这个类中的一个变量;这个页面的常规业务操作是这个类中的一个个成员方法。PO模式是自动化测试框架中很重要的一种设计模式。
1322 1
浅谈UI自动化必备的PO模式
|
设计模式 JavaScript 前端开发
kendo-ui的MVVM模式
kendo-ui的MVVM模式
|
JavaScript 前端开发 开发者
kendo-ui的MVVM模式
摘要:   MVVM(Model View ViewModel)是一种帮助开发者将数据从模型分离的设计模式。MVVM的ViewModel负责将数据对象从模型中分离出来,通过这种方式数据就很容易控制数据如何显示在视图上。
879 0
|
设计模式 搜索推荐 数据安全/隐私保护
移动应用UI设计模式摘录汇总
版权声明:本文为半吊子子全栈工匠(wireless_com,同公众号)原创文章,未经允许不得转载。
850 0
|
4天前
|
搜索推荐 Android开发 开发者
探索安卓开发中的自定义视图:打造个性化UI组件
【10月更文挑战第39天】在安卓开发的世界中,自定义视图是实现独特界面设计的关键。本文将引导你理解自定义视图的概念、创建流程,以及如何通过它们增强应用的用户体验。我们将从基础出发,逐步深入,最终让你能够自信地设计和实现专属的UI组件。