Differences

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

--- handleiding_nieuw:sub_kengetallenbeelden [2025/04/15 11:18] – support
+++ handleiding_nieuw:sub_kengetallenbeelden [2025/04/18 12:01] (current) – support
@@ Line 31: / Line 31: @@
     border-color: red;
   }
-  .filters label {
+  .filter-buttons {
-    margin-top: 1em;
+    display: flex;
-    display: block;
+    gap: 1em;
-    font-weight: bold;
+    margin-bottom: 1em;
   }
-  .range-group {
+  .filter-buttons button {
+    padding: 0.4em 1em;
+    font-size: 0.95em;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    background-color: #eee;
+    cursor: pointer;
+  }
+  .filter-buttons button:hover {
+    background-color: #ddd;
+  }
+  .compact-filters {
+    display: flex;
+    flex-direction: column;
+    gap: 0.8em;
+    max-width: 800px;
+    margin: 0 auto;
+  }
+  .range-row {
     display: flex;
     align-items: center;
-    gap: 0.5em;
+    gap: 0.8em;
   }
-  .range-group input[type="range"] {
+  .range-row label {
-    flex: 1;
-  }
-  .range-group output {
     width: 40px;
-    text-align: right;
+    font-weight: bold;
+  }
+  .range-row input[type="range"] {
+    flex: 1;
   }
   .overzicht {
@@ Line 102: / Line 120: @@
 </style>
-<div class="spacematrix-wrapper">
+<h2 style="margin-top: 2em; font-size: 1.4em; border-bottom: 2px solid #ccc; padding-bottom: 0.2em;">
+  Beeldenbank Stedelijke Dichtheden
+</h2>
+<div class="filter-buttons">
+  <button onclick="resetFilters()">Reset filters</button>
   <button onclick="toggleOverlay()">Toon/verberg zones</button>
+</div>
+<div class="spacematrix-wrapper">
   <img id="spacematrix-img"
        src="https://www.sumsonite.nl/wiki/lib/exe/fetch.php?media=handleiding_nieuw:spacematrix:SPACEMATE1.png"
@@ Line 110: / Line 135: @@
   <div id="zone-overlay" class="zone-overlay">
     <!-- alle zones -->
-    <div class="zone" style="left:130px; top:420px; width:80px; height:50px;" onclick="setFilterAndHighlight('a1', 0.2, 0.55, 0.125, 0.15, 0.3, 1)">A1</div>
+    <div class="zone" style="left:130px; top:390px; width:110px; height:45px;" onclick="setFilterAndHighlight('a1', 0.2, 0.55, 0.125, 0.15, 0.3, 1)">A1</div>
-    <div class="zone" style="left:210px; top:410px; width:80px; height:60px;" onclick="setFilterAndHighlight('a2', 0.2, 0.7, 0.15, 0.21, 0.3, 1)">A2</div>
+    <div class="zone" style="left:250px; top:355px; width:40px; height:80px;" onclick="setFilterAndHighlight('a2', 0.2, 0.7, 0.15, 0.21, 0.3, 1)">A2</div>
-    <div class="zone" style="left:300px; top:360px; width:50px; height:110px;" onclick="setFilterAndHighlight('a3', 0.2, 0.9, 0.21, 0.26, 0.3, 1)">A3</div>
+    <div class="zone" style="left:300px; top:330px; width:50px; height:105px;" onclick="setFilterAndHighlight('a3', 0.2, 0.9, 0.21, 0.26, 0.3, 1)">A3</div>
-    <div class="zone" style="left:360px; top:330px; width:133px; height:100px;" onclick="setFilterAndHighlight('b', 0.55, 1.05, 0.26, 0.37, 0.3, 1)">B</div>
+    <div class="zone" style="left:385px; top:305px; width:105px; height:130px;" onclick="setFilterAndHighlight('b2', 0.55, 1.05, 0.26, 0.37, 0.3, 1)">B2</div>
-    <div class="zone" style="left:180px; top:350px; width:36px; height:70px;" onclick="setFilterAndHighlight('c1', 0.55, 0.9, 0.12, 0.15, 0.3, 1)">C1</div>
+    <div class="zone" style="left:180px; top:315px; width:60px; height:70px;" onclick="setFilterAndHighlight('c1', 0.55, 0.9, 0.12, 0.15, 0.3, 1)">C1</div>
-    <div class="zone" style="left:220px; top:350px; width:70px; height:60px;" onclick="setFilterAndHighlight('c2', 0.7, 1.1, 0.15, 0.21, 0.3, 1)">C2</div>
+    <div class="zone" style="left:250px; top:215px; width:40px; height:135px;" onclick="setFilterAndHighlight('c2', 0.7, 1.1, 0.15, 0.21, 0.3, 1)">C2</div>
-    <div class="zone" style="left:270px; top:330px; width:80px; height:30px;" onclick="setFilterAndHighlight('d1', 0.9, 1.05, 0.21, 0.26, 0.3, 1)">D1</div>
+    <div class="zone" style="left:360px; top:330px; width:20px; height:105px;" onclick="setFilterAndHighlight('b1', 0.9, 1.05, 0.21, 0.26, 0.3, 1)">B1</div>
-    <div class="zone" style="left:270px; top:240px; width:105px; height:90px;" onclick="setFilterAndHighlight('d2', 1.05, 1.55, 0.21, 0.29, 0.3, 1)">D2</div>
+    <div class="zone" style="left:300px; top:215px; width:75px; height:110px;" onclick="setFilterAndHighlight('d', 1.05, 1.55, 0.21, 0.29, 0.3, 1)">D</div>
-    <div class="zone" style="left:380px; top:240px; width:110px; height:90px;" onclick="setFilterAndHighlight('e', 1.1, 1.9, 0.29, 0.39, 0.3, 1)">E</div>
+    <div class="zone" style="left:385px; top:215px; width:105px; height:85px;" onclick="setFilterAndHighlight('e', 1.1, 1.9, 0.29, 0.39, 0.3, 1)">E</div>
-    <div class="zone" style="left:500px; top:290px; width:240px; height:110px;" onclick="setFilterAndHighlight('f1', 1.25, 1.9, 0.39, 0.58, 0.3, 1)">F1</div>
+    <div class="zone" style="left:500px; top:295px; width:240px; height:140px;" onclick="setFilterAndHighlight('f1', 1.25, 1.9, 0.39, 0.65, 0.3, 1)">F1</div>
-    <div class="zone" style="left:500px; top:170px; width:240px; height:120px;" onclick="setFilterAndHighlight('f2', 1.9, 2.4, 0.405, 0.6, 0.3, 1)">F2</div>
+    <div class="zone" style="left:500px; top:145px; width:240px; height:150px;" onclick="setFilterAndHighlight('f2', 1.9, 2.4, 0.405, 0.65, 0.3, 1)">F2</div>
-    <div class="zone" style="left:351px; top:40px; width:140px; height:200px;" onclick="setFilterAndHighlight('g1', 1.9, 3.0, 0.29, 0.405, 0.3, 1)">G1</div>
+    <div class="zone" style="left:385px; top:40px; width:105px; height:170px;" onclick="setFilterAndHighlight('g1', 1.9, 3.0, 0.29, 0.405, 0.3, 1)">G1</div>
-    <div class="zone" style="left:500px; top:40px; width:170px; height:130px;" onclick="setFilterAndHighlight('g2', 2.4, 3.0, 0.405, 0.485, 0.3, 1)">G2</div>
+    <div class="zone" style="left:500px; top:40px; width:240px; height:100px;" onclick="setFilterAndHighlight('g2', 2.4, 3.0, 0.405, 0.65, 0.3, 1)">G2</div>
-    <div class="zone" style="left:60px; top:40px; width:60px; height:430px;" onclick="setFilterAndHighlight('h1', 0.55, 2.6, 0.05, 0.12, 0.3, 1)">H1</div>
+    <div class="zone" style="left:60px; top:40px; width:60px; height:395px;" onclick="setFilterAndHighlight('h1', 0.55, 2.6, 0.05, 0.12, 0.3, 1)">H1</div>
-    <div class="zone" style="left:130px; top:40px; width:40px; height:380px;" onclick="setFilterAndHighlight('h2', 0.9, 2.6, 0.12, 0.15, 0.3, 1)">H2</div>
+    <div class="zone" style="left:130px; top:40px; width:40px; height:346px;" onclick="setFilterAndHighlight('h2', 0.9, 2.6, 0.12, 0.15, 0.3, 1)">H2</div>
-    <div class="zone" style="left:180px; top:40px; width:80px; height:310px;" onclick="setFilterAndHighlight('h3', 1.1, 2.6, 0.15, 0.21, 0.3, 1)">H3</div>
+    <div class="zone" style="left:180px; top:40px; width:60px; height:270px;" onclick="setFilterAndHighlight('h3', 1.1, 2.6, 0.15, 0.21, 0.3, 1)">H3</div>
-    <div class="zone" style="left:270px; top:40px; width:70px; height:210px;" onclick="setFilterAndHighlight('h4', 1.3, 2.6, 0.21, 0.29, 0.3, 1)">H4</div>
+    <div class="zone" style="left:250px; top:40px; width:125px; height:170px;" onclick="setFilterAndHighlight('h4', 1.3, 2.6, 0.21, 0.29, 0.3, 1)">H4</div>
   </div>
 </div>
@@ Line 132: / Line 157: @@
 <!-- FILTERS EN PROJECTEN ZET JE HIERONDER -->
-<div class="filters">
+<div class="filters compact-filters">
-  <label>Filter op FSI</label>
+  <div class="range-row">
-  <div class="range-group">
+    <label for="fsi_min">FSI</label>
-    <output id="fsi_min_val">0</output>
+    <input type="range" id="fsi_min" min="0" max="4" step="0.1" value="0" oninput="fsi_min_val.value = this.value; updateFilter()">
-    <input type="range" id="fsi_min" min="0" max="4" step="0.1" value="0" oninput="fsi_min_val.value = this.value">
+    <input type="range" id="fsi_max" min="0" max="4" step="0.1" value="4" oninput="fsi_max_val.value = this.value; updateFilter()">
-    <input type="range" id="fsi_max" min="0" max="4" step="0.1" value="4" oninput="fsi_max_val.value = this.value">
+    <output id="fsi_min_val">0</output> – <output id="fsi_max_val">4</output>
-    <output id="fsi_max_val">4</output>
   </div>
-  <label>Filter op GSI</label>
+  <div class="range-row">
-  <div class="range-group">
+    <label for="gsi_min">GSI</label>
-    <output id="gsi_min_val">0</output>
+    <input type="range" id="gsi_min" min="0" max="1" step="0.01" value="0" oninput="gsi_min_val.value = this.value; updateFilter()">
-    <input type="range" id="gsi_min" min="0" max="1" step="0.01" value="0" oninput="gsi_min_val.value = this.value">
+    <input type="range" id="gsi_max" min="0" max="1" step="0.01" value="1" oninput="gsi_max_val.value = this.value; updateFilter()">
-    <input type="range" id="gsi_max" min="0" max="1" step="0.01" value="1" oninput="gsi_max_val.value = this.value">
+    <output id="gsi_min_val">0</output> – <output id="gsi_max_val">1</output>
-    <output id="gsi_max_val">1</output>
   </div>
-  <label>Filter op OSR</label>
+  <div class="range-row">
-  <div class="range-group">
+    <label for="osr_min">OSR</label>
-    <output id="osr_min_val">0</output>
+    <input type="range" id="osr_min" min="0" max="4" step="0.1" value="0" oninput="osr_min_val.value = this.value; updateFilter()">
-    <input type="range" id="osr_min" min="0" max="4" step="0.1" value="0" oninput="osr_min_val.value = this.value">
+    <input type="range" id="osr_max" min="0" max="4" step="0.1" value="4" oninput="osr_max_val.value = this.value; updateFilter()">
-    <input type="range" id="osr_max" min="0" max="4" step="0.1" value="4" oninput="osr_max_val.value = this.value">
+    <output id="osr_min_val">0</output> – <output id="osr_max_val">4</output>
-    <output id="osr_max_val">4</output>
   </div>
 </div>
@@ Line 245: / Line 267: @@
   if (selected) selected.classList.add('active');
 }
+function updateFilter() {
+  const fsiMin = parseFloat(document.getElementById('fsi_min').value);
+  const fsiMax = parseFloat(document.getElementById('fsi_max').value);
+  const gsiMin = parseFloat(document.getElementById('gsi_min').value);
+  const gsiMax = parseFloat(document.getElementById('gsi_max').value);
+  const osrMin = parseFloat(document.getElementById('osr_min').value);
+  const osrMax = parseFloat(document.getElementById('osr_max').value);
+  const projectBlokken = document.querySelectorAll('.projectblok');
+  const lijst = document.getElementById('projectlist');
+  lijst.innerHTML = '';
+  projectBlokken.forEach(blok => {
+    const fsi = parseFloat(blok.dataset.fsi);
+    const gsi = parseFloat(blok.dataset.gsi);
+    const osr = parseFloat(blok.dataset.osr);
+    const zichtbaar =
+      fsi >= fsiMin && fsi <= fsiMax &&
+      gsi >= gsiMin && gsi <= gsiMax &&
+      osr >= osrMin && osr <= osrMax;
+    blok.style.display = zichtbaar ? 'block' : 'none';
+    if (zichtbaar) {
+      const li = document.createElement('li');
+      const link = document.createElement('a');
+      const img = blok.querySelector('img');
+      link.href = '#' + blok.id;
+      link.textContent = blok.querySelector('h2').textContent;
+      if (img) {
+        const mini = document.createElement('img');
+        mini.src = img.src;
+        li.appendChild(mini);
+      }
+      li.appendChild(link);
+      lijst.appendChild(li);
+    }
+  });
+}
+function resetFilters() {
+  document.getElementById('fsi_min').value = 0;
+  document.getElementById('fsi_max').value = 4;
+  document.getElementById('gsi_min').value = 0;
+  document.getElementById('gsi_max').value = 1;
+  document.getElementById('osr_min').value = 0;
+  document.getElementById('osr_max').value = 4;
+  document.getElementById('fsi_min_val').textContent = '0';
+  document.getElementById('fsi_max_val').textContent = '4';
+  document.getElementById('gsi_min_val').textContent = '0';
+  document.getElementById('gsi_max_val').textContent = '1';
+  document.getElementById('osr_min_val').textContent = '0';
+  document.getElementById('osr_max_val').textContent = '4';
+  updateFilter();
+}
+document.addEventListener("DOMContentLoaded", updateFilter);
 </script>
 </html>