ESP32: cómo programarlo y controlar un LED desde una web con slider
ESP32: primeras notas y por qué engancha 🔌
El ESP32 es uno de esos microcontroladores que cuando pruebas, ya no quieres soltar. Tiene WiFi, Bluetooth, potencia de sobra y un precio ridículo para todo lo que ofrece.
En mi caso, lo interesante no es solo encender LEDs, sino que puede servir páginas web. Es decir, puedes crear interfaces sin apps externas, directamente accesibles desde el navegador.
Cómo programar un ESP32 🧠
Opción 1: Arduino IDE (la más directa)
Es la forma más común:
- Instalas Arduino IDE
- Añades soporte ESP32
- Conectas por USB
- Subes el código
El flujo es muy parecido a Arduino clásico.
Opción 2: ESP-IDF (más profesional)
Framework oficial. Más potente, pero también más complejo.
- Mejor control del hardware
- Más cercano a bajo nivel
- Curva de aprendizaje más alta
Opción 3: MicroPython 🐍
Si vienes de Python, esto es bastante cómodo:
- Código más limpio
- Ideal para prototipos
- Menos eficiente que C++
Opciones online 🌐
Aquí es donde se pone interesante.
🧪 Simulación: Wokwi
- Simulas el ESP32 en el navegador
- No necesitas instalar nada
- Puedes probar código rápidamente
👉 Perfecto para experimentar sin hardware.
⚙️ Subida de código con ESP Web Tools
Herramienta online que permite flashear el ESP32 directamente desde el navegador:
👉 https://esptool.spacehuhn.com/
- No necesitas instalar nada
- Funciona vía Web Serial
- Ideal para demos o distribución de firmware
👑 Y la joya de la corona ESP Terminator
Un flasheador online no sólo de nuestros propios binarios, sino de herramientas como Marauder, M5launcher, Honeypot o Meshtastic entre otros.
Conectar → Seleciconar firmware → Flashear → Disfrutar
Servir una web desde el ESP32 🌍
Aquí viene la magia: el ESP32 puede actuar como servidor web.
👉 La web se guarda en memoria interna 👉 Se accede mediante su IP (ej: 192.168.1.50) 👉 No necesitas hosting externo
Ejemplo práctico: controlar un LED con slider 💡
Qué vamos a hacer
- Un slider → controla brillo
- Un botón → encender/apagar
- Una web → alojada en el ESP32
Código completo
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
#include <WiFi.h>
#include <WebServer.h>
const char* ssid = "TU_WIFI";
const char* password = "TU_PASSWORD";
WebServer server(80);
const int ledPin = 5;
int brightness = 0;
bool ledState = true;
// HTML de la web
String html = R"rawliteral(
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Control LED ESP32</title>
</head>
<body style="text-align:center;">
<h2>Control de LED</h2>
<input type="range" min="0" max="255" value="0" id="slider"
onchange="updateBrightness(this.value)">
<p>
<button onclick="toggleLED()">Encender / Apagar</button>
</p>
<script>
function updateBrightness(val) {
fetch("/brightness?value=" + val);
}
function toggleLED() {
fetch("/toggle");
}
</script>
</body>
</html>
)rawliteral";
void handleRoot() {
server.send(200, "text/html", html);
}
void handleBrightness() {
brightness = server.arg("value").toInt();
if (ledState) {
ledcWrite(0, brightness);
}
server.send(200, "text/plain", "OK");
}
void handleToggle() {
ledState = !ledState;
if (ledState) {
ledcWrite(0, brightness);
} else {
ledcWrite(0, 0);
}
server.send(200, "text/plain", "OK");
}
void setup() {
Serial.begin(115200);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
}
Serial.println(WiFi.localIP());
ledcSetup(0, 5000, 8);
ledcAttachPin(ledPin, 0);
server.on("/", handleRoot);
server.on("/brightness", handleBrightness);
server.on("/toggle", handleToggle);
server.begin();
}
void loop() {
server.handleClient();
}
Qué está pasando aquí ⚙️
WiFi.begin()conecta a tu redWebServercrea el servidor- El HTML vive dentro del propio código
- El navegador llama endpoints (
/brightness,/toggle) - PWM controla el LED
Cómo usarlo paso a paso
- Subes el código
- Abres el monitor serie
- Copias la IP que aparece
- La pegas en el navegador
👉 Y ya tienes tu interfaz funcionando
Detalle importante: PWM en ESP32
El brillo no es “analógico real”, es PWM:
Duty\ Cycle = \frac{Tiempo\ encendido}{Periodo\ total}
Cuanto mayor es el duty cycle → más brillo.
Ideas que salen de aquí 🚀
- Controlar relés (luces de casa)
- Crear paneles IoT
- Leer sensores y mostrarlos en web
- Montar dashboards sin backend
Este tipo de montaje es donde el ESP32 empieza a sentirse más como un mini servidor web que como un microcontrolador clásico.
❓ FAQ
¿Dónde se aloja la página web del ESP32?
La web se aloja directamente en la memoria del ESP32, que actúa como servidor web. Se accede a través de su dirección IP en la red local.
¿Se puede programar el ESP32 sin instalar nada?
Sí, existen plataformas online como Wokwi que permiten simular y programar el ESP32 desde el navegador, aunque para subir código real al dispositivo puedes usar herramientas como ESP Web Tools.
¿Cómo se controla el brillo de un LED con ESP32?
Se utiliza PWM (modulación por ancho de pulso), ajustando el duty cycle para variar la intensidad del LED.
¿Qué lenguaje se usa para programar el ESP32?
Principalmente C/C++ usando el entorno Arduino o ESP-IDF, aunque también se puede usar MicroPython o JavaScript en algunos entornos.