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:38] – supporthandleiding_nieuw:spacematrix:h2 [2025/04/14 16:13] (current) – support
Line 1: Line 1:
 <html> <html>
 <style> <style>
-  .voorbeeldblok { 
-    max-width: 900px; 
-    margin: 2em auto; 
-    font-family: sans-serif; 
-    line-height: 1.5; 
-  } 
-  .voorbeeldblok h2 { 
-    border-bottom: 2px solid #ccc; 
-    padding-bottom: 0.25em; 
-  } 
-  .filters { 
-    background-color: #eef; 
-    padding: 1em; 
-    margin-bottom: 2em; 
-    border-radius: 6px; 
-  } 
   .filters label {   .filters label {
 +    margin-top: 1em;
     display: block;     display: block;
-    margin: 0.5em 0 0.2em;+    font-weight: bold;
   }   }
-  .filters input[type="range"] { +  .range-group { 
-    width: 80%;+    display: flex; 
 +    align-items: center; 
 +    gap: 0.5em; 
 +  } 
 +  .range-group input[type="range"] { 
 +    flex: 1;
   }   }
-  .filters output { +  .range-group output {
-    display: inline-block;+
     width: 40px;     width: 40px;
     text-align: right;     text-align: right;
-    margin-left: 8px; 
   }   }
   .overzicht {   .overzicht {
Line 34: Line 22:
     border: 1px solid #ccc;     border: 1px solid #ccc;
     padding: 1em;     padding: 1em;
-    margin-bottom: 2em;+    margin: 2em 0;
   }   }
   .overzicht ul {   .overzicht ul {
-    padding-left: 1.2em;+    padding-left: 1em; 
 +    list-style: none;
   }   }
-  .grid {+  .overzicht li { 
 +    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; 
 +  } 
 +  .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 56: Line 61:
     border-radius: 6px;     border-radius: 6px;
     border: 1px solid #ccc;     border: 1px solid #ccc;
-    margin-bottom: 2em; 
   }   }
   .kengetallen table {   .kengetallen table {
Line 65: 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 <output id="fsi_val">4</output></label> +  <div class="range-group"> 
-    <input type="range" id="fsi" name="fsi" min="0" max="4" step="0.1" value="4" oninput="fsi_val.value = this.value"> +    <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"> 
-    <label for="gsi">Filter op GSI <output id="gsi_val">1</output></label> +    <input type="range" id="fsi_max" min="0" max="4" step="0.1" value="4" oninput="fsi_max_val.value = this.value"> 
-    <input type="range" id="gsi" name="gsi" min="0" max="1" step="0.01" value="1" oninput="gsi_val.value = this.value">+    <output id="fsi_max_val">4</output> 
 +  </div>
  
-    <label for="osr">Filter op OSR <output id="osr_val">4</output></label> +  <label>Filter op GSI</label> 
-    <input type="range" id="osr" name="osr" min="0" max="4" step="0.1" value="4" oninput="osr_val.value = this.value">+  <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>   </div>
  
-  <div class="overzicht"> +  <label>Filter op OSR</label> 
-    <strong>Beschikbare voorbeelden:</strong> +  <div class="range-group"> 
-    <ul id="projectlist"></ul>+    <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 129: 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');   const lijst = document.getElementById('projectlist');
   lijst.innerHTML = '';   lijst.innerHTML = '';
Line 138: Line 155:
     const gsi = parseFloat(block.dataset.gsi);     const gsi = parseFloat(block.dataset.gsi);
     const osr = parseFloat(block.dataset.osr);     const osr = parseFloat(block.dataset.osr);
-    const visible = fsi <= fsiVal && gsi <= gsiVal && osr <= osrVal;+    const visible = fsi >= fsiMin && fsi <= fsiMax && gsi >= gsiMin && gsi <= gsiMax && osr >= osrMin && osr <= osrMax;
     block.style.display = visible ? 'block' : 'none';     block.style.display = visible ? 'block' : 'none';
     if (visible) {     if (visible) {
       const naam = block.querySelector('h2').textContent;       const naam = block.querySelector('h2').textContent;
 +      const id = block.id;
 +      const overzicht = block.querySelector('img').src;
       const li = document.createElement('li');       const li = document.createElement('li');
       const a = document.createElement('a');       const a = document.createElement('a');
-      a.href = '#' + naam.replace(/\s+/g, '-').toLowerCase();+      a.href = '#' + id;
       a.textContent = naam;       a.textContent = naam;
 +      const img = document.createElement('img');
 +      img.src = overzicht;
 +      li.appendChild(img);
       li.appendChild(a);       li.appendChild(a);
       lijst.appendChild(li);       lijst.appendChild(li);
Line 152: Line 174:
 } }
  
-['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.1744637894.txt.gz · Last modified: 2025/04/14 13:38 by support