Arduino - Temperatura via Web
Neste tutorial, vamos aprender como programar o Arduino para se tornar um servidor web que fornece a temperatura via web. Você pode acessar a página web fornecida pelo Arduino para verificar a temperatura de um sensor de temperatura DS18B20. Veja abaixo como funciona:
- O Arduino é programado como um servidor web.
- Você digita o endereço IP do Arduino em um navegador web no seu smartphone ou PC.
- O Arduino responde à solicitaçã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 Arduino que fornece uma página web muito simples que mostra a temperatura do sensor DS18B20. Isso facilita para você entender como funciona.
- Código Arduino que fornece uma página web gráfica que mostra a temperatura do sensor DS18B20.
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.
Sobre o Arduino Uno R4 e o Sensor de Temperatura DS18B20
Se você não conhece o Arduino Uno R4 e o sensor de temperatura DS18B20 (pinagem, como funciona, como programar...), aprenda sobre eles nos seguintes tutoriais:
Diagrama de Ligação
This image is created using Fritzing. Click to enlarge image
Código Arduino - Página Web Simples
/*
* Este código de Arduino foi desenvolvido por pt.newbiely.com
* Este código de Arduino é disponibilizado ao público sem nenhuma restrição.
* Para tutoriais completos e diagramas de ligação, visite:
* https://pt.newbiely.com/tutorials/arduino/arduino-temperature-via-web
*/
#include <UnoR4WiFi_WebServer.h>
#include <OneWire.h>
#include <DallasTemperature.h>
const char HTML_CONTENT[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML>
<html>
<head>
<link rel="icon" href="data:,">
</head>
<p>
Temperature: <span style="color: red;">%TEMP_PLACE_HOLDER% °C</span>
</p>
</html>
)rawliteral";
const char WIFI_SSID[] = "YOUR_WIFI_SSID"; // change your network SSID (name)
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD"; // change your network password
const int SENSOR_PIN = 6; // Arduino pin connected to DS18B20 sensor's DQ pin
OneWire oneWire(SENSOR_PIN); // setup a oneWire instance
DallasTemperature tempSensor(&oneWire); // pass oneWire to DallasTemperature library
UnoR4WiFi_WebServer server;
float getTemperature() {
tempSensor.requestTemperatures(); // send the command to get temperatures
float tempCelsius = tempSensor.getTempCByIndex(0); // read temperature in Celsius
return tempCelsius;
}
void handleHome(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
float tempC = getTemperature();
String response = HTML_CONTENT;
response.replace("%TEMP_PLACE_HOLDER%", String(tempC, 1));
server.sendResponse(client, response.c_str());
}
void setup() {
Serial.begin(9600);
delay(1000);
tempSensor.begin(); // initialize the temperature sensor
Serial.println("Arduino Uno R4 WiFi - Temperature via Web");
// Connect to WiFi
Serial.print("Connecting to ");
Serial.println(WIFI_SSID);
WiFi.begin(WIFI_SSID, WIFI_PASSWORD);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("connected!");
Serial.print("IP address: ");
Serial.println(WiFi.localIP());
// Configure routes
server.addRoute("/", handleHome);
// Start server
server.begin();
Serial.println("\n=== Web Server Ready! ===");
Serial.print("Visit: http://");
Serial.println(WiFi.localIP());
}
void loop() {
server.handleClient();
}
Passos Rápidos
- Se esta é a primeira vez que você usa o Arduino Uno R4, veja como configurar o ambiente para o Arduino Uno R4 no Arduino IDE.
- Abra o Library Manager clicando no ícone Library Manager no lado esquerdo do Arduino IDE.
- Pesquise por Web Server for Arduino Uno R4 WiFi e localize a biblioteca Web Server criada pela DIYables.
- Clique no botão Install para adicionar a biblioteca Web Server.
- Copie o código acima e abra-o no Arduino IDE
- Altere as informações de WiFi (SSID e senha) no código para as suas
- Clique no botão Upload no Arduino IDE para carregar o código no Arduino
- Abra o Serial Monitor
- Confira o resultado no Serial Monitor.
8
Serial.println("Hello World!");
Message (Enter to send message to 'Arduino Uno' on 'COM15')
New Line
9600 baud
Arduino Uno R4 WiFi - Temperature via Web
Connecting to YOUR_WIFI_SSID
connected!
IP address: 192.168.0.254
Starting web server on IP: 192.168.0.254
=== Web Server Ready! ===
Visit: http://192.168.0.254
- Você encontrará um endereço IP. Digite esse endereço IP na barra de endereços de um navegador web no seu smartphone ou PC.
- Você verá a seguinte saída no Serial Monitor.
8
Serial.println("Hello World!");
Message (Enter to send message to 'Arduino Uno' on 'COM15')
New Line
9600 baud
Arduino Uno R4 WiFi - Temperature via Web
Connecting to YOUR_WIFI_SSID
connected!
IP address: 192.168.0.254
Starting web server on IP: 192.168.0.254
=== Web Server Ready! ===
Visit: http://192.168.0.254
Method: GET
Requested path: /
Client disconnected
- Você verá uma página web muito simples da placa Arduino no navegador web, como abaixo:
Código Arduino - Página Web Gráfica
Como uma página web gráfica contém uma grande quantidade de conteúdo HTML, incorporá-lo ao código Arduino como antes se torna inconveniente. Para resolver isso, precisamos separar o código Arduino e o código HTML em arquivos diferentes:
- O código Arduino será colocado em um arquivo .ino.
- O código HTML (incluindo HTML, CSS e Javascript) será colocado em um arquivo .h.
Passos Rápidos
- Abra o Arduino IDE e crie um novo sketch, dê um nome a ele, por exemplo, ArduinoGetStarted.com.ino
- Copie o código abaixo e abra-o no Arduino IDE
/*
* Este código de Arduino foi desenvolvido por pt.newbiely.com
* Este código de Arduino é disponibilizado ao público sem nenhuma restrição.
* Para tutoriais completos e diagramas de ligação, visite:
* https://pt.newbiely.com/tutorials/arduino/arduino-temperature-via-web
*/
#include <UnoR4WiFi_WebServer.h>
#include "index.h"
#include <OneWire.h>
#include <DallasTemperature.h>
const char WIFI_SSID[] = "YOUR_WIFI_SSID"; // change your network SSID (name)
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD"; // change your network password
const int SENSOR_PIN = 6; // Arduino pin connected to DS18B20 sensor's DQ pin
OneWire oneWire(SENSOR_PIN); // setup a oneWire instance
DallasTemperature tempSensor(&oneWire); // pass oneWire to DallasTemperature library
UnoR4WiFi_WebServer server;
float getTemperature() {
tempSensor.requestTemperatures(); // send the command to get temperatures
float tempCelsius = tempSensor.getTempCByIndex(0); // read temperature in Celsius
return tempCelsius;
}
void handleHome(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
float tempC = getTemperature();
String response = HTML_CONTENT;
response.replace("TEMPERATURE_MARKER", String(tempC, 1));
server.sendResponse(client, response.c_str());
}
void setup() {
Serial.begin(9600);
delay(1000);
tempSensor.begin(); // initialize the temperature sensor
Serial.println("Arduino Uno R4 WiFi - Temperature via Web");
// Connect to WiFi
Serial.print("Connecting to ");
Serial.println(WIFI_SSID);
WiFi.begin(WIFI_SSID, WIFI_PASSWORD);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("connected!");
Serial.print("IP address: ");
Serial.println(WiFi.localIP());
// Configure routes
server.addRoute("/", handleHome);
// Start server
server.begin();
Serial.println("\n=== Web Server Ready! ===");
Serial.print("Visit: http://");
Serial.println(WiFi.localIP());
}
void loop() {
server.handleClient();
}
- Altere as informações de WiFi (SSID e senha) no código para as suas
- Crie o arquivo index.h no 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: ArduinoGetStarted.com.ino e index.h
- Clique no botão Upload no Arduino IDE para carregar o código no Arduino
- Acesse a página web da placa Arduino pelo navegador web como antes. Você verá algo assim:
- Se você fizer alterações no conteúdo HTML dentro do arquivo index.h, mas não modificar nada no arquivo ArduinoGetStarted.com.ino, o Arduino IDE não vai atualizar o conteúdo HTML quando você compilar e carregar o código no Arduino Uno R4 WiFi.
- Para forçar o Arduino IDE a atualizar o conteúdo HTML nessa situação, você precisa fazer uma modificação no arquivo ArduinoGetStarted.com.ino. Por exemplo, você pode adicionar uma linha vazia ou inserir um comentário. Essa ação faz o IDE reconhecer que houve alterações no projeto, garantindo que o seu conteúdo HTML atualizado seja incluído no upload.
/*
* Este código de Arduino foi desenvolvido por pt.newbiely.com
* Este código de Arduino é disponibilizado ao público sem nenhuma restrição.
* Para tutoriais completos e diagramas de ligação, visite:
* https://pt.newbiely.com/tutorials/arduino/arduino-temperature-via-web
*/
const char *HTML_CONTENT = R""""(
<!DOCTYPE html>
<html>
<head>
<title>Arduino - 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);
update_view(TEMPERATURE_MARKER);
}
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, -350, cvs_width, cvs_height);
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 - Web Temperature</h1>
<canvas id="cvs"></canvas>
</body>
</html>
)"""";
※ Nota: