Differences

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

--- handleiding_nieuw:sub_spacematrix [2025/04/14 11:35] – support
+++ handleiding_nieuw:sub_spacematrix [2025/04/15 15:51] (current) – support
@@ Line 1: / Line 1: @@
 <html>
 <style>
-  .calculator-wrapper {
+    .inputrow {
-    max-width: 800px;
+        display: flex;
-    margin: 2em auto;
+        align-items: center;
-    padding: 1em;
+        gap: 10px;
-    border: 1px solid #ccc;
+        margin-bottom: 8px;
-    border-radius: 8px;
+    }
-    background-color: #f9f9f9;
+    .inputrow label {
-  }
+        width: 200px;
-  .calculator-wrapper h2 {
+    }
-    margin-top: 0;
+    .inputrow input {
-  }
+        width: 80px;
-  .calculator-wrapper label {
+    }
-    display: block;
+    .resultblock {
-    margin-top: 1em;
+        margin-left: 40px;
-  }
+        font-size: 0.9em;
-  .calculator-wrapper input {
+        min-width: 200px;
-    width: 100%;
+        text-align: right;
-    padding: 0.5em;
+    }
-    margin-top: 0.25em;
+    table.rekenblok {
-  }
+        border-collapse: collapse;
-  .output {
+        margin-top: 25px;
-    margin-top: 2em;
+        font-size: 0.9em;
-    padding: 1em;
+    }
-    background-color: #eef;
+    table.rekenblok td, table.rekenblok th {
-    border: 1px solid #99c;
+        padding: 4px 6px;
-  }
+        border: 1px solid #ccc;
+        text-align: right;
+    }
+    table.rekenblok th {
+        background-color: #f0f0f0;
+    }
+    .scheiding td {
+        background-color: #fafafa;
+        border-top: 2px solid #666;
+    }
+    .kaartcontainer {
+        position: absolute;
+        top: 0;
+        right: 0;
+        width: 320px;
+    }
+    .kaartcontainer img {
+        width: 100%;
+        display: block;
+    }
+    .stipje {
+        position: absolute;
+        width: 14px;
+        height: 14px;
+        background: red;
+        border-radius: 50%;
+        transform: translate(-50%, -50%);
+        border: 2px solid white;
+    }
 </style>
-<div class="calculator-wrapper">
+<div style="position: relative;">
-  <h2>Spacematrix rekenblok (prototype)</h2>
+    <div class="kaartcontainer">
-  <label>
+        <img src="https://www.sumsonite.nl/wiki/lib/exe/fetch.php?media=handleiding_nieuw:spacematrix:SPACEMATE1.png" alt="Spacematrix kaart">
-    Oppervlak projectgebied (in m²):
+        <div class="stipje" id="stipje"></div>
-    <input type="number" id="opp" value="10000">
+    </div>
-  </label>
+</div>
-  <label>
-    FSI (bijv. 1.2):
-    <input type="number" step="0.01" id="fsi" value="1.2">
-  </label>
-  <label>
-    % sociale huur:
-    <input type="number" id="sociaal" value="30">
-  </label>
-  <label>
-    % middenhuur:
-    <input type="number" id="midden" value="30">
-  </label>
-  <label>
-    % koop:
-    <input type="number" id="koop" value="40">
-  </label>
-  <label>
-    Gemiddelde BVO per woning (m²):
-    <input type="number" id="bvo" value="100">
-  </label>
-  <button onclick="rekenuit()">Bereken</button>
-  <div class="output" id="result">
+<h2>Spacematrix Rekenblok</h2>
-    <em>Voer waarden in en klik op "Bereken".</em>
-  </div>
+<div class="inputrow">
+    <label for="opp">Oppervlak projectgebied (m²):</label>
+    <input id="opp" type="number" value="10000" oninput="updateLaadvermogen()">
+    <div class="resultblock" id="lv1"></div>
+</div>
+<div class="inputrow">
+    <label for="fsi">FSI:</label>
+    <input id="fsi" type="number" step="0.01" value="1.6" oninput="updateLaadvermogen()">
+    <div class="resultblock" id="lv2"></div>
+</div>
+<div class="inputrow">
+    <label for="gsi">GSI:</label>
+    <input id="gsi" type="number" step="0.01" value="0.3" oninput="updateLaadvermogen()">
+    <div class="resultblock" id="lv3"></div>
+</div>
+<div class="inputrow">
+    <label for="voorziening">% BVO voor voorzieningen:</label>
+    <input id="voorziening" type="number" step="1" value="10" oninput="updateLaadvermogen()">
+    <div class="resultblock" id="lv4"></div>
 </div>
