PROYECTO II A 2024 » Grupo 3A-2024

{{thumbnail(AquaPi.png, size=300, title=Logo)}}

h2. Índice

* [[Introducción]]

* [[Objetivos]]

* [[Organización y planificación]]

* [[Interfaz]]

---

h1. Código e implementación

{{collapse(Código interfaz gráfica)

<pre><code class="ruby">

from PySide6.QtWidgets import QApplication, QLabel, QLineEdit, QPushButton, QVBoxLayout, QHBoxLayout, QWidget, QMessageBox, QStackedWidget, QSpacerItem, QSizePolicy, QLayout

from PySide6.QtGui import QPixmap, QIntValidator, QImage

from PySide6.QtCore import Qt, QUrl, QThread, Signal

from PySide6.QtWebEngineWidgets import QWebEngineView

import socket

import sys

import re

import cv2

import numpy as np

import time

from queue import Queue

class DataReceiver(QThread):

    # Señales para actualizar los valores en la interfaz

    data_received = Signal(float, float, int)

    def __init__(self, host, port):

        super().__init__()

        self.host = host

        self.port = port

        self.running = True

    def run(self):

        try:

            # Conexión al servidor

            s = socket.socket(socket.AF_INET, socket.SOCK_STREAM)

            s.connect((self.host, self.port))

            while self.running:

                # Recibir datos del servidor

                data = s.recv(1024)

                if not data:

                    break

                # Decodificar y procesar los datos

                decoded_data = data.decode('utf-8').strip()

                try:

                    # Validar que los datos contengan exactamente dos comas (indicativo del formato esperado)

                    if decoded_data.count(',') == 2:

                        temp, ph, light = map(float, decoded_data.split(','))

                        self.data_received.emit(temp, ph, int(light))

                    else:

                        # Ignorar los datos que no tienen el formato correcto

                        print("")

                except ValueError:

                    # Manejar cualquier error inesperado en el procesamiento

                    print("")

        except Exception as e:

            print("Error en la conexión:", e)

    def stop(self):

        self.running = False

        self.quit()

class VideoReceiver(QThread):

    frame_received = Signal(QImage)

    def __init__(self, host, port):

        super().__init__()

        self.host = host

        self.port = port

        self.running = True

    def run(self):

        try:

            s = socket.socket(socket.AF_INET, socket.SOCK_STREAM)

            s.settimeout(5)  # Tiempo de espera de 5 segundos

            s.connect((self.host, self.port))

            while self.running:

                # Leer el tamaño del frame (asegúrate de leer siempre 4 bytes)

                size_data = b""

                while len(size_data) < 4:

                    chunk = s.recv(4 - len(size_data))

                    if not chunk:

                        raise ConnectionError("Conexión cerrada por el servidor.")

                    size_data += chunk

                frame_size = int.from_bytes(size_data, 'big')

                # Recibir el frame completo

                frame_data = b""

                while len(frame_data) < frame_size:

                    chunk = s.recv(min(4096, frame_size - len(frame_data)))

                    if not chunk:

                        raise ConnectionError("Conexión cerrada por el servidor.")

                    frame_data += chunk

                # Convertir a imagen

                np_array = np.frombuffer(frame_data, dtype=np.uint8)

                frame = cv2.imdecode(np_array, cv2.IMREAD_COLOR)

                if frame is not None:

                    rgb_frame = cv2.cvtColor(frame, cv2.COLOR_BGR2RGB)

                    height, width, channel = rgb_frame.shape

                    q_image = QImage(rgb_frame.data, width, height, QImage.Format_RGB888)

                    self.frame_received.emit(q_image)

        except Exception as e:

            print("Error en la recepción de video:", e)

        finally:

            s.close()

    def stop(self):

        self.running = False

        self.wait()

class EnviarMensaje(QThread):

    """

    Clase para enviar mensajes al servidor utilizando una conexión persistente

    y una cola para optimizar el envío.

    """

    def __init__(self, host, port):

        super().__init__()

        self.host = host

        self.port = port

        self.running = True

        self.queue = Queue()  # Cola para almacenar mensajes a enviar

        self.socket = None    # Conexión persistente con el servidor

    def run(self):

        """

        Mantiene una conexión persistente con el servidor y envía los mensajes

        de la cola según se van añadiendo.

        """

        try:

            # Crear la conexión persistente con el servidor

            self.socket = socket.socket(socket.AF_INET, socket.SOCK_STREAM)

            self.socket.settimeout(5)

            self.socket.connect((self.host, self.port))

            print(f"Conexión persistente establecida con {self.host}:{self.port}")

            while self.running:

                try:

                    # Obtener un mensaje de la cola (con timeout para evitar bloqueos infinitos)

                    mensaje = self.queue.get(timeout=1)

                    # Si se recibe None, indica que el hilo debe detenerse

                    if mensaje is None:

                        break

                    # Enviar el mensaje al servidor

                    self.socket.sendall(mensaje.encode('utf-8'))

                    print(f"Mensaje enviado: {mensaje}")

                except Exception as e:

                    print(f"Ante la espera: {e}")

                    continue

        except Exception as e:

            print(f"Error al establecer conexión persistente: {e}")

        finally:

            # Asegurarse de cerrar la conexión al finalizar

            if self.socket:

                self.socket.close()

                print("Conexión cerrada.")

    def enviar_mensaje(self, mensaje):

        """

        Coloca un mensaje en la cola para ser enviado.

        """

        self.queue.put(mensaje)

    def stop(self):

        """

        Detiene el hilo limpiamente.

        """

        self.running = False

        self.queue.put(None)  # Coloca un marcador para desbloquear el bucle

        self.wait()

class AquaPiApp(QWidget):

    def __init__(self):

        super().__init__()

        self.setWindowTitle("AquaPi")

        self.setFixedSize(346.32, 750)

        self.rangos = {'temperatura': {'min': 1.0, 'max': 100.0}, 'ph': {'min': 1.0, 'max': 100.0}, 'luz': {'min': 1.0, 'max': 200.0}}

        self.estado_parametros = {"temperatura": True, "ph": True, "luz": True}  # True = dentro del rango  

        self.cargar_estilos()

        self.stack = QStackedWidget(self)

        self.setLayout(QVBoxLayout())

        self.layout().setContentsMargins(0, 0, 0, 0)

        self.layout().setSpacing(0)

        self.layout().addWidget(self.stack)

        # Crear widgets de monitoreo una sola vez

        self.temp_label = QLabel("0°C")

        self.ph_label = QLabel("0.0")

        self.luz_label = QLabel("0%")

        self.data_receiver = None

        self.mostrar_pantalla_conexion()

    def mostrar_pantalla_conexion(self):

        layout = QVBoxLayout()

        titulo = QLabel("AQUA PI")

        titulo.setAlignment(Qt.AlignCenter)

        titulo.setObjectName("titulo_aquapi")

        entry_ip = QLineEdit()

        entry_ip.setObjectName("texto_ruta")

        entry_ip.setPlaceholderText("Ingrese la IP del servidor...")

        entry_ip.returnPressed.connect(lambda: self.verificar_conexion(entry_ip.text()))

        btn_conexion = QPushButton("Establecer Conexión")

        btn_conexion.setObjectName("boton_conectar")

        btn_conexion.clicked.connect(lambda: self.verificar_conexion(entry_ip.text()))

        layout.addWidget(titulo)

        layout.addWidget(entry_ip)

        layout.addWidget(btn_conexion)

        layout.setAlignment(Qt.AlignTop)

        pantalla_conexion = QWidget()

        pantalla_conexion.setLayout(layout)

        self.stack.addWidget(pantalla_conexion)

        self.stack.setCurrentWidget(pantalla_conexion)

    def verificar_conexion(self, ip):

        if not self.validar_ip(ip):            

            QMessageBox.critical(self, "Error de IP", "La IP ingresada no es válida.")

            return

        try:

            # Iniciar recepción de datos

            self.data_receiver = DataReceiver(ip, 5560)

            self.data_receiver.data_received.connect(self.actualizar_datos)  # Conexión correcta

            self.data_receiver.start()

            # Iniciar recepción de video

            self.video_receiver = VideoReceiver(ip, 5561)

            self.video_receiver.frame_received.connect(self.actualizar_video)

            self.video_receiver.start()

            # Crear la instancia de EnviarMensaje

            self.enviar_mensajes = EnviarMensaje(ip, 5562)

            self.enviar_mensajes.start()

            # Mostrar la pantalla principal

            self.mostrar_pantalla_monitoreo()

        except Exception as e:

            QMessageBox.critical(self, "Error de Conexión", f"No se pudo conectar al servidor: {e}")

    def validar_ip(self, ip):

        # Verificar si la IP ingresada tiene un formato válido

        ip_regex = re.compile(r"^(?:[0-9]{1,3}\.){3}[0-9]{1,3}$")

        return ip_regex.match(ip) is not None

    def mostrar_pantalla_monitoreo(self):

        # Verificar si la pantalla de monitoreo ya existe

        if hasattr(self, 'pantalla_monitoreo'):

            self.stack.setCurrentWidget(self.pantalla_monitoreo)

            return

        # Crear layout para la pantalla de monitoreo

        layout = QVBoxLayout()

        layout.setContentsMargins(0, 0, 0, 0)

        # Crear título

        layout.addItem(QSpacerItem(20, 49, QSizePolicy.Minimum, QSizePolicy.Fixed))

        titulo_label = QLabel("AQUAPI", self)

        titulo_label.setAlignment(Qt.AlignCenter)

        titulo_label.setObjectName("titulo_pantalla")

        layout.addWidget(titulo_label)

        layout.addItem(QSpacerItem(20, 49, QSizePolicy.Minimum, QSizePolicy.Fixed))

        # Crear etiquetas para mostrar los valores (ya inicializadas)

        self.temp_label = self.agregar_cuadro(layout, "assets/temperatura.png", "Temperatura", "0°C")

        layout.addItem(QSpacerItem(20, 10))

        self.ph_label = self.agregar_cuadro(layout, "assets/ph.png", "pH", "0.0")

        layout.addItem(QSpacerItem(20, 10))

        self.luz_label = self.agregar_cuadro(layout, "assets/luz.png", "Luz", "0%")

        layout.addItem(QSpacerItem(20, 88))

        # Crear barra inferior con botones

        btn_transmision = self.img_button(texto="Transmision", ruta_imagen="assets/transmision.png", ancho=120, alto=140, callback=self.mostrar_pantalla_transmision)

        btn_config = self.img_button(texto="Configuración", ruta_imagen="assets/config.png", ancho=120, alto=140, callback=self.mostrar_pantalla_config)

        rectangulo_inferior = QWidget(self)

        rectangulo_inferior.setObjectName("rectangulo")

        rectangulo_inferior.setFixedHeight(79)

        rectangulo_layout = QHBoxLayout(rectangulo_inferior)

        rectangulo_layout.setContentsMargins(0, 0, 0, 0)

        rectangulo_layout.addWidget(btn_transmision)

        rectangulo_layout.addWidget(btn_config)

        layout.addWidget(rectangulo_inferior)

        # Guardar la pantalla de monitoreo en un atributo

        self.pantalla_monitoreo = QWidget()

        self.pantalla_monitoreo.setLayout(layout)

        self.stack.addWidget(self.pantalla_monitoreo)

        self.stack.setCurrentWidget(self.pantalla_monitoreo)

    def actualizar_datos(self, temp, ph, light):

        # Actualizar valores

        self.temp_label.setText(f"{temp:.2f}°C")

        self.ph_label.setText(f"{ph:.2f}")

        self.luz_label.setText(f"{light}%")

        # Validar y cambiar colores

        self.validar_y_cambiar_color(self.temp_label, "temperatura", temp, self.parametro_temp_label)

        # Validar y actualizar los colores para pH

        self.validar_y_cambiar_color(self.ph_label, "ph", ph, self.parametro_ph_label)

        # Validar y actualizar los colores para luz

        self.validar_y_cambiar_color(self.luz_label, "luz", light, self.parametro_luz_label)

    def validar_y_cambiar_color(self, label, parametro, valor, parametro_label):

        """

        Valida el valor y cambia el color del frame y del label del parámetro si el valor no está en rango.

        Envía un mensaje solo si el estado cambia (de dentro a fuera de rango o viceversa).

        """

        valor_numerico = self.convertir_a_numero(valor)

        dentro_de_rango = valor_numerico is not None and self.validar_valor(parametro, valor_numerico)

        # Si el estado cambia, actualizar el estado y enviar el mensaje correspondiente

        if self.estado_parametros[parametro] != dentro_de_rango and parametro == "ph":

            self.estado_parametros[parametro] = dentro_de_rango

            mensaje = "RELAY_ON" if not dentro_de_rango else "RELAY_OFF"

            self.enviar_mensajes.enviar_mensaje(mensaje)

        # Cambiar estilos visuales según el estado

        if dentro_de_rango:

            label.parentWidget().setStyleSheet(

                "border: 8px solid; border-radius: 20px; background-color: #564D80; border-color: #564D80;"

            )

            parametro_label.setStyleSheet("color: white; font-size: 21px")

        else:

            label.parentWidget().setStyleSheet(

                "border: 8px solid; border-radius: 20px; background-color: #984F4F; border-color: #984F4F;"

            )

            parametro_label.setStyleSheet("color: #EF5E5E; font-size: 21px")

    def validar_valor(self, parametro, valor):

        """Valida si el valor está dentro del rango configurado para el parámetro."""

        # Convertimos el parámetro a minúsculas para asegurar consistencia

        parametro_lower = parametro.lower()

        # Verificamos si el parámetro existe en los rangos

        if parametro_lower not in self.rangos:

            return False

        # Accedemos al rango correspondiente

        rango = self.rangos[parametro_lower]  # Asegurando que se use la clave correcta

        # Verificamos que el valor esté en el formato adecuado (convertirlo a float si es necesario)

        try:

            valor = float(valor)  # Asegúrate de que 'valor' sea un número

        except ValueError:

            print(f"Valor no válido: {valor}")

            return False

        # Comprobamos si el valor está fuera del rango

        if valor < rango['min'] or valor > rango['max']:

            return False  # Valor fuera de rango

        else:

            return True  # Valor dentro del rango

    def closeEvent(self, event):

        if self.data_receiver:

            self.data_receiver.stop()

        if hasattr(self, 'video_receiver') and self.video_receiver:

            self.video_receiver.stop()

        super().closeEvent(event)

    def actualizar_video(self, frame):

        if self.video_label:

            self.video_label.setPixmap(QPixmap.fromImage(frame))

    def mostrar_pantalla_transmision(self):

        layout = QVBoxLayout()

        layout.setContentsMargins(0, 0, 0, 0)

        layout.addItem(QSpacerItem(20, 49, QSizePolicy.Minimum, QSizePolicy.Fixed))

        # Título de la pantalla

        titulo_label = QLabel("AQUAPI", self)

        titulo_label.setAlignment(Qt.AlignCenter)

        titulo_label.setObjectName("titulo_pantalla")

        layout.addWidget(titulo_label)

        # Espaciado debajo del título

        layout.addItem(QSpacerItem(20, 134, QSizePolicy.Minimum, QSizePolicy.Fixed))

        self.video_label = QLabel(self)

        self.video_label.setFixedSize(318, 242)

        self.video_label.setStyleSheet("background-color: black;")

        self.video_label.setAlignment(Qt.AlignCenter)  # Asegura que el contenido del QLabel esté centrado

        layout.addWidget(self.video_label, alignment=Qt.AlignCenter)

        # Espaciado debajo del rectángulo

        layout.addItem(QSpacerItem(0, 206, QSizePolicy.Minimum, QSizePolicy.Fixed))

        # Botones de configuración y monitoreo

        btn_config = self.img_button(texto="Configuración", ruta_imagen="assets/config.png", ancho=120, alto=140, callback=self.mostrar_pantalla_config)

        btn_monitoreo = self.img_button(texto="Monitoreo", ruta_imagen="assets/monitoreo.png", ancho=120, alto=140, callback=self.mostrar_pantalla_monitoreo)

        # Rectángulo inferior con los botones

        rectangulo_inferior = QWidget(self)

        rectangulo_inferior.setObjectName("rectangulo")

        rectangulo_inferior.setFixedHeight(79)

        rectangulo_layout_inferior = QHBoxLayout(rectangulo_inferior)

        rectangulo_layout_inferior.setContentsMargins(0, 0, 0, 0)

        rectangulo_layout_inferior.addWidget(btn_config)

        rectangulo_layout_inferior.addItem(QSpacerItem(4, 0, QSizePolicy.Minimum, QSizePolicy.Fixed))

        rectangulo_layout_inferior.addWidget(btn_monitoreo)

        rectangulo_layout_inferior.addItem(QSpacerItem(14, 0, QSizePolicy.Minimum, QSizePolicy.Fixed))

        layout.addWidget(rectangulo_inferior)

        # Crear el widget final y agregarlo al stack

        pantalla_transmision = QWidget()

        pantalla_transmision.setLayout(layout)

        self.stack.addWidget(pantalla_transmision)

        # Mostrar la pantalla

        self.stack.setCurrentWidget(pantalla_transmision)

    def convertir_a_numero(self, valor):

        """

        Convierte un valor a un número, eliminando caracteres extra como '°C' o '%'.

        Si no es posible convertirlo, devuelve None.

        """

        # Si el valor ya es un número, simplemente devolverlo

        if isinstance(valor, (int, float)):

            return valor

        # Si es una cadena, intentar convertirla

        try:

            if isinstance(valor, str):

                # Eliminar caracteres específicos como '°C' o '%'

                if '°C' in valor:

                    valor = valor.replace('°C', '').strip()

                if '%' in valor:

                    valor = valor.replace('%', '').strip()

                # Convertir la cadena a un número

                return float(valor)

        except (ValueError, TypeError):

            print("Error al convertir el valor:", valor)

            return None

    def img_button(self, texto, ruta_imagen, ancho=120, alto=140, callback=None):

        boton = QPushButton()

        boton.setObjectName("boton_accion")

        boton.setFixedSize(ancho, alto)

        layout = QVBoxLayout(boton)

        layout.setContentsMargins(0, 0, 0, 0)

        layout.setSpacing(0)

        label_imagen = QLabel()

        pixmap = QPixmap(ruta_imagen).scaled(50, 50, Qt.KeepAspectRatio, Qt.SmoothTransformation)

        label_imagen.setPixmap(pixmap)

        label_imagen.setAlignment(Qt.AlignCenter)

        label_imagen.setMinimumSize(31, 31)

        label_imagen.setStyleSheet("background-color: none")

        layout.addWidget(label_imagen)

        label_texto = QLabel(texto)

        label_texto.setAlignment(Qt.AlignCenter)

        label_texto.setStyleSheet("color: white; font-size: 14px; background-color: transparent; font-weight: normal")

        layout.addWidget(label_texto)

        layout.setSizeConstraint(QLayout.SetFixedSize)

        if callback:

            boton.clicked.connect(callback)

        return boton

    def input_frame(self, layout, ancho, alto, texto_bajo):

        """Crea un cuadro de entrada estilizado con un texto debajo y lo agrega al layout dado."""

        cuadro_layout = QVBoxLayout()

        # Crear el marco estilizado

        frame = QWidget(self)

        frame.setStyleSheet("border: 8px solid; border-radius: 20px; background-color: #564D80; border-color: #564D80;")

        frame.setFixedSize(ancho, alto)

        frame_layout = QVBoxLayout(frame)

        frame_layout.setSpacing(0)

        frame_layout.setContentsMargins(0, 0, 0, 0)

        # Crear el campo de entrada

        input_field = QLineEdit(frame)

        # Función para validar manualmente el texto del input

        def validar_entrada():

            texto = input_field.text()

            # Reemplazar comas por puntos

            texto = texto.replace(",", ".")

            # Validar si el texto es un número flotante válido

            try:

                valor = float(texto)

                # Formatear el número para que muestre hasta dos decimales, pero no añada decimales innecesarios

                if valor.is_integer():

                    input_field.setText(f"{int(valor)}")  # Si es un número entero, mostrar sin decimales

                else:

                    input_field.setText(f"{valor:.2f}")  # Si tiene decimales, mostrar hasta dos decimales

            except ValueError:

                # Si no es un número válido, podemos vaciar el campo o dejarlo como está

                input_field.setText("")  # O, si prefieres, deja el valor sin cambiar

                return

        # Conectar el evento de perder el foco (cuando el usuario termina de editar)

        input_field.editingFinished.connect(validar_entrada)

        input_field.setAlignment(Qt.AlignCenter)  # Centrar el texto ingresado

        input_field.setObjectName("input_config")  # Identificador para estilos

        frame_layout.addWidget(input_field)

        # Agregar el marco al diseño principal

        cuadro_layout.addWidget(frame, alignment=Qt.AlignHCenter)

        # Crear la etiqueta debajo del input

        label_bajo = QLabel(texto_bajo, self)

        label_bajo.setAlignment(Qt.AlignCenter)

        label_bajo.setStyleSheet("color: white; font-size: 21px; background-color: none; margin-top: 5px")

        cuadro_layout.addWidget(label_bajo, alignment=Qt.AlignHCenter)

        # Agregar el cuadro al diseño recibido

        layout.addLayout(cuadro_layout)

        # Devolver el campo de entrada para seguimiento

        return input_field

    def mostrar_pantalla_config(self):

        layout = QVBoxLayout()

        layout.setContentsMargins(0, 0, 0, 0)

        # Título

        layout.addItem(QSpacerItem(20, 49, QSizePolicy.Minimum, QSizePolicy.Fixed))

        titulo_label = QLabel("AQUAPI", self)

        titulo_label.setAlignment(Qt.AlignCenter)

        titulo_label.setObjectName("titulo_pantalla")

        layout.addWidget(titulo_label)

        layout.addItem(QSpacerItem(20, 30, QSizePolicy.Minimum, QSizePolicy.Fixed))

        # Inputs

        self.inputs = []  # Lista para almacenar referencias a los inputs

        fila1_layout = QHBoxLayout()

        label_temp = QLabel("Temperatura")

        label_temp.setObjectName("parametro")

        label_temp.setAlignment(Qt.AlignCenter)

        layout.addWidget(label_temp)

        input_min_temp = self.input_frame(fila1_layout, 116, 68, "Min")

        input_max_temp = self.input_frame(fila1_layout, 116, 68, "Máx")

        self.inputs.append(input_min_temp)

        self.inputs.append(input_max_temp)

        layout.addLayout(fila1_layout)

        layout.addItem(QSpacerItem(0, 2, QSizePolicy.Minimum, QSizePolicy.Fixed))

        fila2_layout = QHBoxLayout()

        label_ph = QLabel("pH")

        label_ph.setObjectName("parametro")

        label_ph.setAlignment(Qt.AlignCenter)

        layout.addWidget(label_ph)

        input_min_ph = self.input_frame(fila2_layout, 116, 68, "Min")

        input_max_ph = self.input_frame(fila2_layout, 116, 68, "Máx")

        self.inputs.append(input_min_ph)

        self.inputs.append(input_max_ph)

        layout.addLayout(fila2_layout)

        layout.addItem(QSpacerItem(0, 5, QSizePolicy.Minimum, QSizePolicy.Fixed))

        fila3_layout = QHBoxLayout()

        label_luz = QLabel("Luz")

        label_luz.setObjectName("parametro")

        label_luz.setAlignment(Qt.AlignCenter)

        layout.addWidget(label_luz)

        input_min_luz = self.input_frame(fila3_layout, 116, 68, "Min")

        input_max_luz = self.input_frame(fila3_layout, 116, 68, "Máx")

        self.inputs.append(input_min_luz)

        self.inputs.append(input_max_luz)

        layout.addLayout(fila3_layout)

        layout.addItem(QSpacerItem(0, 20, QSizePolicy.Minimum, QSizePolicy.Fixed))

        # Rellenar los valores en los inputs desde self.rangos

        if self.rangos['temperatura']['min'] is not None:

            self.inputs[0].setText(str(self.rangos['temperatura']['min']))

        if self.rangos['temperatura']['max'] is not None:

            self.inputs[1].setText(str(self.rangos['temperatura']['max']))

        if self.rangos['ph']['min'] is not None:

            self.inputs[2].setText(str(self.rangos['ph']['min']))

        if self.rangos['ph']['max'] is not None:

            self.inputs[3].setText(str(self.rangos['ph']['max']))

        if self.rangos['luz']['min'] is not None:

            self.inputs[4].setText(str(self.rangos['luz']['min']))

        if self.rangos['luz']['max'] is not None:

            self.inputs[5].setText(str(self.rangos['luz']['max']))

        # Botón Confirmar

        confirmar_btn = QPushButton("Confirmar", self)

        confirmar_btn.setObjectName("confirmar_btn")

        confirmar_btn.clicked.connect(self.enviar_datos)  # Conectar el evento del botón

        layout.addWidget(confirmar_btn, alignment=Qt.AlignCenter)

        # Espaciador antes del rectángulo inferior

        layout.addItem(QSpacerItem(20, 40, QSizePolicy.Minimum, QSizePolicy.Fixed))

        # Rectángulo inferior con botones

        pantalla_config = QWidget()

        pantalla_config.setLayout(layout)

        self.stack.addWidget(pantalla_config)

        self.stack.setCurrentWidget(pantalla_config)

        btn_monitoreo = self.img_button(

            texto="Monitoreo",

            ruta_imagen="assets/monitoreo.png",

            ancho=120,

            alto=140,

            callback=self.mostrar_pantalla_monitoreo

        )

        btn_transmision = self.img_button(

            texto="Transmision",

            ruta_imagen="assets/transmision.png",

            ancho=120,

            alto=140,

            callback=self.mostrar_pantalla_transmision

        )

        rectangulo_inferior = QWidget(self)

        rectangulo_inferior.setObjectName("rectangulo")

        rectangulo_inferior.setFixedHeight(79)

        rectangulo_layout = QHBoxLayout(rectangulo_inferior)

        rectangulo_layout.setContentsMargins(0, 0, 0, 0)

        rectangulo_layout.addWidget(btn_monitoreo)

        rectangulo_layout.addItem(QSpacerItem(10, 0, QSizePolicy.Minimum, QSizePolicy.Fixed))

        rectangulo_layout.addWidget(btn_transmision)

        rectangulo_layout.addItem(QSpacerItem(10, 0, QSizePolicy.Minimum, QSizePolicy.Fixed))

        layout.addWidget(rectangulo_inferior)

    def agregar_cuadro(self, layout, icono_path, parametro, valor):

        # Crear el frame y asignarle un objectName único

        frame = QWidget(self)

        frame.setObjectName(parametro.lower())  # Asegurando que esté en minúsculas

        frame.setStyleSheet(f"border: 8px solid; border-radius: 20px; background-color: #564D80; border-color: #564D80;")

        frame_layout = QHBoxLayout(frame)

        frame_layout.setSpacing(0)

        frame_layout.setContentsMargins(0, 0, 0, 0)

        frame.setFixedSize(262, 94)

        icono_label = QLabel(frame)

        pixmap = QPixmap(icono_path).scaled(57, 57, Qt.KeepAspectRatio, Qt.SmoothTransformation)

        icono_label.setPixmap(pixmap)

        icono_label.setObjectName("icono_label")

        frame_layout.addWidget(icono_label)

        text_layout = QVBoxLayout()

        valor_label = QLabel(valor, frame)

        valor_label.setObjectName("valor_label")

        text_layout.addWidget(valor_label)

        frame_layout.addLayout(text_layout)

        text_layout.setSpacing(0)

        text_layout.setContentsMargins(0, 0, 0, 0)

        # Agregar el frame al layout

        layout.addWidget(frame, alignment=Qt.AlignHCenter)

        # Agregar el parámetro al layout

        parametro_label = QLabel(parametro, self)

        parametro_label.setAlignment(Qt.AlignCenter)

        parametro_label.setStyleSheet("color: white ; font-size: 21px")

        layout.addWidget(parametro_label)

        # Actualizar la etiqueta correspondiente según el parámetro

        if parametro.lower() == "temperatura":

            self.temp_label = valor_label

            self.parametro_temp_label = parametro_label

        elif parametro.lower() == "ph":

            self.ph_label = valor_label

            self.parametro_ph_label = parametro_label

        elif parametro.lower() == "luz":

            self.luz_label = valor_label

            self.parametro_luz_label = parametro_label

        return valor_label

    def cargar_estilos(self):

        with open("styles.css", "r") as f:

            css = f.read()

            self.setStyleSheet(css)

    def enviar_datos(self):

        """Recopila los datos ingresados en los inputs y los guarda."""

        datos = [input_widget.text() for input_widget in self.inputs]

        # Guardamos los rangos

        self.rangos = {

            'temperatura': {'min': float(datos[0]), 'max': float(datos[1])},

            'ph': {'min': float(datos[2]), 'max': float(datos[3])},

            'luz': {'min': float(datos[4]), 'max': float(datos[5])},

        }

app = QApplication(sys.argv)

ventana = AquaPiApp()

ventana.show()

sys.exit(app.exec())

</code></pre>

}}

{{collapse(Código servidor)

</code></pre>

}}