Darstellung Sonnenbatterie

[papa]

Hier wie versprochen meine aktuelle Version für FTUI1 & FTUI2.
Mitterweile habe ich noch eine Wallbox angebunden. Diese wir per EVCC gesteuert und ist per MQTT an FHEM angebunden.

Optionen:

Code Auswählen Erweitern

data-device - Gerät, das den Refresh triggert
data-get - Verbrauch Haus
data-feed - Einspeisungs in Netz - kann entfallen, dann -get
data-produce - Production PV-Anlage
data-charge - Ladung Akku - kann entfallen, dann -discharge
data-discharge - Entladung Akku - kann entfallen, dann -charge
data-soc - Ladezustand Battery
data-pv-max - Maxiamle Leistung PV
data-lp1 - Zustand des Steckers der Wallbox - 0 oder 1
data-lp1pow - Ladung des Auto
data-width - Breite des Widget
data-height - Höhe des Widget

Beispiel:

Code Auswählen Erweitern

<div data-type="pvvis" data-device="eStat"
  data-get="eStat:grid_pow" data-feed="eStat:feed_pow"
  data-produce="eStat:pv_power" data-pv-max="7000"
  data-soc="eStat:bat_soc" data-charge="eStat:bat_pow"
  data-lp1="Wally:lp_1_Plug" data-lp1pow="Wally:lp_1_W"
  data-width="450" data-height="450" class="centered">
</div>

eStat ist ein Dummy und wird mit Daten aus 2 Wechselrichtern und dem Stromzähler gefüllt.
Wally ist das MQTT-Device der Wallbox.

[majestro84]

Hier wie versprochen meine aktuelle Version für FTUI1 & FTUI2.
Mitterweile habe ich noch eine Wallbox angebunden. Diese wir per EVCC gesteuert und ist per MQTT an FHEM angebunden.

Optionen:

Code Auswählen Erweitern

data-device - Gerät, das den Refresh triggert
data-get - Verbrauch Haus
data-feed - Einspeisungs in Netz - kann entfallen, dann -get
data-produce - Production PV-Anlage
data-charge - Ladung Akku - kann entfallen, dann -discharge
data-discharge - Entladung Akku - kann entfallen, dann -charge
data-soc - Ladezustand Battery
data-pv-max - Maxiamle Leistung PV
data-lp1 - Zustand des Steckers der Wallbox - 0 oder 1
data-lp1pow - Ladung des Auto
data-width - Breite des Widget
data-height - Höhe des Widget

Beispiel:

Code Auswählen Erweitern

<div data-type="pvvis" data-device="eStat"
  data-get="eStat:grid_pow" data-feed="eStat:feed_pow"
  data-produce="eStat:pv_power" data-pv-max="7000"
  data-soc="eStat:bat_soc" data-charge="eStat:bat_pow"
  data-lp1="Wally:lp_1_Plug" data-lp1pow="Wally:lp_1_W"
  data-width="450" data-height="450" class="centered">
</div>

eStat ist ein Dummy und wird mit Daten aus 2 Wechselrichtern und dem Stromzähler gefüllt.
Wally ist das MQTT-Device der Wallbox.

Hi, vielen Dank fürs teilen der aktuellen Version.
Ich habe mir da ich noch keine Wallbox habe das Wallbox Icon ähnlich zur Batterie verblassen lassen.
Ich hänge die.js mal an.

VG Alex

[yersinia]

@majestro84:

Ich habe mir da ich noch keine Wallbox habe das Wallbox Icon ähnlich zur Batterie verblassen lassen.

Alternativ kannst du dies auch über CSS machen (man muss ja eh eine zusätzliche CSS-Datei mit einbinden für papas FTUI2 Widget):

Code Auswählen Erweitern

svg > #battery,
svg > #car,
svg > g > #bat-home,
svg > g > #pv-bat,
svg > g > #pv-bat-txt,
svg > g > #bat-home-txt,
svg > g > #home-car,
svg > g > #home-car-txt {
  display: none; /* zum komplett ausblenden - Zeile loeschen wenn nur ausgegraut werden soll */
  opacity: 0.2; /*zum ausgrauen */
  fill: #090 !important; /*zum ausgrauen */
  stroke: #090 !important; /*zum ausgrauen */
}



