Components

ESP32-C3

x 1

Tools, APP Software Used etc.

	arduino IDE Arduino
	Genmitsu CNC 3018-PRO Router

Description

Control de luces led con servidor web y ESP32 C3

Te comparto todos los archivos que necesitas para realizar esta practica, encontraras 2 códigos de programación, una es de "Led rojo web" en donde controlas un led de 5mm conectado a una proto. El segundo código controla 2 leds de color blanco y 2 de color blanco cálido.

Estoy utilizando la versión super mini del ESP32 C3.

Como propuesta para aplicar estos conocimientos he realizado una lampara con diseño de apple para poder controlarla desde el celular vía WIFI.

Me he apoyado de AI para la programación.

NOTA!

El código de programación que se puede descargar corresponde al código que solo controla 1 led (Practica en la protoboard)

El código que esta visible y que puedes copiar es el código que controla los 4 leds (2 de color blanco y 2 de color blanco cálido)

Promp DeepSeek

"Crea un programa para arduino IDE en donde se utilizara la placa ESP 32 C3 y en el pin 10 tendra conectado un led, este led se activara por medio de un boton que diga encender lampara, y se activara a traves de una pagina web alojada en el ESP32, el ESP funcionara como el servidor y es tambien el punto de acceso, tambien habra un boton que diga apagar lampara y que al presionarlo apagara el led, la red se llamara apple lamp y la contraseña sera 12345678"

Lista de materiales para PCB

1 ESP32 C3 (Yo utilizo la versión super mini)
1 AMS1117 Regulador de voltaje
1 Switch cola de ratón
1 Porta pilas AA
1 Buzzer 9650 (Opcional)
4 Resistencias 1206 91 Ohms
4 Leds 2835 (Colores a tu elección)

Materiales solo para practica en protoboard:

1 ESP32 C3 (Yo utilizo la versión super mini)
1 Resistencias 1 K
1 Led 5mm (Color a tu elección)

Código G para corte en CNC en link de la descripción del video

Tutorial completo en el siguiente vídeo

Code

Aquí están los dos códigos, leer texto descriptivo de arriba

Led Rojo web.ino

Arduino

#include <WiFi.h>
#include <WebServer.h>

// Definición de pines
#define LED_BLANCO_1 0     // LED luz blanca 1
#define LED_BLANCO_2 10    // LED luz blanca 2
#define LED_CALIDO_1 20    // LED luz cálida 1
#define LED_CALIDO_2 21    // LED luz cálida 2

// Configuración del punto de acceso
const char* ssid = "apple lamp";
const char* password = "12345678";

WebServer server(80);  // Crear servidor en el puerto 80

// Variables de estado
String colorActual = "apagado";  // Puede ser: "blanco", "calido", "apagado"

void setup() {
  Serial.begin(115200);
  delay(10);
  
  // Configurar pines de los LEDs como salida
  pinMode(LED_BLANCO_1, OUTPUT);
  pinMode(LED_BLANCO_2, OUTPUT);
  pinMode(LED_CALIDO_1, OUTPUT);
  pinMode(LED_CALIDO_2, OUTPUT);
  
  // Inicializar todos los LEDs apagados
  apagarTodosLosLEDs();
  
  // Crear punto de acceso
  Serial.println("Configurando punto de acceso...");
  WiFi.softAP(ssid, password);
  
  IPAddress myIP = WiFi.softAPIP();
  Serial.print("Dirección IP del AP: ");
  Serial.println(myIP);
  
  // Configurar rutas del servidor web
  server.on("/", handleRoot);
  server.on("/blanco", handleBlanco);
  server.on("/calido", handleCalido);
  server.on("/apagar", handleApagar);
  
  server.begin();
  Serial.println("Servidor HTTP iniciado");
}

void loop() {
  server.handleClient();
}

void apagarTodosLosLEDs() {
  digitalWrite(LED_BLANCO_1, LOW);
  digitalWrite(LED_BLANCO_2, LOW);
  digitalWrite(LED_CALIDO_1, LOW);
  digitalWrite(LED_CALIDO_2, LOW);
  colorActual = "apagado";
}

