当前位置: 首页 > news >正文

Linux MQTT智能家居项目(智能家居界面布局)

文章目录

  • 前言
  • 一、创建工程项目
  • 二、界面布局准备工作
  • 三、正式界面布局
  • 总结


前言

一、创建工程项目

1.选择工程名称和项目保存路径
在这里插入图片描述
2.选择QWidget

在这里插入图片描述
3.添加保存图片的资源文件:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在工程目录下添加Icon文件夹保存图片:
在这里插入图片描述
将文件放入目录中:
在这里插入图片描述
将图片添加进入资源文件中:
在这里插入图片描述

二、界面布局准备工作

这里我们一共显示4个界面:LED控制界面,温度湿度显示界面,光照强度显示界面,摄像头监测界面。

所以这里需要有4个QWidget来显示对应的界面,考虑到要对这四个界面进行切换,这里会使用到QStackedLayout将四个界面进行管理。

同时需要添加四个按键,使用按键来切换到对应的界面。

首先添加4个界面文件:
在这里插入图片描述
设置界面为Widget类型:
在这里插入图片描述
在这里插入图片描述

其他的三个界面也是如此添加。

界面布局我们需要使用到的文件:
在这里插入图片描述

三、正式界面布局

代码部分注释写的非常详细了,这里就不多介绍了。

widget.h:

#ifndef WIDGET_H
#define WIDGET_H#include <QWidget>
#include <QPushButton>
#include <QStackedLayout>
#include "LEDCotrol.h"
#include "TempHumtiy.h"
#include "Illumination.h"
#include "Camera.h"class Widget : public QWidget
{Q_OBJECTQPushButton* LEDbutton;//LED按键QPushButton* TempHumtiybutton;//温度湿度按键QPushButton* illuminationbutton;//光照强度按键QPushButton* Camerabutton;//摄像头按键LEDCotrol* LEDUI;//LED界面TempHumtiy* TempHumtiyUI;//温度湿度界面Illumination* illuminationUI;//光照强度界面Camera* CameraUI;//摄像头界面QStackedLayout* m_stacklayout;//栈式布局管理器void BackSet(QString path);//背景图设置void ButtonStyleSet(QPushButton* button, QString Buttonname);//按键样式设置void AllButtonStyleSet();//全部按键样式设置public:Widget(QWidget *parent = nullptr);~Widget();protected slots:void LEDButtonClick();//LED按键槽函数void TempHumtiyButtonClick();//温度湿度槽函数void illuminationButtonClick();//光照强度槽函数void CameraButtonClick();//摄像头槽函数void ConnectSlot(void);//连接信号与槽
};
#endif // WIDGET_H

widget.cpp:

