当前位置: 首页 > 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…...

JetBrains IDE试用期重置终极指南:3种简单方法快速延长30天免费使用

JetBrains IDE试用期重置终极指南&#xff1a;3种简单方法快速延长30天免费使用 【免费下载链接】ide-eval-resetter 项目地址: https://gitcode.com/gh_mirrors/id/ide-eval-resetter JetBrains IDE试用期重置工具&#xff08;ide-eval-resetter&#xff09;是一款专门…...

碧蓝航线自动化助手:5分钟掌握解放双手的终极解决方案

碧蓝航线自动化助手&#xff1a;5分钟掌握解放双手的终极解决方案 【免费下载链接】AzurLaneAutoScript Azur Lane bot (CN/EN/JP/TW) 碧蓝航线脚本 | 无缝委托科研&#xff0c;全自动大世界 项目地址: https://gitcode.com/gh_mirrors/az/AzurLaneAutoScript 你是否曾为…...

nix 项目贡献指南:从代码提交到发布的完整流程

nix 项目贡献指南&#xff1a;从代码提交到发布的完整流程 【免费下载链接】nix Rust friendly bindings to *nix APIs 项目地址: https://gitcode.com/gh_mirrors/nix/nix nix 是一个为 Rust 开发者提供友好的 *nix 系统 API 绑定的开源项目。本指南将带你了解从发现问…...

Qwen3-14B私有部署案例:电商客服话术生成与情感倾向优化实践

Qwen3-14B私有部署案例&#xff1a;电商客服话术生成与情感倾向优化实践 1. 项目背景与需求分析 电商客服每天需要处理大量重复性问题&#xff0c;传统人工回复效率低下且难以保证一致性。我们基于Qwen3-14B模型构建了智能客服话术生成系统&#xff0c;主要解决以下痛点&…...

人工智能之数字生命 认知架构白皮书 第4章

《HY-Ego 认知架构白皮书》&#xff08;续&#xff09;4. 世界树&#xff08;World Tree&#xff09;——全局世界骨架 世界树是 HY-Ego 认知架构的全局事实骨架&#xff0c;负责对整个“世界”进行结构化建模、组织和维护。它与因果树并行独立运行&#xff0c;二者通过快照机制…...

Phi-4-mini-reasoning镜像免配置:预置Prometheus监控指标暴露配置

Phi-4-mini-reasoning镜像免配置&#xff1a;预置Prometheus监控指标暴露配置 1. 模型简介与部署概述 Phi-4-mini-reasoning是一个基于合成数据构建的轻量级开源模型&#xff0c;专注于高质量、密集推理的数据处理能力。作为Phi-4模型家族的一员&#xff0c;它特别针对数学推…...

MySQL 故障排查与生产环境优化笔记

一、基础信息1. 实验环境数据库版本&#xff1a;MySQL 8.0架构&#xff1a;1 台单实例 2 台主从复制环境用途&#xff1a;模拟生产故障、验证优化方案2. MySQL 逻辑架构&#xff08;四层&#xff09;连接层处理客户端连接、授权认证、权限校验提供线程池、SSL 安全连接服务层S…...

25岁后为什么老得快?你的细胞在偷偷减少

有没有发现一个扎心的事实&#xff1a;25岁像是一道隐形的分水岭&#xff0c;把青春和初老狠狠隔开。20岁的时候&#xff0c;通宵打游戏、追剧、赶ddl&#xff0c;第二天睡半天就能满血复活&#xff0c;脸上看不到一丝疲惫&#xff0c;皮肤透着原生态的光泽&#xff0c;哪怕偶尔…...

Linux五种I/O模型详解与性能对比

1. Linux I/O 模型基础概念解析在深入探讨五种I/O模型之前&#xff0c;我们需要先理解几个关键的基础概念。这些概念是理解不同I/O模型差异的基石&#xff0c;也是很多开发者在实际工作中容易混淆的地方。1.1 用户态与内核态Linux系统将运行环境分为用户态(User mode)和内核态(…...

Phantom Stealer 凭证窃取机制分析与防御体系研究

摘要 Phantom Stealer 作为 2025 年下半年出现的新型多功能信息窃取木马&#xff0c;以多阶段感染、无文件驻留、强反检测与全维度凭证窃取为核心特征&#xff0c;通过伪装合法软件、脚本混淆、进程注入、 Heaven’s Gate 技术规避等手段&#xff0c;精准窃取浏览器密码、Cooki…...