Glossar: Windrad-Experiment entfernt (redundant mit SVG-Grafik)
Der Windrad-Höhenslider war redundant mit der bestehenden windrad-groessenvergleich.svg, die denselben Sachverhalt als statische Vergleichsgrafik bereits zeigt. Entsprechend aus der Registry und dem Code entfernt. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -445,118 +445,6 @@
|
||||
update();
|
||||
}
|
||||
|
||||
// =====================================================================
|
||||
// Experiment: Windrad-Höhenslider — Höhe ändern, Vergleichsobjekte leuchten
|
||||
// =====================================================================
|
||||
function windradSlider(root) {
|
||||
const objects = [
|
||||
{ label: 'Mensch', h: 1.8, color: '#1f4e5a' },
|
||||
{ label: 'Einfamilienhaus', h: 8, color: '#c85c4a' },
|
||||
{ label: 'Alter Baum', h: 25, color: '#5a8a5e' },
|
||||
{ label: 'Kirchturm', h: 60, color: '#c4a97a' },
|
||||
{ label: 'Altes Windrad', h: 100, color: '#8a8a8a' },
|
||||
{ label: 'DC Tower Wien', h: 220, color: '#4a7c8a' },
|
||||
{ label: 'Modernes Windrad',h: 240, color: '#3a6b3e' }
|
||||
];
|
||||
root.innerHTML = `
|
||||
<div class="ge-wrap">
|
||||
<div class="ge-head">
|
||||
<h3>🌬 Wie groß ist ein modernes Windrad?</h3>
|
||||
<p>Schiebe den Regler auf die vermutete Höhe. Das passende Objekt leuchtet auf — ab 240 m bist du auf Höhe des modernen Windrads.</p>
|
||||
</div>
|
||||
<svg class="ge-wind-svg" viewBox="0 0 600 360" preserveAspectRatio="xMidYMid meet" aria-hidden="true"></svg>
|
||||
<div class="ge-gh-slider">
|
||||
<label for="ge-wind-range">Vermutete Höhe: <strong id="ge-wind-m">120</strong> m</label>
|
||||
<input id="ge-wind-range" type="range" min="0" max="260" value="120" step="5">
|
||||
</div>
|
||||
<div class="ge-gh-result">
|
||||
<div class="ge-gh-pill">In dieser Höhenklasse: <strong id="ge-wind-match">Altes Windrad</strong></div>
|
||||
</div>
|
||||
<p class="ge-note">Moderne Windräder in Österreich: Nabe 100–160 m, Rotor bis 80 m Länge, Gesamthöhe bis 240 m. Quelle: IG Windkraft Österreich.</p>
|
||||
</div>
|
||||
`;
|
||||
const svg = root.querySelector('.ge-wind-svg');
|
||||
const rng = root.querySelector('#ge-wind-range');
|
||||
const mOut = root.querySelector('#ge-wind-m');
|
||||
const matchOut = root.querySelector('#ge-wind-match');
|
||||
|
||||
// Ground
|
||||
svgEl('rect', { x: 0, y: 320, width: 600, height: 40, fill: '#5a8a5e' }, svg);
|
||||
// SKALA: 1 m = 1.2 px, Boden y=320, top bei 240 m = 320 - 240*1.2 = 32
|
||||
const mToY = m => 320 - m * 1.2;
|
||||
|
||||
// Objekte als Silhouetten, jedes an fester x-Position
|
||||
const objG = objects.map((o, i) => {
|
||||
const g = svgEl('g', { class: 'ge-wind-obj' }, svg);
|
||||
const x = 80 + i * 72;
|
||||
// Silhouette: einfaches Rechteck oder Dreieck (stilisiert)
|
||||
const y = mToY(o.h);
|
||||
const h = 320 - y;
|
||||
if (o.label.includes('Baum')) {
|
||||
svgEl('ellipse', { cx: x, cy: y + 10, rx: 14, ry: 18, fill: o.color }, g);
|
||||
svgEl('rect', { x: x - 2, y: y + 25, width: 4, height: h - 25, fill: '#6b4a2e' }, g);
|
||||
} else if (o.label.includes('Mensch')) {
|
||||
svgEl('circle', { cx: x, cy: y + 2, r: 1.4, fill: o.color }, g);
|
||||
svgEl('rect', { x: x - 0.5, y: y + 2, width: 1, height: 2, fill: o.color }, g);
|
||||
} else if (o.label.includes('Haus')) {
|
||||
svgEl('rect', { x: x - 12, y: y + 4, width: 24, height: h - 4, fill: '#e8d5b5', stroke: '#1f4e5a', 'stroke-width': '0.6' }, g);
|
||||
svgEl('polygon', { points: `${x-14},${y+4} ${x},${y-4} ${x+14},${y+4}`, fill: o.color }, g);
|
||||
} else if (o.label.includes('Kirchturm')) {
|
||||
svgEl('rect', { x: x - 8, y: y + 12, width: 16, height: h - 12, fill: o.color, stroke: '#1f4e5a', 'stroke-width': '0.6' }, g);
|
||||
svgEl('polygon', { points: `${x-10},${y+12} ${x},${y} ${x+10},${y+12}`, fill: '#c85c4a' }, g);
|
||||
} else if (o.label.includes('Tower')) {
|
||||
svgEl('rect', { x: x - 7, y, width: 14, height: h, fill: o.color, stroke: '#1f4e5a', 'stroke-width': '0.6' }, g);
|
||||
// Window stripes
|
||||
for (let k = 0; k < 8; k++) {
|
||||
svgEl('rect', { x: x - 5, y: y + 8 + k * (h / 10), width: 10, height: 2, fill: '#e8d5b5', opacity: '0.7' }, g);
|
||||
}
|
||||
} else if (o.label === 'Altes Windrad') {
|
||||
svgEl('rect', { x: x - 1.5, y, width: 3, height: h, fill: o.color }, g);
|
||||
svgEl('circle', { cx: x, cy: y, r: 2.2, fill: '#1f4e5a' }, g);
|
||||
svgEl('line', { x1: x, y1: y, x2: x, y2: y - 22, stroke: '#1f4e5a', 'stroke-width': '1.6', 'stroke-linecap': 'round' }, g);
|
||||
svgEl('line', { x1: x, y1: y, x2: x + 18, y2: y + 12, stroke: '#1f4e5a', 'stroke-width': '1.6', 'stroke-linecap': 'round' }, g);
|
||||
svgEl('line', { x1: x, y1: y, x2: x - 18, y2: y + 12, stroke: '#1f4e5a', 'stroke-width': '1.6', 'stroke-linecap': 'round' }, g);
|
||||
} else if (o.label === 'Modernes Windrad') {
|
||||
svgEl('polygon', { points: `${x-3},320 ${x+3},320 ${x+2},${y+8} ${x-2},${y+8}`, fill: '#fff', stroke: '#1f4e5a', 'stroke-width': '0.8' }, g);
|
||||
svgEl('rect', { x: x - 4, y: y + 4, width: 8, height: 6, fill: '#1f4e5a' }, g);
|
||||
svgEl('circle', { cx: x, cy: y + 8, r: 3, fill: o.color }, g);
|
||||
// Rotor
|
||||
svgEl('line', { x1: x, y1: y + 8, x2: x, y2: y - 72, stroke: '#1f4e5a', 'stroke-width': '2', 'stroke-linecap': 'round' }, g);
|
||||
svgEl('line', { x1: x, y1: y + 8, x2: x + 62, y2: y + 44, stroke: '#1f4e5a', 'stroke-width': '2', 'stroke-linecap': 'round' }, g);
|
||||
svgEl('line', { x1: x, y1: y + 8, x2: x - 62, y2: y + 44, stroke: '#1f4e5a', 'stroke-width': '2', 'stroke-linecap': 'round' }, g);
|
||||
}
|
||||
// Label unter dem Objekt
|
||||
const lbl = svgEl('text', { x, y: 340, 'text-anchor': 'middle', 'font-size': '8', fill: '#4a4a4a', 'font-weight': '600' }, g);
|
||||
lbl.textContent = o.h < 10 ? o.h.toFixed(1).replace('.', ',') + ' m' : o.h + ' m';
|
||||
return { g, o };
|
||||
});
|
||||
|
||||
// Markierungslinie (aktuelle Höhe)
|
||||
const markerLine = svgEl('line', { x1: 30, y1: 200, x2: 570, y2: 200, stroke: '#c85c4a', 'stroke-width': '1.5', 'stroke-dasharray': '4 3' }, svg);
|
||||
const markerLabel = svgEl('text', { x: 34, y: 196, 'font-size': '10', fill: '#c85c4a', 'font-weight': '700' }, svg);
|
||||
|
||||
function update() {
|
||||
const m = +rng.value;
|
||||
mOut.textContent = m;
|
||||
const y = mToY(m);
|
||||
markerLine.setAttribute('y1', y);
|
||||
markerLine.setAttribute('y2', y);
|
||||
markerLabel.setAttribute('y', y - 4);
|
||||
markerLabel.textContent = m + ' m';
|
||||
// Aktives Objekt finden: Höhe ≤ m und max
|
||||
let bestIdx = -1;
|
||||
objects.forEach((o, i) => {
|
||||
if (o.h <= m + 5 && (bestIdx === -1 || o.h > objects[bestIdx].h)) bestIdx = i;
|
||||
});
|
||||
objG.forEach((ob, i) => {
|
||||
ob.g.classList.toggle('ge-wind-active', i === bestIdx);
|
||||
});
|
||||
matchOut.textContent = bestIdx >= 0 ? objects[bestIdx].label : '(noch nichts)';
|
||||
}
|
||||
rng.addEventListener('input', update);
|
||||
update();
|
||||
}
|
||||
|
||||
// =====================================================================
|
||||
// Experiment: Methan-GWP-Waage — 1 kg Methan gegen wie viel CO₂?
|
||||
// =====================================================================
|
||||
@@ -653,7 +541,7 @@
|
||||
'albedo': albedoSlider,
|
||||
'co2-fussabdruck': footprintCalc,
|
||||
'treibhauseffekt': greenhouseSlider,
|
||||
'windenergie': windradSlider,
|
||||
'methan': methaneBalance
|
||||
// 'windenergie' bewusst raus — redundant mit windrad-groessenvergleich.svg
|
||||
};
|
||||
})();
|
||||
|
||||
Reference in New Issue
Block a user