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.

[StephaneB]

Merci @guim31 . Ça devient très ressemblant.

Le json correspondant : ma-maison.house.json - pCloud

Quelques retours :

• La taille d’une terrasse fait 0,40x0,20 au minimum, et elle évolue par pas de 0,25. Donc pas possible de faire une terrasse de 3,0x4,0 et de l’aligner correctement sur les rectangles du bâtiment. Possible d’avoir une taille de base de 0,25x0,25 ?
• Je ne comprends pas comment se définit le champ ‹ position › d’un objet le long d’un mur (une fenêtre, une porte,…). La valeur ‹ 0 › devrait intuitivement correspondre à l’angle qui débute le mur. Ou éventuellement à l’objet le plus proche. Mais c’est pas ça…
• Le renfoncement pour une porte fonctionne bien. Mais idéalement il faudrait pouvoir définir que le renfoncement du mur est plus large que la porte. Chez moi par exemple, c’est 80 cm de chaque côté…
• Dans les éléments extérieurs, ce serait possible d’avoir un élément ‹ escalier ›, et idéalement qu’il ’ creuse ’ la terrasse ? Histoire que je puisse descendre de ma terrasse Bon, c’est vraiment un détail, pas grave si pas possible…
• Il y a certaines orientations où la vue isométrique n’est pas correcte :

Là c’est bon :

Là c’est pas bon :

[guim31]

Merci pour ton retour, bon là je vais devoir attendre quelques heures que mes crédits Claude reviennent ^^ mais je vais regarder ça.

Pour l’ajout des escaliers c’est une bonne idée, pour le fait de devoir « creuser » une terrasse je pense qu´on risque de partir dans un truc trop complexe.

Pour le reste j’attend que mon ouvrier préféré ait récupéré des points de vie pour te répondre

[guim31]

J’ai fait des modifs, tout est en ligne, tu peux recharger la page.

**La vue isométrique fausse. (terrasse transparente) ** : une terrasse
surélevée n’entrait pas dans le tri exact des faces, et tes quatre terrasses,
coplanaires et de même dallage, fusionnaient en une seule surface enveloppant
la maison, à la fois devant un mur et derrière un autre. Corrigé.

Taille des terrasses. Les pas sont passés à 0,25 : tout tombe maintenant sur des quarts de mètre ronds.

Le champ « position ». Il affiche maintenant la distance depuis l’angle du mur jusqu’au bord de l’ouverture, sur le pan entier. Tes fichiers existants s’ouvrent inchangés, seule la lecture
change.

Renfoncement plus large que la porte. Fait. Une fois le renfoncement posé,
deux réglages apparaissent : « Débord latéral » et « Débord en tête ». Tes 80 cm
de chaque côté sont faisables ; le battant et son dormant gardent la taille de
la porte.

Escalier. Ajouté dans les extérieurs. Posé au pied d’une terrasse
surélevée, il prend sa hauteur et se tourne vers elle tout seul, environ 18 cm
par marche. Il se pose contre la terrasse sans la creuser — comme je te le
disais, creuser une dalle avec une autre nous emmènerait bien plus loin, et
visuellement ça se tient très bien.

Tu me dis si c’est mieux ?