Differences

This shows you the differences between two versions of the page.

--- handleiding_nieuw:sub_spacematrix [2025/05/13 15:04] – support
+++ handleiding_nieuw:sub_spacematrix [2025/11/27 06:51] (current) – support
@@ Line 29: / Line 29: @@
 <body>
-<h1>Spacematrix & Voorzieningen</h1>
+<h1>Stedelijke Dichtheidsrekenmachine</h1>
 <div class="tabs">
   <div class="tab active" onclick="switchTab('rekenblok')">Spacematrix Rekenblok</div>
@@ Line 59: / Line 59: @@
     </div>
     <div class="kaartcontainer" style="max-width: 500px;">
-      <img src="https://www.sumsonite.nl/wiki/lib/exe/fetch.php?media=handleiding_nieuw:spacematrix:SPACEMATE1.png" alt="Spacematrix kaart">
+      <img src="/wiki/lib/exe/fetch.php?media=handleiding_nieuw:spacematrix:SPACEMATE1.png" alt="Spacematrix kaart">
       <div class="stipje" id="stipje"></div>
     </div>
@@ Line 257: / Line 257: @@
 function updateStipje(fsi, gsi) {
   const stip = document.getElementById("stipje");
-  const x = Math.min(100, Math.max(0, gsi * 190));
-  const y = Math.max(0, Math.min(100, (3 - fsi) * 35));
+  // Afbeeldingskalibratie (pixels of procenten afhankelijk van verhoudingen)
+  // GSI 0 → linksrand, GSI 0.5 → ongeveer 90% breedte
+  const x = Math.min(100, Math.max(0, (gsi / 0.5) * 70+ 6));   // pas 70 en 6 aan voor horizontale correctie
+  // FSI 0 → onderrand, FSI 3 → bovenzijde (ongeveer 5% marge boven)
+  const y = Math.max(0, Math.min(100, 92 - (fsi / 3) * 88));   // pas 93 en 88 aan voor verticale correctie
   stip.style.left = `${x}%`;
   stip.style.top = `${y}%`;
@@ Line 610: / Line 616: @@
 }
