Differences

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

--- handleiding_nieuw:sub_spacematrix [2025/05/07 09:35] – support
+++ handleiding_nieuw:sub_spacematrix [2026/01/31 10:06] (current) – external edit 127.0.0.1
@@ Line 1: / Line 1: @@
-<div id="summary">
+<html>
-        <h3>Samenvatting</h3>
+<html lang="nl">
-        <table>
+<head>
-            <tr><td>Laadvermogen (FSI × opp)</td><td id="summary_bvo">-</td></tr>
+<script src="https://unpkg.com/pizzip@3.1.5/dist/pizzip.min.js"></script>
-            <tr><td>Voorzieningenruimte totaal (m²)</td><td id="summary_voorz_tot">-</td></tr>
+<script src="https://unpkg.com/docxtemplater@3.29.1/build/docxtemplater.js"></script>
-            <tr><td>Voorzieningenruimte per woning (m²)</td><td id="summary_voorz_per_won">-</td></tr>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
-            <tr><td>Woonruimte (m²)</td><td id="summary_wonen">-</td></tr>
+  <meta charset="UTF-8">
-            <tr><td>Totaal aantal woningen</td><td id="summary_woningen">-</td></tr>
+  <title>Spacematrix Rekenblok + Voorzieningen + Parkeren</title>
-        </table>
+  <style>
+/* ========== Tabs ========== */
+.tabs{
+  display:flex;
+  gap:6px;
+  margin: 12px 0 0 0;
+  padding: 0;
+  flex-wrap:wrap;
+}
+.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>
+<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" onclick="switchTab('parkeren')">Parkeren</div>
+  <div class="tab" onclick="switchTab('openbareruimte')">Openbare Ruimte</div>
+</div>
+<div id="rekenblok" class="tabcontent active">
+  <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 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="sm-legend-item">
+      <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>
+    <div class="sm-legend-item">
+      <span class="sm-zone-badge">C</span>
+      <div class="sm-legend-short">
+        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>
+    <div class="sm-legend-item">
+      <span class="sm-zone-badge">D</span>
+      <div class="sm-legend-short">
+        Mid-rise spacious blocks
+        <span class="sm-tip" data-tip="Middelhoge bebouwing met meer lagen, maar nog steeds een ruimtelijk karakter.">
+          <span class="sm-legend-i" tabindex="0">i</span>
+        </span>
+      </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>
-<div id="voorzieningen" class="tabcontent">
+	<!-- Einde Legenda en Tooltip -->
-    <div class="inputrow">
-        <label>Aantal bewoners per woning:</label>
+	</div>
-        <input id="bewoners_per_woning" type="number" step="0.1" value="2.2">
+	<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>
+  <div class="onderblok">
     <table>
