Web Temperature com Arduino Nano ESP32 e a Biblioteca DIYables ESP32 WebApps
Visão Geral
Este tutorial aborda a classe DIYablesWebTemperaturePage da Biblioteca DIYables ESP32 WebApps. A página do navegador exibe um termômetro de mercúrio que mostra o valor de temperatura em tempo real recebido do Arduino Nano ESP32 por WebSocket. A faixa de temperatura, as unidades e a escala são configuradas no construtor e transmitidas ao navegador na conexão.
Assista a uma demonstração do app Web Temperature com um sensor DS18B20:
O Que Este Tutorial Aborda
- Configurar a faixa e as unidades do termômetro no construtor
- Fornecer leituras de temperatura por meio de um callback
- Enviar valores atualizados de sensores reais (DS18B20, DHT22)
- Acessar a página do termômetro a partir de um navegador
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.
Buy Note: Many DS18B20 sensors available in the market are unreliable. We strongly recommend buying the sensor from the DIYables brand using the link provided above. We tested it, and it worked reliably.
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 WebTemperature, ou copie o código acima e cole no editor do Arduino IDE
/*
* This example demonstrates how to create a web-base Serial.println("Starting Web Temperature Server...");
// Add web apps to server
server.addApp(&homePage);
server.addApp(&temperaturePage);
// Set 404 Not Found page (optional - for better user experience)
server.setNotFoundPage(DIYablesNotFoundPage());re display
* using the DIYables ESP32 WebApps Library with ESP32.
*
* The library automatically detects the ESP32 platform and
* includes the appropriate abstraction layer for seamless operation.
*
* The web page displays a thermometer visualization that shows temperature
* readings in real-time through WebSocket communication.
*
* Features:
* - Real-time temperature display with thermometer visualization
* - Configurable temperature range and units
* - Auto-connecting WebSocket for seamless communication
* - Mobile-responsive design with professional UI
* - Automatic platform detection and abstraction
* - Compatible with both WiFi and Ethernet connections
* Hardware: ESP32 Boards
*/
#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 web app instances
ESP32ServerFactory serverFactory;
DIYablesWebAppServer server(serverFactory, 80, 81); // HTTP port 80, WebSocket port 81
DIYablesHomePage homePage;
DIYablesWebTemperaturePage temperaturePage(-10.0, 50.0, "°C"); // Min: -10°C, Max: 50°C
// Temperature simulation variables
float currentTemp = 25.0; // Starting temperature
unsigned long lastUpdate = 0;
void setup() {
Serial.begin(9600);
Serial.println("Starting Web Temperature Server...");
// Add web apps to server
server.addApp(&homePage);
server.addApp(&temperaturePage);
// Set 404 Not Found page (optional - for better user experience)
server.setNotFoundPage(DIYablesNotFoundPage());
// Set up temperature callback for value requests
temperaturePage.onTemperatureValueRequested(onTemperatureValueRequested);
// Start the server
server.begin(WIFI_SSID, WIFI_PASSWORD);
}
void loop() {
// Handle web server and WebSocket communications
server.loop();
// Simulate temperature readings
simulateTemperature();
// Send temperature update every 2 seconds
if (millis() - lastUpdate >= 2000) {
temperaturePage.sendTemperature(currentTemp);
// Print temperature to Serial Monitor
Serial.println("Temperature: " + String(currentTemp, 1) + "°C");
lastUpdate = millis();
}
delay(10); // Small delay for stability
}
void simulateTemperature() {
// Simple temperature simulation - slowly increases and decreases
static bool increasing = true;
if (increasing) {
currentTemp += 0.1; // Increase temperature slowly
if (currentTemp >= 35.0) {
increasing = false; // Start decreasing when it reaches 35°C
}
} else {
currentTemp -= 0.1; // Decrease temperature slowly
if (currentTemp <= 15.0) {
increasing = true; // Start increasing when it reaches 15°C
}
}
}
/**
* Callback function called when web interface requests temperature value
* Send current temperature value to web interface
*/
void onTemperatureValueRequested() {
Serial.println("Temperature value requested from web interface");
// Send current temperature value (config is automatically sent by the library)
temperaturePage.sendTemperature(currentTemp);
}
/*
* Alternative setup for real temperature sensor (DS18B20 example):
*
* #include <OneWire.h>
* #include <DallasTemperature.h>
*
* #define ONE_WIRE_BUS 2
* OneWire oneWire(ONE_WIRE_BUS);
* DallasTemperature sensors(&oneWire);
*
* void setup() {
* // ... existing setup code ...
* sensors.begin();
* }
*
* float readTemperature() {
* sensors.requestTemperatures();
* return sensors.getTempCByIndex(0);
* }
*
* // In loop(), replace simulateTemperature() with:
* // currentTemp = readTemperature();
*/
- 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
Starting Web Temperature Server...
INFO: Added app /
INFO: Added app /web-temperature
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 Temperature: http://192.168.0.2/web-temperature
==========================================
- 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 de temperatura:
- Selecione o card Web Temperature para abrir a página do termômetro:
- A página também pode ser acessada diretamente em http://192.168.0.2/web-temperature.
Configuração do Termômetro
Construtor
Defina a temperatura mínima, a temperatura máxima e a string da unidade no construtor. Esses valores são enviados ao navegador na conexão e determinam a escala do termômetro.
// Range: -10 to 50 degrees Celsius
DIYablesWebTemperaturePage temperaturePage(-10.0, 50.0, "°C");
Configurações comuns:
| Mín | Máx | Unidade |
|---|---|---|
| -10.0 | 50.0 | °C |
| 32.0 | 122.0 | °F |
| 263.15 | 323.15 | K |
Callback
Registre onTemperatureValueRequested para fornecer uma leitura cada vez que o navegador solicitar uma atualização:
temperaturePage.onTemperatureValueRequested(onTemperatureValueRequested);
Enviando um Valor
Dentro da função de callback, leia o sensor e chame sendTemperatureValue():
void onTemperatureValueRequested() {
float temp = readSensor(); // returns float in configured units
temperaturePage.sendTemperatureValue(temp);
}
Lendo de Sensores Reais
DS18B20 (1-Wire)
#include <OneWire.h>
#include <DallasTemperature.h>
OneWire oneWire(4);
DallasTemperature sensors(&oneWire);
float readSensor() {
sensors.requestTemperatures();
return sensors.getTempCByIndex(0);
}
DHT22 (Fio Único)
#include <DHT.h>
DHT dht(5, DHT22);
float readSensor() {
return dht.readTemperature(); // returns °C; use readTemperature(true) for °F
}
Solução de Problemas
O termômetro não mostra nenhum valor
- Verifique se onTemperatureValueRequested está registrado antes de webAppsServer.begin()
- Confirme que sendTemperatureValue() é chamado dentro do callback
O sensor retorna NaN
- Para o DS18B20: verifique o pino de dados OneWire e o resistor de pull-up (4.7 kΩ entre dados e 3.3 V)
- Para o DHT22: adicione um pull-up de 10 kΩ na linha de dados; o intervalo mínimo de leitura é 2 s
O nível de mercúrio não corresponde ao valor esperado
- Verifique se o valor informado está dentro da faixa mín/máx configurada
- Valores fora da faixa são limitados aos extremos do termômetro
Página inacessível
- Verifique o endereço IP exibido no Serial Monitor
- Confirme que a placa e o dispositivo com o navegador estão na mesma rede WiFi