August 17, 2026

3D Room "Dashboard"

I am looking at a way to control my space through a virtual renderring of said space- lots of projects out there on those lines.. many give off the looks like a spreadsheet that moved in rent-free. Rows of toggles, a graph nobody reads, an icon of a lightbulb that could be any of the six lightbulbs in the room. Meanwhile the dream has always been obvious: show me my actual room, let me tap the actual lamp, and make the picture change when the real light does.

Turns out you can build exactly that in an afternoon, with zero coding, using a phone, two free apps, and Claude doing the parts that used to require a nerd certification. You tap the lamp in the photo, the real lamp toggles, and the image updates to match. It genuinely feels like witchcraft the first time.

This is the full walkthrough, start to finish.

What you need

Home Assistant already running, on an install type that supports add-ons (Home Assistant OS on a mini PC, old laptop, or Pi). Your smart lights already set up in it.
Magicplan — free app that turns your phone into a room scanner.
Live Home 3D — free interior design app for Mac and Windows. The site will shove the paid version at you like a mall kiosk. Keep scrolling; the free one is there and it's all you need.
Claude — fixes a broken file export for us, then builds the whole dashboard. The building part uses Claude Code, the terminal version that can actually touch files. If a terminal makes you nervous: it's one install and you talk to it in plain English.
Google Gemini — free, and for one specific step (recolouring images) it's the best tool on the planet right now. Claude can't generate images, and I gear everything to the best tool for the job, not the fanboy option.
A Mac or Windows PC on the same network as Home Assistant.

How it fits together

The short version: your phone captures the room's bones, a free design app makes it pretty, you photograph the 3D model in every lighting state, and Claude wires those photos to your real lights. No YAML written by hand. No coding. The only genuinely fiddly part is discipline with a virtual camera, and I'll nag you about it at the right moment.

Step 1 — Scan the room with Magicplan

Install Magicplan (free, iOS and Android). On an iPhone you literally walk the room and it measures as you go. On Android, create a room point-by-point and type in each wall's measurement — five minutes with a tape measure.

Don't add details like funiture.. no side table...no lamp....no curtain...no details... This saves you.. saves you grief later: walls, doors, and windows only. Can't stress.. Do not add furniture. Do not add your sofa. Magicplan is only here for the skeleton — furniture is Live Home 3D's job, and anything you add now just pollutes the import. Doors and windows go in via the 2D view: Insert object, search "door", drop it in place.

When the shell looks right: 3D model settings → tick OBJ → Done → tap 3D model. It exports three files. You want the USDZ one, and only that one. AirDrop or email it to your computer.

Step 2 — Fix the scale with Claude

Magicplan's export has a quirk: it comes out at one tenth of real size, so importing it straight into Live Home 3D gives you a dollhouse. Instead of fighting export settings, hand the file to Claude and let it repair the geometry properly — scale it up, sit it on the ground plane, and keep the floors separated so they can be textured individually later.

Go to claude.ai, attach the USDZ, and paste this. Swap in your real room dimensions — that line is your proof the fix actually worked:

I've attached a USDZ room scan exported from Magicplan. It imports into
Live Home 3D at one tenth of real size. Using Python (the usd-core
package reads and writes USD files), give me back a corrected .usdz:

1. Scale the whole scene by exactly 10x.
2. Ground the model so its lowest point sits at Y = 0.
3. If there are separate, disconnected floor regions, keep them as
   separate meshes with their original triangles, UVs and normals,
   and give each floor its own material binding.
4. Print the scene's bounding box in metres before and after. My room
   is roughly ROOM_WIDTH x ROOM_LENGTH metres - confirm the result
   matches before you hand the file back.

If any part of the file can't be processed, say exactly what failed
instead of returning a guess.

Claude runs actual Python on the file and gives you a corrected USDZ to download. If your plan doesn't have file tools, or the file's too big, do it locally with Claude Code: open a terminal in the folder with the file, type claude, paste the same prompt. Same result, no upload limits — and you'll want Claude Code installed for step 6 anyway.

Step 3 — Decorate in Live Home 3D

Import the corrected file: File → Import, pick the USDZ, leave every import setting exactly as it is, hit Import. Your room appears at proper size. Now make it look like your room:

Learn the two views. 2D plan view is where you select, add, delete and position things — some objects can only be clicked there. 3D view is for looking. You'll bounce between them constantly.
Delete import junk. Stray door frames from Magicplan: 2D view, click the thing — clicking repeatedly cycles through overlapping objects until the right one is selected — then Backspace.
Furnish from two tabs. Furniture (drag items in) and Materials (search wallpaper, laminate, glass — drag it onto a surface). That's the whole interface, honestly.
The aspect-ratio trap. Before resizing anything in the Inspector, untick "Maintain aspect ratio" — otherwise widening a door scales it into a monument. Elevation in the same panel rescues items that spawn half-sunk into the floor.
Place your lights where the real ones are. Search for fixtures that resemble yours, set their elevation, duplicate identical ones with Ctrl/Cmd+C, V. Change finishes via Materials — search "silver", drag it onto the fixture.

Perfection is not the goal. "Close enough that you recognise it instantly" is the goal. Bonus: you now also own a planning tool for the next furniture purchase — drag a wardrobe in and see the fit before the flat-pack regret.

Last thing: click the sun icon, set Time of day to night, and tune each light's luminosity until on-versus-off visibly changes the room. Daytime renders make light states invisible, and the night-dark base image is also what makes the dashboard trick in step 6 work at all.

Step 4 — Screenshot every light state

This is the discipline part. The dashboard works by swapping images in place, so every shot must line up pixel-for-pixel.

