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

文章目录

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


前言

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

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

一、温度湿度曲线布局

TempHumtiy.h:

#ifndef TEMPHUMTIY_H
#define TEMPHUMTIY_H#include <QWidget>
#include "wavechart.h"namespace Ui {
class TempHumtiy;
}class TempHumtiy : public QWidget
{Q_OBJECTWaveChart* 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.mzph.cn/news/40966.shtml

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

相关文章

pprof 三把刀

pprof 三把刀 看内存 go tool pprof http://127.0.0.1:6060/debug/pprof/heap?seconds30 看cpu go tool pprof http://127.0.0.1:6060/debug/pprof/profile?seconds30 看协程 go tool pprof http://localhost:6060/debug/pprof/goroutine 端口是自定义的&#xff0c;看看…

Golang原生实现JA3指纹修改,并支持Proxy代理

起因 抓取某个HTTPS网站的时候 开启charles代理能够抓取成功,关闭被风控 通过检测,怀疑可能是tls的时候有区别 尝试 golang的http中,Transport.TLSClientConfig是可以自定义设置的 但起初通过随意设置并不能绕过风控 困难 使用golang的http客户端,修改DialTLSContext函数的…

使用Python批量将Word文件转为PDF文件

说明&#xff1a;在使用Minio服务器时&#xff0c;无法对word文件预览&#xff0c;如果有需要的话&#xff0c;可以将word文件转为pdf文件&#xff0c;再存储到Minio中&#xff0c;本文介绍如何批量将word文件&#xff0c;转为pdf格式的文件&#xff1b; 安装库 首先&#xff…

神经网络基础-神经网络补充概念-12-向量化逻辑回归的梯度输出

代码实现 import numpy as npdef sigmoid(z):return 1 / (1 np.exp(-z))def compute_loss(X, y, theta):m len(y)h sigmoid(X.dot(theta))loss (-1/m) * np.sum(y * np.log(h) (1 - y) * np.log(1 - h))return lossdef compute_gradient(X, y, theta):m len(y)h sigmoi…

Python系统学习1-9-类一之类语法

一、类之初印象 1、类就是空表格&#xff0c;将变量&#xff08;列名&#xff09;和函数&#xff08;行为&#xff09;结合起来 2、创建对象&#xff0c;表达具体行 3、创建类就是创建数据的模板 --操作数据时有提示 --还能再组合数据的行为 --结构更加清晰 4、类的内存分配…

vue项目根据word模版导出word文件

一、安装依赖 //1、docxtemplaternpm install docxtemplater pizzip -S//2、jszip-utilsnpm install jszip-utils -S//3、pizzipnpm install pizzip -S//4、FileSaver npm install file-saver --save二、创建word模版 也就是编辑一个word文档&#xff0c;文档中需要动态取值的…

【JAVA】数组练习

⭐ 作者&#xff1a;小胡_不糊涂 &#x1f331; 作者主页&#xff1a;小胡_不糊涂的个人主页 &#x1f4c0; 收录专栏&#xff1a;浅谈Java &#x1f496; 持续更文&#xff0c;关注博主少走弯路&#xff0c;谢谢大家支持 &#x1f496; 数组练习 1. 数组转字符串2. 数组拷贝3.…

arm-linux-gnueabihf-g++ gcc编译、优化命令 汇总

gcc优化选项&#xff0c;可在编译时间&#xff0c;目标文件长度&#xff0c;执行效率三个维度&#xff0c;进行不同的取舍和平衡。 gcc 常用编译选项 arm-linux-gnueabihf-g -O3 -marcharmv7-a -mcpucortex-a9 -ftree-vectorize -mfpuneon -mfpuvfpv3-fp16 -mfloat-abihard -…

js的FileSaver.saveAs()方法:监听保存进度,进度条等方法

在使用FileSaver.saveAs保存表格到本地时&#xff0c;如果想要获取导出/保存进度可以如下操作 FileSaver.js的saveAs()方法是一个异步操作&#xff0c;它将文件保存到用户设备上。在调用saveAs()方法后&#xff0c;可以通过使用回调函数、Promise、或监听相关事件来确定saveAs(…

在vue中使用swiper轮播图(搭配watch和$nextTick())

在组件中使用轮播图展示图片信息&#xff1a; 1.下载swiper,5版本为稳定版本 cnpm install swiper5 2.在组件中引入swiper包和对应样式&#xff0c;若多组件使用swiper&#xff0c;可以把swiper引入到main.js入口文件中&#xff1a; import swiper/css/swiper.css //引入swipe…

SpringBoot系列---【SpringBoot在多个profiles环境中自由切换】

SpringBoot在多个profiles环境中自由切换 1.在resource目录下新建dev&#xff0c;prod两个目录&#xff0c;并分别把dev环境的配置文件和prod环境的配置文件放到对应目录下&#xff0c;可以在配置文件中指定激活的配置文件&#xff0c;也可以默认不指定。 2.在pom.xml中最后位置…

07微服务的事务管理机制

一句话导读 在单体应用程序中&#xff0c;事务通常是在单个数据库或单个操作系统中管理的&#xff0c;而在微服务架构中&#xff0c;事务需要跨越多个服务和数据库&#xff0c;这就使得事务管理变得更加复杂和困难。 目录 一句话导读 一、微服务事务管理的定义和意义 二、微…

Layui列表表头去掉复选框改为选择

效果&#xff1a; 代码&#xff1a; // 表头复选框去掉改为选择 $(".layui-table th[data-field"0"] .layui-table-cell").html("<span>选择</span>");

做好以下几点,可以让我们延长周末体验感,好好放松!!!

工作以后常常容易感到疲于奔命&#xff0c;让我们找到适合自己方式&#xff0c;来让我们度过一个充实放松的周末! 方向一&#xff1a;分享你周末的时间规划 我们可以把每个月当做一个周期&#xff0c;制定一个简单的计划&#xff0c;如&#xff1a;第一周&#xff0c;锻炼身体…

基于Prometheus监控Kubernetes集群

目录 一、环境准备 1.1、主机初始化配置 1.2、部署docker环境 二、部署kubernetes集群 2.1、组件介绍 2.2、配置阿里云yum源 2.3、安装kubelet kubeadm kubectl 2.4、配置init-config.yaml 2.5、安装master节点 2.6、安装node节点 2.7、安装flannel、cni 2.8、部署测…

Go 1.21新增的内置函数(built-in functions)详解

Go 1.21新增的内置函数分别是 min、max 和 clear&#xff0c;接下来看下这几个函数的用途和使用示例。 在编程过程中&#xff0c;需要知道一组值中的最大或最小值的场景是很常见的&#xff0c;比如排序、统计等场景。之前都需要自己写代码来实现这个功能&#xff0c;现在 Go 1…

低成本无刷高速吹风机单片机方案

高速吹风机的转速一般是普通吹风机的5倍左右。一般来说&#xff0c;吹风机的电机转速一般为2-3万转/分钟&#xff0c;而高速吹风机的电机转速一般为10万转/分钟左右。高转速增加了高风速。一般来说&#xff0c;吹风机的风力只有12-17米/秒&#xff0c;而高速吹风机的风力可以达…

安卓获取当前的IP地址

文章目录 获取IP地址完整示例代码 获取IP地址 在安卓中&#xff0c;我们使用静态方法NetworkInterface.getNetworkInterfaces() 来获取当前设备上所有的网络接口。 网络接口是指设备上用于进行网络通信的硬件或软件。这些接口可以是物理接口&#xff08;如以太网接口、无线网…

使用Docker搭建MySQL主从复制(一主一从)

Docker安装MySQL docker pull mysql:5.7 docker images mysql安装步骤 1.新建主服务器容器实例3307 docker run -p 3307:3306 --name mysql-master -v /usr/local/docker/mysql5.7/data/mysql-master/logs:/var/log/mysql -v /usr/local/docker/mysql5.7/data/mysql-master/…

Day 31 C++ STL常用算法(下)

文章目录 常用拷贝和替换算法copy——容器内指定范围的元素拷贝到另一容器中函数原型注意——利用copy算法在拷贝时&#xff0c;目标容器要提前开辟空间示例 replace——将容器内指定范围的第一个旧元素修改为新元素函数原型注意——replace只会替换区间内满足条件的第一个旧元…