Differences

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

--- handleiding_nieuw:sub_spacematrix [2025/04/07 14:18] – support
+++ handleiding_nieuw:sub_spacematrix [2025/04/15 15:51] (current) – support
@@ Line 1: / Line 1: @@
 <html>
 <style>
-  .spacematrix-wrapper {
+    .inputrow {
-    max-width: 100%;
+        display: flex;
-    text-align: center;
+        align-items: center;
-  }
+        gap: 10px;
-  .spacematrix-wrapper img {
+        margin-bottom: 8px;
-    width: 90%;
+    }
-    height: auto;
+    .inputrow label {
-    border: 2px solid #ddd;
+        width: 200px;
-    border-radius: 10px;
+    }
-  }
+    .inputrow input {
-  .spacematrix-caption {
+        width: 80px;
-    margin-top: 10px;
+    }
-    font-style: italic;
+    .resultblock {
-    color: #666;
+        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 {
+        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="spacematrix-wrapper">
+<div style="position: relative;">
-  <img id="spacematrix-img"
+    <div class="kaartcontainer">
-       src="/lib/exe/fetch.php?media=handleiding_nieuw:spacematrix:SPACEMATE1.png"
+        <img src="https://www.sumsonite.nl/wiki/lib/exe/fetch.php?media=handleiding_nieuw:spacematrix:SPACEMATE1.png" alt="Spacematrix kaart">
-       usemap="#spacematrixmap"
+        <div class="stipje" id="stipje"></div>
-       alt="Spacematrix interactief voorbeeld" />
+    </div>
-  <div class="spacematrix-caption">Klik op een zone in de Spacematrix om voorbeelden te bekijken</div>
 </div>
-<map name="spacematrixmap">
+<h2>Spacematrix Rekenblok</h2>
-  <area shape="rect" coords="80,320,150,370" href="/doku.php?id=handleiding_nieuw:sub_spacematrix:a" alt="Zone A">
-  <area shape="rect" coords="120,280,190,330" href="/doku.php?id=handleiding_nieuw:sub_spacematrix:c" alt="Zone C">
+<div class="inputrow">
-  <area shape="rect" coords="160,240,230,290" href="/doku.php?id=handleiding_nieuw:sub_spacematrix:e" alt="Zone E">
+    <label for="opp">Oppervlak projectgebied (m²):</label>
-  <area shape="rect" coords="200,200,270,250" href="/doku.php?id=handleiding_nieuw:sub_spacematrix:f" alt="Zone F">
+    <input id="opp" type="number" value="10000" oninput="updateLaadvermogen()">
-  <area shape="rect" coords="240,160,310,210" href="/doku.php?id=handleiding_nieuw:sub_spacematrix:g" alt="Zone G">
+    <div class="resultblock" id="lv1"></div>
-  <area shape="rect" coords="280,120,350,170" href="/doku.php?id=handleiding_nieuw:sub_spacematrix:h" alt="Zone H1">
+</div>
-  <area shape="rect" coords="320,80,390,130" href="/doku.php?id=handleiding_nieuw:sub_spacematrix:h" alt="Zone H2">
+<div class="inputrow">
-</map>
+    <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>
+    const types = [
+        "egw sociaal", "egw goedkoop", "egw midden", "egw duur", "egw top",
+        "mgw sociaal", "mgw goedkoop", "mgw midden", "mgw duur", "mgw top"
+    ];
+    const tbody = document.getElementById("woningtypes");
+    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;
+        }
+        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>
 </html>