Exemplo WebTemperature com ESP32 - Tutorial de Interface de Termômetro Visual
Visão Geral
O exemplo WebTemperature cria uma interface de termômetro visual acessível de qualquer navegador web. Projetado para a plataforma educacional ESP32, com recursos aprimorados de monitoramento de sensores, recursos integrados de medição de temperatura e integração perfeita com os módulos educacionais de monitoramento ambiental. Perfeito para monitorar sensores de temperatura, condições ambientais ou qualquer medição de temperatura que exija feedback visual.
Assista a este tutorial em vídeo passo a passo que mostra como usar um sensor de temperatura DS18B20 com o app Web Temperature:
Recursos
- Exibição de Termômetro Visual: Termômetro interativo pela interface web
- Faixa de Temperatura Configurável: Temperaturas mínima e máxima personalizadas, com unidades
- Atualizações em Tempo Real: Exibição da temperatura ao vivo com animação no estilo de mercúrio
- Suporte a Várias Unidades: Celsius (�C), Fahrenheit (�F), Kelvin (K)
- Tratamento Automático da Configuração: Defina a faixa e a unidade uma única vez no construtor
- Comunicação WebSocket: Atualizações instantâneas sem recarregar a página
- Responsivo para Celular: Funciona perfeitamente em desktop, tablet e dispositivos móveis
- Design Profissional: Visualização limpa de termômetro com animações suaves
Hardware Necessário
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.
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.
Instruções de Configuração
Passos Rápidos
Siga estas instruções passo a passo:
- Se esta é a primeira vez que você usa o ESP32, consulte o tutorial sobre como configurar o ambiente para ESP32 no Arduino IDE.
- Conecte a placa ESP32 ao seu computador usando um cabo USB.
- Abra o Arduino IDE no seu computador.
- Selecione a placa ESP32 apropriada (por exemplo, ESP32 Dev Module) e a porta COM.
- Navegue 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.
- 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á em 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();
*/
- 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 ESP32
- Abra o Serial Monitor
- Veja o resultado no Serial Monitor. Ele deve ser parecido com o abaixo
8
Serial.println("Hello World!");
Message (Enter to send message to 'ESP32 Dev Module' on 'COM15')
New Line
9600 baud
Starting Web Temperature Server...
INFO: Added app /
INFO: Added app /web-temperature
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/
🌡️ Web Temperature: http://192.168.0.2/web-temperature
==========================================
- Se você não vir nada, reinicie a placa ESP32.
- Abra um navegador web no seu PC ou celular.
- Digite no navegador o endereço IP mostrado no Serial Monitor
- Exemplo: http://192.168.1.100
- Você verá a página inicial como na imagem abaixo:
- Clique no link Web Temperature e você verá a interface do app Web Temperature como abaixo:
- Você também pode acessar a página diretamente pelo endereço IP seguido de /web-temperature. Por exemplo: http://192.168.1.100/web-temperature
- Você verá um termômetro visual mostrando as leituras de temperatura em tempo real
Recursos da Interface Web
Exibição do Termômetro
- Termômetro Visual: Design clássico de termômetro com animação no estilo de mercúrio
- Escala de Temperatura: Marcações de escala claras com faixa configurável
- Atualizações em Tempo Real: Exibição da temperatura ao vivo com transições suaves
- Exibição da Unidade: Mostra as unidades de temperatura configuradas (�C, �F, K)
- Design Profissional: Visualização limpa de termômetro em estilo educacional
Monitoramento em Tempo Real
- Dados ao Vivo: A temperatura é atualizada automaticamente pela conexão WebSocket
- Animação Suave: O nível do mercúrio se move suavemente entre as leituras
- Feedback de Status: Indicador de status da conexão
- Otimizado para Celular: Interface amigável ao toque para todos os dispositivos
Configuração do Código
Configuração da Temperatura
// Configure temperature range and units
DIYablesWebTemperaturePage temperaturePage(-10.0, 50.0, "°C"); // -10 to 50°C
// Set up temperature value request callback
temperaturePage.onTemperatureValueRequested(onTemperatureValueRequested);
Enviando Valores de Temperatura
void onTemperatureValueRequested() {
// Read temperature from sensor (example with simulation)
float currentTemp = readTemperatureSensor();
// Send to thermometer display
temperaturePage.sendTemperature(currentTemp);
}
Integração com Sensores de Temperatura
Sensor de Temperatura Digital DS18B20
#include <OneWire.h>
#include <DallasTemperature.h>
#define ONE_WIRE_BUS 2
OneWire oneWire(ONE_WIRE_BUS);
DallasTemperature sensors(&oneWire);
void setup() {
sensors.begin();
// Configure temperature page for sensor range
DIYablesWebTemperaturePage tempPage(-55.0, 125.0, "°C");
}
float readTemperatureSensor() {
sensors.requestTemperatures();
return sensors.getTempCByIndex(0);
}
Sensor de Temperatura e Umidade DHT22
#include <DHT.h>
#define DHT_PIN 2
#define DHT_TYPE DHT22
DHT dht(DHT_PIN, DHT_TYPE);
void setup() {
dht.begin();
// Configure for DHT22 range
DIYablesWebTemperaturePage tempPage(-40.0, 80.0, "°C");
}
float readTemperatureSensor() {
return dht.readTemperature(); // Returns °C
}
Sensor de Temperatura Analógico (TMP36)
#define TEMP_PIN A0
float readTemperatureSensor() {
int reading = analogRead(TEMP_PIN);
float voltage = reading * 5.0 / 1024.0;
float temperatureC = (voltage - 0.5) * 100.0; // TMP36 formula
return temperatureC;
}
Conversão de Unidades
Suporte a Várias Unidades
// Temperature in different units
DIYablesWebTemperaturePage celsiusPage(-10.0, 50.0, "°C");
DIYablesWebTemperaturePage fahrenheitPage(14.0, 122.0, "°F");
DIYablesWebTemperaturePage kelvinPage(263.15, 323.15, "K");
// Conversion functions
float celsiusToFahrenheit(float celsius) {
return (celsius * 9.0/5.0) + 32.0;
}
float celsiusToKelvin(float celsius) {
return celsius + 273.15;
}
Opções de Personalização
Faixa de Temperatura
- Temperatura Mínima: Defina a menor leitura esperada
- Temperatura Máxima: Defina a maior leitura esperada
- Unidades: Texto da unidade exibida (�C, �F, K ou personalizada)
- Escala: A escala do termômetro se ajusta automaticamente à faixa
Frequência de Atualização
// Control update rate to avoid overwhelming the interface
unsigned long lastUpdate = 0;
const unsigned long UPDATE_INTERVAL = 1000; // 1 second
void loop() {
server.loop();
if (millis() - lastUpdate >= UPDATE_INTERVAL) {
// Update temperature display
lastUpdate = millis();
}
}
Web Temperature do ESP32 com Sensor de Temperatura DS18B20
Abaixo está o código completo para adaptar este app web a um sensor de temperatura DS18B20:
#include <DIYables_ESP32_Platform.h>
#include <DIYablesWebApps.h>
#include <OneWire.h>
#include <DallasTemperature.h>
// WiFi credentials - UPDATE THESE WITH YOUR NETWORK
const char WIFI_SSID[] = "YOUR_WIFI_SSID";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
#define ONE_WIRE_BUS 17
OneWire oneWire(ONE_WIRE_BUS);
DallasTemperature sensors(&oneWire);
// 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...");
sensors.begin();
// 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();
currentTemp = readTemperature();
// 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);
}
float readTemperature() {
sensors.requestTemperatures();
return sensors.getTempCByIndex(0);
}
Abaixo está um tutorial em vídeo passo a passo que mostra como usar um sensor de temperatura DS18B20 com o app Web Temperature:
Para instruções detalhadas sobre a ligação e o uso do sensor de temperatura DS18B20 com o ESP32, veja o tutorial ESP32 - Sensor de Temperatura DS18B20.
Casos de Uso Comuns
Projetos Educacionais
- Monitoramento do Clima: Acompanhamento da temperatura interna/externa
- Experimentos de Física: Transferência de calor, dinâmica térmica
- Ciência Ambiental: Monitoramento do clima, controle de estufa
- Aprendizado de Eletrônica: Interface com sensores, visualização de dados
Aplicações Práticas
- Automação Residencial: Controle de climatização, monitoramento de energia
- Controle de Estufa: Otimização do crescimento das plantas
- Segurança Alimentar: Monitoramento da temperatura de armazenamento
- Industrial: Monitoramento de processos, controle de qualidade
Solução de Problemas
A Temperatura Não Atualiza
- Verifique a conexão WiFi e o status do WebSocket
- Verifique a ligação do sensor e a fonte de alimentação
- Certifique-se de que a função de callback está definida corretamente
- Verifique as leituras do sensor no Serial Monitor
Valores de Temperatura Incorretos
- Verifique a calibração e a precisão do sensor
- Verifique a tensão de referência dos sensores analógicos
- Certifique-se de que o sensor foi inicializado corretamente
- Teste o sensor separadamente com um código básico
Problemas de Conexão do Sensor
- Verifique as conexões de ligação (alimentação, terra, dados)
- Verifique os resistores de pull-up dos sensores digitais
- Teste o sensor com um multímetro para confirmar o funcionamento correto
- Verifique a instalação e a compatibilidade da biblioteca do sensor
Recursos Avançados
Vários Sensores de Temperatura
Monitore vários locais com termômetros separados:
DIYablesWebTemperaturePage indoorTemp(-10.0, 40.0, "°C");
DIYablesWebTemperaturePage outdoorTemp(-30.0, 50.0, "°C");
DIYablesWebTemperaturePage waterTemp(0.0, 100.0, "°C");
server.addApp(&indoorTemp);
server.addApp(&outdoorTemp);
server.addApp(&waterTemp);
Registro de Temperatura
Combine com o Web Plotter para obter dados históricos de temperatura:
// Send same value to both thermometer and plotter
temperaturePage.sendTemperature(currentTemp);
plotterPage.sendData("Temperature", currentTemp);
Sistema de Alertas
Implemente alertas de temperatura:
void checkTemperatureAlerts(float temp) {
if (temp > 35.0) {
Serial.println("⚠️ High temperature alert!");
// Send alert via web interface
} else if (temp < 5.0) {
Serial.println("🧊 Low temperature alert!");
// Send alert via web interface
}
}
Integração Educacional
Objetivos de Aprendizagem STEM
- Física da Temperatura: Compreender conceitos térmicos
- Tecnologia de Sensores: Aprender sobre sensores digitais e analógicos
- Visualização de Dados: Técnicas de exibição de dados em tempo real
- Programação: Funções de callback, integração de sensores
Atividades em Sala de Aula
- Comparação de Sensores: Compare diferentes tipos de sensores de temperatura
- Exercício de Calibração: Aprenda os princípios de precisão de medição
- Monitoramento Ambiental: Acompanhe as mudanças de temperatura ao longo do tempo
- Integração de Sistemas: Combine com outros sensores ambientais
Experimentos de Ciências
- Transferência de Calor: Monitore as mudanças de temperatura durante os experimentos
- Mudanças de Fase: Observe a temperatura durante a fusão/ebulição
- Teste de Isolamento: Compare a eficácia de isolantes
- Estudo do Clima: Monitoramento de temperatura de longo prazo
Este exemplo oferece uma base completa para o monitoramento e a visualização de temperatura, perfeito tanto para aplicações educacionais quanto para o monitoramento ambiental prático.