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

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

前言

上篇文章我们完成了主界面的布局设置那么这篇文章我们就来完成各个界面的布局设置吧。

一、LED界面布局准备工作

首先添加LED灯光控制的图标。

将选择好的LED图标添加进来:

图标可以在阿里的矢量图中找到:

地址:阿里巴巴矢量图库

将图片下载到后即可添加进入工程文件中。

二、LED界面布局

在QT设计师界面我们完成这样的一个布局:

首先我们需要添加LED的图标和将LED的按键边框隐藏:

隐藏边框:

设置按键样式表:

样式表中的代码:

border-radius: 50px;

设置字体大小:

添加一些滑动条:

更改对应按键和滑动条的对象名:

界面运行效果:

三、逻辑实现

这里在QT设计师界面跳转到槽函数:

对应按键的槽函数:

逻辑实现:

我们这个按键是用来控制LED灯开关的,所以这里的逻辑是按下按键LED图标变灭,然后再次按下按键LED灯图标变亮。

我们还能通过滑动条来改变LED灯的状态,所以这里需要使用到滑动条的槽函数:

代码实现:

LEDCotrol.h:

#ifndef LEDCOTROL_H
#define LEDCOTROL_H
#include <QWidget>
#include <QPushButton>
namespace Ui {
class LEDCotrol;
}
class LEDCotrol : public QWidget
{
    Q_OBJECT
    /*各个LED状态变量*/
    bool led1status;
    bool led2status;
    bool led3status;
    bool led4status;
    void AllLEDInit();//LED状态初始化
    void LEDStatusSet(QPushButton* button, QString path);//LED状态设置函数
public:
    explicit LEDCotrol(QWidget *parent = nullptr);
    ~LEDCotrol();
private slots:
    void on_LED1_clicked();
    void on_LED2_clicked();
    void on_LED4_clicked();
    void on_LED3_clicked();
    void on_horizontalSlider_valueChanged(int value);
    void on_horizontalSlider_3_valueChanged(int value);
    void on_horizontalSlider_4_valueChanged(int value);
    void on_horizontalSlider_2_valueChanged(int value);
private:
    Ui::LEDCotrol *ui;
};
#endif // LEDCOTROL_H

LEDCotrol.cpp:

