Differences

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

--- handleiding_nieuw:sub_spacematrix [2025/04/15 14:58] – support
+++ handleiding_nieuw:sub_spacematrix [2025/04/15 15:51] (current) – support
@@ Line 8: / Line 8: @@
     }
     .inputrow label {
-        width: 220px;
+        width: 200px;
     }
     .inputrow input {
@@ Line 16: / Line 16: @@
         margin-left: 40px;
         font-size: 0.9em;
+        min-width: 200px;
+        text-align: right;
     }
     table.rekenblok {
         border-collapse: collapse;
-        margin-top: 15px;
+        margin-top: 25px;
-        width: 100%;
+        font-size: 0.9em;
     }
     table.rekenblok td, table.rekenblok th {
-        padding: 6px 10px;
+        padding: 4px 6px;
         border: 1px solid #ccc;
         text-align: right;
@@ Line 35: / Line 37: @@
     }
     .kaartcontainer {
-        position: relative;
+        position: absolute;
-        width: 600px;
+        top: 0;
-        margin-top: 25px;
+        right: 0;
+        width: 320px;
     }
     .kaartcontainer img {
@@ Line 49: / Line 52: @@
         background: red;
         border-radius: 50%;
-        top: 60%;
-        left: 45%;
         transform: translate(-50%, -50%);
         border: 2px solid white;
     }
 </style>
+<div style="position: relative;">
+    <div class="kaartcontainer">
+        <img src="https://www.sumsonite.nl/wiki/lib/exe/fetch.php?media=handleiding_nieuw:spacematrix:SPACEMATE1.png" alt="Spacematrix kaart">
+        <div class="stipje" id="stipje"></div>
+    </div>
+</div>
 <h2>Spacematrix Rekenblok</h2>
@@ Line 75: / Line 83: @@
 <div class="inputrow">
     <label for="voorziening">% BVO voor voorzieningen:</label>
-    <input id="voorziening" type="number" step="1" value="11" oninput="updateLaadvermogen()">
+    <input id="voorziening" type="number" step="1" value="10" oninput="updateLaadvermogen()">
     <div class="resultblock" id="lv4"></div>
 </div>
-<button onclick="bereken()">Bereken</button>
+<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>
@@ Line 96: / Line 103: @@
             <td><b>Totaal</b></td>
             <td id="totaal_perc">-</td>
-            <td></td>
+            <td id="totaal_gewbvo">-</td>
             <td id="totaal_won">-</td>
             <td id="totaal_bvo">-</td>
@@ Line 102: / Line 109: @@
     </tfoot>
 </table>
+</div>
 <h3>Resultaat</h3>
 <div id="output"></div>
-<h3>Spacematrix-visualisatie</h3>
-<div class="kaartcontainer">
-    <img src="/_media/fb2c8c66-77cf-49b5-9c85-05bbd29deb0e.png" alt="Spacematrix kaart">
-    <div class="stipje" title="Projectlocatie"></div>
-</div>
 <script>
@@ Line 125: / Line 127: @@
         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 135: / Line 137: @@
     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}%`;
     }
@@ Line 140: / Line 150: @@
         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("lv1").innerText = "";
         document.getElementById("lv2").innerText = `Laadvermogen: ${formatGetal(laadvermogen)} m² BVO`;
-        document.getElementById("lv3").innerText = `Voorzieningen: ${formatGetal(bvoVoorzieningen)} m² BVO`;
+        document.getElementById("lv3").innerText = `Voorzieningen: ${formatGetal(bvoVoorzieningen)} m²`;
-        document.getElementById("lv4").innerText = `Wonen: ${formatGetal(bvoWonen)} m² BVO`;
+        document.getElementById("lv4").innerText = `Wonen: ${formatGetal(bvoWonen)} m²`;
+        updateStipje(fsi, gsi);
+        bereken();
     }
@@ Line 156: / 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 165: / 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;
@@ Line 172: / Line 184: @@
         }
-        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 totaalWoningen = woonBVO / gewogenBVO;
+        const totaalWoningenExact = woonBVO / gewogenBVO;
         let sumWon = 0;
         let sumBVO = 0;
+        let wonPerType = [];
-        details.forEach(({ i, perc, bvo }) => {
+        let restant = Math.round(totaalWoningenExact);
-            const aant = Math.round((perc / 100) * totaalWoningen);
+        for (let i = 0; i < details.length; i++) {
-            const bvoTot = aant * bvo;
+            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;
-        });
+        }
-        document.getElementById("totaal_perc").innerText = "100%";
+        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);
@@ Line 196: / Line 224: @@
         document.getElementById("output").innerHTML = `
             <p><b>Gewogen BVO/ehd:</b> ${gewogenBVO.toFixed(1)} m²<br>
-            <b>Totaal aantal woningen:</b> ${formatGetal(Math.round(totaalWoningen))}</p>
+            <b>Totaal aantal woningen:</b> ${formatGetal(sumWon)}</p>
         `;
     }
@@ Line 202: / Line 230: @@
     updateLaadvermogen();
 </script>
 </html>