The ritual, for every single capture:

Pick one camera angle where every light is visible and comfortably tappable. Never move the camera again. Not a nudge. A misaligned shot shows up later as the room "jumping" when a light toggles.
Click Select, then click empty space — kills the green selection box.
Click Walk — hides the navigation widget.
Screenshot. Mac: Cmd+Shift+3 (or Cmd+Shift+4 dragging the same region every time). Windows: Win+Shift+S.

Capture: all lights off, all lights on, and one shot per light with only that light on. A green box or a nav widget baked into a shot means retaking it, so do the ritual every time.

Step 5 — Colour variants with Gemini

If your lights are plain on/off bulbs, skip this step entirely — your Live Home 3D renders already cover every state, and real renders beat AI edits every time. This step only exists for colour and colour-temperature bulbs, because the free version of Live Home 3D gives you brightness but not tinting.

Claude doesn't generate images, and pretending otherwise helps nobody. The right tool here is Gemini's image editing (free — the model the internet knows as Nano Banana), which is unreasonably good at "change one thing, touch nothing else". Upload a single-light-on render and go, one edit at a time:

Use the attached render as the exact base image. Keep the camera angle,
geometry, furniture and every other pixel identical. Change one thing
only: make the CORNER FLOOR LAMP glow DEEP RED, with its light
realistically tinting the nearby wall and floor. Do not move, add,
remove or restyle anything else. Same resolution as the input.

Repeat per light, per colour: red, green, blue, warm white, cool white — whatever your bulbs actually do. Inspect each result against the base before keeping it; image models occasionally redecorate when nobody's watching. Name the files as you save them: light.corner_lamp_red.png, light.corner_lamp_warm.png, and so on — entity ID first, state after. Future-you and step 6 both thank you.

Step 5½ — The manifest

The dashboard builder needs to know which blob of pixels is which real light. In Home Assistant: Settings → Devices & Services → Entities, filter by "light", and copy each light's entity ID — the light.corner_lamp string, not the friendly name.

Open one screenshot in any editor — Paint, Preview, a crayon and a scanner, no judgement — and write each entity ID next to its light. Save it as manifest.png. Thirty seconds of scribbling that replaces an hour of "which lamp is lamp_2".

Step 6a — Get the files into Home Assistant

In Home Assistant: Settings → Add-ons → Add-on Store, install Samba share, give it a username and password on the Configuration tab (leave workgroup as workgroup), and start it. Your HA folders are now on the network.

On a Mac, Finder → Cmd+K:

smb://homeassistant.local

(Windows: \\HOMEASSISTANT in Explorer.) Log in with the Samba credentials, open the config share, and put every image — all the renders, the colour variants, manifest.png — into www/room3d/. Create the folders if they don't exist.

Step 6b — Let Claude Code build the dashboard

Back up first. Settings → System → Backups → Create backup. You're about to let an AI write into your Home Assistant config. Claude Code asks before touching files and the prompt below fences it in hard, but the golden rule of smart homes is: the one time you skip the backup is the one time you needed it.

Now the payoff. With the Samba share still mounted, open a terminal in that mounted config folder (Mac: Finder → right-click the folder → Services → New Terminal at Folder), run claude, and paste:

You are working inside my Home Assistant config folder (this directory).
In www/room3d/ there are night renders of my living room: all-off.png
(base), all-on.png, one render per individual light, colour variants
named <entity_id>_<state>.png, and manifest.png which labels every
light with its Home Assistant entity ID.

Build me a dashboard:

1. Create dashboards/room3d.yaml as a YAML-mode dashboard built on a
   picture-elements card.
2. Use the all-off render as the base image. Show each light's render
   as a conditional image element stacked on top with CSS
   mix-blend-mode: lighten, so any combination of lit lights displays
   correctly against the dark base.
3. For every light in manifest.png, add an invisible tap area
   positioned over that light which calls light.toggle on its
   entity ID.
4. Reference all images as /local/room3d/... paths.
5. Register the dashboard in configuration.yaml under lovelace:
   (mode: yaml, title: "3D Room") and change nothing else in that
   file.
6. Do not touch existing dashboards, automations or any other config.
   If anything is ambiguous, ask me before writing.

When you're done, list every file you created or changed and tell me
exactly what to click in Home Assistant to see the result.

Claude reads your manifest, positions the tap zones, writes the YAML, and reports back. Restart Home Assistant (Developer tools → Restart), open the new "3D Room" dashboard, and tap your lamp. The real one obeys. Allow yourself the grin.

Step 7 — Make it yours

The best part of building it this way: extending it is a sentence, not a project. Back in Claude Code:

On the 3D Room dashboard, add a tap area over the TV that runs
scene.movie_night. The TV sits just below the ceiling light's existing
tap target - make sure the two zones don't overlap.

Tap the TV in the render, the room goes into movie mode. Blinds, thermostat, the kettle if you've been reading this blog long enough — anything with an entity ID can live in the picture.

Gotchas

Dollhouse on import? You skipped step 2, or used the original USDZ instead of Claude's corrected one.
Room "jumps" when toggling? The camera moved between screenshots. There's no fix except retaking the set. I did warn you. Twice.
Green box or nav widget in a shot? Baked in forever. Retake that shot with the ritual.
Giant door? "Maintain aspect ratio" was ticked. It's always that.
Images not loading in the dashboard? The www folder is served at /local/, and a brand-new www folder needs one Home Assistant restart to register.
AI variant looks subtly wrong? Reject and regenerate. One insistent re-prompt usually lands it; a drifted render will bug you every day at eye level.

Sources