Aplicación Web con ESP32

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

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.

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 😭😭

Mariana Valencia Gallego

student•

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

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.

      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);

Aplicación Web con ESP32

Introducción

Introducción a los microcontroladores

La importancia de la industria IoT

Tipos de computadoras

Cómo escoger un microcontrolador

Hardware

Características del ESP32

ESP-IDF

Documentación oficial del ESP-IDF

Instalación del ESP-IDF en Windows

Instalación de ESP-IDF en macOS Ventura con M1 y Python 3.10

Instalación de ESP-IDF en Ubuntu 22.04 con Python 3.10

Lista de materiales

Proyectos con ESP-IDF

Primer proyecto

API Core

Hola mundo con ESP-IDF

Sistemas Operativos en Tiempo Real

FreeRTOS con ESP32

Ciclo de vida de las tareas con FreeRTOS

Almacenamiento con ESP32

Peripherals API

Salida Digital con ESP32

Entrada Digital con ESP32

Entrada Analógica con ESP32

Modulación de Ancho de Pulsos

Control PWM con ESP32 y LEDC

Servidor Web

Redes y protocolos de Internet

Redes WiFi

Loop de eventos

Conexión WiFi con ESP32

Servidor HTTP básico con ESP32

Smart Light

Dimmer LED via HTTP con ESP32

Aplicación Web con ESP32

Despedida

Tu primer proyecto de IoT con ESP32