[FTUI3] Darstellung Heizung&Warmwasser&Solarthermie

[docolli]

Hallo,

angeregt von der PV Darstellung mittels pvvis (https://forum.fhem.de/index.php/topic,119440.0.html) habe ich begonnen mir eine Darstellung der Heizung / Warmwassererzeugung / Speicher und Solarthermieanlage zu bauen.
Großen Dank an @papa, @yersinia und @mr_petz für die Grundlagen und die Unterstützung zu meinen Beiträgen zu pvvis!

Ich habe folgende Messwerte mittels 1-wire Sensoren an meinem Raspi:

• Heizung Vorlauf
• Heizung Rücklauf
• Warmwasser Speicherladung Vorlauf
• Warmwasser Speicherladung Rücklauf
• Solarthermie Vorlauf
• Solarthermie Rücklauf
• Warmwasserspeicher Temperatur oben
• Warmwasserspeicher Temperatur mitte
• Warmwasserspeicher Temperatur unten
• Ausgang Warmwassertemperaturbegrenzer (Mischer)
• Temperatur an einem Heizkörper (per JeeLink LaCrosse Sensor)

Zusätzlich habe ich den aktuellen Wasserverbrauch (siehe https://github.com/jomjol/AI-on-the-edge-device), der in diese Darstellung auch passt.
Geplant ist noch durch 230V Erkennung (Optokoppler) mit einem ESP32 zu wissen, wann die Heizung läuft bzw. die Pumpen laufen. Dazu kommt aber ein extra Beitrag, wenn es mal läuft.

Meine Darstellung ist flexibel gebaut, wenn Werte nicht übergeben werden, dann werden sie nicht dargestellt. Die Pumpen können grün werden und sich drehen, die Heizung wird bei Betrieb grün umranded und die Flamme brennt. Wird der Speicher beladen (durch Heizungspumpe oder Solarpumpe), so wird dieser grün umrandet. Läuft die Solarpumpe, so wird dass Solarpanel auch grün umrandet und die Sonne wird gelb. Siehe Bilder.

Die Werte des Warmwasserspeichers werden im Speicher dargestellt, zusätzlich gibt es einen von diesen Werten abhängigen Heiß/Kalt Gradienten (Rot/Blau) im Speicher. Max 60°C = Rot, Min 10°C = Blau.

Parameter:

tank-top: optional; Warmwassertanktemperatur oben in °C
tank-middle: optional; Warmwassertanktemperatur mitte in °C
tank-bottom: optional; Warmwassertanktemperatur unten in °C
warmwater-supply: optional; Vorlauf Warmwasserspeicherbeheizung in °C
warmwater-return: optional; Rücklauf Warmwasserspeicherbeheizung in °C
heating-supply: optional; Vorlauf Hausbeheizung in °C
heating-return: optional; Rücklauf Hausbeheizung in °C
solar-supply: optional; Vorlauf Solarthermie in °C
solar-return: optional; Rücklauf Solarthermie in °C
radiator: optional; Temperatur Heizkörper in °C
mixer: optional; Temperatur Mischer Warmwasser in °C
water-flowrate: optional; Wasserverbrauch in l/min
heating-pump: optional; Heizungspumpe (on/off)
warmwater-pump: optional; Pumpe Warmwasserspeicherbeheizung (on/off)
solar-pump: optional; Pumpe Solarthermie (on/off)
heat-station: optional; Heizung (on/off)
width: optional; Breite der Darstellung

Ich hoffe ihr habt Verwendung für diese FTUI Komponente.

[Tobias]

Hi,

das ist genau das was ich gesucht hatte
Ich habe festgestellt, das das Attribut "width" nichts macht Erst wenn ich im js-code in den properties die width hart anpasse, wird das bild auch größer

Code Auswählen Erweitern

<ftui-grid-tile row="3" col="6" height="6" width="6">
        <ftui-heatvis
          [width]="400px"
          [tank-top]="Heizung:WW-Temp-Oben"
        ></ftui-heatvis>
      </ftui-grid-tile>

[docolli]

Habe grad mal bei mir nachgesehen, du musst width ohne [] verwenden. Habe das auch nur von pvvis übernommen.

Code Auswählen Erweitern

<ftui-heatvis
[buffer-tank-top]="Pufferspeicher_Oben:temperature | round(1) | fix(1)"
[buffer-tank-top-middle]="Pufferspeicher_ObenMitte:temperature | round(1) | fix(1)"
...
width="500px"></ftui-heatvis>

Ich kann aber keinen Support mehr geben, da ich seit >1 Jahr eine Wärmepumpe habe und den Code passend zu meinem Setup angepasst habe.

[Tobias]

Kannst du dein aktuelles Modul für die Wärmepumpe hier auch teilen?
Wie hast du das SVG hinbekommen. Der svg-Code sieht nicht so aus als ob dieser von Hand geschrieben wurde. Welches Tool hast du benutzt? Ich würde gerne deinen SVG-Code dort einlesen und mit ein paar Werten ergänzen.

[docolli]

Zur Erzeugung des SVG-Teils habe ich Inkscape verwendet. Das SVG lässt sich rauskopieren und als .svg speichern. Dann in Inkscape bearbeiten. Über Ebenen und Objekte lässt sich auch der Objektname (Kennung & Beschriftung !) ganz gut bearbeiten.
Dann "Kopie speichern" und "Optimiertes SVG" auswählen. Mit den Optionen für die optimierte SVG-Ausgabe musst du rumspielen, bis der SVG Code past und einfach wieder zurück in den Code kopiert werden kann.

Mein Modul für die Wärmepumpe ist auf meine Bedürfnisse zugeschnitten, da kann man z.B. nix aus/einbleden, was man nicht hat. Aber bei Gelegenheit kann ich das gerne in einem neuen Beitrag posten, als Basis für eigene Anpassungen.