Actividad 3: Configuración de alertas
Actividad 3:
Configuración de alertas
Para realizar esta actividad, pondremos el foco en los días calurosos de verano, aquellos en los que las huertas y cultivos sufren la sequía y las altas temperaturas en primera persona.
Por ello, estableceremos alertas por altas temperaturas y baja humedad, así como una alerta que parpadee cuando la temperatura supere un alto umbral y la humedad esté bajo mínimos, condiciones que favorecen el desarrollo de incendios forestales que puedan acabar con nuestros cultivos y/o propiedades. A continuación, te desglosamos cada uno de los aspectos a modificar del código:
Pista 1 - Mensajes informativos de alerta
Recuerda establecer los umbrales y configurar los mensajes de alerta.
if (lecturaTemperatura > 28.0) {
pagina += "<p style='color:red; font-weight:bold;'>¡Alerta! La temperatura es muy alta"</p>";
}
Pista 2 - Definición de la animación de parpadeo
Podemos definir la animación de parpadeo, simplemente controlando la opacidad del elemento en
cuestión:
cuestión:
"@keyframes parpadeo {";
"0% { opacity: 1; }";
"50% { opacity: 0; }";
"100% { opacity: 1; }";
"}";
Pista 3 - Configuración de la alerta de parpadeo
Recuerda configurar las propiedades de la clase a utilizar, así como el estilo del parpadeo:
".alerta-parpadeo {";
"color: red;";
"font-weight: bold;";
"font-size: 40px;";
"animation: parpadeo 2s infinite;";
"}";
A continuación, se muestra cómo queda la página web diseñada con este código:
Puedes ver y/o descargar el código completo en el siguiente bloque desplegable:
Código completo del Sistema de Riego Inteligente
Pincha en el siguiente icono para descargar este código:
/**
* WiFi.ino - Servidor Web ESP32 con diseño atractivo en tonos azules y alertas.
*
* Se crea una interfaz web con estilo CSS moderno para controlar un relé
* y visualizar datos de sensores (lluvia, humedad del suelo, luz, temperatura y humedad).
* Además, se muestran mensajes de alerta cuando la temperatura y/o la humedad son bajas.
*/
#include <WiFi.h>
#include <DHT.h>
// Creamos el Servidor Web en el puerto 80
WiFiServer server(80);
// Credenciales del WiFi
const char* ssid = "NOMBREDEMIWIFI";
const char* password = "CLAVEDEMIWIFI";
// Variable para gestionar el timeout de conexión a la red WiFi
int contconexion = 0;
// Variable para guardar la petición HTTP
String header;
// Configuración del sensor DHT (pin 17, modelo DHT22)
DHT sensorDHT(17, DHT22);
// Pin del relé
const int rele = 4;
// Pines de los sensores analógicos
const int sensorLluvia = 32;
const int sensorHumedadSuelo = 33;
const int sensorLuz = 34;
// Función que genera la página web con diseño en tonos azules e incluye alertas
String crearPaginaWeb(int lecturaLluvia, int lecturaHumedadSuelo, int lecturaLuz,
float lecturaTemperatura, float lecturaHumedad) {
// Usamos el favicon alojado en una URL
String favicon = "https://digitalcodesign.com/web/image/6195-c7408ed5/Recurso 11.svg";
String pagina = "<!DOCTYPE html>"
"<html>"
"<head>"
"<meta charset='utf-8'>"
"<meta name='viewport' content='width=device-width, initial-scale=1.0'>"
// Agregamos el meta refresh para que la página se recargue cada 10 segundos
"<meta http-equiv='refresh' content='10'>"
// Se incluye el favicon en la pestaña de la web (tipo SVG)
"<link rel=\"icon\" type=\"image/svg+xml\" href=\"" + favicon + "\">"
"<title>Sistema de Riego Inteligente</title>"
"<style>"
"body {"
"font-family: Arial, sans-serif;"
"text-align: center;"
"background: linear-gradient(to right, #0f4c75, #01FF8C);"
"color: white;"
"margin: 0;"
"padding: 0;"
"}"
".container {"
"margin-top: 50px;"
"}"
".card {"
"background: rgba(255, 255, 255, 0.2);"
"padding: 20px;"
"border-radius: 10px;"
"box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);"
"display: inline-block;"
"}"
".button {"
"display: inline-block;"
"margin: 10px;"
"padding: 10px 20px;"
"font-size: 18px;"
"color: white;"
"background: #1b262c;"
"border: none;"
"border-radius: 5px;"
"cursor: pointer;"
"transition: 0.3s;"
"text-decoration: none;"
"}"
".button:hover {"
"background: #bbd4ef;"
"color: #1b262c;"
"}"
"</style>"
"</head>"
"<body>"
"<div class='container'>"
"<h1>Sistema de Riego Inteligente con ESP32</h1>";
// Agregamos mensajes de alerta según los umbrales definidos:
// Umbral de temperatura: 28°C
if (lecturaTemperatura > 28.0) {
pagina += "<p style='color:red; font-weight:bold;'>¡Alerta! La temperatura es muy alta (" + String(lecturaTemperatura) + "ºC)</p>";
}
// Umbral de humedad: 30%
if (lecturaHumedad < 30.0) {
pagina += "<p style='color:red; font-weight:bold;'>¡Alerta! La humedad es baja (" + String(lecturaHumedad) + "%)</p>";
}
// Continuamos con el resto de la página
pagina += "<div class='card'>"
"<p><strong>Lluvia:</strong> " + String(lecturaLluvia) + "% | "
"<strong>Luz:</strong> " + String(lecturaLuz) + "% | "
"<strong>Temperatura:</strong> " + String(lecturaTemperatura) + "ºC</p>"
"<p><strong>Humedad:</strong> " + String(lecturaHumedad) + "% | "
"<strong>Humedad del Suelo:</strong> " + String(lecturaHumedadSuelo) + "%</p>"
"</div>"
"<br>"
"<a href='/on' class='button'>Encender</a>"
"<a href='/off' class='button'>Apagar</a>"
"</div>"
"</body>"
"</html>";
// Agregar el estilo CSS para el parpadeo de la alerta de riesgo de incendio
pagina += "<style>";
pagina += "@keyframes parpadeo {";
pagina += "0% { opacity: 1; }";
pagina += "50% { opacity: 0; }";
pagina += "100% { opacity: 1; }";
pagina += "}";
pagina += ".alerta-parpadeo {";
pagina += "color: red;";
pagina += "font-weight: bold;";
pagina += "font-size: 40px;";
pagina += "animation: parpadeo 2s infinite;";
pagina += "}";
pagina += "</style>";
//Si la temperatura es alta y la humedad baja, mostrar alerta de riesgo de incendio
if (lecturaTemperatura > 30 && lecturaHumedad < 30) {
pagina += "<p class='alerta-parpadeo'>¡Alerta! RIESGO DE INCENDIO</p>";
}
pagina += "</body></html>";
return pagina;
}
void setup() {
// Inicializar monitor serial
Serial.begin(115200);
Serial.println("");
// Inicialización de pines: sensores y relé
pinMode(sensorLluvia, INPUT);
pinMode(sensorHumedadSuelo, INPUT);
pinMode(sensorLuz, INPUT);
pinMode(rele, OUTPUT);
digitalWrite(rele, LOW);
// Inicializar Sensor DHT
sensorDHT.begin();
// Conectar a WiFi
WiFi.begin(ssid, password);
Serial.print("Conectando a WiFi");
while (WiFi.status() != WL_CONNECTED && contconexion < 50) {
contconexion++;
delay(500);
Serial.print(".");
}
if (WiFi.status() == WL_CONNECTED) {
Serial.println("");
Serial.println("WiFi conectado");
Serial.println("IP: " + WiFi.localIP().toString());
server.begin();
} else {
Serial.println("");
Serial.println("Error de conexión al WiFi");
}
}
void loop() {
// Espera a que un cliente se conecte
WiFiClient client = server.available();
if (client) {
Serial.println("Nuevo Cliente.");
String currentLine = "";
while (client.connected()) {
if (client.available()) {
char c = client.read();
Serial.write(c);
header += c;
if (c == '\n') {
if (currentLine.length() == 0) {
// Enviar encabezado HTTP de respuesta
client.println("HTTP/1.1 200 OK");
client.println("Content-type:text/html");
client.println("Connection: close");
client.println();
// Control del relé mediante la URL
if (header.indexOf("GET /on") >= 0) {
Serial.println("Relé Encendido");
digitalWrite(rele, HIGH);
} else if (header.indexOf("GET /off") >= 0) {
Serial.println("Relé Apagado");
digitalWrite(rele, LOW);
}
// Leer los valores de los sensores
int lecturaLluvia = map(analogRead(sensorLluvia), 0, 4095, 100, 0);
int lecturaHumedadSuelo = map(analogRead(sensorHumedadSuelo), 0, 4095, 100, 0);
int lecturaLuz = map(analogRead(sensorLuz), 0, 4095, 100, 0);
float lecturaTemperatura = sensorDHT.readTemperature();
float lecturaHumedad = sensorDHT.readHumidity();
// Generar y enviar la página web con diseño integrado y alertas
String paginaWeb = crearPaginaWeb(lecturaLluvia, lecturaHumedadSuelo, lecturaLuz, lecturaTemperatura, lecturaHumedad);
client.println(paginaWeb);
client.println();
break;
} else {
currentLine = "";
}
} else if (c != '\r') {
currentLine += c;
}
}
}
// Limpiar la variable header y cerrar la conexión
header = "";
client.stop();
Serial.println("Cliente desconectado.");
Serial.println("");
}
}
| Vistas | |
|---|---|
| 1 | Número de vistas |
| 1 | Vistas de miembros |
| 0 | Vistas públicas |
| Acciones | |
|---|---|
| 0 | Gustos |
| 0 | No me gusta |
| 0 | Comentarios |