Machiel/Tectum
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v0.7.4: light-versie voor de modelpagina's (light.html, js/light/, css/light.css; later in de HUGO-site in een Bootstrap col-12): één model in 3D, doorsnede (snijhoogte tot de goot) en 2D-plattegrond, met beperkte keuzes: per unit breedte en diepte (binnen UnitModel.LIMITS, per model/pagina te beperken), dakvorm met richting, goot- en nokhoogte (helling erbij) en wolfseind, dakbedekking, gevelbekleding met kleur en richting, accent van het model, trasraam (geen/steen, hoogte), binnenspots en buitenverlichting; zelfde berekening als de configurator maar alleen prijs (indicatief, incl. btw), maten, m², inhoud en gewicht zichtbaar; LightModel past keuzes toe op een schone kopie van het model (binnenwanden en inrichting schuiven mee, binnenwanden volgen de goot) en weigert keuzes die de indeling breken (ramen/deuren, binnenwanden, inrichting, ruimtes, overlap) met de dichtstbijzijnde maat die wel past; accordeon-paneel, responsief op de breedte van de tool (container queries), scrollwiel scrolt de pagina tenzij je in de 3D klikt of Ctrl houdt; opslaan = PDF (LightPdf): voorblad "Uw woningontwerp" met render, kerncijfers, keuzes, prijs, contact en QR-code naar de modelpagina (qrcode-generator, MIT), aanzichten en plattegrond (HousePdf klantvariant zonder productie-informatie) en het stappenplan met maatwerk en uitnodiging; doorsnede-afdekking naar HouseModel.sectionCaps (ook in de configurator): 1 mm boven de snede en over de wandtop van wanden die lager blijven, geen flikkerend regelwerk meer; OrbitControls met touch (één vinger draaien, twee vingers knijpen/schuiven); model Vecht (U-vorm 13 × 9,5 m, drie units rond een holte)

Browse Source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Machiel
2026-10-14 11:48:51 +02:00
co-authored by Claude Opus 5.5
parent 51921650e3
commit decbbb4b72
12 changed files with 4104 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files
light.html
+83
View File
@@ -0,0 +1,83 @@
<!DOCTYPE html>
<!--
Tectum
Copyright © 2026 Machiel Heinen.
Alle rechten voorbehouden. Gebruik uitsluitend met schriftelijke toestemming.
Zie LICENTIE.md.
-->
<!-- Light-versie (modelpagina's), voorlopig los: light.html?model=amstel. Op een modelpagina is alleen het
<div class="tectum-light" data-model="…"> plus de stylesheets en scripts hieronder nodig. -->
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Woning samenstellen — Van Emous Mantelzorgwoningen</title>
<link rel="stylesheet" href="css/vendor/bootstrap-icons.min.css">
<link rel="stylesheet" href="css/light.css">
<style>
body { margin: 0; padding: 24px; background: #f9faf5; color: #212121; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
.page { max-width: 1400px; margin: 0 auto; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.page-head img { height: 34px; }
.page-head select { font: inherit; padding: 6px 10px; border: 1px solid #c5ced9; border-radius: 8px; background: #fff; }
@media (max-width: 820px) { body { padding: 12px; } }
</style>
<script src="js/vendor/three.min.js"></script>
<script src="js/vendor/OrbitControls.js"></script>
</head>
<body>
<div class="page">
<div class="page-head">
<img src="assets/logo.svg" alt="Van Emous Mantelzorgwoningen">
<!-- Alleen voor het losse testen: op een modelpagina staat het model vast. -->
<select id="model-pick" aria-label="Model"></select>
</div>
<div id="configurator" class="tectum-light"></div>
</div>
<script src="js/core/logo-data.js"></script>
<script src="js/core/geometry.js"></script>
<script src="js/core/view-layers.js"></script>
<script src="js/core/ui-kit.js"></script>
<script src="js/core/skybox.js"></script>
<script src="js/vendor/jspdf.umd.min.js"></script>
<script src="js/vendor/qrcode.js"></script>
<script src="js/core/pdf-sheet.js"></script>
<script src="js/wall/kozijn-model.js"></script>
<script src="js/wall/wall-model.js"></script>
<script src="js/wall/wall-pdf.js"></script>
<script src="js/floor/floor-model.js"></script>
<script src="js/floor/floor-pdf.js"></script>
<script src="js/roof/roof-model.js"></script>
<script src="js/roof/post-model.js"></script>
<script src="js/lighting/lighting-model.js"></script>
<script src="js/elektra/elektra-model.js"></script>
<script src="js/sandwich/sandwich-model.js"></script>
<script src="js/wall/wall.js"></script>
<script src="js/floor/floor.js"></script>
<script src="js/unit/unit-model.js"></script>
<script src="js/room/room-model.js"></script>
<script src="js/interior/fixture-model.js"></script>
<script src="js/house/chimney-model.js"></script>
<script src="js/house/house-model.js"></script>
<script src="js/cost/cost-defaults.js"></script>
<script src="js/cost/cost-csv.js"></script>
<script src="js/cost/cost-model.js"></script>
<script src="js/elektra/elektra-pdf.js"></script>
<script src="js/house/house-pdf.js"></script>
<script src="js/light/light-model.js"></script>
<script src="js/light/light-pdf.js"></script>
<script>
// Model uit de URL (?model=amstel); de keuzelijst herlaadt de pagina met een ander model.
(function () {
const key = new URLSearchParams(location.search).get('model');
const model = HouseModel.MODELS[key] ? key : Object.keys(HouseModel.MODELS)[0];
const pick = document.getElementById('model-pick');
pick.innerHTML = Object.entries(HouseModel.MODELS).map(([k, m]) => `<option value="${k}"${k === model ? ' selected' : ''}>${m.label}</option>`).join('');
pick.addEventListener('change', () => { location.search = '?model=' + pick.value; });
document.getElementById('configurator').dataset.model = model;
})();
</script>
<script src="js/light/light.js"></script>
</body>
</html>