Web Plotter com Arduino Nano ESP32 e a Biblioteca DIYables ESP32 WebApps
Visão Geral
Este tutorial aborda a classe DIYablesWebPlotterPage da Biblioteca DIYables ESP32 WebApps. A página exibe um gráfico de linhas em tempo real no navegador. O sketch do Arduino Nano ESP32 envia pontos de dados por WebSocket; o navegador adiciona cada ponto à série correspondente em tempo real. Até 8 séries de dados independentes são suportadas ao mesmo tempo.
Assista a este tutorial em vídeo passo a passo que mostra como usar um sensor DHT com o app Web Plotter:
O Que Este Tutorial Aborda
- Configurar o título do plotter, os rótulos dos eixos e o limite de amostras mantidas
- Enviar pontos de dados nomeados a partir do sketch usando addDataPoint()
- Plotar várias séries ao mesmo tempo
- Substituir os dados simulados por leituras de sensores reais
Hardware Necessário
Or you can buy the following kits:
| 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.
Passos
Siga estas instruções passo a passo:
- Se esta é a primeira vez que você usa o Arduino Nano ESP32, consulte o tutorial sobre como configurar o ambiente de desenvolvimento do Arduino Nano ESP32.
- Conecte a placa Arduino Nano ESP32 ao seu computador usando um cabo USB.
- Abra o Arduino IDE no seu computador.
- Selecione a placa apropriada (por exemplo, Arduino Nano ESP32) e a porta COM.
- Vá até o ícone Libraries na barra à esquerda do Arduino IDE.
- Pesquise "DIYables ESP32 WebApps" e encontre a Biblioteca DIYables ESP32 WebApps da DIYables
- Clique no botão Install para instalar a biblioteca.
- Search for DIYables ESP32 WebApps created by DIYables and click the Install button.
1
void setup() {
- Você será solicitado a instalar algumas outras dependências da biblioteca
- Clique no botão Install All para instalar todas as dependências da biblioteca.
- No Arduino IDE, vá até o exemplo File Examples DIYables ESP32 WebApps WebPlotter, ou copie o código acima e cole no editor do Arduino IDE
/*
* DIYables WebApp Library - Web Plotter Example
*
* This example demonstrates the Web Plotter feature:
* - Real-time data visualization
* - Multiple data series support
* - Auto-scaling Y-axis
* - Responsive web interface
* - WebSocket communication for instant updates
*
* 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]/webplotter
*/
#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
ESP32ServerFactory serverFactory;
DIYablesWebAppServer webAppsServer(serverFactory, 80, 81);
DIYablesHomePage homePage;
DIYablesWebPlotterPage webPlotterPage;
// Simulation variables
unsigned long lastDataTime = 0;
const unsigned long DATA_INTERVAL = 1000; // Send data every 1000ms
float timeCounter = 0;
void setup() {
Serial.begin(9600);
delay(1000);
// TODO: Initialize your hardware pins and sensors here
Serial.println("DIYables ESP32 WebApp - Web Plotter Example");
// Add home and web plotter pages
webAppsServer.addApp(&homePage);
webAppsServer.addApp(&webPlotterPage);
// Optional: Add 404 page for better user experience
webAppsServer.setNotFoundPage(DIYablesNotFoundPage());
// Configure the plotter
webPlotterPage.setPlotTitle("Real-time Data Plotter");
webPlotterPage.setAxisLabels("Time (s)", "Values");
webPlotterPage.enableAutoScale(true);
webPlotterPage.setMaxSamples(50);
// Start the WebApp server
if (!webAppsServer.begin(WIFI_SSID, WIFI_PASSWORD)) {
while (1) {
Serial.println("Failed to start WebApp server!");
delay(1000);
}
}
// Set up callbacks
webPlotterPage.onPlotterDataRequest([]() {
Serial.println("Web client requested data");
sendSensorData();
});
Serial.println("\nWebPlotter is ready!");
Serial.println("Usage Instructions:");
Serial.println("1. Connect to the WiFi network");
Serial.println("2. Open your web browser");
Serial.println("3. Navigate to the Arduino's IP address");
Serial.println("4. Click on 'Web Plotter' to view real-time data");
Serial.println("\nGenerating simulated sensor data...");
}
void loop() {
// Handle web server and WebSocket connections
webAppsServer.loop();
// Send sensor data at regular intervals
if (millis() - lastDataTime >= DATA_INTERVAL) {
lastDataTime = millis();
sendSensorData();
timeCounter += DATA_INTERVAL / 1000.0; // Convert to seconds
}
}
void sendSensorData() {
// Generate simulated sensor data
// In a real application, replace these with actual sensor readings
// Simulated temperature sensor (sine wave with noise)
float temperature = 25.0 + 5.0 * sin(timeCounter * 0.5) + random(-100, 100) / 100.0;
// Simulated humidity sensor (cosine wave)
float humidity = 50.0 + 20.0 * cos(timeCounter * 0.3);
// Simulated light sensor (triangle wave)
float light = 512.0 + 300.0 * (2.0 * abs(fmod(timeCounter * 0.2, 2.0) - 1.0) - 1.0);
// Simulated analog pin reading
float analogValue = analogRead(A0);
// Send data using different methods:
// Method 1: Send individual values (uncomment to use)
// webPlotterPage.sendPlotData(temperature);
// Method 2: Send multiple values at once
webPlotterPage.sendPlotData(temperature, humidity, light / 10.0, analogValue / 100.0);
// Method 3: Send array of values (alternative approach)
// float values[] = {temperature, humidity, light / 10.0, analogValue / 100.0};
// webPlotterPage.sendPlotData(values, 4);
// Method 4: Send raw data string (for custom formatting)
// String dataLine = String(temperature, 2) + " " + String(humidity, 1) + " " + String(light / 10.0, 1);
// webPlotterPage.sendPlotData(dataLine);
// Print to Serial Monitor in Serial Plotter compatible format
// Format: Temperature Humidity Light Analog (tab-separated for Serial Plotter)
Serial.print(temperature, 1);
Serial.print("\t");
Serial.print(humidity, 1);
Serial.print("\t");
Serial.print(light / 10.0, 1);
Serial.print("\t");
Serial.println(analogValue / 100.0, 2);
}
- Atualize as credenciais de WiFi no sketch:
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 Nano ESP32
- Abra o Serial Monitor
- A saída do Serial Monitor deve ser parecida com esta:
8
Serial.println("Hello World!");
Message (Enter to send message to 'Arduino Nano ESP32' on 'COM15')
New Line
9600 baud
DIYables WebApp - Web Plotter Example
INFO: Added app /
INFO: Added app /web-plotter
DIYables WebApp Library
Platform: Arduino Nano 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/
Web Plotter: http://192.168.0.2/web-plotter
==========================================
- Se nada aparecer, pressione o botão de reset da placa.
- Digite o endereço IP exibido no Serial Monitor em um navegador na mesma rede.
- Exemplo: http://192.168.0.2
- A página inicial mostra um card para o aplicativo plotter:
- Selecione o card Web Plotter para abrir a página do gráfico:
- A página também pode ser acessada diretamente em http://192.168.0.2/web-plotter.
- O gráfico começa a ser atualizado conforme o sketch envia dados simulados. Cada série é desenhada em uma cor diferente.
Configuração do Plotter
Defina o título do gráfico, os rótulos dos eixos, o comportamento da escala automática e o máximo de amostras mantidas antes de iniciar o servidor:
webPlotterPage.setPlotTitle("Sensor Data");
webPlotterPage.setAxisLabels("Time (s)", "Value");
webPlotterPage.enableAutoScale(true);
webPlotterPage.setMaxSamples(100); // Keep last 100 points per series
Enviando Pontos de Dados
Cada ponto de dados especifica o nome da série, o valor X e o valor Y. A série é criada automaticamente no primeiro uso:
// Single series
webPlotterPage.addDataPoint("temperature", elapsedSeconds, sensorValue);
// Multiple series in the same update cycle
webPlotterPage.addDataPoint("temperature", t, tempValue);
webPlotterPage.addDataPoint("humidity", t, humValue);
webPlotterPage.addDataPoint("pressure", t, pressValue);
Lendo de Sensores Reais
Substitua os valores simulados do exemplo por leituras reais de sensores:
Sensor Único
float temperature = analogRead(A0) * (5.0 / 1023.0) * 100.0; // LM35
webPlotterPage.addDataPoint("LM35", millis() / 1000.0, temperature);
Vários Sensores
float temp = readTemperature();
float humid = readHumidity();
webPlotterPage.addDataPoint("Temp", millis() / 1000.0, temp);
webPlotterPage.addDataPoint("Humid", millis() / 1000.0, humid);
Limite a taxa de envio para não sobrecarregar a conexão WebSocket. Um intervalo de 500 ms a 1000 ms é adequado para a maioria das aplicações com sensores.
Solução de Problemas
O gráfico não atualiza
- Confirme que webAppsServer.loop() é executado a cada iteração de loop()
- Adicione Serial.println() antes de addDataPoint() para verificar se o caminho do código é executado
- Recarregue a página do navegador e verifique o indicador de conexão WebSocket
O gráfico mostra linhas retas ou valores errados
- Verifique a leitura do sensor e a fórmula de escala
- Imprima o valor no Serial Monitor ao mesmo tempo que o envia ao plotter
Pontos de dados demais deixam o navegador lento
- Diminua setMaxSamples() para reduzir os pontos mantidos por série
- Aumente o atraso entre os envios de dados
Placa inacessível
- Confirme o endereço IP exibido no Serial Monitor
- Verifique se o dispositivo com o navegador está na mesma rede de 2.4 GHz da placa