Home
ESP32

Exemplo ESP32 WebDigitalPins - Tutorial de Interface de Controle de Pinos Digitais

Visão Geral

O exemplo WebDigitalPins oferece uma interface web para controlar e monitorar todos os pinos digitais do seu Arduino. Projetado para a plataforma educacional ESP32, com recursos avançados de GPIO, configurações de pinos estendidas e recursos educacionais embutidos para aprender eletrônica digital. Você pode ligar/desligar pinos, monitorar seus estados em tempo real e executar operações em lote por meio de uma interface web intuitiva.

Exemplo Arduino WebDigitalPins - Tutorial de Interface de Controle de Pinos Digitais

Recursos

  • Controle Individual de Pinos: Controle cada pino digital (0-13) separadamente
  • Status em Tempo Real: Monitore os estados dos pinos com indicadores visuais
  • Operações em Lote: Controle todos os pinos de uma vez (All ON, All OFF, Toggle All)
  • Configuração de Pinos: Defina pinos como Input ou Output pela interface web
  • Feedback Visual: Botões coloridos mostram os estados dos pinos (verde=ON, vermelho=OFF)
  • Design Responsivo: Funciona em desktop, tablet e celular
  • Comunicação WebSocket: Atualizações instantâneas sem recarregar a página

Hardware Necessário

1×38-pin ESP32 ESP-WROOM-32 Dev Module - Narrow
1×(Alternativa) 38-pin ESP32 ESP-WROOM-32 Dev Module - Wide
1×(Alternativa) 30-pin ESP32 ESP-WROOM-32 Dev Module - Wide
1×(Alternativa) ESP32 Uno-form board
1×(Alternativa) ESP32 S3 Uno-form board
1×Cabo USB Tipo-A para Tipo-C (para PC com USB-A)
1×Cabo USB Tipo-C para Tipo-C (para PC com USB-C)
1×(Recomendado) Placa de Expansão com Bornes de Parafuso para ESP32
1×(Recomendado) Breakout Expansion Board for ESP32
1×(Recomendado) Divisor de Alimentação para ESP32

Or you can buy the following kits:

1×DIYables ESP32 Starter Kit (ESP32 included)
1×DIYables ESP32 S3 Starter Kit (ESP32 S3 included)
1×DIYables Sensor Kit (18 sensors/displays)
Divulgação: Alguns dos links desta seção são links de afiliado da Amazon. Podemos receber uma comissão pelas compras feitas por meio desses links, sem custo adicional para você. Agradecemos o seu apoio.

Instruções de Configuração

Passos Rápidos

Siga estas instruções passo a passo:

  • Se esta é a sua primeira vez usando o ESP32, consulte o tutorial sobre como configurar o ambiente para ESP32 na Arduino IDE.
  • Conecte a placa ESP32 ao seu computador usando um cabo USB.
  • Abra a Arduino IDE no seu computador.
  • Selecione a placa ESP32 apropriada (por exemplo, ESP32 Dev Module) e a porta COM.
  • Vá até o ícone Libraries na barra lateral esquerda da Arduino IDE.
  • Pesquise "DIYables ESP32 WebApps" e encontre a biblioteca DIYables ESP32 WebApps da DIYables
  • Clique no botão Install para instalar a biblioteca.
DIYables ESP32 WebApps Library
  • Você será solicitado a instalar algumas outras bibliotecas de dependência
  • Clique no botão Install All para instalar todas as dependências da biblioteca.
DIYables ESP32 WebApps dependency
  • Na Arduino IDE, vá em File Examples DIYables ESP32 WebApps WebDigitalPins, ou copie o código acima e cole no editor da Arduino IDE
