User Tools

Site Tools

Trace: • sub_dashboards • vaste_link
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/05/07 09:01] – supporthandleiding_nieuw:sub_spacematrix [2026/01/31 10:06] (current) – external edit 127.0.0.1
Line 2: Line 2:
 <html lang="nl"> <html lang="nl">
 <head> <head>
 +<script src="https://unpkg.com/pizzip@3.1.5/dist/pizzip.min.js"></script>
 +<script src="https://unpkg.com/docxtemplater@3.29.1/build/docxtemplater.js"></script>
 +<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
   <meta charset="UTF-8">   <meta charset="UTF-8">
-  <title>Spacematrix Tool</title>+  <title>Spacematrix Rekenblok + Voorzieningen + Parkeren</title> 
 +  
   <style>   <style>
-    body { font-family: sans-serif; margin: 20px; } +/* ========== Tabs ========== */ 
-    .tabs { display: flex; border-bottom: 2px solid #ccc; margin-bottom: 10px; } + 
-    .tab { padding: 10px 20px; cursor: pointer; border: 1px solid #ccc; border-bottom: none; background: #f9f9f9; margin-right: 5px; border-radius: 5px 5px 0 0; } +.tabs{ 
-    .tab.active { background: white; border-bottom: 2px solid white; font-weight: bold; } +  display:flex; 
-    .tabcontent { display: none; border: 1px solid #ccc; padding: 20px; border-radius: 0 5px 5px 5px; background: white; } +  gap:6px; 
-    .tabcontent.active { display: block; } +  margin: 12px 0 0 0; 
-    .inputrow { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } +  padding: 0; 
-    .inputrow label { width: 220px; } +  flex-wrap:wrap; 
-    .inputrow input { width: 80px; } +} 
-    table.rekenblok { border-collapse: collapse; margin-top: 20px; width: 100%; font-size: 0.9em; } + 
-    table.rekenblok th, table.rekenblok td { border: 1px solid #ccc; padding: 4px 6px; text-align: right; } +.tab{ 
-    table.rekenblok th { background: #f0f0f0; } +  padding:8px 12px; 
-    .scheiding td { border-top: 2px solid #666; background: #fafafa; } +  background:#e7e7e7; 
-    .resultblock { margin-left: 40px; min-width: 200px; text-align: right; font-size: 0.9em; } +  cursor:pointer; 
-    .kaartcontainer { position: relative; width: 320px; margin-top: 20px; } +  border:1px solid #cfcfcf; 
-    .kaartcontainer img { width: 100%; display: block; } +  border-bottom:none; 
-    .stipje { position: absolute; width: 14px; height: 14px; background: red; border-radius: 50%; transform: translate(-50%, -50%); border: 2px solid white; } +  border-radius:8px 8px 0 0; 
-  </style> +  color:#222; 
-<script> +  font-weight:600; 
-function switchTab(tabId) { +  user-select:none;
-  document.querySelectorAll(".tabcontent").forEach(el => el.classList.remove("active")); +
-  document.querySelectorAll(".tab").forEach(el => el.classList.remove("active")); +
-  document.getElementById(tabId).classList.add("active"); +
-  document.querySelector(`.tab[onclick*='${tabId}']`).classList.add("active");+
 } }
  
 +.tab:hover{ background:#dddddd; }
  
-function renderVoorzieningenlijst() { +.tab.active{ 
-  const lijst = document.createElement('div'); +  background:#ffffff; 
-  lijst.id = 'voorzieningenlijst'; +  position:relative; 
-  lijst.style.columns = '2'; +  top:1px; 
-  lijst.style.maxWidth = '600px'; +  font-weight:700;
-  lijst.style.marginTop = '10px'; +
-  lijst.innerHTML = voorzieningenData.map(([naam, norm], i) => ` +
-    <label><input type="checkbox" class="voorChk" data-norm="${norm}" checked> ${naam}</label><br> +
-  `).join(""); +
-  document.querySelector("#voorzieningen")?.appendChild(lijst);+
 } }
  
-function updateVoorzieningen(totalWon) { +.tabcontent{ 
-  const hhgrootte = parseFloat(document.getElementById("hhgrootte")?.value) || 2.2; +  display:none; 
-  const inwoners = totalWon * hhgrootte; +  border:1px solid #cfcfcf; 
-  let totaal = 0; +  padding:15px; 
-  document.querySelectorAll(".voorChk")?.forEach(chk => { +  border-radius:0 8px 8px 8px; 
-    if (chk.checked) { +  background:#fff;
-      const norm = parseFloat(chk.dataset.norm); +
-      totaal += Math.round(inwoners / 1000 * norm); +
-    } +
-  }); +
-  document.getElementById("voorziening_totaal")?.innerText = totaal.toLocaleString("nl-NL"); +
-  return totaal;+
 } }
  
-function updateParkeren(totalWon) { +.tabcontent.active{ display:block; } 
-  const pp = parseFloat(document.getElementById("pp_per_woning")?.value) || 1.2; + 
-  const m2pp = parseFloat(document.getElementById("m2_per_pp")?.value) || 25; +@media (max-width: 900px){ 
-  const perc = parseFloat(document.getElementById("perc_bovengronds")?.value) || 100; +  .tabs{ gap:6px; }
-  const parkeerOpp = Math.round(totalWon * pp * m2pp * (perc / 100)); +
-  document.getElementById("parkeren_totaal")?.innerText = parkeerOpp.toLocaleString("nl-NL"); +
-  return parkeerOpp;+
 } }
  
-function updateOpenbareRuimte(restBVO) { + 
-  const pctGroen = parseFloat(document.getElementById("pct_groen")?.value) || 0; +  body { font-family: sans-serif; margin: 20px; } 
-  const pctWater = parseFloat(document.getElementById("pct_water")?.value) || 0; + 
-  const pctVerharding = parseFloat(document.getElementById("pct_verharding")?.value) || 0; +  .inputrow { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } 
-  const oppGroen = Math.round(restBVO * pctGroen / 100); +  .inputrow label { width: 240px; } 
-  const oppWater = Math.round(restBVO * pctWater / 100); +  .inputrow input { width: 80px; } 
-  const oppVerharding = Math.round(restBVO * pctVerharding / 100); + 
-  document.getElementById("oppervlak_groen")?.innerText = oppGroen.toLocaleString("nl-NL"); +  table { border-collapse: collapse; width: 100%; margin-top: 10px; } 
-  document.getElementById("oppervlak_water")?.innerText = oppWater.toLocaleString("nl-NL"); +  th, td { border: 1px solid #ccc; padding: 5px; text-align: right; } 
-  document.getElementById("oppervlak_verharding")?.innerText = oppVerharding.toLocaleString("nl-NL");+  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; 
 } }
  
-setTimeout(() => { +.scenario-left{ 
-  renderVoorzieningenlijst(); +  display:flex; 
-}, 500);+  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> </head>
 <body> <body>
  
-<h1>Spacematrix Rekenhulp</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="tabs">
-  <div class="tab active" onclick="switchTab('spacematrix')">Spacematrix</div>+ 
 +  <div class="tab active" onclick="switchTab('rekenblok')">Spacematrix Rekenblok</div>
   <div class="tab" onclick="switchTab('voorzieningen')">Voorzieningen</div>   <div class="tab" onclick="switchTab('voorzieningen')">Voorzieningen</div>
   <div class="tab" onclick="switchTab('parkeren')">Parkeren</div>   <div class="tab" onclick="switchTab('parkeren')">Parkeren</div>
-  <div class="tab" onclick="switchTab('openbareruimte')">Openbare ruimte</div>+  <div class="tab" onclick="switchTab('openbareruimte')">Openbare Ruimte</div>
 </div> </div>
  
-<div id="spacematrix" class="tabcontent active"> +<div id="rekenblok" class="tabcontent active"> 
-  <h2>Spacematrix</h2> +  <div class="bovenblok" style="display: flex; gap: 20px; align-items: flex-start;"> 
-  <div class="kaartcontainer"> +    <div class="inputvelden" style="flex: 1;"> 
-    <img src="https://www.sumsonite.nl/wiki/lib/exe/fetch.php?media=handleiding_nieuw:spacematrix:SPACEMATE1.png" alt="Spacematrix kaart"> +      <div class="inputrow"> 
-    <div class="stipje" id="stipje"></div>+        <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>
 +
 + <!-- Einde Legenda en Tooltip -->
 +
 + </div>
 +
 +
 + <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>
 +        <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 style="margin-top: 10px; font-size: 0.9em; color: #555;">
 +  <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>
 +
 +<div id="voorzieningen" class="tabcontent">
   <div class="inputrow">   <div class="inputrow">
-    <label for="opp">Oppervlak projectgebied (m²):</label> +    <label>Aantal bewoners per woning:</label> 
-    <input id="opp" type="number" value="10000" oninput="updateLaadvermogen()"> +    <input id="bewoners_per_woning" type="number" step="0.1" value="2.2">
-    <div class="resultblock" id="lv1"></div>+
   </div>   </div>
 +  <table>
 +    <thead>
 +      <tr><th>Voorziening</th><th>Norm (m² per 1000)</th><th>Selecteer</th></tr>
 +    </thead>
 +    <tbody id="voorzieningentabel"></tbody>
 +  </table>
   <div class="inputrow">   <div class="inputrow">
-    <label for="fsi">FSI:</label> +    <button id="btn_voorzieningen" onclick="berekenVoorzieningenruimte()">Toepassen in rekenblok</button> 
-    <input id="fsi" type="number" step="0.01" value="1.6" oninput="updateLaadvermogen()"> +    <div id="voorziening_resultaat" style="margin-left: 10px;"></div>
-    <div class="resultblock" id="lv2"></div>+
   </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>
 +
 +
 +<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>
 +
 +<div id="parkeren" class="tabcontent">
 +  <h3>Parkeren</h3>
   <div class="inputrow">   <div class="inputrow">
-    <label for="gsi">GSI:</label> +    <label>Parkeerplaatsen per woning:</label> 
-    <input id="gsi" type="number" step="0.01" value="0.3" oninput="updateLaadvermogen()"> +    <input id="pp_per_woning" type="number" step="0.1" value="1.0">
-    <div class="resultblock" id="lv3"></div>+
   </div>   </div>
   <div class="inputrow">   <div class="inputrow">
-    <label for="voorziening">% BVO voor voorzieningen:</label> +    <label>BVO per parkeerplaats (m²):</label> 
-    <input id="voorziening" type="number" step="1" value="10" oninput="updateLaadvermogen()"> +    <input id="bvo_per_pp" type="number" step="1" value="25">
-    <div class="resultblock" id="lv4"></div>+
   </div>   </div>
-  <div style="margin-top: 30px;"> +  <div class="inputrow"> 
-    <table class="rekenblok"> +    <label>% Ondergronds:</label> 
-      <thead> +    <input id="pp_ondergronds" type="number" step="1" value="50">
-        <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>   </div>
-  <h3>Resultaat</h3> +  <div class="inputrow"> 
-  <div id="output"></div>+    <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> </div>
  
-<script> +<div id="openbareruimte" class="tabcontent"> 
-// automatische herberekening +  <h3>Openbare Ruimte</h3> 
-setInterval(updateLaadvermogen, 500);+  <p>Verdeling van de onbebouwde ruimte (oppervlak projectgebied minus bebouwde oppervlak volgens GSI):</p> 
 +  <table> 
 +    <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> 
 + 
 + 
 +<script src="/wiki/tools/dichtheidsrekenmachine/sm_rekenmachine_v1.js?v=1"></script> 
 + 
  
-const voorzieningenData = [ 
-  ["huisarts", 56], ["fysio", 54], ["tandarts", 57], ["verloskundige", 40], 
-  ["consultatiebureau", 195], ["apotheken", 31], ["verpleeghuizen", 1760], 
-  ["verzorgingstehuis", 2440], ["basisonderwijs", 5800], ["speciaal basisonderwijs", 1000], 
-  ["voortgezet onderwijs", 5200], ["buurthuis", 70], ["jongerencentrum", 110], 
-  ["peuterspeelzaal", 2650], ["kinderdagverblijf", 2025], ["bso", 585], 
-  ["maatschappelijk werk", 25], ["bibliotheek", 60], ["muziekschool", 140], 
-  ["gymzalen", 45], ["zwembad", 165], ["sporthal", 165], ["speelvelden", 100], 
-  ["kleine speelplek", 1225], ["grote speelplek", 6400], ["voetbalveld", 4000], 
-  ["tennisbaan", 200], ["sportvelden", 1800], ["park", 4000], ["volkstuin", 2400], 
-  ["winkels/dagelijks", 420], ["horeca", 39] 
-]; 
-</script> 
 </body> </body>
 </html> </html>
handleiding_nieuw/sub_spacematrix.1746608519.txt.gz · Last modified: 2025/05/07 09:01 by support
© Sumsonite B.V. Alle rechten voorbehouden. Documentatie, rekenmethodes, databanken en (bron)code mogen niet worden gekopieerd, verspreid of (reverse) engineered zonder voorafgaande schriftelijke toestemming. · Rechten & gebruik