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

HMI-60-【多媒体】空调部分 1

2023-11-10 91
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 今天我们搞空调的按钮，今天这里我们不会堆砌大量的素材，而是用一个自定义的Button来实现这些，可以看到我们这次的空调按钮有以下元素

头图

前言

如果这个系列Qt 汽车 HMI 仪表文章你都看过，或者大部分看过，知道整个项目的一个大致，那么可以接着看下去，如果是第一次就直接看到了这篇文章，那么多半应该是云里雾里的，因为写到现在，基本就是开发流水账了。除了个别知识点获取有参考价值，其他的应该没有太多的价值。

如果对这个项目感兴趣，那么有两个办法

1 联系作者(也就是我)，获取源码

2 把Qt 汽车 HMI 仪表从头看看，至少知道我想要做什么，才能知道我现在在做什么。

HMI-60-【多媒体】空调部分 1

​ 今天我们搞空调的按钮，今天这里我们不会堆砌大量的素材，而是用一个自定义的Button来实现这些，可以看到我们这次的空调按钮有以下元素

1 文字

2 选中/非选中

3 开关表示（橘色和灰色矩形）

4 图标

☑当前进度

​ 今天主要就是使用自定按钮，把空调界面的子功能开关实现了，这个如果要是堆图片资源，估计我的艺术家会打死我的，再说我的脑子估计也得坏掉，因为我资源的命名是没有规则的，这就会把我坑死，加上这次按钮还是基本一致的，可以有一定的规律可循。

[toc]

关键字： HMI、Multifunction、Qt、QMediaPlayer、收音机

1 自定义按钮

​ 自定义按钮需要实现的功能

1 文字

2 选中/非选中

3 开关表示（橘色和灰色矩形）

4 图标

​ 这里我们新建一个界面设计师类命名为MFD_AirConditioner_PushButon，在界面上按照上面列出的要素布局实现，如下图所示

image-20220502214127121

​ 应该是很好理解的吧，

​ 这里使用了一个水平布局，用来显示一个ICON图标和文字，文字可以分为普通文本文字和图片文字。图标就是一个普通的ICON图标。在文字的下方，放置了一个label开表示当前功能的开关。

​ 在上面两个元素的下一层图层中，放置了一个label来表示选中和不选中，这个功能在动画展示中没有表示出来，是因为这个需要和我们控制的中控旋钮进行联动，所以还没有实现。

代码实现

​ 这里看我我这个自定义的按钮控件的代码吧

头文件

#ifndef MFD_AIRCONDITIONER_PUSHBUTON_H
#define MFD_AIRCONDITIONER_PUSHBUTON_H

#include <QWidget>

namespace Ui {
class MFD_AirConditioner_PushButon;
}

class MFD_AirConditioner_PushButon : public QWidget
{
    Q_OBJECT

public:
    explicit MFD_AirConditioner_PushButon(QWidget *parent = nullptr);
    ~MFD_AirConditioner_PushButon();
    /**
     * @brief setICON
     * @param path
     * 设置图标
     */
    void setICON(QString path);
    /**
     * @brief setText
     * @param text
     * 设置文本文字
     */
    void setText(QString text);
    /**
     * @brief setPicText
     * @param path1  正常状态
     * @param path2  按下状态
     * 设置图片文字
     */
    void setPicText(QString path1,QString path2);
    /**
     * @brief selected
     * 选中
     */
    void selected();
    /**
     * @brief unSelected
     * 未选中
     */
    void unSelected();
    /**
     * @brief enter
     * 进入，与按下功能一致
     */
    void enter();
    /**
     * @brief releaseEnter
     * 进入按钮松开，与按钮松开功能一致
     */
    void releaseEnter();

private slots:

    void on_pushButton_pressed();

    void on_pushButton_released();



private:
    /**
     * @brief setONFlage
     * 设置功能开关图标
     */
    void setONFlage();

private:
    Ui::MFD_AirConditioner_PushButon *ui;
    QString mPicText1 = "";
    QString mPicText2 = "";
    bool isOn = false;
};

#endif // MFD_AIRCONDITIONER_PUSHBUTON_H

源文件

#include "mfd_airconditioner_pushbuton.h"
#include "ui_mfd_airconditioner_pushbuton.h"

MFD_AirConditioner_PushButon::MFD_AirConditioner_PushButon(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::MFD_AirConditioner_PushButon)
{
    ui->setupUi(this);
    ui->label_mainback->hide();                                 // 隐藏Demo
    ui->label_selected->hide();                                 // 隐藏选中，即默认为不选中
    ui->label_icon->hide();                                     // 默认隐藏图标显示
    ui->label_on_off->setStyleSheet("border-image: url(:/AirConditioner/Resources/MultifunctionDisplay/AirConditioner/AirConditionerPushButton/off.png);");
    ui->pushButton->setStyleSheet("QPushButton{border-image: url(:/AirConditioner/Resources/MultifunctionDisplay/AirConditioner/AirConditionerPushButton/button.png);}"
                                  "QPushButton:pressed{border-image: url(:/AirConditioner/Resources/MultifunctionDisplay/AirConditioner/AirConditionerPushButton/button.png);}");

}

