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
相关文章
|
6天前
|
监控 Oracle 关系型数据库
Linux平台Oracle开机自启动设置
【11月更文挑战第8天】在 Linux 平台设置 Oracle 开机自启动有多种方法,本文以 CentOS 为例,介绍了两种常见方法:使用 `rc.local` 文件(较简单但不推荐用于生产环境)和使用 `systemd` 服务(推荐)。具体步骤包括编写启动脚本、赋予执行权限、配置 `rc.local` 或创建 `systemd` 服务单元文件,并设置开机自启动。通过 `systemd` 方式可以更好地与系统启动过程集成,更规范和可靠。
|
7天前
|
Oracle Ubuntu 关系型数据库
Linux平台Oracle开机自启动设置
【11月更文挑战第7天】本文介绍了 Linux 系统中服务管理机制,并详细说明了如何在使用 systemd 和 System V 的系统上设置 Oracle 数据库的开机自启动。包括创建服务单元文件、编辑启动脚本、设置开机自启动和启动服务的具体步骤。最后建议重启系统验证设置是否成功。
|
17天前
|
关系型数据库 MySQL Linux
Linux系统如何设置自启动服务在MySQL数据库启动后执行?
【10月更文挑战第25天】Linux系统如何设置自启动服务在MySQL数据库启动后执行?
63 3
|
3天前
|
网络协议 安全 Linux
Linux 上设置自己的公共时间服务器
Linux 上设置自己的公共时间服务器
12 0
|
1月前
|
Ubuntu Linux
Linux实践|设置静态 IP 地址
Linux实践|设置静态 IP 地址
62 0
Linux实践|设置静态 IP 地址
|
2月前
|
NoSQL 关系型数据库 Redis
mall在linux环境下的部署(基于Docker容器),Docker安装mysql、redis、nginx、rabbitmq、elasticsearch、logstash、kibana、mongo
mall在linux环境下的部署(基于Docker容器),docker安装mysql、redis、nginx、rabbitmq、elasticsearch、logstash、kibana、mongodb、minio详细教程,拉取镜像、运行容器
mall在linux环境下的部署(基于Docker容器),Docker安装mysql、redis、nginx、rabbitmq、elasticsearch、logstash、kibana、mongo
|
1月前
|
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` 检查服务状态。
298 3
|
2月前
|
Linux Shell
10-8|linux date设置时间
10-8|linux date设置时间
|
2月前
|
消息中间件 Linux
linux之centos安装rabbitmq
linux之centos安装rabbitmq