-        <thead>
+      <thead>
-            <tr><th>Voorziening</th><th>Norm (m² per 1000)</th><th>Selecteer</th></tr>
+        <tr><th>Type</th><th>%</th><th>m²/won</th><th>Aantal</th><th>Tot. BVO</th></tr>
-        </thead>
+      </thead>
-        <tbody id="voorzieningentabel"></tbody>
+      <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 class="inputrow">
-        <button onclick="berekenVoorzieningenruimte()">Toepassen in rekenblok</button>
+    <div style="margin-top: 10px; font-size: 0.9em; color: #555;">
-        <div id="voorziening_resultaat"></div>
+  <strong>Let op:</strong> de voorzieningenruimte zoals weergegeven in deze samenvatting kan iets afwijken van de berekening op het tabblad <em>Voorzieningen</em>.
+  Dit komt doordat het aantal woningen iteratief wordt bepaald op basis van de beschikbare ruimte, inclusief ruimte voor voorzieningen en parkeren.
+  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.
+  Hierdoor ontstaat een klein verschil tussen het oorspronkelijk berekende totaal en de daadwerkelijk ingepaste voorzieningenruimte.
+</div>
+    <div id="output"></div>
+    <div id="summary">
+      <h3>Samenvatting</h3>
+      <table>
+        <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>
-<script>
+<div id="voorzieningen" class="tabcontent">
-function updateStipje(fsi, gsi) {
+  <div class="inputrow">
-    const stip = document.getElementById("stipje");
+    <label>Aantal bewoners per woning:</label>
-    const x = Math.min(100, Math.max(0, gsi * 190));
+    <input id="bewoners_per_woning" type="number" step="0.1" value="2.2">
-    const y = Math.max(0, Math.min(100, (3 - fsi) * 35));
+  </div>
-    stip.style.left = `${x}%`;
+  <table>
-    stip.style.top = `${y}%`;
+    <thead>
-}
+      <tr><th>Voorziening</th><th>Norm (m² per 1000)</th><th>Selecteer</th></tr>
-document.addEventListener("DOMContentLoaded", () => {
+    </thead>
-    const updateSummary = (bvoTot, voorzTot, voorzPerWoning, woonruimte, woningen) => {
+    <tbody id="voorzieningentabel"></tbody>
-        document.getElementById("summary_bvo").innerText = `${bvoTot.toFixed(0)} m²`;
+  </table>
-        document.getElementById("summary_voorz_tot").innerText = `${voorzTot.toFixed(0)} m²`;
+  <div class="inputrow">
-        document.getElementById("summary_voorz_per_won").innerText = `${voorzPerWoning.toFixed(1)} m²`;
+    <button id="btn_voorzieningen" onclick="berekenVoorzieningenruimte()">Toepassen in rekenblok</button>
-        document.getElementById("summary_wonen").innerText = `${woonruimte.toFixed(0)} m²`;
+    <div id="voorziening_resultaat" style="margin-left: 10px;"></div>
-        document.getElementById("summary_woningen").innerText = `${woningen}`;
+  </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>
-    window.updateLaadvermogen = function() {
-        const opp = parseFloat(document.getElementById("opp").value);
-        const fsi = parseFloat(document.getElementById("fsi").value);
-        const gsi = parseFloat(document.getElementById("gsi").value);
-        const bvoTot = opp * fsi;
-        const voorzieningenruimte = parseFloat(document.getElementById("voorzieningenruimte").value);
-        updateStipje(fsi, gsi);
+<div style="margin-top: 10px; font-size: 0.9em; color: #555;">
+  <strong>Toelichting:</strong> het weergegeven totaal van de voorzieningenruimte is gebaseerd op een schatting op basis van het huidige aantal woningen.
+  Nadat dit oppervlak per woning is berekend, wordt het aantal woningen in het rekenblok opnieuw doorgerekend. Hierdoor kan het werkelijke totaal afwijken.
+  Deze iteratieve aanpak is nodig omdat de benodigde ruimte per woning invloed heeft op hoeveel woningen uiteindelijk in het plan passen.
+ </div>
+</div>
-        let gewogenBVO = 0;
+<div id="parkeren" class="tabcontent">
-        let totalPerc = 0;
+  <h3>Parkeren</h3>
-        const details = [];
+  <div class="inputrow">
-        for (let i = 0; i < 10; i++) {
+    <label>Parkeerplaatsen per woning:</label>
-            const perc = parseFloat(document.getElementById(`perc_${i}`).value) || 0;
+    <input id="pp_per_woning" type="number" step="0.1" value="1.0">
-            const bvo = parseFloat(document.getElementById(`bvo_${i}`).value) || 0;
+  </div>
-            gewogenBVO += (perc / 100) * bvo;
+  <div class="inputrow">
-            totalPerc += perc;
+    <label>BVO per parkeerplaats (m²):</label>
-            details.push({ i, perc, bvo });
+    <input id="bvo_per_pp" type="number" step="1" value="25">
-        }
+  </div>
-        if (gewogenBVO === 0) return;
+  <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>
-        let woningen = Math.floor(bvoTot / (gewogenBVO + voorzieningenruimte));
+<div id="openbareruimte" class="tabcontent">
-        let sumWon = 0;
+  <h3>Openbare Ruimte</h3>
-        let sumBVO = 0;
+  <p>Verdeling van de onbebouwde ruimte (oppervlak projectgebied minus bebouwde oppervlak volgens GSI):</p>
-        let wonPerType = [];
+  <table>
-        let restant = woningen;
+    <label>Stedelijkheidstype:</label>
+    <select id="stedelijkheidstype" onchange="setVerdelingStedelijkheid()">
+      <option value="auto">Afhankelijk van FSI/GSI</option>
+      <option value="centrum">Centrumstedelijk</option>
+      <option value="gemengd">Gemengd</option>
+      <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>
-        for (let i = 0; i < details.length; i++) {
-            const { perc } = details[i];
-            let aant = (perc / 100) * woningen;
-            let afgerond = Math.floor(aant);
-            wonPerType.push(afgerond);
-            restant -= afgerond;
-        }
-        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 =
+<script src="/wiki/tools/dichtheidsrekenmachine/sm_rekenmachine_v1.js?v=1"></script>
-            `<p><b>Gewogen BVO/ehd:</b> ${gewogenBVO.toFixed(1)} m²<br><b>Totaal aantal woningen:</b> ${sumWon}</p>`;
-        const voorzieningenTot = sumWon * voorzieningenruimte;
-        const wonenRuimte = bvoTot - voorzieningenTot;
-        updateSummary(bvoTot, voorzieningenTot, voorzieningenruimte, wonenRuimte, sumWon);
-    };
-});
-</script>
 </body>
 </html>