Ejemplo de Arduino WebDigitalPins - Tutorial de la Interfaz de Control de Pines Digitales
Visión general
El ejemplo WebDigitalPins proporciona una interfaz basada en la web para controlar y monitorear todos los pines digitales de tu Arduino. Diseñado para Arduino Uno R4 WiFi y DIYables STEM V4 IoT, plataforma educativa con capacidades GPIO mejoradas, configuraciones de pines ampliadas y características educativas integradas para aprender electrónica digital. Puedes encender y apagar los pines, monitorear sus estados en tiempo real y realizar operaciones en lote a través de una interfaz web intuitiva.
Características
- Control individual de cada pin: Controla cada pin digital (0-13) por separado
- Estado en tiempo real: Monitorear los estados de los pines con indicadores visuales
- Operaciones en lote: Controla todos los pines a la vez (Todos ENCENDIDOS, Todos APAGADOS, Alternar Todo)
- Configuración de pines: Configurar pines como Entrada o Salida a través de la interfaz web
- Retroalimentación visual: Botones codificados por color muestran los estados de los pines (verde=ENCENDIDO, rojo=APAGADO)
- Diseño responsivo: Funciona en computadoras de escritorio, tabletas y dispositivos móviles
- Comunicación WebSocket: Actualizaciones instantáneas sin recargar la página
- Plataforma extensible: Actualmente implementada para Arduino Uno R4 WiFi, pero puede ampliarse a otras plataformas de hardware. Ver DIYables_WebApps_ESP32
Hardware Requerido
Or you can buy the following kits:
| 1 | × | DIYables STEM V4 IoT Starter Kit (Arduino included) | |
| 1 | × | DIYables Sensor Kit (30 sensors/displays) | |
| 1 | × | DIYables Sensor Kit (18 sensors/displays) |
Divulgación: Algunos de los enlaces proporcionados en esta sección son enlaces de afiliado de Amazon. Podemos recibir una comisión por las compras realizadas a través de estos enlaces sin costo adicional para usted. Apreciamos su apoyo.
Instrucciones de configuración
Pasos Rápidos
Siga estas instrucciones paso a paso:
- Si esta es la primera vez que usas el Arduino Uno R4 WiFi/DIYables STEM V4 IoT, consulta el tutorial sobre configurar el entorno para Arduino Uno R4 WiFi/DIYables STEM V4 IoT en el IDE de Arduino.
- Conecta la placa Arduino Uno R4/DIYables STEM V4 IoT a tu computadora usando un cable USB.
- Inicia el IDE de Arduino en tu computadora.
- Selecciona la placa Arduino Uno R4 adecuada (p. ej., Arduino Uno R4 WiFi) y el puerto COM.
- Ve al icono Bibliotecas en la barra izquierda del IDE de Arduino.
- Busca "DIYables WebApps", luego encuentra la biblioteca DIYables WebApps de DIYables
- Haz clic en el botón Instalar para instalar la biblioteca.
- Se le pedirá instalar algunas otras dependencias de bibliotecas.
- Haga clic en el botón Instalar Todo para instalar todas las dependencias de bibliotecas.
- En el IDE de Arduino, ve a Archivo Ejemplos DIYables WebApps WebDigitalPins ejemplo, o copia el código anterior y pégalo en el editor del IDE de Arduino
/*
* DIYables WebApp Library - Web Digital Pins Example
*
* This example demonstrates the Web Digital Pins feature with automatic command handling:
* - Control output pins 0-13 via web interface
* - Monitor input pins 0-13 in real-time
* - Individual pin ON/OFF control for outputs
* - Real-time pin status feedback for inputs
* - Bulk operations (All ON, All OFF, Toggle All) for outputs
*
* Hardware: Arduino Uno R4 WiFi or DIYables STEM V4 IoT
*
* Setup:
* 1. Update WiFi credentials below
* 2. Upload the sketch to your Arduino
* 3. Open Serial Monitor to see the IP address
* 4. Navigate to http://[IP_ADDRESS]/webdigitalpins
*/
#include <DIYablesWebApps.h>
// WiFi credentials - UPDATE THESE WITH YOUR NETWORK
const char WIFI_SSID[] = "YOUR_WIFI_SSID";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
// Create WebApp server and page instances using platform abstraction
UnoR4ServerFactory serverFactory;
DIYablesWebAppServer webAppsServer(serverFactory, 80, 81);
DIYablesHomePage homePage;
DIYablesWebDigitalPinsPage webDigitalPinsPage;
// Array to store the state of each digital pin (0-13). Index corresponds to pin number.
int pinStates[16] = { 0 }; // Initialize all states to LOW (0)
void setup() {
Serial.begin(9600);
delay(1000);
Serial.println("DIYables WebApp - Web Digital Pins Example");
// Add home and digital pins pages
webAppsServer.addApp(&homePage);
webAppsServer.addApp(&webDigitalPinsPage);
// Optional: Add 404 page for better user experience
webAppsServer.setNotFoundPage(DIYablesNotFoundPage());
// Pin Configuration Examples:
// Method 1: Enable specific pins individually for output control
webDigitalPinsPage.enablePin(0, WEB_PIN_OUTPUT); // Enable pin 0 (TX - use with caution)
webDigitalPinsPage.enablePin(1, WEB_PIN_OUTPUT); // Enable pin 1 (RX - use with caution)
webDigitalPinsPage.enablePin(2, WEB_PIN_OUTPUT);
webDigitalPinsPage.enablePin(3, WEB_PIN_OUTPUT);
webDigitalPinsPage.enablePin(4, WEB_PIN_OUTPUT);
//webDigitalPinsPage.enablePin(5, WEB_PIN_OUTPUT); // Comment/uncomment to disable/enable
//webDigitalPinsPage.enablePin(6, WEB_PIN_OUTPUT); // Comment/uncomment to disable/enable
webDigitalPinsPage.enablePin(13, WEB_PIN_OUTPUT); // Enable pin 13 (built-in LED)
// Method 2: Enable pins for input monitoring
webDigitalPinsPage.enablePin(8, WEB_PIN_INPUT);
webDigitalPinsPage.enablePin(9, WEB_PIN_INPUT);
//webDigitalPinsPage.enablePin(10, WEB_PIN_INPUT); // Comment/uncomment to disable/enable
//webDigitalPinsPage.enablePin(11, WEB_PIN_INPUT); // Comment/uncomment to disable/enable
// Method 3: Enable all pins at once (uncomment to use)
// for (int pin = 0; pin <= 13; pin++) {
// webDigitalPinsPage.enablePin(pin, WEB_PIN_OUTPUT); // or WEB_PIN_INPUT as needed
// }
// Method 4: Enable pins in a range using for loop (uncomment to use)
// for (int pin = 7; pin <= 11; pin++) {
// webDigitalPinsPage.enablePin(pin, WEB_PIN_OUTPUT); // or WEB_PIN_INPUT as needed
// }
// Initialize enabled pins
int outputPins[] = { 0, 1, 2, 3, 4, 13 }; // Note: Pins 0,1 are TX/RX - use with caution
for (int i = 0; i < 6; i++) {
int pin = outputPins[i];
pinMode(pin, OUTPUT);
digitalWrite(pin, LOW);
pinStates[pin] = LOW;
}
int inputPins[] = { 8, 9 };
for (int i = 0; i < 2; i++) {
int pin = inputPins[i];
pinMode(pin, INPUT); // Use INPUT_PULLUP if needed
pinStates[pin] = digitalRead(pin);
}
// Start the WebApp server
if (!webAppsServer.begin(WIFI_SSID, WIFI_PASSWORD)) {
while (1) {
Serial.println("Failed to start WebApp server!");
delay(1000);
}
}
// Return the current state to display on Web App
webDigitalPinsPage.onPinRead([](int pin) {
return pinStates[pin]; // Return the current state of the pin
// You can implement custom read logic here if needed
});
// Handle the control request from Web App (for output pins)
webDigitalPinsPage.onPinWrite([](int pin, int state) {
digitalWrite(pin, state);
pinStates[pin] = state;
// You can implement custom control logic here if needed
});
// Handle pin mode change requests (optional)
webDigitalPinsPage.onPinModeChange([](int pin, int mode) {
if (mode == WEB_PIN_OUTPUT) {
pinMode(pin, OUTPUT);
digitalWrite(pin, LOW);
pinStates[pin] = LOW;
} else if (mode == WEB_PIN_INPUT) {
pinMode(pin, INPUT); // or INPUT_PULLUP as needed
pinStates[pin] = digitalRead(pin);
}
// You can implement custom mode change logic here if needed
});
}
void loop() {
// Handle WebApp server communications
webAppsServer.loop();
// Monitor input pins for real-time updates
static unsigned long lastInputCheck = 0;
if (millis() - lastInputCheck > 100) { // Check every 100ms
lastInputCheck = millis();
// Check input pins for changes and send real-time updates
int inputPins[] = { 8, 9 };
for (int i = 0; i < 2; i++) {
int pin = inputPins[i];
int currentState = digitalRead(pin);
if (currentState != pinStates[pin]) {
pinStates[pin] = currentState;
// Send real-time update to web clients
webDigitalPinsPage.updatePinState(pin, currentState);
}
}
}
// Add your main application code here
delay(10);
}
- Configure las credenciales de WiFi en el código actualizando estas líneas:
const char WIFI_SSID[] = "YOUR_WIFI_NETWORK";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
- Haz clic en el botón Subir en el IDE de Arduino para subir el código al Arduino UNO R4/DIYables STEM V4 IoT
- Abre el Monitor Serial
- Consulta el resultado en el Monitor Serial. Se muestra a continuación
COM6
WebSocket client connected from: 192.168.0.5
New WebSocket connection established
WebSocket message received: SLIDER:GET_VALUES
WebSocket client connected from: 192.168.0.5
New WebSocket connection established
WebSocket message received: SLIDER:64,128
DIYables WebApp - Web Digital Pins Example
INFO: Added app /
INFO: Added app /web-digital-pins
DEBUG: Enabling pin 0 with mode OUTPUT
DEBUG: Enabling pin 1 with mode OUTPUT
DEBUG: Enabling pin 2 with mode OUTPUT
DEBUG: Enabling pin 3 with mode OUTPUT
DEBUG: Enabling pin 4 with mode OUTPUT
DEBUG: Enabling pin 13 with mode OUTPUT
DEBUG: Enabling pin 8 with mode INPUT
DEBUG: Enabling pin 9 with mode INPUT
DIYables WebApp Library
Platform: Arduino Uno R4 WiFi
Network connected!
IP address: 192.168.0.2
HTTP server started on port 80
Configuring WebSocket server callbacks...
WebSocket server started on port 81
WebSocket URL: ws://192.168.0.2:81
WebSocket server started on port 81
==========================================
DIYables WebApp Ready!
==========================================
📱 Web Interface: http://192.168.0.2
🔗 WebSocket: ws://192.168.0.2:81
📋 Available Applications:
🏠 Home Page: http://192.168.0.2/
📟 Digital Pins: http://192.168.0.2/web-digital-pins
==========================================
Autoscroll
Clear output
9600 baud
Newline
- Si no ves nada, reinicia la placa Arduino.
- Toma nota de la dirección IP que se muestre y escribe esta dirección en la barra de direcciones de un navegador web en tu teléfono inteligente o PC.
- Ejemplo: http://192.168.0.2
- Verás la página de inicio como en la imagen de abajo:
- Haz clic en el enlace de Web Digital Pins; verás la interfaz de usuario de la aplicación Web Digital Pins como se muestra a continuación:
- O también puedes acceder a la página directamente mediante la dirección IP seguida de /web-digital-pins. Por ejemplo: http://192.168.0.2/web-digital-pins
- Prueba controlar los pines digitales haciendo clic en los botones de los pines para encenderlos/apagarlos y observa el LED integrado (pin 13) que responde a tus comandos.
Personalización Creativa - Adapta el código a tu proyecto
El ejemplo muestra diferentes formas de configurar pines para adaptarse a las necesidades de tu proyecto creativo:
2. Configurar los ajustes de pines
El ejemplo muestra diferentes formas de configurar pines:
Método 1: Habilitar pines específicos
// Enable individual pins for output control
webDigitalPinsPage.enablePin(2, WEB_PIN_OUTPUT); // Pin 2 as output
webDigitalPinsPage.enablePin(3, WEB_PIN_OUTPUT); // Pin 3 as output
webDigitalPinsPage.enablePin(4, WEB_PIN_INPUT); // Pin 4 as input
Método 2: Habilitar rangos de pines
// Enable a range of pins for output control
webDigitalPinsPage.enableOutputPins(2, 13); // Pins 2-13 as outputs
Método 3: Habilitar todos los pines
// Enable all pins 0-13 for control (use with caution for pins 0,1)
webDigitalPinsPage.enableAllPins();
4. Cargar el boceto
- Selecciona tu placa de Arduino: Herramientas → Placa → Arduino UNO R4 WiFi
- Selecciona el puerto correcto: Herramientas → Puerto → [Tu puerto de Arduino]
- Haz clic en el botón Subir
5. Obtener la dirección IP
- Abre Herramientas → Monitor Serial
- Configura la tasa de baudios a 9600
- Espera a que Arduino se conecte a la red WiFi
- Toma nota de la dirección IP mostrada (p. ej., 192.168.1.100)
6. Acceder a la Interfaz de Pines Digitales
Abre tu navegador web y navega a:
http://[ARDUINO_IP_ADDRESS]/digital-pins
Ejemplo: http://192.168.1.100/digital-pins
Cómo usar
Interfaz de control de pines
La interfaz web muestra todos los pines configurados con:
- Número de pin: Muestra qué pin de Arduino (0-13)
- Estado actual: indicador ENCENDIDO (verde) o APAGADO (rojo)
- Botón de control: Haz clic para alternar el estado del pin
- Tipo de pin: Muestra si está configurado como Entrada o Salida
Control de pines individuales
- Encender PIN: Haz clic en el botón de PIN cuando aparezca "APAGADO"
- Desactivar PIN: Haz clic en el botón de PIN cuando aparezca "ENCENDIDO"
- Estado del Monitor: Los botones de PIN se actualizan automáticamente para mostrar el estado actual
Operaciones por lotes
Utilice los botones de control masivo para controlar varios pines a la vez:
Todos ENCENDIDOS
- Pone todos los pines de salida configurados en estado ALTO.
- Los pines de entrada no se ven afectados.
- Útil para probar todos los dispositivos conectados.
Todo apagado
- Pone todos los pines de salida configurados en estado bajo
- Los pines de entrada no se ven afectados
- Forma segura de deshabilitar todas las salidas
Seleccionar todo
- Invierte el estado de todos los pines de salida
- Los pines encendidos pasan a apagados, los pines apagados pasan a encendidos
- Crea efectos de iluminación interesantes
Monitoreo en tiempo real
- Los estados de los pines se actualizan automáticamente mediante WebSocket.
- Los cambios realizados en el código se reflejan en la interfaz web.
- Varios usuarios pueden monitorizar el mismo Arduino simultáneamente.
Conexiones de hardware
Ejemplos de pines de salida
Control de LED
Arduino Pin → LED (with resistor) → Ground
Pin 2 → LED Anode → 220Ω Resistor → Ground
Pin 3 → LED Anode → 220Ω Resistor → Ground
Control de relés
Arduino Pin → Relay Input
Pin 4 → Relay IN1
Pin 5 → Relay IN2
Control del motor (mediante el controlador de motor)
Arduino Pin → Motor Driver Input
Pin 6 → Motor Driver IN1
Pin 7 → Motor Driver IN2
Pin 9 → Motor Driver ENA (PWM)
Ejemplos de Pines de Entrada
Cambiar entrada
Switch → Arduino Pin (with pull-up resistor)
Switch → Pin 8 → 10kΩ resistor → 5V
→ GND
Entrada del sensor
Sensor Signal → Arduino Pin
PIR Sensor → Pin 10
Ultrasonic → Pin 11 (Echo)
Personalización del código
Agregar callbacks de cambio de pin
Monitorear cuando los pines cambian de estado:
void setup() {
// Set callback for pin state changes
webDigitalPinsPage.onPinChange([](int pin, bool state) {
Serial.print("Pin ");
Serial.print(pin);
Serial.print(" changed to: ");
Serial.println(state ? "HIGH" : "LOW");
// Add your custom logic here
if (pin == 13 && state == HIGH) {
Serial.println("Built-in LED turned ON!");
}
});
}
Inicialización personalizada de PIN
Establecer pines específicos en los estados deseados al inicio:
void setup() {
// Initialize pins to specific states
webDigitalPinsPage.setPinState(2, HIGH); // Turn on pin 2
webDigitalPinsPage.setPinState(3, LOW); // Turn off pin 3
// Configure pin modes
pinMode(4, INPUT_PULLUP); // Pin 4 as input with pull-up
pinMode(5, OUTPUT); // Pin 5 as output
}
Lectura de pines de entrada
Monitoree los pines de entrada en su bucle principal:
void loop() {
static unsigned long lastRead = 0;
if (millis() - lastRead > 1000) { // Read every second
// Read input pins and update web interface
for (int pin = 0; pin <= 13; pin++) {
if (webDigitalPinsPage.isPinEnabled(pin) &&
webDigitalPinsPage.getPinMode(pin) == WEB_PIN_INPUT) {
bool currentState = digitalRead(pin);
webDigitalPinsPage.updatePinState(pin, currentState);
}
}
lastRead = millis();
}
}
Características avanzadas
Grupos de pines
Crea grupos lógicos de pines para funciones relacionadas:
// Define pin groups
const int LED_PINS[] = {2, 3, 4, 5};
const int RELAY_PINS[] = {6, 7, 8, 9};
void controlLEDGroup(bool state) {
for (int pin : LED_PINS) {
webDigitalPinsPage.setPinState(pin, state);
}
}
void controlRelayGroup(bool state) {
for (int pin : RELAY_PINS) {
webDigitalPinsPage.setPinState(pin, state);
}
}
Generación de Patrones
Crear patrones o secuencias de iluminación:
void runLightPattern() {
static unsigned long lastChange = 0;
static int currentPin = 2;
if (millis() - lastChange > 500) { // Change every 500ms
// Turn off all pins
for (int pin = 2; pin <= 13; pin++) {
webDigitalPinsPage.setPinState(pin, LOW);
}
// Turn on current pin
webDigitalPinsPage.setPinState(currentPin, HIGH);
// Move to next pin
currentPin++;
if (currentPin > 13) currentPin = 2;
lastChange = millis();
}
}
Integración del control PWM
Combine con el control analógico para funciones avanzadas:
void setup() {
// Enable digital pins for on/off control
webDigitalPinsPage.enablePin(9, WEB_PIN_OUTPUT);
webDigitalPinsPage.enablePin(10, WEB_PIN_OUTPUT);
// Set PWM pins for brightness control
analogWrite(9, 128); // 50% brightness
analogWrite(10, 255); // 100% brightness
}
Consideraciones de Seguridad
Pautas para el uso de pines
Pines 0 y 1 (TX/RX)
- Se usa para la comunicación serial
- Evite su uso a menos que sea absolutamente necesario
- Puede interferir con la programación y la depuración
Pin 13 (LED incorporado)
- Seguro para pruebas
- El LED incorporado proporciona retroalimentación visual
- Bueno para pruebas iniciales
Pines 2-12
- Seguro para entradas/salidas digitales generales
- Recomendado para la mayoría de las aplicaciones
- Sin consideraciones especiales
Limitaciones actuales
Corriente máxima por pin: 40 mA
- Usa resistencias limitadoras de corriente con LEDs
- Usa transistores o relés para cargas de alta corriente
- Considera el consumo total de corriente
Niveles de tensión: lógica de 3,3 V
- Arduino Uno R4 WiFi utiliza lógica de 3,3 V
- Asegúrate de que los dispositivos conectados sean compatibles
- Utiliza convertidores de nivel para dispositivos de 5 V si es necesario
Solución de problemas
Problemas comunes
1. PIN no responde
- Verificar que el pin esté habilitado en el código
- Verificar las conexiones de hardware
- Verificar si hay cortocircuitos
- Confirmar el modo del pin (ENTRADA/SALIDA)
2. La interfaz web no se actualiza
- Verificar el estado de la conexión WebSocket
- Refrescar la página del navegador
- Verificar la conectividad de la red
- Verificar el Monitor Serial en busca de errores
3. Las operaciones en lote no funcionan
- Asegúrese de que los pines estén configurados como salidas
- Verifique las limitaciones de hardware
- Verifique la capacidad de la fuente de alimentación
- Monitoree las condiciones de sobrecorriente
4. Pines de entrada que muestran estados incorrectos
- Verificar resistencias de pull-up y pull-down adecuadas
- Verificar los niveles de la señal de entrada
- Verificar interferencias electromagnéticas
- Confirmar la configuración de los pines
Consejos de depuración
Habilitar salida de depuración:
void debugPinStates() {
Serial.println("=== Pin States ===");
for (int pin = 0; pin <= 13; pin++) {
if (webDigitalPinsPage.isPinEnabled(pin)) {
Serial.print("Pin ");
Serial.print(pin);
Serial.print(": ");
Serial.print(digitalRead(pin) ? "HIGH" : "LOW");
Serial.print(" (");
Serial.print(webDigitalPinsPage.getPinMode(pin) == WEB_PIN_OUTPUT ? "OUTPUT" : "INPUT");
Serial.println(")");
}
}
Serial.println("==================");
}
Ideas de Proyectos
Automatización del hogar
- Luces de la sala de control
- Operar las persianas
- Controlar los sistemas de calefacción y refrigeración
- Integración del sistema de seguridad
Automatización del jardín
- Control del sistema de riego
- Gestión de luces de cultivo
- Regulación de la temperatura
- Control de la humedad
Control del taller
- Control de potencia de la herramienta
- Gestión de iluminación
- Sistema de ventilación
- Interbloqueos de seguridad
Proyectos Educativos
- Demostraciones de puertas lógicas
- Simulación de semáforo
- Proyectos de sistemas de alarma
- Experimentos de control remoto
Ejemplos de Integración
Iluminación activada por movimiento
void setup() {
webDigitalPinsPage.enablePin(2, WEB_PIN_OUTPUT); // LED
webDigitalPinsPage.enablePin(3, WEB_PIN_INPUT); // PIR sensor
pinMode(3, INPUT);
}
void loop() {
if (digitalRead(3) == HIGH) { // Motion detected
webDigitalPinsPage.setPinState(2, HIGH); // Turn on LED
delay(5000); // Keep on for 5 seconds
webDigitalPinsPage.setPinState(2, LOW); // Turn off LED
}
}
Ventilador con control de temperatura
void loop() {
float temperature = getTemperature(); // Your temperature reading function
if (temperature > 25.0) {
webDigitalPinsPage.setPinState(4, HIGH); // Turn on fan
} else {
webDigitalPinsPage.setPinState(4, LOW); // Turn off fan
}
}
Próximos pasos
Después de dominar el ejemplo WebDigitalPins, intenta:
- WebSlider - Para control PWM y analógico
- WebJoystick - Para control direccional
- WebMonitor - Para depuración y monitorización
- MultipleWebApps - Combinando todas las características
Soporte
Para ayuda adicional:
- Consulta la documentación de la API de referencia
- Visita los tutoriales de DIYables: https://newbiely.com/tutorials/arduino-uno-r4/arduino-uno-r4-diyables-webapps
- Foros de la comunidad de Arduino