User Tools

Site Tools

Trace:
handleiding_nieuw:spacematrix:h2

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:spacematrix:h2 [2025/04/14 13:12] – supporthandleiding_nieuw:spacematrix:h2 [2025/04/14 16:13] (current) – support
Line 1: Line 1:
 <html> <html>
 <style> <style>
-  .voorbeeldblok { +  .filters label { 
-    max-width: 900px; +    margin-top: 1em; 
-    margin: 2em auto; +    display: block; 
-    font-family: sans-serif; +    font-weight: bold;
-    line-height: 1.5;+
   }   }
-  .voorbeeldblok h2 { +  .range-group { 
-    border-bottom: 2px solid #ccc; +    display: flex; 
-    padding-bottom: 0.25em;+    align-items: center; 
 +    gap: 0.5em;
   }   }
-  .filters { +  .range-group input[type="range"] { 
-    background-color: #eef;+    flex: 1; 
 +  } 
 +  .range-group output { 
 +    width: 40px; 
 +    text-align: right; 
 +  } 
 +  .overzicht { 
 +    background-color: #f8f8f8; 
 +    border: 1px solid #ccc;
     padding: 1em;     padding: 1em;
-    margin-bottom: 2em; +    margin: 2em 0;
-    border-radius: 6px;+
   }   }
-  .filters label { +  .overzicht ul { 
-    display: block; +    padding-left: 1em; 
-    margin: 0.5em 0 0.2em;+    list-style: none;
   }   }
-  .filters input { +  .overzicht li { 
-    width: 100%;+    display: flex; 
 +    align-items: center; 
 +    gap: 10px; 
 +    margin-bottom: 0.5em;
   }   }
-  .grid {+  .overzicht li img { 
 +    width: 50px; 
 +    height: auto; 
 +    border-radius: 4px; 
 +    border: 1px solid #ccc; 
 +  } 
 +  .projectblok { 
 +    display: none; 
 +    margin-bottom: 3em; 
 +  } 
 +  .projectgrid {
     display: flex;     display: flex;
     flex-wrap: wrap;     flex-wrap: wrap;
     gap: 1em;     gap: 1em;
-    margin-bottom: 1.5em;+    margin: 1em 0;
   }   }
