Neuigkeiten:

Am Sonntag den 8.12.2024 kann es ab ca. 8:00 Uhr zu kurzzeitigen Einschränkungen / Ausfällen bei den Diensten des FHEM Vereines kommen.
Die Server müssen mal gewartet und dabei neu gestartet werden ;)

Hauptmenü

Darstellung Sonnenbatterie

Begonnen von dennis_n, 11 März 2021, 10:33:34

Vorheriges Thema - Nächstes Thema

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:
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:
<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.
BananaPi + CUL868 + CUL433 + HM-UART + 1Wire

majestro84

Zitat von: papa am 11 August 2022, 20:35:25
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:
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:
<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
Server: Fujitsu ESPRIMO Q920 - aktuellen FHEM-Docker Image:Z-Wave (RollerShutter,DoorWindow,Socket,PIR,....) | ENIGMA2 | EGPM2LAN | BLE-Tag(PRESENCE) | HUE | alexa-fhem | Shelly | MQTT2
1.Pi-Zero:Viessmann(optolink) mit 89_VCONTROL300.pm
2.Pi3 Dongle Server: Zigbee2MQTT(CC1352P-2), Z-Wave(UZB1), BT

yersinia

#122
@majestro84:
Zitat von: majestro84 am 12 August 2022, 10:29:27Ich 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):
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. :D
Zitat von: papa am 11 August 2022, 20:35:25Mitterweile 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.
viele Grüße, yersinia
----
FHEM 6.3 (SVN) on RPi 4B with RasPi OS Bullseye (perl 5.32.1) | FTUI
nanoCUL->2x868(1x ser2net)@tsculfw, 1x433@Sduino | MQTT2 | Tasmota | ESPEasy
VCCU->14xSEC-SCo, 7xCC-RT-DN, 5xLC-Bl1PBU-FM, 3xTC-IT-WM-W-EU, 1xPB-2-WM55, 1xLC-Sw1PBU-FM, 1xES-PMSw1-Pl

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.
BananaPi + CUL868 + CUL433 + HM-UART + 1Wire

mr_petz

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

<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):

<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/
viele Grüße, yersinia
----
FHEM 6.3 (SVN) on RPi 4B with RasPi OS Bullseye (perl 5.32.1) | FTUI
nanoCUL->2x868(1x ser2net)@tsculfw, 1x433@Sduino | MQTT2 | Tasmota | ESPEasy
VCCU->14xSEC-SCo, 7xCC-RT-DN, 5xLC-Bl1PBU-FM, 3xTC-IT-WM-W-EU, 1xPB-2-WM55, 1xLC-Sw1PBU-FM, 1xES-PMSw1-Pl

papa

Zitat von: yersinia am 15 August 2022, 07:40:44
@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
BananaPi + CUL868 + CUL433 + HM-UART + 1Wire

mr_petz

Zitat von: papa am 14 August 2022, 22:52:51
...

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

#128
Hach, so viele neue Impulse und Ideen. :) Da will ich in nichts nachstehen ;D - 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):
Zitat von: yersinia am 12 August 2022, 11:59:50has-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. :)
viele Grüße, yersinia
----
FHEM 6.3 (SVN) on RPi 4B with RasPi OS Bullseye (perl 5.32.1) | FTUI
nanoCUL->2x868(1x ser2net)@tsculfw, 1x433@Sduino | MQTT2 | Tasmota | ESPEasy
VCCU->14xSEC-SCo, 7xCC-RT-DN, 5xLC-Bl1PBU-FM, 3xTC-IT-WM-W-EU, 1xPB-2-WM55, 1xLC-Sw1PBU-FM, 1xES-PMSw1-Pl

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

#130
Zitat von: stenny am 19 August 2022, 14:20:14Woran 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:
ZitatFUIP 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.
viele Grüße, yersinia
----
FHEM 6.3 (SVN) on RPi 4B with RasPi OS Bullseye (perl 5.32.1) | FTUI
nanoCUL->2x868(1x ser2net)@tsculfw, 1x433@Sduino | MQTT2 | Tasmota | ESPEasy
VCCU->14xSEC-SCo, 7xCC-RT-DN, 5xLC-Bl1PBU-FM, 3xTC-IT-WM-W-EU, 1xPB-2-WM55, 1xLC-Sw1PBU-FM, 1xES-PMSw1-Pl

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

Zitat von: Grisu1079 am 24 August 2022, 07:52:14Frage/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. ;)
viele Grüße, yersinia
----
FHEM 6.3 (SVN) on RPi 4B with RasPi OS Bullseye (perl 5.32.1) | FTUI
nanoCUL->2x868(1x ser2net)@tsculfw, 1x433@Sduino | MQTT2 | Tasmota | ESPEasy
VCCU->14xSEC-SCo, 7xCC-RT-DN, 5xLC-Bl1PBU-FM, 3xTC-IT-WM-W-EU, 1xPB-2-WM55, 1xLC-Sw1PBU-FM, 1xES-PMSw1-Pl

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?
Maintainer: Text2Speech, TrashCal, MediaList

Meine Projekte: https://github.com/tobiasfaust
* PumpControl v2: allround Bewässerungssteuerung mit ESP und FHEM
* Ein Modbus RS485 zu MQTT Gateway für SolarWechselrichter