e607b1fba0
- fuenfvoracht/STATE.md: Review-Flow entfernt, direkt approved, neuer Changelog - arakava-news/STATE.md: Aktualisiert - redax-wp/STATE.md + src/app.py: Aktualisiert - flugpreisscanner/STATE.md: Aktualisiert - infrastructure/STATE.md: Aktualisiert - fuenfvoracht READMEs und Kurzuebersichten hinzugefuegt Made-with: Cursor
488 lines
No EOL
20 KiB
Markdown
488 lines
No EOL
20 KiB
Markdown
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Heizungsanlage - Hydraulikplan</title>
|
|
<style>
|
|
*{margin:0;padding:0;box-sizing:border-box}
|
|
body{
|
|
background:#111820;color:#ddd;
|
|
font-family:'Segoe UI',Arial,sans-serif;
|
|
display:flex;flex-direction:column;align-items:center;
|
|
padding:15px;
|
|
}
|
|
h1{font-size:1.3em;margin:8px 0 4px}
|
|
.sub{color:#778;font-size:.85em;margin-bottom:10px}
|
|
.btns{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap;justify-content:center}
|
|
.btns button{
|
|
padding:10px 20px;border-radius:6px;border:2px solid #333;
|
|
background:#181e26;color:#bbb;cursor:pointer;font-size:.95em;
|
|
transition:.3s;
|
|
}
|
|
.btns button:hover{background:#222a35}
|
|
.btns button.on-sol{border-color:#e6a800;color:#ffd33d;background:#1f1a00}
|
|
.btns button.on-holz{border-color:#e07030;color:#f0883e;background:#1f1000}
|
|
.btns button.on-oel{border-color:#4090e0;color:#58a6ff;background:#001828}
|
|
.btns button.on-all{border-color:#a070f0;color:#c8a0ff;background:#150028}
|
|
.wrap{
|
|
width:100%;max-width:1100px;
|
|
background:#0d1117;border:1px solid #222;border-radius:10px;
|
|
overflow:hidden;
|
|
}
|
|
svg{width:100%;height:auto;display:block}
|
|
|
|
@keyframes fliess{from{stroke-dashoffset:30}to{stroke-dashoffset:0}}
|
|
@keyframes fliessR{from{stroke-dashoffset:0}to{stroke-dashoffset:30}}
|
|
.flow{
|
|
fill:none;stroke-linecap:round;stroke-linejoin:round;
|
|
stroke-dasharray:10,20;animation:fliess .8s linear infinite;
|
|
opacity:0;transition:opacity .6s;
|
|
}
|
|
.flow.rev{animation:fliessR .8s linear infinite}
|
|
.flow.on{opacity:1}
|
|
.comp{transition:opacity .4s}
|
|
.comp.dim{opacity:.2}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<h1>Heizungsanlage - Hydraulikplan</h1>
|
|
<p class="sub">Klicke einen Betriebsmodus um die Energiefluesse zu sehen</p>
|
|
|
|
<div class="btns">
|
|
<button id="b-sol" onclick="setMode('sol')">Solar</button>
|
|
<button id="b-holz" onclick="setMode('holz')">Holzvergaser</button>
|
|
<button id="b-oel" onclick="setMode('oel')">Oelkessel</button>
|
|
<button id="b-all" onclick="setMode('all')">Alle Quellen</button>
|
|
</div>
|
|
|
|
<div class="wrap">
|
|
<svg viewBox="0 0 1000 880" xmlns="http://www.w3.org/2000/svg">
|
|
|
|
<defs>
|
|
<linearGradient id="tempG" x1="0" y1="1" x2="0" y2="0">
|
|
<stop offset="0%" stop-color="#112244" stop-opacity=".35"/>
|
|
<stop offset="100%" stop-color="#441111" stop-opacity=".35"/>
|
|
</linearGradient>
|
|
</defs>
|
|
|
|
<!-- ======== HINTERGRUND-ROHRE ======== -->
|
|
<g stroke="#1e242c" stroke-width="5" fill="none"
|
|
stroke-linecap="round" stroke-linejoin="round">
|
|
<!-- Öl-Kessel VL: Erzeuger → oberer Speicheranschluss -->
|
|
<path d="M130,155 L130,210 L320,210 L320,265"/>
|
|
<!-- Öl-Kessel RL: unterer Speicheranschluss → Erzeuger -->
|
|
<path d="M200,155 L200,225 L370,225 L370,580"/>
|
|
|
|
<!-- Holzvergaser VL: Erzeuger → oberer Speicheranschluss -->
|
|
<path d="M430,155 L430,210 L490,210 L490,265"/>
|
|
<!-- Holzvergaser RL: unterer Speicheranschluss → Erzeuger -->
|
|
<path d="M500,155 L500,225 L540,225 L540,580"/>
|
|
|
|
<!-- Solar VL: Kollektor → unterer interner Solar-WT -->
|
|
<path d="M800,155 L800,210 L680,210 L680,520"/>
|
|
<!-- Solar RL: aus WT → zurück zum Kollektor -->
|
|
<path d="M630,520 L630,220 L860,220 L860,155"/>
|
|
|
|
<!-- WW-Entnahme oben aus Speicher -->
|
|
<path d="M700,330 L770,330 L770,385 L890,385"/>
|
|
<!-- KW-Eingang -->
|
|
<path d="M890,500 L770,500 L770,475 L700,475"/>
|
|
|
|
<!-- Heizungs-VL: oben/mittig aus Speicher → Mischer → Verteiler -->
|
|
<path d="M540,380 L540,660 L540,710"/>
|
|
<path d="M540,745 L540,785"/>
|
|
<!-- Heizungs-RL: Sammler → unten in Speicher -->
|
|
<path d="M410,580 L410,710 L410,840"/>
|
|
|
|
<!-- Verteiler/Sammler Leitungen -->
|
|
<path d="M210,785 L810,785"/>
|
|
<path d="M210,840 L810,840"/>
|
|
<line x1="280" y1="785" x2="280" y2="800"/>
|
|
<line x1="440" y1="785" x2="440" y2="800"/>
|
|
<line x1="590" y1="785" x2="590" y2="800"/>
|
|
<line x1="740" y1="785" x2="740" y2="800"/>
|
|
<line x1="280" y1="825" x2="280" y2="840"/>
|
|
<line x1="440" y1="825" x2="440" y2="840"/>
|
|
<line x1="590" y1="825" x2="590" y2="840"/>
|
|
<line x1="740" y1="825" x2="740" y2="840"/>
|
|
</g>
|
|
|
|
<!-- ======== ANIMIERTE FLUSS-ROHRE ======== -->
|
|
|
|
<!-- Öl-Kessel: VL Erzeuger → oberer Speicheranschluss (M→L = Flussrichtung) -->
|
|
<path class="flow" id="f-oel-vl" stroke="#58a6ff" stroke-width="4"
|
|
d="M130,155 L130,210 L320,210 L320,265"/>
|
|
<!-- Öl-Kessel: RL unterer Speicheranschluss → Erzeuger (M→L, .rev für Rückfluss) -->
|
|
<path class="flow rev" id="f-oel-rl" stroke="#2255aa" stroke-width="4"
|
|
d="M200,155 L200,225 L370,225 L370,580"/>
|
|
|
|
<!-- Holzvergaser: VL Erzeuger → oberer Speicheranschluss -->
|
|
<path class="flow" id="f-holz-vl" stroke="#f0883e" stroke-width="4"
|
|
d="M430,155 L430,210 L490,210 L490,265"/>
|
|
<!-- Holzvergaser: RL unterer Speicheranschluss → Erzeuger -->
|
|
<path class="flow rev" id="f-holz-rl" stroke="#885522" stroke-width="4"
|
|
d="M500,155 L500,225 L540,225 L540,580"/>
|
|
|
|
<!-- Solar: VL Kollektor → unterer interner Solar-WT -->
|
|
<path class="flow" id="f-sol-vl" stroke="#ffd33d" stroke-width="4"
|
|
d="M800,155 L800,210 L680,210 L680,520"/>
|
|
<!-- Solar: RL aus WT → zurück zum Kollektor -->
|
|
<path class="flow rev" id="f-sol-rl" stroke="#997700" stroke-width="4"
|
|
d="M630,520 L630,220 L860,220 L860,155"/>
|
|
|
|
<!-- Warmwasser: Entnahme oben aus Speicher (keine Animation im Speicher) -->
|
|
<path class="flow" id="f-ww" stroke="#dd5500" stroke-width="3"
|
|
d="M700,330 L770,330 L770,385 L890,385"/>
|
|
<!-- Kaltwasser Eingang -->
|
|
<path class="flow rev" id="f-kw" stroke="#33aadd" stroke-width="3"
|
|
d="M890,500 L770,500 L770,475 L700,475"/>
|
|
|
|
<!-- Heizungs-VL: oben/mittig aus Speicher → Mischer → Verteiler -->
|
|
<path class="flow" id="f-vl-h" stroke="#cc3333" stroke-width="4"
|
|
d="M540,380 L540,660 L540,710"/>
|
|
<path class="flow" id="f-vl-v" stroke="#cc3333" stroke-width="3"
|
|
d="M540,745 L540,785"/>
|
|
<path class="flow" id="f-vl-vert" stroke="#cc3333" stroke-width="3"
|
|
d="M540,785 L810,785 M540,785 L210,785"/>
|
|
<path class="flow" id="f-hk-vl1" stroke="#cc3333" stroke-width="3" d="M280,785 L280,800"/>
|
|
<path class="flow" id="f-hk-vl2" stroke="#cc3333" stroke-width="3" d="M440,785 L440,800"/>
|
|
<path class="flow" id="f-hk-vl3" stroke="#cc3333" stroke-width="3" d="M590,785 L590,800"/>
|
|
<path class="flow" id="f-hk-vl4" stroke="#cc3333" stroke-width="3" d="M740,785 L740,800"/>
|
|
|
|
<!-- Heizungs-RL: Sammler → unten in Speicher -->
|
|
<path class="flow rev" id="f-rl-p" stroke="#2255aa" stroke-width="4"
|
|
d="M410,580 L410,710 L410,840"/>
|
|
<path class="flow rev" id="f-rl-vert" stroke="#2255aa" stroke-width="3"
|
|
d="M210,840 L810,840"/>
|
|
<path class="flow rev" id="f-hk-rl1" stroke="#2255aa" stroke-width="3" d="M280,825 L280,840"/>
|
|
<path class="flow rev" id="f-hk-rl2" stroke="#2255aa" stroke-width="3" d="M440,825 L440,840"/>
|
|
<path class="flow rev" id="f-hk-rl3" stroke="#2255aa" stroke-width="3" d="M590,825 L590,840"/>
|
|
<path class="flow rev" id="f-hk-rl4" stroke="#2255aa" stroke-width="3" d="M740,825 L740,840"/>
|
|
|
|
|
|
<!-- ======== PUFFERSPEICHER ======== -->
|
|
<rect x="270" y="255" width="450" height="355" rx="10"
|
|
fill="#0a1220" stroke="#336699" stroke-width="2.5"/>
|
|
<rect x="280" y="265" width="430" height="335" rx="6" fill="url(#tempG)"/>
|
|
<text x="495" y="290" text-anchor="middle" fill="#336699"
|
|
font-size="16" font-weight="bold" opacity=".5">PUFFERSPEICHER</text>
|
|
|
|
<!-- Anschluesse Rechts -->
|
|
<text x="695" y="340" fill="#dd5500" font-size="11" opacity=".6">WW</text>
|
|
<text x="695" y="480" fill="#33aadd" font-size="11" opacity=".6">KW</text>
|
|
|
|
<!-- Anschluesse Links oben (Öl/Holz VL-Einspeisung) -->
|
|
<text x="325" y="280" fill="#58a6ff" font-size="9" opacity=".6">Öl-VL</text>
|
|
<text x="495" y="280" fill="#f0883e" font-size="9" opacity=".6">Holz-VL</text>
|
|
|
|
<!-- Anschluesse Links unten (Öl/Holz RL-Abgang) -->
|
|
<text x="375" y="595" fill="#2255aa" font-size="9" opacity=".6">Öl-RL</text>
|
|
<text x="545" y="595" fill="#885522" font-size="9" opacity=".6">Holz-RL</text>
|
|
|
|
<!-- Heizungs-VL/RL Anschlüsse -->
|
|
<text x="555" y="395" fill="#cc3333" font-size="9" opacity=".6">Hz-VL</text>
|
|
<text x="395" y="595" fill="#2255aa" font-size="9" opacity=".6">Hz-RL</text>
|
|
|
|
<text x="290" y="310" fill="#cc4444" font-size="10" opacity=".4">heiss</text>
|
|
<text x="290" y="585" fill="#4488ff" font-size="10" opacity=".4">kalt</text>
|
|
|
|
<!-- Solar-Wärmetauscher im unteren Bereich des Puffers -->
|
|
<rect x="580" y="490" width="120" height="60" rx="5"
|
|
fill="#181400" stroke="#d4a000" stroke-width="1.5"/>
|
|
<text x="640" y="515" text-anchor="middle" fill="#e6a800"
|
|
font-size="10">SOLAR</text>
|
|
<text x="640" y="530" text-anchor="middle" fill="#e6a800"
|
|
font-size="10">Waermetauscher</text>
|
|
<!-- Solar-WT Anschlüsse -->
|
|
<text x="685" y="525" fill="#ffd33d" font-size="9" opacity=".6">VL</text>
|
|
<text x="625" y="555" fill="#997700" font-size="9" opacity=".6">RL</text>
|
|
|
|
<!-- WW-Tauscher im oberen Bereich des Puffers -->
|
|
<rect x="430" y="310" width="270" height="55" rx="5"
|
|
fill="#120800" stroke="#c05000" stroke-width="1.5"/>
|
|
<text x="565" y="333" text-anchor="middle" fill="#dd6600"
|
|
font-size="10">WARMWASSER</text>
|
|
<text x="565" y="352" text-anchor="middle" fill="#dd6600"
|
|
font-size="10">Waermetauscher</text>
|
|
|
|
|
|
<!-- ======== OEL-KESSEL ======== -->
|
|
<g class="comp" id="c-oel">
|
|
<rect x="65" y="50" width="200" height="105" rx="10"
|
|
fill="#0d1520" stroke="#4090e0" stroke-width="2.5"/>
|
|
<g transform="translate(165,82)">
|
|
<path d="M0,-22 C-5,-15 -12,-8 -12,2 C-12,10 -6,16 0,16 C6,16 12,10 12,2 C12,-8 5,-15 0,-22Z"
|
|
fill="none" stroke="#58a6ff" stroke-width="2"/>
|
|
<path d="M0,-12 C-3,-8 -6,-3 -6,2 C-6,5 -3,8 0,8 C3,8 6,5 6,2 C6,-3 3,-8 0,-12Z"
|
|
fill="#58a6ff" opacity=".4"/>
|
|
</g>
|
|
<text x="165" y="118" text-anchor="middle" fill="#58a6ff"
|
|
font-size="14" font-weight="bold">Oel-Kessel</text>
|
|
<text x="130" y="145" text-anchor="middle" fill="#58a6ff" font-size="9">VL</text>
|
|
<text x="200" y="145" text-anchor="middle" fill="#2255aa" font-size="9">RL</text>
|
|
<polygon points="130,155 125,165 135,165" fill="#58a6ff"/>
|
|
<polygon points="200,165 195,155 205,155" fill="#2255aa"/>
|
|
</g>
|
|
|
|
<!-- ======== HOLZVERGASER ======== -->
|
|
<g class="comp" id="c-holz">
|
|
<rect x="355" y="50" width="200" height="105" rx="10"
|
|
fill="#150e00" stroke="#e07830" stroke-width="2.5"/>
|
|
<g transform="translate(455,78)">
|
|
<rect x="-15" y="2" width="30" height="8" rx="3" fill="#885522" opacity=".6"/>
|
|
<rect x="-12" y="-4" width="24" height="8" rx="3" fill="#aa6633" opacity=".6"/>
|
|
<path d="M0,-22 C-4,-14 -9,-7 -9,1 C-9,7 -5,12 0,12 C5,12 9,7 9,1 C9,-7 4,-14 0,-22Z"
|
|
fill="none" stroke="#f0883e" stroke-width="2"/>
|
|
<path d="M0,-12 C-2,-7 -4,-2 -4,2 C-4,4 -2,6 0,6 C2,6 4,4 4,2 C4,-2 2,-7 0,-12Z"
|
|
fill="#f0883e" opacity=".5"/>
|
|
</g>
|
|
<text x="455" y="118" text-anchor="middle" fill="#f0883e"
|
|
font-size="13" font-weight="bold">Holzvergaser</text>
|
|
<text x="430" y="145" text-anchor="middle" fill="#f0883e" font-size="9">VL</text>
|
|
<text x="500" y="145" text-anchor="middle" fill="#885522" font-size="9">RL</text>
|
|
<polygon points="430,155 425,165 435,165" fill="#f0883e"/>
|
|
<polygon points="500,165 495,155 505,155" fill="#885522"/>
|
|
</g>
|
|
|
|
<!-- ======== THERMO-SOLAR ======== -->
|
|
<g class="comp" id="c-sol">
|
|
<rect x="745" y="50" width="200" height="105" rx="10"
|
|
fill="#181400" stroke="#d4a000" stroke-width="2.5"/>
|
|
<g transform="translate(845,82)" stroke="#ffd33d" stroke-width="2" fill="none">
|
|
<circle r="8" fill="#ffd33d" opacity=".3"/>
|
|
<line x1="0" y1="-14" x2="0" y2="-20"/>
|
|
<line x1="0" y1="14" x2="0" y2="20"/>
|
|
<line x1="-14" y1="0" x2="-20" y2="0"/>
|
|
<line x1="14" y1="0" x2="20" y2="0"/>
|
|
<line x1="-10" y1="-10" x2="-14" y2="-14"/>
|
|
<line x1="10" y1="-10" x2="14" y2="-14"/>
|
|
<line x1="-10" y1="10" x2="-14" y2="14"/>
|
|
<line x1="10" y1="10" x2="14" y2="14"/>
|
|
</g>
|
|
<text x="845" y="118" text-anchor="middle" fill="#e6a800"
|
|
font-size="13" font-weight="bold">Thermo-Solar</text>
|
|
<text x="800" y="145" text-anchor="middle" fill="#ffd33d" font-size="9">VL</text>
|
|
<text x="860" y="145" text-anchor="middle" fill="#997700" font-size="9">RL</text>
|
|
<polygon points="800,155 795,165 805,165" fill="#ffd33d"/>
|
|
<polygon points="860,165 855,155 865,155" fill="#997700"/>
|
|
</g>
|
|
|
|
<!-- Solar-Pumpe -->
|
|
<circle cx="800" cy="185" r="12" fill="#181400" stroke="#d4a000" stroke-width="1.5"/>
|
|
<polygon points="794,180 794,190 804,185" fill="#d4a000"/>
|
|
|
|
|
|
<!-- ======== WW / KW BOXEN ======== -->
|
|
<rect x="870" y="365" width="120" height="40" rx="6"
|
|
fill="#180800" stroke="#dd5500" stroke-width="1.5"/>
|
|
<text x="930" y="390" text-anchor="middle" fill="#dd5500"
|
|
font-size="11" font-weight="bold">WW-Ausgang</text>
|
|
|
|
<rect x="870" y="480" width="120" height="40" rx="6"
|
|
fill="#001520" stroke="#33aadd" stroke-width="1.5"/>
|
|
<text x="930" y="505" text-anchor="middle" fill="#33aadd"
|
|
font-size="11" font-weight="bold">KW-Eingang</text>
|
|
|
|
|
|
<!-- ======== MISCHER ======== -->
|
|
<circle cx="540" cy="728" r="18" fill="#111820" stroke="#888" stroke-width="2"/>
|
|
<polygon points="528,720 528,736 540,728" fill="#cc2222"/>
|
|
<polygon points="552,720 552,736 540,728" fill="#2255bb"/>
|
|
<text x="568" y="732" fill="#889" font-size="10">Mischer</text>
|
|
|
|
<!-- Heizkreis-Pumpe -->
|
|
<circle cx="410" cy="728" r="14" fill="#111820" stroke="#888" stroke-width="2"/>
|
|
<polygon points="404,722 404,734 416,728" fill="#888"/>
|
|
<text x="410" y="755" text-anchor="middle" fill="#778" font-size="9">Pumpe</text>
|
|
|
|
<!-- VL / RL Labels -->
|
|
<text x="552" y="640" fill="#cc3333" font-size="11" font-weight="bold">VL</text>
|
|
<text x="388" y="640" fill="#2255aa" font-size="11" font-weight="bold">RL</text>
|
|
|
|
|
|
<!-- ======== HEIZKREISE HK 1-4 ======== -->
|
|
|
|
<!-- HK-1 -->
|
|
<rect x="235" y="800" width="90" height="25" rx="3"
|
|
fill="#1a1200" stroke="#b08020" stroke-width="1.5"/>
|
|
<g stroke="#996622" stroke-width="1" opacity=".5">
|
|
<line x1="248" y1="803" x2="248" y2="822"/>
|
|
<line x1="256" y1="803" x2="256" y2="822"/>
|
|
<line x1="264" y1="803" x2="264" y2="822"/>
|
|
<line x1="272" y1="803" x2="272" y2="822"/>
|
|
<line x1="280" y1="803" x2="280" y2="822"/>
|
|
<line x1="288" y1="803" x2="288" y2="822"/>
|
|
<line x1="296" y1="803" x2="296" y2="822"/>
|
|
<line x1="304" y1="803" x2="304" y2="822"/>
|
|
<line x1="312" y1="803" x2="312" y2="822"/>
|
|
</g>
|
|
<text x="280" y="816" text-anchor="middle" fill="#d29922"
|
|
font-size="10" font-weight="bold">HK-1</text>
|
|
|
|
<!-- HK-2 -->
|
|
<rect x="395" y="800" width="90" height="25" rx="3"
|
|
fill="#1a1200" stroke="#b08020" stroke-width="1.5"/>
|
|
<g stroke="#996622" stroke-width="1" opacity=".5">
|
|
<line x1="408" y1="803" x2="408" y2="822"/>
|
|
<line x1="416" y1="803" x2="416" y2="822"/>
|
|
<line x1="424" y1="803" x2="424" y2="822"/>
|
|
<line x1="432" y1="803" x2="432" y2="822"/>
|
|
<line x1="440" y1="803" x2="440" y2="822"/>
|
|
<line x1="448" y1="803" x2="448" y2="822"/>
|
|
<line x1="456" y1="803" x2="456" y2="822"/>
|
|
<line x1="464" y1="803" x2="464" y2="822"/>
|
|
<line x1="472" y1="803" x2="472" y2="822"/>
|
|
</g>
|
|
<text x="440" y="816" text-anchor="middle" fill="#d29922"
|
|
font-size="10" font-weight="bold">HK-2</text>
|
|
|
|
<!-- HK-3 -->
|
|
<rect x="545" y="800" width="90" height="25" rx="3"
|
|
fill="#1a1200" stroke="#b08020" stroke-width="1.5"/>
|
|
<g stroke="#996622" stroke-width="1" opacity=".5">
|
|
<line x1="558" y1="803" x2="558" y2="822"/>
|
|
<line x1="566" y1="803" x2="566" y2="822"/>
|
|
<line x1="574" y1="803" x2="574" y2="822"/>
|
|
<line x1="582" y1="803" x2="582" y2="822"/>
|
|
<line x1="590" y1="803" x2="590" y2="822"/>
|
|
<line x1="598" y1="803" x2="598" y2="822"/>
|
|
<line x1="606" y1="803" x2="606" y2="822"/>
|
|
<line x1="614" y1="803" x2="614" y2="822"/>
|
|
<line x1="622" y1="803" x2="622" y2="822"/>
|
|
</g>
|
|
<text x="590" y="816" text-anchor="middle" fill="#d29922"
|
|
font-size="10" font-weight="bold">HK-3</text>
|
|
|
|
<!-- HK-4 -->
|
|
<rect x="695" y="800" width="90" height="25" rx="3"
|
|
fill="#1a1200" stroke="#b08020" stroke-width="1.5"/>
|
|
<g stroke="#996622" stroke-width="1" opacity=".5">
|
|
<line x1="708" y1="803" x2="708" y2="822"/>
|
|
<line x1="716" y1="803" x2="716" y2="822"/>
|
|
<line x1="724" y1="803" x2="724" y2="822"/>
|
|
<line x1="732" y1="803" x2="732" y2="822"/>
|
|
<line x1="740" y1="803" x2="740" y2="822"/>
|
|
<line x1="748" y1="803" x2="748" y2="822"/>
|
|
<line x1="756" y1="803" x2="756" y2="822"/>
|
|
<line x1="764" y1="803" x2="764" y2="822"/>
|
|
<line x1="772" y1="803" x2="772" y2="822"/>
|
|
</g>
|
|
<text x="740" y="816" text-anchor="middle" fill="#d29922"
|
|
font-size="10" font-weight="bold">HK-4</text>
|
|
|
|
<!-- Verteiler/Sammler Labels -->
|
|
<text x="175" y="789" fill="#cc3333" font-size="9">VL-Verteiler</text>
|
|
<text x="175" y="844" fill="#2255aa" font-size="9">RL-Sammler</text>
|
|
|
|
<!-- ======== LEGENDE ======== -->
|
|
<g transform="translate(30,860)">
|
|
<line x1="0" y1="0" x2="25" y2="0" stroke="#cc3333" stroke-width="3"/>
|
|
<text x="30" y="4" fill="#999" font-size="9">Vorlauf (heiss)</text>
|
|
<line x1="140" y1="0" x2="165" y2="0" stroke="#2255aa" stroke-width="3"/>
|
|
<text x="170" y="4" fill="#999" font-size="9">Ruecklauf (kalt)</text>
|
|
<line x1="300" y1="0" x2="325" y2="0" stroke="#ffd33d" stroke-width="3"/>
|
|
<text x="330" y="4" fill="#999" font-size="9">Solar</text>
|
|
<line x1="390" y1="0" x2="415" y2="0" stroke="#dd5500" stroke-width="3"/>
|
|
<text x="420" y="4" fill="#999" font-size="9">Warmwasser</text>
|
|
<line x1="520" y1="0" x2="545" y2="0" stroke="#33aadd" stroke-width="3"/>
|
|
<text x="550" y="4" fill="#999" font-size="9">Kaltwasser</text>
|
|
</g>
|
|
|
|
</svg>
|
|
</div>
|
|
|
|
<div id="info" style="margin-top:12px;padding:10px 20px;
|
|
background:#161b22;border:1px solid #222;border-radius:8px;
|
|
max-width:700px;font-size:.9em;text-align:center;color:#889">
|
|
Waehle oben einen Betriebsmodus aus.
|
|
</div>
|
|
|
|
<script>
|
|
var modes = {
|
|
sol: {
|
|
flows: ['f-sol-vl','f-sol-rl','f-ww','f-kw'],
|
|
active: ['c-sol'],
|
|
dim: ['c-oel','c-holz'],
|
|
btn: 'on-sol',
|
|
text: 'SOLAR-BETRIEB: Solaranlage laedt Puffer ueber unteren WT, Warmwasser wird bereitet'
|
|
},
|
|
holz: {
|
|
flows: [
|
|
'f-holz-vl','f-holz-rl','f-ww','f-kw',
|
|
'f-vl-h','f-vl-v','f-vl-vert',
|
|
'f-hk-vl1','f-hk-vl2','f-hk-vl3','f-hk-vl4',
|
|
'f-rl-p','f-rl-vert',
|
|
'f-hk-rl1','f-hk-rl2','f-hk-rl3','f-hk-rl4'
|
|
],
|
|
active: ['c-holz'],
|
|
dim: ['c-oel','c-sol'],
|
|
btn: 'on-holz',
|
|
text: 'HOLZVERGASER-BETRIEB: Holz laedt Puffer oben, Heizung + Warmwasser aktiv'
|
|
},
|
|
oel: {
|
|
flows: [
|
|
'f-oel-vl','f-oel-rl','f-ww','f-kw',
|
|
'f-vl-h','f-vl-v','f-vl-vert',
|
|
'f-hk-vl1','f-hk-vl2','f-hk-vl3','f-hk-vl4',
|
|
'f-rl-p','f-rl-vert',
|
|
'f-hk-rl1','f-hk-rl2','f-hk-rl3','f-hk-rl4'
|
|
],
|
|
active: ['c-oel'],
|
|
dim: ['c-holz','c-sol'],
|
|
btn: 'on-oel',
|
|
text: 'OELKESSEL-BETRIEB: Oel-Kessel laedt Puffer oben, Heizung + Warmwasser aktiv'
|
|
},
|
|
all: {
|
|
flows: [
|
|
'f-oel-vl','f-oel-rl','f-holz-vl','f-holz-rl',
|
|
'f-sol-vl','f-sol-rl','f-ww','f-kw',
|
|
'f-vl-h','f-vl-v','f-vl-vert',
|
|
'f-hk-vl1','f-hk-vl2','f-hk-vl3','f-hk-vl4',
|
|
'f-rl-p','f-rl-vert',
|
|
'f-hk-rl1','f-hk-rl2','f-hk-rl3','f-hk-rl4'
|
|
],
|
|
active: ['c-oel','c-holz','c-sol'],
|
|
dim: [],
|
|
btn: 'on-all',
|
|
text: 'ALLE QUELLEN AKTIV: Maximale Waermeleistung'
|
|
}
|
|
};
|
|
|
|
var cur = null;
|
|
|
|
function setMode(m) {
|
|
var i, el, allFlows, allComps, allBtns;
|
|
|
|
allFlows = document.querySelectorAll('.flow');
|
|
for (i = 0; i < allFlows.length; i++) allFlows[i].classList.remove('on');
|
|
|
|
allComps = document.querySelectorAll('.comp');
|
|
for (i = 0; i < allComps.length; i++) allComps[i].classList.remove('dim');
|
|
|
|
allBtns = document.querySelectorAll('.btns button');
|
|
for (i = 0; i < allBtns.length; i++) allBtns[i].className = '';
|
|
|
|
if (cur === m) {
|
|
cur = null;
|
|
document.getElementById('info').innerHTML = 'Waehle oben einen Betriebsmodus aus.';
|
|
return;
|
|
}
|
|
cur = m;
|
|
var cfg = modes[m];
|
|
|
|
for (i = 0; i < cfg.flows.length; i++) {
|
|
el = document.getElementById(cfg.flows[i]);
|
|
if (el) el.classList.add('on');
|
|
}
|
|
for (i = 0; i < cfg.dim.length; i++) {
|
|
el = document.getElementById(cfg.dim[i]);
|
|
if (el) el.classList.add('dim');
|
|
}
|
|
document.getElementById('b-' + m).className = cfg.btn;
|
|
document.getElementById('info').innerHTML = cfg.text;
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
</html> |