HMI-60-【多媒体】空调部分 1
前言
如果这个系列Qt 汽车 HMI 仪表文章你都看过,或者大部分看过,知道整个项目的一个大致,那么可以接着看下去,如果是第一次就直接看到了这篇文章,那么多半应该是云里雾里的,因为写到现在,基本就是开发流水账了。除了个别知识点获取有参考价值,其他的应该没有太多的价值。
如果对这个项目感兴趣,那么有两个办法
1 联系作者(也就是我),获取源码
2 把Qt 汽车 HMI 仪表从头看看,至少知道我想要做什么,才能知道我现在在做什么。
HMI-60-【多媒体】空调部分 1
今天我们搞空调的按钮,今天这里我们不会堆砌大量的素材,而是用一个自定义的Button来实现这些,可以看到我们这次的空调按钮有以下元素
1 文字
2 选中/非选中
3 开关表示(橘色和灰色矩形)
4 图标
☑当前进度
今天主要就是使用自定按钮,把空调界面的子功能开关实现了,这个如果要是堆图片资源,估计我的艺术家会打死我的,再说我的脑子估计也得坏掉,因为我资源的命名是没有规则的,这就会把我坑死,加上这次按钮还是基本一致的,可以有一定的规律可循。
文章目录
- HMI-60-【多媒体】空调部分 1
- ☑当前进度
- 1 自定义按钮
- 代码实现
- 头文件
- 源文件
- 2 使用自定义控件
- ☞第三阶段成果展示
- ☞第二阶段成果展示
- ☞第一阶段成果展示
关键字:
HMI
、Multifunction
、Qt
、空调
1 自定义按钮
自定义按钮需要实现的功能
1 文字
2 选中/非选中
3 开关表示(橘色和灰色矩形)
4 图标
这里我们新建一个界面设计师类
命名为MFD_AirConditioner_PushButon
,在界面上按照上面列出的要素布局实现,如下图所示
应该是很好理解的吧,
这里使用了一个水平布局,用来显示一个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_OBJECTpublic: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(); // 隐藏Demoui->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);");elseui->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);");elseui->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
,就基本文成了。如下图所示
剩下的就是和使用普通的类没有啥区别了,直接在文件中调用接口就可以了,因为现在还没有功能,所以信号和槽还是没有写,和面根据实际功能,在丰富这个按钮控件类。暂时代码如下
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");
}
其余内容,下篇见。
☞第三阶段成果展示
目前已完成液晶仪表三种模式的初步显示,小模块后期根据精力更新了,主要还得找美术来搞资源,自己能力不够。暂未跟新计划。展示如下:
基于Qt的汽车仪表模拟 3.0
✈B站链接:https://www.bilibili.com/video/BV1WS4y137y1/
☞第二阶段成果展示
目前以完成HUD界面及接口开发,液晶仪表舒适模式和运动模式的开发。视频展示如下:
基于Qt的汽车仪表模拟 2.0
✈B站链接:https://www.bilibili.com/video/BV1aq4y1t7H7/
☞第一阶段成果展示
目前以完成HUD界面及接口开发,液晶仪表舒适模式开发。展示如下:
基于Qt的汽车仪表模拟 1.0)
✈B站链接:https://www.bilibili.com/video/BV1qJ411X7Gs/
✉说明:
本项目中所使借鉴原型来自:[吉利] 博瑞GE | 仪表HMI设计、吉利汽车HMI项目。
多媒体部分是来自吉利博瑞2017旗舰版界面所有权和解释权都归吉利汽车所有。
设计图的所有权和解释权都归吉利汽车所有。
本项目所有资源文件均由**打不死的小海**复刻制作。
本项目代码暂时不会开源,有需要的源码的可与我联系,左上角二维码加微信。
本项目仅限学习交流、禁止商业使用。
HMI-60-【多媒体】空调部分 1相关推荐
- HMI-61-【多媒体】空调部分 2
前言 如果这个系列Qt 汽车 HMI 仪表文章你都看过,或者大部分看过,知道整个项目的一个大致,那么可以接着看下去,如果是第一次就直接看到了这篇文章,那么多半应该是云里雾里的,因为写到现在,基本就是开 ...
- HMI-63-【多媒体】空调部分 4
HMI-63-[多媒体]空调部分 4 文章目录 HMI-63-[多媒体]空调部分 4 ☀前言 框架图 函数调用流程 ✍本文计划 ☢当前进度 ☯功能实现 1 风向模块 1.1 头文件 1.2 源文件 2 ...
- HMI-64-【多媒体】Ui全部制作完成
HMI-64-[多媒体]Ui全部制作完成 文章目录 HMI-64-[多媒体]Ui全部制作完成 ☀前言 框架图 函数调用流程 ✍本文计划 ☢当前进度 ☯功能实现 1 菜单 3 空调 4 行车记录仪 5 ...
- 发展零碳的重要支柱——光储直柔
背景 2021年10月,<2030年前碳达峰行动方案>对推进碳达峰工作作出总体部署,其中便提及了"光储直柔".方案中提出,深化可再生能源建筑应用,推广光伏发电与建筑一体 ...
- 进入瓶颈期的格力,多元化能助其解围吗?
2013年12月12日,格力董事长董明珠与小米科技CEO雷军就五年后两家企业营业额的高低立下了一个10亿元的赌约,今年正是赌约的最后一年.对于这次赌局,不少吃瓜群众表示:空调一定选格力,但手机不一定选 ...
- 如何阅读AUTOSAR官方文档
注: 本文首发于微信公众号"嵌入式软件实战派",关注获得更多内容. AUTOSAR有哪些标准文档 Classic Platform AUTOSAR Classic Platform ...
- HMI-62-【多媒体】空调部分 3
前言 如果这个系列Qt 汽车 HMI 仪表文章你都看过,或者大部分看过,知道整个项目的一个大致,那么可以接着看下去,如果是第一次就直接看到了这篇文章,那么多半应该是云里雾里的,因为写到现在,基本就是开 ...
- 格式工厂 php接口,格式工厂 V2.60 (FormatFactory)免费的多媒体格式转换软件
13904.jpg (35.69 KB) 2011-6-23 15:08 格式工厂(FormatFactory)是套万能的免费的多媒体格式转换软件. [软件功能] 提供以下功能: 所有类型视频转到MP ...
- HMI-47-【多媒体】Title界面实现 2
HMI-47-[多媒体]Title界面实现 2 今天我将尝试实现以下多媒体部的Title部分,主要是空调出风模式.空调风量.空调模式. 当前进度 文章目录 HMI-47-[多媒体]Title界面实 ...
最新文章
- 第一轮通知 | 2022年中国生物物理学会肠道菌群分会年会暨“崂山论肠菌”学术论坛...
- windows安装visual studio code并配置latex并编写latex论文
- 苹果系统里面 dictionary 如何加入中文词典
- wxWidgets:wxActiveXEvent类用法
- 第4章 Python 数字图像处理(DIP) - 频率域滤波11 - 使用高通滤波器锐化图像
- canal 入门(1)
- 四种有能力取代Cookies的客户端Web存储方案
- 如何计算机械能的变化量,问:如何计算机械能变化量?
- UnityShader15:前向渲染
- 《打造七星级团队》观后感
- 数据挖掘-二手车价格预测 Task03:特征工程
- VB6程序实现XP或者WIN7风格
- 408计算机及格要什么水平,2019考研计算机408难度水平?
- Python渗透测试之流量分析:流量嗅探工具编程
- Java实现四则运算
- 昨天面了一位,见识到了Spring的天花板~
- 2017全国计算机高校排名,全国计算机专业大学排名_2017计算机专业大学排名
- 基于CKEditor网页富文本编辑工具转PDF文件的技术预研分析报告
- linux中感叹号的作用,Linux - 感叹号
- java语言程序设计丁振凡ppt_Java语言程序设计(第2版)丁振凡 第2篇.ppt