MFD_AirConditioner_PushButon::~MFD_AirConditioner_PushButon()
{
    delete ui;
}

void MFD_AirConditioner_PushButon::setICON(QString path)
{
    ui->label_icon->show();
    ui->label_icon->setStyleSheet(QString("border-image: url(%1);").arg(path));
}

void MFD_AirConditioner_PushButon::setText(QString text)
{
    ui->label_text->setText(text);
}

void MFD_AirConditioner_PushButon::setPicText(QString path1, QString path2)
{
    ui->label_text->setText("");
    mPicText1 = path1;
    mPicText2 = path2;
    ui->label_text->setStyleSheet(QString("border-image: url(%1);").arg(path1));
}

void MFD_AirConditioner_PushButon::selected()
{
    ui->label_selected->show();
}

void MFD_AirConditioner_PushButon::unSelected()
{
    ui->label_selected->hide();
}

void MFD_AirConditioner_PushButon::enter()
{
    on_pushButton_pressed();
}

void MFD_AirConditioner_PushButon::releaseEnter()
{
    on_pushButton_released();
}

void MFD_AirConditioner_PushButon::on_pushButton_pressed()
{
    if(mPicText2.isEmpty())
        ui->label_text->setStyleSheet("font: 30pt \"Microsoft YaHei UI\";color: rgb(255, 223, 106);");
    else
        ui->label_text->setStyleSheet(QString("font: 30pt \"Microsoft YaHei UI\";color: rgb(255, 223, 106);border-image: url(%1);").arg(mPicText2));
}


void MFD_AirConditioner_PushButon::on_pushButton_released()
{
    if(mPicText1.isEmpty())
        ui->label_text->setStyleSheet("font: 30pt \"Microsoft YaHei UI\";color: rgb(255, 255, 255);");
    else
        ui->label_text->setStyleSheet(QString("font: 30pt \"Microsoft YaHei UI\";color: rgb(255, 223, 106);border-image: url(%1);").arg(mPicText1));

    isOn = !isOn;
    setONFlage();
}

void MFD_AirConditioner_PushButon::setONFlage()
{
    if(isOn)
    {
        ui->label_on_off->setStyleSheet("border-image: url(:/AirConditioner/Resources/MultifunctionDisplay/AirConditioner/AirConditionerPushButton/open.png);");
    }
    else
    {
        ui->label_on_off->setStyleSheet("border-image: url(:/AirConditioner/Resources/MultifunctionDisplay/AirConditioner/AirConditionerPushButton/off.png);");
    }
}

2 使用自定义控件

​ 自动以控件使用其实也很简单，直接在界面上拖拽若干个QWidget，提升为我们上面的自定义类MFD_AirConditioner_PushButon，就基本文成了。如下图所示

image-20220502215149887

剩下的就是和使用普通的类没有啥区别了，直接在文件中调用接口就可以了，因为现在还没有功能，所以信号和槽还是没有写，和面根据实际功能，在丰富这个按钮控件类。暂时代码如下

void MFD_AirConditioner::initMyPushButtons()
{
    ui->myPushButton_auto->setText("AUTO");
    ui->myPushButton_ac->setText("AC");
    ui->myPushButton_macAC->setText("MAX A/C");
    ui->myPushButton_cycle->setPicText(":/AirConditioner/Resources/MultifunctionDisplay/AirConditioner/AirConditionerPushButton/cycle.png",
                                       ":/AirConditioner/Resources/MultifunctionDisplay/AirConditioner/AirConditionerPushButton/cycle_1.png");
    ui->myPushButton_aqs->setText("AQS");
    ui->myPushButton_dual->setText("DUAL");
    ui->myPushButton_rear->setText("REAR");
    ui->myPushButton_rear->setICON(":/AirConditioner/Resources/MultifunctionDisplay/AirConditioner/AirConditionerPushButton/lock.png");
    ui->myPushButton_ion->setText("ION");
}

其余内容，下篇见。

☞第三阶段成果展示

​ 目前已完成液晶仪表三种模式的初步显示，小模块后期根据精力更新了，主要还得找美术来搞资源，自己能力不够。暂未跟新计划。展示如下：

