Arduino - LED Matrix via Web
In deze handleiding leert u hoe u een LED Matrix kunt besturen via een webinterface met behulp van een browser op een pc of smartphone, waarbij we de Arduino Uno R4 WiFi gebruiken. Concreet wordt de Arduino Uno R4 WiFi geprogrammeerd als een webserver. Stel dat het IP-adres van de Arduino Uno R4 WiFi 192.168.0.2 is. Zo werkt het:
- Wanneer u 192.168.0.2 in de webbrowser invoert, stuurt de browser een verzoek naar de Arduino en reageert de Arduino met een webpagina die een invoerveld voor een bericht bevat.
- U typt een bericht in het invoerveld en klikt op de verzendknop. Het bericht wordt naar de Arduino gestuurd.
- De Arduino toont het bericht op de LED Matrix.
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.
Over LED Matrix en Arduino Uno R4
Als u nog niet bekend bent met de LED Matrix en Arduino Uno R4 (pinout, werking, programmeren, enz.), bekijk dan de volgende handleidingen voor meer informatie:
Bedradingsschema
This image is created using Fritzing. Click to enlarge image
Arduino Code
Snelle stappen
- Als u voor het eerst de Arduino Uno R4 gebruikt, bekijk dan de handleiding omgeving instellen voor Arduino Uno R4 in Arduino IDE.
- Open 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 vind de Web Server bibliotheek gemaakt door DIYables.
- Klik op de Install knop om de Web Server bibliotheek toe te voegen.
- Zoek vervolgens op “MD_Parola” en vind de MD_Parola bibliotheek.
- Klik op de Install knop.
- U krijgt een verzoek om ook de MD_MAX72XX bibliotheek te installeren als afhankelijkheid. Klik op Install All.
- Maak een nieuw sketch aan. Geef deze een naam, bijvoorbeeld ArduinoGetStarted.com.ino.
- Kopieer de onderstaande code en plak deze in het nieuwe 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-led-matrix-via-web
*/
#include <UnoR4WiFi_WebServer.h>
#include <MD_Parola.h>
#include <MD_MAX72xx.h>
#include "index.h"
#define HARDWARE_TYPE MD_MAX72XX::FC16_HW
#define MAX_DEVICES 4 // 4 blocks
#define CS_PIN 3
// create an instance of the MD_Parola class
MD_Parola ledMatrix = MD_Parola(HARDWARE_TYPE, CS_PIN, MAX_DEVICES);
// 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;
// Handler for LED matrix control
void handleMatrix(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
// Check for message parameter in query string
for (int i = 0; i < params.count; i++) {
if (String(params.params[i].key) == "message") {
String message = params.params[i].value;
Serial.print("message: ");
Serial.println(message);
ledMatrix.displayClear(); // clear led matrix display
ledMatrix.displayScroll(message.c_str(), PA_CENTER, PA_SCROLL_LEFT, 100);
break;
}
}
String html = String(HTML_CONTENT);
server.sendResponse(client, html.c_str());
}
void setup() {
Serial.begin(9600);
delay(1000);
// Initialize LED matrix
ledMatrix.begin(); // initialize the object
ledMatrix.setIntensity(15); // set the brightness of the LED matrix display (from 0 to 15)
ledMatrix.displayClear(); // clear led matrix display
ledMatrix.displayScroll("Hello, DIYables", PA_CENTER, PA_SCROLL_LEFT, 100);
Serial.println("Arduino Uno R4 WiFi - LED Matrix Web Control");
// 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("/", handleMatrix);
// Start server
server.begin();
Serial.println("\n=== Web Server Ready! ===");
Serial.print("Visit: http://");
Serial.println(WiFi.localIP());
}
void loop() {
server.handleClient();
if (ledMatrix.displayAnimate()) {
ledMatrix.displayReset();
}
}
- Pas de WiFi-gegevens (SSID en wachtwoord) in de code aan naar uw eigen netwerkgegevens.
- Maak het bestand index.h aan in de Arduino IDE door:
- Klik op de knop net onder het seriële monitor-icoon en kies New Tab, of gebruik de sneltoets Ctrl+Shift+N.
- Geef het bestand de naam index.h en klik op OK.
- Kopieer onderstaande code en plak die in het bestand 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-led-matrix-via-web
*/
const char *HTML_CONTENT = R"=====(
<!DOCTYPE html>
<html>
<head>
<title>Arduino LED Matrix Web</title>
<meta name="viewport" content="width=device-width, initial-scale=0.7">
<link rel="icon" href="https://diyables.io/images/page/diyables.svg">
<style>
body {
font-size: 16px;
}
.user-input {
margin-bottom: 20px;
}
.user-input input {
flex: 1;
border: 1px solid #444;
padding: 5px;
}
.user-input input[type="submit"] {
margin-left: 5px;
background-color: #007bff;
color: #fff;
border: none;
padding: 5px 10px;
cursor: pointer;
}
</style>
</head>
<body>
<h2>Arduino - LED Matrix via Web</h2>
<form class="user-input" action="" method="GET">
<input type="text" id="message" name="message" placeholder="Message to LED Matrix...">
<input type="submit" value="Send">
</form>
<div class="sponsor">Sponsored by <a href="https://amazon.com/diyables">DIYables</a></div>
</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.
- Bekijk het resultaat in de seriële monitor.
COM6
Arduino Uno R4 WiFi - LED Matrix Web Control
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
- U ziet een IP-adres verschijnen, bijvoorbeeld: 192.168.0.254. Dit is het IP-adres van de Arduino-webserver.
- Open een webbrowser en voer dit IP-adres in de adresbalk in.
- Houd er rekening mee dat het IP-adres kan variëren. Controleer de actuele waarde in de seriële monitor.
- U ziet ook de onderstaande output in de seriële monitor:
COM6
Arduino Uno R4 WiFi - LED Matrix Web Control
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: /
Query param: message=Hello
message: Hello
Client disconnected
Autoscroll
Clear output
9600 baud
Newline
- In uw webbrowser verschijnt de webpagina van de Arduino zoals hieronder afgebeeld.
- Typ een bericht en klik op de verzendknop om het naar de Arduino te sturen.
- Bekijk de weergave op de LED Matrix.
※ Notiz:
- Als er wijzigingen worden aangebracht in de HTML-inhoud binnen het index.h bestand zonder aanpassingen in het ArduinoGetStarted.com.ino bestand, zal de Arduino IDE de HTML-inhoud niet automatisch vernieuwen of updaten bij het compileren en uploaden van de code naar de ESP32.
- Om de Arduino IDE te dwingen de HTML-inhoud toch bij te werken, is het nodig een wijziging aan te brengen in het ArduinoGetStarted.com.ino bestand, bijvoorbeeld door een lege regel toe te voegen of een commentaarregel in te voegen. Hierdoor merkt de IDE de wijziging op en zorgt dat de bijgewerkte HTML mee wordt geüpload.