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

文章目录

  • 前言
  • 一、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状态的同步。
在这里插入图片描述

总结

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

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

微信小程序实现当前页面更新上一个页面

微信小程序实现当前页面更新上一个页面

日常项目中需要实现的一个价格脱敏功能&#xff1a;通过点击页面二中的查看完整信息 点击回退按钮实现页面一中的价格显露出来 通过查询了大量资料发现 大多数都是通过调用上一个接口的onload 或者onshow 实现视图更新 经测试后 发现 无法实现 只能更改数据 无法更新视图 实现…
阅读更多...
服务器如何防止cc攻击

服务器如何防止cc攻击

对于搭载网站运行的服务器来说&#xff0c;cc攻击应该并不陌生&#xff0c;特别是cc攻击的攻击门槛非常低&#xff0c;有个代理IP工具&#xff0c;有个cc攻击软件就可以轻易对任何网站发起攻击&#xff0c;那么服务器如何防止cc攻击?请看下面的介绍。 服务器如何防止cc攻击&a…
阅读更多...
使用MyEclipse如何部署Descriptor (XML)编辑器？

使用MyEclipse如何部署Descriptor (XML)编辑器？

Descriptor (XML) Editor编辑器包含了高级的XML编辑功能&#xff0c;在本文中您将了解到这些编辑功能、Web XML编辑等&#xff0c;此功能包含在MyEclipse中可用。 MyEclipse v2023.1.2离线版下载 1. Web XML 编辑器 MyEclipse Web XML编辑器包括高级XML编辑功能&#xff0c;…
阅读更多...
tkinter自定义控件：通过继承Frame实现Expander

tkinter自定义控件：通过继承Frame实现Expander

文章目录 继承Frame点击事件Add函数 tkinter系列&#xff1a; GUI初步&#x1f48e;布局&#x1f48e;绑定变量&#x1f48e;绑定事件&#x1f48e;消息框&#x1f48e;文件对话框Frame控件&#x1f48e;PanedWindow和notebook控件扫雷小游戏&#x1f48e;强行表白神器 和其他…
阅读更多...
【广州华锐视点】VR警务教育实训系统模拟真实场景进行实践训练

【广州华锐视点】VR警务教育实训系统模拟真实场景进行实践训练

随着科技的发展&#xff0c;虚拟现实技术在教育领域得到了广泛的应用。VR警务教育实训系统就是其中的一种应用&#xff0c;该系统由广州华锐互动开发&#xff0c;可以模拟真实的警务场景&#xff0c;让学生通过虚拟现实技术进行实践训练&#xff0c;提高学生的实践能力和技能水…
阅读更多...
如何让CSDN学习成就个人能力六边形全是100分：解析个人能力雷达图的窍门

如何让CSDN学习成就个人能力六边形全是100分：解析个人能力雷达图的窍门

&#x1f337;&#x1f341; 博主猫头虎 带您 Go to New World.✨&#x1f341; &#x1f984; 博客首页——猫头虎的博客&#x1f390; &#x1f433;《面试题大全专栏》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33a; &a…
阅读更多...
【STM32】利用CubeMX对FreeRTOS用按键控制任务

【STM32】利用CubeMX对FreeRTOS用按键控制任务

对于FreeRTOS中的操作&#xff0c;最常用的就是创建、删除、暂停和恢复任务。 此次实验目标&#xff1a; 1.创建任务一&#xff1a;LED1每间隔1秒闪烁一次&#xff0c;并通过串口打印 2.创建任务二&#xff1a;LED2每间隔0.5秒闪烁一次&#xff0c;并通过串口打印 3.创建任…
阅读更多...
阿里云FRP内网穿透挂载多台服务器

阿里云FRP内网穿透挂载多台服务器

1. FRP介绍 FRP (Fast Reverse Proxy) 是比较流行的一款。FRP 是一个免费开源的用于内网穿透的反向代理应用&#xff0c;它支持 TCP、UDP 协议&#xff0c; 也为 http 和 https 协议提供了额外的支持。你可以粗略理解它是一个中转站&#xff0c; 帮你实现 公网 ←→ FRP(服务器…
阅读更多...
Office doc training

Office doc training

1. Wordy文档: step 1.1 格式刷&#xff0c;字体(大小,下划线,背景色,字体颜色)&#xff0c;排版(对齐方式,标题,序号,行距离) step 1.2 插入表格&#xff0c;表格单元格的CRUD 操作例子: 2. Excel: step 2.1: 单元格格式( 文本&#xff0c;数值&#xff0c;边框&#xff0c;…
阅读更多...
MySQL卸载并重装指定版本

MySQL卸载并重装指定版本

