Arduino UNO Q - Moniteur de Température en Temps Réel sur Navigateur Web
L'Arduino UNO Q peut envoyer des lectures de température en direct vers n'importe quel navigateur en temps réel grâce à WebSocket — sans interrogation, sans rechargement de page. Le MCU STM32 lit le capteur DS18B20 chaque seconde et partage la valeur via Bridge. Le MPU Linux Qualcomm exécute une application Python qui utilise le serveur Socket.IO intégré de la Brique WebUI pour diffuser chaque nouvelle lecture vers tous les navigateurs connectés dès son arrivée. Aucun matériel supplémentaire ou service cloud requis.
Dans ce tutoriel, vous apprendrez :
- Comment câbler le capteur de température 1-Wire DS18B20 au MCU Arduino UNO Q
- Comment exposer les données de température en temps réel du MCU vers le MPU Linux via Bridge
- Comment servir une page web thermomètre depuis le MPU Linux Arduino UNO Q en utilisant la Brique WebUI
- Comment utiliser ui.on_message() et ui.send_message() pour envoyer des mises à jour de température en direct au navigateur via WebSocket
- Comment recevoir les messages WebSocket dans le navigateur avec Socket.IO et mettre à jour le thermomètre canvas sans recharger
- Comment accéder à la page de température en direct depuis n'importe quel appareil sur le même réseau Wi-Fi
Matériel Requis
Ou vous pouvez acheter les kits suivants:
| 1 | × | Kit de Capteurs DIYables (18 capteurs/écrans) |
Divulgation : Certains des liens fournis dans cette section sont des liens affiliés Amazon. Nous pouvons recevoir une commission pour tout achat effectué via ces liens, sans coût supplémentaire pour vous. Nous vous remercions de votre soutien.
Note d'achat: De nombreux capteurs DS18B20 sur le marché sont de faible qualité. Nous recommandons vivement d'acheter le capteur de la marque DIYables en utilisant le lien ci-dessus. Nous l'avons testé et il a bien fonctionné.
À Propos du DS18B20 et du Serveur Web
Capteur DS18B20 : Un capteur de température numérique 1-Wire (−55 °C à +125 °C, précision ±0,5 °C). Nécessite une résistance de rappel de 4,7 kΩ entre DATA et VCC — les capteurs avec adaptateurs l'incluent. Consultez le Arduino UNO Q - Capteur de Température pour les détails de câblage et de bibliothèque.
Brique WebUI : La Brique WebUI - HTML exécute un serveur web sur le port 7000 qui sert vos fichiers HTML et gère les connexions WebSocket Socket.IO. Votre code Python utilise ui.on_message() pour recevoir des événements du navigateur et ui.send_message() pour renvoyer des données. Tout appareil sur le même réseau Wi-Fi peut accéder à la page sur http://<adresse-ip-carte>:7000/.
Flux en temps réel : Le navigateur se connecte via Socket.IO et demande la configuration de température et la première lecture. Un thread Python en arrière-plan lit le capteur chaque seconde via Bridge et diffuse chaque mise à jour vers tous les navigateurs connectés. Le thermomètre canvas se redessine à chaque envoi — sans interrogation, sans rechargement.
Nouveau avec WebSocket ? Si vous n'avez pas encore utilisé Socket.IO sur l'Arduino UNO Q, commencez par le tutoriel Arduino UNO Q - WebSocket — il enseigne le même schéma en utilisant un exemple de contrôle LED simple sans capteur.
Schéma de Câblage
- Câblage sur breadboard (avec résistance de rappel) :
Cette image a été créée avec Fritzing. Cliquez pour agrandir l'image.
- Schéma de câblage avec adaptateur (pas de résistance supplémentaire nécessaire) :
Cette image a été créée avec Fritzing. Cliquez pour agrandir l'image.
Nous recommandons d'acheter un capteur DS18B20 avec adaptateur de câblage. Cet adaptateur simplifie la connexion car il inclut une résistance, donc vous n'en avez pas besoin d'une supplémentaire.
| Broche DS18B20 | Broche Arduino UNO Q |
|---|---|
| GND | GND |
| VCC | 5V |
| DATA | D4 |
Code Arduino UNO Q
L'Arduino UNO Q possède deux processeurs qui fonctionnent ensemble :
- Le MCU STM32 lit le capteur DS18B20 chaque seconde et expose la valeur via une fonction Bridge appelée get_temperature.
- Le MPU Qualcomm exécute une application Python qui utilise la Brique WebUI pour servir la page thermomètre sur le port 7000 et envoyer des mises à jour de température en direct à chaque navigateur via WebSocket.
Code MCU
/*
* Ce code Arduino UNO Q a été développé par newbiely.fr
* Ce code Arduino UNO Q est mis à disposition du public sans aucune restriction.
* Pour des instructions complètes et des schémas de câblage, veuillez visiter:
* https://newbiely.fr/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();
}
}
Code Python
/*
* Ce code Arduino UNO Q a été développé par newbiely.fr
* Ce code Arduino UNO Q est mis à disposition du public sans aucune restriction.
* Pour des instructions complètes et des schémas de câblage, veuillez visiter:
* https://newbiely.fr/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)
Placez ce fichier dans le dossier assets/ de votre application. Il charge le client Socket.IO depuis assets/libs/socket.io.min.js et dessine un thermomètre canvas en direct qui se redessine à chaque envoi du serveur :
<!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>
Étapes Rapides
- Câbler le capteur : Connectez le DS18B20 à l'Arduino UNO Q comme indiqué dans le schéma de câblage.
- Se connecter au Wi-Fi : Assurez-vous que l'Arduino UNO Q est connecté à votre réseau Wi-Fi. Utilisez l'icône réseau dans Arduino App Lab pour vous connecter d'abord.
- Ouvrir Arduino App Lab : Lancez Arduino App Lab et attendez qu'il détecte votre Arduino UNO Q.
- Créer une nouvelle application : Cliquez sur le bouton Create New App.
- Donnez un nom à l'application, par exemple : TemperatureWS
- Cliquez sur Create pour confirmer.
- Coller le sketch MCU : Copiez le code MCU ci-dessus et collez-le dans sketch/sketch.ino.
- Coller le code Python : Ouvrez python/main.py. Sélectionnez tout le contenu existant et supprimez-le, puis collez le code Python ci-dessus.
- Ajouter le fichier HTML : Dans le dossier assets/, ouvrez (ou créez) index.html et collez le code HTML ci-dessus.
- Ajouter le client Socket.IO : Dans le dossier assets/, créez un sous-dossier libs/. Téléchargez socket.io.min.js et enregistrez-le sous 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
- Ajouter la Brique WebUI : Cliquez sur le bouton Add Brick dans la barre latérale de l'éditeur pour ouvrir le catalogue de Briques.
Trouvez et sélectionnez WebUI - HTML dans la liste, puis suivez les invites de configuration.
Arduino App Lab ajoute automatiquement l'entrée Brique à votre fichier app.yaml — ne modifiez pas cette entrée manuellement.
※ Note:
La Brique WebUI - HTML gère à la fois le service de fichiers HTTP et le WebSocket Socket.IO dans un seul service sur le port 7000. Le script client Socket.IO doit être placé dans assets/libs/socket.io.min.js — la brique ne sert pas automatiquement une version compatible. Consultez À Propos des Briques pour plus de détails.
- Téléverser : Cliquez sur le bouton Run dans Arduino App Lab pour compiler et téléverser.
- Ouvrez un navigateur web sur votre téléphone ou PC et accédez à :
http://<ARDUINO_UNO_Q_IP>:7000/
Remplacez <ARDUINO_UNO_Q_IP> par l'adresse IP affichée dans la console Python.
Sortie Console d'App Lab
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
Sortie dans le Navigateur
Ouvrez http://<ARDUINO_UNO_Q_IP>:7000/ dans n'importe quel navigateur sur le même réseau. Vous verrez une page thermomètre en direct avec une barre d'état de connexion WebSocket en haut :
La page affiche :
- Un thermomètre canvas avec un niveau de mercure qui monte et descend en temps réel via WebSocket push
- La valeur de température actuelle et l'unité (°C) dans le bulbe, mise à jour à chaque envoi du serveur (toutes les 1 s)
- Des graduations de −10 °C à 50 °C (configurable via MIN_TEMP et MAX_TEMP dans le code Python)
- Une barre d'état de connexion — le mercure du thermomètre devient gris quand le WebSocket est déconnecté
Événements WebSocket
Le navigateur et le serveur Python communiquent en utilisant les événements Socket.IO suivants :
| Direction | Événement | Charge utile | |||
|---|---|---|---|---|---|
| Navigateur → Serveur | get_config | {} | |||
| Serveur → Navigateur | temperature_config | {"minValue" | -10, "maxValue" | 50, "unit" | "°C"} |
| Navigateur → Serveur | subscribe | {} | |||
| Serveur → Navigateur | temperature_update | {"value" | 24.6} |
Intégration d'OpenClaw
Vous pouvez adapter OpenClaw à ce tutoriel en vous référant aux instructions du tutoriel Arduino UNO Q - OpenClaw.
Idées de Projets
La page web de température en direct est une base pour de nombreux projets pratiques sur Arduino UNO Q :
- Moniteur de Climat de Pièce : Ajoutez un DHT22 ou BMP280 au MCU et étendez l'API Python avec un endpoint /api/humidity — la page web affiche température et humidité côte à côte, se mettant à jour chaque seconde
- Alerte Réfrigérateur ou Congélateur : Définissez un seuil dans le script Python — si get_temperature retourne une valeur au-dessus du seuil, le script envoie un message Telegram vous alertant que la porte du réfrigérateur est peut-être ouverte
- Enregistreur de Données de Température : Ajoutez chaque lecture à un fichier CSV côté Linux — ajoutez un endpoint /api/history qui retourne les 100 dernières lignes, et affichez-les comme graphique avec Chart.js sur un deuxième onglet
- Moniteur de Serre : Montez l'Arduino UNO Q dans une serre avec deux capteurs DS18B20 (intérieur et extérieur) et exposez-les via des fonctions Bridge séparées — la page web affiche les deux lectures sur une disposition de thermomètre divisé
- Moniteur de Salle Serveurs : Montez la carte dans un rack serveur — une simple page web avec une bannière d'état rouge/verte permet au personnel IT de vérifier la température depuis n'importe quel appareil du réseau sans installer d'application
Défiez-Vous
Prêt à aller plus loin avec le moniteur de température web sur Arduino UNO Q ? Essayez ces défis :
- Facile : Changez la plage du thermomètre et le schéma de couleurs dans index.html — définissez la plage à 0–100 °C et faites passer le dégradé du mercure du bleu (froid) au rouge (chaud) selon la lecture actuelle.
- Moyen : Ajoutez un deuxième panneau de graphique à la page web en utilisant Chart.js — tracez l'historique de température comme graphique linéaire qui se remplit au cours de la première minute, en utilisant des lectures stockées dans un tableau JavaScript qui s'agrandit à chaque événement WebSocket temperature_update.
- Avancé : Ajoutez un événement Socket.IO set_threshold au script Python que le navigateur émet avec { "min": 18, "max": 28 } — stockez la plage en Python et vérifiez-la dans la boucle d'envoi ; émettez un événement temperature_alert lorsque la lecture sort de la plage pour que la page web affiche une bannière d'avertissement qui passe automatiquement du vert au rouge.