Build a smart mirror with an Arduino UNO Q

Arduino App Lab

Modulino™ Thermo

17.3" IPS display panel (1920×1080)

HDMI/eDP display controller board

Arduino® UNO™ Q 4GB

Arduino USB-C Hub (8 in 1)

<html><body>OverviewThis tutorial walks you through building a smart mirror using the Arduino UNO Q. What makes this board particularly well suited to the project is its dual-processor architecture: the UNO Q combines a Qualcomm MPU running Linux with an STM32 MCU on the same board. Each processor handles the tasks it is best at.The STM32 MCU reads the environmental sensor data from the Modulino Temperature &amp; Humidity module — exactly the kind of low-latency hardware interfacing a microcontroller is designed for. The Qualcomm MPU, running Linux and App Lab, handles the heavier workloads: serving the web interface to the display, running the AI object detection model on the USB camera feed, and managing the real-time data pipeline that keeps the graphs on screen up to date.The result is a mirror that shows a live clock, your personal calendar and to-do list, room temperature and humidity graphs, and the weather forecast. All the information you need in the morning before you start your day, displayed on what looks, at a glance, like an ordinary mirror.ComponentsElectronics<ol><li>Arduino UNO Q (4 GB) </li><li>Modulino Temperature &amp; Humidity</li><li>USB camera </li><li>17.3" IPS display panel, 1920×1080 </li><li>HDMI/eDP display controller board</li><li>USB-C hub with PD charging and HDMI output </li><li>65 W USB-C power supply </li></ol>Hardware<ol><li>Two-way mirror glass</li><li>Deep picture frame or shadow box</li><li>Angle brackets (×4–8) with M3 screws </li><li>Hot glue gun </li><li>Measuring tape, screwdriver set, cordless drill </li></ol>Software<ol><li>Arduino App Lab</li></ol>How It WorksThe UNO Q runs three Bricks in the background. A Brick is a pre-configured service that App Lab deploys as a container on the board's Linux system. Each one exposes a simple Python API so there is no need to configure the underlying infrastructure manually.The three Bricks used here are:<ol><li>WebUI – HTML: serves the mirror interface (index.html and app.js) and maintains a WebSocket connection between the board and the browser</li></ol><ol><li>Database – Time Series: stores every sensor reading in a local InfluxDB instance so graphs persist across reboots</li></ol><ol><li>Video Object Detection: processes the USB camera feed using a pre-trained model and calls a Python function each time a subject is detected</li></ol>On each sensor reading, main.py writes the value to the database and immediately pushes it to the browser over the WebSocket. The chart updates in real time without any page reload. When the camera detects a subject above the confidence threshold, the back-end sends a message to the browser and a label appears on the mirror for five seconds.Hardware AssemblyLay all components on a soft surface before starting. LCD panels and mirror glass scratch easily.Frame and mirror glass<ol><li>Measure the inner rebate of the frame. The mirror glass and the 17.3" panel both need to fit inside with a small amount of clearance.</li><li>Drill several 6 mm ventilation holes along the top and bottom edges of the frame back.</li><li>Clean both faces of the mirror glass with a microfibre cloth.</li><li>Place the mirror glass into the front of the frame, reflective side facing outward. Secure at the corners with angle brackets — firm enough to hold, not so tight as to risk cracking the glass.</li></ol>Display panel and controller board<ol><li>Connect the ribbon cable from the display panel to the HDMI/eDP controller board before placing either component inside the frame.</li><li>Slide the display in behind the mirror glass, screen surface facing the glass.</li><li>Apply a small amount of hot glue at each corner of the panel to hold it in position, then reinforce with angle brackets along the longer sides.</li><li>Route the HDMI and power cables through the ventilation holes or a notch cut in the frame back.</li></ol>Electronics<ol><li>Secure the display controller board to the back of the frame with hot glue or double-sided foam tape.</li><li>Mount the USB-C hub next to it and connect the hub's HDMI output to the controller board.</li><li>Mount the UNO Q with the USB port accessible. Connect it to the hub via USB-C.</li><li>Connect the Modulino Temperature &amp; Humidity module to the UNO Q's Qwiic port.</li><li>Connect the USB camera to one of the UNO Q's USB ports.</li><li>Connect the power supply to the hub. Confirm power reaches both the display and the UNO Q before proceeding.</li></ol>Setting Up App LabThere are two ways to access it.As a standalone Linux-based computer<ol><li>Power on the UNO Q and go through the setup wizard.</li><li>Arduino App Lab is installed and will open automatically when the board boots up.</li></ol>From the desktop application<ol><li>Download Arduino App Lab from Arduino website.</li><li>Install and launch it. Connect the UNO Q via USB-C.</li><li>The first time a Brick is added to a project, the board downloads the container image from the Arduino registry. An active internet connection is required for this initial download only.</li></ol>Understanding How the Code WorksThe project is made up of three files that each handle a distinct layer of the system. They are connected to each other — and to the UNO Q's hardware — through the App Lab Bricks.main.py — the back-endThis is the Python file that runs on the Qualcomm MPU under App Lab. It is the central hub of the project: it initialises the Bricks, receives data from the STM32 MCU via the Bridge, and pushes updates to the browser.At the top of the file, the two core Bricks are instantiated:<pre>db = TimeSeriesStore() # Database – Time Series Brick </pre><pre>ui = WebUI() # WebUI – HTML Brick </pre>The Bridge is how the MPU and MCU communicate. When the STM32 reads a new value from the Modulino sensor, it calls the function registered with Bridge.provide() on the Python side. The function then saves the reading to the database and immediately forwards it to the browser over the WebSocket:<pre>def record_sensor_samples(celsius, humidity): </pre><pre>	 T = float(celsius) </pre><pre>	 H = float(humidity) </pre><pre>	 ts = int(datetime.datetime.now().timestamp() * 1000) </pre><pre>	 db.write_sample('temperature', T, ts) # persist to InfluxDB </pre><pre>	 db.write_sample('humidity', H, ts) </pre><pre>	 ui.send_message('temperature', {'value': T, 'ts': ts}) # push to browser </pre><pre>	 ui.send_message('humidity', {'value': H, 'ts': ts}) </pre><pre>	 </pre><pre>Bridge.provide('record_sensor_samples', record_sensor_samples) </pre>Object detection runs through the Video Object Detection Brick. The Brick processes the USB camera feed continuously in the background. Whenever it spots a subject above the confidence threshold (set here to 0.4, meaning 40%), it passes the result to the callback function. The function picks whichever label scored highest and sends it to the browser:<pre>video_detector = VideoObjectDetection(confidence=0.4, debounce_sec=1.5) </pre><pre>	 </pre><pre>def on_any_detection(detections: dict): </pre><pre>	 # detections format: {'person': {'confidence': 0.87}, 'cat': {'confidence': 0.51}} </pre><pre>	 detected_label, data = max( </pre><pre>	 detections.items(), </pre><pre>	 key=lambda item: item[1].get('confidence', 0) </pre><pre>	 ) </pre><pre>	 ui.send_message('vision_detection', { </pre><pre>	 'label': detected_label, </pre><pre>	 'confidence': data.get('confidence', 0) </pre><pre>	 }) </pre><pre>	 </pre><pre>video_detector.on_detect_all(on_any_detection) </pre>The weather forecast is served as a REST API endpoint. In this version the data is static, but the structure is ready to be replaced with a live API:<pre>def get_forecast(request=None): </pre><pre>	 return { </pre><pre>	 'city': 'Cairo', </pre><pre>	 'current': 26.3, </pre><pre>	 'daily': [...] </pre><pre>	 } </pre><pre>	 </pre><pre>ui.expose_api('GET', '/forecast', get_forecast) </pre>index.html and style.css — the interfaceThe HTML file defines the layout of everything visible on the mirror: the clock and date in the top-left, the calendar and to-do list below it, the weather forecast in the top-right, and the temperature and humidity graphs in the centre. The greeting overlay — which appears when the camera detects a subject — sits above all other elements.The layout is built at a fixed 1600×900 base size and scaled down to fit the actual display using a CSS custom property (--scale). This means the design stays sharp and proportional regardless of the screen resolution it runs on.The calendar grid, events list, and to-do items are all static HTML. To personalise the mirror, edit those sections directly in index.html.app.js — the browser logicThis JavaScript file runs in the browser and is responsible for keeping the interface alive and up to date. On load it opens a Socket.IO connection back to the board, initialises the clock, and sets up listeners for incoming data.The clock increments locally in the browser using setInterval — it does not depend on the board for every tick, which keeps it smooth:<pre>function initClock() { </pre><pre>	 let currentTime = new Date('2025-11-27T21:20:01'); // replace with new Date() </pre><pre>	 function updateClock() { </pre><pre>	 currentTime.setSeconds(currentTime.getSeconds() + 1); </pre><pre>	 document.getElementById('clock').textContent = </pre><pre>	 currentTime.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' }); </pre><pre>	 } </pre><pre>	 updateClock(); </pre><pre>	 setInterval(updateClock, 1000); </pre><pre>} </pre>When a temperature or humidity message arrives over the socket, the value is appended to a rolling Chart.js graph. The chart keeps the last 60 readings and drops the oldest when new ones arrive, so it always shows a recent window of activity:<pre>socket.on('temperature', (msg) =&gt; </pre><pre>	 renderChartData(temperatureLive, msg, document.getElementById('temp-value'), '°C')); </pre><pre>	 </pre><pre>socket.on('humidity', (msg) =&gt; </pre><pre>	 renderChartData(humidityLive, msg, document.getElementById('hum-value'), '%')); </pre><pre> </pre><pre>When a vision_detection message arrives, the label is displayed in the greeting overlay for five seconds before fading out: </pre><pre>socket.on('vision_detection', (msg) =&gt; { </pre><pre>	 const box = document.getElementById('greeting-box'); </pre><pre>	 if (!box || !msg?.label) return; </pre><pre>	 box.textContent = `AI detection: ${msg.label.charAt(0).toUpperCase() + msg.label.slice(1)}`; </pre><pre>	 box.classList.add('greeting-visible'); </pre><pre>	 setTimeout(() =&gt; box.classList.remove('greeting-visible'), 5000); </pre><pre>}); </pre>Taking It Further<ol><li>The following additions each require one extra Brick and a small number of Python lines.</li><li>Live weather data: add the Weather Forecast Brick and replace the static get_forecast() function with a live call to open-meteo.com</li><li>Voice output: add the Text-to-Speech Brick and pass a string to it each time the detection callback fires</li><li>Enclosure: 3D print a rear panel to conceal the boards and cable runs</li></ol></body></html>

Build a smart mirror with an Arduino UNO Q

A smart mirror built with the Arduino UNO Q. It shows the time, calendar, to-do list, room temperature and humidity, and weather forecast — all behind a two-way glass panel.