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 14:37] – supporthandleiding_nieuw:sub_spacematrix [2025/04/15 15:51] (current) – support
Line 1: Line 1:
-<HTML>+<html>
 <style> <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: 25px;
 +        font-size: 0.9em;
 +    }
     table.rekenblok td, table.rekenblok th {     table.rekenblok td, table.rekenblok th {
-        padding: 4px 8px;+        padding: 4px 6px;
         border: 1px solid #ccc;         border: 1px solid #ccc;
         text-align: right;         text-align: right;
Line 8: Line 31:
     table.rekenblok th {     table.rekenblok th {
         background-color: #f0f0f0;         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> </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> <h2>Spacematrix Rekenblok</h2>
  
-<label>Oppervlak projectgebied (m²): <input id="opp" type="number" value="10000"></label><br> +<div class="inputrow"> 
-<label>FSI: <input id="fsi" type="number" step="0.01" value="1.2"></label><br> +    <label for="opp">Oppervlak projectgebied (m²):</label> 
-<label>GSI: <input id="gsi" type="number" step="0.01" value="0.33"></label><br> +    <input id="opp" type="number" value="10000" oninput="updateLaadvermogen()"> 
-<label>% BVO voor voorzieningen: <input id="voorziening" type="number" step="0.01" value="10"></label><br><br>+    <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"> <table class="rekenblok">
     <thead>     <thead>
         <tr>         <tr>
             <th>Type</th>             <th>Type</th>
-            <th>% aandeel (van totaal aantal woningen)</th> +            <th style="width: 60px;">%</th> 
-            <th>m² BVO / woning</th>+            <th style="width: 70px;">m²/won</th> 
 +            <th>Aantal</th> 
 +            <th>Tot. BVO</th>
         </tr>         </tr>
     </thead>     </thead>
-    <tbody id="woningtypes"> +    <tbody id="woningtypes"></tbody> 
-        <!-- Dynamisch gevuld via JS --> +    <tfoot> 
-    </tbody>+        <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> </table>
-<br> +</div>
-<button onclick="bereken()">Bereken</button>+
  
 <h3>Resultaat</h3> <h3>Resultaat</h3>
Line 43: Line 121:
  
     const tbody = document.getElementById("woningtypes");     const tbody = document.getElementById("woningtypes");
 +
     types.forEach((type, i) => {     types.forEach((type, i) => {
         const row = document.createElement("tr");         const row = document.createElement("tr");
 +        if (i === 5) row.className = "scheiding";
         row.innerHTML = `         row.innerHTML = `
             <td style="text-align: left;">${type}</td>             <td style="text-align: left;">${type}</td>
-            <td><input type="number" step="1" id="perc_${i}" value="${i < 5 ? 5 : 10}"></td> +            <td><input type="number" id="perc_${i}" value="${i < 5 ? 5 : 10}" step="0.1" oninput="updateLaadvermogen()"></td> 
-            <td><input type="number" step="1" id="bvo_${i}" value="${i < 5 ? 130 : 90}"></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);         tbody.appendChild(row);
     });     });
  
-    function bereken() {+    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 opp = parseFloat(document.getElementById("opp").value);
         const fsi = parseFloat(document.getElementById("fsi").value);         const fsi = parseFloat(document.getElementById("fsi").value);
 +        const gsi = parseFloat(document.getElementById("gsi").value);
         const voorzieningPerc = parseFloat(document.getElementById("voorziening").value) / 100;         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 laadvermogen = opp * fsi;
         const woonBVO = laadvermogen * (1 - voorzieningPerc);         const woonBVO = laadvermogen * (1 - voorzieningPerc);
Line 66: 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;
-            details.push({ 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 = Math.round(woonBVO / gewogenBVO); +        const decimaalSort = details.map((d, i) => ({ 
-        let html = `<p><b>Gecorrigeerd laadvermogen (BVO):</b> ${woonBVO.toFixed(0)} m²<br>`; +            i, rest: ((d.perc / 100) * totaalWoningenExact) % 1 
-        html += `<b>Gewogen BVO/ehd:</b> ${gewogenBVO.toFixed(1)} m²<br>`; +        })).sort((a, b) => b.rest - a.rest);
-        html += `<b>Totaal aantal woningen:</b> ${totaalWoningen}</p>`;+
  
-        html += `<table class="rekenblok"><thead><tr><th>Type</th><th>Aantal woningen</th><th>Totale BVO</th></tr></thead><tbody>`; +        for (let j = 0; j < restant; j++) { 
-        details.forEach(({ type, perc, bvo }) => { +            wonPerType[decimaalSort[j].i]++; 
-            const aant = Math.round((perc / 100) * totaalWoningen); +        }
-            const bvoTot = aant * bvo; +
-            html += `<tr><td style="text-align:left;">${type}</td><td>${aant}</td><td>${bvoTot}</td></tr>`; +
-        }); +
-        html += "</tbody></table>";+
  
-        document.getElementById("output").innerHTML = html;+        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 = `${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> 
 +        `;
     }     }
 +
 +    updateLaadvermogen();
 </script> </script>
-</HTML>+</html> 
handleiding_nieuw/sub_spacematrix.1744727866.txt.gz · Last modified: 2025/04/15 14:37 by support