User Tools

Site Tools

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:20] – 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; 
 +  } 
 +  .overzicht li img { 
 +    width: 50px; 
 +    height: auto; 
 +    border-radius: 4px; 
 +    border: 1px solid #ccc; 
 +  } 
 +  .projectblok { 
 +    display: none; 
 +    margin-bottom: 3em;
   }   }
-  .grid {+  .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 50: Line 69:
     padding: 0.3em 0.6em;     padding: 0.3em 0.6em;
     border-bottom: 1px solid #ddd;     border-bottom: 1px solid #ddd;
-  } 
-  .projectblok { 
-    display: none; 
   }   }
 </style> </style>
  
-<div class="voorbeeldblok"> +<div class="filters"> 
-  <div class="filters"> +  <label>Filter op FSI</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" value="4">+    <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>
  
-    <label for="gsi">Filter op GSI</label> +  <label>Filter op GSI</label> 
-    <input type="range" id="gsi" name="gsi" min="0" max="1" step="0.01" value="1">+  <div class="range-group"> 
 +    <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="osr">Filter op OSR</label> +  <label>Filter op OSR</label> 
-    <input type="range" id="osr" name="osr" min="0" max="4" step="0.1" value="4">+  <div class="range-group"> 
 +    <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"> 
 +    <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="projectblok" data-fsi="3.0" data-gsi="0.61" data-osr="0.32"> +<div class="overzicht"> 
-    <h2>Voorbeeld: Battersea Power Station, Londen</h2> +  <strong>Beschikbare voorbeelden:</strong> 
-    <div class="grid"> +  <ul id="projectlist"></ul> 
-      <img src="https://www.sumsonite.nl/wiki/lib/exe/fetch.php?media=handleiding_nieuw:spacematrix:h2:battersea_overzicht.jpg" alt="Battersea overzicht" /> +</div> 
-      <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_straat2.jpg" alt="Straatbeeld Battersea 2" /> +<!-- BATTERSEA --> 
-      <img src="https://www.sumsonite.nl/wiki/lib/exe/fetch.php?media=handleiding_nieuw:spacematrix:h2:battersea_straat3.jpg" alt="Straatbeeld Battersea 3" /> +<div class="projectblok" data-fsi="3.0" data-gsi="0.61" data-osr="0.32" id="battersea"> 
-    </div> +  <h2>Battersea Power Station, Londen</h2> 
-    <div class="kengetallen"> +  <div class="projectgrid"> 
-      <strong>Kengetallen:</strong> +    <img src="https://www.sumsonite.nl/wiki/lib/exe/fetch.php?media=handleiding_nieuw:spacematrix:h2:battersea_overzicht.jpg" alt="Battersea overzicht" /> 
-      <table> +    <img src="https://www.sumsonite.nl/wiki/lib/exe/fetch.php?media=handleiding_nieuw:spacematrix:h2:battersea_straat1.jpg" alt="Straatbeeld Battersea 1" /> 
-        <tr><td>FSI</td><td>3,0</td></tr> +    <img src="https://www.sumsonite.nl/wiki/lib/exe/fetch.php?media=handleiding_nieuw:spacematrix:h2:battersea_straat2.jpg" alt="Straatbeeld Battersea 2" /> 
-        <tr><td>GSI</td><td>0,61</td></tr> +    <img src="https://www.sumsonite.nl/wiki/lib/exe/fetch.php?media=handleiding_nieuw:spacematrix:h2:battersea_straat3.jpg" alt="Straatbeeld Battersea 3" />
-        <tr><td>Gem. aantal lagen</td><td>8-10</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> +
-      </table> +
-    </div>+
   </div>   </div>
 +  <div class="kengetallen">
 +    <table>
 +      <tr><td>FSI</td><td>3,0</td></tr>
 +      <tr><td>GSI</td><td>0,61</td></tr>
 +      <tr><td>Gem. aantal lagen</td><td>8–10</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>
 +    </table>
 +  </div>
 +</div>
  
-  <div class="projectblok" data-fsi="2.4" data-gsi="0.53" data-osr="0.45"> +<!-- NINE ELMS --> 
-    <h2>Voorbeeld: Nine Elms Park</h2> +<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> 
-      <img src="https://www.sumsonite.nl/wiki/lib/exe/fetch.php?media=handleiding_nieuw:spacematrix:h2:nineelms_overzicht.jpg" alt="Nine Elms overzicht" /> +  <div class="projectgrid"> 
-      <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_overzicht.jpg" alt="Nine Elms overzicht" /> 
-    </div> +    <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 class="kengetallen"> +  </div> 
-      <strong>Kengetallen:</strong> +  <div class="kengetallen"> 
-      <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> </div>
Line 109: Line 143:
 <script> <script>
 function updateFilter() { function updateFilter() {
-  const fsiVal = parseFloat(document.getElementById('fsi').value); +  const fsiMin = parseFloat(document.getElementById('fsi_min').value); 
-  const gsiVal = parseFloat(document.getElementById('gsi').value); +  const fsiMax = parseFloat(document.getElementById('fsi_max').value); 
-  const osrVal = parseFloat(document.getElementById('osr').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 => {   document.querySelectorAll('.projectblok').forEach(block => {
     const fsi = parseFloat(block.dataset.fsi);     const fsi = parseFloat(block.dataset.fsi);
     const gsi = parseFloat(block.dataset.gsi);     const gsi = parseFloat(block.dataset.gsi);
     const osr = parseFloat(block.dataset.osr);     const osr = parseFloat(block.dataset.osr);
-    block.style.display = (fsi <= fsiVal && gsi <= gsiVal && osr <= osrVal) ? 'block' : 'none';+    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', 'gsi', 'osr'].forEach(id => {+['fsi_min', 'fsi_max', 'gsi_min', 'gsi_max', 'osr_min', 'osr_max'].forEach(id => {
   document.getElementById(id).addEventListener('input', updateFilter);   document.getElementById(id).addEventListener('input', updateFilter);
 }); });
handleiding_nieuw/spacematrix/h2.1744636843.txt.gz · Last modified: 2025/04/14 13:20 by support