All projects

Personal project // home automation + local AI

Case study

Français

J.A.R.V.I.S

Home HUD // one file, all local

Interface
Motion design FUI / HUD Canvas 2D Animated SVG Three.js / WebGL Data visualisation CSS Grid Responsive Offline PWA One file, no build
Local AI
Ollama Gemma 4 · 26B Function calling Server-Sent Events Qwen3-TTS 0.6B MLX / mlx-audio Apple Silicon
Infra & devices
Python / Flask nginx Docker systemd Raspberry Pi Home Assistant Zigbee / ZHA Matter / Thread MQTT Linky meter feed 3D printing
The J.A.R.V.I.S dashboard running, with the telemetry panels, the 3D wireframe model in the middle and the power band at the bottom.
The dashboard running.
OVERVIEW

The whole house on one screen, driven by voice

Temperatures, lights, heating, cameras, 3D printer and electricity meter all report to the same place. The devices at home do not speak the same language, and I still wanted to see them together, without changing screens.

The visual language comes from the work of Territory Studio on the Marvel films. Corner brackets, segmented bars, tight monospace, sweeps of light.

81
devices gathered on one screen
6
readings on the same chart
~5 s
to answer out loud
VOICE SYNTHESIS

Every morning, the day summed up out loud

The briefing does not exist before I ask for it. It is written at 8 am from the weather, the markets and the morning news. A voice cloned from the French voice of J.A.R.V.I.S speaks it.

Morning briefing 08:00 // local voice
0:00

Bonjour, monsieur. Il est 8 h, nous sommes le mardi 4 août.

Le ciel restera dégagé sur l'ensemble de la journée, 24 °C en pointe, avec un indice UV de 7 en début d'après-midi. Le parapluie restera au placard.

Côté marchés, l'indice parisien gagne 0,4 %, le Nasdaq recule de 0,2 %.

Deux sujets retiennent l'attention dans l'actualité technologique. Nos amis de chez Mistral ont dévoilé Robostral Navigate, leur premier modèle dédié à la navigation des robots, et la justice européenne a confirmé l'amende record de quatre milliards d'euros infligée à Google.

Ce sera tout, monsieur. Je vous souhaite une excellente journée.

ELECTRICITY READING

Using power is fine, using less is better

The bottom band answers two questions, am I close to tripping the meter, and how much the day has cost me so far. The curve behind it shows the last twenty-four hours, to place the present moment.

The power band, with the load gauge, the segmented bar, the draw curve over twenty-four hours and the instant consumption.
The power band, at the foot of the dashboard.
ROOM SENSORS

Six readings on the same drawing

Temperatures, humidity, the gap from one room to the next, air quality. None of it is measured the same way, and I wanted to read it all in one place.

Full screen view of the sensor history, six series stacked over twenty-four hours, with the temperatures and humidity of two rooms, the gap between them, the carbon dioxide and the fine particles.
The sensor history, opened full screen over 24 hours of readings.
CENTRAL PANEL

One panel, 5 views to choose from

The frame never moves, only its content changes. I switch from one view to another with a click, and the rest of the dashboard keeps running.

The central panel showing a network of particles animated in three dimensions.

Neural Core

The resting state. Particles that react to the voice and fill the wait while the answer is being prepared.
The central panel showing a wireframe globe of the Earth with event markers.

World Monitor

A globe where each dot is a news item, placed where it happens, and whose colour tells the severity.
The central panel showing a holographic model of Lyon in three dimensions.

Lyon Holographic

The city in volume, building by building, with its relief, the Rhône, the Saône and their bridges.
The central panel showing the 3D printer in wireframe with the progress of the print.

Fabrication Bay

The printer redrawn on screen and synced to the real one. The head moves at the same time as it does, and the progress and the time left arrive live.
The central panel showing a double layer wireframe armour model, surrounded by orbiting rings.

Core Systems

The armour model, set on the map of the home network, where every device found takes its place.

Contact

Clément Delaruelle

Usage

Non-commercial use. I built J.A.R.V.I.S for myself. The code, the visual language and the screenshots are not offered for sale, for licence, or for commercial reuse. Not by me, and not by anyone else. Any reuse requires my written agreement.

Credits

No connection with Marvel or with Territory Studio. The visual language pays tribute to their work on fictional interfaces for cinema. The character and company names taken from those films belong to their owners.