@papa: Danke, dass du zum Einen das FTUI2-Widget weiter entwickelst und zum Anderen deine neuere Version zur Verfügung stellst.

Mitterweile habe ich noch eine Wallbox angebunden. Diese wir per EVCC gesteuert und ist per MQTT an FHEM angebunden.

Die Wallbox und die Darstellung ist echt cool! Ich denke, für FTUI3 wäre dies auch sinnvoll - ich hab den Codeteil auch direkt geklautübernommen.

Für diejenigen, die FTUI3 nutzen anhängend die Version mit der Wallbox. Dafür gibt es zwei neue Attribute:
has-no-wallbox: wenn gesetzt, wird der Wallbox-Teil ausgblendet (analog zu has-no-battery)
[wb-feed]: nimmt den Wert des derzeitigen Ladens des Autos auf (entspricht papas data-lp1pow - Ladung des Auto). Ist der Wert  <= 0 wird der Strang und das Auto ausgegraut. Ist der Wert > 0 wird das Auto grün und der flow gelb eingefärbt.

Ansonsten bleibt die Nutzung weiterhin wie in #57 (und bezgl battstep das Update in #64 sowie von unit-soc und unit-value das Update in #82) beschrieben.

[papa]

Hab jetzt nochmal die SVG Grafiken und die Darstellung des Akkufüllstandes angepasst.
Das stand schon ewig auf meiner Wunschliste.

Ich würde auch noch gern den Akku per "Farbverlauf" anzeigen - also bei 100% -> grün, bei 50% -> gelb, bei 0% -> rot. Ist der Wert dazwischen, sollte entsprechend eine Mischfarbe berechnet werden. Es soll also je nach Wert von grün nach gelb und rot übergeblendet werden. Wenn jemand weiss, wie das einfach mit Javascript oder FTUI geht (ohne extra zusätzlichen Code einzubinden), wäre ich für nen Hinweis dankbar.

[mr_petz]

@papa
Ich stand mal vor dem gleichen Problem bei meinem Thermostat-Modul für FTUI3.
So kannst du einen Gradientverlauf definieren Bsp.:

Code Auswählen Erweitern


<svg height="150" width="400">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>


Stammt von hier:
https://www.w3schools.com/graphics/svg_grad_linear.asp

Bei mir und bei setstate sieht es so aus:
@setstate´s:
https://github.com/knowthelist/ftui/blob/master/www/ftui/components/knob/knob.component.js#L77

und meins:
https://github.com/mr-petz/ftui/blob/thermostat/www/ftui/components/thermostat/thermostat.component.js#L70

Ich hoffe das es dir hilft. Ansonsten könnte ich dich unterstützen wenn du magst...
LG mr_petz

Edit:
Ein Beispiel unformatiert (ist schon spät):

Code Auswählen Erweitern


<svg width="400" height="400" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">\
<g class="layer">
  <title>Layer 1</title>
  <defs>
   <linearGradient id="grad1" x1="0%" x2="0%" y1="0%" y2="100%">
    <stop offset="0%" stop-color="rgb(0,255,0)"/>
    <stop offset="50%" stop-color="rgb(255,255,0)"/>
    <stop offset="100%" stop-color="rgb(255,0,0)"/>
   </linearGradient>
   <linearGradient id="grad2" x1="100%" x2="0%" y1="0%" y2="0%">
    <stop offset="0%" stop-color="rgb(0,255,0)"/>
    <stop offset="50%" stop-color="rgb(255,255,0)"/>
    <stop offset="100%" stop-color="rgb(255,0,0)"/>
   </linearGradient>
  </defs>
  <g fill="url(#grad2)" id="battery" transform="translate(300,147),scale(.175,.145)">\
   <path d="m0,176c0,-44.2 35.82,-80 80,-80l384,0c44.2,0 80,35.8 80,80l0,16c17.7,0 32,14.3 32,32l0,64c0,17.7 -14.3,32 -32,32l0,16c0,44.2 -35.8,80 -80,80l-384,0c-44.18,0 -80,-35.8 -80,-80l0,-160zm80,-16c-8.84,0 -16,7.2 -16,16l0,160c0,8.8 7.16,16 16,16l384,0c8.8,0 16,-7.2 16,-16l0,-160c0,-8.8 -7.2,-16 -16,-16l-384,0z" id="svg_3" transform="rotate(-90,300,300)"/>\
   <rect fill="url(#grad1)" height="380" id="batxx" stroke-width="0px" width="155" x="178" y="135"/>\</g>