void handleRoot() {
  String html = "<!DOCTYPE html>";
  html += "<html lang='es'>";
  html += "<head>";
  html += "<meta charset='UTF-8'>";
  html += "<meta name='viewport' content='width=device-width, initial-scale=1.0'>";
  html += "<title>Control de Lámpara</title>";
  html += "<style>";
  html += "body { font-family: Arial, sans-serif; text-align: center; margin-top: 50px; }";
  html += "h1 { color: #333; }";
  html += ".btn { border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 10px 5px; cursor: pointer; border-radius: 5px; }";
  html += ".btn-blanco { background-color: #f5f5f5; color: black; }";
  html += ".btn-calido { background-color: #ffcc80; }";
  html += ".btn-apagar { background-color: #f44336; }";
  html += ".estado { font-size: 20px; margin: 20px; }";
  html += ".container { max-width: 500px; margin: 0 auto; }";
  html += "</style>";
  html += "</head>";
  html += "<body>";
  html += "<div class='container'>";
  html += "<h1>Control de Lámpara</h1>";
  
  // Mostrar estado actual
  html += "<p class='estado'>Estado actual: <strong>";
  if(colorActual == "blanco") {
    html += "<span style='color:#f5f5f5; text-shadow: 1px 1px 1px #000;'>LUZ BLANCA</span>";
  } else if(colorActual == "calido") {
    html += "<span style='color:#ffcc80; text-shadow: 1px 1px 1px #000;'>LUZ CÁLIDA</span>";
  } else {
    html += "<span style='color:#666;'>APAGADA</span>";
  }
  html += "</strong></p>";
  
  // Botones de control
  html += "<a href='/blanco' class='btn btn-blanco'>Luz Blanca</a>";
  html += "<a href='/calido' class='btn btn-calido'>Luz Cálida</a>";
  html += "<a href='/apagar' class='btn btn-apagar'>Apagar Lámpara</a>";
  html += "</div>";
  html += "</body>";
  html += "</html>";
  
  server.send(200, "text/html", html);
}

void handleBlanco() {
  apagarTodosLosLEDs();
  digitalWrite(LED_BLANCO_1, HIGH);
  digitalWrite(LED_BLANCO_2, HIGH);
  colorActual = "blanco";
  Serial.println("Encendido luz blanca");
  server.sendHeader("Location", "/");
  server.send(303);
}

void handleCalido() {
  apagarTodosLosLEDs();
  digitalWrite(LED_CALIDO_1, HIGH);
  digitalWrite(LED_CALIDO_2, HIGH);
  colorActual = "calido";
  Serial.println("Encendido luz cálida");
  server.sendHeader("Location", "/");
  server.send(303);
}

void handleApagar() {
  apagarTodosLosLEDs();
  Serial.println("Todos los LEDs apagados");
  server.sendHeader("Location", "/");
  server.send(303);
}

Schematic and Layout

Diagrama electrónico

Captura desde 2025-04-18 12-48-07.png

Download Gerbers Download BOM(Bill of materials)

Apr 19,2025

813 views

Control de luces led con servidor web y ESP32 C3

2 Layers PCB 62 x 49.5 mm FR-4, 1.6 mm, 1, HASL lead free, Green Solder Mask, White silkscreen

Con esta tarjeta podras controlar luces led desde una pagina web, enciende en 2 colores

813

Published: Apr 19,2025

Standard PCB

Download Gerber file 1

BOM(Bill of materials)

PCBWay Donate 10% cost To Author

File Last Updated: 2025/04/22 (GMT+8)

File update record

2025-04-2204:42:24

Parts List (BOM) is updated.

Only PCB

PCB+Assembly

Add to cart

*PCBWay community is a sharing platform. We are not responsible for any design issues and parameter issues (board thickness, surface finish, etc.) you choose.

Copy this HTML into your page to embed a link to order this shared project

Copy