Arduino UNO Q - Serveur Web
L'Arduino UNO Q dispose d'un MPU Debian Linux intégré, ce qui signifie qu'il peut faire tourner un serveur web complet — aucun shield Wi-Fi ni service cloud supplémentaire n'est nécessaire. Ce tutoriel vous montre comment exécuter un serveur web Python WebUI sur l'Arduino UNO Q en trois exemples progressifs, en commençant par la page la plus simple possible et en évoluant vers une API propre.
Dans ce tutoriel, vous apprendrez :
- Comment afficher une lecture brute de capteur dans une page HTML minimale (sans CSS, sans JavaScript)
- Comment servir une page web complète depuis un dossier d'assets (HTML + CSS + JavaScript)
- Comment exposer les données du capteur MCU comme un endpoint API JSON pur
- Comment le Bridge connecte le sketch MCU et le serveur web Python
- Comment câbler un potentiomètre à la broche analogique A0 sur l'Arduino UNO Q
- Comment ajouter le Brick WebUI dans Arduino App Lab pour gérer le service HTTP automatiquement
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.
Fonctionnement du Serveur Web Arduino UNO Q
L'Arduino UNO Q combine deux processeurs :
- MCU STM32 — exécute votre sketch Arduino (C/C++) en temps réel. Il lit les capteurs, contrôle les relais, entraîne les moteurs, et bien plus encore.
- MPU Qualcomm — exécute Debian Linux complet. Il se connecte au Wi-Fi et peut faire tourner un serveur web Python WebUI que tout navigateur de votre réseau peut atteindre.
Les deux processeurs communiquent via le Bridge. Le MCU expose les fonctions matérielles via Bridge, et le serveur web Python sur le MPU appelle ces fonctions pour obtenir les lectures du capteur. Un navigateur récupère ensuite les données — soit comme une page HTML simple, une page web stylisée, ou une réponse API JSON.
※ Note:
Aucun shield Wi-Fi externe n'est nécessaire. L'Arduino UNO Q dispose du Wi-Fi intégré du côté Linux.
Schéma de Câblage
Cette image a été créée avec Fritzing. Cliquez pour agrandir l'image.
Code Arduino UNO Q
L'Arduino UNO Q dispose de deux processeurs. Pour un serveur web, vous écrivez :
- Un sketch MCU qui lit la broche analogique et expose la valeur via Bridge
- Un script Python WebUI sur le MPU Linux qui sert la valeur via HTTP
Les trois exemples ci-dessous utilisent le même sketch MCU. Seul le code Python (et les assets HTML optionnels) diffèrent.
Exemple 1 — Page Web Simple (Sans CSS, Sans JavaScript)
Le serveur web le plus simple possible : ouvrez un navigateur, visitez l'IP de la carte, et voyez la lecture analogique brute en HTML simple. Pas de style, pas de rafraîchissement automatique — juste le nombre.
Le sketch MCU lit la broche A0 et expose la valeur via une fonction Bridge appelée get_analog. Le serveur Python appelle cette fonction lorsqu'un navigateur demande / et retourne une réponse HTML brute.
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-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() {
}
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-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()
Étapes Rapides
- Connectez : Branchez l'Arduino UNO Q à votre ordinateur avec un câble USB-C et câblez le potentiomètre à A0 comme décrit dans la section Schéma de Câblage.
- Connexion 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.
- Ouvrez Arduino App Lab : Lancez Arduino App Lab et attendez qu'il détecte votre Arduino UNO Q.
- Créez une nouvelle application : Cliquez sur le bouton Créer une nouvelle application.
- Donnez un nom à l'application, par exemple : WebServerSimple
- Cliquez sur Créer pour confirmer.
- Collez le sketch MCU : Copiez le code MCU ci-dessus et collez-le dans sketch/sketch.ino.
- Collez le code Python : Ouvrez python/main.py dans l'application. Sélectionnez tout le contenu existant et supprimez-le, puis collez le code du serveur web Python ci-dessus.
- 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
- Ajoutez le Brick WebUI : Cliquez sur le bouton Ajouter un Brick dans la barre latérale de l'Éditeur pour ouvrir le catalogue des Bricks.
Trouvez et sélectionnez WebUI - HTML dans la liste, puis suivez les invites de configuration.
Arduino App Lab ajoute automatiquement l'entrée Brick dans votre fichier app.yaml — ne modifiez pas cette entrée manuellement.
※ Note:
Un Brick est un service prêt à l'emploi qui s'exécute du côté Linux de l'Arduino UNO Q. Le Brick WebUI - HTML gère le serveur HTTP afin que vous n'ayez pas à installer Flask ou tout autre framework web manuellement. Consultez À propos des Bricks pour plus de détails.
- Téléversez : Cliquez sur le bouton Exécuter 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://
:7000/
Remplacez <ARDUINO_UNO_Q_IP> par l'adresse IP de votre Arduino UNO Q.
- Vous verrez une page HTML simple affichant la valeur ADC brute actuelle de A0.
- Tournez le bouton du potentiomètre et rafraîchissez la page du navigateur — le nombre change.
Sortie Console App Lab
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
Rendu dans le Navigateur
Ouvrez http://<ARDUINO_UNO_Q_IP>:7000/ dans votre navigateur. Vous verrez une page HTML simple comme :
Analog A0: 512
_RENDER
Serveur Web avec Dossier d'Assets (HTML + CSS + JavaScript)
Cet exemple sépare les fichiers front-end dans un dossier assets/, tout comme l'exemple blink-with-ui. Le serveur Python expose un endpoint /api/analog ; le fichier index.html dans le dossier assets appelle cet endpoint chaque seconde avec JavaScript et met à jour la valeur affichée — aucun rafraîchissement de page nécessaire.
Le sketch MCU est le même que l'Exemple 1. Les différences sont :
- Le code Python expose /api/analog au lieu d'une route HTML brute.
- Le fichier assets/index.html contient le HTML, le CSS et le JavaScript.
- Le Brick WebUI sert automatiquement tous les fichiers du dossier assets/ à l'URL racine (/).
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-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() {
}
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-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)
Placez ce fichier dans le dossier assets/ de votre application :
<!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>
Étapes Rapides
- Suivez les mêmes étapes de création d'application que l'Exemple 1, mais nommez l'application WebServerAssets.
- Collez le code MCU dans sketch/sketch.ino.
- Collez le code Python dans python/main.py (remplacez tout le contenu existant).
- Dans le dossier assets/, ouvrez (ou créez) index.html et collez le code HTML ci-dessus.
- Ajoutez le Brick WebUI - HTML comme dans l'Exemple 1.
- Cliquez sur Exécuter pour téléverser.
- Ouvrez http://<ARDUINO_UNO_Q_IP>:7000/ dans votre navigateur.
- La page charge la page web stylisée depuis le dossier assets et met à jour la valeur analogique automatiquement chaque seconde.
- Tournez le potentiomètre — la valeur sur la page change sans rafraîchissement.
Sortie Console App Lab
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
Réponse de l'API
Le JavaScript dans index.html appelle GET /api/analog. Vous pouvez aussi tester cet endpoint directement :
{"pin": "A0", "value": 512}
Serveur Web comme API (JSON Pur)
Cet exemple supprime tout le HTML et ne sert qu'un endpoint API JSON. Tout client — navigateur, application mobile, curl, Postman, ou un autre microcontrôleur — peut appeler GET /api/analog pour recevoir la lecture analogique actuelle sous forme de données structurées.
Utilisez ce modèle lorsque vous souhaitez :
- Intégrer les données de l'Arduino UNO Q dans une application web ou un tableau de bord existant
- Interroger la carte depuis une application mobile ou un service back-end
- Tester ou enregistrer des valeurs de capteurs depuis la ligne de commande
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-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() {
}
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-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()
Étapes Rapides
- Suivez les mêmes étapes de création d'application que l'Exemple 1, mais nommez l'application WebServerAPI.
- Collez le code MCU dans sketch/sketch.ino.
- Collez le code Python dans python/main.py (remplacez tout le contenu existant).
- Ajoutez le Brick WebUI - HTML comme dans l'Exemple 1.
- Cliquez sur Exécuter pour téléverser.
- Testez l'endpoint depuis votre navigateur
- Testez l'endpoint depuis votre terminal :
GET http://ARDUINO_UNO_Q_IP:7000/api/analog
- Testez l'endpoint depuis n'importe quel client. Par exemple, avec curl :
curl http://:7000/api/analog
Réponse de l'API
{"pin": "A0", "value": 512}
Sortie Console App Lab
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
Séparer le HTML du Code Python
Avec l'approche WebUI, votre code Python expose uniquement des endpoints API — il ne sert pas de HTML. C'est une séparation propre par conception :
- Script Python WebUI — expose des endpoints API JSON (par ex. /api/status, /api/led/on)
- Fichier HTML — un fichier autonome que vous ouvrez dans le navigateur. Son JavaScript récupère les données de l'API.
Voici le script Python (identique à l'Exemple 1 — aucune modification nécessaire) :
/*
* 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-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()
Voici la page HTML autonome (index.html) qui récupère depuis l'API :
/*
* 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-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>
※ Note:
Ouvrez index.html directement dans votre navigateur (depuis votre ordinateur) ou hébergez-le n'importe où. Le JavaScript intégré récupère http://<ARDUINO_UNO_Q_IP>:7000/api/status toutes les deux secondes. Mettez à jour l'adresse IP dans le fichier HTML pour qu'elle corresponde à votre carte.
Serveur Web Arduino UNO Q — Pages Multiples
Pour construire un serveur web avec plusieurs endpoints API (par ex. /api/status, /api/led/on, /api/settings), ajoutez un appel expose_api par endpoint dans le script Python WebUI.
Pour un guide détaillé, consultez le tutoriel Arduino UNO Q - Serveur Web Pages Multiples.
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
Le serveur web est un élément de base pour de nombreux projets utiles sur Arduino UNO Q :
- Tableau de bord des capteurs : Connecter un DHT22 ou BMP280 au MCU et afficher la température, l'humidité et la pression sur une page web stylisée qui se rafraîchit automatiquement toutes les quelques secondes
- Panneau de contrôle des relais : Ajouter des boutons sur la page web pour activer et désactiver les relais — utile pour contrôler les lumières, les ventilateurs ou les pompes depuis un téléphone à la maison
- Visualiseur d'enregistreur de données : Enregistrer les lectures des capteurs dans un fichier CSV du côté Linux et ajouter un endpoint /history qui retourne les 100 dernières lectures sous forme de table HTML
- Ouvre-porte de garage : Exposer une fonction Bridge "trigger" qui pulse un relais pendant une seconde — ajouter un grand bouton sur la page web pour ouvrir ou fermer le garage depuis votre téléphone
- Moniteur d'arrosage des plantes : Lire un capteur d'humidité du sol sur le MCU, afficher le niveau d'humidité sur la page web avec une barre de progression, et afficher une bannière d'avertissement lorsque le sol est trop sec
Relevez le Défi
Prêt à aller plus loin avec le serveur web sur Arduino UNO Q ? Essayez ces défis :
- Facile : Créer un fichier index.html stylisé sur votre ordinateur qui récupère depuis http://<ARDUINO_UNO_Q_IP>:7000/api/status et affiche le temps de fonctionnement et l'état de la LED avec une mise en page propre utilisant Bootstrap ou du CSS personnalisé.
- Moyen : Ajouter un endpoint /api/history au script Python WebUI qui lit les 10 dernières valeurs Bridge depuis une liste en mémoire et les retourne sous forme de tableau JSON — puis afficher l'historique sur la page HTML sous forme de table.
- Avancé : Ajouter un endpoint POST /api/led/toggle au script WebUI qui lit l'état actuel de la LED via Bridge et appelle soit led_on soit led_off pour le basculer — puis ajouter un seul bouton de bascule à la page HTML.