Exemplo Arduino WebTemperature - 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 Arduino Uno R4 WiFi e DIYables STEM V4 IoT com recursos avançados de monitoramento de sensores, recursos integrados de sensoriamento de temperatura e integração perfeita com módulos educacionais de monitoramento ambiental. Perfeito para monitorar sensores de temperatura, condições ambientais ou quaisquer medições de temperatura que exijam retorno 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 estilo 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 computadores, tablets e dispositivos móveis
- Design Profissional: Visualização limpa do termômetro com animações suaves
- 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.
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 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 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 WebApps library with Arduino Uno R4 WiFi.
*
* The library automatically detects the Arduino Uno R4 WiFi 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: Arduino Uno R4 WiFi or DIYables STEM V4 IoT
*/
#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
UnoR4ServerFactory 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 Arduino UNO R4/DIYables STEM V4 IoT
- Abra o 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
Starting Web Temperature Server...
INFO: Added app /
INFO: Added app /web-temperature
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 Temperature: http://192.168.0.2/web-temperature
==========================================
- Se você não vir nada, reinicie a placa Arduino.
- Abra um navegador web no seu PC ou celular.
- 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 Temperature e você verá a interface do app Web Temperature como abaixo:
- Ou 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 estilo 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 de termômetro limpa, em estilo educacional
Monitoramento em Tempo Real
- Dados ao Vivo: A temperatura é atualizada automaticamente via conexão WebSocket
- Animação Suave: O nível do mercúrio se move suavemente entre as leituras
- Retorno de Status: Indicador do 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/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: String 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();
}
}
Arduino Uno R4 Web Temperature com Sensor de Temperatura DS18B20
Abaixo está o código completo para adaptar este web app a um sensor de temperatura DS18B20:
#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 2
OneWire oneWire(ONE_WIRE_BUS);
DallasTemperature sensors(&oneWire);
// Create web app instances
UnoR4ServerFactory 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 de ligação e uso do sensor de temperatura DS18B20 com o Arduino UNO R4, consulte o tutorial Arduino UNO R4 - 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 estufas
- Aprendizado de Eletrônica: Interface com sensores, visualização de dados
Aplicações Práticas
- Automação Residencial: Controle de climatização (HVAC), monitoramento de energia
- Controle de Estufas: Otimização do crescimento de plantas
- Segurança Alimentar: Monitoramento de temperatura para 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
- Garanta que a função de callback esteja 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
- Garanta a inicialização correta do sensor
- Teste o sensor de forma independente 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 verificar 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 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 Aprendizado STEM
- Física da Temperatura: Entendendo os conceitos térmicos
- Tecnologia de Sensores: Aprendendo 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 do isolamento
- 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.