Linux MQTT智能家居(温度,湿度,环境监测,摄像头等界面布局设置)

news2025/1/12 1:52:04

文章目录

  • 前言
  • 一、温度湿度曲线布局
  • 二、环境监测界面布局
  • 三、摄像头界面布局
  • 总结


前言

本篇文章来完成另外三个界面的布局设置。

这里会使用到 feiyangqingyun的一些控件库。

一、温度湿度曲线布局

TempHumtiy.h:

#ifndef TEMPHUMTIY_H
#define TEMPHUMTIY_H

#include <QWidget>
#include "wavechart.h"

namespace Ui {
class TempHumtiy;
}

class TempHumtiy : public QWidget
{
    Q_OBJECT

    WaveChart* TempWave;//温度曲线
    WaveChart* HumityWave;//湿度曲线

public:
    explicit TempHumtiy(QWidget *parent = nullptr);
    ~TempHumtiy();

private:
    Ui::TempHumtiy *ui;
};

#endif // TEMPHUMTIY_H

TempHumtiy.cpp:

#include "TempHumtiy.h"
#include "ui_TempHumtiy.h"
#include <QVBoxLayout>

TempHumtiy::TempHumtiy(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::TempHumtiy)
{
    ui->setupUi(this);

    QVBoxLayout* vlaout = new QVBoxLayout(this);

    //温度曲线
    TempWave = new WaveChart();
    TempWave->setTitle("温度曲线");

    //湿度曲线
    HumityWave = new WaveChart();
    HumityWave->setTitle("温度曲线");

    vlaout->addWidget(TempWave);
    vlaout->addWidget(HumityWave);
}

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

运行效果:
在这里插入图片描述

二、环境监测界面布局

Illumination.h:

#include "Illumination.h"
#include "ui_Illumination.h"
#include <QHBoxLayout>
#include <QLabel>
#include <QFont>
#include <QPalette>

Illumination::Illumination(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::Illumination)
{
    ui->setupUi(this);

    QFont font("Arial", 20);
    QPalette palette;
    palette.setColor(QPalette::WindowText, Qt::white);

    QLabel* label1 = new QLabel("烟雾浓度");
    label1->setFont(font);
    label1->setPalette(palette);
    label1->setAlignment(Qt::AlignCenter);


    QLabel* label2 = new QLabel("光照强度");
    label2->setFont(font);
    label2->setPalette(palette);
    label2->setAlignment(Qt::AlignCenter);


    QLabel* label3 = new QLabel("Co2浓度");
    label3->setFont(font);
    label3->setPalette(palette);
    label3->setAlignment(Qt::AlignCenter);


    QHBoxLayout* hlayout = new QHBoxLayout();
    QHBoxLayout* hlayout1 = new QHBoxLayout();
    QVBoxLayout* vlayout = new QVBoxLayout(this);

    hlayout1->addWidget(label1);
    hlayout1->addWidget(label2);
    hlayout1->addWidget(label3);

    /* 烟雾浓度 */
    Smoke = new ProgressPercent();
    Smoke->setValue(20);
    Smoke->setUsedColor(QColor(255, 127, 39));
    Smoke->setPercentStyle(ProgressPercent::PercentStyle_Arc_Wave);


    /* 光照强度 */
    IllCent = new ProgressPercent();
    IllCent->setValue(15);
    IllCent->setUsedColor(QColor(237, 201, 14));
    IllCent->setPercentStyle(ProgressPercent::PercentStyle_Arc_Wave);

    /* Co2 */
    Co2 = new ProgressPercent();
    Co2->setValue(25);
    Co2->setUsedColor(QColor(237, 28, 36));
    Co2->setPercentStyle(ProgressPercent::PercentStyle_Arc_Wave);

    hlayout->addWidget(Smoke);
    hlayout->addWidget(IllCent);
    hlayout->addWidget(Co2);

    vlayout->addStretch();
    vlayout->addLayout(hlayout);
    vlayout->addLayout(hlayout1);
    vlayout->addStretch();
}

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

Illumination.cpp:

