Aplicación Web con ESP32
Contenido del curso
Patricio Cárdenas
Edwin Agudelo
Diana Martinez
Mario Hernandez
Victor Armando Avendaño Osorio
Mariana Valencia Gallego
Gabriel Obregón
Muy buen curso, donde se aprendio a implementar temas de electronica en conjunto con una pagina web, buenisimo. Quedo atento a los proximos cursos.
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 ????
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.
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);
Me encantó el curso, una pena hacer el último commit 😭😭
Igual que dicen por acá, me da tristeza que se acabe el curso, estuvo increíblemente divertido. Muchas gracias!
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.