#include "widget.h"
#include <QHBoxLayout>
#include <QVBoxLayout>
#include <QFrame>Widget::Widget(QWidget *parent): QWidget(parent)
{QVBoxLayout* vlayout = new QVBoxLayout();LEDbutton = new QPushButton();//LED按键TempHumtiybutton = new QPushButton();//温度湿度按键illuminationbutton = new QPushButton();//光照强度按键Camerabutton = new QPushButton();//摄像头按键/*让四个按键垂直布局*/vlayout->addWidget(LEDbutton);vlayout->addWidget(TempHumtiybutton);vlayout->addWidget(illuminationbutton);vlayout->addWidget(Camerabutton);// 创建一个 label 作为竖直分隔线// 设置背景颜色或样式,以使其看起来像一根线// 创建一条竖直分隔线QFrame* Vertical_line = new QFrame();Vertical_line->setFrameShape(QFrame::VLine);Vertical_line->setFrameShadow(QFrame::Sunken);Vertical_line->setStyleSheet("QFrame { background-color: rgb(71, 72, 86); }");LEDUI = new LEDCotrol();//LED界面TempHumtiyUI = new TempHumtiy();//温度湿度界面illuminationUI = new Illumination();//光照强度界面CameraUI = new Camera();//摄像头界面/*使用栈式布局管理器管理界面*/m_stacklayout = new QStackedLayout();m_stacklayout->addWidget(LEDUI);m_stacklayout->addWidget(TempHumtiyUI);m_stacklayout->addWidget(illuminationUI);m_stacklayout->addWidget(CameraUI);QHBoxLayout* hlaout = new QHBoxLayout(this);hlaout->addLayout(vlayout);hlaout->addWidget(Vertical_line);hlaout->addLayout(m_stacklayout);/*设置界面为固定大小*/setFixedSize(1024, 600);/*设置对应的背景图*/BackSet(":/ICon/BackIcon.jpg");/*全部按键样式设置*/AllButtonStyleSet();/*连接信号与槽*/ConnectSlot();
}/*连接信号与槽*/
void Widget::ConnectSlot(void)
{connect(LEDbutton, SIGNAL(clicked()), this, SLOT(LEDButtonClick()));connect(TempHumtiybutton, SIGNAL(clicked()), this, SLOT(TempHumtiyButtonClick()));connect(illuminationbutton, SIGNAL(clicked()), this, SLOT(illuminationButtonClick()));connect(Camerabutton, SIGNAL(clicked()), this, SLOT(CameraButtonClick()));
}/** 设置界面背景图* path:资源文件路径
*/
void Widget::BackSet(QString path)
{// 设置 QWidget 的背景图QPixmap pixmap(path);QPalette palette;palette.setBrush(backgroundRole(), QBrush(pixmap));setPalette(palette);setAutoFillBackground(true);
}/** 设置按键样式* button:要设置的按键* Buttonname:按键名字
*/
void Widget::ButtonStyleSet(QPushButton* button, QString Buttonname)
{button->setText(Buttonname);button->setFixedSize(150, 50);button->setStyleSheet("font-size: 16pt");button->setStyleSheet("background-color: rgb(94, 124, 166); font-size: 16pt; color: rgb(255, 255, 255);");
}/*全部按键样式设置*/
void Widget::AllButtonStyleSet()
{ButtonStyleSet(LEDbutton, "灯光控制");ButtonStyleSet(TempHumtiybutton, "温度湿度");ButtonStyleSet(illuminationbutton, "光照强度");ButtonStyleSet(Camerabutton, "远程监控");
}//LED按键槽函数
void Widget::LEDButtonClick()
{m_stacklayout->setCurrentWidget(LEDUI);
}//温度湿度槽函数
void Widget::TempHumtiyButtonClick()
{m_stacklayout->setCurrentWidget(TempHumtiyUI);
}//光照强度槽函数
void Widget::illuminationButtonClick()
{m_stacklayout->setCurrentWidget(illuminationUI);
}//摄像头槽函数
void Widget::CameraButtonClick()
{m_stacklayout->setCurrentWidget(CameraUI);
}Widget::~Widget()
{
}

实现效果:
在这里插入图片描述

总结

本篇文章就讲解到这里,下篇文章我们完成LED,温度湿度控制等界面的设计。

相关文章:

Linux MQTT智能家居项目(智能家居界面布局)

文章目录 前言一、创建工程项目二、界面布局准备工作三、正式界面布局总结 前言 一、创建工程项目 1.选择工程名称和项目保存路径 2.选择QWidget 3.添加保存图片的资源文件&#xff1a; 在工程目录下添加Icon文件夹保存图片&#xff1a; 将文件放入目录中&#xff1a; …...

【Vue3】Vue3 UI 框架 | Element Plus —— 创建并优化表单

安装 # NPM $ npm install element-plus --save // 或者&#xff08;下载慢切换国内镜像&#xff09; $ npm install element-plus -S// 可以选择性安装 less npm install less less-loader -D // 可以选择性配置 自动联想src目录Element Plus 的引入和注入 main.ts import…...

如何基于 ACK Serverless 快速部署 AI 推理服务

作者&#xff1a;元毅 随着 AI 浪潮的到来&#xff0c;各种 AI 应用层出不穷&#xff0c;众所周知 AI 应用对 GPU 资源强烈依赖&#xff0c;但 GPU 很昂贵&#xff0c;如何降低 GPU 资源使用成本成为用户首要问题。而 AI 与 Serverless 技术结合&#xff0c;完全可以达到按需使…...

【奥义】如何用ChatGPT写论文搞模型

目录 你是否曾经在复现科研论文的结果时感到困难重重&#xff1f; 引言 1 打开需要复现的目标文献 2 提取公式定义的语句 3 文章公式、图实现 &#xff08;1&#xff09;用python复现目标文献中的公式 &#xff08;2&#xff09;用python复现目标文献中的图 4 Copy代码…...

欢迎光临,博客网站

欢迎光临&#xff1a;YUNYE博客~https://yunyeblog.com/更多的文章&#xff0c;供大家参考学习&#xff01;&#xff01;&#xff01;...

通过TightVNC远程访问MacOS

目录 一、下载 TightVNC 下载链接&#xff1a;https://www.tightvnc.com/ 下载后按步骤进行安装&#xff0c;安装完成后安装目录如下&#xff1a; 运行 tvnviewer.exe&#xff0c;输入远程 IP&#xff0c;点击【connect】&#xff1a; 输入密码&#xff0c;点击【OK】后即可远…...

智安网络|网络安全:危机下的创新与合作