#include "Illumination.h"
#include "ui_Illumination.h"
#include <QHBoxLayout>
#include <QLabel>
#include <QFont>
#include <QPalette>

Illumination::Illumination(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::Illumination)
{
    ui->setupUi(this);

    QFont font("Arial", 20);
    QPalette palette;
    palette.setColor(QPalette::WindowText, Qt::white);

    QLabel* label1 = new QLabel("烟雾浓度");
    label1->setFont(font);
    label1->setPalette(palette);
    label1->setAlignment(Qt::AlignCenter);


    QLabel* label2 = new QLabel("光照强度");
    label2->setFont(font);
    label2->setPalette(palette);
    label2->setAlignment(Qt::AlignCenter);


    QLabel* label3 = new QLabel("Co2浓度");
    label3->setFont(font);
    label3->setPalette(palette);
    label3->setAlignment(Qt::AlignCenter);


    QHBoxLayout* hlayout = new QHBoxLayout();
    QHBoxLayout* hlayout1 = new QHBoxLayout();
    QVBoxLayout* vlayout = new QVBoxLayout(this);

    hlayout1->addWidget(label1);
    hlayout1->addWidget(label2);
    hlayout1->addWidget(label3);

    /* 烟雾浓度 */
    Smoke = new ProgressPercent();
    Smoke->setValue(20);
    Smoke->setUsedColor(QColor(255, 127, 39));
    Smoke->setPercentStyle(ProgressPercent::PercentStyle_Arc_Wave);


    /* 光照强度 */
    IllCent = new ProgressPercent();
    IllCent->setValue(15);
    IllCent->setUsedColor(QColor(237, 201, 14));
    IllCent->setPercentStyle(ProgressPercent::PercentStyle_Arc_Wave);

    /* Co2 */
    Co2 = new ProgressPercent();
    Co2->setValue(25);
    Co2->setUsedColor(QColor(237, 28, 36));
    Co2->setPercentStyle(ProgressPercent::PercentStyle_Arc_Wave);

    hlayout->addWidget(Smoke);
    hlayout->addWidget(IllCent);
    hlayout->addWidget(Co2);

    vlayout->addStretch();
    vlayout->addLayout(hlayout);
    vlayout->addLayout(hlayout1);
    vlayout->addStretch();
}

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

运行效果:
在这里插入图片描述

三、摄像头界面布局

将QWidget提升为QVideoWidget,这个界面用于显示摄像头的图形。
在这里插入图片描述
Camera.h:

#ifndef CAMERA_H
#define CAMERA_H

#include <QWidget>
#include <QCamera>
#include <QVideoWidget>
#include <QMediaCaptureSession>
#include <QMediaDevices>

namespace Ui {
class Camera;
}

class Camera : public QWidget
{
    Q_OBJECT

    // 设置摄像机
    QCamera* camera;
    // 媒体会话
    QMediaCaptureSession* captureSession;

public:
    explicit Camera(QWidget *parent = nullptr);
    ~Camera();

private:
    Ui::Camera *ui;
};

#endif // CAMERA_H

Camera.cpp:

#include "Camera.h"
#include "ui_Camera.h"

Camera::Camera(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::Camera)
{
    ui->setupUi(this);

    // 默认的视频输入设备
    QCameraDevice defaultVideoInput = QMediaDevices::defaultVideoInput();
    // 设置摄像机
    camera = new QCamera(QMediaDevices::defaultVideoInput());
    // 媒体会话
    captureSession = new QMediaCaptureSession();

    captureSession->setCamera(camera);
    captureSession->setVideoOutput(ui->widget);

    camera->start();

}

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

运行效果:
在这里插入图片描述

总结

本篇文章就讲解到这里。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/870564.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Maven 基础学习及使用

Maven1 Maven简介1.1 Maven模型1.2 仓库 2 Maven安装配置3 Maven基本使用3.1 Maven 常用命令3.2 Maven 生命周期 4 IDEA使用Maven4.1 IDEA配置Maven环境4.2 Maven 坐标详解4.3 IDEA 创建 Maven项目4.4 IDEA 导入 Maven项目 5 依赖管理5.1 使用坐标引入jar包5.2 依赖范围 Maven …