</g></svg>


grad1==Füllstand
grad2==Hülle
Sieht dann so aus wie im Anhang...

[yersinia]

@papa: wenn du den Farbverlauf als Farbe in Abhängigkeit des Füllstandes anzeigen willst (und nicht als Farbverlauf der Batterie selbst), schau mal hier: https://jsfiddle.net/JeancarloFontalvo/1sco9Lpe/3/

[papa]

@papa: wenn du den Farbverlauf als Farbe in Abhängigkeit des Füllstandes anzeigen willst (und nicht als Farbverlauf der Batterie selbst), schau mal hier: https://jsfiddle.net/JeancarloFontalvo/1sco9Lpe/3/

Genau das hier meinte ich. Danke

[mr_petz]

...

Ich würde auch noch gern den Akku per "Farbverlauf" anzeigen - also bei 100% -> grün, bei 50% -> gelb, bei 0% -> rot. Ist der Wert dazwischen, sollte entsprechend eine Mischfarbe berechnet werden. Es soll also je nach Wert von grün nach gelb und rot übergeblendet werden. Wenn jemand weiss, wie das einfach mit Javascript oder FTUI geht (ohne extra zusätzlichen Code einzubinden), wäre ich für nen Hinweis dankbar.

Ok ich hatte hier Farbverlauf gelesen und da für mich gradient die Lösung. Da könnte man von oben noch einen grauen Layer darüberlegen wenn der Füllstand geringer wird...
Die Lösung von @yersinia ist halt mit mehr css und js aber gut...
LG

[yersinia]

