#include // Librería para la pantalla TFT #include // Librería para el controlador táctil XPT2046 #include // Librería SPI #include // Para conexión WiFi y peticiones HTTP #include "LogoEscuela.h" // Credenciales Wi-Fi (modifica con tu red) const char* ssid = "TU_SSID"; const char* password = "TU_PASSWORD"; // URL ejemplo para la sección Internet (modifica si quieres) const char* targetUrl = "http://example.com/"; // Objeto para la pantalla TFT TFT_eSPI tft = TFT_eSPI(); // Pines para el touch (ajusta según tu hardware) #define T_CS 33 #define T_IRQ 36 #define T_MOSI 32 #define T_MISO 39 #define T_CLK 25 // SPI para el touch SPIClass touchscreenSPI = SPIClass(VSPI); XPT2046_Touchscreen ts(T_CS, T_IRQ); // Colores personalizados para uso en la interfaz #define CUSTOM_BLUE 0x001F #define CUSTOM_GREEN 0x07E0 #define CUSTOM_RED 0xF800 #define CUSTOM_CYAN 0x07FF #define CUSTOM_MAGENTA 0xF81F #define CUSTOM_YELLOW 0xFFE0 #define CUSTOM_ORANGE 0xFD20 #define CUSTOM_PURPLE 0x8010 // Configuración menú superior const int MENU_HEIGHT = 40; // Altura barra superior const int BUTTON_WIDTH = 325 / 5; // Ancho botones (ahora 5 porque agregamos "Volver") // Definición estructura para botones struct Button { int x; // Posición X int y; // Posición Y int w; // Ancho int h; // Alto const char* label; // Texto del botón int id; // ID para identificar botón }; // Botones menú superior (4 secciones + botón Volver) Button menuButtons[] = { {0, 0, BUTTON_WIDTH, MENU_HEIGHT, "Controles", 0}, {BUTTON_WIDTH, 0, BUTTON_WIDTH, MENU_HEIGHT, "Sensores", 1}, {BUTTON_WIDTH * 2, 0, BUTTON_WIDTH, MENU_HEIGHT, "Internet", 2}, {BUTTON_WIDTH * 3, 0, BUTTON_WIDTH, MENU_HEIGHT, "Ajustes", 3} }; // Botón "Volver" (solo visible cuando estamos en submenú) Button volverButton = {BUTTON_WIDTH * 4, 0, BUTTON_WIDTH, MENU_HEIGHT, "Volver", 99}; // Número botones menú principal (sin contar "Volver") const int NUM_MENU_BUTTONS = sizeof(menuButtons) / sizeof(menuButtons[0]); // Configuración botones de submenú (área contenido) const int SUB_BUTTON_WIDTH = 100; const int SUB_BUTTON_HEIGHT = 40; const int SUB_BUTTON_MARGIN_X = 0;//Espacio separacion de la pantalla lado izquierdo const int SUB_BUTTON_MARGIN_Y = 28;//Semaracion entre botones vertical const int CONTENT_START_Y = MENU_HEIGHT; // Área debajo del menú superior // Botones submenú Controles Button subMenuControles[] = { {SUB_BUTTON_MARGIN_X, CONTENT_START_Y + SUB_BUTTON_MARGIN_Y, SUB_BUTTON_WIDTH, SUB_BUTTON_HEIGHT, "Luces", 0}, {SUB_BUTTON_MARGIN_X, CONTENT_START_Y + SUB_BUTTON_MARGIN_Y * 2 + SUB_BUTTON_HEIGHT, SUB_BUTTON_WIDTH, SUB_BUTTON_HEIGHT, "Aire/Calef.", 1}, {SUB_BUTTON_MARGIN_X, CONTENT_START_Y + SUB_BUTTON_MARGIN_Y * 3 + SUB_BUTTON_HEIGHT * 2, SUB_BUTTON_WIDTH, SUB_BUTTON_HEIGHT, "Motor", 2} }; const int NUM_SUB_CONTROLES = sizeof(subMenuControles) / sizeof(subMenuControles[0]); // Botones submenú Sensores Button subMenuSensores[] = { {SUB_BUTTON_MARGIN_X, CONTENT_START_Y + SUB_BUTTON_MARGIN_Y, SUB_BUTTON_WIDTH, SUB_BUTTON_HEIGHT, "Temperatura", 0}, {SUB_BUTTON_MARGIN_X, CONTENT_START_Y + SUB_BUTTON_MARGIN_Y * 2 + SUB_BUTTON_HEIGHT, SUB_BUTTON_WIDTH, SUB_BUTTON_HEIGHT, "Humedad", 1} }; const int NUM_SUB_SENSORES = sizeof(subMenuSensores) / sizeof(subMenuSensores[0]); // Estado actual: pantalla principal y submenú int currentScreen = 0; // 0: Controles, 1: Sensores, 2: Internet, 3: Ajustes int currentSubScreen = -1; // -1 = menú principal de la sección, >=0 = submenú activo // ===================== FUNCIONES DE DIBUJO ===================== // Dibuja la barra de menú superior con botones void drawHeader() { tft.fillRect(0, 0, tft.width(), MENU_HEIGHT, TFT_DARKGREY); tft.drawFastHLine(0, MENU_HEIGHT - 1, tft.width(), TFT_BLACK); // Dibuja los botones de menú principal for (int i = 0; i < NUM_MENU_BUTTONS; i++) { tft.drawRect(menuButtons[i].x, menuButtons[i].y, menuButtons[i].w, menuButtons[i].h, TFT_WHITE); tft.setTextColor(TFT_WHITE); tft.setTextSize(1); tft.setTextDatum(MC_DATUM); tft.drawString(menuButtons[i].label, menuButtons[i].x + menuButtons[i].w / 2, menuButtons[i].y + menuButtons[i].h / 2); } // Si estamos en submenú, dibuja también el botón "Volver" if (currentSubScreen >= 0) { tft.drawRect(volverButton.x, volverButton.y, volverButton.w, volverButton.h, TFT_WHITE); tft.setTextColor(TFT_WHITE); tft.setTextSize(1); tft.setTextDatum(MC_DATUM); tft.drawString(volverButton.label, volverButton.x + volverButton.w / 2, volverButton.y + volverButton.h / 2); } } // Resalta el botón seleccionado en la barra superior void highlightButton(int buttonId) { for (int i = 0; i < NUM_MENU_BUTTONS; i++) { if (menuButtons[i].id == buttonId) { tft.fillRect(menuButtons[i].x, menuButtons[i].y, menuButtons[i].w, menuButtons[i].h, CUSTOM_BLUE); } else { tft.fillRect(menuButtons[i].x, menuButtons[i].y, menuButtons[i].w, menuButtons[i].h, TFT_DARKGREY); } tft.drawRect(menuButtons[i].x, menuButtons[i].y, menuButtons[i].w, menuButtons[i].h, TFT_WHITE); tft.setTextColor(TFT_WHITE); tft.setTextSize(1); tft.setTextDatum(MC_DATUM); tft.drawString(menuButtons[i].label, menuButtons[i].x + menuButtons[i].w / 2, menuButtons[i].y + menuButtons[i].h / 2); } // También resaltar botón volver si estamos en submenú if (currentSubScreen >= 0) { if (buttonId == 99) { tft.fillRect(volverButton.x, volverButton.y, volverButton.w, volverButton.h, CUSTOM_BLUE); } else { tft.fillRect(volverButton.x, volverButton.y, volverButton.w, volverButton.h, TFT_DARKGREY); } tft.drawRect(volverButton.x, volverButton.y, volverButton.w, volverButton.h, TFT_WHITE); tft.setTextColor(TFT_WHITE); tft.setTextSize(1); tft.setTextDatum(MC_DATUM); tft.drawString(volverButton.label, volverButton.x + volverButton.w / 2, volverButton.y + volverButton.h / 2); } tft.drawFastHLine(0, MENU_HEIGHT - 1, tft.width(), TFT_BLACK); } // Dibuja botones del submenú en área contenido void drawSubMenuButtons(const Button* buttons, int numButtons, int textColor = TFT_WHITE, int bgColor = TFT_DARKGREY) { for (int i = 0; i < numButtons; i++) { tft.fillRect(buttons[i].x, buttons[i].y, buttons[i].w, buttons[i].h, bgColor); tft.drawRect(buttons[i].x, buttons[i].y, buttons[i].w, buttons[i].h, TFT_WHITE); tft.setTextColor(textColor); tft.setTextSize(1); tft.setTextDatum(MC_DATUM); tft.drawString(buttons[i].label, buttons[i].x + buttons[i].w / 2, buttons[i].y + buttons[i].h / 2); } } // Limpia área debajo del menú (área de contenido) void clearContentArea() { tft.fillRect(0, MENU_HEIGHT, tft.width(), tft.height() - MENU_HEIGHT, TFT_BLACK); } // ===================== FUNCIONES DE SUBMENÚ ===================== // Controles - Luces void showLuces() { clearContentArea(); tft.setTextColor(TFT_WHITE); tft.setTextSize(2); tft.setCursor(10, CONTENT_START_Y + 10); tft.println("Controles: Luces"); tft.setTextSize(1); tft.setCursor(10, CONTENT_START_Y + 40); tft.println("- Control de luces aqui."); // Aquí puedes poner la lógica real para controlar luces } // Controles - Aire/Calefactor void showAireCalefactor() { clearContentArea(); tft.setTextColor(TFT_WHITE); tft.setTextSize(2); tft.setCursor(10, CONTENT_START_Y + 10); tft.println("Controles: Aire/Calefactor"); tft.setTextSize(1); tft.setCursor(10, CONTENT_START_Y + 40); tft.println("- Control de climatizacion aqui."); // Aquí la lógica para aire/calefactor } // Controles - Motor void showMotor() { clearContentArea(); tft.setTextColor(TFT_WHITE); tft.setTextSize(2); tft.setCursor(10, CONTENT_START_Y + 10); tft.println("Controles: Motor"); tft.setTextSize(1); tft.setCursor(10, CONTENT_START_Y + 40); tft.println("- Control de motor aqui."); // Aquí lógica para motor } // Sensores - Temperatura void showTemperatura() { clearContentArea(); tft.setTextColor(CUSTOM_GREEN); tft.setTextSize(2); tft.setCursor(10, CONTENT_START_Y + 10); tft.println("Sensores: Temperatura"); tft.setTextSize(1); tft.setCursor(10, CONTENT_START_Y + 40); float temp = 25.5; // Simulación lectura temperatura tft.print("Temperatura actual: "); tft.print(temp); tft.println(" C"); // Aquí tu código para leer sensor real } // Sensores - Humedad void showHumedad() { clearContentArea(); tft.setTextColor(CUSTOM_GREEN); tft.setTextSize(2); tft.setCursor(10, CONTENT_START_Y + 10); tft.println("Sensores: Humedad"); tft.setTextSize(1); tft.setCursor(10, CONTENT_START_Y + 40); float hum = 60.2; // Simulación lectura humedad tft.print("Humedad actual: "); tft.print(hum); tft.println(" %"); // Aquí tu código para leer sensor real } // ===================== FUNCIONES SECCIONES PRINCIPALES ===================== // Muestra menú principal Controles void showControles() { clearContentArea(); tft.setTextColor(TFT_WHITE); tft.setTextSize(2); tft.setTextDatum(TL_DATUM); tft.setCursor(10, CONTENT_START_Y + 10); tft.println("Controles Remoto"); drawSubMenuButtons(subMenuControles, NUM_SUB_CONTROLES); currentSubScreen = -1; // Estamos en menú principal de controles drawHeader(); highlightButton(currentScreen); } // Muestra menú principal Sensores void showSensores() { clearContentArea(); tft.setTextColor(CUSTOM_GREEN); tft.setTextSize(2); tft.setTextDatum(TL_DATUM); tft.setCursor(10, CONTENT_START_Y + 10); tft.println("Monitoreo Sensores"); drawSubMenuButtons(subMenuSensores, NUM_SUB_SENSORES); currentSubScreen = -1; // Menú principal sensores drawHeader(); highlightButton(currentScreen); } // Función para hacer petición HTTP simple (Internet) void goToURL() { clearContentArea(); tft.setTextColor(CUSTOM_CYAN); tft.setTextSize(2); tft.setCursor(10, CONTENT_START_Y + 10); tft.println("Internet: Ir a URL"); tft.setTextSize(1); tft.setCursor(10, CONTENT_START_Y + 40); if (WiFi.status() == WL_CONNECTED) { tft.println("Conectado a WiFi."); tft.print("Visitando: "); tft.println(targetUrl); Serial.print("Visitando URL: "); Serial.println(targetUrl); WiFiClient client; if (client.connect(targetUrl, 80)) { client.print(String("GET ") + targetUrl + " HTTP/1.1\r\n" + "Host: " + targetUrl + "\r\n" + "Connection: close\r\n\r\n"); unsigned long timeout = millis(); while (client.available() == 0) { if (millis() - timeout > 5000) { tft.println(">>> Client Timeout !"); Serial.println(">>> Client Timeout !"); client.stop(); return; } } tft.println("Peticion enviada. Respuesta:"); String line = ""; while(client.available()){ char c = client.read(); Serial.write(c); if (c == '\n') line = ""; else line += c; } tft.println("Respuesta recibida."); Serial.println("Respuesta recibida."); } else { tft.println("Fallo conexion HTTP."); Serial.println("Fallo conexion HTTP."); } client.stop(); } else { tft.println("WiFi NO CONECTADO."); tft.println("Configura SSID/PASS."); Serial.println("WiFi NO CONECTADO."); } } // Muestra menú principal Internet con botón para ir a URL void showInternet() { clearContentArea(); tft.setTextColor(CUSTOM_CYAN); tft.setTextSize(2); tft.setTextDatum(TL_DATUM); tft.setCursor(10, CONTENT_START_Y + 10); tft.println("Red e Internet"); Button urlButton = {SUB_BUTTON_MARGIN_X, CONTENT_START_Y + SUB_BUTTON_MARGIN_Y, SUB_BUTTON_WIDTH, SUB_BUTTON_HEIGHT, "Abrir URL", 0}; tft.fillRect(urlButton.x, urlButton.y, urlButton.w, urlButton.h, TFT_BLUE); tft.drawRect(urlButton.x, urlButton.y, urlButton.w, urlButton.h, TFT_WHITE); tft.setTextColor(TFT_WHITE); tft.setTextSize(1); tft.setTextDatum(MC_DATUM); tft.drawString(urlButton.label, urlButton.x + urlButton.w / 2, urlButton.y + urlButton.h / 2); currentSubScreen = -1; drawHeader(); highlightButton(currentScreen); } // Muestra menú principal Ajustes void showAjustes() { clearContentArea(); tft.setTextColor(CUSTOM_PURPLE); tft.setTextSize(2); tft.setTextDatum(TL_DATUM); tft.setCursor(10, CONTENT_START_Y + 10); tft.println("Ajustes Pantalla"); tft.setTextSize(1); tft.setCursor(10, CONTENT_START_Y + 40); tft.println("Aqui puedes configurar:"); tft.println("- Brillo de pantalla"); tft.println("- Opciones de red WiFi"); tft.println("- Calibracion del touch"); tft.println("- Informacion del sistema"); currentSubScreen = -1; drawHeader(); highlightButton(currentScreen); } // ===================== SETUP y LOOP ===================== void setup() { Serial.begin(115200); Serial.println("Iniciando ESP32-2432S028 con menu..."); // Inicializar pantalla TFT tft.init(); tft.setRotation(1); // Landscape tft.fillScreen(TFT_BLACK); tft.setSwapBytes(true); tft.pushImage(0,0,316,240,Logo_Escuela320x240); // Inicializar touch touchscreenSPI.begin(T_CLK, T_MISO, T_MOSI, T_CS); ts.begin(touchscreenSPI); ts.setRotation(tft.getRotation()); // Conectar a WiFi Serial.print("Conectando a WiFi: "); Serial.println(ssid); WiFi.begin(ssid, password); int attempts = 0; while (WiFi.status() != WL_CONNECTED && attempts < 20) { delay(500); Serial.print("."); attempts++; } if (WiFi.status() == WL_CONNECTED) { Serial.println("\nWiFi conectado!"); Serial.print("IP: "); Serial.println(WiFi.localIP()); } else { Serial.println("\nFallo la conexion WiFi."); } // Dibujar menú y pantalla inicial drawHeader(); highlightButton(currentScreen); showControles(); } void loop() { if (ts.touched()) { delay(100); // Anti rebote TS_Point p = ts.getPoint(); // Mapear coordenadas touch a pantalla TFT int touchX = map(p.x, 200, 3900, 0, tft.width()); int touchY = map(p.y, 240, 3800, 0, tft.height()); Serial.print("Touch RAW: X="); Serial.print(p.x); Serial.print(" Y="); Serial.println(p.y); Serial.print("Touch MAPPED: X="); Serial.print(touchX); Serial.print(" Y="); Serial.println(touchY); // Si el toque está en la barra superior (menú) if (touchY < MENU_HEIGHT) { // Revisar botones principales for (int i = 0; i < NUM_MENU_BUTTONS; i++) { if (touchX >= menuButtons[i].x && touchX < (menuButtons[i].x + menuButtons[i].w) && touchY >= menuButtons[i].y && touchY < (menuButtons[i].y + menuButtons[i].h)) { if (currentScreen != menuButtons[i].id || currentSubScreen != -1) { currentScreen = menuButtons[i].id; currentSubScreen = -1; // Volver al menú principal highlightButton(currentScreen); switch (currentScreen) { case 0: showControles(); break; case 1: showSensores(); break; case 2: showInternet(); break; case 3: showAjustes(); break; } } goto endLoop; // Para evitar procesar toque doble } } // Detectar toque en botón "Volver" solo si está visible if (currentSubScreen >= 0) { if (touchX >= volverButton.x && touchX < (volverButton.x + volverButton.w) && touchY >= volverButton.y && touchY < (volverButton.y + volverButton.h)) { // Volver al menú principal de la sección actual currentSubScreen = -1; switch (currentScreen) { case 0: showControles(); break; case 1: showSensores(); break; case 2: showInternet(); break; case 3: showAjustes(); break; } highlightButton(currentScreen); goto endLoop; } } } // Área contenido: manejo de submenús y acciones if (touchY >= CONTENT_START_Y) { switch (currentScreen) { case 0: // Controles if (currentSubScreen == -1) { // Detectar si se selecciona algún botón submenú for (int i = 0; i < NUM_SUB_CONTROLES; i++) { if (touchX >= subMenuControles[i].x && touchX < (subMenuControles[i].x + subMenuControles[i].w) && touchY >= subMenuControles[i].y && touchY < (subMenuControles[i].y + subMenuControles[i].h)) { // Abrir subpantalla seleccionada currentSubScreen = subMenuControles[i].id; switch (currentSubScreen) { case 0: showLuces(); break; case 1: showAireCalefactor(); break; case 2: showMotor(); break; } drawHeader(); // Redibujar header con botón Volver visible highlightButton(99); // Resaltar botón Volver goto endLoop; } } } break; case 1: // Sensores if (currentSubScreen == -1) { for (int i = 0; i < NUM_SUB_SENSORES; i++) { if (touchX >= subMenuSensores[i].x && touchX < (subMenuSensores[i].x + subMenuSensores[i].w) && touchY >= subMenuSensores[i].y && touchY < (subMenuSensores[i].y + subMenuSensores[i].h)) { currentSubScreen = subMenuSensores[i].id; switch (currentSubScreen) { case 0: showTemperatura(); break; case 1: showHumedad(); break; } drawHeader(); highlightButton(99); goto endLoop; } } } break; case 2: // Internet if (currentSubScreen == -1) { // Botón Abrir URL en la pantalla Internet int urlX = SUB_BUTTON_MARGIN_X; int urlY = CONTENT_START_Y + SUB_BUTTON_MARGIN_Y; int urlW = SUB_BUTTON_WIDTH; int urlH = SUB_BUTTON_HEIGHT; if (touchX >= urlX && touchX < (urlX + urlW) && touchY >= urlY && touchY < (urlY + urlH)) { currentSubScreen = 0; // Indicar subpantalla abierta para mostrar "volver" goToURL(); drawHeader(); highlightButton(99); goto endLoop; } } break; case 3: // Ajustes // Si tienes botones en ajustes, aquí los procesarías. break; } } endLoop:; } delay(10); }