Differences

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

--- handleiding_nieuw:sub_spacematrix [2025/04/15 14:48] – support
+++ handleiding_nieuw:sub_spacematrix [2025/04/15 15:51] (current) – support
@@ Line 1: / Line 1: @@
 <html>
 <style>
+    .inputrow {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        margin-bottom: 8px;
+    }
+    .inputrow label {
+        width: 200px;
+    }
+    .inputrow input {
+        width: 80px;
+    }
+    .resultblock {
+        margin-left: 40px;
+        font-size: 0.9em;
+        min-width: 200px;
+        text-align: right;
+    }
     table.rekenblok {
         border-collapse: collapse;
-        margin-top: 15px;
+        margin-top: 25px;
+        font-size: 0.9em;
     }
     table.rekenblok td, table.rekenblok th {
-        padding: 6px 10px;
+        padding: 4px 6px;
         border: 1px solid #ccc;
         text-align: right;
@@ Line 13: / Line 32: @@
         background-color: #f0f0f0;
     }
-    input[type="number"] {
+    .scheiding td {
-        width: 80px;
+        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>
-<h2>Spacematrix Rekenblok</h2>
+<div style="position: relative;">
+    <div class="kaartcontainer">
-<div>
+        <img src="https://www.sumsonite.nl/wiki/lib/exe/fetch.php?media=handleiding_nieuw:spacematrix:SPACEMATE1.png" alt="Spacematrix kaart">
-    <label>Oppervlak projectgebied (m²):<br><input id="opp" type="number" value="10000" oninput="updateLaadvermogen()"></label><br>
+        <div class="stipje" id="stipje"></div>
-    <label>FSI:<br><input id="fsi" type="number" step="0.01" value="1.2" oninput="updateLaadvermogen()"></label><br>
+    </div>
-    <label>GSI:<br><input id="gsi" type="number" step="0.01" value="0.33" oninput="updateLaadvermogen()"></label><br>
-    <label>% BVO voor voorzieningen:<br><input id="voorziening" type="number" step="1" value="10" oninput="updateLaadvermogen()"></label><br>
 </div>
-<h3>Laadvermogen</h3>
+<h2>Spacematrix Rekenblok</h2>
-<div id="laadvermogen-info"></div>
-<button onclick="bereken()">Bereken</button>
+<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>% aandeel (woningen)</th>
+            <th style="width: 60px;">%</th>
-            <th>m² BVO / woning</th>
+            <th style="width: 70px;">m²/won</th>
-            <th>Aantal woningen</th>
+            <th>Aantal</th>
-            <th>Totale BVO</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>
@@ Line 58: / Line 124: @@
     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"></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"></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>
@@ Line 67: / Line 134: @@
         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 = opp * fsi;
+        const laadvermogen = Math.round(opp * fsi);
-        const bvoVoorzieningen = laadvermogen * voorzieningPerc;
+        const bvoVoorzieningen = Math.round(laadvermogen * voorzieningPerc);
         const bvoWonen = laadvermogen - bvoVoorzieningen;
-        document.getElementById("laadvermogen-info").innerHTML = `
+        document.getElementById("lv2").innerText = `Laadvermogen: ${formatGetal(laadvermogen)} m² BVO`;
-            <ul>
+        document.getElementById("lv3").innerText = `Voorzieningen: ${formatGetal(bvoVoorzieningen)} m²`;
-                <li><b>Laadvermogen (FSI × plangebied):</b> ${laadvermogen.toFixed(0)} m² BVO</li>
+        document.getElementById("lv4").innerText = `Wonen: ${formatGetal(bvoWonen)} m²`;
-                <li><b>Voorzieningen (op basis van ${voorzieningPerc * 100}%):</b> ${bvoVoorzieningen.toFixed(0)} m² BVO</li>
-                <li><b>Beschikbaar voor wonen:</b> ${bvoWonen.toFixed(0)} m² BVO</li>
+        updateStipje(fsi, gsi);
-            </ul>
+        bereken();
-        `;
     }
@@ Line 90: / Line 169: @@
         const fsi = parseFloat(document.getElementById("fsi").value);
         const voorzieningPerc = parseFloat(document.getElementById("voorziening").value) / 100;
         const laadvermogen = opp * fsi;
         const woonBVO = laadvermogen * (1 - voorzieningPerc);
@@ Line 99: / Line 177: @@
         for (let i = 0; i < types.length; i++) {
-            const perc = parseFloat(document.getElementById(`perc_${i}`).value);
+            const perc = parseFloat(document.getElementById(`perc_${i}`).value) || 0;
-            const bvo = parseFloat(document.getElementById(`bvo_${i}`).value);
+            const bvo = parseFloat(document.getElementById(`bvo_${i}`).value) || 0;
             gewogenBVO += (perc / 100) * bvo;
             totalPerc += perc;
-            details.push({ i, type: types[i], perc, bvo });
+            details.push({ i, perc, bvo });
         }
-        if (totalPerc !== 100) {
+        if (totalPerc === 0 || gewogenBVO === 0) return;
-            document.getElementById("output").innerHTML = `<p style="color:red;">Let op: totaal percentage is ${totalPerc}%, moet 100% zijn.</p>`;
-            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 totaalWoningen = woonBVO / gewogenBVO;
+        const decimaalSort = details.map((d, i) => ({
+            i, rest: ((d.perc / 100) * totaalWoningenExact) % 1
+        })).sort((a, b) => b.rest - a.rest);
-        let outputHTML = `<p><b>Gewogen BVO/ehd:</b> ${gewogenBVO.toFixed(1)} m²<br>`;
+        for (let j = 0; j < restant; j++) {
-        outputHTML += `<b>Totaal aantal woningen:</b> ${Math.round(totaalWoningen)}</p>`;
+            wonPerType[decimaalSort[j].i]++;
+        }
-        details.forEach(({ i, perc, bvo }) => {
+        for (let i = 0; i < details.length; i++) {
-            const aant = Math.round((perc / 100) * totaalWoningen);
+            const aant = wonPerType[i];
-            const bvoTot = aant * bvo;
+            const bvoTot = aant * details[i].bvo;
-            document.getElementById(`aantal_${i}`).innerText = aant;
+            document.getElementById(`aantal_${i}`).innerText = formatGetal(aant);
-            document.getElementById(`totbvo_${i}`).innerText = bvoTot;
+            document.getElementById(`totbvo_${i}`).innerText = formatGetal(bvoTot);
-        });
+            sumWon += aant;
+            sumBVO += bvoTot;
+        }
-        document.getElementById("output").innerHTML = outputHTML;
+        document.getElementById("totaal_perc").innerText = `${totalPerc.toFixed(1)}%`;
+        document.getElementById("totaal_gewbvo").innerText = `${gewogenBVO.toFixed(1)} m²`;
+        document.getElementById("totaal_won").innerText = formatGetal(sumWon);
+        document.getElementById("totaal_bvo").innerText = formatGetal(sumBVO);
+        document.getElementById("output").innerHTML = `
+            <p><b>Gewogen BVO/ehd:</b> ${gewogenBVO.toFixed(1)} m²<br>
+            <b>Totaal aantal woningen:</b> ${formatGetal(sumWon)}</p>
+        `;
     }
-    // Initial laadvermogen-info
     updateLaadvermogen();
 </script>
 </html>