Aplicación Web con ESP32

Clase 29 de 30 • Curso de IoT: Programación de Microcontroladores ESP32

Clase anteriorSiguiente clase

Gabriel Obregón

student•

RESUMEN DEL PROYECTO:

🔧 1) webapp.c: Lógica del servidor y control del hardware

📦 Includes y definición de recursos embebidos

extern const char index_start[] asm("_binary_index_html_start");

extern const char index_end[] asm("_binary_index_html_end");

extern const char chroma_start[] asm("_binary_chroma_png_start");

extern const char chroma_end[] asm("_binary_chroma_png_end");

Estas líneas indican que index.html y chroma.png están embebidos en el firmware (gracias al CMakeLists.txt), permitiendo servirlos directamente desde la memoria del ESP32.

🌈 Control de color LED

int32_t led_r = 0, led_g = 0, led_b = 0;

Se almacenan los valores actuales de los colores RGB en variables globales.
Las salidas están conectadas a los pines 15 (Rojo), 13 (Verde), 12 (Azul).

📡 API /api

static esp_err_t api_get_handler(httpd_req_t *req)

Maneja peticiones GET como /api?r=255&g=100&b=80.
Extrae los valores de los parámetros r, g y b de la URL.
Usa PWM para cambiar el brillo de cada canal de color mediante ledc_set_duty() y ledc_update_duty().

🏠 API / y /chroma.png

Sirven el contenido embebido:
- / → index.html
- /chroma.png → imagen de la rueda de colores

🌍 web_server_init()

Inicializa el servidor HTTP y registra las rutas /, /api y /chroma.png.

🚀 app_main()

Función principal del firmware.

Inicializa WiFi y obtiene la IP.
Configura el PWM (LEDC) en 3 canales para los colores RGB.
Arranca el servidor web.

🌐 2) index.html: Interfaz de usuario

🎨 Vista general

Muestra un canvas circular con la imagen chroma.png (rueda de color).
Muestra un visor redondo del color actual.
Usa JavaScript para leer el color donde el usuario toca y enviar los valores RGB al ESP32 por medio de /api.

🖌️ Comportamiento JS

Canvas: Al tocar en una posición, detecta el color del píxel con getImageData() y llama a fetchColor(r,g,b).
Preview: Al hacer clic, envía negro (0,0,0) para apagar la lámpara.
API call: fetchColor() construye dinámicamente la URL /api?r=..&g=..&b=.. y actualiza el preview visual con la respuesta del ESP32.

🛠️ 3) CMakeLists.txt

idf_component_register(SRCS "webapp.c"

INCLUDE_DIRS "."

EMBED_FILES index.html chroma.png)

Compila el archivo webapp.c.
Embebe index.html y chroma.png en el binario, accesibles en C mediante los símbolos definidos en webapp.c.

Mariana Valencia Gallego

student•

Igual que dicen por acá, me da tristeza que se acabe el curso, estuvo increíblemente divertido. Muchas gracias!

Edwin Agudelo

student•

Hola, No me permite seleccionar colores desde la paleta del círculo cromático. Únicamente me funciona el circulo pequeño para apagar el led. Todo esto desde el navegador de mi computador.... desde mi móvil no se conecta a la IP asignada al ESP32.

A ustedes les ha funcionado ????

Diana Martinez

student•

Algo que puedes hacer, es descargar el ejercicio ya realizado, e instalarlo, para comprobar que todo está bien con tu hardware y que esto debería funcionar. Una vez hecho eso, podrías comparar las diferencias entre tu código y el del proyecto final.

Mario Ruben Hernandez Carmona

student•

Hola, yo tenia la misma problemática desde mi PC, aqui los cambios que hice para solucionarlo.

      const inputColorHandler = function (e) {
        const mouseX = e.touches ? e.touches[0].clientX - e.touches[0].target.offsetLeft : e.clientX - e.target.offsetLeft;
        const mouseY = e.touches ? e.touches[0].clientY - e.touches[0].target.offsetTop : e.clientY - e.target.offsetTop;
        const c = ctx.getImageData(mouseX, mouseY, 1, 1).data;
        fetchColor(c[0], c[1], c[2]);
      }

      // Agregar eventos de mouse para PC
      inputColor.addEventListener("mousedown", inputColorHandler);
      inputColor.addEventListener("mousemove", inputColorHandler);

Victor Armando Avendaño Osorio

student•

Me encantó el curso, una pena hacer el último commit 😭😭

Patricio Cárdenas

student•

Muy buen curso, donde se aprendio a implementar temas de electronica en conjunto con una pagina web, buenisimo. Quedo atento a los proximos cursos.