+<div style="margin-top: 30px;">
+<table class="rekenblok">
+    <thead>
+        <tr>
+            <th>Type</th>
+            <th style="width: 60px;">%</th>
+            <th style="width: 70px;">m²/won</th>
+            <th>Aantal</th>
+            <th>Tot. BVO</th>
+        </tr>
+    </thead>
+    <tbody id="woningtypes"></tbody>
+    <tfoot>
+        <tr class="scheiding">
+            <td><b>Totaal</b></td>
+            <td id="totaal_perc">-</td>
+            <td id="totaal_gewbvo">-</td>
+            <td id="totaal_won">-</td>
+            <td id="totaal_bvo">-</td>
+        </tr>
+    </tfoot>
+</table>
+</div>
+<h3>Resultaat</h3>
+<div id="output"></div>
 <script>
-  function rekenuit() {
+    const types = [
-    const opp = parseFloat(document.getElementById('opp').value);
+        "egw sociaal", "egw goedkoop", "egw midden", "egw duur", "egw top",
-    const fsi = parseFloat(document.getElementById('fsi').value);
+        "mgw sociaal", "mgw goedkoop", "mgw midden", "mgw duur", "mgw top"
-    const sociaal = parseFloat(document.getElementById('sociaal').value) / 100;
+    ];
-    const midden = parseFloat(document.getElementById('midden').value) / 100;
-    const koop = parseFloat(document.getElementById('koop').value) / 100;
+    const tbody = document.getElementById("woningtypes");
-    const bvo = parseFloat(document.getElementById('bvo').value);
+    types.forEach((type, i) => {
+        const row = document.createElement("tr");
+        if (i === 5) row.className = "scheiding";
+        row.innerHTML = `
+            <td style="text-align: left;">${type}</td>
+            <td><input type="number" id="perc_${i}" value="${i < 5 ? 5 : 10}" step="0.1" oninput="updateLaadvermogen()"></td>
+            <td><input type="number" id="bvo_${i}" value="${i < 5 ? 130 : 90}" step="1" oninput="updateLaadvermogen()"></td>
+            <td id="aantal_${i}">-</td>
+            <td id="totbvo_${i}">-</td>
+        `;
+        tbody.appendChild(row);
+    });
+    function formatGetal(n) {
+        return n.toLocaleString("nl-NL");
+    }
+    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));
+        stip.style.left = `${x}%`;
+        stip.style.top = `${y}%`;
+    }
+    function updateLaadvermogen() {
+        const opp = parseFloat(document.getElementById("opp").value);
+        const fsi = parseFloat(document.getElementById("fsi").value);
+        const gsi = parseFloat(document.getElementById("gsi").value);
+        const voorzieningPerc = parseFloat(document.getElementById("voorziening").value) / 100;
+        const laadvermogen = Math.round(opp * fsi);
+        const bvoVoorzieningen = Math.round(laadvermogen * voorzieningPerc);
+        const bvoWonen = laadvermogen - bvoVoorzieningen;
+        document.getElementById("lv2").innerText = `Laadvermogen: ${formatGetal(laadvermogen)} m² BVO`;
+        document.getElementById("lv3").innerText = `Voorzieningen: ${formatGetal(bvoVoorzieningen)} m²`;
+        document.getElementById("lv4").innerText = `Wonen: ${formatGetal(bvoWonen)} m²`;
+        updateStipje(fsi, gsi);
+        bereken();
+    }
+    function bereken() {
+        const opp = parseFloat(document.getElementById("opp").value);
+        const fsi = parseFloat(document.getElementById("fsi").value);
+        const voorzieningPerc = parseFloat(document.getElementById("voorziening").value) / 100;
+        const laadvermogen = opp * fsi;
+        const woonBVO = laadvermogen * (1 - voorzieningPerc);
+        let gewogenBVO = 0;
+        let totalPerc = 0;
+        const details = [];
+        for (let i = 0; i < types.length; i++) {
+            const perc = parseFloat(document.getElementById(`perc_${i}`).value) || 0;
+            const bvo = parseFloat(document.getElementById(`bvo_${i}`).value) || 0;
+            gewogenBVO += (perc / 100) * bvo;
+            totalPerc += perc;
+            details.push({ i, perc, bvo });
+        }
+        if (totalPerc === 0 || gewogenBVO === 0) return;
+        const totaalWoningenExact = woonBVO / gewogenBVO;
+        let sumWon = 0;
+        let sumBVO = 0;
+        let wonPerType = [];
+        let restant = Math.round(totaalWoningenExact);
+        for (let i = 0; i < details.length; i++) {
+            const { perc } = details[i];
+            let aant = (perc / 100) * totaalWoningenExact;
+            let afgerond = Math.floor(aant);
+            wonPerType.push(afgerond);
+            restant -= afgerond;
+        }
+        const decimaalSort = details.map((d, i) => ({
+            i, rest: ((d.perc / 100) * totaalWoningenExact) % 1
+        })).sort((a, b) => b.rest - a.rest);
+        for (let j = 0; j < restant; j++) {
+            wonPerType[decimaalSort[j].i]++;
+        }
+        for (let i = 0; i < details.length; i++) {
+            const aant = wonPerType[i];
+            const bvoTot = aant * details[i].bvo;
+            document.getElementById(`aantal_${i}`).innerText = formatGetal(aant);
+            document.getElementById(`totbvo_${i}`).innerText = formatGetal(bvoTot);
+            sumWon += aant;
+            sumBVO += bvoTot;
+        }
-    const totaalBVO = opp * fsi;
+        document.getElementById("totaal_perc").innerText = `${totalPerc.toFixed(1)}%`;
-    const bvoSociaal = totaalBVO * sociaal;
+        document.getElementById("totaal_gewbvo").innerText = `${gewogenBVO.toFixed(1)} m²`;
-    const bvoMidden = totaalBVO * midden;
+        document.getElementById("totaal_won").innerText = formatGetal(sumWon);
-    const bvoKoop = totaalBVO * koop;
+        document.getElementById("totaal_bvo").innerText = formatGetal(sumBVO);
-    const aantSociaal = Math.round(bvoSociaal / bvo);
+        document.getElementById("output").innerHTML = `
-    const aantMidden = Math.round(bvoMidden / bvo);
+            <p><b>Gewogen BVO/ehd:</b> ${gewogenBVO.toFixed(1)} m²<br>
-    const aantKoop = Math.round(bvoKoop / bvo);
+            <b>Totaal aantal woningen:</b> ${formatGetal(sumWon)}</p>
+        `;
+    }
-    document.getElementById('result').innerHTML = `
+    updateLaadvermogen();
-      <strong>Resultaten:</strong><br>
-      Totaal laadvermogen: <strong>${Math.round(totaalBVO)} m² BVO</strong><br>
-      Sociale huur: ${aantSociaal} woningen<br>
-      Middenhuur: ${aantMidden} woningen<br>
-      Koop: ${aantKoop} woningen<br>
-    `;
-  }
 </script>
 </html>