-  .grid img { +  .projectgrid img {
-    width: 100%;+
     max-width: 400px;     max-width: 400px;
 +    width: 100%;
     border-radius: 6px;     border-radius: 6px;
     border: 1px solid #aaa;     border: 1px solid #aaa;
Line 41: Line 61:
     border-radius: 6px;     border-radius: 6px;
     border: 1px solid #ccc;     border: 1px solid #ccc;
-    margin-bottom: 2em; 
   }   }
   .kengetallen table {   .kengetallen table {
Line 53: Line 72:
 </style> </style>
  
-<div class="voorbeeldblok"> +<div class="filters"> 
-  <h2>Voorbeeld: Battersea Power Station, Londen</h2>+  <label>Filter op FSI</label> 
 +  <div class="range-group"> 
 +    <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"> 
 +    <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_max_val">4</output> 
 +  </div>
  
-  <div class="filters"> +  <label>Filter op GSI</label> 
-    <label for="fsi">Filter op FSI</label> +  <div class="range-group"> 
-    <input type="range" id="fsi" name="fsi" min="0" max="4" step="0.1">+    <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"> 
 +    <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_max_val">1</output> 
 +  </div>
  
-    <label for="gsi">Filter op GSI</label> +  <label>Filter op OSR</label> 
-    <input type="range" id="gsi" name="gsi" min="0" max="1" step="0.01"> +  <div class="range-group"> 
- +    <output id="osr_min_val">0</output> 
-    <label for="osr">Filter op OSR</label> +    <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" name="osr" min="0" max="4" step="0.1">+    <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_max_val">4</output>
   </div>   </div>
 +</div>
 +
 +<div class="overzicht">
 +  <strong>Beschikbare voorbeelden:</strong>
 +  <ul id="projectlist"></ul>
 +</div>
  
-  <div class="grid">+<!-- BATTERSEA --> 
 +<div class="projectblok" data-fsi="3.0" data-gsi="0.61" data-osr="0.32" id="battersea"> 
 +  <h2>Battersea Power Station, Londen</h2> 
 +  <div class="projectgrid">
     <img src="https://www.sumsonite.nl/wiki/lib/exe/fetch.php?media=handleiding_nieuw:spacematrix:h2:battersea_overzicht.jpg" alt="Battersea overzicht" />     <img src="https://www.sumsonite.nl/wiki/lib/exe/fetch.php?media=handleiding_nieuw:spacematrix:h2:battersea_overzicht.jpg" alt="Battersea overzicht" />
     <img src="https://www.sumsonite.nl/wiki/lib/exe/fetch.php?media=handleiding_nieuw:spacematrix:h2:battersea_straat1.jpg" alt="Straatbeeld Battersea 1" />     <img src="https://www.sumsonite.nl/wiki/lib/exe/fetch.php?media=handleiding_nieuw:spacematrix:h2:battersea_straat1.jpg" alt="Straatbeeld Battersea 1" />
Line 73: Line 112:
     <img src="https://www.sumsonite.nl/wiki/lib/exe/fetch.php?media=handleiding_nieuw:spacematrix:h2:battersea_straat3.jpg" alt="Straatbeeld Battersea 3" />     <img src="https://www.sumsonite.nl/wiki/lib/exe/fetch.php?media=handleiding_nieuw:spacematrix:h2:battersea_straat3.jpg" alt="Straatbeeld Battersea 3" />
   </div>   </div>
- 
   <div class="kengetallen">   <div class="kengetallen">
-    <strong>Kengetallen:</strong> 
     <table>     <table>
       <tr><td>FSI</td><td>3,0</td></tr>       <tr><td>FSI</td><td>3,0</td></tr>
       <tr><td>GSI</td><td>0,61</td></tr>       <tr><td>GSI</td><td>0,61</td></tr>
-      <tr><td>Gem. aantal lagen</td><td>8-10</td></tr>+      <tr><td>Gem. aantal lagen</td><td>8–10</td></tr>
       <tr><td>OSR</td><td>0,32</td></tr>       <tr><td>OSR</td><td>0,32</td></tr>
-      <tr><td>Bijzonderheden</td><td>Industrieel icoon getransformeerd tot hoogstedelijk woon-werkgebied met luxe voorzieningen</td></tr>+      <tr><td>Bijzonderheden</td><td>Industrieel icoon getransformeerd tot hoogstedelijk woon-werkgebied met luxe voorzieningen.</td></tr>
     </table>     </table>
   </div>   </div>
 +</div>
  
-  <h2>Voorbeeld: Nine Elms Park</h2> +<!-- NINE ELMS --> 
- +<div class="projectblok" data-fsi="2.4" data-gsi="0.53" data-osr="0.45" id="nine-elms"> 
-  <div class="grid">+  <h2>Rive Gauche - Parijs</h2> 
 +  <div class="projectgrid">
     <img src="https://www.sumsonite.nl/wiki/lib/exe/fetch.php?media=handleiding_nieuw:spacematrix:h2:nineelms_overzicht.jpg" alt="Nine Elms overzicht" />     <img src="https://www.sumsonite.nl/wiki/lib/exe/fetch.php?media=handleiding_nieuw:spacematrix:h2:nineelms_overzicht.jpg" alt="Nine Elms overzicht" />
     <img src="https://www.sumsonite.nl/wiki/lib/exe/fetch.php?media=handleiding_nieuw:spacematrix:h2:nineelms_straat1.jpg" alt="Straatbeeld Nine Elms 1" />     <img src="https://www.sumsonite.nl/wiki/lib/exe/fetch.php?media=handleiding_nieuw:spacematrix:h2:nineelms_straat1.jpg" alt="Straatbeeld Nine Elms 1" />
   </div>   </div>
- 
   <div class="kengetallen">   <div class="kengetallen">
-    <strong>Kengetallen:</strong> 
     <table>     <table>
       <tr><td>FSI</td><td>2,4</td></tr>       <tr><td>FSI</td><td>2,4</td></tr>
       <tr><td>GSI</td><td>0,53</td></tr>       <tr><td>GSI</td><td>0,53</td></tr>
-      <tr><td>Gem. aantal lagen</td><td>6-8</td></tr>+      <tr><td>Gem. aantal lagen</td><td>6–8</td></tr>
       <tr><td>OSR</td><td>0,45</td></tr>       <tr><td>OSR</td><td>0,45</td></tr>
-      <tr><td>Bijzonderheden</td><td>Recent ontwikkeld gebied met hoogstedelijk wonen langs de Thames, gericht op menging van wonen en publieke ruimte</td></tr>+      <tr><td>Bijzonderheden</td><td>Recent ontwikkeld gebied met hoogstedelijk wonen langs de Thames, gericht op menging van wonen en publieke ruimte.</td></tr>
     </table>     </table>
   </div>   </div>
 </div> </div>
 +
 +<script>
 +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 lijst = document.getElementById('projectlist');
 +  lijst.innerHTML = '';
 +  document.querySelectorAll('.projectblok').forEach(block => {
 +    const fsi = parseFloat(block.dataset.fsi);
 +    const gsi = parseFloat(block.dataset.gsi);
 +    const osr = parseFloat(block.dataset.osr);
 +    const visible = fsi >= fsiMin && fsi <= fsiMax && gsi >= gsiMin && gsi <= gsiMax && osr >= osrMin && osr <= osrMax;
 +    block.style.display = visible ? 'block' : 'none';
 +    if (visible) {
 +      const naam = block.querySelector('h2').textContent;
 +      const id = block.id;
 +      const overzicht = block.querySelector('img').src;
 +      const li = document.createElement('li');
 +      const a = document.createElement('a');
 +      a.href = '#' + id;
 +      a.textContent = naam;
 +      const img = document.createElement('img');
 +      img.src = overzicht;
 +      li.appendChild(img);
 +      li.appendChild(a);
 +      lijst.appendChild(li);
 +    }
 +  });
 +}
 +
 +['fsi_min', 'fsi_max', 'gsi_min', 'gsi_max', 'osr_min', 'osr_max'].forEach(id => {
 +  document.getElementById(id).addEventListener('input', updateFilter);
 +});
 +updateFilter();
 +</script>
 </html> </html>
 +
handleiding_nieuw/spacematrix/h2.1744636376.txt.gz · Last modified: 2025/04/14 13:12 by support