ESP8266 - Servidor Web com Várias Páginas
Este tutorial ensina como transformar um ESP8266 em um servidor web que consegue atender várias páginas ao mesmo tempo, como index.html, temperature.html, led.html, error_404.html e error_405.html...
Seguindo este tutorial, você poderá transformar o seu ESP8266 em um servidor web com alguns recursos bem legais:
- Várias páginas web ficam ativas ao mesmo tempo.
- O conteúdo HTML (incluindo HTML, CSS e Javascript) de cada página é mantido separadamente em seu próprio arquivo na Arduino IDE.
- O conteúdo HTML pode ser atualizado dinamicamente com valores de sensores em tempo real, tornando as páginas web dinâmicas e responsivas.
- O servidor web permite controlar algo conectado ao ESP8266 pela web.
- O servidor web trata códigos de erro HTTP como 404 Not Found e 405 Method Not Allowed
Pode parecer complicado, mas não se preocupe! Este tutorial fornece orientação passo a passo, e o código foi projetado para ser amigável para iniciantes, garantindo que você possa entender e criar facilmente o seu próprio servidor web ESP8266.
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.
Sobre o ESP8266 e o Servidor Web
Se você não conhece o ESP8266 e o Servidor Web (incluindo pinagem, como funciona e programação), você pode aprender sobre eles nos tutoriais a seguir:
Código ESP8266 - Servidor Web de várias páginas
Abaixo está o código completo do ESP8266 que cria um servidor web com várias páginas. Para simplificar, o conteúdo HTML de cada página é muito simples e está embutido diretamente no código do ESP8266. Em outra parte, vamos aprender como separar o conteúdo HTML de cada página em arquivos separados, deixando o código mais organizado e fácil de gerenciar.
/*
* Este código de ESP8266 NodeMCU foi desenvolvido por pt.newbiely.com
* Este código de ESP8266 NodeMCU é disponibilizado ao público sem nenhuma restrição.
* Para tutoriais completos e diagramas de ligação, visite:
* https://pt.newbiely.com/tutorials/esp8266/esp8266-web-server-multiple-pages
*/
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#define LED_PIN D5 // The ESP8266 pin D5 connected to LED
const char *ssid = "YOUR_WIFI_SSID"; // CHANGE IT
const char *password = "YOUR_WIFI_PASSWORD"; // CHANGE IT
ESP8266WebServer server(80); // Web server on port 80
int LED_state = LOW;
float getTemperature() {
// 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 setup() {
Serial.begin(9600);
pinMode(LED_PIN, OUTPUT);
// Connect to Wi-Fi
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.println("Connecting to WiFi...");
}
Serial.println("Connected to WiFi");
// Print the ESP8266's IP address
Serial.print("ESP8266 Web Server's IP address: ");
Serial.println(WiFi.localIP());
// Serve the specified HTML pages
server.on("/", HTTP_GET, []() {
Serial.println("Web Server: home page");
server.send(200, "text/html", "This is the ESP8266 home page");
});
server.on("/temperature.html", HTTP_GET, []() {
Serial.println("Web Server: temperature page");
float temperature = getTemperature();
server.send(200, "text/html", "Temperature: " + String(temperature));
});
server.on("/led.html", HTTP_GET, []() {
Serial.print("Web Server: LED page");
// Check for the 'state' parameter in the query string
if (server.arg("state")) {
String state = server.arg("state");
if (state == "on") {
LED_state = HIGH;
} else if (state == "off") {
LED_state = LOW;
}
// control LED here
digitalWrite(LED_PIN, LED_state);
Serial.print(" => turning LED to ");
Serial.print(state);
}
Serial.println();
server.send(200, "text/html", "LED state: " + String(LED_state));
});
// 404 and 405 error handler
server.onNotFound([]() {
if (server.method() == HTTP_GET) {
// Handle 404 Not Found error
Serial.println("Web Server: Not Found");
server.send(404, "text/html", "Not Found");
} else {
// Handle 405 Method Not Allowed error
Serial.println("Web Server: Method Not Allowed");
server.send(405, "text/html", "Method Not Allowed");
}
});
server.begin();
Serial.println("ESP8266 Web server started");
}
void loop() {
// Handle client requests
server.handleClient();
// Your code can go here or be empty; the server is handled asynchronously
}
Passos Rápidos
Para começar com o ESP8266 na Arduino IDE, siga estes passos:
- Veja o tutorial como configurar o ambiente para o ESP8266 na Arduino IDE se esta for a sua primeira vez usando o ESP8266.
- Ligue os componentes como mostrado no diagrama.
- Conecte a placa ESP8266 ao seu computador usando um cabo USB.
- Abra a Arduino IDE no seu computador.
- Escolha a placa ESP8266 correta, como (por exemplo, NodeMCU 1.0 (ESP-12E Module)), e a respectiva porta COM.
- 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 da Arduino IDE para fazer upload do código para o ESP8266
- Abra o Serial Monitor
- Confira o resultado no Serial Monitor.
8
Serial.println("Hello World!");
Message (Enter to send message to 'Nodemcu 1.0 (ESP-12E Module)' on 'COM15')
New Line
9600 baud
Connecting to WiFi...
Connected to WiFi
ESP8266 Web Server's IP address: 192.168.0.5
ESP8266 Web server started
- Você verá um endereço IP no Serial Monitor, por exemplo: 192.168.0.5
- Digite a lista a seguir, um item de cada vez, na barra de endereços de um navegador no seu celular ou PC.
192.168.0.5
192.168.0.5/index.html
192.168.0.5/led.html
192.168.0.5/temperature.html
192.168.0.5/blabla.html
- Observe que você precisa trocar o 192.168.0.5 pelo endereço IP que você obteve no Serial Monitor.
- Você verá as seguintes páginas: página inicial, página do LED, página da temperatura e página Not Found
- Você também pode conferir a saída no Serial Monitor
8
Serial.println("Hello World!");
Message (Enter to send message to 'Nodemcu 1.0 (ESP-12E Module)' on 'COM15')
New Line
9600 baud
Connecting to WiFi...
Connected to WiFi
ESP8266 Web Server's IP address: 192.168.0.5
ESP8266 Web server started
Web Server: home page
Web Server: LED page
Web Server: LED page => turning LED to on
Web Server: LED page => turning LED to off
Web Server: temperature page
Web Server: Not Found
O código anterior tem um conteúdo HTML muito simples para cada página. Mas se quisermos fazer uma interface sofisticada com muito HTML, o código pode ficar grande e bagunçado. Para simplificar, vamos aprender como separar o HTML do código do ESP8266. Isso nos permite manter o HTML em arquivos separados, facilitando o gerenciamento e o trabalho com ele.
Código ESP8266 - Servidor Web completo de várias páginas
- Abra a Arduino IDE.
- Crie um novo sketch e dê um nome a ele, por exemplo, ESP8266WebServer.ino.
- Copie o código fornecido e cole nesse arquivo.
/*
* Este código de ESP8266 NodeMCU foi desenvolvido por pt.newbiely.com
* Este código de ESP8266 NodeMCU é disponibilizado ao público sem nenhuma restrição.
* Para tutoriais completos e diagramas de ligação, visite:
* https://pt.newbiely.com/tutorials/esp8266/esp8266-web-server-multiple-pages
*/
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include "index.h"
#include "temperature.h"
#include "led.h"
#include "error_404.h"
#include "error_405.h"
#define LED_PIN D6 // The ESP8266 pin connected to LED
const char *ssid = "YOUR_WIFI_SSID"; // CHANGE IT
const char *password = "YOUR_WIFI_PASSWORD"; // CHANGE IT
ESP8266WebServer server(80); // Web server on port 80
int LED_state = LOW;
float getTemperature() {
// 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 setup() {
Serial.begin(9600);
pinMode(LED_PIN, OUTPUT);
// Connect to Wi-Fi
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.println("Connecting to WiFi...");
}
Serial.println("Connected to WiFi");
// Print the ESP8266's IP address
Serial.print("ESP8266 Web Server's IP address: ");
Serial.println(WiFi.localIP());
// Serve the specified HTML pages
server.on("/", HTTP_GET, []() {
Serial.println("Web Server: home page");
String html = HTML_CONTENT_HOME; // Use the HTML content from the index.h file
server.send(200, "text/html", html);
});
server.on("/temperature.html", HTTP_GET, []() {
Serial.println("Web Server: temperature page");
String html = HTML_CONTENT_TEMPERATURE; // Use the HTML content from the temperature.h file
float temperature = getTemperature();
html.replace("%TEMPERATURE_VALUE%", String(temperature)); // update the temperature value
server.send(200, "text/html", html);
});
server.on("/led.html", HTTP_GET, []() {
Serial.print("Web Server: LED page");
// Check for the 'state' parameter in the query string
if (server.arg("state")) {
String state = server.arg("state");
if (state == "on") {
LED_state = HIGH;
} else if (state == "off") {
LED_state = LOW;
}
// control LED here
digitalWrite(LED_PIN, LED_state);
Serial.print(" => turning LED to ");
Serial.print(state);
}
Serial.println();
String html = HTML_CONTENT_LED; // Use the HTML content from the led.h file
html.replace("%LED_STATE%", LED_state ? "ON" : "OFF"); // update the LED state
server.send(200, "text/html", html);
});
// 404 and 405 error handler
server.onNotFound([]() {
if (server.method() == HTTP_GET) {
// Handle 404 Not Found error
Serial.println("Web Server: Not Found");
String html = HTML_CONTENT_404; // Use the HTML content from the error_404.h file
server.send(404, "text/html", html);
} else {
// Handle 405 Method Not Allowed error
Serial.println("Web Server: Method Not Allowed");
String html = HTML_CONTENT_405; // Use the HTML content from the error_405.h file
server.send(405, "text/html", html);
}
});
server.begin();
Serial.println("ESP8266 Web server started");
}
void loop() {
// Handle client requests
server.handleClient();
// Your code can go here or be empty; the server is handled asynchronously
}
- 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 no arquivo index.h.
- Da mesma forma, crie o arquivo led.h na Arduino IDE com o seguinte conteúdo.
- Da mesma forma, crie o arquivo temperature.h na Arduino IDE com o seguinte conteúdo.
- Da mesma forma, crie o arquivo error_404.h na Arduino IDE com o seguinte conteúdo.
- Da mesma forma, crie o arquivo error_405.h na Arduino IDE com o seguinte conteúdo.
- Agora você tem vários arquivos na Arduino IDE, como abaixo:
- Clique no botão Upload da Arduino IDE para fazer upload do código para o ESP8266
- Acesse as páginas web da placa ESP8266 pelo navegador, uma por uma, como antes. Você verá todas as páginas web como abaixo:
/*
* Este código de ESP8266 NodeMCU foi desenvolvido por pt.newbiely.com
* Este código de ESP8266 NodeMCU é disponibilizado ao público sem nenhuma restrição.
* Para tutoriais completos e diagramas de ligação, visite:
* https://pt.newbiely.com/tutorials/esp8266/esp8266-web-server-multiple-pages
*/
const char *HTML_CONTENT_HOME = R"=====(
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="data:,">
<title>Home Page</title>
</head>
<body>
<h1>Welcome to the Home Page</h1>
<ul>
<li><a href="/led.html">LED Page</a></li>
<li><a href="/temperature.html">Temperature Page</a></li>
</ul>
</body>
</html>
)=====";
/*
* Este código de ESP8266 NodeMCU foi desenvolvido por pt.newbiely.com
* Este código de ESP8266 NodeMCU é disponibilizado ao público sem nenhuma restrição.
* Para tutoriais completos e diagramas de ligação, visite:
* https://pt.newbiely.com/tutorials/esp8266/esp8266-web-server-multiple-pages
*/
const char *HTML_CONTENT_LED = R"=====(
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="data:,">
<title>LED Page</title>
</head>
<body>
<h1>LED Page</h1>
<p>LED State: <span style="color: red;">%LED_STATE%</span></p>
<a href='/led.html?state=on'>Turn ON</a>
<br><br>
<a href='/led.html?state=off'>Turn OFF</a>
</body>
</html>
)=====";
/*
* Este código de ESP8266 NodeMCU foi desenvolvido por pt.newbiely.com
* Este código de ESP8266 NodeMCU é disponibilizado ao público sem nenhuma restrição.
* Para tutoriais completos e diagramas de ligação, visite:
* https://pt.newbiely.com/tutorials/esp8266/esp8266-web-server-multiple-pages
*/
const char *HTML_CONTENT_TEMPERATURE = R"=====(
<!DOCTYPE html>
<html>
<head>
<title>ESP8266 - 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_VALUE%);
}
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>ESP8266 - Web Temperature</h1>
<canvas id="cvs"></canvas>
</body>
</html>
)=====";
/*
* Este código de ESP8266 NodeMCU foi desenvolvido por pt.newbiely.com
* Este código de ESP8266 NodeMCU é disponibilizado ao público sem nenhuma restrição.
* Para tutoriais completos e diagramas de ligação, visite:
* https://pt.newbiely.com/tutorials/esp8266/esp8266-web-server-multiple-pages
*/
const char *HTML_CONTENT_404 = R"=====(
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="data:,">
<title>404 - Page Not Found</title>
<style>
h1 {color: #ff4040;}
</style>
</head>
<body>
<h1>404</h1>
<p>Oops! The page you are looking for could not be found on Esp32 Web Server.</p>
<p>Please check the URL or go back to the <a href="/">homepage</a>.</p>
<p>Or check <a href="https://esp32io.com/tutorials/esp32-web-server-multiple-pages"> Esp32 Web Server</a> tutorial.</p>
</body>
</html>
)=====";
/*
* Este código de ESP8266 NodeMCU foi desenvolvido por pt.newbiely.com
* Este código de ESP8266 NodeMCU é disponibilizado ao público sem nenhuma restrição.
* Para tutoriais completos e diagramas de ligação, visite:
* https://pt.newbiely.com/tutorials/esp8266/esp8266-web-server-multiple-pages
*/
const char *HTML_CONTENT_405 = R"=====(
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="data:,">
<title>405 - Method Not Allowed</title>
<style>
h1 {color: #ff4040;}
</style>
</head>
<body>
<h1>405 - Method Not Allowed</h1>
<p>Oops! The requested method is not allowed for this resource.</p>
<p>Please check your request or go back to the <a href="/">homepage</a>.</p>
<p>Or check <a href="https://esp32io.com/tutorials/esp32-web-server-multiple-pages"> Esp32 Web Server</a> tutorial.</p>
</body>
</html>
)=====";