-// 👇 Deze functies zetten de HTML-invoer van de rekenmodule om in tekstblokken voor het .docx-bestand
+// 👇 Bouw de volledige woningtype + parkeren-tabel met eerste kolom labels, geschikt voor Kladblok
+function buildWoningtypesTableTXT() {
-function buildWoningtypesTable() {
   const types = ["egw sociaal", "egw goedkoop", "egw midden", "egw duur", "egw top",
                  "mgw sociaal", "mgw goedkoop", "mgw midden", "mgw duur", "mgw top"];
-  let rows = [
+  const parkeerkolommen = ["Park. bov.", "Park. ond."];
-    ["Type", ...types, "Parkeren bovengr.", "Parkeren ondergr."]
+  const kolommen = [...types, ...parkeerkolommen];
-  ];
+  const colWidth = 13;
+  const labelWidth = 18;
-  const perc = types.map((_, i) => document.getElementById(`perc_${i}`).value || "0");
+  const pad = (val) => val.toString().padStart(colWidth);
-  const bvo = types.map((_, i) => document.getElementById(`bvo_${i}`).value || "0");
+  const head = (val) => val.toString().padEnd(colWidth);
-  const aantallen = types.map((_, i) => document.getElementById(`aantal_${i}`).innerText || "-");
+  const label = (txt) => `| ${txt}`.padEnd(labelWidth);
-  const bvo_tot = types.map((_, i) => document.getElementById(`totbvo_${i}`).innerText || "-");
-  rows.push(["% totaal", ...perc, "-", "-"]);
+  // DATA per woningtype (alleen types, dus zonder parkeren)
-  rows.push(["m² BVO per woning", ...bvo, "25", "25"]);
+  const perc = types.map((_, i) => document.getElementById(`perc_${i}`)?.value || "0");
-  rows.push(["Aantal woningen", ...aantallen, "56", "56"]);
+  const bvo = types.map((_, i) => parseFloat(document.getElementById(`bvo_${i}`)?.value || "0"));
-  rows.push(["Totaal BVO", ...bvo_tot, "1400", "1400"]);
+  const aantallen = types.map((_, i) => parseInt(document.getElementById(`aantal_${i}`)?.innerText || "0"));
+  const vormfactor = types.map((_, i) => i < 5 ? 0.9 : 0.75);
+  const bvo_tot = bvo.map((b, i) => b * aantallen[i]);
+  const gbo = bvo.map((b, i) => (b * vormfactor[i]).toFixed(1));
-  return rows.map(r => r.join(" | ")).join("\n");
+  // PARKEERREGELS berekenen
-}
+  const pp = parseFloat(document.getElementById("pp_per_woning")?.value || 1);
+  const woningen = aantallen.reduce((acc, val) => acc + (val || 0), 0); // alleen woningtypes
+  const bvo_pp = parseFloat(document.getElementById("bvo_per_pp")?.value || 25);
+  const perc_boven = parseFloat(document.getElementById("pp_bovengronds")?.value || 70);
+  const perc_onder = parseFloat(document.getElementById("pp_ondergronds")?.value || 30);
+  const pp_boven = Math.round(woningen * pp * (perc_boven / 100));
+  const pp_onder = Math.round(woningen * pp * (perc_onder / 100));
+  const bvo_boven = pp_boven * bvo_pp;
+  const bvo_onder = pp_onder * bvo_pp;
-function buildVoorzieningenTable() {
+  // PARKEERGEGEVENS toevoegen
-  const voorzieningen = [
+  perc.push("-", "-");
-    { naam: "Huisarts" }, { naam: "Fysiotherapie" }, { naam: "Tandarts" },
+  bvo.push(bvo_pp, bvo_pp);
-    { naam: "Kinderopvang" }, { naam: "Basisschool" }, { naam: "Bibliotheek" },
+  aantallen.push(pp_boven, pp_onder);
-    { naam: "Buurtcentrum" }, { naam: "Sporthal" }, { naam: "Zwemmen (overdekt)" },
+  bvo_tot.push(bvo_boven, bvo_onder);
-    { naam: "Winkels dagelijks goed." }
+  vormfactor.push(1.00, 1.00);
-  ];
+  gbo.push((bvo_pp * 1.00).toFixed(1), (bvo_pp * 1.00).toFixed(1));
-  let rows = ["Type | Oppervlak (m²)"];
-  voorzieningen.forEach((v, i) => {
+  // TABEL opbouwen
-    const row = document.getElementById(`vchk_${i}`);
+  const r = [];
-    if (row && row.checked) {
+  r.push(label("Type") + kolommen.map(head).join("|") + "|");
-      const el = document.querySelector(`#voorziening_summary_tabel tr:nth-child(${rows.length}) td:last-child`);
+  r.push("".padEnd(labelWidth, " ") + kolommen.map(() => "-".repeat(colWidth)).join("|") + "|");
-      const m2 = el ? el.innerText : "-";
+  r.push(label("% totaal") + perc.map(pad).join("|") + "|");
-      rows.push(`${v.naam} | ${m2}`);
+  r.push(label("Aantal woningen") + aantallen.map(pad).join("|") + "|");
-    }
+  r.push(label("Totaal BVO") + bvo_tot.map(b => pad(b.toFixed(0))).join("|") + "|");
-  });
+  r.push(label("m² BVO/woning") + bvo.map(b => pad(b.toFixed(0))).join("|") + "|");
+  r.push(label("m² GBO/woning") + gbo.map(pad).join("|") + "|");
+  r.push(label("Vormfactor") + vormfactor.map(f => pad(f.toFixed(2))).join("|") + "|");
-  return rows.join("\n");
+  // GEMIDDELDES (alleen woningtypes, dus index 0 t/m 9)
-}
+  const woningtypes = [...Array(10).keys()];
+  const totale_bvo = woningtypes.reduce((sum, i) => sum + bvo[i] * aantallen[i], 0);
+  const totale_gbo = woningtypes.reduce((sum, i) => sum + parseFloat(gbo[i]) * aantallen[i], 0);
+  const totaal_woningen = woningtypes.reduce((sum, i) => sum + aantallen[i], 0);
-function buildPlankaartTable() {
+  const gemiddelde_bvo = totaal_woningen > 0 ? (totale_bvo / totaal_woningen).toFixed(1) : "0";
-  const ids = ["opp", "m2_groen", "m2_water", "m2_tuinen", "m2_rijbanen", "m2_trottoirs", "m2_parkeren", "m2_pleinen"];
+  const gemiddelde_gbo = totaal_woningen > 0 ? (totale_gbo / totaal_woningen).toFixed(1) : "0";
-  const labels = ["Totaal bruto plangebied", "Groen", "Water", "Tuinen", "Rijbanen", "Trottoirs", "Parkeren (bovengr.)", "Pleinen"];
-  const footprint = parseFloat(document.getElementById("gsi").value || 0) * parseFloat(document.getElementById("opp").value || 0);
-  const tuin = parseFloat(document.getElementById("m2_tuinen").innerText) || 0;
-  const verharding = ["m2_rijbanen", "m2_trottoirs", "m2_parkeren", "m2_pleinen"]
-    .map(id => parseFloat(document.getElementById(id).innerText) || 0)
-    .reduce((a, b) => a + b, 0);
-  let rows = ["Omschrijving | Oppervlak (m²)"];
-  ids.forEach((id, i) => {
-    const el = document.getElementById(id);
-    if (el) {
-      rows.push(`${labels[i]} | ${el.value || el.innerText || '-'}`);
-    }
-  });
-  rows.push(`Footprint (GSI x opp) | ${footprint.toFixed(0)} m²`);
-  rows.push(`Totaal uitgeefbaar | ${(footprint + tuin).toFixed(0)} m²`);
-  rows.push(`Totaal verharding | ${verharding.toFixed(0)} m²`);
-  return rows.join("\n");
-}
-function buildGrexTable() {
+  r.push("");
-  const getVal = id => parseFloat(document.getElementById(id)?.innerText?.replace(' m²', '') || 0);
+  r.push(`Totale aantal woningen: ${totaal_woningen}`);
-  const rijbanen = getVal("m2_rijbanen");
+  r.push(`Gemiddelde BVO per woning: ${gemiddelde_bvo}`);
-  const trottoirs = getVal("m2_trottoirs");
+  r.push(`Gemiddelde GBO per woning: ${gemiddelde_gbo}`);
-  const parkeren = getVal("m2_parkeren");
-  const pleinen = getVal("m2_pleinen");
-  const groen = getVal("m2_groen");
-  const water = getVal("m2_water");
-  const totaalopp = parseFloat(document.getElementById("opp")?.value || 0);
-  const nazorg = rijbanen * 0.10;
-  return [
+  return r.join("\n");
-    "Categorie | Omschrijving | Oppervlak (m²)",
-    `Verwerving | Percelen te verwerven of in te brengen | ${totaalopp.toFixed(0)}`,
-    `Grondwerk | Graven watergangen | ${water.toFixed(0)}`,
-    `Bouwrijp maken | Bouwstraten | ${rijbanen.toFixed(0)}`,
-    `Woonrijp maken | Rijbanen | ${rijbanen.toFixed(0)}`,
-    `Woonrijp maken | Trottoirs | ${trottoirs.toFixed(0)}`,
-    `Woonrijp maken | Parkeren | ${parkeren.toFixed(0)}`,
-    `Woonrijp maken | Pleinen | ${pleinen.toFixed(0)}`,
-    `Woonrijp maken | Groen | ${groen.toFixed(0)}`,
-    "Woonrijp maken | Bomen en groenstructuur |",
-    "Woonrijp maken | Verdere aankleding openbare ruimte |",
-    `Nazorg | Herstraten bestratingen (10% rijbanen) | ${nazorg.toFixed(0)}`,
-    "Onvoorzien | Onvoorzien (5-15%) |"
-  ].join("\n");
 }
@@ Line 709: / Line 688: @@
   try {
-    const response = await fetch('https://www.sumsonite.nl/wiki/lib/exe/fetch.php?media=handleiding_nieuw:spacematrix:kickstart_template_final.txt&v=' + Date.now());
+    const response = await fetch('https://login.sumsonite.nl/wiki/lib/exe/fetch.php?media=handleiding_nieuw:spacematrix:kickstart_template_final.txt&v=' + Date.now());
     if (!response.ok) throw new Error(`Bestand niet bereikbaar (${response.status})`);
@@ Line 740: / Line 719: @@
       totbvo_boven: parkeeropp_boven.toFixed(0),
       totbvo_onder: parkeeropp_onder.toFixed(0),
-      voorzieningen_table: buildVoorzieningenTableTXT(),
+      woningtypes_table: buildWoningtypesTableTXT(),
+	  voorzieningen_table: buildVoorzieningenTableTXT(),
       plankaart_table: buildPlankaartTableTXT(),
       grex_table: buildGrexTableTXT()
@@ Line 780: / Line 760: @@
 function buildPlankaartTableTXT() {
+  const opp = parseFloat(document.getElementById("opp").value) || 0;
+  const gsi = parseFloat(document.getElementById("gsi").value) || 0;
+  const footprint = gsi * opp;
+  const tuin = getVal("m2_tuinen");
+  const uitgeefbaar = tuin + footprint;
   return `Omschrijving                | Oppervlak (m²)
 ----------------------------|----------------
-Totaal bruto plangebied     | ${document.getElementById("opp").value}
+Totaal bruto plangebied     | ${opp}
 ----------------------------|----------------
-Tuinen                      | ${getVal("m2_tuinen")}
+Tuinen                      | ${tuin}
-Footprint (GSI x opp)       | ${(parseFloat(document.getElementById("gsi").value) * parseFloat(document.getElementById("opp").value)).toFixed(0)}
+Footprint (GSI x opp)       | ${footprint.toFixed(0)}
 ----------------------------|----------------
-Totaal uitgeefbaar          | ${getVal("m2_tuinen") + (parseFloat(document.getElementById("gsi").value) * parseFloat(document.getElementById("opp").value)).toFixed(0)}
+Totaal uitgeefbaar          | ${uitgeefbaar.toFixed(0)}
 Rijbanen                    | ${getVal("m2_rijbanen")}
 Trottoirs                   | ${getVal("m2_trottoirs")}
@@ Line 793: / Line 779: @@
 Pleinen                     | ${getVal("m2_pleinen")}
 ----------------------------|----------------
-Totaal verharding           | ${getVal("m2_rijbanen") + getVal("m2_trottoirs") + getVal("m2_parkeren") + getVal("m2_pleinen")}
+Totaal verharding           | ${(getVal("m2_rijbanen") + getVal("m2_trottoirs") + getVal("m2_parkeren") + getVal("m2_pleinen")).toFixed(0)}
 Groen                       | ${getVal("m2_groen")}
 Water                       | ${getVal("m2_water")}`;