Exemplo Arduino WebRTC - Tutorial de Interface de Relógio de Tempo Real
Visão Geral
O exemplo WebRTC oferece uma interface completa de relógio de tempo real para os seus projetos com Arduino. Projetado para a plataforma educacional Arduino Uno R4 WiFi e DIYables STEM V4 IoT com recursos de RTC integrados, recursos avançados de gerenciamento de tempo e integração perfeita com o ecossistema educacional. Você pode exibir as informações do relógio de tempo real, sincronizar o horário do navegador web com o Arduino e monitorar as diferenças de horário por meio de uma interface web intuitiva.
Recursos
- Exibição do Relógio de Tempo Real: Mostra o horário atual do RTC do Arduino com atualizações automáticas
- Comparação de Horário do Dispositivo: Exibe o horário do navegador web/dispositivo ao lado do horário do Arduino
- Sincronização de Horário com Um Clique: Sincroniza o RTC do Arduino com o horário do navegador web instantaneamente
- Indicador Visual de Diferença de Horário: Mostra o desvio de horário entre os dispositivos em minutos
- Formato de Horário em Duas Linhas: Formato de 12 horas AM/PM com exibição da data completa
- Interface Moderna com Gradiente: Layout em estilo de cartão com design responsivo
- Comunicação WebSocket: Atualizações bidirecionais em tempo real sem recarregar a página
- Sincronização com Fuso Horário: Usa o horário local do dispositivo para uma sincronização precisa
- Monitoramento do Status da Conexão: Indicadores visuais do estado da conexão WebSocket
- Solicitações Automáticas de Horário: Solicita o horário atual do Arduino ao carregar a página
- Extensível para Outras Plataformas: Atualmente implementado para o Arduino Uno R4 WiFi, mas pode ser estendido para outras plataformas de hardware. Veja DIYables_WebApps_ESP32
Hardware Necessário
Or you can buy the following kits:
| 1 | × | DIYables STEM V4 IoT Starter Kit (Arduino included) | |
| 1 | × | DIYables STEM V4B IoT Starter Kit (Arduino 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 Arduino Uno R4 WiFi/DIYables STEM V4 IoT, consulte o tutorial sobre como configurar o ambiente para o Arduino Uno R4 WiFi/DIYables STEM V4 IoT no Arduino IDE.
- Conecte a placa Arduino Uno R4/DIYables STEM V4 IoT ao seu computador usando um cabo USB.
- Abra o Arduino IDE no seu computador.
- Selecione a placa Arduino Uno R4 apropriada (por exemplo, Arduino Uno R4 WiFi) e a porta COM.
- Vá até o ícone Libraries na barra lateral esquerda do Arduino IDE.
- Pesquise por "DIYables WebApps" e encontre a biblioteca DIYables WebApps da DIYables
- Clique no botão Install para instalar a biblioteca.
- Será solicitado que você instale algumas outras dependências de bibliotecas
- Clique no botão Install All para instalar todas as dependências da biblioteca.
- No Arduino IDE, vá em File Examples DIYables WebApps WebRTC, ou copie o código acima e cole no editor do Arduino IDE
/*
* DIYables WebApp Library - Web RTC Example
*
* This example demonstrates the Web RTC feature:
* - Real-time clock display for both Arduino and client device
* - One-click time synchronization from web browser to Arduino
* - Hardware RTC integration for persistent timekeeping
* - Visual time difference monitoring
*
* 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]/web-rtc
*/
#include <DIYablesWebApps.h>
#include "RTC.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
UnoR4ServerFactory serverFactory;
DIYablesWebAppServer webAppsServer(serverFactory, 80, 81);
DIYablesHomePage homePage;
DIYablesWebRTCPage webRTCPage;
void setup() {
Serial.begin(9600);
delay(1000);
Serial.println("DIYables WebApp - Web RTC Example");
// Initialize RTC
RTC.begin();
// Check if RTC is running and set initial time if needed
RTCTime savedTime;
RTC.getTime(savedTime);
if (!RTC.isRunning() || savedTime.getYear() == 2000) {
Serial.println("RTC is NOT running, setting initial time...");
// Set a default time - you can modify this to match current time
RTCTime startTime(28, Month::AUGUST, 2025, 12, 0, 0, DayOfWeek::THURSDAY, SaveLight::SAVING_TIME_ACTIVE);
RTC.setTime(startTime);
Serial.println("RTC initialized with default time");
} else {
Serial.println("RTC is already running");
}
// Print initial RTC time
RTCTime initialTime;
RTC.getTime(initialTime);
Serial.print("Initial RTC Time: ");
Serial.print(initialTime.getYear());
Serial.print("/");
Serial.print(Month2int(initialTime.getMonth()));
Serial.print("/");
Serial.print(initialTime.getDayOfMonth());
Serial.print(" - ");
if (initialTime.getHour() < 10) Serial.print("0");
Serial.print(initialTime.getHour());
Serial.print(":");
if (initialTime.getMinutes() < 10) Serial.print("0");
Serial.print(initialTime.getMinutes());
Serial.print(":");
if (initialTime.getSeconds() < 10) Serial.print("0");
Serial.print(initialTime.getSeconds());
Serial.println();
// Add pages to server
webAppsServer.addApp(&homePage);
webAppsServer.addApp(&webRTCPage);
// Optional: Add 404 page for better user experience
webAppsServer.setNotFoundPage(DIYablesNotFoundPage());
// Set callback for time sync from web
webRTCPage.onTimeSyncFromWeb(onTimeSyncReceived);
// Set callback for time request from web
webRTCPage.onTimeRequestToWeb(onTimeRequested);
// Start the WebApp server
if (!webAppsServer.begin(WIFI_SSID, WIFI_PASSWORD)) {
while (1) {
Serial.println("Failed to connect to WiFi");
delay(1000);
}
}
}
void loop() {
// Handle web server
webAppsServer.loop();
// Send current time to web clients and print to Serial every 1 second
static unsigned long lastUpdate = 0;
if (millis() - lastUpdate >= 1000) {
lastUpdate = millis();
// Get current RTC time
RTCTime currentTime;
RTC.getTime(currentTime);
// Send time to web clients in human readable format
webRTCPage.sendTimeToWeb(currentTime.getYear(), Month2int(currentTime.getMonth()),
currentTime.getDayOfMonth(), currentTime.getHour(),
currentTime.getMinutes(), currentTime.getSeconds()); // Print time to Serial Monitor
Serial.print("RTC Time: ");
Serial.print(currentTime.getYear());
Serial.print("/");
Serial.print(Month2int(currentTime.getMonth()));
Serial.print("/");
Serial.print(currentTime.getDayOfMonth());
Serial.print(" - ");
if (currentTime.getHour() < 10) Serial.print("0");
Serial.print(currentTime.getHour());
Serial.print(":");
if (currentTime.getMinutes() < 10) Serial.print("0");
Serial.print(currentTime.getMinutes());
Serial.print(":");
if (currentTime.getSeconds() < 10) Serial.print("0");
Serial.print(currentTime.getSeconds());
Serial.println();
}
delay(10);
}
// Callback function called when web client sends time sync command
void onTimeSyncReceived(unsigned long unixTimestamp) {
Serial.print("Time sync received: ");
Serial.println(unixTimestamp);
// Convert Unix timestamp to RTCTime
RTCTime newTime;
newTime.setUnixTime(unixTimestamp);
// Set RTC time
RTC.setTime(newTime);
Serial.println("Arduino RTC synchronized!");
}
// Callback function called when web client requests current Arduino time
void onTimeRequested() {
// Get current RTC time and send to web in human readable format
RTCTime currentTime;
RTC.getTime(currentTime);
webRTCPage.sendTimeToWeb(currentTime.getYear(), Month2int(currentTime.getMonth()),
currentTime.getDayOfMonth(), currentTime.getHour(),
currentTime.getMinutes(), currentTime.getSeconds());
}
- 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 no Arduino IDE para fazer o upload do código para o Arduino.
- Abra o Serial Monitor no Arduino IDE
- Aguarde a conexão com o WiFi e a impressão das informações de WiFi no Serial Monitor.
- Confira o resultado no Serial Monitor. Ele se parece com o abaixo
8
Serial.println("Hello World!");
Message (Enter to send message to 'Arduino Uno R4 WiFi' on 'COM15')
New Line
9600 baud
DIYables WebApp - Web RTC Example
RTC is already running
Initial RTC Time: 2025/8/28 - 12:00:08
INFO: Added app /
INFO: Added app /web-rtc
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/
🕐 Web RTC: http://192.168.0.2/web-rtc
==========================================
- Se você não vir nada, reinicie a placa Arduino.
Usando a Interface Web
- Abra um navegador web no seu computador ou dispositivo móvel conectado à mesma rede WiFi
- Digite o endereço IP exibido no Serial Monitor no navegador web
- Exemplo: http://192.168.1.100
- Você verá a página inicial como na imagem abaixo:
- Clique no link Web RTC e você verá a interface do app Web RTC como abaixo:
- Ou você também pode acessar a página diretamente pelo endereço IP seguido de /web-rtc. Por exemplo: http://192.168.1.100/web-rtc
- Você verá a interface Web RTC mostrando:
- Horário do Arduino: Horário atual do RTC do Arduino
- Horário do Seu Dispositivo: Horário atual do seu navegador web/dispositivo
- Diferença de Horário: Diferença entre os dois horários em minutos
- Botão Sync Arduino Time: Clique para sincronizar o horário do Arduino com o do seu dispositivo
Sincronização de Horário
- Clique no botão "Sync Arduino Time" para sincronizar o RTC do Arduino com o horário local do seu dispositivo
- O processo de sincronização:
- Obtém o horário local atual do seu dispositivo (não UTC)
- Ajusta o deslocamento do fuso horário para garantir uma sincronização precisa do horário local
- Envia o timestamp para o Arduino via WebSocket
- O Arduino atualiza o seu RTC com o horário recebido
- A interface web é atualizada para mostrar o horário sincronizado
Após a sincronização, a diferença de horário deve ser mínima (geralmente 0-1 minuto)
O Arduino manterá o horário correto mesmo depois que a interface web for fechada
Explicação do Código
Componentes Principais
#include <DIYablesWebApps.h>
#include <RTC.h>
// Initialize web server and RTC page
DIYablesWebAppServer server;
DIYablesWebRTCPage rtcPage;
Função Setup
void setup() {
Serial.begin(9600);
// Initialize RTC
RTC.begin();
// Setup WiFi connection
server.setupWiFi(WIFI_SSID, WIFI_PASSWORD);
// Add RTC page to server
server.addWebApp(rtcPage);
// Set up callback functions
rtcPage.onTimeSyncFromWeb(onTimeSyncReceived);
rtcPage.onTimeRequestToWeb(onTimeRequested);
// Start the server
server.begin();
}
Funções de Callback
Callback de Sincronização de Horário:
// Called when web interface sends time sync command
void onTimeSyncReceived(unsigned long unixTimestamp) {
Serial.print("Time sync received: ");
Serial.println(unixTimestamp);
// Convert Unix timestamp to RTCTime
RTCTime newTime;
newTime.setUnixTime(unixTimestamp);
// Set RTC time
RTC.setTime(newTime);
Serial.println("Arduino RTC synchronized!");
}
Callback de Solicitação de Horário:
// Called when web interface requests current Arduino time
void onTimeRequested() {
RTCTime currentTime;
RTC.getTime(currentTime);
// Send current time to web interface
rtcPage.sendTimeToWeb(
currentTime.getYear(),
currentTime.getMonth(),
currentTime.getDayOfMonth(),
currentTime.getHour(),
currentTime.getMinutes(),
currentTime.getSeconds()
);
}
Loop Principal
void loop() {
server.handleClient();
// Optional: Print current time every 10 seconds
static unsigned long lastPrint = 0;
if (millis() - lastPrint > 10000) {
RTCTime currentTime;
RTC.getTime(currentTime);
Serial.print("Current Arduino Time: ");
Serial.print(currentTime.getHour());
Serial.print(":");
if (currentTime.getMinutes() < 10) Serial.print("0");
Serial.print(currentTime.getMinutes());
Serial.print(":");
if (currentTime.getSeconds() < 10) Serial.print("0");
Serial.println(currentTime.getSeconds());
lastPrint = millis();
}
delay(10);
}
Métodos da API
Métodos da Classe DIYablesWebRTCPage
onTimeSyncFromWeb(callback)
- Define a função de callback que trata a sincronização de horário vinda do navegador web
- Parâmetro: void (*callback)(unsigned long unixTimestamp)
- Uso: Chamado quando o usuário clica no botão "Sync Arduino Time"
onTimeRequestToWeb(callback)
- Define a função de callback que trata as solicitações de horário vindas do navegador web
- Parâmetro: void (*callback)()
- Uso: Chamado quando a interface web solicita o horário atual do Arduino
sendTimeToWeb(year, month, day, hour, minute, second)
- Envia o horário atual do Arduino para a interface web
- Parâmetros:
- year: Ano atual (por exemplo, 2025)
- month: Mês atual (1-12)
- day: Dia atual do mês (1-31)
- hour: Hora atual (0-23)
- minute: Minuto atual (0-59)
- second: Segundo atual (0-59)
Comunicação WebSocket
Mensagens da Web para o Arduino
- RTC:GET_TIME - Solicita o horário atual do Arduino
- RTC:SYNC:[timestamp] - Sincroniza o horário do Arduino com o timestamp Unix
Mensagens do Arduino para a Web
- DATETIME:YYYY,MM,DD,HH,MM,SS - Envia os componentes do horário atual do Arduino
Tutorial em Vídeo
O vídeo de demonstração abaixo usa o código abaixo:
/*
* Este código de Arduino UNO R4 foi desenvolvido por pt.newbiely.com
* Este código de Arduino UNO R4 é disponibilizado ao público sem nenhuma restrição.
* Para tutoriais completos e diagramas de ligação, visite:
* https://pt.newbiely.com/tutorials/arduino-uno-r4/diyables-web-apps-web-rtc
*/
/**
* @file SmartPillReminder.ino
* @brief IoT Medication Reminder System using Arduino Uno R4 WiFi hardware RTC.
* * This firmware integrates an asynchronous Web Server for RTC synchronization,
* a MAX7219 8x32 LED Matrix driven by SPI, and a discrete GPIO active buzzer.
* Memory safety is enforced via static buffer allocation to prevent runtime heap corruption.
* * Hardware Connections:
* - MAX7219 VCC -> 5V
* - MAX7219 GND -> GND
* - MAX7219 DIN -> Pin 11 (COPI/MOSI)
* - MAX7219 CLK -> Pin 13 (SCK)
* - MAX7219 CS -> Pin 10 (SS)
* - Active Buzzer -> Pin 8 (GPIO Output)
*/
#include <DIYablesWebApps.h>
#include "RTC.h"
#include <MD_Parola.h>
#include <MD_MAX72xx.h>
// --- NETWORK PERIPHERAL CONFIGURATION ---
const char WIFI_SSID[] = "YOUR_WIFI_SSID";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
// --- DISPLAY SUBSYSTEM CONFIGURATION ---
#define HARDWARE_TYPE MD_MAX72XX::FC16_HW // Hardware register layout variant for physical modules
#define MAX_DEVICES 4 // Number of cascaded 8x8 matrix blocks
#define CS_PIN 9 // SPI Chip Select active-low hardware pin
MD_Parola ledMatrix = MD_Parola(HARDWARE_TYPE, CS_PIN, MAX_DEVICES);
// --- ALARM SUBSYSTEM ARCHITECTURE ---
const int BUZZER_PIN = 8;
bool isAlarming = false; // State flag to prevent redundant re-initialization of display buffers
struct AlarmTime {
int hour;
int minute;
};
// Scheduled alarm matrices for daily medication dispatch
const int TOTAL_ALARMS = 3;
AlarmTime medicationAlarms[TOTAL_ALARMS] = {
{12, 11}, // Slot 1: Morning Dose
{12, 12}, // Slot 2: Noon Dose
{12, 13} // Slot 3: Evening Dose
};
// Fixed-size static allocation to prevent dangling pointers during stack deallocation
char AlertMsg[50] = "";
// --- WEB SERVER ROUTING ENGINE ---
UnoR4ServerFactory serverFactory;
DIYablesWebAppServer webAppsServer(serverFactory, 80, 81);
DIYablesHomePage homePage;
DIYablesWebRTCPage webRTCPage;
// --- ISR AND CALLBACK FUNCTION PROTOTYPES ---
void onTimeSyncReceived(unsigned long unixTimestamp);
void onTimeRequested();
/**
* @brief Hardware initialization routine.
*/
void setup() {
Serial.begin(9600);
delay(1000);
// Configure GPIO peripherals
pinMode(BUZZER_PIN, OUTPUT);
digitalWrite(BUZZER_PIN, LOW);
// Initialize SPI-driven LED Matrix
ledMatrix.begin();
ledMatrix.setIntensity(3); // Brightness optimization register value to prevent camera sensor overexposure
ledMatrix.displayClear();
// Set initial boot token into display queue
ledMatrix.displayText("Medicine Reminder System READY", PA_LEFT, 60, 2000, PA_SCROLL_LEFT, PA_SCROLL_LEFT);
Serial.println("[SYS] System initializing in production hardware mode...");
// Initialize internal Renesas RA4W1 hardware RTC module
RTC.begin();
RTCTime savedTime;
RTC.getTime(savedTime);
// Verify internal register state; apply fallback parameters if clock counters are reset
if (!RTC.isRunning() || savedTime.getYear() == 2000) {
// Synchronize to 20:19:45 for quick demonstration testing (15-second delay to Slot 3 trigger)
RTCTime startTime(24, Month::MAY, 2026, 20, 19, 45, DayOfWeek::SUNDAY, SaveLight::SAVING_TIME_ACTIVE);
RTC.setTime(startTime);
Serial.println("[RTC] Hardware clock initialized with localized test vector.");
}
// Construct Web App HTTP server routing layers
webAppsServer.addApp(&homePage);
webAppsServer.addApp(&webRTCPage);
webAppsServer.setNotFoundPage(DIYablesNotFoundPage());
// Bind async event listeners to the network stack callbacks
webRTCPage.onTimeSyncFromWeb(onTimeSyncReceived);
webRTCPage.onTimeRequestToWeb(onTimeRequested);
// Initialize network link layer socket connection
if (!webAppsServer.begin(WIFI_SSID, WIFI_PASSWORD)) {
while (1) {
Serial.println("[ERR] Fatal: Local network connection timed out.");
delay(1000);
}
}
Serial.print("[NET] Infrastructure active. Device IP: ");
Serial.println(WiFi.localIP());
}
/**
* @brief Infinite execution control loop.
*/
void loop() {
// Process inbound TCP/IP socket packets for the Web UI
webAppsServer.loop();
// Non-blocking shift engine: Calculates next step pixel translations on every pass
if (ledMatrix.displayAnimate()) {
ledMatrix.displayReset();
}
// Time-sliced task execution block running at a strict 1000ms polling interval
static unsigned long lastUpdate = 0;
if (millis() - lastUpdate >= 1000) {
lastUpdate = millis();
// Fetch snapshot of current counter states from the hardware RTC registers
RTCTime currentTime;
RTC.getTime(currentTime);
int currentH = currentTime.getHour();
int currentM = currentTime.getMinutes();
int currentS = currentTime.getSeconds();
// Send data to system diagnostics terminal
Serial.print("[LOG] Time: ");
Serial.print(currentH); Serial.print(":");
Serial.print(currentM); Serial.print(":");
Serial.println(currentS);
// Sequential search scan across active alarm vectors
for (int i = 0; i < TOTAL_ALARMS; i++) {
if (currentH == medicationAlarms[i].hour &&
currentM == medicationAlarms[i].minute &&
currentS == 0) {
// Conditional gate to prevent continuous buffer overwrites within the same second
if (!isAlarming) {
isAlarming = true;
// Low-level buffer formatting to map runtime integers into locked memory space
// %02d pads leading zeros to preserve fixed structural layout formatting [HH:MM]
sprintf(AlertMsg, "TAKE MEDICATION ! [%02d:%02d] ", currentH, currentM);
ledMatrix.displayClear();
// Link the safe static memory pointer directly into the display rendering core
ledMatrix.displayText(AlertMsg, PA_LEFT, 60, 0, PA_SCROLL_LEFT, PA_SCROLL_LEFT);
Serial.print("[ALARM] Array index match detected at slot ID: ");
Serial.println(i + 1);
}
}
}
// Auto-timeout block: Clears state metrics after 30 elapsed duty seconds
if (currentS >= 20 && isAlarming) {
isAlarming = false;
ledMatrix.displayClear();
ledMatrix.displayText("Medicine Reminder System With WEB RTC", PA_LEFT, 60, 0, PA_SCROLL_LEFT, PA_SCROLL_LEFT);
Serial.println("[ALARM] Trigger window expired. Display registers reset to default state.");
}
// Synchronize current timing matrices with remote HTTP client dashboards
// Placed after display execution logic to avoid bus contention or bus noise interference
webRTCPage.sendTimeToWeb(currentTime.getYear(), Month2int(currentTime.getMonth()),
currentTime.getDayOfMonth(), currentH, currentM, currentS);
}
// Asynchronous Active Buzzer Duty Cycle Control (50% duty cycle, 1Hz rate square-wave generator)
if (isAlarming) {
static unsigned long lastBuzzerToggle = 0;
if (millis() - lastBuzzerToggle >= 500) {
lastBuzzerToggle = millis();
digitalWrite(BUZZER_PIN, !digitalRead(BUZZER_PIN)); // Invert state logic
}
} else {
digitalWrite(BUZZER_PIN, LOW); // Enforce noise suppression when system state is idle
}
delay(10); // System cycle stabilizer trashing delay
}
/**
* @brief Async event parser executed on receipt of a valid browser UNIX timestamp token.
* @param unixTimestamp Incoming epoch time from the remote client.
*/
void onTimeSyncReceived(unsigned long unixTimestamp) {
Serial.print("[NET] Inbound synchronization frame detected: ");
Serial.println(unixTimestamp);
RTCTime newTime;
newTime.setUnixTime(unixTimestamp);
RTC.setTime(newTime); // Commit new parameter metrics into hardware counter arrays
Serial.println("[RTC] Hardware clock sync cycle completed.");
}
/**
* @brief Async service routine parsing internal clock metrics to outgoing polling requests.
*/
void onTimeRequested() {
RTCTime currentTime;
RTC.getTime(currentTime);
webRTCPage.sendTimeToWeb(currentTime.getYear(), Month2int(currentTime.getMonth()),
currentTime.getDayOfMonth(), currentTime.getHour(),
currentTime.getMinutes(), currentTime.getSeconds());
}
Solução de Problemas
Problemas Comuns
1. Diferença de Várias Horas no Horário
- Problema: O Arduino mostra um horário com várias horas de diferença em relação ao horário do dispositivo
- Causa: Geralmente um problema de fuso horário ou o RTC não foi inicializado corretamente
- Solução:
- Clique no botão "Sync Arduino Time" para sincronizar novamente
- Verifique se o RTC está inicializado corretamente em setup()
- Verifique se a conexão WiFi está estável
- Problema: Erro ao clicar no botão de sincronização
- Causa: Falha na conexão WebSocket
- Solução:
- Verifique se o endereço IP do Arduino está correto
- Atualize a página web
- Verifique se o Arduino está conectado à mesma rede WiFi
- Verifique as configurações do firewall
- Problema: A exibição do horário congela ou não atualiza
- Causa: Conexão WebSocket perdida ou RTC parou
- Solução:
- Atualize a página web
- Verifique o status da conexão WebSocket
- Reinicie o Arduino se o RTC parar de responder
- Problema: A diferença de horário mostra milhares de minutos
- Causa: O RTC não foi configurado corretamente ou sofreu um desvio significativo
- Solução: Clique no botão de sincronização várias vezes e verifique as funções de callback
2. Erro "Not connected to Arduino"
3. O Horário Para de Atualizar
4. Grandes Diferenças de Horário (Dias/Meses)
Dicas de Depuração
Ative a Depuração Serial:
void onTimeSyncReceived(unsigned long unixTimestamp) {
Serial.print("Time sync received: ");
Serial.println(unixTimestamp);
// ... rest of function
}
void onTimeRequested() {
Serial.println("Time request received from web");
// ... rest of function
}
Verifique a Inicialização do RTC:
void setup() {
// ... other setup code
if (RTC.begin()) {
Serial.println("RTC initialized successfully");
} else {
Serial.println("RTC initialization failed!");
}
}
Uso Avançado
Registro de Dados com Timestamps
void logSensorData(float temperature, float humidity) {
RTCTime currentTime;
RTC.getTime(currentTime);
String logEntry = String(currentTime.getYear()) + "-" +
String(currentTime.getMonth()) + "-" +
String(currentTime.getDayOfMonth()) + " " +
String(currentTime.getHour()) + ":" +
String(currentTime.getMinutes()) + ":" +
String(currentTime.getSeconds()) + " - " +
"Temp: " + String(temperature) + "°C, " +
"Humidity: " + String(humidity) + "%";
Serial.println(logEntry);
// Save to SD card, send to database, etc.
}
Ações Agendadas
void checkScheduledActions() {
RTCTime currentTime;
RTC.getTime(currentTime);
// Turn on LED every day at 6:00 AM
if (currentTime.getHour() == 6 && currentTime.getMinutes() == 0) {
digitalWrite(LED_BUILTIN, HIGH);
Serial.println("Morning LED activated!");
}
// Turn off LED every day at 10:00 PM
if (currentTime.getHour() == 22 && currentTime.getMinutes() == 0) {
digitalWrite(LED_BUILTIN, LOW);
Serial.println("Evening LED deactivated!");
}
}
Integração com Vários Web Apps
// Combine WebRTC with other web apps
server.addWebApp(rtcPage); // Real-time clock
server.addWebApp(monitorPage); // Serial monitor with timestamps
server.addWebApp(plotterPage); // Data plotting with time axis
Aplicações e Casos de Uso
Projetos Educacionais
- Aprendizado de Gerenciamento de Tempo: Ensine os alunos sobre RTC, marcação de tempo e sincronização
- Conceitos de Tempo em IoT: Demonstre a sincronização de horário em rede em sistemas IoT
- Projetos de Registro de Dados: Adicione timestamps às leituras de sensores e aos experimentos
- Sistemas de Agendamento: Crie sistemas de automação e controle baseados em horário
Aplicações no Mundo Real
- Automação Residencial: Programe luzes, irrigação ou outros dispositivos
- Aquisição de Dados: Marque as leituras de sensores com timestamps para análise
- Registro de Eventos: Registre quando eventos específicos ocorrem com tempo preciso
- Monitoramento Remoto: Verifique remotamente o status do dispositivo e os horários da última atualização
Benefícios para a Educação STEM
- Conceitos de Fuso Horário: Entenda o horário local versus UTC e o tratamento de fusos horários
- Comunicação em Rede: Aprenda a comunicação WebSocket e as atualizações em tempo real
- Integração de Hardware: Combine interfaces web com a funcionalidade de RTC do hardware
- Resolução de Problemas: Depure problemas de temporização e de sincronização
Especificações Técnicas
Uso de Memória
- Memória Flash: ~8KB para a funcionalidade WebRTC
- SRAM: ~2KB durante a operação
- Buffer WebSocket: ~1KB para o tratamento de mensagens
Características de Desempenho
- Frequência de Atualização: Atualizações em tempo real via WebSocket
- Precisão da Sincronização: Normalmente dentro de 1-2 segundos
- Sobrecarga de Rede: ~50 bytes por mensagem de atualização de horário
- Tempo de Resposta: <100ms para operações de sincronização de horário
Compatibilidade
- Placas Arduino: Arduino Uno R4 WiFi, DIYables STEM V4 IoT
- Navegadores: Todos os navegadores modernos com suporte a WebSocket
- Dispositivos: Computadores, tablets e dispositivos móveis
- Redes: Redes WiFi com acesso à internet
Resumo
O exemplo WebRTC demonstra como:
- Criar uma interface web de relógio de tempo real
- Sincronizar o RTC do Arduino com o horário do navegador web
- Exibir informações de horário em um formato amigável
- Monitorar diferenças de horário e o status da conexão
- Integrar a funcionalidade de horário com outros aplicativos web
- Criar projetos educacionais de IoT com recursos de gerenciamento de tempo
Este exemplo é perfeito para projetos que exigem marcação de tempo precisa, registro de dados com timestamps, automação agendada e demonstrações educacionais de conceitos de sincronização de horário em sistemas IoT.