随着信息技术的迅猛发展和互联网的普及&#xff0c;我们进入了一个高度网络化的社会。网络在提供便利和连接的同时&#xff0c;也带来了许多安全隐患和挑战。 一、网络安全的危险 **1.数据泄露和隐私侵犯&#xff1a;**网络上的个人和机构数据存在遭受泄露和盗取的风险&#…...

从系统角度,看智能制造|百世慧®

7月31日我们结束了智能制造专题第二期“电池智能制造质量管理应用及案例分享”的线上研讨会&#xff0c;有不少朋友没有来得及参加智能制造专题第一期研讨会&#xff0c;同时又工作繁忙。所以&#xff01;今天就由我百小能为大家快速讲解第一期研讨会——“电池智能制造应用”的…...

Dubbo 与 gRPC、Spring Cloud、Istio 的关系

很多开发者经常会问到 Apache Dubbo 与 Spring Cloud、gRPC 以及一些 Service Mesh 项目如 Istio 的关系&#xff0c;要解释清楚它们的关系并不困难&#xff0c;你只需要跟随这篇文章和 Dubbo 文档做一些更深入的了解&#xff0c;但总的来说&#xff0c;它们之间有些能力是重合…...

【uniapp 中使用uni-popup阻止左滑退出程序】

在uniapp中&#xff0c;可以使用uni-app插件uni-popup提供的阻止左滑退出程序的功能。具体步骤如下&#xff1a; 安装uni-popup插件&#xff1a;在HBuilderX编辑器中&#xff0c;打开manifest.json文件&#xff0c;找到“dependencies”字段&#xff0c;在其后添加&#xff1a…...

netty学习分享(一)

TCP与UDP TCP 是面向连接的、可靠的流协议&#xff0c;通过三次握手建立连接&#xff0c;通讯完成时要拆除连接。 UDP是面向无连接的通讯协议&#xff0c;UDP通讯时不需要接收方确认&#xff0c;属于不可靠的传输&#xff0c;可能会出现丢包现象 端口号&#xff1a; 端口号用…...

前端跨域问题解决方法

跨域是WEB浏览器专有的同源限制访问策略。(后台接口调用和postman等工具会出现) 跨源资源共享&#xff08;CORS&#xff0c;或通俗地译为跨域资源共享&#xff09;是一种基于 HTTP 头的机制&#xff0c;该机制通过允许服务器标示除了它自己以外的其他源&#xff08;域、协议或端…...

html基础面试题 html的元素居中的常用方法(基础知识温习)

html基础面试题 & html的元素居中的常用方法日常温习 1&#xff0c;使用text-align: center;属性&#xff1a; 对于内联元素&#xff08;如文本或图片&#xff09;&#xff0c;可以将其父元素的text-align属性设置为center。 <div style"text-align: center;&quo…...

VScode如何设置中文教程

前言&#xff1a;打开VSCode软件&#xff0c;可以看到刚刚安装的VSCode软件默认使用的是英文语言环境&#xff0c;但网上都是vscode中文界面教你怎么设置中文&#xff0c;可能不利于小白阅读&#xff0c;所以重装vscode&#xff0c;手摸手从英文变成中文。 设置为中文 打开VS…...

SpringCloud中 Sentinel 限流的使用

引入依赖 <dependency><groupId>com.alibaba.cloud</groupId><artifactId>spring-cloud-starter-alibaba-sentinel</artifactId> </dependency>手动编写限流规则&#xff0c;缺点是不够灵活&#xff0c;如果需要改变限流规则需要修改源码…...

springboot文件上传和下载接口的简单思路

springboot文件上传和下载的简单思路 文件上传文件下载 文件上传 在springboot中&#xff0c;上传文件只需要在接口中通过 MultipartFile 对象来获取前端传递的数据&#xff0c;然后将数据存储&#xff0c;并且返回一个对外访问路径即可。一般对于上传文件的文件名&#xff0c…...

MySQL索引和事务

目录 索引的作用 与 概念 MySQL有哪几种索引类型 如何提高查找效率 聚簇索引与非聚簇索引 覆盖索引 索引的优点和缺点 索引的一些基本操作 索引优化 B树、B树、Hash、红黑树的区别 B树与B树的区别 MySQL为什么使用B树作为索引 联合索引中的顺序 MySQL的最左前缀原…...

typeScript 之 基础

工具: PlayGround 源码&#xff1a; GitHub TypeScript 变量声明 typeScript中变量声明注意&#xff1a; 开头不能以数字开头变量名称可以包含数字和字母除了下划线_和美元$符号外&#xff0c;不能包含其他任意特殊字符 声明的结构&#xff1a; let 变量名&#xff1a; 类型…...

android app控制ros机器人五(百度地图)

