Arduino UNO Q - Echtzeit-Temperaturüberwachung im Webbrowser
Das Arduino UNO Q kann Live-Temperaturmessungen in Echtzeit über WebSocket an jeden Browser übertragen — keine Abfrage, kein Neuladen der Seite. Das STM32-MCU liest den DS18B20-Sensor jede Sekunde und teilt den Wert über Bridge. Die Qualcomm Linux-MPU führt eine Python-App aus, die den integrierten Socket.IO-Server der WebUI Brick nutzt, um eine neue Messung an jeden verbundenen Browser zu übertragen, sobald sie ankommt. Keine zusätzliche Hardware oder Cloud-Service erforderlich.
In diesem Tutorial erfahren Sie:
- Wie Sie den DS18B20-1-Leiter-Temperatursensor an das Arduino UNO Q-MCU-Modul anschließen
- Wie Sie Echtzeit-Temperaturdaten vom MCU zur Linux-MPU über Bridge verfügbar machen
- Wie Sie eine Thermometer-Webseite von der Arduino UNO Q Linux-MPU mit der WebUI Brick bereitstellen
- Wie Sie ui.on_message() und ui.send_message() verwenden, um Live-Temperatur-Updates über WebSocket an den Browser zu übertragen
- Wie Sie WebSocket-Nachrichten im Browser mit Socket.IO empfangen und das Canvas-Thermometer aktualisieren, ohne es neu zu laden
- Wie Sie von jedem Gerät im gleichen Wi-Fi-Netzwerk auf die Live-Temperaturseite zugreifen
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.
Kaufhinweis: Viele DS18B20-Sensoren auf dem Markt sind von geringer Qualität. Wir empfehlen dringend den Kauf des Sensors von der Marke DIYables über den obigen Link. Wir haben ihn getestet und er funktionierte gut.
Über DS18B20 und den Webserver
DS18B20-Sensor: Ein 1-Leiter-Digital-Temperatursensor (−55 °C bis +125 °C, ±0,5 °C Genauigkeit). Erfordert einen 4,7-kΩ-Pull-up-Widerstand zwischen DATA und VCC — Sensoren mit Adaptern enthalten diesen bereits. Siehe das Arduino UNO Q DS18B20 Temperatursensor-Tutorial für Verdrahtungs- und Bibliothekdetails.
WebUI Brick: Die WebUI - HTML Brick betreibt einen Webserver auf Port 7000, der Ihre HTML-Dateien bereitstellt und Socket.IO-WebSocket-Verbindungen verwaltet. Ihr Python-Code verwendet ui.on_message() zum Empfangen von Browser-Ereignissen und ui.send_message() zum Zurückschreiben von Daten. Jedes Gerät im gleichen Wi-Fi kann auf die Seite unter http://<board-ip>:7000/ zugreifen.
Echtzeit-Flow: Der Browser verbindet sich über Socket.IO und fordert die Temperaturkonfiguration und die erste Messung an. Ein Python-Hintergrund-Thread liest den Sensor jede Sekunde über Bridge und sendet jede Aktualisierung an alle verbundenen Browser. Das Canvas-Thermometer wird bei jedem Push neu gezeichnet — keine Abfrage, kein Neuladen.
Neu bei WebSocket? Wenn Sie Socket.IO auf dem Arduino UNO Q noch nicht verwendet haben, beginnen Sie mit dem Arduino UNO Q - WebSocket-Tutorial — es zeigt das gleiche Muster mit einem einfachen LED-Steuerungsbeispiel ohne Sensor.
Verdrahtungsdiagramm
- Steckbrett-Verdrahtung (mit Pull-up-Widerstand):
Dieses Bild wurde mit Fritzing erstellt. Klicken Sie, um das Bild zu vergrößern.
- Verdrahtungsdiagramm mit Adapter (kein zusätzlicher Widerstand erforderlich):
Dieses Bild wurde mit Fritzing erstellt. Klicken Sie, um das Bild zu vergrößern.
Wir empfehlen den Kauf eines DS18B20-Sensors mit Verdrahtungsadapter. Dieser Adapter macht die Verbindung einfach, da er einen Widerstand enthält, sodass Sie keinen zusätzlichen benötigen.
| DS18B20-Anschluss | Arduino UNO Q-Anschluss |
|---|---|
| GND | GND |
| VCC | 5V |
| DATA | D4 |
Arduino UNO Q-Code
Das Arduino UNO Q hat zwei Prozessoren, die zusammenarbeiten:
- Das STM32-MCU liest den DS18B20-Sensor jede Sekunde und macht den Wert über eine Bridge-Funktion namens get_temperature verfügbar.
- Die Qualcomm-MPU führt eine Python-App aus, die die WebUI Brick zum Bereitstellen der Thermometer-Seite auf Port 7000 nutzt und Live-Temperatur-Updates über WebSocket an jeden Browser sendet.
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-real-time-temperature-monitor-on-web-browser
*/
#include <OneWire.h>
#include <DallasTemperature.h>
#include "Arduino_RouterBridge.h"
#define SENSOR_PIN 4
OneWire oneWire(SENSOR_PIN);
DallasTemperature DS18B20(&oneWire);
float last_temp_c = 0.0;
unsigned long last_read_ms = 0;
const unsigned long READ_INTERVAL = 1000;
void update_temperature() {
DS18B20.requestTemperatures();
float t = DS18B20.getTempCByIndex(0);
if (t != DEVICE_DISCONNECTED_C) {
last_temp_c = t;
}
}
String get_temperature(String arg) {
return String(last_temp_c, 2);
}
void setup() {
Bridge.begin();
Monitor.begin();
DS18B20.begin();
update_temperature();
Bridge.provide("get_temperature", get_temperature);
Monitor.println("DS18B20 initialized on pin D4");
Monitor.println("Bridge ready");
}
void loop() {
unsigned long now = millis();
if (now - last_read_ms >= READ_INTERVAL) {
last_read_ms = now;
update_temperature();
}
}
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-real-time-temperature-monitor-on-web-browser
*/
import threading
import time
from arduino.app_utils import *
from arduino.app_bricks.web_ui import WebUI
MIN_TEMP = -10
MAX_TEMP = 50
UNIT = "°C"
def read_temperature():
try:
raw = Bridge.call("get_temperature", "")
return round(float(raw), 2)
except Exception:
return 0.0
def on_get_config(client, data):
config = {"minValue": MIN_TEMP, "maxValue": MAX_TEMP, "unit": UNIT}
ui.send_message("temperature_config", config, client)
def on_subscribe(client, data):
ui.send_message("temperature_update", {"value": read_temperature()}, client)
def push_temperature():
while True:
try:
ui.send_message("temperature_update", {"value": read_temperature()})
except Exception:
pass
time.sleep(1)
ui = WebUI()
ui.on_message("get_config", on_get_config)
ui.on_message("subscribe", on_subscribe)
threading.Thread(target=push_temperature, daemon=True).start()
App.run()
HTML (assets/index.html)
Platzieren Sie diese Datei im Ordner assets/ Ihrer App. Sie lädt den Socket.IO-Client von assets/libs/socket.io.min.js und zeichnet ein Live-Canvas-Thermometer, das bei jedem Server-Push neu gezeichnet wird:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web Temperature - DIYables</title>
<link rel="icon" href="https://diyables.io/images/page/diyables.svg">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: white; height: 100vh; display: flex; flex-direction: column; }
.page { flex: 1; max-width: 1200px; margin: 0 auto; width: 100%; padding: 20px 40px; text-align: center; display: flex; flex-direction: column; box-sizing: border-box; overflow: hidden; }
.navbar { background: #f8f9fa; padding: 10px 20px; border-bottom: 1px solid #e9ecef; margin: -20px -40px 0 -40px; display: flex; justify-content: space-between; align-items: center; }
.nav-home { color: #667eea; text-decoration: none; font-size: 1.1em; font-weight: bold; padding: 8px 12px; border-radius: 6px; background: rgba(102,126,234,0.1); transition: all 0.3s; }
.nav-home:hover { background: rgba(102,126,234,0.2); transform: scale(1.05); }
.nav-tutorial { color: #007bff; text-decoration: none; font-size: 1em; font-weight: bold; padding: 8px 12px; border-radius: 6px; background: rgba(0,123,255,0.1); transition: all 0.3s; }
.nav-tutorial:hover { background: rgba(0,123,255,0.2); transform: scale(1.05); }
.status-bar { background: #f8f9fa; padding: 5px 20px; border-bottom: 1px solid #e9ecef; margin: 0 -40px 20px -40px; text-align: center; font-size: 0.9em; color: black; }
.status-bar #connectionText { font-weight: bold; }
.page-title { margin-top: 10px; margin-bottom: 20px; }
.page-title h1 { color: #333; font-size: 2.5em; font-weight: 700; }
.canvas-area { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: calc(100vh - 200px); }
.footer { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; text-align: center; width: 100%; font-size: 0.9em; position: fixed; bottom: 0; left: 0; z-index: 1000; height: 40px; display: flex; align-items: center; justify-content: center; }
.footer a { color: white; text-decoration: none; font-weight: bold; }
.footer a:hover { color: rgba(255,255,255,0.8); text-decoration: underline; }
@media (max-width: 768px) {
.page { padding: 20px; }
.page-title h1 { font-size: 1.6em; }
.navbar { padding-top: 15px; }
.status-bar { margin: 0 -20px 20px -20px; }
}
</style>
</head>
<body>
<div class="page">
<div class="navbar">
<a href="/" class="nav-home">🏠 Home</a>
<a href="https://diyables.io/tutorials/arduino-uno-q" target="_blank" class="nav-tutorial">📚 Tutorial</a>
</div>
<div class="status-bar">WebSocket: <span id="connectionText">Disconnected</span></div>
<div class="page-title"><h1>🌡️ Web Temperature</h1></div>
<div class="canvas-area">
<canvas id="temperature_canvas"></canvas>
</div>
</div>
<div class="footer">Created by <a href="https://diyables.io/" target="_blank">DIYables</a></div>
<script src="libs/socket.io.min.js"></script>
<script>
const CANVAS_W = 200;
const CANVAS_H = 450;
let minTemp = 0;
let maxTemp = 100;
let tempUnit = "\u00b0C";
let lastTemp = 0;
let connected = false;
function setConnectionStatus(text) {
const el = document.getElementById("connectionText");
el.textContent = text;
if (text === "connected") el.style.color = "#007bff";
else if (text === "connecting") el.style.color = "#6c757d";
else el.style.color = "#dc3545";
}
function drawThermometer(temp) {
lastTemp = temp;
const canvas = document.getElementById("temperature_canvas");
const ctx = canvas.getContext("2d");
const bulbR = 70, pad = 5, tubeW = 45, tubeH = 330;
ctx.clearRect(-CANVAS_W / 2, -350, CANVAS_W, CANVAS_H);
const color = connected ? "#667eea" : "#bbb";
ctx.strokeStyle = color;
ctx.fillStyle = color;
const pct = Math.max(0, Math.min(100, ((temp - minTemp) / (maxTemp - minTemp)) * 100));
const x = -tubeW / 2;
// Tick marks
ctx.lineWidth = 2;
for (let i = 0; i <= 100; i += 5) {
const y = -(tubeH - bulbR) * i / 100 - bulbR - 5;
ctx.beginPath(); ctx.moveTo(x, y); ctx.lineTo(x - 20, y); ctx.stroke();
}
ctx.lineWidth = 5;
for (let i = 0; i <= 100; i += 20) {
const y = -(tubeH - bulbR) * i / 100 - bulbR - 5;
const label = minTemp + (maxTemp - minTemp) * i / 100;
ctx.beginPath(); ctx.moveTo(x, y); ctx.lineTo(x - 25, y); ctx.stroke();
ctx.font = "16px Georgia"; ctx.textBaseline = "middle"; ctx.textAlign = "right";
ctx.fillText(label.toFixed(0), x - 35, y);
}
// Thermometer outline
ctx.lineWidth = 16;
ctx.beginPath(); ctx.arc(0, 0, bulbR, 0, 2 * Math.PI); ctx.stroke();
ctx.beginPath(); ctx.rect(-tubeW / 2, -tubeH, tubeW, tubeH); ctx.stroke();
ctx.beginPath(); ctx.arc(0, -tubeH, tubeW / 2, 0, 2 * Math.PI); ctx.stroke();
// Background fill
ctx.fillStyle = "#f8f9fa";
ctx.beginPath(); ctx.arc(0, 0, bulbR, 0, 2 * Math.PI); ctx.fill();
ctx.beginPath(); ctx.rect(-tubeW / 2, -tubeH, tubeW, tubeH); ctx.fill();
ctx.beginPath(); ctx.arc(0, -tubeH, tubeW / 2, 0, 2 * Math.PI); ctx.fill();
// Mercury fill
if (connected) {
const grad = ctx.createLinearGradient(0, -tubeH, 0, bulbR);
grad.addColorStop(0, "#ff6b6b");
grad.addColorStop(0.5, "#ff5252");
grad.addColorStop(1, "#f44336");
ctx.fillStyle = grad;
} else {
ctx.fillStyle = "#bbb";
}
ctx.beginPath(); ctx.arc(0, 0, bulbR - pad, 0, 2 * Math.PI); ctx.fill();
const fillH = (tubeH - bulbR) * pct / 100 + bulbR + 5;
ctx.beginPath(); ctx.rect(-tubeW / 2 + pad, -fillH, tubeW - 2 * pad, fillH); ctx.fill();
// Temperature label inside bulb
if (connected) {
ctx.fillStyle = "white";
ctx.font = "bold 24px Georgia";
ctx.textBaseline = "middle";
ctx.textAlign = "center";
ctx.fillText(temp.toFixed(1) + tempUnit, 0, 0);
}
}
window.onload = function () {
const canvas = document.getElementById("temperature_canvas");
canvas.width = CANVAS_W;
canvas.height = CANVAS_H;
const ctx = canvas.getContext("2d");
ctx.translate(CANVAS_W / 2, CANVAS_H - 80);
drawThermometer(0);
const socket = io("http://" + window.location.host, { transports: ["websocket"] });
socket.on("connect", function () {
connected = true;
setConnectionStatus("connected");
socket.emit("get_config", {});
socket.emit("subscribe", {});
});
socket.on("disconnect", function () {
connected = false;
setConnectionStatus("disconnected");
drawThermometer(lastTemp);
});
socket.on("temperature_config", function (data) {
minTemp = data.minValue;
maxTemp = data.maxValue;
tempUnit = data.unit;
drawThermometer(lastTemp);
});
socket.on("temperature_update", function (data) {
drawThermometer(parseFloat(data.value));
});
};
</script>
</body>
</html>
Schnelle Schritte
- Verdrahten Sie den Sensor: Schließen Sie den DS18B20 wie im Abschnitt Verdrahtungsdiagramm an das Arduino UNO Q an.
- Mit Wi-Fi verbinden: Stellen Sie sicher, dass das Arduino UNO Q mit Ihrem Wi-Fi-Netzwerk verbunden ist. Verwenden Sie das Netzwerksymbol in Arduino App Lab zum Verbinden.
- Öffnen Sie Arduino App Lab: Starten Sie Arduino App Lab und warten Sie, bis es Ihr Arduino UNO Q erkennt.
- Erstellen Sie eine neue App: Klicken Sie auf die Schaltfläche Neue App erstellen.
- Geben Sie der App einen Namen, zum Beispiel: TemperatureWS
- Klicken Sie zum Bestätigen auf Erstellen.
- 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. Wählen Sie den gesamten vorhandenen Inhalt aus und löschen Sie ihn, dann fügen Sie den Python-Code oben ein.
- Fügen Sie die HTML-Datei hinzu: Im Ordner assets/ öffnen Sie (oder erstellen) index.html und fügen Sie den HTML-Code oben ein.
- Fügen Sie den Socket.IO-Client hinzu: Im Ordner assets/ erstellen Sie einen libs/-Unterordner. Laden Sie socket.io.min.js herunter und speichern Sie es als assets/libs/socket.io.min.js.
- Install the library: Click the Add sketch library button (the open book icon with a + sign) in the left sidebar.
- Search for DallasTemperature created by Miles Burton
Bricks
No bricks added...
Sketch Libraries
No sketch libra...
Files
python
sketch
.gitignore
README.md
app.yaml
sketch.ino
- Search for OneWire created by Jim Studt, Tom Pollard, Robin James, Glenn Trewitt, Jason Dangel, Guillermo Lovato, Paul Stoffregen, Scott Roberts, Bertrik Sikken, Mark Tillotson, Ken Butcher, Roger Clark, Love Nystrom and click the Install button.
Bricks
No bricks added...
Sketch Libraries
No sketch libra...
Files
python
sketch
.gitignore
README.md
app.yaml
sketch.ino
- 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 die WebUI Brick hinzu: Klicken Sie auf die Schaltfläche Brick hinzufügen in der Seitenleiste des Editors, um den Brick-Katalog zu öffnen.
Finden Sie WebUI - HTML in der Liste und wählen Sie es aus, folgen Sie dann allen Konfigurationsanforderungen.
Arduino App Lab fügt den Brick-Eintrag automatisch zu Ihrer app.yaml-Datei hinzu — bearbeiten Sie diesen Eintrag nicht manuell.
※ Notiz:
Die WebUI - HTML Brick verwaltet sowohl HTTP-Dateibereitstellung als auch Socket.IO-WebSocket in einem einzelnen Service auf Port 7000. Das Socket.IO-Client-Skript muss sich unter assets/libs/socket.io.min.js befinden — der Brick stellt nicht automatisch eine kompatible Version bereit. Weitere Informationen finden Sie unter About Bricks.
- Hochladen: Klicken Sie auf die Schaltfläche Ausführen in Arduino App Lab zum Kompilieren und Hochladen.
- Öffnen Sie einen Webbrowser auf Ihrem Telefon oder PC und navigieren Sie zu:
http://<ARDUINO_UNO_Q_IP>:7000/
Ersetzen Sie <ARDUINO_UNO_Q_IP> durch die IP-Adresse, die in der Python-Konsole angezeigt wird.
App Lab-Konsolenausgabe
sketch.ino
1#include "Arduino_RouterBridge.h"
Serial Monitor
Python
[2026-05-08 09:00:01] Bridge ready
[2026-05-08 09:00:02] DS18B20 initialized on pin D4
sketch.ino
1#include "Arduino_RouterBridge.h"
Serial Monitor
Python
2026-05-08 09:00:02.000 INFO - [WebUI.execute] WebUI: The application interface is available here:
- Local URL: http://localhost:7000
- Network URL: http://192.168.0.45:7000
2026-05-08 09:00:02.001 INFO - [MainThread] App: App started
Browser-Ausgabe
Öffnen Sie http://<ARDUINO_UNO_Q_IP>:7000/ in einem beliebigen Browser im gleichen Netzwerk. Sie sehen eine Live-Thermometer-Seite mit einer WebSocket-Verbindungsstatusleiste oben:
Die Seite zeigt an:
- Ein Canvas-Thermometer mit einer Quecksilbersäule, die über WebSocket-Push in Echtzeit auf und ab geht
- Der aktuelle Temperaturwert und die Einheit (°C) in der Kugel, aktualisiert bei jedem Server-Push (jede 1 s)
- Skalierungsmarkierungen von −10 °C bis 50 °C (konfigurierbar über MIN_TEMP und MAX_TEMP im Python-Code)
- Eine Verbindungsstatusleiste — das Thermometer-Quecksilber wird grau, wenn WebSocket getrennt ist
WebSocket-Ereignisse
Der Browser und der Python-Server kommunizieren mit den folgenden Socket.IO-Ereignissen:
| Richtung | Ereignis | Nutzlast | |||
|---|---|---|---|---|---|
| Browser → Server | get_config | {} | |||
| Server → Browser | temperature_config | {"minValue" | -10, "maxValue" | 50, "unit" | "°C"} |
| Browser → Server | subscribe | {} | |||
| Server → Browser | temperature_update | {"value" | 24.6} |
OpenClaw
You can adapt the OpenClaw to this tutorial by refering the instruction on Arduino Uno Q - OpenClaw Tutorial
Projektideen
Die Live-Temperatur-Webseite ist eine Grundlage für viele praktische Projekte auf Arduino UNO Q:
- Raumklima-Monitor: Fügen Sie einen DHT22 oder BMP280 zum MCU hinzu und erweitern Sie die Python-API um einen /api/humidity-Endpunkt — die Webseite zeigt Temperatur und Luftfeuchtigkeit nebeneinander, aktualisiert jede Sekunde
- Kühlschrank- oder Gefriererschrank-Warnung: Legen Sie einen Schwellenwert im Python-Skript fest — wenn get_temperature einen Wert über dem Schwellenwert zurückgibt, sendet das Skript eine Telegram-Nachricht, die Sie benachrichtigt, dass die Kühlschranktür möglicherweise offen ist
- Temperatur-Datenlogger: Hängen Sie jede Messung an eine CSV-Datei auf der Linux-Seite an — fügen Sie einen /api/history-Endpunkt hinzu, der die letzten 100 Zeilen zurückgibt, und zeigen Sie sie als Diagramm mit Chart.js auf einer zweiten Registerkarte an
- Gewächshaus-Monitor: Montieren Sie das Arduino UNO Q in einem Gewächshaus mit zwei DS18B20-Sensoren (innen und außen) und machen Sie beide über separate Bridge-Funktionen verfügbar — die Webseite zeigt beide Messungen in einem geteilten Thermometer-Layout
- Serverraum-Monitor: Montieren Sie die Platine in einem Serverregal — eine einfache Webseite mit einem roten/grünen Statusbanner ermöglicht es dem IT-Personal, die Temperatur von jedem Gerät im Netzwerk zu überprüfen, ohne eine App zu installieren
Stellen Sie sich selbst Herausforderungen
Bereit, den Temperatur-Web-Monitor auf Arduino UNO Q weiter zu nutzen? Versuchen Sie diese Herausforderungen:
- Einfach: Ändern Sie den Thermometer-Bereich und das Farbschema in index.html — legen Sie den Bereich auf 0–100 °C fest und machen Sie den Quecksilberverlauf abhängig von der aktuellen Messung von blau (kalt) bis rot (heiß).
- Mittel: Fügen Sie ein zweites Diagramm-Panel zur Webseite mit Chart.js hinzu — zeichnen Sie die Temperaturhistorie als Liniengraph, der sich über die erste Minute ausfüllt, unter Verwendung von Messwerten in einem JavaScript-Array, das bei jedem temperature_update-WebSocket-Ereignis wächst.
- Fortgeschrittene: Fügen Sie ein set_threshold-Socket.IO-Ereignis zum Python-Skript hinzu, das der Browser mit { "min": 18, "max": 28 } ausgibt — speichern Sie den Bereich in Python und überprüfen Sie ihn in der Push-Schleife; senden Sie ein temperature_alert-Ereignis, wenn die Messung außerhalb des Bereichs liegt, damit die Webseite ein Warnung-Banner zeigt, das sich automatisch von grün zu rot ändert.