[video(video-yznBr6e3-1648369267384)(type-bilibili)(url-https://player.bilibili.com/player.html?aid=679609061)(image-https://ucc.alicdn.com/images/user-upload-01/img_convert/4d157e1cb316b007a2cb9790cb2dbfde.png)(title-基于Qt的汽车仪表模拟 3.0)]

✈B站链接：https://www.bilibili.com/video/BV1WS4y137y1/

☞第二阶段成果展示

​ 目前以完成HUD界面及接口开发，液晶仪表舒适模式和运动模式的开发。视频展示如下：

[video(video-2AqJ88TY-1645273728489)(type-bilibili)(url-https://player.bilibili.com/player.html?aid=594179292)(image-https://ucc.alicdn.com/images/user-upload-01/img_convert/e75563c3ce68bc980547dde8f6e265ba.png)(title-基于Qt的汽车仪表模拟 2.0)]

✈B站链接：https://www.bilibili.com/video/BV1aq4y1t7H7/

☞第一阶段成果展示

​ 目前以完成HUD界面及接口开发，液晶仪表舒适模式开发。展示如下：

[video(video-ArCvRvBQ-1642664938100)(type-bilibili)(url-https://player.bilibili.com/player.html?aid=77197267)(image-https://ucc.alicdn.com/images/user-upload-01/img_convert/ccddd04e0cef191fd33d7f58d41adb24.png)(title-基于Qt的汽车仪表模拟 1.0))]

✈B站链接：https://www.bilibili.com/video/BV1qJ411X7Gs/

✉说明：

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

多媒体部分是来自吉利博瑞2017旗舰版界面所有权和解释权都归吉利汽车所有。

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

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

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

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

博客签名2021

游客qytszqm66blbg
目录
相关文章
游客qytszqm66blbg
|
索引
HMI-61-【多媒体】空调部分 2
昨天我们已经实现了自定义的按钮了，今天我们把已经定义好的按钮和我们的控制台联动起来，使我们的多媒体部分不仅可以触屏控制，可一个使用控制台的旋钮来控制。演示如下
游客qytszqm66blbg
74 0
游客qytszqm66blbg
|
索引
HMI-62-【多媒体】空调部分 3
今天接着昨天的思路来搞，实现空调数字模块，因为素材里面的空调是双区空调，所以我还是自定义了一个模块，这个实现不难，可以参考上一篇自定义个按钮。
游客qytszqm66blbg
59 0
游客qytszqm66blbg
|
索引
HMI-63-【多媒体】空调部分 4
其实呢，写到这里，如果是第一次点击进来这个系列的文章，那你一定是在想着傻子在干嘛，写的啥玩意，所以呢，我还是建议你看看整个系列[Qt 汽车 HMI 仪表](https://dreamlife.blog.csdn.net/category_9146909_2.html)，毕竟写到这里，我有时候会迷糊，尤其是变量命名上，真的不知道以前的规则了，好多时候都是写到差不多了，回去一看，我曹，偏离了以前的风格，于是又花大量的时间去修改变量名，这个项目呢，持续的时间是在太久了，从之前整个`UI`练练手的想法，到现在想把它做成一个完成度较高的`“产品”`它已经已经跟着我走过三家公司了，不是说我工作换的，只是想
游客qytszqm66blbg
66 0
游客qytszqm66blbg
HMI-59-【多媒体】收音机 2
今天接着搞收音机，今天我们将把控制台的模拟中控旋钮信号引进到收音机里面来，来控制我们收音机调频。
游客qytszqm66blbg
53 0
游客qytszqm66blbg
HMI-57-【多媒体】收音机 1
前面几篇已经音乐播放器简单搞了一下，可以放音乐了。今天艺术家发来了收音机的界面，今天先搞搞。
游客qytszqm66blbg
50 0
游客qytszqm66blbg
HMI-55-【多媒体】音乐播放器 4
今天我们接着搞音乐播放器，今天主要实现音乐播放器的播放音频功能
游客qytszqm66blbg
59 0
游客qytszqm66blbg
HMI-53-【多媒体】音乐播放器 2
今天我们接着搞我们的音乐播放器，今天我把们昨天剩下的那些布局搞一搞，后面再实现细节，今天我们把下面的菜单和逻辑实现了，以及上次漏掉的右上角的子菜单按钮。
游客qytszqm66blbg
59 0
游客qytszqm66blbg
HMI-54-【多媒体】音乐播放器 3
今天我们接着搞音乐播放器，今天我们实现这个中心的音乐播放器。也就是这个歌曲信息，上一曲下一曲暂停，播放进度啥的。
游客qytszqm66blbg
76 0
游客qytszqm66blbg
HMI-56-【多媒体】音乐播放器 5
上一篇中实现了音乐播放的后台线程，夜里睡觉也没有睡踏实，总是感觉不合适，所以今天还是决定重新搞一下。
游客qytszqm66blbg
62 0
游客qytszqm66blbg
HMI-52-【多媒体】音乐播放器 1
今天我们搞音乐播放器，哎嗨，这个东西要是往细碎了搞，事情还真不少，今天就先努力实现面上的内容。
游客qytszqm66blbg
74 0