Differences

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

--- handleiding_nieuw:sub_spacematrix [2025/05/07 09:29] – support
+++ handleiding_nieuw:sub_spacematrix [2026/01/31 10:06] (current) – external edit 127.0.0.1
@@ Line 2: / Line 2: @@
 <html lang="nl">
 <head>
-<meta charset="UTF-8">
+<script src="https://unpkg.com/pizzip@3.1.5/dist/pizzip.min.js"></script>
-<title>Spacematrix Rekenblok + Voorzieningen</title>
+<script src="https://unpkg.com/docxtemplater@3.29.1/build/docxtemplater.js"></script>
-<style>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
-    body { font-family: sans-serif; margin: 20px; }
+  <meta charset="UTF-8">
-    .tabs { display: flex; gap: 10px; margin-bottom: 15px; }
+  <title>Spacematrix Rekenblok + Voorzieningen + Parkeren</title>
-    .tab { padding: 10px 15px; background: #ddd; cursor: pointer; border-radius: 5px 5px 0 0; }
-    .tab.active { background: #f0f0f0; font-weight: bold; }
+  <style>
-    .tabcontent { display: none; border: 1px solid #ccc; padding: 15px; border-radius: 0 5px 5px 5px; }
+/* ========== Tabs ========== */
-    .tabcontent.active { display: block; }
-    .inputrow { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
+.tabs{
-    .inputrow label { width: 240px; }
+  display:flex;
-    .inputrow input { width: 80px; }
+  gap:6px;
-    table { border-collapse: collapse; width: 100%; margin-top: 10px; }
+  margin: 12px 0 0 0;
-    th, td { border: 1px solid #ccc; padding: 5px; text-align: right; }
+  padding: 0;
-    th { background: #f0f0f0; }
+  flex-wrap:wrap;
-    td:first-child, th:first-child { text-align: left; }
+}
+.tab{
+  padding:8px 12px;
+  background:#e7e7e7;
+  cursor:pointer;
+  border:1px solid #cfcfcf;
+  border-bottom:none;
+  border-radius:8px 8px 0 0;
+  color:#222;
+  font-weight:600;
+  user-select:none;
+}
+.tab:hover{ background:#dddddd; }
+.tab.active{
+  background:#ffffff;
+  position:relative;
+  top:1px;
+  font-weight:700;
+}
+.tabcontent{
+  display:none;
+  border:1px solid #cfcfcf;
+  padding:15px;
+  border-radius:0 8px 8px 8px;
+  background:#fff;
+}
+.tabcontent.active{ display:block; }
+@media (max-width: 900px){
+  .tabs{ gap:6px; }
+}
+  body { font-family: sans-serif; margin: 20px; }
+  .inputrow { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
+  .inputrow label { width: 240px; }
+  .inputrow input { width: 80px; }
+  table { border-collapse: collapse; width: 100%; margin-top: 10px; }
+  th, td { border: 1px solid #ccc; padding: 5px; text-align: right; }
+  th { background: #f0f0f0; }
+  td:first-child, th:first-child { text-align: left; }
+  .kaartcontainer { position: relative; max-width: 350px; margin-top: 20px; }
+  .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; }
+  .perc-warning{ color: #b00020; font-weight: 700; }
+  /* ========== Header + Scenario bar ========== */
+  .pageheader{
+    display:flex;
+    align-items:flex-end;
+    justify-content:space-between;
+    gap:16px;
+    margin-bottom:10px;
+  }
+  .pageheader h1{
+    margin:0;
+    line-height:1.05;
+  }
+  .scenario-bar{
+  display:flex;
+  align-items:flex-start;
+  justify-content:flex-end;
+  gap:12px;
+  flex-wrap:wrap;
+}
+.scenario-left{
+  display:flex;
+  flex-direction:column;
+  gap:4px;
+  min-width:360px;
+  flex:1;
+}
+.scenario-left select{
+  height:34px;
+  padding:0 10px;
+  border-radius:6px;
+  border:1px solid #c9d6d6;
+  background:#fff;
+}
+.scenario-right{
+  display:flex;
+  align-items:center;
+  gap:8px;
+  flex-wrap:wrap;
+  justify-content:flex-end;
+}
+.scenario-right .btn{
+  height:34px;
+  padding:0 10px;
+  border-radius:6px;
+  border:1px solid #c9d6d6;
+  background:#f4f7f7;
+  color:#113333;
+  font-weight:700;
+  cursor:pointer;
+}
+.scenario-right .btn:hover{
+  background:#e9f1f1;
+  border-color:#9fbcbc;
+}
+.scenario-right .btn.primary{
+  background:#3aa39a;
+  border-color:#2e8f86;
+  color:#fff;
+}
+.scenario-right .btn.primary:hover{
+  background:#2e8f86;
+}
+.scenario-right .btn.danger{
+  background:#f7eaea;
+  border-color:#e2bcbc;
+  color:#7a1f1f;
+}
+.scenario-right .btn.danger:hover{
+  background:#f2dcdc;
+}
+#sm_loaded_label{ color:#2b4a4a; font-size:0.92em; }
+#sm_save_status{ color:#2b4a4a; font-size:0.9em; white-space:nowrap; margin-left:6px; }
+/* ====== Spacematrix legenda (onder invoervelden, links) + hover-tooltips ====== */
+.sm-legend{
+  margin-top: 14px;
+  border: 1px solid #c9d6d6;
+  border-radius: 8px;
+  background: #fff;
+  padding: 6px 8px;
+  max-width: 250px;
+  min-height: 118px;
+  margin-bottom: 14px;
+}
+.sm-legend-title{
+  margin: 0 0 6px 0;
+  font-size: 0.84rem;
+  font-weight: 700;
+  color: #113333;
+}
+.sm-legend-grid{
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 5px;
+}
+.sm-legend-item{
+  display: grid;
+  grid-template-columns: 22px auto;
+  gap: 6px;
+  align-items: start;
+  font-size: 0.80rem;
+  line-height: 1.15;
+  color: #1f3e3e;
+}
+.sm-zone-badge{
+  width: 18px;
+  height: 18px;
+  border-radius: 4px;
+  font-size: 0.68rem;
+  font-weight: 800;
+  background: #e9f1f1;
+  border: 1px solid #c9d6d6;
+  color: #113333;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.sm-legend-short{
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+/* Info-icoon (klein en rustig) */
+.sm-legend-i{
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.72rem;
+  font-weight: 800;
+  border: 1px solid #c9d6d6;
+  background: #f4f7f7;
+  color: #2b4a4a;
+  cursor: help;
+  user-select: none;
+}
+/* ====== Tooltip mechaniek ======*/
+.sm-tip{
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+/* Tooltip bubble */
+.sm-tip::after{
+  content: attr(data-tip);
+  position: absolute;
+  left: 0;
+  top: calc(100% + 8px);
+  width: 260px;
+  max-width: 70vw;
+  background: #113333;
+  color: #fff;
+  padding: 8px 10px;
+  border-radius: 8px;
+  font-size: 0.8rem;
+  line-height: 1.25;
+  box-shadow: 0 8px 18px rgba(0,0,0,0.18);
+  opacity: 0;
+  transform: translateY(-4px);
+  pointer-events: none;
+  transition: opacity 120ms ease, transform 120ms ease;
+  z-index: 50;
+  white-space: normal;
+}
+/* Tooltip pijltje */
+.sm-tip::before{
+  content: "";
+  position: absolute;
+  left: 10px;
+  top: calc(100% + 2px);
+  border: 6px solid transparent;
+  border-bottom-color: #113333;
+  opacity: 0;
+  transform: translateY(-4px);
+  pointer-events: none;
+  transition: opacity 120ms ease, transform 120ms ease;
+  z-index: 51;
+}
+/* Toon tooltip bij hover/focus */
+.sm-tip:hover::after,
+.sm-tip:focus-within::after,
+.sm-tip:hover::before,
+.sm-tip:focus-within::before{
+  opacity: 1;
+  transform: translateY(0);
+}
+/* Toegankelijk: focus-ring op i */
+.sm-legend-i:focus{
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(0, 116, 217, 0.18);
+  border-color: #9fbfe6;
+}
+/* Mobiel: iets breder tooltip */
+@media (max-width: 600px){
+  .sm-tip::after{ width: 240px; }
+}
 </style>
+  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 </head>
 <body>
-<h1>Spacematrix & Voorzieningen</h1>
+<div class="pageheader">
+  <h1>Stedelijke Dichtheidsrekenmachine</h1>
+ <div class="scenario-bar">
+  <div class="scenario-left">
+    <select id="sm_scenario_select" title="Kies een opgeslagen scenario" onchange="smUI_onScenarioChange()"></select>
+    <span id="sm_loaded_label"></span>
+  </div>
+  <div class="scenario-right">
+    <button class="btn primary" type="button" onclick="smUI_save()">Opslaan…</button>
+    <button class="btn primary" type="button" onclick="smUI_loadSelected()">Openen</button>
+    <button class="btn danger" type="button" onclick="smUI_deleteSelected()">Verwijderen</button>
+    <button class="btn" type="button" onclick="smUI_openHelp()">Handleiding</button>
+    <button class="btn" type="button" onclick="smUI_resetAll()">Reset</button>
+    <span id="sm_save_status"></span>
+  </div>
+</div>
+</div>
+<!-- RESPONSIVE VOOR MOBIELE TELEFOONS -->
+<div class="mobile-hint">
+  <strong>Let op (mobiele weergave)</strong><br>
+  Deze pagina bevat interactieve grafieken en tabellen die zijn ontworpen voor gebruik op een groter scherm.
+  Voor een beter overzicht kun je je telefoon liggend houden of deze pagina openen op een tablet of laptop.
+</div>
 <div class="tabs">
-    <div class="tab active" onclick="switchTab('rekenblok')">Spacematrix Rekenblok</div>
-    <div class="tab" onclick="switchTab('voorzieningen')">Voorzieningen</div>
+  <div class="tab active" onclick="switchTab('rekenblok')">Spacematrix Rekenblok</div>
+  <div class="tab" onclick="switchTab('voorzieningen')">Voorzieningen</div>
+  <div class="tab" onclick="switchTab('parkeren')">Parkeren</div>
+  <div class="tab" onclick="switchTab('openbareruimte')">Openbare Ruimte</div>
 </div>
 <div id="rekenblok" class="tabcontent active">
-    <div class="inputrow">
+  <div class="bovenblok" style="display: flex; gap: 20px; align-items: flex-start;">
+    <div class="inputvelden" style="flex: 1;">
+      <div class="inputrow">
         <label for="opp">Oppervlak projectgebied (m²):</label>
         <input id="opp" type="number" value="10000" oninput="updateLaadvermogen()">
-    </div>
+      </div>
-    <div class="inputrow">
+      <div class="inputrow">
         <label for="fsi">FSI:</label>
         <input id="fsi" type="number" step="0.01" value="1.6" oninput="updateLaadvermogen()">
+      </div>
+      <div class="inputrow">
+        <label for="gsi">GSI:</label>
+        <input id="gsi" type="number" step="0.01" value="0.3" oninput="updateLaadvermogen()">
+      </div>
+      <div class="inputrow">
+        <label>Voorzieningenruimte per woning (m²):</label>
+        <span id="voorzieningenruimte_display">-</span>
+        <input type="hidden" id="voorzieningenruimte_waarde" value="0">
+	  </div>
+	<!-- legenda Spacematrix -->
+<div class="sm-legend">
+  <div class="sm-legend-title">Legenda zones (A–H)</div>
+  <div class="sm-legend-grid">
+    <div class="sm-legend-item">
+      <span class="sm-zone-badge">A</span>
+      <div class="sm-legend-short">
+        Low-rise spacious blocks
+        <span class="sm-tip" data-tip="Lage bouwhoogte met veel open ruimte. Past bij tuinstedelijke of ruime woonmilieus.">
+          <span class="sm-legend-i" tabindex="0">i</span>
+        </span>
+      </div>
     </div>
-    <div class="inputrow">
-        <label for="voorzieningenruimte">Voorzieningenruimte per woning (m²):</label>
+    <div class="sm-legend-item">
-        <input id="voorzieningenruimte" type="number" step="0.1" value="12.0" oninput="updateLaadvermogen()">
+      <span class="sm-zone-badge">B</span>
+      <div class="sm-legend-short">
+        Low-rise compact blocks
+        <span class="sm-tip" data-tip="Lage bouwhoogte met compacte verkaveling. Veelal grondgebonden woningen.">
+          <span class="sm-legend-i" tabindex="0">i</span>
+        </span>
+      </div>
     </div>
-    <table>
-        <thead>
-            <tr><th>Type</th><th>%</th><th>m²/won</th><th>Aantal</th><th>Tot. BVO</th></tr>
-        </thead>
-        <tbody id="woningtypes"></tbody>
-        <tfoot>
-            <tr><th>Totaal</th><th id="totaal_perc">-</th><th id="totaal_gewbvo">-</th><th id="totaal_won">-</th><th id="totaal_bvo">-</th></tr>
-        </tfoot>
-    </table>
-    <div id="output"></div>
-</div>
-<div id="voorzieningen" class="tabcontent">
+    <div class="sm-legend-item">
-    <div class="inputrow">
+      <span class="sm-zone-badge">C</span>
-        <label>Aantal bewoners per woning:</label>
+      <div class="sm-legend-short">
-        <input id="bewoners_per_woning" type="number" step="0.1" value="2.2">
+        Mid-rise open blocks
+        <span class="sm-tip" data-tip="Middelhoge bebouwing met relatief open opzet en duidelijke openbare ruimte.">
+          <span class="sm-legend-i" tabindex="0">i</span>
+        </span>
+      </div>
     </div>
-    <table>
-        <thead>
+    <div class="sm-legend-item">
-            <tr><th>Voorziening</th><th>Norm (m² per 1000)</th><th>Selecteer</th></tr>
+      <span class="sm-zone-badge">D</span>
-        </thead>
+      <div class="sm-legend-short">
-        <tbody id="voorzieningentabel"></tbody>
+        Mid-rise spacious blocks
-    </table>
+        <span class="sm-tip" data-tip="Middelhoge bebouwing met meer lagen, maar nog steeds een ruimtelijk karakter.">
-    <div class="inputrow">
+          <span class="sm-legend-i" tabindex="0">i</span>
-        <button onclick="berekenVoorzieningenruimte()">Toepassen in rekenblok</button>
+        </span>
-        <div id="voorziening_resultaat"></div>
+      </div>
     </div>
+    <div class="sm-legend-item">
+      <span class="sm-zone-badge">E</span>
+      <div class="sm-legend-short">
+        Mid-rise compact blocks
+        <span class="sm-tip" data-tip="Compact stedelijk woonmilieu met hogere dichtheid en beperkte open ruimte.">
+          <span class="sm-legend-i" tabindex="0">i</span>
+        </span>
+      </div>
+    </div>
+    <div class="sm-legend-item">
+      <span class="sm-zone-badge">F</span>
+      <div class="sm-legend-short">
+        Mid-rise closed blocks
+        <span class="sm-tip" data-tip="Gesloten bouwblokken met duidelijke straatwanden en hogere stedelijkheid.">
+          <span class="sm-legend-i" tabindex="0">i</span>
+        </span>
+      </div>
+    </div>
+    <div class="sm-legend-item">
+      <span class="sm-zone-badge">G</span>
+      <div class="sm-legend-short">
+        Mid-rise super-blocks
+        <span class="sm-tip" data-tip="Zeer intensieve stedelijke blokken met hoge FSI en multifunctioneel gebruik.">
+          <span class="sm-legend-i" tabindex="0">i</span>
+        </span>
+      </div>
+    </div>
+    <div class="sm-legend-item">
+      <span class="sm-zone-badge">H</span>
+      <div class="sm-legend-short">
+        High-rise developments
+        <span class="sm-tip" data-tip="Hoogbouwontwikkelingen met veel lagen, vaak gecombineerd met open ruimte op maaiveld.">
+          <span class="sm-legend-i" tabindex="0">i</span>
+        </span>
+      </div>
+    </div>
+  </div>
 </div>
-<script>
+	<!-- Einde Legenda en Tooltip -->
-const voorzieningen = [
-    { naam: "Huisarts", norm: 56 },
+	</div>
-    { naam: "Fysiotherapie", norm: 54 },
-    { naam: "Tandarts", norm: 57 },
-    { naam: "Kinderopvang", norm: 2025 },
-    { naam: "Basisschool", norm: 5800 },
-    { naam: "Bibliotheek", norm: 60 },
-    { naam: "Buurtcentrum", norm: 70 },
-    { naam: "Sporthal", norm: 165 },
-    { naam: "Zwemmen (overdekt)", norm: 45 },
-    { naam: "Winkels dagelijkse goederen", norm: 420 }
-];
-const types = ["egw sociaal", "egw goedkoop", "egw midden", "egw duur", "egw top", "mgw sociaal", "mgw goedkoop", "mgw midden", "mgw duur", "mgw top"];
+	<div class="kaartcontainer" style="max-width: 500px;">
+      <img src="/wiki/lib/exe/fetch.php?media=handleiding_nieuw:spacematrix:SPACEMATE1.png" alt="Spacematrix kaart">
+      <div class="stipje" id="stipje"></div>
+    </div>
+  </div>
-function switchTab(tabId) {
+  <div class="onderblok">
-    document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
+    <table>
-    document.querySelectorAll('.tabcontent').forEach(c => c.classList.remove('active'));
+      <thead>
-    document.querySelector(`.tab[onclick*="${tabId}"]`).classList.add('active');
+        <tr><th>Type</th><th>%</th><th>m²/won</th><th>Aantal</th><th>Tot. BVO</th></tr>
-    document.getElementById(tabId).classList.add('active');
+      </thead>
-}
+      <tbody id="woningtypes"></tbody>
+      <tfoot>
+        <tr><th>Totaal</th><th id="totaal_perc">-</th><th id="totaal_gewbvo">-</th><th id="totaal_won">-</th><th id="totaal_bvo">-</th></tr>
+      </tfoot>
+    </table>
-function renderWoningtypes() {
+    <div style="margin-top: 10px; font-size: 0.9em; color: #555;">
-    const tbody = document.getElementById("woningtypes");
+  <strong>Let op:</strong> de voorzieningenruimte zoals weergegeven in deze samenvatting kan iets afwijken van de berekening op het tabblad <em>Voorzieningen</em>.
-    tbody.innerHTML = "";
+  Dit komt doordat het aantal woningen iteratief wordt bepaald op basis van de beschikbare ruimte, inclusief ruimte voor voorzieningen en parkeren.
-    types.forEach((type, i) => {
+  Bij het toepassen van voorzieningen wordt eerst een schatting gemaakt op basis van een voorlopig aantal woningen. Daarna wordt het aantal woningen opnieuw berekend met de benodigde ruimte per woning.
-        const row = document.createElement("tr");
+  Hierdoor ontstaat een klein verschil tussen het oorspronkelijk berekende totaal en de daadwerkelijk ingepaste voorzieningenruimte.
-        row.innerHTML = `
+</div>
-            <td>${type}</td>
-            <td><input type="number" id="perc_${i}" value="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 updateLaadvermogen() {
+    <div id="output"></div>
-    const opp = parseFloat(document.getElementById("opp").value);
+    <div id="summary">
-    const fsi = parseFloat(document.getElementById("fsi").value);
+      <h3>Samenvatting</h3>
-    const bvoTot = opp * fsi;
+      <table>
-    const voorzieningenruimte = parseFloat(document.getElementById("voorzieningenruimte").value);
+        <tr><td><strong>Totaal laadvermogen (BVO)</strong></td><td id="summary_bvo_tot">-</td></tr>
+        <tr><td>Woonruimte (BVO)</td><td id="summary_wonen_bvo">-</td></tr>
+        <tr><td>Voorzieningenruimte (BVO)</td><td id="summary_voorz_tot">-</td></tr>
+        <tr><td>Parkeerruimte bovengronds (BVO)</td><td id="summary_parkeren_tot">-</td></tr>
+		<tr>
+          <td colspan="2" style="background: #e0e0e0; font-weight: bold; text-transform: uppercase; letter-spacing: 0.5px; font-size: 0.9rem; border-top: 2px solid #999; border-bottom: 1px solid #ccc; color: #333;">
+          Kengetallen
+          </td>
+        </tr>
+        <tr><td>Voorzieningenruimte per woning (m²)</td><td id="summary_voorz_per_won">-</td></tr>
+        <tr><td>Parkeerruimte per woning (m²)</td><td id="summary_parkeren_per_won">-</td></tr>
+        <tr><td>Totaal aantal parkeerplaatsen</td><td id="summary_pp_tot">-</td></tr>
+        <tr><td>Totale woonruimte incl. voorzieningen en parkeren</td><td id="summary_wonen">-</td></tr>
+        <tr><td>Totaal aantal woningen</td><td id="summary_woningen">-</td></tr>
+      </table>
+    </div>
+  </div>
+  <div style="margin-top: 20px;">
+  <button onclick="downloadKickstartDump()" style="padding: 10px 20px; font-size: 1rem; background-color: #0074d9; color: black; border: none; border-radius: 5px; cursor: pointer;">
+    📄 Kickstart Dump downloaden
+  </button>
+</div>
+</div>
-    let gewogenBVO = 0;
+<div id="voorzieningen" class="tabcontent">
-    let totalPerc = 0;
+  <div class="inputrow">
-    const details = [];
+    <label>Aantal bewoners per woning:</label>
-    for (let i = 0; i < types.length; i++) {
+    <input id="bewoners_per_woning" type="number" step="0.1" value="2.2">
-        const perc = parseFloat(document.getElementById(`perc_${i}`).value) || 0;
+  </div>
-        const bvo = parseFloat(document.getElementById(`bvo_${i}`).value) || 0;
+  <table>
-        gewogenBVO += (perc / 100) * bvo;
+    <thead>
-        totalPerc += perc;
+      <tr><th>Voorziening</th><th>Norm (m² per 1000)</th><th>Selecteer</th></tr>
-        details.push({ i, perc, bvo });
+    </thead>
-    }
+    <tbody id="voorzieningentabel"></tbody>
-    if (gewogenBVO === 0) return;
+  </table>
+  <div class="inputrow">
+    <button id="btn_voorzieningen" onclick="berekenVoorzieningenruimte()">Toepassen in rekenblok</button>
+    <div id="voorziening_resultaat" style="margin-left: 10px;"></div>
+  </div>
+  <h3>Overzicht geselecteerde voorzieningen</h3>
+<table id="voorzieningen_totaal">
+  <thead>
+    <tr><th>Voorziening</th><th>Berekend m²</th></tr>
+  </thead>
+  <tbody id="voorziening_summary_tabel"></tbody>
+  <tfoot>
+    <tr><th>Totaal</th><th id="voorziening_summary_totaal">-</th></tr>
+  </tfoot>
+</table>
-    let woningen = Math.floor(bvoTot / (gewogenBVO + voorzieningenruimte));
-    let sumWon = 0;
-    let sumBVO = 0;
-    let wonPerType = [];
-    let restant = woningen;
-    for (let i = 0; i < details.length; i++) {
+<div style="margin-top: 10px; font-size: 0.9em; color: #555;">
-        const { perc } = details[i];
+  <strong>Toelichting:</strong> het weergegeven totaal van de voorzieningenruimte is gebaseerd op een schatting op basis van het huidige aantal woningen.
-        let aant = (perc / 100) * woningen;
+  Nadat dit oppervlak per woning is berekend, wordt het aantal woningen in het rekenblok opnieuw doorgerekend. Hierdoor kan het werkelijke totaal afwijken.
-        let afgerond = Math.floor(aant);
+  Deze iteratieve aanpak is nodig omdat de benodigde ruimte per woning invloed heeft op hoeveel woningen uiteindelijk in het plan passen.
-        wonPerType.push(afgerond);
+ </div>
-        restant -= afgerond;
+</div>
-    }
-    const decimaalSort = details.map((d, i) => ({ i, rest: ((d.perc / 100) * woningen) % 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 = aant;
-        document.getElementById(`totbvo_${i}`).innerText = bvoTot.toFixed(0);
-        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 = sumWon;
-    document.getElementById("totaal_bvo").innerText = sumBVO.toFixed(0);
-    document.getElementById("output").innerHTML =
+<div id="parkeren" class="tabcontent">
-        `<p><b>Gewogen BVO/ehd:</b> ${gewogenBVO.toFixed(1)} m²<br><b>Totaal aantal woningen:</b> ${sumWon}</p>`;
+  <h3>Parkeren</h3>
-}
+  <div class="inputrow">
+    <label>Parkeerplaatsen per woning:</label>
+    <input id="pp_per_woning" type="number" step="0.1" value="1.0">
+  </div>
+  <div class="inputrow">
+    <label>BVO per parkeerplaats (m²):</label>
+    <input id="bvo_per_pp" type="number" step="1" value="25">
+  </div>
+  <div class="inputrow">
+    <label>% Ondergronds:</label>
+    <input id="pp_ondergronds" type="number" step="1" value="50">
+  </div>
+  <div class="inputrow">
+    <label>% Bovengronds:</label>
+    <input id="pp_bovengronds" type="number" step="1" value="50">
+  </div>
+  <div class="inputrow">
+    <button id="btn_parkeren" onclick="berekenParkeerruimte()">Toepassen in rekenblok</button>
+    <div id="parkeer_resultaat" style="margin-left: 10px;"></div>
+  </div>
+  <h3>Overzicht parkeerplaatsen</h3>
+<table>
+  <tbody>
+    <tr><td>Aantal parkeerplaatsen totaal</td><td id="pp_totaal">-</td></tr>
+    <tr><td>Bovengronds (% / aantal)</td><td id="pp_boven">-</td></tr>
+    <tr><td>Ondergronds (% / aantal)</td><td id="pp_onder">-</td></tr>
+  </tbody>
+</table>
+</div>
-function maakVoorzieningentabel() {
+<div id="openbareruimte" class="tabcontent">
-    const tbody = document.getElementById("voorzieningentabel");
+  <h3>Openbare Ruimte</h3>
-    voorzieningen.forEach((v, i) => {
+  <p>Verdeling van de onbebouwde ruimte (oppervlak projectgebied minus bebouwde oppervlak volgens GSI):</p>
-        const row = document.createElement("tr");
+  <table>
-        row.innerHTML = `
+    <label>Stedelijkheidstype:</label>
-            <td>${v.naam}</td>
+    <select id="stedelijkheidstype" onchange="setVerdelingStedelijkheid()">
-            <td>${v.norm}</td>
+      <option value="auto">Afhankelijk van FSI/GSI</option>
-            <td><input type="checkbox" id="vchk_${i}" checked></td>
+      <option value="centrum">Centrumstedelijk</option>
-        `;
+      <option value="gemengd">Gemengd</option>
-        tbody.appendChild(row);
+      <option value="suburbaan">Suburbaan</option>
-    });
+    </select>
-}
+	<thead>
+      <tr>
+        <th>Oppervlaktetype</th>
+        <th>Standaard (%)</th>
+        <th>Aanpassing (%)</th>
+        <th>Oppervlak (m²)</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr><td>Groen</td><td>30</td><td><input type="number" id="perc_groen" value="30" oninput="updateOpenbareRuimte()"></td><td id="m2_groen">-</td></tr>
+      <tr><td>Water</td><td>10</td><td><input type="number" id="perc_water" value="10" oninput="updateOpenbareRuimte()"></td><td id="m2_water">-</td></tr>
+      <tr><td>Tuinen</td><td>15</td><td><input type="number" id="perc_tuinen" value="15" oninput="updateOpenbareRuimte()"></td><td id="m2_tuinen">-</td></tr>
+      <tr><td>Rijbanen</td><td>15</td><td><input type="number" id="perc_rijbanen" value="15" oninput="updateOpenbareRuimte()"></td><td id="m2_rijbanen">-</td></tr>
+      <tr><td>Trottoirs</td><td>10</td><td><input type="number" id="perc_trottoirs" value="10" oninput="updateOpenbareRuimte()"></td><td id="m2_trottoirs">-</td></tr>
+      <tr><td>Parkeren (bovengronds)</td><td>10</td><td><input type="number" id="perc_parkeren" value="10" oninput="updateOpenbareRuimte()"></td><td id="m2_parkeren">-</td></tr>
+      <tr><td>Pleinen</td><td>10</td><td><input type="number" id="perc_pleinen" value="10" oninput="updateOpenbareRuimte()"></td><td id="m2_pleinen">-</td></tr>
+    </tbody>
+	<tfoot>
+     <tr><th colspan="3">Totaal</th><th id="m2_totaal_onbebouwd">-</th></tr>
+    </tfoot>
+  </table>
+  <p style="margin-top:10px;"><button onclick="updateOpenbareRuimte()">Herbereken verdeling</button></p>
+  <div id="warning_openbareruimte" style="color: red; font-weight: bold;"></div>
+  <canvas id="openbareRuimteChart" width="150" height="150" style="margin-top:20px;"></canvas>
+</div>
-function berekenVoorzieningenruimte() {
-    const bewonersPerWoning = parseFloat(document.getElementById("bewoners_per_woning").value);
-    const woningen = 131; // Voor nu vast; later dynamisch maken
-    const totaalBewoners = woningen * bewonersPerWoning;
-    let totaal_m2 = 0;
+<script src="/wiki/tools/dichtheidsrekenmachine/sm_rekenmachine_v1.js?v=1"></script>
-    voorzieningen.forEach((v, i) => {
-        const checked = document.getElementById(`vchk_${i}`).checked;
-        if (checked) {
-            totaal_m2 += v.norm * totaalBewoners / 1000;
-        }
-    });
-    const m2_per_woning = totaal_m2 / woningen;
-    document.getElementById("voorziening_resultaat").innerHTML =
-        `<b>${totaal_m2.toFixed(1)} m² totaal</b> → ${m2_per_woning.toFixed(1)} m² per woning`;
-    document.getElementById("voorzieningenruimte").value = m2_per_woning.toFixed(1);
-    updateLaadvermogen();
-}
-window.onload = () => {
-    renderWoningtypes();
-    maakVoorzieningentabel();
-    updateLaadvermogen();
-};
-</script>
 </body>
 </html>