首页 > 系统相关 >Linux MQTT智能家居项目(智能家居界面布局)

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

时间:2023-08-11 14:32:42浏览次数:40  
标签:Widget 界面 void 按键 智能家居 MQTT Linux new include

(文章目录)


前言

一、创建工程项目

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_OBJECT

    QPushButton* 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,温度湿度控制等界面的设计。

标签:Widget,界面,void,按键,智能家居,MQTT,Linux,new,include
From: https://blog.51cto.com/u_16153875/7047736

相关文章

  • Linux系统修改时区
    本文以修改印度孟买时区为例,请您参考以下步骤进行操作。执行以下命令更新时区。ln-sf/usr/share/zoneinfo/Asia/Colombo/etc/localtime说明:印度有些地区会使用/usr/share/zoneinfo/Asia/Colombo这个GMT+05:30的时间。执行以下命令更新硬件时钟(RTC)。hwclock-w执行以下命令重启......
  • Linux服务器修改时区时间
         时间的一致性很关键,对于日志的分析和程序的对接都至关重要!01、tzselect 修改时区可以使用命令tzselect,修改时区。操作示例:$ tzselectPleaseidentifyalocationsothattimezonerulescanbesetcorrectly.Pleaseselectacontinentorocean.1)Africa2......
  • Linux 更改时区、时间
    一、手动修改1.date命令:查看当前时间2. date-s 时分秒:修改时间还需要把日期改过来3. date-s 完整日期时间(YYYY-MM-DDhh:mm[:ss]):修改日期、时间时间要用双引号括起来,否则报错手动修改会存在一定的时间误差4. hwclock-w将时间写入bios避免重启失效。当我们进行完Li......
  • Linux:dnf命令
    学习自:linux中dnf实用命令简记_dnflinux_红烧栗子黄瓜鱼的博客-CSDN博客1、前言dnf(全称Dandifiedyum),是新一代rpm软件包管理器,首先出现于Fedora18,并在Fedora22正式成为包管理器。dnf克服了yum的一些瓶颈,提升了包括用户体验、内存占用、依赖分析、运行速度等多方面的内容。dn......
  • linux python版本切换alternatives
    查看发现linux的python3命令指向alternativesalternatives是Linux系列操作系统的一个内置命令,即使最小化安装也有该命令,它的主要作用就是版本控制切换,比如,你的系统内有多个Python版本,Python3.8,Python2.7.5,Python3.6,。[root@santiagod-andibleopenstack-ansible]#find/usr/b......
  • 实践|Linux 中查找和删除重复文件
    动动发财的小手,点个赞吧!如果您习惯使用下载管理器从互联网上下载各种内容,那么组织您的主目录甚至系统可能会特别困难。通常,您可能会发现您下载了相同的mp3、pdf和epub(以及各种其他文件扩展名)并将其复制到不同的目录。这可能会导致您的目录中充满各种无用的重复内容。在本教......
  • Linux操作系统设计与构建
    Linux操作系统设计与构建   主 编:张同光   出版单位:清华大学出版社   ISBN:   ISBN:   出版时间:2024.1   CIP:   定价:¥ 内容简介        本书以“成功设计与构建可用的Linux操作系统”为编写目标,共包括15章:Linux操作系统的设计、构建Lin......
  • Linux操作系统设计与构建
    Linux操作系统设计与构建   主 编:张同光   出版单位:清华大学出版社   ISBN:   ISBN:   出版时间:2024.1   CIP:   定价:¥ 内容简介        本书以“成功设计与构建可用的Linux操作系统”为编写目标,共包括15章:Linux操作系统的设计、构建Linu......
  • 深入理解Linux内核——内存管理(2)
    提要:本系列文章主要参考MIT6.828课程以及两本书籍《深入理解Linux内核》《深入Linux内核架构》对Linux内核内容进行总结。内存管理的实现覆盖了多个领域:内存中的物理内存页的管理分配大块内存的伙伴系统分配较小内存的slab、slub、slob分配器分配非连续内存块的vmalloc分......
  • 【linux】命令iftop实时流量监控
    命令iftop实时流量监控iftop是一个命令行系统监控工具用来显示网络连接。默认按照带宽使用排序连接,并且最大带宽消耗排最上方。iftop在命名的网络接口上监听网络流量并显示按照主机对显示当前流量带宽。如果没有指定接口,iftop将监听在外部接口(使用libcap和libncurses)的第一个接......