Tectum/README.md

Tectum — configurator Van Emous Mantelzorgwoningen (intern)

Losse, meerdere-bestanden-opzet van de eerdere single-file wand-tool, nu met een menubalk om tussen objecttypen (muur/vloer) te schakelen.

Copyright © 2026 Machiel Heinen. Alle rechten voorbehouden; gebruik uitsluitend met schriftelijke toestemming. Zie LICENTIE.md. Elk bronbestand begint met deze copyright-kop.

Draaien

Tectum draait via een (lokale) webserver; direct openen via file:// wordt niet meer ondersteund (texturen/lucht laden dan niet, de app toont een melding).

./start.sh            # of: python3 -m http.server 8000

en open http://localhost:8000. Elke statische webserver volstaat (geen build-stap; gewone <script src>-tags, geen ES-modules).

Structuur

index.html              app-shell: menubalk, splashscreen, over-deze-software
css/
  app.css               alle stijl, in één bestand
js/
  vendor/
    three.min.js          three.js r128, lokaal gevendord (geen CDN meer)
    OrbitControls.js       eigen, compacte OrbitControls-vervanging (zie
                            "Bewuste keuzes" hieronder) — leunt op three.min.js
  core/
    geometry.js          gedeelde, pure functies (regelwerk-verdeling,
                          polygon-oppervlaktes, clip-functies) — gebruikt
                          door zowel wall.js als floor.js, niet gedupliceerd
    canvas-labels.js     gedeelde stijl voor maatlabels ("X: 6000mm") in de
                          2D-canvassen van wand, vloer en unit
    pdf-sheet.js         gedeelde PDF-bouwstenen: titelblok, maatlijn, tabel
    camera-memory.js     onthoudt de 3D-camerastand per tabblad + onderdeel
    view-filter.js       "Weergave"-dropdown met vinkjes voor de 3D-weergaven
    license.js           licentietekst voor "Over deze software" (kopie van
                          LICENTIE.md, dat bestand is leidend)
    logo-data.js         logo als PNG-data voor de PDF-titelblokken
                          (opnieuw genereren uit assets/logo.svg, zie kop)
  wall/
    wall-model.js         WallModel: ENIGE bron van de wand-logica (anker-
                           resolutie openingen, regelwerk, 3D-opbouw, specs,
                           validatie) — geen DOM
    wall-pdf.js           WallPdf: het wand-tekenblad (aanzicht, boven- en
                           zijaanzicht, materiaallijst) — losse wand én unit
    wall.js               wand-editor (UI: invoer, 2D, interactie, JSON/PDF)
  floor/
    floor-model.js        FloorModel: ENIGE bron van de vloer-logica (balken,
                           doorvoeren, chassis, 3D-opbouw, specs, validatie)
    floor-pdf.js          FloorPdf: het vloer-tekenblad — losse vloer én unit
    floor.js               vloer-editor (UI, uitsluitend cirkelvormige
                            openingen/doorvoeren)
  roof/
    roof-model.js         RoofModel: plat dak = vloer (FloorModel) 180°
                           gespiegeld + dakleer; dakrand (boeidelen met spots
                           of daktrim) als één doorlopende rand om de woning
  lighting/
    lighting-model.js     LightingModel: buitenverlichting per unit (geen /
                           boeideel-spots / gevellampen), gevellampen per
                           wandstuk met terugval naar spots, override per wand
  unit/
    unit-model.js         UnitModel: 1 vloer + 4 wanden, hoekaansluiting,
                           naden (wand vervalt deels/geheel) en wandstukken
  house/
    house-model.js        HouseModel: woning = gekoppelde units + binnenwanden;
                           posities (koppelen aan zijde + uitlijning), naden,
                           totalen
    house-pdf.js          HousePdf: samenhangende PDF (plattegrond, per unit
                           vloer + wandstukken, binnenwanden, totalen)
    house.js              woning-editor (UI): navigatieboom, plattegrond met
                           selecteren/binnenwand tekenen, eigenschappen, 3D;
                           mount de echte wand-/vloer-editor per onderdeel
  app.js                  menubalk-logica, versienummer, mount/unmount van
                          de actieve editor
json/
  defaults/               referentie-JSON's die tonen wat "Nieuw" oplevert
                          (worden NIET ingeladen via fetch(), zie hieronder)
  premade/                bestemmingsmap voor opgeslagen/geëxporteerde designs
assets/                  logo (preloader) + bestemmingsmap voor toekomstige
                         GLB's/texturen

Bewuste keuzes / bekende beperkingen

