Arduino UNO Q - Web Server
Arduino UNO Q hat eine integrierte Debian-Linux-MPU, was bedeutet, dass es einen vollständigen Web-Server ausführen kann — kein zusätzlicher Wi-Fi-Shield oder Cloud-Service erforderlich. Dieses Tutorial zeigt Ihnen, wie Sie einen Python-WebUI-Web-Server auf dem Arduino UNO Q in drei schrittweisen Beispielen ausführen, beginnend mit der einfachsten möglichen Seite und aufbauend auf einer sauberen API.
In diesem Tutorial lernen Sie:
- Wie Sie eine rohe Sensorablesung in einer minimalen HTML-Seite anzeigen (kein CSS, kein JavaScript)
- Wie Sie eine vollständige Web-Seite aus einem Asset-Ordner bereitstellen (HTML + CSS + JavaScript)
- Wie Sie MCU-Sensordaten als reinen JSON-API-Endpunkt bereitstellen
- Wie die Bridge die MCU-Skizze und den Python-Web-Server verbindet
- Wie Sie einen Potentiometer an den analogen Pin A0 auf dem Arduino UNO Q verdrahten
- Wie Sie den WebUI-Brick in Arduino App Lab hinzufügen, um HTTP-Bereitstellung automatisch zu handhaben
Erforderliche Hardware
Oder Sie können die folgenden Kits kaufen:
| 1 | × | DIYables Sensor-Kit (18 Sensoren/Displays) |
Offenlegung: Einige der in diesem Abschnitt bereitgestellten Links sind Amazon-Affiliate-Links. Wir können eine Provision für Käufe erhalten, die über diese Links getätigt werden, ohne zusätzliche Kosten für Sie. Wir schätzen Ihre Unterstützung.
So funktioniert der Arduino UNO Q Web Server
Arduino UNO Q kombiniert zwei Prozessoren:
- STM32 MCU — führt Ihre Arduino-Skizze (C/C++) in Echtzeit aus. Sie liest Sensoren, steuert Relais, treibt Motoren an und mehr.
- Qualcomm MPU — führt vollständiges Debian Linux aus. Sie verbindet sich mit Wi-Fi und kann einen Python-WebUI-Web-Server ausführen, den jeder Browser in Ihrem Netzwerk erreichen kann.
Die beiden Prozessoren kommunizieren über die Bridge. Der MCU macht Hardwarefunktionen über Bridge verfügbar, und der Python-Web-Server auf der MPU ruft diese Funktionen auf, um Sensorablesung zu erhalten. Ein Browser ruft dann die Daten ab — entweder als reine HTML-Seite, als gestaltete Web-Seite oder als JSON-API-Antwort.
※ Notiz:
Kein externer Wi-Fi-Shield ist erforderlich. Der Arduino UNO Q hat eingebautes Wi-Fi auf der Linux-Seite.
Schaltplan
Dieses Bild wurde mit Fritzing erstellt. Klicken Sie, um das Bild zu vergrößern.
Arduino UNO Q Code
Arduino UNO Q hat zwei Prozessoren. Für einen Web-Server schreiben Sie:
- Eine MCU-Skizze, die den analogen Pin liest und den Wert über Bridge bereitstellt
- Ein Python-WebUI-Skript auf der Linux-MPU, das den Wert über HTTP bereitstellt
Alle drei folgenden Beispiele verwenden die gleiche MCU-Skizze. Nur der Python-Code (und optionale HTML-Assets) unterscheiden sich.
Beispiel 1 — Einfache Web-Seite (Kein CSS, Kein JavaScript)
Der einfachste mögliche Web-Server: öffnen Sie einen Browser, besuchen Sie die IP des Boards und sehen Sie die rohe Analogablesung in reiner HTML. Kein Styling, kein automatisches Refresh — nur die Zahl.
Die MCU-Skizze liest Pin A0 und stellt den Wert durch eine Bridge-Funktion namens get_analog bereit. Der Python-Server ruft diese Funktion auf, wenn ein Browser / anfordert, und gibt eine rohe HTML-Antwort zurück.
MCU-Code
/*
* Dieser Arduino UNO Q Code wurde von newbiely.de entwickelt
* Dieser Arduino UNO Q Code wird der Öffentlichkeit ohne jegliche Einschränkung zur Verfügung gestellt.
* Für vollständige Anleitungen und Schaltpläne besuchen Sie bitte:
* https://newbiely.de/tutorials/arduino-uno-q/arduino-uno-q-web-server
*/
#include "Arduino_RouterBridge.h"
String get_analog(String arg) {
int value = analogRead(A0);
return String(value);
}
void setup() {
Monitor.begin();
Bridge.begin();
Bridge.provide_safe("get_analog", get_analog);
Monitor.println("Bridge ready");
}
void loop() {
}
Python-Code
/*
* Dieser Arduino UNO Q Code wurde von newbiely.de entwickelt
* Dieser Arduino UNO Q Code wird der Öffentlichkeit ohne jegliche Einschränkung zur Verfügung gestellt.
* Für vollständige Anleitungen und Schaltpläne besuchen Sie bitte:
* https://newbiely.de/tutorials/arduino-uno-q/arduino-uno-q-web-server
*/
from arduino.app_utils import *
from arduino.app_bricks.web_ui import WebUI
from fastapi.responses import HTMLResponse
def index():
value = Bridge.call("get_analog", "")
html = "<!DOCTYPE html><html><body><p>Analog A0: " + value + "</p></body></html>"
return HTMLResponse(content=html)
web_ui = WebUI()
web_ui.expose_api("GET", "/", index)
App.run()
Schnelle Schritte
- Verbinden: Stecken Sie den Arduino UNO Q mit einem USB-C-Kabel in Ihren Computer ein und verdrahten Sie den Potentiometer mit A0 wie im Abschnitt Schaltplan beschrieben.
- Mit Wi-Fi verbinden: Stellen Sie sicher, dass Arduino UNO Q mit Ihrem Wi-Fi-Netzwerk verbunden ist. Verwenden Sie das Netzwerk-Symbol in Arduino App Lab, um sich zuerst zu verbinden.
- Öffnen Sie Arduino App Lab: Starten Sie Arduino App Lab und warten Sie, bis es Ihren Arduino UNO Q erkennt.
- Erstellen Sie eine neue App: Klicken Sie auf die Schaltfläche Neue App erstellen.
- Geben Sie der App einen Namen, z. B.: WebServerSimple
- Klicken Sie auf Erstellen, um zu bestätigen.
- Fügen Sie die MCU-Skizze ein: Kopieren Sie den MCU-Code oben und fügen Sie ihn in sketch/sketch.ino ein.
- Fügen Sie den Python-Code ein: Öffnen Sie python/main.py in der App. Wählen Sie alle vorhandenen Inhalte aus und löschen Sie sie, fügen Sie dann den Python-Web-Server-Code oben ein.
- Install the library: Click the Add sketch library button (the open book icon with a + sign) in the left sidebar.
- Search for Arduino_RouterBridge created by Arduino and click the Install button.
Bricks
No bricks added...
Sketch Libraries
No sketch libra...
Files
python
sketch
.gitignore
README.md
app.yaml
sketch.ino
- Fügen Sie den WebUI-Brick hinzu: Klicken Sie auf die Schaltfläche Brick hinzufügen in der Editor-Seitenleiste, um den Bricks-Katalog zu öffnen.
Suchen Sie WebUI - HTML in der Liste und wählen Sie es aus, folgen Sie dann eventuellen Konfigurationsanforderungen.
Arduino App Lab fügt den Brick-Eintrag automatisch zu Ihrer app.yaml-Datei hinzu — bearbeiten Sie diesen Eintrag nicht manuell.
※ Notiz:
Ein Brick ist ein vorgefertigter, konfigurierbarer Service, der auf der Arduino UNO Q Linux-Seite ausgeführt wird. Der WebUI - HTML Brick verwaltet den HTTP-Server, sodass Sie Flask oder ein anderes Web-Framework nicht manuell installieren müssen. Siehe About Bricks für weitere Informationen.
- Hochladen: Klicken Sie auf die Schaltfläche Ausführen in Arduino App Lab, um zu kompilieren und hochzuladen.
- Öffnen Sie einen Web-Browser auf Ihrem Telefon oder PC und navigieren Sie zu: http://
:7000/
Ersetzen Sie <ARDUINO_UNO_Q_IP> durch die IP-Adresse Ihres Arduino UNO Q.
- Sie sehen eine reine HTML-Seite, die den aktuellen rohen ADC-Wert von A0 anzeigt.
- Drehen Sie den Potentiometer-Knopf und aktualisieren Sie die Browser-Seite — die Zahl ändert sich.
App Lab-Konsolenausgabe
sketch.ino
1#include "Arduino_RouterBridge.h"
Serial Monitor
Python
[2026-05-08 09:00:01] Bridge ready
sketch.ino
1#include "Arduino_RouterBridge.h"
Serial Monitor
Python
[2026-05-08 09:00:02] WebUI started on http://0.0.0.0:7000
[2026-05-08 09:00:02] WebUI started on http://192.168.0.45:7000
Browser-Ausgabe
Öffnen Sie http://<ARDUINO_UNO_Q_IP>:7000/ in Ihrem Browser. Sie sehen eine reine HTML-Seite wie:
Analog A0: 512
_RENDER
Web Server mit Asset-Ordner (HTML + CSS + JavaScript)
Dieses Beispiel separiert die Front-End-Dateien in einen assets/-Ordner, genau wie im Beispiel blink-with-ui. Der Python-Server stellt einen /api/analog-Endpunkt bereit; die index.html im assets-Ordner ruft diesen Endpunkt alle Sekunde mit JavaScript auf und aktualisiert den angezeigten Wert — kein Seiten-Refresh erforderlich.
Die MCU-Skizze ist identisch mit Beispiel 1. Die Unterschiede sind:
- Der Python-Code stellt /api/analog statt einer rohen HTML-Route bereit.
- Die assets/index.html-Datei enthält HTML, CSS und JavaScript.
- Der WebUI-Brick stellt automatisch alle Dateien im assets/-Ordner unter der Root-URL (/) bereit.
MCU-Code
/*
* Dieser Arduino UNO Q Code wurde von newbiely.de entwickelt
* Dieser Arduino UNO Q Code wird der Öffentlichkeit ohne jegliche Einschränkung zur Verfügung gestellt.
* Für vollständige Anleitungen und Schaltpläne besuchen Sie bitte:
* https://newbiely.de/tutorials/arduino-uno-q/arduino-uno-q-web-server
*/
#include "Arduino_RouterBridge.h"
String get_analog(String arg) {
int value = analogRead(A0);
return String(value);
}
void setup() {
Monitor.begin();
Bridge.begin();
Bridge.provide_safe("get_analog", get_analog);
Monitor.println("Bridge ready");
}
void loop() {
}
Python-Code
/*
* Dieser Arduino UNO Q Code wurde von newbiely.de entwickelt
* Dieser Arduino UNO Q Code wird der Öffentlichkeit ohne jegliche Einschränkung zur Verfügung gestellt.
* Für vollständige Anleitungen und Schaltpläne besuchen Sie bitte:
* https://newbiely.de/tutorials/arduino-uno-q/arduino-uno-q-web-server
*/
from arduino.app_utils import *
from arduino.app_bricks.web_ui import WebUI
def get_analog():
value = Bridge.call("get_analog", "")
return {"pin": "A0", "value": int(value)}
web_ui = WebUI()
web_ui.expose_api("GET", "/api/analog", get_analog)
App.run()
HTML (assets/index.html)
Platzieren Sie diese Datei im assets/-Ordner Ihrer App:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Analog Sensor</title>
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: 'Segoe UI', Arial, sans-serif;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
color: #fff;
padding: 24px;
}
.card {
background: rgba(255, 255, 255, 0.07);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 20px;
padding: 48px 56px;
text-align: center;
width: 100%;
max-width: 380px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
.pin-badge {
display: inline-block;
background: rgba(0, 188, 212, 0.2);
border: 1px solid #00bcd4;
color: #00bcd4;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 4px 12px;
border-radius: 999px;
margin-bottom: 20px;
}
h1 {
font-size: 1.35rem;
font-weight: 600;
color: #e0e0e0;
margin-bottom: 32px;
letter-spacing: 0.02em;
}
/* Gauge ring */
.gauge-wrap {
position: relative;
width: 160px;
height: 160px;
margin: 0 auto 32px;
}
.gauge-wrap svg {
transform: rotate(-90deg);
width: 160px;
height: 160px;
}
.gauge-bg {
fill: none;
stroke: rgba(255,255,255,0.08);
stroke-width: 12;
}
.gauge-fill {
fill: none;
stroke: url(#gaugeGrad);
stroke-width: 12;
stroke-linecap: round;
stroke-dasharray: 440;
stroke-dashoffset: 440;
transition: stroke-dashoffset 0.6s ease;
}
.gauge-center {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.gauge-value {
font-size: 2.4rem;
font-weight: 700;
color: #fff;
line-height: 1;
}
.gauge-unit {
font-size: 0.75rem;
color: rgba(255,255,255,0.5);
margin-top: 4px;
letter-spacing: 0.08em;
}
/* Progress bar */
.bar-wrap {
background: rgba(255,255,255,0.08);
border-radius: 999px;
height: 8px;
overflow: hidden;
margin-bottom: 10px;
}
.bar-fill {
height: 100%;
width: 0%;
border-radius: 999px;
background: linear-gradient(90deg, #00bcd4, #7c4dff);
transition: width 0.6s ease;
}
.bar-labels {
display: flex;
justify-content: space-between;
font-size: 0.72rem;
color: rgba(255,255,255,0.4);
margin-bottom: 28px;
}
/* Voltage row */
.voltage-row {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
font-size: 0.9rem;
color: rgba(255,255,255,0.6);
}
.voltage-val {
font-size: 1.05rem;
font-weight: 600;
color: #80cbc4;
}
/* Status dot */
.status {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
margin-top: 28px;
font-size: 0.75rem;
color: rgba(255,255,255,0.35);
letter-spacing: 0.06em;
text-transform: uppercase;
}
.dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: #4caf50;
animation: pulse 2s infinite;
}
.dot.error { background: #f44336; animation: none; }
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.3; }
}
</style>
</head>
<body>
<div class="card">
<span class="pin-badge">Pin A0</span>
<h1>Analog Sensor</h1>
<div class="gauge-wrap">
<svg viewBox="0 0 160 160">
<defs>
<linearGradient id="gaugeGrad" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#00bcd4" />
<stop offset="100%" stop-color="#7c4dff" />
</linearGradient>
</defs>
<circle class="gauge-bg" cx="80" cy="80" r="70" />
<circle class="gauge-fill" id="gaugeFill" cx="80" cy="80" r="70" />
</svg>
<div class="gauge-center">
<span class="gauge-value" id="val">--</span>
<span class="gauge-unit">/ 1023</span>
</div>
</div>
<div class="bar-wrap">
<div class="bar-fill" id="bar"></div>
</div>
<div class="bar-labels"><span>0</span><span>1023</span></div>
<div class="voltage-row">
Voltage: <span class="voltage-val" id="volt">--</span> V
</div>
<div class="status">
<div class="dot" id="dot"></div>
<span id="statusText">connecting…</span>
</div>
</div>
<script>
var CIRCUMFERENCE = 2 * Math.PI * 70; // ~439.8
function refresh() {
fetch('/api/analog')
.then(function(r) { return r.json(); })
.then(function(d) {
var raw = d.value;
var pct = raw / 1023;
document.getElementById('val').textContent = raw;
document.getElementById('bar').style.width = (pct * 100).toFixed(1) + '%';
document.getElementById('gaugeFill').style.strokeDashoffset =
(CIRCUMFERENCE * (1 - pct)).toFixed(2);
document.getElementById('volt').textContent = (pct * 5).toFixed(2);
document.getElementById('dot').className = 'dot';
document.getElementById('statusText').textContent = 'live';
})
.catch(function() {
document.getElementById('dot').className = 'dot error';
document.getElementById('statusText').textContent = 'disconnected';
});
}
setInterval(refresh, 1000);
refresh();
</script>
</body>
</html>
Schnelle Schritte
- Folgen Sie denselben App-Erstellungsschritten wie in Beispiel 1, nennen Sie aber die App WebServerAssets.
- Fügen Sie den MCU-Code in sketch/sketch.ino ein.
- Fügen Sie den Python-Code in python/main.py ein (ersetzen Sie alle vorhandenen Inhalte).
- Öffnen Sie (oder erstellen Sie) im assets/-Ordner index.html und fügen Sie den HTML-Code oben ein.
- Fügen Sie den WebUI - HTML-Brick wie in Beispiel 1 hinzu.
- Klicken Sie auf Ausführen, um hochzuladen.
- Öffnen Sie http://<ARDUINO_UNO_Q_IP>:7000/ in Ihrem Browser.
- Die Seite lädt die gestaltete Web-Seite aus dem assets-Ordner und aktualisiert den Analog-Wert automatisch alle Sekunde.
- Drehen Sie den Potentiometer — der Wert auf der Seite ändert sich ohne Aktualisierung.
App Lab-Konsolenausgabe
sketch.ino
1#include "Arduino_RouterBridge.h"
Serial Monitor
Python
[2026-05-08 09:00:01] Bridge ready
sketch.ino
1#include "Arduino_RouterBridge.h"
Serial Monitor
Python
[2026-05-08 09:00:02] WebUI started on http://0.0.0.0:7000
[2026-05-08 09:00:02] WebUI started on http://192.168.0.45:7000
API-Antwort
Das JavaScript in index.html ruft GET /api/analog auf. Sie können diesen Endpunkt auch direkt testen:
{"pin": "A0", "value": 512}
Web Server als API (Reines JSON)
Dieses Beispiel streicht alle HTML und stellt nur einen JSON-API-Endpunkt bereit. Jeder Client — Browser, Mobile App, curl, Postman oder ein anderer Mikrocontroller — kann GET /api/analog aufrufen, um die aktuelle Analogablesung als strukturierte Daten zu erhalten.
Verwenden Sie dieses Muster, wenn Sie:
- Arduino UNO Q-Daten in eine vorhandene Web-App oder ein Dashboard integrieren möchten
- Das Board von einer Mobile App oder einem Back-End-Service abfragen möchten
- Sensorwerte von der Befehlszeile aus testen oder protokollieren möchten
MCU-Code
/*
* Dieser Arduino UNO Q Code wurde von newbiely.de entwickelt
* Dieser Arduino UNO Q Code wird der Öffentlichkeit ohne jegliche Einschränkung zur Verfügung gestellt.
* Für vollständige Anleitungen und Schaltpläne besuchen Sie bitte:
* https://newbiely.de/tutorials/arduino-uno-q/arduino-uno-q-web-server
*/
#include "Arduino_RouterBridge.h"
String get_analog(String arg) {
int value = analogRead(A0);
return String(value);
}
void setup() {
Monitor.begin();
Bridge.begin();
Bridge.provide_safe("get_analog", get_analog);
Monitor.println("Bridge ready");
}
void loop() {
}
Python-Code
/*
* Dieser Arduino UNO Q Code wurde von newbiely.de entwickelt
* Dieser Arduino UNO Q Code wird der Öffentlichkeit ohne jegliche Einschränkung zur Verfügung gestellt.
* Für vollständige Anleitungen und Schaltpläne besuchen Sie bitte:
* https://newbiely.de/tutorials/arduino-uno-q/arduino-uno-q-web-server
*/
from arduino.app_utils import *
from arduino.app_bricks.web_ui import WebUI
def get_analog():
value = Bridge.call("get_analog", "")
return {"pin": "A0", "value": int(value)}
web_ui = WebUI()
web_ui.expose_api("GET", "/api/analog", get_analog)
App.run()
Schnelle Schritte
- Folgen Sie denselben App-Erstellungsschritten wie in Beispiel 1, nennen Sie aber die App WebServerAPI.
- Fügen Sie den MCU-Code in sketch/sketch.ino ein.
- Fügen Sie den Python-Code in python/main.py ein (ersetzen Sie alle vorhandenen Inhalte).
- Fügen Sie den WebUI - HTML-Brick wie in Beispiel 1 hinzu.
- Klicken Sie auf Ausführen, um hochzuladen.
- Testen Sie den Endpunkt von Ihrem Browser
- Testen Sie den Endpunkt von Ihrem Terminal:
GET http://ARDUINO_UNO_Q_IP:7000/api/analog
- Testen Sie den Endpunkt von jedem Client aus. Zum Beispiel mit curl:
curl http://:7000/api/analog
API-Antwort
{"pin": "A0", "value": 512}
App Lab-Konsolenausgabe
sketch.ino
1#include "Arduino_RouterBridge.h"
Serial Monitor
Python
[2026-05-08 09:00:01] Bridge ready
sketch.ino
1#include "Arduino_RouterBridge.h"
Serial Monitor
Python
[2026-05-08 09:00:02] WebUI started on http://0.0.0.0:7000
[2026-05-08 09:00:02] WebUI started on http://192.168.0.45:7000
HTML von Python-Code trennen
Mit dem WebUI-Ansatz stellt Ihr Python-Code nur API-Endpunkte bereit — er stellt HTML nicht bereit. Dies ist eine saubere Trennung nach Design:
- Python WebUI-Skript — stellt JSON-API-Endpunkte bereit (z. B. /api/status, /api/led/on)
- HTML-Datei — eine eigenständige Datei, die Sie im Browser öffnen. Sein JavaScript ruft Daten von der API ab.
Hier ist das Python-Skript (identisch mit Beispiel 1 — keine Änderungen erforderlich):
/*
* Dieser Arduino UNO Q Code wurde von newbiely.de entwickelt
* Dieser Arduino UNO Q Code wird der Öffentlichkeit ohne jegliche Einschränkung zur Verfügung gestellt.
* Für vollständige Anleitungen und Schaltpläne besuchen Sie bitte:
* https://newbiely.de/tutorials/arduino-uno-q/arduino-uno-q-web-server
*/
from arduino.app_utils import *
from arduino.app_bricks.web_ui import WebUI
def get_status():
uptime = Bridge.call("get_uptime", "")
led = Bridge.call("get_led_state", "")
return {"uptime": uptime, "led": led}
web_ui = WebUI()
web_ui.expose_api("GET", "/api/status", get_status)
App.run()
Hier ist die eigenständige HTML-Seite (index.html), die von der API abfruft:
/*
* Dieser Arduino UNO Q Code wurde von newbiely.de entwickelt
* Dieser Arduino UNO Q Code wird der Öffentlichkeit ohne jegliche Einschränkung zur Verfügung gestellt.
* Für vollständige Anleitungen und Schaltpläne besuchen Sie bitte:
* https://newbiely.de/tutorials/arduino-uno-q/arduino-uno-q-web-server
*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Arduino UNO Q Web Server</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
margin: 0;
background: #1a1a2e;
color: #eee;
}
h1 { font-size: 1.8rem; margin-bottom: 32px; }
.card {
background: #16213e;
border-radius: 12px;
padding: 32px 48px;
box-shadow: 0 4px 24px rgba(0,0,0,0.4);
text-align: center;
min-width: 280px;
}
.label { font-size: 0.9rem; color: #aaa; margin-bottom: 4px; }
.value { font-size: 2rem; font-weight: bold; color: #e94560; margin-bottom: 24px; }
.led-on { color: #4caf50; }
.led-off { color: #aaa; }
</style>
</head>
<body>
<h1>Arduino UNO Q Web Server</h1>
<div class="card">
<p class="label">MCU Uptime (seconds)</p>
<p class="value" id="uptime">--</p>
<p class="label">Built-in LED</p>
<p class="value" id="ledState">--</p>
</div>
<script>
// Update this IP address to match your Arduino UNO Q
const API_BASE = 'http://192.168.0.3:7000';
function update() {
fetch(API_BASE + '/api/status')
.then(r => r.json())
.then(data => {
document.getElementById('uptime').textContent = data.uptime;
const ledEl = document.getElementById('ledState');
ledEl.textContent = data.led;
ledEl.className = 'value ' + (data.led === 'ON' ? 'led-on' : 'led-off');
})
.catch(e => console.error(e));
}
setInterval(update, 2000);
update();
</script>
</body>
</html>
※ Notiz:
Öffnen Sie index.html direkt in Ihrem Browser (von Ihrem Computer) oder hosten Sie es überall. Das JavaScript darin ruft alle zwei Sekunden http://<ARDUINO_UNO_Q_IP>:7000/api/status ab. Aktualisieren Sie die IP-Adresse in der HTML-Datei, um Ihr Board zu entsprechen.
Arduino UNO Q Web Server — Mehrere Seiten
Um einen Web-Server mit mehreren API-Endpunkten zu erstellen (z. B. /api/status, /api/led/on, /api/settings), fügen Sie einen expose_api-Aufruf pro Endpunkt im Python-WebUI-Skript hinzu.
Für eine detaillierte Anleitung siehe das Tutorial Arduino UNO Q - Web Server Multiple Pages.
OpenClaw
You can adapt the OpenClaw to this tutorial by refering the instruction on Arduino Uno Q - OpenClaw Tutorial
Projektideen
Der Web-Server ist ein Baustein für viele nützliche Projekte auf Arduino UNO Q:
- Sensor-Dashboard: Verbinden Sie einen DHT22 oder BMP280 mit der MCU und zeigen Sie Temperatur, Luftfeuchtigkeit und Druck auf einer gestalteten Web-Seite an, die sich alle paar Sekunden automatisch aktualisiert
- Relais-Bedienfeld: Fügen Sie Schaltflächen auf der Web-Seite hinzu, um Relais ein- und auszuschalten — nützlich für die Steuerung von Lichtern, Lüftern oder Pumpen von einem Telefon zu Hause aus
- Datenlogger-Viewer: Protokollieren Sie Sensorablesung in einer CSV-Datei auf der Linux-Seite und fügen Sie einen /history-Endpunkt hinzu, der die letzten 100 Ablesen als HTML-Tabelle zurückgibt
- Garagentoröffner: Stellen Sie eine „trigger" Bridge-Funktion bereit, die ein Relais für eine Sekunde pulsiert — fügen Sie eine einzelne große Schaltfläche auf der Web-Seite hinzu, um das Garagentor von Ihrem Telefon aus zu öffnen oder zu schließen
- Pflanzen-Bewässerungsmonitor: Lesen Sie einen Bodenfeuchtesensor auf der MCU, zeigen Sie die Feuchtigkeitsstufe auf der Web-Seite mit einer Fortschrittsanzeige an und zeigen Sie ein Warnbanner an, wenn der Boden zu trocken ist
Fordern Sie sich selbst heraus
Bereit, mit dem Web-Server auf Arduino UNO Q weiter zu gehen? Versuchen Sie diese Herausforderungen:
- Einfach: Erstellen Sie eine gestaltete index.html-Datei auf Ihrem Computer, die von http://<ARDUINO_UNO_Q_IP>:7000/api/status abruft und die Betriebszeit und LED-Status mit einem sauberen Layout unter Verwendung von Bootstrap oder benutzerdefiniertem CSS anzeigt.
- Mittel: Fügen Sie einen /api/history-Endpunkt zum Python-WebUI-Skript hinzu, das die letzten 10 Bridge-Werte aus einer Liste im Speicher liest und sie als JSON-Array zurückgibt — zeigen Sie dann die Historie auf der HTML-Seite als Tabelle an.
- Fortgeschritten: Fügen Sie einen /api/led/toggle POST-Endpunkt zum WebUI-Skript hinzu, der den aktuellen LED-Status über Bridge liest und entweder led_on oder led_off aufruft, um ihn zu wechseln — fügen Sie dann eine einzelne Toggle-Schaltfläche zur HTML-Seite hinzu.