MySQL卸载并重装制定版本 学习新的项目&#xff0c;发现之前的Navicat已经失去了与现有MySQL的链接&#xff0c;而且版本也不适合&#xff0c;为了少走弯路&#xff0c;准备直接重装相应版本的MySQL 卸载现有MySQL 停止windows的MySQL服务&#xff0c;【windowsR】打开运行框…
阅读更多...
SpringBoot请求响应

SpringBoot请求响应

简单参数 1. 原始方式获取请求参数 Controller方法形参中声明httpServletRequest对象 调用对象的getParameter参数名 RestController public class RequestController {RequestMapping("/simpleParam")public String simpleParam(HttpServletRequest request){Strin…
阅读更多...
SpringBoot概述及项目的创建使用

SpringBoot概述及项目的创建使用

文章目录 一. Spring Boot概述1. 什么是Spring Boot&#xff1f;2. Spring Boot的优点 二. Spring Boot项目的创建1. 使用IDEA创建1.1. 准备工作1.2. 创建运行Spring Boot项目1.3. 进行Web交互1.4. 目录工程介绍1.5. 项目快速添加依赖1.6. 防止配置文件乱码所需的配置1.7. Spri…
阅读更多...
Arcgis中POI找到建筑面内距离最近的标准地址通过模型构建器来实现

Arcgis中POI找到建筑面内距离最近的标准地址通过模型构建器来实现

背景 之前写过一篇文章 Arcgis通过矢量建筑面找到POI对应的标准地址 这里面的大致思路跟本篇文章是类似的&#xff0c;不过上一篇文章有部分有瑕疵&#xff0c;就是在POI去找建筑面内的标准地址时&#xff0c;找到的虽然是建筑面内的&#xff0c;但是不一定是距离最近的&#…
阅读更多...
C#__事件event的简单使用：工具人下楼问题

C#__事件event的简单使用：工具人下楼问题

// 工具人类 namespace DownStair {delegate void DownStairDelegate(); // 定义了一个下楼委托class ToolMan{public string Name { get; set; } // 声明工具人的名字属性// public DownStairDelegate downStairDelegate null; // 初始化委托downStair为空委托// 解决方案pu…
阅读更多...
【BASH】回顾与知识点梳理（二十七）

【BASH】回顾与知识点梳理（二十七）

【BASH】回顾与知识点梳理 二十七 二十七. 磁盘配额(Quota)27.1 磁盘配额 (Quota) 的应用与实作什么是 QuotaQuota 的一般用途Quota 的使用限制Quota 的规范设定项目 27.2 一个 XFS 文件系统的 Quota 实作范例实作 Quota 流程&#xff1a;设定账号实作 Quota 流程-1&#xff1a…
阅读更多...
iTOP-i.MX8M开发板添加USB网络设备驱动

iTOP-i.MX8M开发板添加USB网络设备驱动

选中支持 USB 网络设备驱动&#xff0c;如下图所示&#xff1a; [*] Device Drivers→ *- Network device support → USB Network Adapters→ {*} Multi-purpose USB Networking Framework 将光标移动到 save 保存&#xff0c;如下图所示&#xff1a; 保存到 arch/arm64/c…
阅读更多...
springboot工程集成前端编译包，用于uni-app webView工程，解决其需独立部署带来的麻烦，场景如页面-＞画布-＞图片-＞pdf

springboot工程集成前端编译包，用于uni-app webView工程，解决其需独立部署带来的麻烦，场景如页面-＞画布-＞图片-＞pdf

前端工程 访问方式 http://127.0.0.1:8080/context/frontEnd/index放行 public class SecurityConfig extends WebSecurityConfigurerAdapter { "/frontEnd/**",SysFrontEndController import lombok.extern.slf4j.Slf4j; import nl.basjes.shaded.org.springfram…
阅读更多...
Sentinel使用实例

Sentinel使用实例

不说了&#xff0c;直接上官方文档 https://github.com/alibaba/spring-cloud-alibaba/blob/master/spring-cloud-alibaba-examples/sentinel-example/sentinel-core-example/readme-zh.md Sentinel Example 项目说明 本项目演示如何使用 Sentinel starter 完成 Spring Clo…
阅读更多...
试岗第一天问题

试岗第一天问题

1、公司的一个项目拉下来 &#xff0c;npm i 不管用显示 后面百度 使用了一个方法 虽然解决 但是在增加别的依赖不行&#xff0c;后面发现是node版本过高&#xff0c;更换node版本解决。 2、使用插件动态的使数字从0到100&#xff08;vue-animate-number插件&#xff09; 第一…
阅读更多...
C++ 继承

C++ 继承

1.继承的概念及定义 定义 定义格式 继承关系和访问限定符 继承基类成员访问方式的变化 1. 基类private成员在派生类中无论以什么方式继承都是不可见的。这里的不可见是指基类的私有成员还是 被继承到了派生类对象中&#xff0c;但是语法上限制派生类对象不管在类里面还是类外面…
阅读更多...
最新文章

Copyright @ 2022~2023