Arduino Nano ESP32 - Temperatura via Web
Neste guia, vamos explorar o processo de programar o Arduino Nano ESP32 para funcionar como um servidor web, permitindo que você acesse os dados de temperatura por meio de uma interface web. Usando um sensor de temperatura DS18B20 conectado, você pode verificar facilmente a temperatura atual usando seu celular ou PC para visitar a página web fornecida pelo Arduino Nano ESP32. Veja uma breve visão geral de como funciona:
- O Arduino Nano ESP32 é programado como um servidor web.
- Você digita o endereço IP do Arduino Nano ESP32 em um navegador web no seu celular ou PC.
- O Arduino Nano ESP32 responde à requisição do navegador web com uma página web que contém a temperatura lida do sensor DS18B20.
Vamos ver dois códigos de exemplo:
- Código do Arduino Nano ESP32 que fornece uma página web muito simples que mostra a temperatura do sensor DS18B20. Isso facilita o entendimento de como funciona. O conteúdo HTML está embutido no código do Arduino Nano ESP32
- Código do Arduino Nano ESP32 que fornece uma página web gráfica que mostra a temperatura do sensor DS18B20, com o conteúdo HTML separado do código do Arduino Nano ESP32.
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.
Sobre o Servidor Web do Arduino Nano ESP32 e o Sensor de Temperatura DS18B20
Se você não conhece o Servidor Web do Arduino Nano ESP32 e o sensor de temperatura DS18B20 (pinagem, como funciona, como programar ...), aprenda sobre eles nos tutoriais a seguir:
Diagrama de Ligação
This image is created using Fritzing. Click to enlarge image
Código Arduino Nano ESP32 - Página Web Simples
/*
* Este código de Arduino Nano ESP32 foi desenvolvido por pt.newbiely.com
* Este código de Arduino Nano ESP32 é disponibilizado ao público sem nenhuma restrição.
* Para tutoriais completos e diagramas de ligação, visite:
* https://pt.newbiely.com/tutorials/arduino-nano-esp32/arduino-nano-esp32-temperature-via-web
*/
#include <DIYables_ESP32_WebServer.h>
#include <OneWire.h>
#include <DallasTemperature.h>
#define SENSOR_PIN D2 // The Arduino Nano ESP32 pin connected to DS18B20 sensor's DATA pin
// WiFi credentials
const char WIFI_SSID[] = "YOUR_WIFI_SSID";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
// Create web server instance
DIYables_ESP32_WebServer server;
OneWire oneWire(SENSOR_PIN); // setup a oneWire instance
DallasTemperature DS18B20(&oneWire); // pass oneWire to DallasTemperature library
float getTemperature() {
DS18B20.requestTemperatures(); // send the command to get temperatures
float tempC = DS18B20.getTempCByIndex(0); // read temperature in °C
return tempC;
}
// Page handlers
void handleHome(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
Serial.println("Arduino Nano ESP32 Web Server: New request received"); // for debugging
// get temperature from sensor
float temperature = getTemperature();
// Format the temperature with two decimal places
String temperatureStr = String(temperature, 2);
String html = "<!DOCTYPE HTML>";
html += "<html>";
html += "<head>";
html += "<link rel=\"icon\" href=\"data:,\">";
html += "</head>";
html += "<p>";
html += "Temperature: <span style=\"color: red;\">";
html += temperature;
html += "°C</span>";
html += "</p>";
html += "</html>";
server.sendResponse(client, html.c_str());
}
void setup() {
Serial.begin(9600);
delay(1000);
DS18B20.begin(); // initialize the DS18B20 sensor
Serial.println("Arduino Nano ESP32 Web Server");
// Configure routes
server.addRoute("/", handleHome);
// Start web server with WiFi connection
server.begin(WIFI_SSID, WIFI_PASSWORD);
}
void loop() {
server.handleClient();
}
Passos Rápidos
Para começar com o Arduino Nano ESP32, siga estes passos:
- Se você é novo no Arduino Nano ESP32, consulte o tutorial sobre como configurar o ambiente para o Arduino Nano ESP32 na Arduino IDE.
- Faça a ligação dos componentes de acordo com o diagrama fornecido.
- Conecte a placa Arduino Nano ESP32 ao seu computador usando um cabo USB.
- Abra a Arduino IDE no seu computador.
- Selecione a placa Arduino Nano ESP32 e a porta COM correspondente.
- Abra o Library Manager clicando no ícone Library Manager na barra de navegação à esquerda da Arduino IDE.
- Pesquise por “DIYables ESP32 WebServer” e encontre a DIYables ESP32 WebServer.
- Clique no botão Install para instalar a biblioteca Web Server da DIYables.
- Pesquise por “DallasTemperature” na caixa de pesquisa e procure a biblioteca DallasTemperature de Miles Burton.
- Clique no botão Install para instalar a biblioteca DallasTemperature.
- Você será solicitado a instalar a dependência. Clique no botão Install All para instalar a biblioteca OneWire.
- Copie o código acima e abra-o na Arduino IDE
- Altere as informações de WiFi (SSID e senha) no código para as suas
- Clique no botão Upload na Arduino IDE para fazer o upload do código para o Arduino Nano ESP32
- Abra o Serial Monitor
- Veja o resultado no Serial Monitor.
8
Serial.println("Hello World!");
Message (Enter to send message to 'Arduino Nano ESP32' on 'COM15')
New Line
9600 baud
Connecting to WiFi...
Connected to WiFi
Arduino Nano ESP32 Web Server's IP address: 192.168.0.2
- Você encontrará um endereço IP. Digite esse endereço IP na barra de endereços de um navegador web no seu celular ou PC.
- Você verá a seguinte saída no Serial Monitor.
8
Serial.println("Hello World!");
Message (Enter to send message to 'Arduino Nano ESP32' on 'COM15')
New Line
9600 baud
Connecting to WiFi...
Connected to WiFi
Arduino Nano ESP32 Web Server's IP address: 192.168.0.2
Arduino Nano ESP32 Web Server: New request received:
GET /
- Você verá uma página web muito simples da placa Arduino Nano ESP32 no navegador web, como abaixo:
※ Nota:
Com o código fornecido acima, para obter a atualização da temperatura, você precisa recarregar a página no navegador web. Na próxima parte, vamos aprender a fazer a página web atualizar o valor da temperatura em segundo plano, sem recarregar a página web.
Código Arduino Nano ESP32 - Página Web Gráfica
Como uma página web gráfica contém uma grande quantidade de conteúdo HTML, embuti-la no código do Arduino Nano ESP32 como antes se torna inconveniente. Para resolver isso, precisamos separar o código do Arduino Nano ESP32 e o código HTML em arquivos diferentes:
- O código do Arduino Nano ESP32 ficará em um arquivo .ino.
- O código HTML (incluindo HTML, CSS e Javascript) ficará em um arquivo .h.
Para detalhes de como separar o código HTML do código do Arduino Nano ESP32, consulte o tutorial Arduino Nano ESP32 - Web Server.
Passos Rápidos
- Abra a Arduino IDE e crie um novo sketch, dê um nome a ele, por exemplo, newbiely.com.ino
- Copie o código abaixo e abra-o na Arduino IDE
/*
* Este código de Arduino Nano ESP32 foi desenvolvido por pt.newbiely.com
* Este código de Arduino Nano ESP32 é disponibilizado ao público sem nenhuma restrição.
* Para tutoriais completos e diagramas de ligação, visite:
* https://pt.newbiely.com/tutorials/arduino-nano-esp32/arduino-nano-esp32-temperature-via-web
*/
#include <DIYables_ESP32_WebServer.h>
#include "index.h" // Include the index.h file
#include <OneWire.h>
#include <DallasTemperature.h>
#define SENSOR_PIN D2 // The Arduino Nano ESP32 pin connected to DS18B20 sensor's DATA pin
OneWire oneWire(SENSOR_PIN); // setup a oneWire instance
DallasTemperature DS18B20(&oneWire); // pass oneWire to DallasTemperature library
// WiFi credentials
const char WIFI_SSID[] = "YOUR_WIFI_SSID";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
// Create web server instance
DIYables_ESP32_WebServer server;
float getTemperature() {
DS18B20.requestTemperatures(); // send the command to get temperatures
float tempC = DS18B20.getTempCByIndex(0); // read temperature in °C
return tempC;
}
// Page handlers
void handleHome(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
Serial.println("Arduino Nano ESP32 Web Server: New request received"); // for debugging
server.sendResponse(client, webpage); // webpage is from index
}
// Page handlers
void handleTemperature(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
Serial.println("Arduino Nano ESP32 Web Server: New request received"); // for debugging
float temperature = getTemperature();
String temperatureStr = String(temperature, 2);
server.sendResponse(client, temperatureStr.c_str(), "text/plain");
}
void setup() {
Serial.begin(9600);
delay(1000);
DS18B20.begin(); // initialize the DS18B20 sensor
Serial.println("Arduino Nano ESP32 Web Server");
// Define a route to get the web page
server.addRoute("/", handleHome);
// Define a route to get the temperature data
server.addRoute("/temperature", handleTemperature);
// Start web server with WiFi connection
server.begin(WIFI_SSID, WIFI_PASSWORD);
}
void loop() {
server.handleClient();
}
- Altere as informações de WiFi (SSID e senha) no código para as suas
- Crie o arquivo index.h na Arduino IDE da seguinte forma:
- Clique no botão logo abaixo do ícone do Serial Monitor e escolha New Tab, ou use as teclas Ctrl+Shift+N.
- Dê ao arquivo o nome index.h e clique no botão OK
- Copie o código abaixo e cole-o no index.h.
- Agora você tem o código em dois arquivos: newbiely.com.ino e index.h
- Clique no botão Upload na Arduino IDE para fazer o upload do código para o Arduino Nano ESP32
- Acesse a página web da placa Arduino Nano ESP32 por meio de um navegador web no seu PC ou celular como antes. Você a verá como abaixo:
- Se você modificar o conteúdo HTML no index.h e não mexer em nada no arquivo newbiely.com.ino, quando você compilar e fizer o upload do código para o ESP32, a Arduino IDE não atualizará o conteúdo HTML.
- Para fazer a Arduino IDE atualizar o conteúdo HTML nesse caso, faça uma alteração no arquivo newbiely.com.ino (por exemplo, adicionar uma linha vazia, adicionar um comentário....)
/*
* Este código de Arduino Nano ESP32 foi desenvolvido por pt.newbiely.com
* Este código de Arduino Nano ESP32 é disponibilizado ao público sem nenhuma restrição.
* Para tutoriais completos e diagramas de ligação, visite:
* https://pt.newbiely.com/tutorials/arduino-nano-esp32/arduino-nano-esp32-temperature-via-web
*/
#ifndef WEBPAGE_H
#define WEBPAGE_H
const char* webpage = R"=====(
<!DOCTYPE html>
<html>
<head>
<title>Arduino Nano ESP32 - Web Temperature</title>
<meta name="viewport" content="width=device-width, initial-scale=0.7, maximum-scale=0.7">
<meta charset="utf-8">
<link rel="icon" href="https://diyables.io/images/page/diyables.svg">
<style>
body { font-family: "Georgia"; text-align: center; font-size: width/2pt;}
h1 { font-weight: bold; font-size: width/2pt;}
h2 { font-weight: bold; font-size: width/2pt;}
button { font-weight: bold; font-size: width/2pt;}
</style>
<script>
var cvs_width = 200, cvs_height = 450;
function init() {
var canvas = document.getElementById("cvs");
canvas.width = cvs_width;
canvas.height = cvs_height + 50;
var ctx = canvas.getContext("2d");
ctx.translate(cvs_width/2, cvs_height - 80);
fetchTemperature();
setInterval(fetchTemperature, 4000); // Update temperature every 4 seconds
}
function fetchTemperature() {
fetch("/temperature")
.then(response => response.text())
.then(data => {update_view(data);});
}
function update_view(temp) {
var canvas = document.getElementById("cvs");
var ctx = canvas.getContext("2d");
var radius = 70;
var offset = 5;
var width = 45;
var height = 330;
ctx.clearRect(-cvs_width/2, -cvs_height + 80, cvs_width, cvs_height + 50);
ctx.strokeStyle="blue";
ctx.fillStyle="blue";
//5-step Degree
var x = -width/2;
ctx.lineWidth=2;
for (var i = 0; i <= 100; i+=5) {
var y = -(height - radius)*i/100 - radius - 5;
ctx.beginPath();
ctx.lineTo(x, y);
ctx.lineTo(x - 20, y);
ctx.stroke();
}
//20-step Degree
ctx.lineWidth=5;
for (var i = 0; i <= 100; i+=20) {
var y = -(height - radius)*i/100 - radius - 5;
ctx.beginPath();
ctx.lineTo(x, y);
ctx.lineTo(x - 25, y);
ctx.stroke();
ctx.font="20px Georgia";
ctx.textBaseline="middle";
ctx.textAlign="right";
ctx.fillText(i.toString(), x - 35, y);
}
// shape
ctx.lineWidth=16;
ctx.beginPath();
ctx.arc(0, 0, radius, 0, 2 * Math.PI);
ctx.stroke();
ctx.beginPath();
ctx.rect(-width/2, -height, width, height);
ctx.stroke();
ctx.beginPath();
ctx.arc(0, -height, width/2, 0, 2 * Math.PI);
ctx.stroke();
ctx.fillStyle="#e6e6ff";
ctx.beginPath();
ctx.arc(0, 0, radius, 0, 2 * Math.PI);
ctx.fill();
ctx.beginPath();
ctx.rect(-width/2, -height, width, height);
ctx.fill();
ctx.beginPath();
ctx.arc(0, -height, width/2, 0, 2 * Math.PI);
ctx.fill();
ctx.fillStyle="#ff1a1a";
ctx.beginPath();
ctx.arc(0, 0, radius - offset, 0, 2 * Math.PI);
ctx.fill();
temp = Math.round(temp * 100) / 100;
var y = (height - radius)*temp/100.0 + radius + 5;
ctx.beginPath();
ctx.rect(-width/2 + offset, -y, width - 2*offset, y);
ctx.fill();
ctx.fillStyle="red";
ctx.font="bold 34px Georgia";
ctx.textBaseline="middle";
ctx.textAlign="center";
ctx.fillText(temp.toString() + "°C", 0, 100);
}
window.onload = init;
</script>
</head>
<body>
<h1>Arduino Nano ESP32 - Web Temperature</h1>
<canvas id="cvs"></canvas>
</body>
</html>
)=====";
#endif
※ Nota: