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

news2025/1/12 1:44:49

文章目录

  • 前言
  • 一、LED界面布局准备工作
  • 二、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状态的同步。
在这里插入图片描述

总结

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

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

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

相关文章

gcc及其相关知识

gcc及其相关知识

目录 gcc工作流程 静态库的生成和使用&#xff08;该部分使用g进行代码的编译。 若使用gcc&#xff0c;也类似&#xff09; 动态库的制作和使用&#xff08;此处用gcc&#xff0c;g类似&#xff09; 动态库的命名规则 动态库的制作 动态库的使用 动态库和静态库的优缺点 静…
阅读更多...
搭建Synopsis 数字IC IDE开发化境

搭建Synopsis 数字IC IDE开发化境

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

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

本文分析一些经典的CAN总线现场故障。 1、CAN总线的常见故障 CAN总线错误分析与解决 当CAN总线出现故障或数据传输异常时，往往会出现多种奇怪的故障现象，如仪表板显示异常，车辆无法启动，启动后无法熄灭，车辆动力性能下降，某些电控系统功能失等。 这是因为相关数据或信息…
阅读更多...
第二十章 重要HL7操作场景 - 传入消息的双 ACK 序列

第二十章 重要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框架),同时打包,同时部署 优点:便于管理,减少开发、维护、运维成…
阅读更多...
GPT内功心法：搜索思维到GPT思维的转换

GPT内功心法：搜索思维到GPT思维的转换

大家好，我是herosunly。985院校硕士毕业，现担任算法研究员一职，热衷于机器学习算法研究与应用。曾获得阿里云天池比赛第一名，CCF比赛第二名，科大讯飞比赛第三名。拥有多项发明专利。对机器学习和深度学习拥有自己独到的见解。曾经辅导过若干个非计算机专业的学生进入到算法…
阅读更多...
2023国赛数学建模C题思路分析

2023国赛数学建模C题思路分析

文章目录 0 赛题思路1 竞赛信息2 竞赛时间3 建模常见问题类型3.1 分类问题3.2 优化问题3.3 预测问题3.4 评价问题 4 建模资料 0 赛题思路 &#xff08;赛题出来以后第一时间在CSDN分享&#xff09; https://blog.csdn.net/dc_sinor?typeblog 1 竞赛信息 全国大学生数学建模…
阅读更多...
div 中元素居中的N种常用方法

div 中元素居中的N种常用方法

本文主要记录几种常用的div盒子水平垂直都居中的方法。本文主要参考了该篇博文并实践加以记录说明以加深理解记忆 css之div盒子居中常用方法大全 本文例子使用的 html body结构下的div 盒子模型如下&#xff1a; <body><div class"container"><div c…
阅读更多...
docker desktop搭建 nginx

docker desktop搭建 nginx

【docker 桌面版】windows 使用 docker 搭建 nginx 拉取 nginx 镜像 docker pull nginx运行容器 docker run -d -p 80:8081 --name nginx nginx本地磁盘创建 nginx 目录 D:\DockerRep\nginx复制 docker 中的 nginx 配置文件 查看运行的容器 docker ps -a docker cp 9f0f82d66dd…
阅读更多...
点亮你的第一颗Led灯

点亮你的第一颗Led灯

1、&#x1f4d5;前言 该系列文章用于记录个人学习stm32单片机的过程&#xff0c;全文搭配图文解说&#xff0c;零基础的萌新也能读懂&#xff0c;欢迎指导讨论~ 2、&#x1f4e6;准备材料 2.1、&#x1f4dd;硬件材料清单 面包板1块 PWLINK PowerWriter仿真器1个 杜…
阅读更多...
2023/8/12总结

2023/8/12总结

增加了管理员功能点&#xff1a;&#xff08;管理标签和分类&#xff09; 另外加了一个转换成pdf的功能 主要是通过wkhtmltopdf实现的&#xff0c;之前看过很多说用adobe的还有其他但是都没成功。 然后就是在学习websocket和协同过滤算法实现&#xff0c;还只是初步了解了这些。…
阅读更多...
【C语言】自定义实现strlen函数的3种方法