Hach, so viele neue Impulse und Ideen. Da will ich in nichts nachstehen - anbei ein Update der FTUI3 component.
- die Nutzung bleibt weiterhin wie in #57 beschrieben
- bezgl battstep siehe Update in #64
- bezgl unit-soc und unit-value das Update in #82
- Wallbox (Wiederholung von #122):

has-no-wallbox: wenn gesetzt, wird der Wallbox-Teil ausgblendet (analog zu has-no-battery)
[wb-feed]: nimmt den Wert des derzeitigen Ladens des Autos auf (entspricht papas data-lp1pow - Ladung des Auto). Ist der Wert  <= 0 wird der Strang und das Auto ausgegraut. Ist der Wert > 0 wird das Auto grün und der flow gelb eingefärbt.

- sun-icon andere icons für die Sonne => sun2 entspricht der Sonne von papa aus #123; pvsun entspricht dem panel und der Sonne von Shadow3561 aus #24; sun ist der Standardwert und muss nicht explizit gesetzt werden
- grid-icon ist um einen weiteren pylon pylon2 von papa aus #123 erweitert worden; valide Werte sind nun: pylon, pylon2 oder cable (Standard; muss nicht explizit gesetzt werden)
- der Batteriestand wird nun als Farbverlauf in Abhängigkeit des Ladezustands angezeigt - wenn der Akku leer ist färben sich die Balken rot und gehen bei Ladung bis voll sukzessive in grün über. Dabei ändern nur die Ladebalken die Farbe, die Batterie selbst zeigt immernoch an ob sie geladen (grün) oder entladen (rot) wird. Wer diesen Farbverlauf nicht haben möchte, setzt no-bat-gradient (analog zu has-no-wallbox). (Wenn battstep gesetzt ist, wird der erste Werte als untere Schwelle (leer) und der letzte Wert als obere Schwelle (voll) benutzt - bezgl battstep siehe auch #64)

Vielen Dank an papa und Shadow3561 für die Vorlagen hier.

[stenny]

Wow.

Sieht gut aus.

Woran erkenne ich eigentlich ob ich die 2er oder 3er Version nutze?
Meine Oberfläche habe ich mit FUIP eingerichtet - ich weis so nicht bzw. finde nicht welches ftui genutzt wird dabei...

Danke
Carsten

[yersinia]

Woran erkenne ich eigentlich ob ich die 2er oder 3er Version nutze?
Meine Oberfläche habe ich mit FUIP eingerichtet - ich weis so nicht bzw. finde nicht welches ftui genutzt wird dabei...

An der Art, wie der HTML Code aufgebaut ist. Und nach Thorsten basiert FUIP auf irgendwas wie FTUI2. Laut Wiki ist es auch FTUI2:

FUIP verwendet FTUI (v2.x - es gibt inzwischen auch eine FTUI v3.x). D.h. man sollte zuerst einmal FTUI installieren, falls noch nicht passiert. Wie das geht steht bei FHEM Tablet UI. Dabei reicht der erste Schritt aus, da lediglich die FTUI-Dateien von FUIP benötigt werden.

[stenny]

Danke erstmal für die schnelle Antwort.

Ich bin erstmal soweit auch davon ausgegangen das es die V2 ist.

Habe die zwei Dateien auch in die Verzeichnisse kopiert (www/tablet/js und css)
Nach dem definieren erhalte ich einen Fehler "Syntax Exrror: unexexapted token: Identififier"

Ist das jetzt ein Problem für hier oder eher im Bereich FUIP?

[Grisu1079]

Guten morgen,

Danke für das tolle Widget. Ich nutze die FTUI3 Version.

Frage/Wunsch: ich nutze die FTUI3 Version. Ich betreibe eine Anlage welche die Batterie sowohl via Netz als auch via PV laden kann, aber nicht ins Netz einspeisen kann.
Daher die Frage ob man optional den Pfad PV-> Netz per Attribut ausblendbar machen Könnte und weiterhin per weiterem Attribut einen Pfad Netz-> Batterie einblendbar machen könnte (den man dann natürlich auch mit einem Leistungswert versehen können sollte).
Letzter Finish-Wunsch wäre noch das Haussymbol austauschbar zu machen gegen ein Steckdosen-Symbol, denn zumindest bei mir versorgt die Anlage nicht das ganze Haus sondern dient als Backup/USV für einige wichtige Verbraucher und da passt das mit dem Haus nur bedingt.
Wenn gewünscht kann ich mich aber auch selber versuchen und das Ergebnis falls ich es schaffe zur Verfügung stellen.
Könnte mir schon vorstellen, dass mehrere Leute gibt die sowas nutzen könnten.

Grüße
Markus

[yersinia]

Frage/Wunsch: ich nutze die FTUI3 Version. Ich betreibe eine Anlage welche die Batterie sowohl via Netz als auch via PV laden kann, aber nicht ins Netz einspeisen kann.
Daher die Frage ob man optional den Pfad PV-> Netz per Attribut ausblendbar machen Könnte und weiterhin per weiterem Attribut einen Pfad Netz-> Batterie einblendbar machen könnte (den man dann natürlich auch mit einem Leistungswert versehen können sollte).
Letzter Finish-Wunsch wäre noch das Haussymbol austauschbar zu machen gegen ein Steckdosen-Symbol, denn zumindest bei mir versorgt die Anlage nicht das ganze Haus sondern dient als Backup/USV für einige wichtige Verbraucher und da passt das mit dem Haus nur bedingt.

Puh, das klingt für mich nach einem sehr speziellen Anwendungsfall - ich weiss nicht, ob das (auch noch) in einer generellen component vorkommen sollte. Für mich klingt das derzeit danach, als würdest nur du dies benötigen - sofern es keine weiteren Befürworter(m/w/d)/Bedarf gibt, sehe ich noch keinen Nutzen für 'meine' FTUI3 Version.
Aber es steht dir frei die component entsprechend für dich anzupassen.

[Tobias]

Das sieht schon sehr gut aus
In dieselbe Richtung geht auch diese Visualisierung hier: https://forum.fhem.de/index.php/topic,75456.msg988539.html#msg988539

Gibt es ein HTML Ftui Beispiel auf das ich aufsetzen könnte? Ich habe keinen Sonnenbatterie sondern einen Solax X1 WR und mehrere Micro-WR. Kann man die anderslautenden Readings dem Modul als Parameter mitgeben?