User Tools

Site Tools

handleiding_nieuw:sub_spacematrix

Differences

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

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
handleiding_nieuw:sub_spacematrix [2025/04/15 15:12] – supporthandleiding_nieuw:sub_spacematrix [2025/04/15 15:51] (current) – support
Line 8: Line 8:
     }     }
     .inputrow label {     .inputrow label {
-        width: 220px;+        width: 200px;
     }     }
     .inputrow input {     .inputrow input {
Line 16: Line 16:
         margin-left: 40px;         margin-left: 40px;
         font-size: 0.9em;         font-size: 0.9em;
 +        min-width: 200px;
 +        text-align: right;
     }     }
     table.rekenblok {     table.rekenblok {
         border-collapse: collapse;         border-collapse: collapse;
-        margin-top: 15px;+        margin-top: 25px;
         font-size: 0.9em;         font-size: 0.9em;
-        width: auto; 
     }     }
     table.rekenblok td, table.rekenblok th {     table.rekenblok td, table.rekenblok th {
Line 39: Line 40:
         top: 0;         top: 0;
         right: 0;         right: 0;
-        width: 400px; +        width: 320px;
-        margin-top: 10px;+
     }     }
     .kaartcontainer img {     .kaartcontainer img {
Line 83: Line 83:
 <div class="inputrow"> <div class="inputrow">
     <label for="voorziening">% BVO voor voorzieningen:</label>     <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 class="resultblock" id="lv4"></div>
 </div> </div>
  
-<button onclick="bereken()">Bereken</button> +<div style="margin-top: 30px;">
 <table class="rekenblok"> <table class="rekenblok">
     <thead>     <thead>
         <tr>         <tr>
             <th>Type</th>             <th>Type</th>
-            <th>% aandeel</th> +            <th style="width: 60px;">%</th> 
-            <th>m² BVO/won</th>+            <th style="width: 70px;">m²/won</th>
             <th>Aantal</th>             <th>Aantal</th>
             <th>Tot. BVO</th>             <th>Tot. BVO</th>
Line 110: Line 109:
     </tfoot>     </tfoot>
 </table> </table>
 +</div>
  
 <h3>Resultaat</h3> <h3>Resultaat</h3>
Line 127: Line 127:
         row.innerHTML = `         row.innerHTML = `
             <td style="text-align: left;">${type}</td>             <td style="text-align: left;">${type}</td>
-            <td><input type="number" id="perc_${i}" value="${i < 5 ? 5 : 10}" step="0.1" oninput="bereken()"></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="bereken()"></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="aantal_${i}">-</td>
             <td id="totbvo_${i}">-</td>             <td id="totbvo_${i}">-</td>
Line 141: Line 141:
     function updateStipje(fsi, gsi) {     function updateStipje(fsi, gsi) {
         const stip = document.getElementById("stipje");         const stip = document.getElementById("stipje");
-        const x = Math.min(100, Math.max(0, gsi * 100));  // x = GSI → links = 0, rechts = 1.0 +        const x = Math.min(100, Math.max(0, gsi * 190)); 
-        const y = Math.max(0, Math.min(100, (2.8 - fsi) * 40)); // y = FSI → onder 0.2, boven 2.8+        const y = Math.max(0, Math.min(100, (3 - fsi) * 35));
         stip.style.left = `${x}%`;         stip.style.left = `${x}%`;
         stip.style.top = `${y}%`;         stip.style.top = `${y}%`;
Line 153: Line 153:
         const voorzieningPerc = parseFloat(document.getElementById("voorziening").value) / 100;         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;         const bvoWonen = laadvermogen - bvoVoorzieningen;
  
-        document.getElementById("lv1").innerText = ""; 
         document.getElementById("lv2").innerText = `Laadvermogen: ${formatGetal(laadvermogen)} m² BVO`;         document.getElementById("lv2").innerText = `Laadvermogen: ${formatGetal(laadvermogen)} m² BVO`;
         document.getElementById("lv3").innerText = `Voorzieningen: ${formatGetal(bvoVoorzieningen)} m²`;         document.getElementById("lv3").innerText = `Voorzieningen: ${formatGetal(bvoVoorzieningen)} m²`;
Line 170: Line 169:
         const fsi = parseFloat(document.getElementById("fsi").value);         const fsi = parseFloat(document.getElementById("fsi").value);
         const voorzieningPerc = parseFloat(document.getElementById("voorziening").value) / 100;         const voorzieningPerc = parseFloat(document.getElementById("voorziening").value) / 100;
- 
         const laadvermogen = opp * fsi;         const laadvermogen = opp * fsi;
         const woonBVO = laadvermogen * (1 - voorzieningPerc);         const woonBVO = laadvermogen * (1 - voorzieningPerc);
Line 179: Line 177:
  
         for (let i = 0; i < types.length; i++) {         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;             gewogenBVO += (perc / 100) * bvo;
             totalPerc += perc;             totalPerc += perc;
Line 186: 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 sumWon = 0;
         let sumBVO = 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(`aantal_${i}`).innerText = formatGetal(aant);
             document.getElementById(`totbvo_${i}`).innerText = formatGetal(bvoTot);             document.getElementById(`totbvo_${i}`).innerText = formatGetal(bvoTot);
             sumWon += aant;             sumWon += aant;
             sumBVO += bvoTot;             sumBVO += bvoTot;
-        });+        }
  
         document.getElementById("totaal_perc").innerText = `${totalPerc.toFixed(1)}%`;         document.getElementById("totaal_perc").innerText = `${totalPerc.toFixed(1)}%`;
Line 211: Line 224:
         document.getElementById("output").innerHTML = `         document.getElementById("output").innerHTML = `
             <p><b>Gewogen BVO/ehd:</b> ${gewogenBVO.toFixed(1)} m²<br>             <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 218: Line 231:
 </script> </script>
 </html> </html>
 +
handleiding_nieuw/sub_spacematrix.1744729942.txt.gz · Last modified: 2025/04/15 15:12 by support