Arduino - Webserver
In deze tutorial leert u hoe u een Arduino Uno R4 WiFi verandert in een webserver. Door de webpagina’s die op de Arduino Webserver worden gehost te openen via een webbrowser op uw pc of smartphone, kunt u waarden uitlezen van de Arduino en deze zelfs bedienen. Hieronder vindt u een overzicht van wat we gaan leren programmeren op de Arduino Uno WiFi om dit te bereiken:
- Arduino Web Server - Enkelvoudige pagina: Hiermee kunt u sensorwaarden op de Arduino monitoren via een webinterface.
- Arduino Web Server - Enkelvoudige pagina: We voegen de mogelijkheid toe om de Arduino te bedienen via een webbrowser.
- Arduino Web Server - Enkelvoudige pagina: We leren hoe we HTML-inhoud (HTML, CSS en Javascript) in een apart bestand in de Arduino IDE kunnen plaatsen.
- Arduino Web Server - Meerdere pagina’s: In deze stap maken we meerdere pagina’s zoals index.html, temperature.html, led.html, error_404.html en error_405.html, en meer.
Benodigd Hardware
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.
Sensorwaarde uitlezen van Arduino via Web
Dit is relatief eenvoudig. De Arduino-code voert de volgende taken uit:
- Een webserver maken die luistert naar HTTP-verzoeken van een webbrowser.
- Bij ontvangst van een verzoek van een webbrowser reageert de Arduino met de volgende informatie:
- HTTP-header
- HTTP-lichaam: Dit bevat de HTML-inhoud en de uitgelezen waarde van de sensor.
- Als u voor het eerst een Arduino Uno R4 gebruikt, bekijk dan hoe u de omgeving instelt voor Arduino Uno R4 in de Arduino IDE.
- Open de Library Manager door te klikken op het Library Manager-icoon aan de linkerkant van de Arduino IDE.
- Zoek naar Web Server for Arduino Uno R4 WiFi en zoek de Web Server-bibliotheek gemaakt door DIYables.
- Klik op de Installeren-knop om de Web Server-bibliotheek toe te voegen.
- Kopieer de bovenstaande code en open deze met Arduino IDE.
- Pas de WiFi-gegevens (SSID en wachtwoord) in de code aan naar uw eigen gegevens.
- Klik op de Upload-knop in de Arduino IDE om de code naar de Arduino te uploaden.
- Open de Seriële Monitor.
- Bekijk het resultaat in de Seriële Monitor.
- Neem het weergegeven IP-adres in acht en voer dit adres in de adresbalk van een webbrowser op uw smartphone of pc in.
- Vervolgens ziet u de volgende uitvoer op de Seriële Monitor:
- Wanneer u het IP-adres in uw webbrowser opent, krijgt u een eenvoudige webpagina te zien met informatie over het Arduino-bord. De pagina lijkt op het volgende:
Hieronder staat de Arduino-code die deze taken uitvoert:
/*
* Deze Arduino code is ontwikkeld door newbiely.nl
* Deze Arduino code wordt zonder enige beperking aan het publiek beschikbaar gesteld.
* Voor volledige instructies en schema's, bezoek:
* https://newbiely.nl/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();
}
Snelle stappen
COM6
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
Autoscroll
Clear output
9600 baud
Newline
COM6
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
Autoscroll
Clear output
9600 baud
Newline
Om de webpagina er fantastisch uit te laten zien met een grafische gebruikersinterface (UI), bekijk dan de laatste sectie van deze tutorial.
Arduino bedienen via Web
Iets aansturen wat aan een Arduino is verbonden is iets uitdagender dan alleen een waarde uitlezen. Dit komt doordat de Arduino het verzoek dat het ontvangt van de webbrowser moet begrijpen om te weten welke actie het moet uitvoeren. De Arduino-code doet in dit geval het volgende:
- Een webserver maken die luistert naar HTTP-verzoeken van een webbrowser.
- Het afhandelen van het ontvangen verzoek van de webbrowser door het volgende te doen:
- Leest de HTTP-verzoek-header.
- Analyseert de HTTP-verzoek-header om te bepalen welk specifieke bedieningscommando nodig is.
- Stuurt het apparaat of object dat aan de Arduino is verbonden aan op basis van het ontvangen bedieningscommando.
- Stuurt een HTTP-respons terug.
- Kan bovendien een HTTP-antwoordlichaam met HTML-inhoud sturen om informatie over de bedieningsstatus te tonen (indien nodig).
Voor uitgebreide en gedetailleerde voorbeelden raad ik u aan de volgende tutorials te bekijken:
HTML-inhoud scheiden in een apart bestand in Arduino IDE
Als u een eenvoudige webpagina met minimale inhoud wilt maken, kunt u het HTML direct in de Arduino-code insluiten, zoals eerder uitgelegd.
Echter, als u een meer geavanceerde en indrukwekkende webpagina met grotere inhoud wilt maken, wordt het onhandig om alle HTML, CSS en Javascript direct in de Arduino-code te plaatsen. In dit geval kunt u deze alternatieve aanpak gebruiken om de code beter te beheren:
- De Arduino-code wordt geplaatst in een .ino-bestand, zoals voorheen.
- De HTML-code (HTML, CSS, Javascript) wordt geplaatst in een apart .h-bestand. Dit maakt het mogelijk om de webpagina-inhoud gescheiden te houden van de Arduino-code en vergemakkelijkt beheer en aanpassing.
Hiervoor moeten we twee grote stappen uitvoeren:
- HTML-inhoud voorbereiden
- Arduino programmeren
HTML-inhoud voorbereiden
- Maak een HTML-bestand op uw lokale pc met de HTML-inhoud (HTML, CSS en Javascript) voor uw UI-ontwerp.
- Gebruik in het HTML-bestand waar Arduino-gegevens moeten verschijnen een willekeurige tijdelijke waarde.
- Test en pas het bestand aan totdat u tevreden bent.
- Vervang vervolgens op de plaatsen waar Arduino-gegevens moeten komen in het HTML-bestand die tijdelijke waarde door een speciale naam, bijvoorbeeld TEMPERATURE_MARKER. In de Arduino-code zullen we later de functie String.replace("TEMPERATURE_MARKER", real_value); gebruiken om deze waarde te vervangen door de werkelijke waarde uit de Arduino.
- We plaatsen de HTML-inhoud in het .h-bestand binnen de Arduino IDE. Dit volgen we in de volgende stap.
Arduino programmeren
- Open de Arduino IDE en maak een nieuwe sketch aan. Geef deze een naam, bijvoorbeeld ArduinoGetStarted.com.ino.
- Kopieer de onderstaande code en plak deze in het gemaakte bestand.
/*
* Deze Arduino code is ontwikkeld door newbiely.nl
* Deze Arduino code wordt zonder enige beperking aan het publiek beschikbaar gesteld.
* Voor volledige instructies en schema's, bezoek:
* https://newbiely.nl/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();
}
- Pas de WiFi-gegevens (SSID en wachtwoord) in de code aan naar uw eigen gegevens.
- Maak het index.h-bestand aan in de Arduino IDE door:
- Klik op de knop net onder het seriële monitor icoon en kies Nieuw tabblad, of gebruik de toetscombinatie 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 code is ontwikkeld door newbiely.nl
* Deze Arduino code wordt zonder enige beperking aan het publiek beschikbaar gesteld.
* Voor volledige instructies en schema's, bezoek:
* https://newbiely.nl/tutorials/arduino/arduino-web-server
*/
const char *HTML_CONTENT = R""""(
REPLACE_YOUR_HTML_CONTENT_HERE
)"""";
- Vervang de regel REPLACE_YOUR_HTML_CONTENT_HERE door uw eerder voorbereide HTML-inhoud. Nieuwe regel-tekens zijn geen probleem. Hieronder een voorbeeld van een index.h-bestand:
/*
* Deze Arduino code is ontwikkeld door newbiely.nl
* Deze Arduino code wordt zonder enige beperking aan het publiek beschikbaar gesteld.
* Voor volledige instructies en schema's, bezoek:
* https://newbiely.nl/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>
)"""";
- Nu heeft u de code verdeeld over twee bestanden: ArduinoGetStarted.com.ino en index.h.
- Klik op de Upload-knop in de Arduino IDE om de code naar de Arduino te uploaden.
- Open in de webbrowser de webpagina van de Arduino, zoals eerder gedaan. U ziet het volgende:
Voor een uitgebreidere en meer gedetailleerde uitleg, zie de tutorial Arduino - DS18B20 Temperatuursensor via Web.
※ Notiz:
- Als u de HTML-inhoud in het index.h-bestand wijzigt zonder iets aan te passen in het ArduinoGetStarted.com.ino-bestand, dan wordt de HTML-inhoud niet bijgewerkt bij het compileren en uploaden van de Arduino IDE.
- Om de Arduino IDE te dwingen de HTML-inhoud in dit geval te updaten, moet u een kleine wijziging in het ArduinoGetStarted.com.ino-bestand doorvoeren. Bijvoorbeeld een lege regel toevoegen of een commentaarregel invoegen. Dit zorgt ervoor dat de IDE de wijziging herkent en de nieuwe HTML-inhoud meeneemt bij het uploaden.
Arduino Webserver - Meerdere pagina’s
Bekijk de tutorial Arduino - Web Server Meerdere Pagina’s.