Arduino UNO R4 - Web Server
In deze handleiding laten we u zien hoe u een Arduino UNO R4 WiFi laat werken als web server. U kunt webpagina's bezoeken op de Arduino UNO R4 Web Server met een webbrowser op uw computer of smartphone. Hiermee kunt u waarden op de Arduino UNO R4 bekijken en wijzigen. We zullen de volgende stappen leren om de Arduino UNO R4 WiFi voor dit doel te programmeren:
- Arduino UNO R4 Web Server - Enkele pagina: Dit helpt ons sensormeetwaarden op de Arduino UNO R4 te controleren via een webpagina.
- Arduino UNO R4 Web Server - Enkele pagina: We maken het mogelijk om de Arduino UNO R4 te beheren met een webbrowser.
- Arduino UNO R4 Web Server - Enkele pagina: We leren hoe we HTML-elementen (zoals HTML, CSS en JavaScript) naar een apart bestand in de Arduino IDE kunnen verplaatsen.
- Arduino UNO R4 Web Server - Meerdere pagina's: We maken verschillende webpagina's zoals index.html, temperature.html, led.html, error_404.html en error_405.html, onder andere.
Hardware Vereist
Of u kunt de volgende kits kopen:
| 1 | × | DIYables STEM V4 IoT Starterskit (Arduino inbegrepen) | |
| 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 UNO R4 via Web
De Arduino UNO R4 code voert deze taken uit:
- Opbouwen van een web server die HTTP-verzoeken ontvangt van een webbrowser.
- Wanneer een webbrowser een verzoek stuurt, antwoordt de Arduino UNO R4 met:
- HTTP header
- HTTP body: Deze bevat HTML-inhoud en sensorgegevens.
- Als dit uw eerste keer is met de Arduino Uno R4 WiFi/Minima, raadpleeg dan de tutorial over het instellen van de omgeving voor Arduino Uno R4 WiFi/Minima in de Arduino IDE.
- Verbind het Arduino Uno R4 board met uw computer via een USB-kabel.
- Start de Arduino IDE op uw computer.
- Selecteer het juiste Arduino Uno R4 board (bijvoorbeeld Arduino Uno R4 WiFi) en COM-poort.
- 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 vind de Web Server library gemaakt door DIYables.
- Klik op de Install knop om de Web Server library toe te voegen.
- Kopieer de code en open deze in Arduino IDE.
- Vervang de wifi-gegevens (SSID en wachtwoord) in de code met uw eigen gegevens.
- Klik op de Upload knop in Arduino IDE om de code naar Arduino UNO R4 te uploaden.
- Open de Serial Monitor.
- Bekijk de resultaten op de Serial Monitor.
- Bekijk het weergegeven IP-adres en typ dit in de adresbalk van een webbrowser op uw smartphone of computer.
- Vervolgens ziet u deze informatie op de Serial Monitor.
- Wanneer u het IP-adres in uw webbrowser invoert, ziet u een eenvoudige webpagina die informatie toont over het Arduino UNO R4 board. De pagina zal er als volgt uitzien:
Hier is de Arduino UNO R4 code die de bovengenoemde taken uitvoert:
/*
* Deze Arduino UNO R4 code is ontwikkeld door newbiely.nl
* Deze Arduino UNO R4 code wordt zonder enige beperking aan het publiek beschikbaar gesteld.
* Voor volledige instructies en schema's, bezoek:
* https://newbiely.nl/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();
}
Snelle Stappen
Volg deze instructies stap voor stap:
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 een fantastisch uitziende webpagina te maken met een grafische gebruikersinterface (UI), zie het laatste deel van deze tutorial.
Arduino UNO R4 besturen via Web
Het beheren van een apparaat verbonden met Arduino UNO R4 is iets complexer dan alleen een waarde controleren. Deze complexiteit ontstaat omdat Arduino UNO R4 het commando dat het ontvangt van de webbrowser moet interpreteren om de juiste reactie te bepalen. Zo handelt de Arduino UNO R4 code deze situatie af:
- Opbouwen van een web server die HTTP-verzoeken ontvangt van een webbrowser.
- Verwerken van het verzoek van de browser door:
- Het lezen van de HTTP request header.
- Het onderzoeken van de HTTP request header om het benodigde controlecommando te achterhalen.
- Het besturen van het verbonden apparaat of item met de Arduino UNO R4 volgens het controlecommando.
- Het versturen van een HTTP-reactie.
- Optioneel kan het ook een HTTP response body versturen met HTML-inhoud om details over de controlestatus te tonen (indien vereist).
Voor een beter en gedetailleerd voorbeeld raad ik aan om de onderstaande tutorials te bekijken:
HTML-inhoud scheiden in een ander bestand in Arduino IDE
Om een eenvoudige webpagina te maken met slechts enkele inhoud, kunt u de HTML in de Arduino UNO R4 code opnemen zoals eerder vermeld.
Als u een complexere en indrukwekkendere webpagina wilt maken met veel inhoud, is het niet eenvoudig om alle HTML, CSS en JavaScript direct in de Arduino UNO R4 code te plaatsen. In dit geval kunt u een andere methode gebruiken om de code te beheren.
- De Arduino UNO R4 code moet worden opgeslagen in een bestand met de naam .ino.
- De HTML-code, die HTML, CSS en Javascript bevat, moet worden opgeslagen in een ander bestand met de naam .h. Dit helpt de webpagina-inhoud gescheiden te houden van de Arduino UNO R4 code, waardoor het eenvoudiger wordt om te beheren en te wijzigen.
We moeten twee belangrijke stappen nemen:
- HTML-inhoud maken
- Arduino UNO R4 programmeren
HTML-inhoud voorbereiden
- Maak een HTML-bestand op uw computer. Dit bestand moet uw gebruikersinterface-ontwerp bevatten met HTML, CSS en JavaScript.
- Plaats in het HTML-bestand een placeholder waar u wilt dat de gegevens van de Arduino UNO R4 verschijnen. Gebruik voorlopig een voorbeeldwaarde.
- Controleer en pas het ontwerp van uw bestand aan totdat u tevreden bent.
- Vervang de placeholder-waarde in uw HTML-bestand met een uniek label, zoals TEMPERATURE_MARKER. Later gebruikt u het commando String.replace("TEMPERATURE_MARKER", real_value); in uw Arduino UNO R4 script om werkelijke gegevens van de Arduino te tonen.
- Vervolgens zullen we deze HTML-inhoud overbrengen naar een .h bestand binnen de Arduino IDE.
Arduino UNO R4 programmeren
- Start de Arduino IDE en maak een nieuw bestand. Noem het als volgt: newbiely.com.ino.
- Neem de onderstaande code en plaats deze in het nieuwe bestand dat u hebt gemaakt.
/*
* Deze Arduino UNO R4 code is ontwikkeld door newbiely.nl
* Deze Arduino UNO R4 code wordt zonder enige beperking aan het publiek beschikbaar gesteld.
* Voor volledige instructies en schema's, bezoek:
* https://newbiely.nl/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();
}
- Update de code met uw WiFi-gegevens (SSID en wachtwoord)
- Maak in Arduino IDE het bestand genaamd index.h
- Klik op de knop onder het serial monitor icoon en selecteer New Tab, of druk op Ctrl+Shift+N.
- Noem het bestand index.h en druk op de OK knop.
- Kopieer de onderstaande code en plak deze in het bestand genaamd index.h.
/*
* Deze Arduino UNO R4 code is ontwikkeld door newbiely.nl
* Deze Arduino UNO R4 code wordt zonder enige beperking aan het publiek beschikbaar gesteld.
* Voor volledige instructies en schema's, bezoek:
* https://newbiely.nl/tutorials/arduino-uno-r4/arduino-uno-r4-web-server
*/
const char *HTML_CONTENT = R""""(
REPLACE_YOUR_HTML_CONTENT_HERE
)"""";
- Voeg uw voorbereide HTML-inhoud in bij REPLACE_YOUR_HTML_CONTENT_HERE. Het is prima om nieuwe regelkarakters te gebruiken. Hier is een voorbeeld van een index.h bestand:
/*
* Deze Arduino UNO R4 code is ontwikkeld door newbiely.nl
* Deze Arduino UNO R4 code wordt zonder enige beperking aan het publiek beschikbaar gesteld.
* Voor volledige instructies en schema's, bezoek:
* https://newbiely.nl/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>
)"""";
- U hebt nu de code in twee bestanden: newbiely.com.ino en index.h
- Klik op de Upload knop in Arduino IDE om de code naar de Arduino UNO R4 over te brengen
- Open de webpagina van het Arduino UNO R4 board in uw webbrowser, net zoals de vorige keren. Het wordt als volgt weergegeven:
Voor een gedetailleerde gids, bekijk de Arduino UNO R4 - DS18B20 Temperatuursensor via Web tutorial.
※ Notiz:
Als u de HTML wijzigt in het bestand genaamd "index.h" maar geen wijzigingen aanbrengt in het "newbiely.com.ino" bestand, zal de Arduino IDE de HTML niet bijwerken wanneer u de code compileert en uploadt naar de ESP32.
Om de Arduino IDE de HTML te laten bijwerken, moet u iets wijzigen in het "newbiely.com.ino" bestand. U kunt een lege regel of een opmerking toevoegen. Dit vertelt de IDE dat het project is gewijzigd, dus het neemt uw nieuwe HTML mee bij het uploaden.
Arduino UNO R4 Web Server - Meerdere Pagina's
Bezoek deze tutorial over Arduino UNO R4 - Web Server Meerdere Pagina's.