Arduino UNO R4 - Web Server
Neste guia, vamos mostrar como fazer um Arduino UNO R4 R4 WiFi funcionar como um servidor web. Você pode visitar páginas web no Servidor Web do Arduino UNO R4 usando um navegador no seu computador ou smartphone. Isso permite ver e alterar valores no Arduino UNO R4. Vamos aprender os seguintes passos para programar o Arduino UNO R4 WiFi com essa finalidade:
- Servidor Web Arduino UNO R4 - Página Única: Isso nos ajuda a verificar as leituras de sensores do Arduino UNO R4 por meio de uma página web.
- Servidor Web Arduino UNO R4 - Página Única: Vamos tornar possível gerenciar o Arduino UNO R4 com um navegador web.
- Servidor Web Arduino UNO R4 - Página Única: Vamos aprender a mover elementos HTML (como HTML, CSS e JavaScript) para um arquivo separado no Arduino IDE.
- Servidor Web Arduino UNO R4 - Várias páginas: Vamos criar várias páginas web, como index.html, temperature.html, led.html, error_404.html e error_405.html, entre outras.
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 UNO R4 pela Web
O código do Arduino UNO R4 realiza estas tarefas:
- Criar um servidor web que recebe requisições HTTP de um navegador web.
- Quando um navegador web envia uma requisição, o Arduino UNO R4 responde com:
- Cabeçalho HTTP
- Corpo HTTP: ele contém o conteúdo HTML e os dados do sensor.
- Se esta é a primeira vez que você usa o Arduino Uno R4 WiFi/Minima, consulte o tutorial sobre como configurar o ambiente para o Arduino Uno R4 WiFi/Minima no Arduino IDE.
- Conecte a placa Arduino Uno R4 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.
- 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 e abra-o no Arduino IDE.
- Substitua os dados do WiFi (SSID e senha) no código pelos seus.
- Clique no botão Upload no Arduino IDE para fazer o upload do código para o Arduino UNO R4.
- Abra o Serial Monitor.
- Veja os resultados no Serial Monitor.
- Olhe o endereço IP mostrado e digite-o na barra de endereços de um navegador web no seu smartphone ou computador.
- Em seguida, você verá estas informações no Serial Monitor.
- Ao digitar o endereço IP no seu navegador web, você verá uma página web simples que mostra informações sobre a placa Arduino UNO R4. A página vai aparecer assim:
Aqui está o código do Arduino UNO R4 que realiza as tarefas mencionadas acima:
/*
* Este código de Arduino UNO R4 foi desenvolvido por pt.newbiely.com
* Este código de Arduino UNO R4 é disponibilizado ao público sem nenhuma restrição.
* Para tutoriais completos e diagramas de ligação, visite:
* https://pt.newbiely.com/tutorials/arduino-uno-r4/arduino-uno-r4-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
Siga estas instruções passo a passo:
8
Serial.println("Hello World!");
Message (Enter to send message to 'Arduino Uno R4 WiFi' 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 R4 WiFi' 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 criar uma página web de ótima aparência usando uma interface gráfica de usuário (UI), veja a última parte deste tutorial.
Controlando o Arduino UNO R4 pela Web
Gerenciar um dispositivo conectado ao Arduino UNO R4 é um pouco mais complexo do que simplesmente verificar um valor. Essa complexidade surge porque o Arduino UNO R4 precisa interpretar o comando que recebe do navegador web para determinar a resposta apropriada. Veja como o código do Arduino UNO R4 lida com essa situação:
- Criar um servidor web que recebe requisições HTTP de um navegador web.
- Processar a requisição do navegador por meio de:
- Leitura do cabeçalho da requisição HTTP.
- Análise do cabeçalho da requisição HTTP para descobrir o comando de controle necessário.
- Controle do dispositivo ou item conectado usando o Arduino UNO R4, de acordo com o comando de controle.
- Envio de uma resposta HTTP.
- Opcionalmente, também pode enviar um corpo de resposta HTTP contendo conteúdo HTML para mostrar detalhes sobre o estado do controle (se necessário).
Para um exemplo melhor e mais detalhado, sugiro olhar os tutoriais abaixo:
Separando o conteúdo HTML em outro arquivo no Arduino IDE
Para criar uma página web básica com poucos conteúdos, você pode incluir o HTML no código do Arduino UNO R4, como mencionado antes.
Se você quer criar uma página web mais complexa e impressionante, com muito conteúdo, não é fácil colocar todo o HTML, CSS e JavaScript diretamente no código do Arduino UNO R4. Nesse caso, você pode usar um método diferente para organizar o código.
- O código do Arduino UNO R4 deve ser salvo em um arquivo chamado .ino.
- O código HTML, que inclui HTML, CSS e Javascript, deve ser salvo em um arquivo diferente chamado .h. Isso ajuda a manter o conteúdo da página web separado do código do Arduino UNO R4, tornando-o mais simples de manusear e alterar.
Precisamos seguir dois passos principais:
- Criar o Conteúdo HTML
- Programar o Arduino UNO R4
Preparando o conteúdo HTML
- Crie um arquivo HTML no seu computador. Esse arquivo deve incluir o design da sua interface de usuário usando HTML, CSS e JavaScript.
- No arquivo HTML, coloque um marcador no lugar onde você quer que os dados do Arduino UNO R4 apareçam. Por enquanto, use qualquer valor de exemplo.
- Verifique e ajuste o design do seu arquivo até ficar satisfeito com ele.
- Substitua o valor do marcador no seu arquivo HTML por um rótulo único, como TEMPERATURE_MARKER. Mais tarde, você usará o comando String.replace("TEMPERATURE_MARKER", real_value); no seu script do Arduino UNO R4 para mostrar os dados reais do Arduino.
- Em seguida, vamos transferir esse conteúdo HTML para um arquivo .h dentro do Arduino IDE.
Programando o Arduino UNO R4
- Inicie o Arduino IDE e crie um novo arquivo. Dê a ele este nome: newbiely.com.ino.
- Pegue o código dado abaixo e coloque-o no novo arquivo que você criou.
/*
* Este código de Arduino UNO R4 foi desenvolvido por pt.newbiely.com
* Este código de Arduino UNO R4 é disponibilizado ao público sem nenhuma restrição.
* Para tutoriais completos e diagramas de ligação, visite:
* https://pt.newbiely.com/tutorials/arduino-uno-r4/arduino-uno-r4-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();
}
- Atualize o código com os dados do seu WiFi (SSID e senha)
- No Arduino IDE, crie o arquivo chamado index.h
- Clique no botão abaixo do ícone do serial monitor e selecione New Tab, ou pressione Ctrl+Shift+N.
- Dê ao arquivo o nome index.h e pressione o botão OK.
- Copie o código abaixo e cole-o no arquivo chamado index.h.
/*
* Este código de Arduino UNO R4 foi desenvolvido por pt.newbiely.com
* Este código de Arduino UNO R4 é disponibilizado ao público sem nenhuma restrição.
* Para tutoriais completos e diagramas de ligação, visite:
* https://pt.newbiely.com/tutorials/arduino-uno-r4/arduino-uno-r4-web-server
*/
const char *HTML_CONTENT = R""""(
REPLACE_YOUR_HTML_CONTENT_HERE
)"""";
- Insira o seu conteúdo HTML preparado em REPLACE_YOUR_HTML_CONTENT_HERE. Não tem problema usar caracteres de nova linha. Aqui está um exemplo de arquivo index.h:
/*
* Este código de Arduino UNO R4 foi desenvolvido por pt.newbiely.com
* Este código de Arduino UNO R4 é disponibilizado ao público sem nenhuma restrição.
* Para tutoriais completos e diagramas de ligação, visite:
* https://pt.newbiely.com/tutorials/arduino-uno-r4/arduino-uno-r4-web-server
*/
const char *HTML_CONTENT = R""""(
<!DOCTYPE html>
<html>
<head>
<title>Arduino Uno R4 - 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: newbiely.com.ino e index.h
- Clique no botão Upload no Arduino IDE para enviar o código ao Arduino UNO R4
- Abra a página web da placa Arduino UNO R4 no seu navegador, como nas vezes anteriores. Ela vai aparecer assim:
Para um guia detalhado, confira o tutorial Arduino UNO R4 - Sensor de Temperatura DS18B20 pela Web.
※ Nota:
Se você alterar o HTML no arquivo chamado "index.h", mas não fizer alterações no arquivo "newbiely.com.ino", o Arduino IDE não vai atualizar o HTML quando você compilar e fizer o upload do código para o ESP32.
Para fazer o Arduino IDE atualizar o HTML, você precisa mudar algo no arquivo "newbiely.com.ino". Você pode adicionar uma linha vazia ou um comentário. Isso avisa ao IDE que o projeto mudou, então ele inclui o seu novo HTML durante o upload.
Servidor Web Arduino UNO R4 - Várias Páginas
Visite este tutorial sobre Arduino UNO R4 - Servidor Web com Várias Páginas.