Arduino - Servidor Web
Neste tutorial, vamos aprender a transformar um Arduino Uno R4 WiFi em um servidor web. Ao acessar as páginas web hospedadas no Servidor Web do Arduino por meio de um navegador no seu PC ou smartphone, você poderá ler valores do Arduino e até mesmo controlá-lo. Veja a seguir o que vamos aprender a programar no Arduino Uno WiFi:
- Servidor Web Arduino - Página única: permite monitorar valores de sensores do Arduino por meio de uma interface web.
- Servidor Web Arduino - Página única: vamos habilitar a possibilidade de controlar o Arduino usando um navegador web.
- Servidor Web Arduino - Página única: vamos aprender a separar o conteúdo HTML (HTML, CSS e Javascript) em outro arquivo dentro da Arduino IDE.
- Servidor Web Arduino - Múltiplas páginas: nesta etapa, vamos criar várias páginas, como index.html, temperature.html, led.html, error_404.html e error_405.html..., e mais.
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.
Lendo o valor do sensor do Arduino pela Web
Isso é relativamente simples. O código do Arduino realiza as seguintes tarefas:
- Cria um servidor web que escuta requisições HTTP vindas de um navegador web.
- Ao receber uma requisição de um navegador web, o Arduino responde com as seguintes informações:
- Cabeçalho HTTP
- Corpo HTTP: inclui o conteúdo HTML e o valor lido do sensor.
- Se esta é a primeira vez que você usa o Arduino Uno R4, veja como configurar o ambiente para o Arduino Uno R4 na Arduino IDE.
- Abra o Gerenciador de Bibliotecas clicando no ícone Library Manager no lado esquerdo da 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 com a 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 carregar o código no Arduino
- Abra o Serial Monitor
- Confira o resultado no Serial Monitor.
- Anote o endereço IP exibido e digite esse endereço na barra de endereços de um navegador web no seu smartphone ou PC.
- Como resultado, você verá a seguinte saída no Serial Monitor.
- Ao acessar o navegador web usando o endereço IP, será exibida uma página web bem básica com informações sobre a placa Arduino. A página ficará assim:
Abaixo está o código Arduino que realiza as tarefas acima:
/*
* 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-web-server
*/
#include <UnoR4WiFi_WebServer.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";
// WiFi credentials
const char WIFI_SSID[] = "YOUR_WIFI_SSID"; // change your network SSID (name)
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD"; // change your network password
// Create web server instance
UnoR4WiFi_WebServer server;
float getTemperature() {
return 26.9456;
// YOUR SENSOR IMPLEMENTATION HERE
// simulate the temperature value
float temp_x100 = random(0, 10000); // a ramdom value from 0 to 10000
return temp_x100 / 100; // return the simulated temperature value from 0 to 100 in float
}
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);
Serial.println("Arduino Uno R4 WiFi - Web Server");
// 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
8
Serial.println("Hello World!");
Message (Enter to send message to 'Arduino Uno' on 'COM15')
New Line
9600 baud
Arduino Uno R4 WiFi - Web Server
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
8
Serial.println("Hello World!");
Message (Enter to send message to 'Arduino Uno' on 'COM15')
New Line
9600 baud
Arduino Uno R4 WiFi - Web Server
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
Para deixar a página web com um visual incrível e uma interface gráfica de usuário (UI), confira a seção final deste tutorial.
Controlando o Arduino pela Web
Controlar algo conectado ao Arduino é um pouco mais desafiador do que apenas ler um valor. Isso porque o Arduino precisa entender a requisição recebida do navegador web para saber qual ação executar. Veja o que o código do Arduino faz neste caso:
- Cria um servidor web que escuta requisições HTTP vindas de um navegador web.
- Trata a requisição recebida do navegador web fazendo o seguinte:
- Lê o cabeçalho da requisição HTTP.
- Analisa o cabeçalho da requisição HTTP para determinar o comando de controle específico necessário.
- Controla o dispositivo ou objeto conectado ao Arduino com base no comando de controle recebido.
- Envia de volta uma resposta HTTP.
- Além disso, pode enviar um corpo de resposta HTTP com conteúdo HTML para exibir informações sobre o estado do controle (se necessário).
Para um exemplo mais completo e detalhado, recomendo conferir os tutoriais listados abaixo:
Separando o conteúdo HTML em outro arquivo na Arduino IDE
Se você quer criar uma página web simples, com pouco conteúdo, pode incorporar o HTML diretamente no código do Arduino, como explicado anteriormente.
No entanto, se você quer criar uma página web mais sofisticada e impressionante, com mais conteúdo, torna-se inconveniente incluir todo o HTML, CSS e Javascript diretamente no código do Arduino. Nessa situação, você pode usar uma abordagem diferente para organizar o código:
- O código do Arduino ficará em um arquivo .ino, como antes.
- O código HTML (HTML, CSS, Javascript) ficará em um arquivo .h separado. Isso permite manter o conteúdo da página web separado do código do Arduino, facilitando o gerenciamento e as modificações.
Para isso, precisamos realizar duas etapas principais:
- Preparar o conteúdo HTML
- Programar o Arduino
Preparando o conteúdo HTML
- Crie um arquivo HTML no seu PC que contenha o conteúdo HTML (HTML, CSS e Javascript) do design da sua interface.
- No arquivo HTML, onde os dados do Arduino devem ser exibidos, use um valor qualquer.
- Teste e modifique até ficar satisfeito.
- No arquivo HTML, onde os dados do Arduino devem ser exibidos, substitua o valor qualquer por um nome especial, por exemplo, TEMPERATURE_MARKER. Depois, no código do Arduino, usaremos a função String.replace("TEMPERATURE_MARKER", real_value); para atualizar o valor fornecido pelo Arduino.
- Vamos colocar o conteúdo HTML no arquivo .h na Arduino IDE. Veja o próximo passo.
Programando o Arduino
- Abra a Arduino IDE e crie um novo sketch. Dê um nome a ele, por exemplo, ArduinoGetStarted.com.ino.
- Copie o código fornecido abaixo e cole-o no arquivo criado.
/*
* 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-web-server
*/
#include <UnoR4WiFi_WebServer.h>
#include "index.h"
const char WIFI_SSID[] = "YOUR_WIFI_SSID"; // change your network SSID (name)
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD"; // change your network password
UnoR4WiFi_WebServer server;
float getTemperature() {
return 26.9456;
// YOUR SENSOR IMPLEMENTATION HERE
// simulate the temperature value
float temp_x100 = random(0, 10000); // a ramdom value from 0 to 10000
return temp_x100 / 100; // return the simulated temperature value from 0 to 100 in float
}
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);
Serial.println("Arduino Uno R4 WiFi - Web Server");
// 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 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.
/*
* 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-web-server
*/
const char *HTML_CONTENT = R""""(
REPLACE_YOUR_HTML_CONTENT_HERE
)"""";
- Substitua a linha REPLACE_YOUR_HTML_CONTENT_HERE pelo conteúdo HTML que você preparou antes. Não há problema com caracteres de nova linha. Abaixo está um exemplo de arquivo index.h:
/*
* 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-web-server
*/
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>
)"""";
- Agora você tem o código em dois arquivos: ArduinoGetStarted.com.ino e index.h
- Clique no botão Upload na Arduino IDE para carregar o código no Arduino
- Acesse a página web da placa Arduino pelo navegador web como antes. Você a verá como abaixo:
Para uma ilustração mais completa e detalhada, consulte o tutorial Arduino - Sensor de Temperatura DS18B20 pela Web
※ Nota:
- Se você fizer alterações no conteúdo HTML dentro do arquivo index.h, mas não modificar nada no arquivo ArduinoGetStarted.com.ino, a 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 a 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 a IDE reconhecer que houve mudanças no projeto, garantindo que o seu conteúdo HTML atualizado seja incluído no upload.
Servidor Web Arduino - Múltiplas Páginas
Confira este tutorial Arduino - Servidor Web com Múltiplas Páginas.