#include "LEDCotrol.h"
#include "ui_LEDCotrol.h"
#include <QIcon>
#include <QPixmap>
#include <QDebug>
LEDCotrol::LEDCotrol(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::LEDCotrol)
{
    ui->setupUi(this);
    /*全部LED初始化*/
    AllLEDInit();
}
/*全部LED初始化*/
void LEDCotrol::AllLEDInit()
{
    /*LED状态初始化*/
    led1status = true;
    led2status = true;
    led3status = true;
    led4status = true;
    /*LED1*/
    QPixmap pixmap(":/ICon/LEDOFF.png");  // 加载背景图像
    QIcon icon(pixmap.scaled(QSize(127, 150), Qt::KeepAspectRatio));  // 设置图像大小与按钮相同,并保持纵横比
    ui->LED1->setIcon(icon);//关闭LED
    ui->LED1->setIconSize(QSize(127, 150));  // 设置图标的大小与按钮相同
    /*LED2*/
    ui->LED2->setIcon(icon);//关闭LED
    ui->LED2->setIconSize(QSize(127, 150));  // 设置图标的大小与按钮相同
    /*LED3*/
    ui->LED3->setIcon(icon);//关闭LED
    ui->LED3->setIconSize(QSize(127, 150));  // 设置图标的大小与按钮相同
    /*LED4*/
    ui->LED4->setIcon(icon);//关闭LED
    ui->LED4->setIconSize(QSize(127, 150));  // 设置图标的大小与按钮相同
}
/*
 * 设置一个LED的状态
 * button:要设置的LED按键
 * path:图片路径
*/
void LEDCotrol::LEDStatusSet(QPushButton* button, QString path)
{
    QPixmap pixmap(path);  // 加载背景图像
    QIcon icon(pixmap.scaled(QSize(127, 150), Qt::KeepAspectRatio));  // 设置图像大小与按钮相同,并保持纵横比
    button->setIcon(icon);//关闭LED
    button->setIconSize(QSize(127, 150));  // 设置图标的大小与按钮相同
}
/*LED1按键槽函数*/
void LEDCotrol::on_LED1_clicked()
{
    led1status = !led1status;
    if(led1status)
    {
        LEDStatusSet(ui->LED1, ":/ICon/LEDOFF.png");
        ui->horizontalSlider->setValue(0);
    }
    else
    {
        LEDStatusSet(ui->LED1, ":/ICon/LEDON.png");
        ui->horizontalSlider->setValue(100);
    }
}
/*LED2按键槽函数*/
void LEDCotrol::on_LED2_clicked()
{
    led2status = !led2status;
    if(led2status)
    {
        LEDStatusSet(ui->LED2, ":/ICon/LEDOFF.png");
        ui->horizontalSlider_2->setValue(0);
    }
    else
    {
        LEDStatusSet(ui->LED2, ":/ICon/LEDON.png");
        ui->horizontalSlider_2->setValue(100);
    }
}
/*LED4按键槽函数*/
void LEDCotrol::on_LED4_clicked()
{
    led3status = !led3status;
    if(led3status)
    {
        LEDStatusSet(ui->LED4, ":/ICon/LEDOFF.png");
        ui->horizontalSlider_4->setValue(0);
    }
    else
    {
        LEDStatusSet(ui->LED4, ":/ICon/LEDON.png");
        ui->horizontalSlider_4->setValue(100);
    }
}
/*LED3按键槽函数*/
void LEDCotrol::on_LED3_clicked()
{
    led4status = !led4status;
    if(led4status)
    {
        LEDStatusSet(ui->LED3, ":/ICon/LEDOFF.png");
        ui->horizontalSlider_3->setValue(0);
    }
    else
    {
        LEDStatusSet(ui->LED3, ":/ICon/LEDON.png");
        ui->horizontalSlider_3->setValue(100);
    }
}
LEDCotrol::~LEDCotrol()
{
    delete ui;
}
/*滑块1槽函数:控制LED1*/
void LEDCotrol::on_horizontalSlider_valueChanged(int value)
{
    if(value == 0)
    {
        led1status = true;
        LEDStatusSet(ui->LED1, ":/ICon/LEDOFF.png");
    }
    else if(value == 99)
    {
        led1status = false;
        LEDStatusSet(ui->LED1, ":/ICon/LEDON.png");
    }
}
/*滑块3槽函数:控制LED3*/
void LEDCotrol::on_horizontalSlider_3_valueChanged(int value)
{
    if(value == 0)
    {
        led3status = true;
        LEDStatusSet(ui->LED3, ":/ICon/LEDOFF.png");
    }
    else if(value == 99)
    {
        led3status = false;
        LEDStatusSet(ui->LED3, ":/ICon/LEDON.png");
    }
}
/*滑块4槽函数:控制LED4*/
void LEDCotrol::on_horizontalSlider_4_valueChanged(int value)
{
    if(value == 0)
    {
        led4status = true;
        LEDStatusSet(ui->LED4, ":/ICon/LEDOFF.png");
    }
    else if(value == 99)
    {
        led4status = false;
        LEDStatusSet(ui->LED4, ":/ICon/LEDON.png");
    }
}
/*滑块2槽函数:控制LED2*/
void LEDCotrol::on_horizontalSlider_2_valueChanged(int value)
{
    if(value == 0)
    {
        led2status = true;
        LEDStatusSet(ui->LED2, ":/ICon/LEDOFF.png");
    }
    else if(value == 99)
    {
        led2status = false;
        LEDStatusSet(ui->LED2, ":/ICon/LEDON.png");
    }
}

完成滑动条和LED状态的同步。

总结

本篇文章就讲解到这里,下篇文章将完成其他的界面布局和功能。


相关实践学习
消息队列RocketMQ版:基础消息收发功能体验
本实验场景介绍消息队列RocketMQ版的基础消息收发功能,涵盖实例创建、Topic、Group资源创建以及消息收发体验等基础功能模块。
消息队列 MNS 入门课程
1、消息队列MNS简介 本节课介绍消息队列的MNS的基础概念 2、消息队列MNS特性 本节课介绍消息队列的MNS的主要特性 3、MNS的最佳实践及场景应用 本节课介绍消息队列的MNS的最佳实践及场景应用案例 4、手把手系列:消息队列MNS实操讲 本节课介绍消息队列的MNS的实际操作演示 5、动手实验:基于MNS,0基础轻松构建 Web Client 本节课带您一起基于MNS,0基础轻松构建 Web Client
相关文章
|
1天前
|
关系型数据库 MySQL Linux
Linux系统如何设置自启动服务在MySQL数据库启动后执行?
【10月更文挑战第25天】Linux系统如何设置自启动服务在MySQL数据库启动后执行?
20 3
|
6天前
|
关系型数据库 MySQL Linux
基于阿里云服务器Linux系统安装Docker完整图文教程(附部署开源项目)
基于阿里云服务器Linux系统安装Docker完整图文教程(附部署开源项目)
79 2
|
27天前
|
存储 数据可视化 Java
震惊!如何在linux下部署项目,部署/运行jar包 超详细保姆级教程!
如何在Linux系统下部署和运行Java项目jar包,包括传输文件到Linux、使用nohup命令运行jar包、查看端口状态、杀死进程和查看项目运行状态,以及如何解决“没有主清单属性”的错误。
181 1
震惊!如何在linux下部署项目,部署/运行jar包 超详细保姆级教程!
|
18天前
|
Ubuntu Linux 编译器
Linux/Ubuntu下使用VS Code配置C/C++项目环境调用OpenCV
通过以上步骤,您已经成功在Ubuntu系统下的VS Code中配置了C/C++项目环境,并能够调用OpenCV库进行开发。请确保每一步都按照您的系统实际情况进行适当调整。
161 3
|
18天前
|
算法 Java Linux
java制作海报五:java 后端整合 echarts 画出 折线图,项目放在linux上,echarts图上不显示中文,显示方框口口口
这篇文章介绍了如何在Java后端整合ECharts库来绘制折线图,并讨论了在Linux环境下ECharts图表中文显示问题。
32 1
|
26天前
|
前端开发 JavaScript 应用服务中间件
linux安装nginx和前端部署vue项目(实际测试react项目也可以)
本文是一篇详细的教程,介绍了如何在Linux系统上安装和配置nginx,以及如何将打包好的前端项目(如Vue或React)上传和部署到服务器上,包括了常见的错误处理方法。
69 0
linux安装nginx和前端部署vue项目(实际测试react项目也可以)
|
28天前
|
Ubuntu Linux
Linux实践|设置静态 IP 地址
Linux实践|设置静态 IP 地址
45 0
Linux实践|设置静态 IP 地址
|
24天前
|
Linux 应用服务中间件 nginx
Linux下权限设置之suid、sgid、sticky
Linux下权限设置之suid、sgid、sticky
|
2月前
|
NoSQL Linux Redis
Linux Redis 服务设置开机自启动
【9月更文挑战第2天】在 Linux 系统中,可使用两种方法设置 Redis 开机自启动:一是通过创建 `redis.service` 文件并利用 systemd 进行管理,包括定义服务参数和启动脚本;二是编辑 `/etc/rc.local` 文件,在其中添加启动命令。推荐使用 systemd 方法,因为它更符合现代 Linux 系统的设计理念。设置完成后,可通过 `sudo systemctl status redis.service` 检查服务状态。
173 3
|
2月前
|
Linux Shell
10-8|linux date设置时间
10-8|linux date设置时间