半吊子改安卓&#xff0c;新增了标签页&#xff0c;此标签页需要显示百度地图 按照官方教程注册信息&#xff0c;得到访问应用AK&#xff0c;步骤也可以参照下面csdn Android地图SDK | 百度地图API SDK 【Android】实现百度地图显示_宾有为的博客-CSDN博客 本人使用的是aar开…...

【ts】【cocos creator】excel表格转JSON

需要将表格导出为text格式放到项目resources/text文件夹下 新建场景&#xff0c;挂载到Canvas上运行 表格文件格式&#xff1a; 保存格式选text tableToJson : import CryptoJS require(./FileSaver);const { ccclass, property } cc._decorator;ccclass export default c…...

【JavaEE】-- HTTP

1. HTTP是什么&#xff1f; HTTP&#xff08;全称为"超文本传输协议"&#xff09;是一种应用非常广泛的应用层协议&#xff0c;HTTP是基于TCP协议的一种应用层协议。 应用层协议&#xff1a;是计算机网络协议栈中最高层的协议&#xff0c;它定义了运行在不同主机上…...

如何在看板中体现优先级变化

在看板中有效体现优先级变化的关键措施包括&#xff1a;采用颜色或标签标识优先级、设置任务排序规则、使用独立的优先级列或泳道、结合自动化规则同步优先级变化、建立定期的优先级审查流程。其中&#xff0c;设置任务排序规则尤其重要&#xff0c;因为它让看板视觉上直观地体…...

最新SpringBoot+SpringCloud+Nacos微服务框架分享

文章目录 前言一、服务规划二、架构核心1.cloud的pom2.gateway的异常handler3.gateway的filter4、admin的pom5、admin的登录核心 三、code-helper分享总结 前言 最近有个活蛮赶的&#xff0c;根据Excel列的需求预估的工时直接打骨折&#xff0c;不要问我为什么&#xff0c;主要…...

VTK如何让部分单位不可见

最近遇到一个需求&#xff0c;需要让一个vtkDataSet中的部分单元不可见&#xff0c;查阅了一些资料大概有以下几种方式 1.通过颜色映射表来进行&#xff0c;是最正规的做法 vtkNew<vtkLookupTable> lut; //值为0不显示&#xff0c;主要是最后一个参数&#xff0c;透明度…...

AI编程--插件对比分析:CodeRider、GitHub Copilot及其他

AI编程插件对比分析&#xff1a;CodeRider、GitHub Copilot及其他 随着人工智能技术的快速发展&#xff0c;AI编程插件已成为提升开发者生产力的重要工具。CodeRider和GitHub Copilot作为市场上的领先者&#xff0c;分别以其独特的特性和生态系统吸引了大量开发者。本文将从功…...

ios苹果系统,js 滑动屏幕、锚定无效

现象&#xff1a;window.addEventListener监听touch无效&#xff0c;划不动屏幕&#xff0c;但是代码逻辑都有执行到。 scrollIntoView也无效。 原因&#xff1a;这是因为 iOS 的触摸事件处理机制和 touch-action: none 的设置有关。ios有太多得交互动作&#xff0c;从而会影响…...

重启Eureka集群中的节点,对已经注册的服务有什么影响

先看答案&#xff0c;如果正确地操作&#xff0c;重启Eureka集群中的节点&#xff0c;对已经注册的服务影响非常小&#xff0c;甚至可以做到无感知。 但如果操作不当&#xff0c;可能会引发短暂的服务发现问题。 下面我们从Eureka的核心工作原理来详细分析这个问题。 Eureka的…...

中医有效性探讨

文章目录 西医是如何发展到以生物化学为药理基础的现代医学&#xff1f;传统医学奠基期&#xff08;远古 - 17 世纪&#xff09;近代医学转型期&#xff08;17 世纪 - 19 世纪末&#xff09;​现代医学成熟期&#xff08;20世纪至今&#xff09; 中医的源远流长和一脉相承远古至…...

数据结构:递归的种类(Types of Recursion)

目录 尾递归&#xff08;Tail Recursion&#xff09; 什么是 Loop&#xff08;循环&#xff09;&#xff1f; 复杂度分析 头递归&#xff08;Head Recursion&#xff09; 树形递归&#xff08;Tree Recursion&#xff09; 线性递归&#xff08;Linear Recursion&#xff09;…...

鸿蒙HarmonyOS 5军旗小游戏实现指南

1. 项目概述 本军旗小游戏基于鸿蒙HarmonyOS 5开发&#xff0c;采用DevEco Studio实现&#xff0c;包含完整的游戏逻辑和UI界面。 2. 项目结构 /src/main/java/com/example/militarychess/├── MainAbilitySlice.java // 主界面├── GameView.java // 游戏核…...