UVA-1601 万圣节后的早晨 题解答案代码 算法竞赛入门经典第二版

GitHub - jzplp/aoapc-UVA-Answer: 算法竞赛入门经典 例题和习题答案 刘汝佳 第二版 以三个点的当前位置作为状态&#xff0c;广度优先遍历&#xff0c;找到终点即为最短次数。 注意&#xff1a; 一次可以移动多个点&#xff0c;但是每个点只能移动一步。在同一次中&#xf…

人工智能监听——研究人员发现新的安全威胁

大学的一项新研究表明&#xff0c;人工智能 (AI) 可以通过按键声音识别密码&#xff0c;准确率超过 90%。 在通过 Zoom 等视频通话聊天时输入计算机密码可能会打开网络攻击的大门&#xff0c;一项新的研究表明&#xff0c;人工智能可以通过窃听打字声音来找出正在按下的按键。…

索引堆及其优化(Java 实例代码)

目录 索引堆及其优化 一、概念及其介绍 二、适用说明 三、结构图示 四、Java 实例代码 src/runoob/heap/IndexMaxHeap.java 文件代码&#xff1a; 索引堆及其优化 一、概念及其介绍 索引堆是对堆这个数据结构的优化。 索引堆使用了一个新的 int 类型的数组&#xff0c;…

JavaScript【BOM】

【BOM】 原创内容&#xff0c;转载请注明出处&#xff01; 一、BOM是什么 BOM&#xff08;Browser Object Model&#xff0c;浏览器对象模型&#xff09;是 JS 与 浏览器窗口交互的接口。 一些与浏览器改变尺寸、滚动条滚动相关的特效&#xff0c;都要借助 BOM 技术。 二、w…

Arduino+esp32学习笔记

学习目标&#xff1a; 使用Arduino配置好蓝牙或者wifi模块 学习使用python配置好蓝牙或者wifi模块 学习内容&#xff08;笔记&#xff09;&#xff1a; 一、 Arduino语法基础 Arduino语法是基于C的语法,C又是c基础上增加了面向对象思想等进阶语言。那就只记录没见过的。 单多…

【分布式】Viewstamped Replication Revisited

篇前感悟&#xff1a; 阅读分布式系统文章的意义其实并不在于你个人真正地去开发这样一个基于这种协议的系统&#xff0c;因为真正去开发一个高可用的分布式系统实在是太难了&#xff08;对我来说…&#xff09;更多的还是汲取其中的思想&#xff0c;包括设计思路&#xff0c;优…

高性能跨平台网络通信框架 HP-Socket v5.9.3

项目主页 : http://www.oschina.net/p/hp-socket开发文档 : https://www.docin.com/p-4478351216.html下载地址 : https://github.com/ldcsaa/HP-SocketQQ Group: 44636872, 663903943 v5.9.3 更新 一、主要更新 问题修复&#xff1a;通过 POST/PUT 等带有请求内容的 HTTP 方…

Vue主面板组件模板(简洁版)

文章目录 &#x1f412;个人主页&#x1f3c5;JavaEE系列专栏&#x1f4d6;前言&#xff1a;&#x1f380;源码如下&#xff1a; &#x1f412;个人主页 &#x1f3c5;JavaEE系列专栏 &#x1f4d6;前言&#xff1a; 本篇博客主要以介绍【&#x1f380;主面板组件模板&#xf…

怎么才能突破认知?别灌鸡汤行吗

怎么才能突破认知&#xff1f;别灌鸡汤行吗&#xff1f; 趣讲大白话&#xff1a;大部分人得一步一步来 【趣讲信息科技254期】 **************************** 孔子说有三种情况&#xff1a; 1生而知之&#xff1a;就是天生就会 2学而知之&#xff1a;需要后天学习 3困而学之&am…

【计算机网络】——数据链路层

