Isometric House Builder — dessinez votre maison pour le widget « Vue de la maison »

[guim31]

Isometric House Builder — dessinez votre maison pour le widget « Vue de la maison »

Le widget Vue de la maison de Gladys v5 propose quatre illustrations toutes faites, et accepte surtout votre propre image, sur laquelle vous posez ensuite vos pastilles d’appareils. Je voulais la mienne, avec ma vraie emprise, mon vrai toit et mon portail — alors j’ai fait un petit outil pour ça.

Ouvrir l’outil · Guide de prise en main

Rien à installer, tout se passe dans le navigateur, c’est gratuit et libre (MIT).

---

Ce que ça fait

• On dessine l’emprise au plan, sur une trame de 1 m ou 0,50 m — chaque pan de mur affiche sa longueur, donc on peut caler les vraies dimensions.
• Toiture : croupe, deux pans, appentis, toit plat, avec inclinaison et débord réglables. Les noues entre deux ailes sont calculées.
• Ouvertures : fenêtres, volets, portes, porte de garage, posées au clic sur n’importe quel mur.
• Plusieurs corps de bâtiment : l’abri de jardin a son toit plat et son bardage pendant que la maison garde ses tuiles.
• Abords : piscine, terrasse, allée, haies, arbres, voiture — et muret + portail/portillon, le portail ouvrant automatiquement le muret là où on le pose.
• Matières : tuiles, tuiles canal panachées, ardoise, bac acier, brique, bardage, pierre, colombages.
• Caméra libre : on fait tourner la maison à la souris sur 360°, de la vue rasante à la quasi-verticale.

Le plus utile pour un tableau de bord

Une vue d’ensemble ne sert pas à grand-chose pour piloter un appareil : le portail fait quelques pixels. On peut donc cadrer sur une zone dessinée au plan — ce qui est en dehors disparaît, ce qui la traverse est coupé net, et la caméra ajuste sur ce qui reste. Une maison, autant d’images que de widgets.

Chaque cadrage se garde comme vue nommée, et un bouton les réexporte toutes d’un coup quand la maison change.

Il y a aussi un mode nuit, avec les fenêtres allumées.

Pour que ça s’intègre bien

Trois réglages qui font toute la différence :

1. Gardez la palette « Horizons » (celle par défaut) : elle reprend les couleurs exactes des illustrations de Gladys v5.
2. Exportez en PNG, fond transparent, taille Gladys — 2560 × 1600. (Gladys ramène toute image à 2560 px de grand côté : exporter en 4× donne une image moins nette, pas plus.)
3. Dans Gladys : widget Vue de la maison → téléversez l’image → cliquez dessus pour poser vos pastilles.

Vie privée

Aucune requête réseau, aucun compte, aucune mesure d’audience : votre projet reste dans le stockage local de votre navigateur. Le bouton Enregistrer produit un fichier .house.json que vous gardez chez vous.

Seule exception à connaître : le bouton Partager copie un lien qui contient tout le projet dans son adresse. C’est fait pour envoyer sa maison à quelqu’un — ce n’est pas le lien à diffuser si vous ne voulez pas montrer la vôtre.

---

Ce que ce n’est pas

Je ne compte pas en faire un outil de modélisation ultra poussé ni un rendu réaliste. L’objectif est modeste et assumé : produire une jolie illustration isométrique, reconnaissable, qui s’intègre proprement à un tableau de bord. Pas de textures photographiques, pas d’intérieurs, pas de terrain en pente.

En revanche, les retours sur les bugs sont très bienvenus. J’en ai déjà corrigé un bon nombre en l’utilisant sur ma propre maison, mais vos maisons ne ressemblent pas à la mienne — pignons, toits à un seul pan, formes en U, grands débords : il reste sûrement des cas qui rendent mal.

Si vous tombez sur quelque chose d’étrange, le plus efficace est de :

1. cliquer Enregistrer pour récupérer votre fichier .house.json,
2. faire une capture de ce qui cloche,
3. et ouvrir une issue ici : Issues · guim31/isometric-house-builder · GitHub

Avec le fichier, le défaut est reproductible en quelques secondes — sans lui, c’est de la devinette.

Bon dessin

[Will_71]

Génial j’adore l’idée.

[StephaneB]

Super idée, @guim31 ! Je vais vite tester…

[StephaneB]

Je me suis bien amusé, et j’arrive à ça (sans trop fignoler…) :

Les 3 choses que je n’ai pas pu faire :

1. J’ai testé la construction à 2 ou 3 étages. Mais il me faudrait un entre-deux, car ma maison à un 3ème étage dans lequel le toit débute déjà. Il faudrait dans l’outil pouvoir définir séparément la hauteur des étages
2. Ma maison est un simple rectangle, sauf à l’endroit marqué ‹ 2 › : cette porte-fenêtre est dans un renfoncement (cf visuel en fin de message). J’ai bien vu dans l’outil comment retirer des ’ cases ', mais il faudrait pouvoir le faire à certains étages et pas à d’autres
3. Et enfin le souci du terrain qui n’est pas plat : j’accède au garage à l’étage inférieur, mais ensuite mon terrain et ma terrasse est au niveau du deuxième étage. Dans l’outil, ça m’irait si on pouvait définir un élément ‹ terrasse › avec une élévation plus grande. Le max est à 1.20, et je voudrais pouvoir définir 2.50 (la hauteur de l’étage)

Mais c’est cool, en tout cas !!

Mon ’ renfoncement ’ de la porte-fenêtre :

[guim31]

Merci pour ton retour !
Je te dis si je peux intégrer ces choses là

[guim31]

@StephaneB , les trois points sont traités — recharge la page pour avoir la dernière version.

1. Les étages — Dès qu’un corps a plus d’un étage, le panneau Corps propose maintenant une hauteur par niveau. Ton « entre-deux », c’est l’étage sous combles : deux niveaux pleins + un dernier niveau bas (par ex. 2,50 / 2,50 / 1,20 m), et le toit démarre dessus.

2. Le renfoncement (mais autrement) — Je n’ai pas fait d’emprise différente par étage : ça toucherait tout le cœur de l’outil (le toit, les pignons, les murs en dépendent), pour un cas rare. À la place, chaque ouverture a un réglage Renfoncement (jusqu’à 80 cm) : la porte-fenêtre se creuse dans le mur, avec l’étage qui continue au-dessus — c’est exactement ton croquis. Et c’est de la vraie géométrie : la niche a ses tableaux et son linteau, qui s’ombrent correctement sous tous les angles.

3. La terrasse — L’élévation monte maintenant jusqu’à 3 m. Terrain en pente : terrasse au niveau de l’étage, garage qui s’ouvre dessous. (Le terrain lui-même reste plat, ça c’est assumé )

Pour te faire gagner du temps, voici un fichier qui reprend ta maison telle que je l’ai comprise — trois niveaux dont un sous combles, la porte-fenêtre en retrait, les velux, la terrasse haute. Ouvre-le avec le bouton Ouvrir… et ajuste :

maison-de-stephane.house.json (clic droit → enregistrer sous)

Si un truc rend mal, renvoie-moi ton fichier .house.json (bouton Enregistrer) — c’est ce qui permet de reproduire en quelques secondes.