Das feste realtime.svg ist ersetzt durch einen Katalog (js/solar/energieflussKatalog.js: jeder Kreis einmal, samt Werten aus MQTT) und einen Renderer (js/solar/energiefluss.js): Ringe mit Segmenten, Fluesse als Boegen mit laufenden Punkten, Fuellstandswelle fuer Batterie und Auto, animierte Symbole, Plaketten, Hochkant-Ansicht auf schmalen Schirmen. Hierarchie und Lage wie bisher: Quellen -> Wechselrichter -> Verbrauch -> OG/EG/UG -> Wallboxen, Heizstab. Einstellungen -> Uebersicht: Kreise ein/aus (Kinder ruecken eine Ebene hoeher), Namen, Lage per Ziehen in der Vorschau, PV-Flaechen. Gespeichert werden nur Abweichungen in homeMesh.energiefluss. Der PV-Lageplan hinter der Sonne liegt unveraendert als assets/img/pvplan.svg und ist ueber den Umschalter Uebersicht/Anlage erreichbar. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
193 lines
11 KiB
XML
193 lines
11 KiB
XML
<!-- Lageplan der PV-Platten, bis September 2026 Teil von realtime.svg (Gruppe
|
|
pvDetail, geoeffnet ueber die Sonne). Unveraendert herausgeloest, damit die
|
|
neue Energiefluss-Uebersicht ihn als eigene Ansicht zeigen kann. Die Werte
|
|
schreibt solarMQTT.js ueber die Ids det_pvNP und invList. -->
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="40 0 1260 740" width="100%" class="enf-pvplan">
|
|
<style>
|
|
.enf-pvplan .infoTextClass { font-size: 18px; font-family: sans-serif; text-anchor: middle; fill: rgb(200, 210, 210); }
|
|
.enf-pvplan .tooltipTextClass { font-size: 18px; font-family: sans-serif; text-anchor: start; fill: rgb(200, 210, 210); }
|
|
</style>
|
|
<defs>
|
|
<filter id="shadowMiddle" x="-0.4" y="-0.4" width="180%" height="180%">
|
|
<feMorphology in="SourceAlpha" result="offOut" operator="dilate" radius="3" />
|
|
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="1" />
|
|
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
|
|
</filter>
|
|
<filter id="shadowBig" x="-0.45" y="-0.45" width="190%" height="190%">
|
|
<feMorphology in="SourceAlpha" result="offOut" operator="dilate" radius="3" />
|
|
<feGaussianBlur result="offOut" in="offOut" stdDeviation="2" />
|
|
<feBlend in="SourceGraphic" in2="offOut" mode="normal" />
|
|
</filter>
|
|
<g id="pvPlate" fill="none" stroke-width="4" stroke="#f7c000">
|
|
<rect width="70" height="40" x="0" y="0" rx="5" ry="5" />
|
|
</g>
|
|
<g id="northIcon" fill="#808090">
|
|
<path
|
|
d="M42.066 0v20h3.752V6.957L53.881 20h4.053V0h-3.752v13.355L45.996 0zm5.57 26.688l-25.77 69.949c-.823 2.238 1.658 4.248 3.677 2.978L50 84.195l24.455 15.42c2.02 1.273 4.504-.738 3.68-2.978l-25.79-70c-.472-1.096-1.283-1.632-2.384-1.635c-1.1-.003-2.017.856-2.324 1.686zm-.136 14.83V79.86L29.1 91.463z"></path>
|
|
</g>
|
|
</defs>
|
|
<g id="pvDetail">
|
|
<use href="#northIcon" transform="translate(1200,10),rotate(10)" />
|
|
<!--<polygon points="370 0, 1300 0, 1300 700, 0 700, 0 250, 370 250" fill="rgb(24, 27, 31)" />-->
|
|
<polygon points="560,80 720,80 720,300 1160,300 1160,370 560,370" stroke-linejoin="round"
|
|
fill="#f7c002" stroke-width="30" stroke="#f7c002" opacity="0.1" />
|
|
<use href="#pvPlate" transform="translate(600,80), rotate(90)" />
|
|
<use href="#pvPlate" transform="translate(600,150), rotate(90)" />
|
|
<use href="#pvPlate" transform="translate(600,220), rotate(90)" />
|
|
<use href="#pvPlate" transform="translate(600,290), rotate(90)" />
|
|
|
|
<use href="#pvPlate" transform="translate(640,80), rotate(90)" />
|
|
<use href="#pvPlate" transform="translate(640,150), rotate(90)" />
|
|
<use href="#pvPlate" transform="translate(640,220), rotate(90)" />
|
|
<use href="#pvPlate" transform="translate(640,290), rotate(90)" />
|
|
|
|
<use href="#pvPlate" transform="translate(680,80), rotate(90)" />
|
|
<use href="#pvPlate" transform="translate(680,150), rotate(90)" />
|
|
<use href="#pvPlate" transform="translate(680,220), rotate(90)" />
|
|
<use href="#pvPlate" transform="translate(680,290), rotate(90)" />
|
|
<use href="#pvPlate" transform="translate(720,80), rotate(90)" />
|
|
<use href="#pvPlate" transform="translate(720,150), rotate(90)" />
|
|
<use href="#pvPlate" transform="translate(720,220), rotate(90)" />
|
|
|
|
<use href="#pvPlate" transform="translate(790,290)" />
|
|
<use href="#pvPlate" transform="translate(720,330)" />
|
|
<use href="#pvPlate" transform="translate(790,330)" />
|
|
|
|
<use href="#pvPlate" transform="translate(870,290)" />
|
|
<use href="#pvPlate" transform="translate(870,330)" />
|
|
<use href="#pvPlate" transform="translate(940,330)" />
|
|
|
|
<use href="#pvPlate" transform="translate(1160,300), rotate(90)" />
|
|
<use href="#pvPlate" transform="translate(1120,300), rotate(90)" />
|
|
<use href="#pvPlate" transform="translate(1080,300), rotate(90)" />
|
|
|
|
|
|
<text id="det_pv0P" filter="url(#shadowBig)" class="infoTextClass" dx="55" dy="30"
|
|
transform="translate(560, 150), scale(1.5,1.5)">-.-- kW</text>
|
|
<polygon points="980,60 1160,60 1160,265 980,265" stroke-linejoin="round" fill="#F76D00"
|
|
stroke-width="30" stroke="#F76D00" opacity="0.1" />
|
|
<use href="#pvPlate" transform="translate(1160,200), rotate(90), scale(1,1.125)" />
|
|
<use href="#pvPlate" transform="translate(1115,200), rotate(90), scale(1,1.125)" />
|
|
<use href="#pvPlate" transform="translate(1070,200), rotate(90), scale(1,1.125)" />
|
|
<use href="#pvPlate" transform="translate(1160,130), rotate(90), scale(1,1.125)" />
|
|
<use href="#pvPlate" transform="translate(1115,130), rotate(90), scale(1,1.125)" />
|
|
<use href="#pvPlate" transform="translate(1070,130), rotate(90), scale(1,1.125)" />
|
|
<use href="#pvPlate" transform="translate(1025,130), rotate(90), scale(1,1.125)" />
|
|
<use href="#pvPlate" transform="translate(1160,60), rotate(90), scale(1,1.125)" />
|
|
<use href="#pvPlate" transform="translate(1115,60), rotate(90), scale(1,1.125)" />
|
|
<use href="#pvPlate" transform="translate(1070,60), rotate(90), scale(1,1.125)" />
|
|
<text id="det_pv1P" filter="url(#shadowBig)" class="infoTextClass" dx="55" dy="30"
|
|
transform="translate(990, 140), scale(1.5,1.5)">-.-- kW</text>
|
|
|
|
<use href="#pvPlate" x="200" y="680" />
|
|
<text id="det_pv33P" filter="url(#shadowMiddle)" class="infoTextClass" x="200" y="680" dx="36"
|
|
dy="26">#19</text>
|
|
<use href="#pvPlate" x="380" y="550" />
|
|
<text id="det_pv32P" filter="url(#shadowMiddle)" class="infoTextClass" x="380" y="550" dx="36"
|
|
dy="26">#19</text>
|
|
<use href="#pvPlate" x="380" y="590" />
|
|
<text id="det_pv31P" filter="url(#shadowMiddle)" class="infoTextClass" x="380" y="590" dx="36"
|
|
dy="26">#18</text>
|
|
<use href="#pvPlate" x="380" y="630" />
|
|
<text id="det_pv30P" filter="url(#shadowMiddle)" class="infoTextClass" x="380" y="630" dx="36"
|
|
dy="26">#17</text>
|
|
<use href="#pvPlate" x="310" y="510" />
|
|
<text id="det_pv29P" filter="url(#shadowMiddle)" class="infoTextClass" x="310" y="510" dx="36"
|
|
dy="26">#16</text>
|
|
<use href="#pvPlate" x="310" y="550" />
|
|
<text id="det_pv28P" filter="url(#shadowMiddle)" class="infoTextClass" x="310" y="550" dx="36"
|
|
dy="26">#15</text>
|
|
<use href="#pvPlate" x="310" y="590" />
|
|
<text id="det_pv27P" filter="url(#shadowMiddle)" class="infoTextClass" x="310" y="590" dx="36"
|
|
dy="26">#14</text>
|
|
<use href="#pvPlate" x="310" y="630" />
|
|
<text id="det_pv26P" filter="url(#shadowMiddle)" class="infoTextClass" x="310" y="630" dx="36"
|
|
dy="26">#13</text>
|
|
<use href="#pvPlate" x="240" y="510" />
|
|
<text id="det_pv25P" filter="url(#shadowMiddle)" class="infoTextClass" x="240" y="510" dx="36"
|
|
dy="26">#12</text>
|
|
<use href="#pvPlate" x="240" y="550" />
|
|
<text id="det_pv24P" filter="url(#shadowMiddle)" class="infoTextClass" x="240" y="550" dx="36"
|
|
dy="26">#11</text>
|
|
<use href="#pvPlate" x="240" y="590" />
|
|
<text id="det_pv23P" filter="url(#shadowMiddle)" class="infoTextClass" x="240" y="590" dx="36"
|
|
dy="26">#10</text>
|
|
<use href="#pvPlate" x="240" y="630" />
|
|
<text id="det_pv22P" filter="url(#shadowMiddle)" class="infoTextClass" x="240" y="630" dx="36"
|
|
dy="26">#9</text>
|
|
<use href="#pvPlate" x="170" y="510" />
|
|
<text id="det_pv20P" filter="url(#shadowMiddle)" class="infoTextClass" x="170" y="510" dx="36"
|
|
dy="26">#8</text>
|
|
<use href="#pvPlate" x="170" y="550" />
|
|
<text id="det_pv21P" filter="url(#shadowMiddle)" class="infoTextClass" x="170" y="550" dx="36"
|
|
dy="26">#7</text>
|
|
<use href="#pvPlate" x="170" y="590" />
|
|
<text id="det_pv19P" filter="url(#shadowMiddle)" class="infoTextClass" x="170" y="590" dx="36"
|
|
dy="26">#6</text>
|
|
<use href="#pvPlate" x="170" y="630" />
|
|
<text id="det_pv18P" filter="url(#shadowMiddle)" class="infoTextClass" x="170" y="630" dx="36"
|
|
dy="26">#5</text>
|
|
<use href="#pvPlate" x="100" y="510" />
|
|
<text id="det_pv14P" filter="url(#shadowMiddle)" class="infoTextClass" x="100" y="510" dx="36"
|
|
dy="26">#1</text>
|
|
<use href="#pvPlate" x="100" y="550" />
|
|
<text id="det_pv15P" filter="url(#shadowMiddle)" class="infoTextClass" x="100" y="550" dx="36"
|
|
dy="26">#2</text>
|
|
<use href="#pvPlate" x="100" y="590" />
|
|
<text id="det_pv16P" filter="url(#shadowMiddle)" class="infoTextClass" x="100" y="590" dx="36"
|
|
dy="26">#3</text>
|
|
<use href="#pvPlate" x="100" y="630" />
|
|
<text id="det_pv17P" filter="url(#shadowMiddle)" class="infoTextClass" x="100" y="630" dx="36"
|
|
dy="26">#4</text>
|
|
|
|
<use href="#pvPlate" transform="translate(600,500)" />
|
|
<text id="det_pv13P" filter="url(#shadowMiddle)" class="infoTextClass" x="600" y="500" dx="36"
|
|
dy="26">- W</text>
|
|
<use href="#pvPlate" transform="translate(500,500)" />
|
|
<text id="det_pv12P" filter="url(#shadowMiddle)" class="infoTextClass" x="500" y="500" dx="36"
|
|
dy="26">- W</text>
|
|
|
|
<use href="#pvPlate" transform="translate(460,120), rotate(-90)" />
|
|
<text id="det_pv5P" filter="url(#shadowMiddle)" class="infoTextClass"
|
|
transform="translate(460,120), rotate(-90)" dx="36" dy="26">- W</text>
|
|
<use href="#pvPlate" transform="translate(460,190), rotate(-90)" />
|
|
<text id="det_pv4P" filter="url(#shadowMiddle)" class="infoTextClass"
|
|
transform="translate(460,190), rotate(-90)" dx="36" dy="26">- W</text>
|
|
|
|
<use href="#pvPlate" transform="translate(460,270), rotate(-90)" />
|
|
<text id="det_pv9P" filter="url(#shadowMiddle)" class="infoTextClass"
|
|
transform="translate(460,270), rotate(-90)" dx="36" dy="26">- W</text>
|
|
<use href="#pvPlate" transform="translate(460,340), rotate(-90)" />
|
|
<text id="det_pv8P" filter="url(#shadowMiddle)" class="infoTextClass"
|
|
transform="translate(460,340), rotate(-90)" dx="36" dy="26">- W</text>
|
|
|
|
<use href="#pvPlate" transform="translate(460,420), rotate(-90)" />
|
|
<text id="det_pv11P" filter="url(#shadowMiddle)" class="infoTextClass"
|
|
transform="translate(460,420), rotate(-90)" dx="36" dy="26">- W</text>
|
|
<use href="#pvPlate" transform="translate(460,490), rotate(-90)" />
|
|
<text id="det_pv10P" filter="url(#shadowMiddle)" class="infoTextClass"
|
|
transform="translate(460,490), rotate(-90)" dx="36" dy="26">- W</text>
|
|
|
|
<use href="#pvPlate" transform="translate(400,120), rotate(-90)" />
|
|
<text id="det_pv7P" filter="url(#shadowMiddle)" class="infoTextClass"
|
|
transform="translate(400,120), rotate(-90)" dx="36" dy="26">- W</text>
|
|
<use href="#pvPlate" transform="translate(400,190), rotate(-90)" />
|
|
<text id="det_pv6P" filter="url(#shadowMiddle)" class="infoTextClass"
|
|
transform="translate(400,190), rotate(-90)" dx="36" dy="26">- W</text>
|
|
|
|
<use href="#pvPlate" transform="translate(400,270), rotate(-90)" />
|
|
<text id="det_pv3P" filter="url(#shadowMiddle)" class="infoTextClass"
|
|
transform="translate(400,270), rotate(-90)" dx="36" dy="26">- W</text>
|
|
|
|
<use href="#pvPlate" transform="translate(400,340), rotate(-90)" />
|
|
<text id="det_pv2P" filter="url(#shadowMiddle)" class="infoTextClass"
|
|
transform="translate(400,340), rotate(-90)" dx="36" dy="26">- W</text>
|
|
|
|
|
|
<text id="invList" filter="url(#shadowMiddle)" class="tooltipTextClass"
|
|
transform="translate(80,255)"></text>
|
|
<rect width="305" height="210" x="70" y="250" rx="5" ry="5" fill="none" stroke-width="4px"
|
|
stroke="#f7c000" />
|
|
</g>
|
|
</svg>
|