Isometric House Builder — draw your house for the « House View » widget

[guim31]

Isometric House Builder — draw your house for the « House View » widget

The House View widget in Gladys v5 offers four ready-made illustrations and, above all, your own image, on which you then place your device stickers. I wanted mine, with my real footprint, my real roof, and my gate — so I made a little tool for that.

Open the tool · Getting Started Guide

Nothing to install, everything happens in the browser, it’s free and open-source (MIT).

---

What it does

• You draw the footprint on the plan, on a 1 m or 0.50 m grid — each wall section displays its length, so you can match the real dimensions.
• Roof: hip, two slopes, lean-to, flat roof, with adjustable pitch and overhang. The valleys between two wings are calculated.
• Openings: windows, shutters, doors, garage doors, placed with a click on any wall.
• Multiple building bodies: the garden shed has its flat roof and cladding while the house keeps its tiles.
• Surroundings: pool, terrace, driveway, hedges, trees, car — and wall + gate/gate, the gate automatically opening the wall where you place it.
• Materials: tiles, pan-tiled tiles, slate, steel tray, brick, cladding, stone, timber framing.
• Free camera: you rotate the house with the mouse at 360°, from a low angle to almost vertical.

Most useful for a dashboard

An overview isn’t very useful for controlling one device: the gate is a few pixels. You can therefore frame a drawn area — what is outside disappears, what crosses it is cut cleanly, and the camera adjusts to what remains. One house, as many images as widgets.

Each framing is saved as a named view, and a button exports them all at once when the house changes.

There is also a night mode, with the windows lit.

To integrate well

Three settings that make all the difference:

1. Keep the « Horizons » palette (the default one): it takes the exact colors of Gladys v5’s illustrations.
2. Export as PNG, transparent background, size Gladys — 2560 × 1600. (Gladys reduces any image to 2560 px on the longest side: exporting at 4× gives a less sharp image, not more.)
3. In Gladys: House View widget → upload the image → click on it to place your stickers.

Privacy

No network requests, no account, no audience measurement: your project stays in your browser’s local storage. The Save button produces a .house.json file that you keep to yourself.

The only exception to know: the Share button copies a link that contains the entire project in its address. It’s made to send your house to someone — it’s not the link to share if you don’t want to show yours.

---

What it is not

I don’t plan to make it an ultra-pushed modeling tool or a realistic render. The goal is modest and assumed: to produce a nice isometric illustration, recognizable, that integrates properly into a dashboard. No photographic textures, no interiors, no sloping terrain.

On the other hand, feedback on bugs is very welcome. I’ve already fixed quite a few by using it on my own house, but your houses don’t look like mine — gables, single-slope roofs, U-shapes, large overhangs: there are surely cases that don’t render well.

If you encounter something strange, the most effective way is to:

1. click Save to retrieve your .house.json file,
2. take a screenshot of what’s wrong,
3. and open an issue here: Issues · guim31/isometric-house-builder · GitHub

With the file, the bug is reproducible in a few seconds — without it, it’s a guessing game.

Happy drawing

[Will_71]

Awesome, I love the idea.

[StephaneB]

Great idea, @guim31! I’ll test it right away…

[StephaneB]

I had a lot of fun, and here’s what I ended up with (without over-polishing…):

The three things I couldn’t do:

1. I tested building at 2 or 3 levels. But I need something in between, because my house has a third floor where the roof already starts. It would be great if the tool allowed defining the height of each floor separately.
2. My house is a simple rectangle, except where marked ‹ 2 ›: this French window is in a recess (see image at the end of the message). I saw in the tool how to remove ‹ blocks ›, but it would be great to be able to do this on certain floors and not others.
3. And finally, the issue of the non-flat terrain: I access the garage on the lower floor, but then my land and terrace are at the level of the second floor. In the tool, it would be great if we could define a ‹ terrace › element with a higher elevation. The maximum is 1.20, and I would like to be able to define 2.50 (the height of the floor).

But it’s cool, anyway!!

My ‹ recess › for the French window:

[guim31]

Thanks for your feedback!
I’ll let you know if I can integrate these things

[guim31]

@StephaneB, the three points are addressed — reload the page to get the latest version.

1. The Floors — As soon as a body has more than one floor, the Body panel now offers a height per level. Your « in-between » is the attic floor: two full levels + a last low level (e.g., 2.50 / 2.50 / 1.20 m), and the roof starts on top of it.

2. The Recess (but differently) — I didn’t make a different footprint per floor: that would affect the core of the tool (the roof, the gables, the walls depend on it), for a rare case. Instead, each opening has a Recess setting (up to 80 cm): the French window is recessed into the wall, with the floor continuing above — it’s exactly your sketch. And it’s real geometry: the niche has its jambs and lintel, which shade correctly from all angles.

3. The Terrace — The elevation now goes up to 3 m. Sloped terrain: terrace at the level of the floor, garage opening below. (The terrain itself remains flat, that’s intentional )

To save you time, here’s a file that recreates your house as I understood it — three levels including one attic, the recessed French window, the skylights, the high terrace. Open it with the Open… button and adjust:

maison-de-stephane.house.json (right-click → save as)

If something doesn’t render well, send me your .house.json file (Save button) — that’s what allows me to reproduce it in a few seconds.