二、组帧 1、字符计数法 帧头部使用一个字符来表示帧的大小(包括第一个计数字符) &#xff08;此处一字符一个字节&#xff09; 2、字符填充收尾定界法 特定字符来定界帧的首和尾。若帧中数据段出现等同于特定字符的字符内容&#xff0c;前置一个转义字符。(类似于正则表达…

读发布!设计与部署稳定的分布式系统(第2版)笔记30_为部署而设计

1. 部署行为是系统生命的重要组成部分 1.1. 只编写代码是不够的&#xff0c;只要没有在生产环境中运行&#xff0c;一切都不算完成 1.2. 要想取得成功&#xff0c;需要早早地频繁部署软件 1.3. 设计易于部署的软件非常有必要 1.4. 零停机部署就是目标 2. 机器与服务 2.1.…

HTML详解连载(4)

HTML详解连载&#xff08;4&#xff09; 专栏链接 [link](http://t.csdn.cn/xF0H3)下面进行专栏介绍 开始喽CSS定义书写位置示例注意 CSS引入方式内部样式表&#xff1a;学习使用 外部演示表&#xff1a;开发使用代码示例行内样式代码示例 选择器作用基础选择器标签选择器举例特…

Linux MQTT智能家居项目(LED界面的布局设置)

文章目录 前言一、LED界面布局准备工作二、LED界面布局三、逻辑实现总结 前言 上篇文章我们完成了主界面的布局设置那么这篇文章我们就来完成各个界面的布局设置吧。 一、LED界面布局准备工作 首先添加LED灯光控制的图标。 将选择好的LED图标添加进来&#xff1a; 图标可以…

gcc及其相关知识

目录 gcc工作流程 静态库的生成和使用&#xff08;该部分使用g进行代码的编译。 若使用gcc&#xff0c;也类似&#xff09; 动态库的制作和使用&#xff08;此处用gcc&#xff0c;g类似&#xff09; 动态库的命名规则 动态库的制作 动态库的使用 动态库和静态库的优缺点 静…

搭建Synopsis 数字IC IDE开发化境

安装平台信息&#xff1a; VMware15.5和centos7 至于为何要选择如上版本和为何不能直接在物理机上安装还不得而知&#xff0c;只是参考网上的文章是这样做的&#xff0c;先照搬过来&#xff0c;在安装操作中慢慢体会。 安装包内容如下&#xff1a; 使用默认配置&#xff0c;一…

CAN总线一些经典的现场故障

本文分析一些经典的CAN总线现场故障。 1、CAN总线的常见故障 CAN总线错误分析与解决 当CAN总线出现故障或数据传输异常时,往往会出现多种奇怪的故障现象,如仪表板显示异常,车辆无法启动,启动后无法熄灭,车辆动力性能下降,某些电控系统功能失等。 这是因为相关数据或信息…

第二十章 重要HL7操作场景 - 传入消息的双 ACK 序列

文章目录 第二十章 重要HL7操作场景 - 传入消息的双 ACK 序列传出消息的双 ACK 序列配置双 ACK 序列 第二十章 重要HL7操作场景 - 传入消息的双 ACK 序列 对于进入Production的消息&#xff0c;双重确认序列的工作原理如下图所示&#xff1a; 客户端应用程序将消息发送到Produ…

【数据结构•堆】轮廓线

题目描述 轮廓线   • 每一个建筑物用一个三元组表示(L, H, R), 表示左边界, 高度和右边界。   • 轮廓线用X, Y, X, Y…这样的交替式表示。   • 右图的轮廓线为: (1, 11, 3, 13, 9, 0, 12, 7, 16,3, 19, 18, 22, 3, 23, 13, 29, 0) 。   • 给N个建筑&#xff0c;求…

项目架构简介

目录 1 单体应用架构 2 垂直应用架构 3 分布式架构 3.1 RPC 3.2 SOA 4 微服务架构 本文介绍后台应用的各种架构,以及各架构的优缺点对比 1 单体应用架构 将所有的代码功能都写在一个项目中(例如:MVC结构,SSM框架),同时打包,同时部署 优点:便于管理,减少开发、维护、运维成…