• Volledig CDN-vrij. three.js (r128) staat lokaal in js/vendor/three.min.js. OrbitControls is een eigen, compacte implementatie (js/vendor/OrbitControls.js) — het originele addon-bestand was niet beschikbaar om te vendoren, dus is de gebruikte subset (roteren via slepen, zoomen via scrollwiel, pannen via rechts-slepen, target/update()) opnieuw geschreven en losstaand getest (rotatie/zoom-richting/grenzen/pannen/dispose). Functioneel gelijkwaardig voor wat deze tool nodig heeft, maar geen 1-op-1 kopie van alle opties van de officiële addon (bijv. geen damping/inertia).
• Geen ES-modules. Alle JS-bestanden zijn gewone <script>-tags, geladen in een vaste volgorde (geometry.js → canvas-labels.js → jsPDF → pdf-sheet.js → wall-model.js → wall-pdf.js → floor-model.js → floor-pdf.js → roof-model.js → lighting-model.js → wall.js → floor.js → unit-model.js → house-model.js → house-pdf.js → house.js → app.js). Reden: ES-module-imports (import ... from) breken bij rechtstreeks openen via file:// door browser-CORS-beleid. Dit was expliciet een vereiste ("gewoon via een index file"), dus is hier bewust voor gekozen.
• json/defaults/*.json worden niet gefetcht. Om dezelfde reden (fetch() van lokale bestanden werkt ook niet betrouwbaar via file://): de standaardwaarden van "Nieuw" staan hardcoded in wall.js/floor.js zelf, en komen overeen met deze JSON-bestanden. De JSON's zijn dus referentie/ documentatie, en (voor wanden) een bestand dat je via "Importeer JSON" kan inladen — geen runtime-configuratiebron.
• Alleen wall.js heeft Exporteer/Importeer JSON. floor.js nog niet.
• Floor.js heeft nu dezelfde soorten logica als wall.js. 2D-bovenaanzicht
  • doorsnede, regelwerk (vloerbalken), cirkelvormige doorvoeren, een onderlaag van OSB-plaat (standaard 22mm, dikte + oppervlak + volume + gewicht), een isolatielaag (leegte tussen de balken, analytisch bepaald — net als bij de wand krijgt isolatie zelf bewust geen dichtheid/gewicht), een volwaardig 3D-perspectief (balken/isolatie/OSB met doorvoer-gaten/ chassis-wielen, met aan/uit-toggles voor OSB en isolatie, plus fullscreen- 2D/3D) en een specificaties-paneel met een gewichtstotaal. Losse, optionele chassis-laag (4 transportwielen in een "dobbelsteen 4"-indeling, exact gecentreerd op de vloer — spoorbreedte/wielbasis/wieldiameter instelbaar, geen interactie met de balkposities).
• Single point of truth wand/vloer/unit. Alle reken- en 3D-logica zit in WallModel/FloorModel. De losse editors én de unit roepen die aan, dus een wijziging in de wand- of vloerlogica geldt automatisch overal. De unit bewaart per onderdeel een gewone wand-/vloer-state; wandbreedtes worden afgeleid uit vloermaat + wanddiktes + hoekaansluiting, openingen houden hun anker (links/midden/rechts). "Opslaan als" bij een unit geeft JSON + één samenhangende PDF: bovenaanzicht unit (U-1), vloer (V-1), elke wand (W-1…W-4, via WallPdf/FloorPdf) en een totalenblad (balken, zaaglijst, glaswol, plaatwerk, gewichten). Projectgegevens van de unit staan in state.project en gelden voor alle bladen.
• Standaarden (WallModel). Muurbalk 38 x 235 mm (stijlen én regels), ingekocht in 3600/4200/4800/5400 mm; een zaagplan (planStockCutting in geometry.js) kiest per staaf de lengte met het minste snijverlies — bij een unit over alle wanden samen. Stukken langer dan 5400 worden opgeknipt. Elke wandkop heeft een dubbele hoekstijl (2 x 38 mm). De app start met een unit.
• Woning (v0.2). Bestand → Nieuw → Woning (1 unit) of Woning L-vorm. Een unit koppel je aan een zijde van een andere unit (uitlijning start/midden/ eind + verschuiving). Op de naad vervalt de wand van beide units over het gedeelde stuk; een wand kan daardoor in meerdere stukken uiteenvallen (bijv. A-W2a/b), haakse wanden lopen dan door tot de vloerrand. Binnen- wanden teken je in de plattegrond (standaard 100 mm, spaanplaat beide zijden) en bewerk je met de gewone wand-editor. Een wandstuk dat aan een naad eindigt loopt de naad in door met de dikte van de haakse buurwand, zodat binnenhoeken (L-vorm) dicht zijn. Zijden heten naar windrichting t.o.v. het bovenaanzicht (boven = noord): voor = noord, achter = zuid, links = west, rechts = oost (intern blijven de oude sleutels). Oude unit-JSON's kunnen in een woning worden geïmporteerd. Units kunnen (nog) niet gedraaid worden.
• UI-opschoning (v0.4.1). Gedeelde UI-kit (js/core/ui-kit.js, window.UI): velden, schakelaars, secties, tabbladen, specificatie-kaarten en iconen (Bootstrap Icons 1.11.3, MIT, lokaal in css/vendor met ingebed lettertype, werkt via file://). Woning-instellingen staan in tabbladen (Algemeen, Gevel, Regelwerk, Dakrand, Verlichting); unit-eigenschappen ook (Afmetingen, Koppeling, Dak). Labels: zelfstandig naamwoord, geen dubbele punt, uitleg in een hint (i-icoon) i.p.v. tussen haakjes. Sneltoets T wisselt in drie stappen: standaard -> 3D groot -> alleen de render -> standaard.
• Omgeving en render (v0.4.5). Knop "Lucht" in elke 3D-werkbalk wisselt geen -> dag -> nacht (core/skybox.js, keuze onthouden). Het panorama (assets/skybox.webp / skybox-night.webp) wordt op de grond geprojecteerd (port van three.js GroundedSkybox); onder het object ligt een ronde tegelvloer (assets/tiles.jpg), groot genoeg voor het hele object, met een witte opstaande rand van 100 x 25 mm. Vloer en rand vangen licht en schaduw. Woning: de tegelvloer ligt op het maaiveld (woning-instelling, standaard 350 mm onder bovenkant vloer). Knop "Render" (camera): lampen en spots als echte lichtbronnen in het gewone daglicht; Nacht: omgevingslicht 15%, lampen altijd aan (100%).
• Mijlpaal v0.4 — gevelopbouw. Samenvatting van de v0.3.11–0.3.19-iteraties: kruislat-latwerk op vochtdoek (richting gevelbekleding globaal), lampen op de afgewerkte gevel (+52 mm), logo-watermerk op het doek, trasraam (cement- gebonden plaat, 350 mm vanaf het loopvlak), sandwichpanelen rondom (600 mm de grond in), hoekdoorloop van de buitenlagen over de hoekstijlen, en latwerk/ doek per doorlopende gevel over unit-naden heen. Details per onderdeel hieronder.
• Plat dak (v0.3). Elke unit heeft een dak (tweede laag) dat standaard de vloermaat volgt, maar een eigen maat/verschuiving mag krijgen. Opbouw = vloer 180° gespiegeld (OSB als plafond onder, balken, dakleer bovenop); het dak wordt bewerkt met de vloer-editor in dakmodus. De dakrand is woning- breed: boeidelen (overstek 200–400 mm vanaf de dakrand = standaard de gevel, 300 mm hoog, spots op 40% van de overstek, op elke (unit-)hoek en daartussen verdeeld met min/max h.o.h.) of een daktrim van 80 mm. De rand loopt als één geheel over de naden tussen units. Het dak ligt op de hoogste wandbovenkant van de unit; bij units met verschillende hoogtes ligt de dakrand op het hoogste dak.
• Dakrand & buitenverlichting (v0.3.3). Boeidelen aan/uit per unit (anders daktrim); de rand wordt per ribbe opgebouwd (in verstek, geen zichtbare naad). Verlichting is woning-breed: type (geen / boeideel-spots / gevellampen), lichtrichting en alle afstanden. Gevellampen worden per GEVEL verdeeld (aansluitende wandstukken in hetzelfde vlak, ook over een naad tussen units), niet per wand: op lamphoogte (standaard 1950) alleen op vrije stukken >= 2000 mm (openingen incl. raamwerk eraf), eerste/laatste 300 mm van hoek/opening, daartussen min/max h.o.h.; smallere stukken krijgen geen lampen. Gevellampen en boeideel-spots sluiten elkaar uit. De min. h.o.h. geldt over alle lampen van een gevel samen (ook bij afstand hoek/ opening en overrides): te dicht bij elkaar = samengevoegd tot één lamp in het midden. Per wandzijde blijft een override: automatisch / 500 mm naast elke opening / geen. Standaard unithoogte 2600 mm.
• 3D-weergave (v0.3.5). Filters als dropdown met vinkjes. Woning: Beplating (wandplaten, vloer- en plafondplaten, dakleer, boeideel/daktrim), Isolatie, Dak, Lampen. "Volle render": avondscène met maaiveld, elke gevellamp (per lichtrichting) en boeideel-spot is een echte SpotLight (zonder schaduwen, om het licht te houden); de nep-lichtkegels zijn dan verborgen.
• Latwerk gevelbekleding (v0.3.11). Bij vochtdoek komt er een kruislat op (WallModel.computeBattens): latten 20x30 mm, handelslengte 4000, 400 mm h.o.h. in beide richtingen, uitgespaard rond openingen en afgekapt op de (schuine) bovenrand. De bovenste laag staat haaks op de gevelbekleding (WEO/Novalit, 12 mm; richting per losse wand, in een woning voorlopig globaal als woning-instelling). Gevellampen hangen op de afgewerkte gevel: wandvlak + kruislat (40) + bekleding (12) = 52 mm naar buiten. Cement-gebonden platen (steenstrips) krijgen geen latwerk. Latten tellen mee in gewicht, specificaties, wand-PDF en woningtotalen; zichtbaar met "Beplating".
• Vochtdoek-bedrukking (v0.3.13). Net als op de echte doeken staat het logo als medium-grijs watermerk (geen kleur) onder 45° op het vochtdoek, 1,5 m breed, herhaald per tegel van 2 m (WallModel.createMaterials, CanvasTexture).
• Trasraam (v0.3.14). Woning-instelling (aan/uit + hoogte, standaard 350 mm vanaf Y=0 van de vloer = het beloopbare vlak / bovenkant vloer). Onderaan elke vochtdoek-gevel komt een strook cement-gebonden plaat (montage- achterkant), vóór het doek; het doek loopt er ongewijzigd achter door en het latwerk begint erboven. Zelfde plaat- en uitsparingslogica als de buitenplaten, dus openingen blijven gerespecteerd (WallModel.trasraamFor, build3D opts.trasraam, computeBattens). Telt mee in gewicht, wand-PDF en de woningtotalen ("Cementplaat (trasraam)").
• Hoekdoorloop buitenlagen (v0.3.18). Een wand die tussen twee doorlopende wanden past, bedekt met zijn buitenlagen ook de kopse kant (hoekstijlen) van die wanden: UnitModel geeft per wand(stuk) skinExt { left, right } (= dikte van de doorlopende wand, 0 bij naden/vrije einden), WallModel.cornerExt telt per laag de eigen diepte erbij. Latwerk en trasraam lopen door; vochtdoek en cementplaat (liggen in de beplatingsruimte) krijgen een strook net vóór het wandvlak.
• Latwerk en doek per gevel (v0.3.19). HouseModel.assignFacades groepeert collineaire, aansluitende buitenwandstukken over alle units tot gevels (groupFacadeRuns in core/geometry.js, ook gebruikt door de buitenverlichting) en geeft elk stuk p.facade { u0, extStart, isEnd }. Het verticale latten-raster (400 h.o.h.) en het watermerk op het doek lopen daardoor over unit-naden door; een eindlat komt alleen aan het einde van de gevel.
• Sandwichpanelen (v0.3.16). Woning-instelling aan/uit. SandwichModel (js/sandwich/sandwich-model.js) legt één doorlopende rand (in verstek) om de vereniging van alle unit-vloeren: 40 mm dik, van het loopvlak (bovenkant vloer) 600 mm naar beneden, de grond in. Plaat 495 x 1000 x 40 (9 kg), verticaal: één plaat per 495 mm gevel, 1000 afgezaagd op 600. Naden per 495 mm; zichtbaar met "Beplating"; m2, aantal platen en gewicht (hele platen) in de woningtotalen.
• Openingtypes. Raam (500x1900), deur (900x2150) en voordeur (1150x2150); type kiezen zet de standaardmaat, daarna vrij aan te passen. De app start met een L-woning met een voordeur (noord, unit A) en 3 ramen (zuid, unit B).
• Woning-instellingen. Regelwerk-h.o.h. (min/max) geldt globaal voor alle buitenwanden resp. alle binnenwanden; in de wand-editor zijn die velden binnen een woning vergrendeld.
• Versienummer staat als enkele constante (APP_VERSION) in app.js. Conventie: laatste cijfer per kleine iteratie, middelste per mijlpaal (aangegeven in chat), eerste bij live-gang.