【C语言】自定义实现strlen函数的3种方法

大家好&#xff0c;我是苏貝&#xff0c;本篇博客带大家了解C语言中自定义实现strlen函数的3种方法&#xff0c;如果大家觉得我写的不错的话&#xff0c;可以给我一个赞&#x1f44d;吗&#xff0c;感谢❤️ 在自定义实现strlen函数之前&#xff0c;我们简单的介绍一下strlen函…
阅读更多...
2023 年第八场牛客多校题解

2023 年第八场牛客多校题解

A Alive Fossils 题意&#xff1a;依次举办 n n n 场多校&#xff0c;每场多校有一些出题人。问哪些出题人每场都出题了。 解法&#xff1a;用 set 维护下一直在出题的人即可。 B Bloodline Counter 题意&#xff1a;求 n n n 个点的竞赛图中最大环大小恰好为 k k k 的方…
阅读更多...
【国赛清单】2023全国大学生电赛综合测试【总结】

【国赛清单】2023全国大学生电赛综合测试【总结】

综合测评简介 &#xff08;1&#xff09;综合测评是全国大学生电子设计竞赛评审工作中非常重要的一个环节&#xff0c;是“一次竞赛二级评审”工作中全国专家组评审工作的一部分。 &#xff08;2&#xff09;测试对象为赛区推荐上报全国评奖的优秀参赛队全体队员&#xff0c;…
阅读更多...
找不到资产文件project.assets.json

找不到资产文件project.assets.json

NuGet 在“obj”文件夹中写入名为 project.assets.json 的文件&#xff0c;.NET SDK 使用该文件来获取有关要传递到编译器的包的信息 。 如果在生成过程中找不到资产文件 project.assets.json&#xff0c;则会发生此错误。 1.执行命令的方式解决 点击工具&#xff0c;分别展开命…
阅读更多...
实例 -- Loadrunner实现Android / IOS 手机APP压力测试

实例 -- Loadrunner实现Android / IOS 手机APP压力测试

随着手机APP用户量的增大&#xff0c;大的手机APP一般都需要进行压力测试&#xff0c;这几天用了Loadrunner 12进行了手机APP的压力测试&#xff0c;整理了下&#xff0c;大家可以参考参考怎样给Andorid / IOS手机APP进行压力测试&#xff0c;以下是操作实例。 先前我的一个帖…
阅读更多...
论文浅尝 | CI4MRC：基于因果推断去除机器阅读理解中的名字偏差

论文浅尝 | CI4MRC：基于因果推断去除机器阅读理解中的名字偏差

笔记整理&#xff1a;朱珈徵&#xff0c;天津大学硕士&#xff0c;研究方向&#xff1a;问答 链接&#xff1a;https://aclanthology.org/2023.findings-acl.812/ 动机 机器阅读理解&#xff08;Machine Reading Comprehension&#xff0c;MRC&#xff09;是根据给定的文章回答…
阅读更多...
linux 命令- systemctl

linux 命令- systemctl

systemctl 参数说明 1、使用语法 用法&#xff1a;systemctl [OPTIONS…] {COMMAND} … 2 、参数说明 参数参数说明start立刻启动后面接的unitstop立刻关闭后面接的unitrestart立刻关闭后启动后面接的unit&#xff0c;亦即执行stop再start的意思reload不关闭后面接的unit的…
阅读更多...
从零开始实现一个玩具版浏览器渲染引擎

从零开始实现一个玩具版浏览器渲染引擎

前言 浏览器渲染原理作为前端必须要了解的知识点之一&#xff0c;在面试中经常会被问到。在一些前端书籍或者培训课程里也会经常被提及&#xff0c;比如 MDN 文档中就有渲染原理的相关描述。 作为一名工作多年的前端&#xff0c;我对于渲染原理自然也是了解的&#xff0c;但是…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023