/* * 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: ESP32 Boards * * 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 <DIYables_ESP32_Platform.h> #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 ESP32ServerFactory 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 ESP32 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 as credenciais de WiFi no código atualizando estas linhas:
const char WIFI_SSID[] = "YOUR_WIFI_NETWORK"; const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
  • Clique no botão Upload na Arduino IDE para carregar o código no ESP32
  • Abra o Serial Monitor
  • Veja o resultado no Serial Monitor. Ele será parecido com o abaixo
∞
Newbiely | Arduino IDE 2.3.8
──
☐
✕
File
Edit
Sketch
Tools
Help
ESP32 Dev Module
Newbiely.ino
···
8 Serial.println("Hello World!");
Output
Serial Monitor
Message (Enter to send message to 'ESP32 Dev Module' on 'COM15')
New Line
9600 baud
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: ESP32 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 ==========================================
Ln 11, Col 1
ESP32 Dev Module on COM15
2
  • Se você não vir nada, reinicie a placa ESP32.
  • Anote o endereço IP exibido e digite esse endereço na barra de endereços de um navegador web no seu celular ou PC.
  • Exemplo: http://192.168.0.2
  • Você verá a home page como na imagem abaixo:
Home page do DIYables WebApp no ESP32 com o app Web Digital Pins
  • Clique no link Web Digital Pins e você verá a interface do app Web Digital Pins como abaixo:
App Web Digital Pins do DIYables WebApp no ESP32
  • Você também pode acessar a página diretamente pelo endereço IP seguido de /web-digital-pins. Por exemplo: http://192.168.0.2/web-digital-pins
  • Experimente controlar os pinos digitais clicando nos botões dos pinos para ligá-los/desligá-los (ON/OFF) e observe o LED embutido (pino 13) respondendo aos seus comandos.

Personalização Criativa - Adapte o Código ao Seu Projeto

O exemplo mostra diferentes formas de configurar os pinos para atender às necessidades do seu projeto criativo:

2. Configure os Ajustes dos Pinos

O exemplo mostra diferentes formas de configurar os pinos:

Método 1: Ativar Pinos 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: Ativar Faixas de Pinos

// Enable a range of pins for output control webDigitalPinsPage.enableOutputPins(2, 13); // Pins 2-13 as outputs

Método 3: Ativar Todos os Pinos

// Enable all pins 0-13 for control (use with caution for pins 0,1) webDigitalPinsPage.enableAllPins();

4. Carregue o Sketch

  1. Selecione a sua placa ESP32: Tools → Board → ESP32
  2. Selecione a porta correta: Tools → Port → [Your ESP32 Port]
  3. Clique no botão Upload

5. Obtenha o Endereço IP

  1. Abra Tools → Serial Monitor
  2. Defina a taxa de transmissão (baud rate) como 9600
  3. Aguarde o ESP32 se conectar ao WiFi
  4. Anote o endereço IP exibido (por exemplo, 192.168.1.100)

6. Acesse a Interface de Pinos Digitais

Abra o seu navegador web e vá até:

http://[ARDUINO_IP_ADDRESS]/digital-pins

Exemplo: http://192.168.1.100/digital-pins

Como Usar

Interface de Controle de Pinos

A interface web exibe todos os pinos configurados com:

  • Número do Pino: Mostra qual pino do ESP32 (0-13)
  • Estado Atual: Indicador ON (verde) ou OFF (vermelho)
  • Botão de Controle: Clique para alternar o estado do pino
  • Tipo do Pino: Mostra se está configurado como Input ou Output

Controle Individual de Pinos

  1. Ligar o Pino (ON): Clique no botão do pino quando ele mostrar "OFF"
  2. Desligar o Pino (OFF): Clique no botão do pino quando ele mostrar "ON"
  3. Monitorar o Estado: Os botões dos pinos são atualizados automaticamente para mostrar o estado atual

Operações em Lote

Use os botões de controle em lote para controlar vários pinos de uma vez:

All ON

  • Coloca todos os pinos de saída configurados em estado HIGH
  • Os pinos de entrada não são afetados
  • Útil para testar todos os dispositivos conectados

All OFF

  • Coloca todos os pinos de saída configurados em estado LOW
  • Os pinos de entrada não são afetados
  • Forma segura de desativar todas as saídas

Toggle All

  • Inverte o estado de todos os pinos de saída
  • Pinos ON passam a OFF, pinos OFF passam a ON
  • Cria efeitos de iluminação interessantes

Monitoramento em Tempo Real

  • Os estados dos pinos são atualizados automaticamente via WebSocket
  • As alterações feitas no código são refletidas na interface web
  • Vários usuários podem monitorar o mesmo ESP32 simultaneamente

Conexões de Hardware

Exemplos de Pinos de Saída

Controle de LED

Arduino Pin → LED (with resistor) → Ground Pin 2 → LED Anode → 220Ω Resistor → Ground Pin 3 → LED Anode → 220Ω Resistor → Ground

Controle de Relé

Arduino Pin → Relay Input Pin 4 → Relay IN1 Pin 5 → Relay IN2

Controle de Motor (via Driver de Motor)

Arduino Pin → Motor Driver Input Pin 6 → Motor Driver IN1 Pin 7 → Motor Driver IN2 Pin 9 → Motor Driver ENA (PWM)

Exemplos de Pinos de Entrada

Entrada de Chave

Switch → ESP32 Pin (with pull-up resistor) Switch → Pin 8 → 10kΩ resistor → 5V → GND

Entrada de Sensor

Sensor Signal → ESP32 Pin PIR Sensor → Pin 10 Ultrasonic → Pin 11 (Echo)

Personalização do Código

Adicionando Callbacks de Mudança de Pino

Monitore quando os pinos mudam 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!"); } }); }

Inicialização Personalizada de Pinos

Defina pinos específicos nos estados desejados na inicialização:

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 }

Lendo Pinos de Entrada

Monitore os pinos de entrada no seu loop 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(); } }

Recursos Avançados

Grupos de Pinos

Crie grupos lógicos de pinos para funções 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); } }

Geração de Padrões

Crie padrões ou sequências de iluminação:

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(); } }

Integração com Controle PWM

Combine com o controle analógico para recursos avançados:

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 }

Considerações de Segurança

Diretrizes de Uso dos Pinos

Pinos 0 e 1 (TX/RX)

  • Usados para comunicação Serial
  • Evite usá-los, a menos que seja absolutamente necessário
  • Podem interferir na programação e na depuração

Pino 13 (LED Embutido)

  • Seguro para usar em testes
  • O LED embutido fornece feedback visual
  • Bom para os testes iniciais

Pinos 2-12

  • Seguros para I/O digital em geral
  • Recomendados para a maioria das aplicações
  • Sem considerações especiais

Limitações de Corrente

Corrente Máxima por Pino: 40mA

  • Use resistores limitadores de corrente com LEDs
  • Use transistores ou relés para cargas de alta corrente
  • Considere o consumo total de corrente

Níveis de Tensão: Lógica de 3.3V

  • O ESP32 usa lógica de 3.3V
  • Garanta que os dispositivos conectados sejam compatíveis
  • Use conversores de nível para dispositivos de 5V, se necessário

Solução de Problemas

Problemas Comuns

1. O pino não responde

  • Verifique se o pino está ativado no código
  • Confira as conexões de hardware
  • Verifique se há curtos-circuitos
  • Confirme o modo do pino (INPUT/OUTPUT)

2. A interface web não atualiza

  • Verifique o status da conexão WebSocket
  • Atualize a página do navegador
  • Confira a conectividade de rede
  • Verifique o Serial Monitor em busca de erros

3. As operações em lote não funcionam

  • Garanta que os pinos estejam configurados como saídas
  • Verifique se há limitações de hardware
  • Confira a capacidade da fonte de alimentação
  • Monitore condições de sobrecorrente

4. Pinos de entrada mostrando estados errados

  • Verifique se há resistores de pull-up/pull-down adequados
  • Confira os níveis do sinal de entrada
  • Verifique se há interferência eletromagnética
  • Confirme a configuração do pino

Dicas de Depuração

Ative a saída de depuração:

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("=================="); }

Ideias de Projetos

Automação Residencial

  • Controlar as luzes de um cômodo
  • Operar persianas de janelas
  • Controlar sistemas de aquecimento/refrigeração
  • Integração com sistema de segurança

Automação de Jardim

  • Controle do sistema de irrigação
  • Gerenciamento de luzes de cultivo
  • Regulagem de temperatura
  • Controle de umidade

Controle de Oficina

  • Controle de alimentação de ferramentas
  • Gerenciamento de iluminação
  • Sistema de ventilação
  • Intertravamentos de segurança

Projetos Educacionais

  • Demonstrações de portas lógicas
  • Simulação de semáforo
  • Projetos de sistema de alarme
  • Experimentos de controle remoto

Exemplos de Integração

Iluminação Ativada por Movimento

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 Controlado por 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 Passos

Depois de dominar o exemplo WebDigitalPins, experimente:

  1. WebSlider - Para controle PWM e analógico
  2. WebJoystick - Para controle direcional
  3. WebMonitor - Para depuração e monitoramento
  4. MultipleWebApps - Combinando todos os recursos

Tutorial em Vídeo

O vídeo de demonstração abaixo usa o seguinte código:

/* * Este código de ESP32 foi desenvolvido por pt.newbiely.com * Este código de ESP32 é disponibilizado ao público sem nenhuma restrição. * Para tutoriais completos e diagramas de ligação, visite: * https://pt.newbiely.com/tutorials/esp32/diyables-esp32-web-apps-web-digital-pins */ /* * 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: ESP32 Boards * * 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 <DIYables_ESP32_Platform.h> #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 ESP32ServerFactory 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) bool buzzerState = false; void setup() { Serial.begin(9600); delay(1000); Serial.println("DIYables ESP32 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(13, WEB_PIN_OUTPUT); // Enable pin 0 (TX - use with caution) webDigitalPinsPage.enablePin(5, WEB_PIN_OUTPUT); // Enable pin 1 (RX - use with caution) webDigitalPinsPage.enablePin(2, WEB_PIN_OUTPUT); webDigitalPinsPage.enablePin(4, WEB_PIN_OUTPUT); //webDigitalPinsPage.enablePin(27, 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[] = { 13,2,4,5 }; // Note: Pins 0,1 are TX/RX - use with caution for (int i = 0; i < 4; 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) { if(pin == 12){ buzzerState = state; } else{ 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(); if(buzzerState){ tone(13, 3000); } else{ noTone(13); } // 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); }

Suporte

Tutoriais Relacionados

※ NOSSAS MENSAGENS

  • Fique à vontade para compartilhar o link deste tutorial. Porém, por favor, não use nosso conteúdo em outros sites. Investimos muito esforço e tempo para criar este conteúdo, por favor respeite nosso trabalho!
DIVULGAÇÃO
pt.newbiely.com participa do Programa de Associados da Amazon Services LLC, um programa de publicidade de afiliados criado para oferecer aos sites um meio de ganhar taxas de publicidade ao anunciar e criar links para Amazon.com, Amazon.it, Amazon.de, Amazon.co.uk, Amazon.ca, Amazon.de, Amazon.es, Amazon.nl, Amazon.pl e Amazon.se
Copyright © 2026 pt.newbiely.com. Todos os direitos reservados.
Termos e Condições | Política de Privacidade
Email: newbiely.com@gmail.com