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;
}

运行效果：

总结

本篇文章就讲解到这里。