ESP32 Basic Starter Kit for dummys: Proyecto - 8 RGB LED Web Server
Continuamos con la arquitectura de controlar el ESP32 mediante un navegador, en este caso lo que haremos es definir el color de un LED RGB
 |
| Desde el navegador seleccionamos el color del LED RGB |
 |
| Esquema de montaje |
De nuevo el ejemplo no aparece en los ejemplos cargados en el Arduino IDE por lo que hay que buscarlo por la web (ESP32 RGB LED Controller Web Server – Remote Color Picker), se copia, se modifican las credenciales WiFi, y las instrucciones no soportadas que ya hemos visto y se carga.
En este programa se cargan mediante #include los módulos WiFi.h y WebServer.h y además se usa CANVAS en el diseño de la página web. Creo que no es exactamente como el que dice el tutorial, pero hay muchas formas de programar un dispositivo para obtener los mismos resultados.
#include <WiFi.h>#include <WebServer.h>const char* ssid = "CASETA";const char* password = "Damacla1115";const byte DNS_PORT = 53;// Hay variables con el mismo nombre y se modificaconst int red_pinn = 13;const int green_pinn = 12;const int blue_pinn = 14;// Setting PWM frequency, channels and bit resolutionconst int frequency = 5000;const int redChannel = 0;const int greenChannel = 1;const int blueChannel = 2;const int resolution = 8;WebServer webServer(80);String webpage = ""
"<!DOCTYPE html><html><head><title>RGB control</title><meta name='mobile-web-app-capable' content='yes' />""<meta name='viewport' content='width=device-width' /></head><body style='margin: 0px; padding: 0px;'>""<canvas id='colorspace'></canvas></body>""<script type='text/javascript'>""(function () {"" var canvas = document.getElementById('colorspace');"" var ctx = canvas.getContext('2d');"" function drawCanvas() {"" var colours = ctx.createLinearGradient(0, 0, window.innerWidth, 0);"" for(var i=0; i <= 360; i+=10) {"" colours.addColorStop(i/360, 'hsl(' + i + ', 100%, 50%)');"" }"" ctx.fillStyle = colours;"" ctx.fillRect(0, 0, window.innerWidth, window.innerHeight);"" var luminance = ctx.createLinearGradient(0, 0, 0, ctx.canvas.height);"" luminance.addColorStop(0, '#ffffff');"" luminance.addColorStop(0.05, '#ffffff');"" luminance.addColorStop(0.5, 'rgba(0,0,0,0)');"" luminance.addColorStop(0.95, '#000000');"" luminance.addColorStop(1, '#000000');"" ctx.fillStyle = luminance;"" ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);"" }"" var eventLocked = false;"" function handleEvent(clientX, clientY) {"" if(eventLocked) {"" return;"" }"" function colourCorrect(v) {"" return Math.round(1023-(v*v)/64);"" }"" var data = ctx.getImageData(clientX, clientY, 1, 1).data;"" var params = ["" 'r=' + colourCorrect(data[0]),"" 'g=' + colourCorrect(data[1]),"" 'b=' + colourCorrect(data[2])"" ].join('&');"" var req = new XMLHttpRequest();"" req.open('POST', '?' + params, true);"" req.send();"" eventLocked = true;"" req.onreadystatechange = function() {"" if(req.readyState == 4) {"" eventLocked = false;"" }"" }"" }"" canvas.addEventListener('click', function(event) {"" handleEvent(event.clientX, event.clientY, true);"" }, false);"" canvas.addEventListener('touchmove', function(event){"" handleEvent(event.touches[0].clientX, event.touches[0].clientY);""}, false);"" function resizeCanvas() {"" canvas.width = window.innerWidth;"" canvas.height = window.innerHeight;"" drawCanvas();"" }"" window.addEventListener('resize', resizeCanvas, false);"" resizeCanvas();"" drawCanvas();"" document.ontouchmove = function(e) {e.preventDefault()};"" })();""</script></html>";
void handleRoot() {String red_pin = webServer.arg(0);String green_pin = webServer.arg(1);String blue_pin = webServer.arg(2);if((red_pin != "") && (green_pin != "") && (blue_pin != "")){//ledcWrite(redChannel, 1023 - red_pin.toInt());//ledcWrite(greenChannel, 1023 - green_pin.toInt());//ledcWrite(blueChannel, 1023 - blue_pin.toInt());
ledcWrite(red_pinn, 1023 - red_pin.toInt());ledcWrite(green_pinn, 1023 - green_pin.toInt());ledcWrite(blue_pinn, 1023 - blue_pin.toInt());}Serial.print("R-Rojo: ");Serial.println(red_pin.toInt());Serial.print("G-Verde: ");Serial.println(green_pin.toInt());Serial.print("B-Azul: ");Serial.println(blue_pin.toInt());Serial.println();webServer.send(200, "text/html", webpage);}
void setup() {//ledcSetup(redChannel, frequency, resolution);//ledcSetup(greenChannel, frequency, resolution);//ledcSetup(blueChannel, frequency, resolution);//ledcAttachPin(red_pin, redChannel);//ledcAttachPin(green_pin, greenChannel);//ledcAttachPin(blue_pin, blueChannel);// https://espressif-docs.readthedocs-hosted.com/projects/arduino-esp32/en/latest/api/ledc.htmlledcAttach(red_pinn, frequency, resolution);ledcAttach(green_pinn, frequency, resolution);ledcAttach(blue_pinn, frequency, resolution);delay(1000);Serial.begin(115200);Serial.println();WiFi.mode(WIFI_STA);WiFi.begin(ssid, password);Serial.print("Connecting to WiFi ..");while (WiFi.status() != WL_CONNECTED) {Serial.print('.');delay(1000);}Serial.println(WiFi.localIP());webServer.on("/", handleRoot);webServer.begin();}void loop() {webServer.handleClient();}
Continúa en: Proyecto - 9 Relés y Web Server
Prohibida la reproducción parcial o total de este artículo sin permiso previo del autor
Comentarios
Publicar un comentario