Arduino Nano - Webserver
In deze handleiding laten we u zien hoe u een Arduino Nano bord programmeert met een Ethernet-module om te functioneren als een webserver. U kunt gegevens bekijken en de Arduino Nano bedienen via webpagina’s die toegankelijk zijn vanaf uw computer of smartphone. We beginnen met eenvoudige taken en werken toe naar meer geavanceerde toepassingen, zoals hieronder beschreven:
- Arduino Nano Webserver - Hello World!
- Arduino Nano Webserver - Sensorwaarden monitoren via een webpagina.
- Arduino Nano Webserver - Automatisch bijwerken van waarden op de webpagina.
- Arduino Nano Webserver - HTML, CSS en JavaScript scheiden van de Arduino-code.
- Arduino Nano Webserver - De Arduino Nano bedienen via een webpagina.
Hardware Benodigd
Of u kunt de volgende kits kopen:
| 1 | × | DIYables Sensorkit (30 sensoren/displays) | |
| 1 | × | DIYables Sensorkit (18 sensoren/displays) |
Openbaarmaking: Sommige van de links in deze sectie zijn Amazon-affiliate links. We kunnen een commissie ontvangen voor aankopen die via deze links worden gedaan, zonder extra kosten voor u. We waarderen uw steun.
Aansluitschema tussen Arduino Nano en W5500 Ethernet module
This image is created using Fritzing. Click to enlarge image
image source: diyables.io
Arduino Nano Webserver - Hello World
Dit is relatief eenvoudig. De Arduino Nano code voert de volgende taken uit:
- Het aanmaken van een webserver die luistert naar HTTP-verzoeken van een webbrowser.
- Bij het ontvangen van een verzoek van een webbrowser, reageert de Arduino Nano met de volgende informatie:
- HTTP-header
- HTTP-body: bevat de tekst "Hello World!".
- Verbind de Arduino Nano met de Ethernet module volgens het bovenstaande aansluitschema.
- Sluit een Ethernetkabel aan op de Ethernet module.
- Verbind de Arduino Nano met een pc via een USB-kabel.
- Start de Arduino IDE op uw pc.
- Selecteer het board Arduino Nano en de bijbehorende COM-poort.
- Klik op het Libraries icoon in de linkerzijbalk van de Arduino IDE.
- Zoek op “Ethernet” en selecteer de Ethernet-library van Various.
- Klik op de Installeren knop om de Ethernet-library te installeren.
- Kopieer de bovenstaande code en open deze in de Arduino IDE.
- Klik op de Upload knop in de Arduino IDE om de code naar de Arduino Nano te uploaden.
- Open de Seriële Monitor.
- Controleer het resultaat in de Seriële Monitor.
- Noteer het IP-adres dat wordt getoond en voer dit in de adresbalk van een webbrowser op uw smartphone of pc in.
- U ziet dan de volgende output in de Seriële Monitor.
- Zodra u de webbrowser opent met het IP-adres, ziet u een eenvoudige webpagina die "Hello World!" weergeeft. De pagina ziet er als volgt uit:
Hieronder staat de Arduino Nano code die bovenstaande taken uitvoert:
/*
* Deze Arduino Nano code is ontwikkeld door newbiely.nl
* Deze Arduino Nano code wordt zonder enige beperking aan het publiek beschikbaar gesteld.
* Voor volledige instructies en schema's, bezoek:
* https://newbiely.nl/tutorials/arduino-nano/arduino-nano-web-server
*/
#include <SPI.h>
#include <Ethernet.h>
// MAC address for the Ethernet module, you can modify it as needed
byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
IPAddress ip(192, 168, 1, 177); // Set a static IP address
EthernetServer server(80); // Create an Ethernet server that listens on port 80
void setup() {
//Initialize serial communication:
Serial.begin(9600);
// Start the Ethernet connection:
if (Ethernet.begin(mac) == 0) {
Serial.println(F("Failed to configure Ethernet using DHCP"));
// Try with a static IP:
Ethernet.begin(mac, ip);
}
// Start the server:
server.begin();
// Print the Ethernet board's IP address:
Serial.print(F("Arduino Nano Web Server's IP address: "));
Serial.println(Ethernet.localIP());
}
void loop() {
// Listen for incoming clients
EthernetClient client = server.available();
if (client) {
// read the HTTP request header line by line
while (client.connected()) {
if (client.available()) {
String HTTP_header = client.readStringUntil('\n'); // read the header line of HTTP request
if (HTTP_header.equals("\r")) // the end of HTTP request
break;
Serial.print(F("<< "));
Serial.println(HTTP_header); // print HTTP request to Serial Monitor
}
}
// send the HTTP response
// send the HTTP response header
client.println(F("HTTP/1.1 200 OK"));
client.println(F("Content-Type: text/html"));
client.println(F("Connection: close")); // the connection will be closed after completion of the response
client.println(); // the separator between HTTP header and body
// send the HTTP response body
client.println(F("<!DOCTYPE HTML>"));
client.println(F("<html>"));
client.println(F("<head>"));
client.println(F("<link rel=\"icon\" href=\"data:,\">"));
client.println(F("</head>"));
client.println(F("<p>"));
client.println(F("Hello World!"));
client.println(F("</p>"));
client.println(F("</html>"));
client.flush();
// give the web browser time to receive the data
delay(10);
// close the connection:
client.stop();
}
}
Snelle Stappen
COM6
Arduino Nano Webserver IP-adres: 192.168.0.3
Autoscroll
Clear output
9600 baud
Newline
COM6
Arduino Nano Webserver IP-adres: 192.168.0.3
<< GET / HTTP/1.1
<< Host: 192.168.0.3
<< Connection: keep-alive
<< Upgrade-Insecure-Requests: 1
<< User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/129.0.0.0 Safari/537.36 Edg/129.0.0.0
<< Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7
<< Accept-Encoding: gzip, deflate
<< Accept-Language: en-US,en;q=0.9,ko;q=0.8
Autoscroll
Clear output
9600 baud
Newline
Arduino Nano Webserver - Sensorwaarden monitoren via een webpagina
De onderstaande Arduino Nano code voert de volgende taken uit:
- Het aanmaken van een webserver die luistert naar HTTP-verzoeken van een webbrowser.
- Bij het ontvangen van een verzoek van een webbrowser, reageert de Arduino Nano met de volgende informatie:
- HTTP-header
- HTTP-body: bevat HTML-, CSS-inhoud en de uitgelezen waarde van de sensor.
- Kopieer de bovenstaande code en open deze in de Arduino IDE.
- Klik op de Upload knop in de Arduino IDE om de code naar de Arduino Nano te uploaden.
- Vernieuw de eerdere webpagina (Ctrl + F5), en u ziet het onderstaande resultaat:
/*
* Deze Arduino Nano code is ontwikkeld door newbiely.nl
* Deze Arduino Nano code wordt zonder enige beperking aan het publiek beschikbaar gesteld.
* Voor volledige instructies en schema's, bezoek:
* https://newbiely.nl/tutorials/arduino-nano/arduino-nano-web-server
*/
#include <SPI.h>
#include <Ethernet.h>
// MAC address for the Ethernet module, you can modify it as needed
byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
IPAddress ip(192, 168, 1, 177); // Set a static IP address
EthernetServer server(80); // Create an Ethernet server that listens on port 80
float getTemperature() {
// YOUR SENSOR IMPLEMENTATION HERE
// simulate the temperature value
float temp_x100 = random(0, 10000); // a random value from 0 to 10000
return temp_x100 / 100; // return the simulated temperature value from 0 to 100 in float
}
void setup() {
//Initialize serial communication:
Serial.begin(9600);
// Start the Ethernet connection:
if (Ethernet.begin(mac) == 0) {
Serial.println(F("Failed to configure Ethernet using DHCP"));
// Try with a static IP:
Ethernet.begin(mac, ip);
}
// Start the server:
server.begin();
// Print the Ethernet board's IP address:
Serial.print(F("Server is at: "));
Serial.println(Ethernet.localIP());
}
void loop() {
// Listen for incoming clients
EthernetClient client = server.available();
if (client) {
// read the HTTP request header line by line
while (client.connected()) {
if (client.available()) {
String HTTP_header = client.readStringUntil('\n'); // read the header line of HTTP request
if (HTTP_header.equals("\r")) // the end of HTTP request
break;
Serial.print(F("<< "));
Serial.println(HTTP_header); // print HTTP request to Serial Monitor
}
}
// send the HTTP response
// send the HTTP response header
client.println(F("HTTP/1.1 200 OK"));
client.println(F("Content-Type: text/html"));
client.println(F("Connection: close")); // the connection will be closed after completion of the response
client.println(); // the separator between HTTP header and body
// send the HTTP response body
client.println(F("<!DOCTYPE HTML>"));
client.println(F("<html>"));
client.println(F("<head>"));
client.println(F("<link rel=\"icon\" href=\"data:,\">"));
client.println(F("</head>"));
client.println(F("<p>"));
client.print(F("Temperature: <span style=\"color: red;\">"));
float temperature = getTemperature();
client.print(temperature, 2);
client.println(F("°C</span>"));
client.println(F("</p>"));
client.println(F("</html>"));
client.flush();
// give the web browser time to receive the data
delay(10);
// close the connection:
client.stop();
}
}
Snelle Stappen
Met de aangeleverde code moet u om de temperatuur te vernieuwen de pagina in de webbrowser herladen. In de volgende sectie leert u hoe u de webpagina automatisch de temperatuurwaarde op de achtergrond laat vernieuwen zonder te herladen.
Arduino Nano Webserver - Automatisch bijwerken van waarden op de webpagina
Hoe Automatisch Bijwerken Werkt
- De gebruiker voert het IP-adres van de Arduino Nano in de webbrowser in.
- De webbrowser stuurt een HTTP-verzoek naar de homepage (/) van de Arduino Nano.
- De Arduino reageert met HTML, CSS en JavaScript.
- De webbrowser toont de webpagina met de ontvangen HTML en CSS.
- Elke 3 seconden voert de webbrowser het JavaScript uit, dat een HTTP-verzoek doet naar de /temperature endpoint.
- De Arduino leest de sensorwaarde uit en stuurt deze terug als antwoord.
- De webbrowser ontvangt de sensorwaarde en werkt de webpagina daar direct mee bij.
Hieronder staat de Arduino Nano code die bovenstaande taken uitvoert:
/*
* Deze Arduino Nano code is ontwikkeld door newbiely.nl
* Deze Arduino Nano code wordt zonder enige beperking aan het publiek beschikbaar gesteld.
* Voor volledige instructies en schema's, bezoek:
* https://newbiely.nl/tutorials/arduino-nano/arduino-nano-web-server
*/
#include <SPI.h>
#include <Ethernet.h>
// MAC address and IP address for the Ethernet module (modify if necessary)
byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
IPAddress ip(192, 168, 1, 177); // Static IP address for the Arduino Nano
EthernetServer server(80); // Set up the Ethernet server to listen on port 80
const char* HTML_CONTENT = R"=====(
<!DOCTYPE html>
<html>
<head>
<title>Arduino Nano Temperature</title>
</head>
<body>
<h1>Arduino Nano Temperature</h1>
<p>Temperature: <span style="color: red;"><span id="temperature">Loading...</span> ℃</span></p>
<script>
function fetchTemperature() {
fetch("/temperature")
.then(response => response.text())
.then(data => {
document.getElementById("temperature").textContent = data;
});
}
fetchTemperature();
setInterval(fetchTemperature, 3000); // Update temperature every 3 seconds
</script>
</body>
</html>
)=====";
float getTemperature() {
// YOUR SENSOR IMPLEMENTATION HERE
// simulate the temperature value
float temp_x100 = random(0, 10000); // a random value from 0 to 10000
return temp_x100 / 100; // return the simulated temperature value from 0 to 100 in float
}
void setup() {
// Start serial communication
Serial.begin(9600);
// Start Ethernet connection
if (Ethernet.begin(mac) == 0) {
Serial.println(F("Failed to configure Ethernet using DHCP"));
// Try with a static IP address if DHCP fails
Ethernet.begin(mac, ip);
}
// Start the server
server.begin();
// Print the Arduino Nano's IP address
Serial.print(F("Arduino Nano Web Server's IP address: "));
Serial.println(Ethernet.localIP());
}
void loop() {
// Listen for incoming clients
EthernetClient client = server.available();
if (client) {
Serial.println(F("Client connected"));
// Wait until the client sends some data
while (client.connected()) {
if (client.available()) {
// Read the first line of the HTTP request
String request = client.readStringUntil('\r');
Serial.print(F("Request: "));
Serial.println(request);
client.flush();
// Serve the HTML page from the index.h file if the request is "/"
if (request.indexOf("GET / ") >= 0) {
client.println(F("HTTP/1.1 200 OK"));
client.println(F("Content-Type: text/html"));
client.println(F("Connection: close")); // Connection will be closed after the response
client.println();
client.println(HTML_CONTENT); // Send the HTML page from index.h
}
// Serve the temperature data if the request is "/temperature"
else if (request.indexOf("GET /temperature") >= 0) {
float temperature = getTemperature();
client.println(F("HTTP/1.1 200 OK"));
client.println(F("Content-Type: text/plain"));
client.println(F("Connection: close")); // Connection will be closed after the response
client.println();
client.print(temperature, 2); // Send the temperature as plain text
}
// Close the connection
client.stop();
Serial.println(F("Client disconnected"));
}
}
}
}
Snelle Stappen
- Kopieer de bovenstaande code en open deze in de Arduino IDE.
- Klik op de Upload knop in de Arduino IDE om de code naar de Arduino Nano te uploaden.
- Vernieuw de eerdere webpagina (Ctrl + F5), en u ziet het resultaat zoals hieronder:
U ziet dat de waarde elke 3 seconden automatisch wordt bijgewerkt.
HTML-inhoud scheiden in een apart bestand in de Arduino IDE
Als u een eenvoudige webpagina met minimale inhoud wilt maken, kunt u HTML direct in de Arduino Nano code opnemen, zoals eerder uitgelegd.
Voor complexere en functie-rijkere webpagina’s kan het omslachtig worden om alle HTML, CSS en JavaScript direct in de Arduino Nano code te verwerken. In dat geval is het beter een andere aanpak te gebruiken om de code te beheren:
- De Arduino Nano code blijft opgeslagen in een .ino bestand zoals gebruikelijk.
- De webpagina-inhoud (HTML, CSS, JavaScript) wordt geplaatst in een apart .h bestand. Deze scheiding maakt het eenvoudiger om de webpagina te beheren en bij te werken zonder de Arduino code onoverzichtelijk te maken.
Snelle Stappen
- Open de Arduino IDE en maak een nieuwe sketch aan. Geef deze een naam, bijvoorbeeld newbiely.com.ino.
- Kopieer de onderstaande code en plak deze in het gemaakte bestand.
/*
* Deze Arduino Nano code is ontwikkeld door newbiely.nl
* Deze Arduino Nano code wordt zonder enige beperking aan het publiek beschikbaar gesteld.
* Voor volledige instructies en schema's, bezoek:
* https://newbiely.nl/tutorials/arduino-nano/arduino-nano-web-server
*/
#include <SPI.h>
#include <Ethernet.h>
#include "index.h" // Include the index.h file
// MAC address and IP address for the Ethernet module (modify if necessary)
byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
IPAddress ip(192, 168, 1, 177); // Static IP address for the Arduino Nano
EthernetServer server(80); // Set up the Ethernet server to listen on port 80
float getTemperature() {
// YOUR SENSOR IMPLEMENTATION HERE
// simulate the temperature value
float temp_x100 = random(0, 10000); // a random value from 0 to 10000
return temp_x100 / 100; // return the simulated temperature value from 0 to 100 in float
}
void setup() {
// Start serial communication
Serial.begin(9600);
// Start Ethernet connection
if (Ethernet.begin(mac) == 0) {
Serial.println(F("Failed to configure Ethernet using DHCP"));
// Try with a static IP address if DHCP fails
Ethernet.begin(mac, ip);
}
// Start the server
server.begin();
// Print the Arduino Nano's IP address
Serial.print(F("Arduino Nano Web Server's IP address: "));
Serial.println(Ethernet.localIP());
}
void loop() {
// Listen for incoming clients
EthernetClient client = server.available();
if (client) {
Serial.println(F("Client connected"));
// Wait until the client sends some data
while (client.connected()) {
if (client.available()) {
// Read the first line of the HTTP request
String request = client.readStringUntil('\r');
Serial.print(F("Request: "));
Serial.println(request);
client.flush();
// Serve the HTML page from the index.h file if the request is "/"
if (request.indexOf("GET / ") >= 0) {
client.println(F("HTTP/1.1 200 OK"));
client.println(F("Content-Type: text/html"));
client.println(F("Connection: close")); // Connection will be closed after the response
client.println();
client.println(HTML_CONTENT); // Send the HTML page from index.h
}
// Serve the temperature data if the request is "/temperature"
else if (request.indexOf("GET /temperature") >= 0) {
float temperature = getTemperature();
client.println(F("HTTP/1.1 200 OK"));
client.println(F("Content-Type: text/plain"));
client.println(F("Connection: close")); // Connection will be closed after the response
client.println();
client.print(temperature, 2); // Send the temperature as plain text
}
// Close the connection
client.stop();
Serial.println(F("Client disconnected"));
}
}
}
}
- Maak het bestand index.h aan in de Arduino IDE door:
- Ofwel klikt u op de knop net onder het seriële monitor-icoon en kiest u New Tab, of gebruikt u de sneltoetsen Ctrl+Shift+N.
- Geef het bestand de naam index.h en klik op OK.
- Kopieer de onderstaande code en plak deze in index.h.
/*
* Deze Arduino Nano code is ontwikkeld door newbiely.nl
* Deze Arduino Nano code wordt zonder enige beperking aan het publiek beschikbaar gesteld.
* Voor volledige instructies en schema's, bezoek:
* https://newbiely.nl/tutorials/arduino-nano/arduino-nano-web-server
*/
/*
* This Arduino Nano code was developed by newbiely.com
*
* This Arduino Nano code is made available for public use without any restriction
*
* For comprehensive instructions and wiring diagrams, please visit:
* http://localhost/web/newbiely.com/public/tutorials/arduino-nano-esp32/arduino-nano-esp32-web-server
*/
#ifndef WEBPAGE_H
#define WEBPAGE_H
const char* HTML_CONTENT = R"=====(
<!DOCTYPE html>
<html>
<head>
<title>Arduino Nano Temperature</title>
</head>
<body>
<h1>Arduino Nano Temperature</h1>
<p>Temperature: <span style="color: red;"><span id="temperature">Loading...</span> ℃</span></p>
<script>
function fetchTemperature() {
fetch("/temperature")
.then(response => response.text())
.then(data => {
document.getElementById("temperature").textContent = data;
});
}
fetchTemperature();
setInterval(fetchTemperature, 3000); // Update temperature every 3 seconds
</script>
</body>
</html>
)=====";
#endif
- Nu heeft u de code verdeeld over twee bestanden: newbiely.com.ino en index.h.
- Klik op de Upload knop in de Arduino IDE om de code naar de Arduino Nano te uploaden.
- Vernieuw de webpagina (met Ctrl + F5), deze ziet er hetzelfde uit als voorheen.
※ Notiz:
- Als u de HTML-inhoud in het index.h bestand wijzigt zonder iets in het newbiely.com.ino bestand aan te passen, zal de Arduino IDE de gewijzigde HTML-inhoud niet vernieuwen of meenemen bij het compileren en uploaden van de code naar de Arduino Nano.
- Om zeker te zijn dat de Arduino IDE de HTML-inhoud vernieuwt, moet u een kleine wijziging doorvoeren in het newbiely.com.ino bestand, bijvoorbeeld het toevoegen van een lege regel of een commentaarregel. Dit dwingt de IDE om veranderingen te detecteren, waardoor de vernieuwde HTML-inhoud bij het uploaden wordt meegenomen.
De Arduino Nano bedienen via het web
Iets bedienen dat verbonden is met de Arduino Nano is iets uitdagender dan alleen het lezen van een waarde. De Arduino Nano moet immers het binnenkomende verzoek van de webbrowser interpreteren om te weten welke actie moet worden uitgevoerd.
Voor meer uitgebreide en gedetailleerde voorbeelden raad ik aan de onderstaande tutorials te bekijken: