Photovoltaik Eigenverbrauch,Bilanz,Prognose (Kostal Plenticore; KSEM; BYD HV)

[trupf]

OK hab es gefunden in https://svn.fhem.de/fhem/trunk/fhem/contrib/ch.eick/Photovoltaik/99_myUtils.pm_Erg%c3%a4nzungen.txt

[ch.eick]

OK hab es gefunden in https://svn.fhem.de/fhem/trunk/fhem/contrib/ch.eick/Photovoltaik/99_myUtils.pm_Erg%c3%a4nzungen.txt

Ich denke das sollte es beheben

[trupf]

Ich habe noch ein Problem mit dem FHEM Style f18. Eigentlich gefällte er mir gut nur habe ich ein Problem bei den Balkenanzeigen für den SOC in WR_1_Speicher_1_ExternControl, siehe angefügten Screenshot. Statt nur dem Rahmen wie bei f11 wird noch ein recht breiter farbiger innerer Rand hizugefügt.  Mir ist es nicht gelungen den durch styling-Elemente wegzubekommen. Hast Du eine Ahnung, was man da machen müsste?

[ch.eick]

Ich habe noch ein Problem mit dem FHEM Style f18. Eigentlich gefällte er mir gut nur habe ich ein Problem bei den Balkenanzeigen für den SOC in WR_1_Speicher_1_ExternControl, siehe angefügten Screenshot. Statt nur dem Rahmen wie bei f11 wird noch ein recht breiter farbiger innerer Rand hizugefügt.  Mir ist es nicht gelungen den durch styling-Elemente wegzubekommen. Hast Du eine Ahnung, was man da machen müsste?

Moin,
leider habe ich von den styles keine Ahnung. Ich verwende ios7.

[ch.eick]

Ich habe noch ein Problem mit dem FHEM Style f18. Eigentlich gefällte er mir gut nur habe ich ein Problem bei den Balkenanzeigen für den SOC in WR_1_Speicher_1_ExternControl, siehe angefügten Screenshot. Statt nur dem Rahmen wie bei f11 wird noch ein recht breiter farbiger innerer Rand hizugefügt.  Mir ist es nicht gelungen den durch styling-Elemente wegzubekommen. Hast Du eine Ahnung, was man da machen müsste?

Ich habe da nochmal nachgedacht.
Du findes in dem uiTable solche Definitionen für die Batterie Darstellung. Hierbei wird ein Rahmen definiert, der dann komplett mit Farbverlauf gefüllt wird. Darüber liegt dann die Beschriftung, die den Farbverlauf entsprechend der Speicherladung für den rest des Feldes abdeckt.
Hier ein Beispiel für die Tabellen Zeile

Code Auswählen Erweitern

FUNC_Status([WR_1:Actual_Battery_charge_-minus_or_discharge_-plus_P],-10,"green",[WR_1:Actual_Battery_charge_-minus_or_discharge_-plus_P],"orange",[WR_1:Actual_Battery_charge_-minus_or_discharge_-plus_P],15,"red",[WR_1:Actual_Battery_charge_-minus_or_discharge_-plus_P])." W"."<div style='border-width:2px;border-style:solid;border-color:gray;position:relative;width:90px;height:20px;background:linear-gradient( to right, red 0px,yellow 30px,green 50px);'>".STY(" ",FUNC_batt([WR_1:Act_state_of_charge])).STY(::round([WR_1:Act_state_of_charge],0)."%","font-size:16px;position:absolute;top:2px;left:30px")."</div>"
Hier nur die Batterie Darstellung
Geändert habe ich bereits width:82px;height:18px; wodurch der Ramen für f18 etwas kleiner wird.

Code Auswählen Erweitern

"<div style='border-width:2px;border-style:solid;border-color:gray;position:relative;width:82px;height:18px;background:linear-gradient( to right, red 0px,yellow 30px,green 50px);'>".STY(" ",FUNC_batt([WR_1:Act_state_of_charge])).STY(::round([WR_1:Act_state_of_charge],0)."%","font-size:16px;position:absolute;top:2px;left:30px")."</div>"
Und das wäre die Abdeckung mit der Beschriftung

Code Auswählen Erweitern

STY(::round([WR_1:Act_state_of_charge],0)."%","font-size:16px;position:absolute;top:2px;left:30px")
Somit würde das dann für f18 so aussehen.
Du darfst diesen Dateianhang nicht ansehen.

[trupf]

Ich habe da nochmal nachgedacht.
Du findes in dem uiTable solche Definitionen für die Batterie Darstellung. Hierbei wird ein Rahmen definiert, der dann komplett mit Farbverlauf gefüllt wird. Darüber liegt dann die Beschriftung, die den Farbverlauf entsprechend der Speicherladung für den rest des Feldes abdeckt.

Ich habe gefunden, was ich ändern muss. Der Code sieht jetz bei mir so aus:

Code Auswählen Erweitern

FUNC_Status([WR_1:Actual_Battery_charge_-minus_or_discharge_-plus_P],-10,"green",[WR_1:Actual_Battery_charge_-minus_or_discharge_-plus_P],"orange",[WR_1:Actual_Battery_charge_-minus_or_discharge_-plus_P],15,"red",[WR_1:Actual_Battery_charge_-minus_or_discharge_-plus_P])." W<br><div style='border-width:2px;border-style:solid;border-color:gray;position:relative;width:90px;height:20px;padding:0px 0px;display:inline-block;background:linear-gradient( to right, red 0px,yellow 30px,green 50px);'>".STY(" ",FUNC_batt([WR_1:Act_state_of_charge])).STY(::round([WR_1:Act_state_of_charge],0)."%","font-size:16px;position:absolute;top:2px;left:30px")."</div>"
Wesentliche Änderungen:
- padding:0px 0px; ==> Dies bewirkt dass der Rahmen wieder schmaler wird und nur noch die Border mit 2px in grau als Rahmen gezeichnet wird
- <br> (hinter dem "W" in der Textzeile) ==> definierter Zeilenumbruch, damit die Elemente nicht nebeneinander gezeichnet werden, für folgende display-Spezifikation erfoderlich
- display:inline-block; ==> dadurch werden die Element mittig platziert

Damit sieht das ganze dann so wie unten aus. Dieses ganze Styling mit CSS ist für mich echt schwer durchschaubar...

Ich habe noch ein Problem mit f18 entdeckt: Mit den Default-Einstellungen und gelbem Hintergrund passt das Styling, der helle Hintergrund ist auch OK. Bei dunklem Hintergrund bleiben aber einige Elemente hell (s.u.), das betrifft vor allem die Widgets uzsuDropDown und uzsuToggle. Die scheinen in dem Style nicht korrekt berücksichtigt worden zu sein, d.h. es gibt keinen CSS-Code für das dunkle Layout. Ist das Problem bekannt und wird das noch adressiert oder wo kann man das an das FHEM-Team melden?

[TomLee]

...wo kann man das an das FHEM-Team melden?

Moin

FHEMWEB wäre das richtige Unterforum dafür.

[trupf]

...wo kann man das an das FHEM-Team melden?

Moin
FHEMWEB wäre das richtige Unterforum dafür.

Ist gemeldet und schon gefixt.

Ich musste dann noch in Modul WR_1_Speicher_1_ExternControl ein paar Änderungen im uiTable vornehmen, und zwar in der sub FUNC_batt und bei den bunten SOC-Anzeigen. Das sieht bei mir jetzt so aus wie unten. Dadurch wird der Hintergrund wie im CSS vorgegeben erhalten und nicht mehr überschrieben.

@ch.eick: vielleicht willst Du die Änderungen auch in Deinen Code übernehmen? Dann kann man den f18 style gut verwenden und hat ein paar mehr Möglichkeiten das Aussehen anzupassen...

Code Auswählen Erweitern

{
package ui_Table;
##  $TR{0} = "style='color:yellow;text-align:left;font-weight:bold;font-size:18px'";                                                        ## Reihe 0 für Überschrift
  $TABLE = "style='width:100%'";
  $TD{0..9}{0} = "align='center' style='font-size:16px;border-right-style:solid;border-color:darkgreen;border-right-width:2px;width:22%'";
  $TD{0..9}{1} = "style='border-top-style:solid;border-bottom-style:solid;border-right-style:solid;border-color:darkgreen;border-top-width:2px;border-bottom-width:2px;border-right-width:1px;width:38%;font-weight:bold;'";
  $TD{0..9}{2..5} = "style='border-top-style:solid;border-bottom-style:solid;border-right-style:solid;border-color:darkgreen;border-top-width:2px;border-bottom-width:2px;border-right-width:1px;width:10%;text-align:center;'";

sub FUNC_batt {
    my($val)=@_;
    my $ret="position:absolute;left:0px;width:".(90*$val/100)."px;height:20px;background:linear-gradient( to right, red 0px,yellow 30px,green 50px);";
    return $ret;
  }
sub FUNC_Status {
    my($value, $min, $colorMin,  $statusMin,  $colorMiddel, $statusMiddle, $max, $colorMax, $statusMax)=@_;
    my $ret = ($value < $min)? '<span style="color:'.$colorMin.'">'.$statusMin.'</span>' : ($value > $max)? '<span style="color:'.$colorMax.'">'.$statusMax.'</span>' : '<span style="color:'.$colorMiddel.'">'.$statusMiddle.'</span>';
    return $ret;
  }
}

#########################################################
## "Spalte 0"|"Spalte 1"|"Spalte 2"|"Spalte 3"|"Spalte 4"|"Spalte 5"

"$SELF"|"Kommando<dd>Auswahl / DcPowerAbs / Status</dd>" | widget([$SELF:ui_command_1],"uzsuDropDown,---,Status_Speicher,smart_Laden_start,smart_Laden_beenden,smart_Laden_starten_WB_1,smart_Laden_beenden_WB_1,Kommando_Wiederholung,SOC_Calculation,Reset,DC_Power_Abs,Sommer,Winter,Speicher_voll,14_Luefter_ein,15_Luefter_aus,Status_WR_1_Speicher_1_BYD") | widget([$SELF:SpeicherDcPowerAbs],"selectnumbers,-4500,250,4500,0,lin")."W<br>".widget([$SELF:SpeicherTriggerLaden],"uzsuDropDown,An,Aus,manuell") |[WR_1_API:Battery_EM_State]|([$SELF:SpeicherExternTrigger] eq "gesperrt" and [WR_1_API:Battery_InternControl_MinHomeConsumption] == 30000)?'<span style="color:red">smart_Laden aktiv</span>':""

|"Speicher<dd>Steuerung</dd>" |widget([$SELF:SpeicherEntladung],"uzsuDropDown,Automat.,Trigger,Zeit")|""|
FUNC_Status([WR_1:Actual_Battery_charge_-minus_or_discharge_-plus_P],-10,"#00FF00","Laden","orange","Standby",15,"red","Entladen").FUNC_Status([WR_1:Act_state_of_charge],15,"red","Speicher SOC","orange","Speicher SOC",49,"#00FF00","Speicher SOC")|

FUNC_Status([WR_1:Actual_Battery_charge_-minus_or_discharge_-plus_P],-10,"green",[WR_1:Actual_Battery_charge_-minus_or_discharge_-plus_P],"orange",[WR_1:Actual_Battery_charge_-minus_or_discharge_-plus_P],15,"red",[WR_1:Actual_Battery_charge_-minus_or_discharge_-plus_P])." W<br>
<div style='border-width:2px;border-style:solid;border-color:gray;position:relative;width:90px;height:20px;padding:0px 0px;display:inline-block;background:transparent;'>".STY(" ",FUNC_batt([WR_1:Act_state_of_charge])).STY(::round([WR_1:Act_state_of_charge],0)."%","font-size:16px;position:absolute;top:2px;left:30px")."</div>"


|"Trigger<dd>Status / ExternTrigger / Start / Ende</dd>" | widget([$SELF:SpeicherTrigger],"uzsuDropDown,entladen,gesperrt,none") | widget([$SELF:SpeicherExternTrigger],"uzsuDropDown,frei,gesperrt,none") | widget([$SELF:SpeicherZeitStart],"time") | widget([$SELF:SpeicherZeitEnde],"time")

|"Kommando Wiederholung<dd>aktiviert / läuft</dd>" | widget([$SELF:SpeicherCmdRepeatActive],"uzsuToggle,Aus,An") | widget([$SELF:SpeicherCmdRepeatRunning],"uzsuToggle,Aus,An") |""|""

|"MaxSOC Kontrolle<dd>aktiviert / läuft</dd>" | widget([$SELF:SpeicherMaxSOCControlActive],"uzsuToggle,Aus,An") | widget([$SELF:SpeicherMaxSOCControlRunning],"uzsuToggle,Aus,An") |""|""

|"MaxSOC Limit<dd>fc1_Limit / Minimum SOC Zeit / gestern / geplant</dd>" |
FUNC_Status([WR_1:Solar_Calculation_fc1_day],[$SELF:SpeicherMaxSOC_fc1_Limit],"red","<",0,0,([$SELF:SpeicherMaxSOC_fc1_Limit]-1),"#00FF00",">="). widget([$SELF:SpeicherMaxSOC_fc1_Limit],"selectnumbers,2000,1000,40000,0,lin") | widget([$SELF:SpeicherMaxSOC_MinSOC_Time],"time"). widget([$SELF:SpeicherMaxSOC_MinSOC_MinSOC],"selectnumbers,5,1,100,0,lin") |
"<div style='border-width:2px;border-style:solid;border-color:gray;position:relative;width:90px;height:20px;padding:0px 0px;display:inline-block;background:transparent;'>".STY(" ",FUNC_batt([$SELF:SpeicherMaxSOC_DayBefore])).STY("gestern","font-size:12px;position:absolute;top:3px;left:25px")."</div><br>".widget([$SELF:SpeicherMaxSOC_DayBefore],"selectnumbers,5,1,100,0,lin")."%" |
"<div style='border-width:2px;border-style:solid;border-color:gray;position:relative;width:90px;height:20px;padding:0px 0px;display:inline-block;background:transparent;'>".STY(" ",FUNC_batt([$SELF:SpeicherMaxSOC_Actual])).STY("geplant","font-size:12px;position:absolute;top:3px;left:25px")."</div><br>".widget([$SELF:SpeicherMaxSOC_Actual],"selectnumbers,5,1,100,0,lin")."%"

|"Mittags Kontrolle<dd>aktiviert / läuft</dd>" | widget([$SELF:SpeicherMiddayControlActive],"uzsuToggle,Aus,An") | widget([$SELF:SpeicherMiddayControlRunning],"uzsuToggle,Aus,An")|""|""

|"Mittags Limits<dd>Inverter_Max_Power / Laden nicht vor / Start /Stop<br>MaxSOC morgens / Power morgens / Power mittags</dd>" | widget([$SELF:SpeicherMidday_Inverter_Max_Power],"selectnumbers,1000,250,15000,0,lin")."W<br>".widget([$SELF:SpeicherMidday_MaxSOC],"selectnumbers,5,1,100,0,lin")."%" | widget([$SELF:SpeicherMidday_NotBefore],"time").widget([$SELF:SpeicherMidday_MaxChargePowerAbs_morning],"selectnumbers,0,50,1000,0,lin")."W" | widget([WR_1:Solar_middayhigh_fc0_start],"time").widget([$SELF:SpeicherMidday_MaxChargePowerAbs_midday],"selectnumbers,0,100,4700,0,lin")."W" | widget([WR_1:Solar_middayhigh_fc0_stop],"time").([$SELF:SpeicherMidday_MaxChargePowerAbs_midday] == 0)?"dynamisch":""

|"MinSOC Steuerung<dd>fc1_Limit / Winter | Sommer /aktuell</dd>"|
 FUNC_Status([WR_1:Solar_Calculation_fc1_day],[$SELF:SpeicherMinSOC_fc1_Limit],"red","<",0,0,([$SELF:SpeicherMinSOC_fc1_Limit]-1),"#00FF00",">=").widget([$SELF:SpeicherMinSOC_fc1_Limit],"selectnumbers,2000,1000,40000,0,lin")."wh" |
 widget([$SELF:SpeicherMinSOC_Winter],"selectnumbers,10,1,30,0,lin").widget([$SELF:SpeicherMinSOC_Sommer],"selectnumbers,5,1,20,0,lin")."%" |""|[WR_1_API:Battery_InternControl_MinSoc]." %"

[ch.eick]

Ich musste dann noch in Modul WR_1_Speicher_1_ExternControl ein paar Änderungen im uiTable vornehmen, und zwar in der sub FUNC_batt und bei den bunten SOC-Anzeigen. Das sieht bei mir jetzt so aus wie unten. Dadurch wird der Hintergrund wie im CSS vorgegeben erhalten und nicht mehr überschrieben.

@ch.eick: vielleicht willst Du die Änderungen auch in Deinen Code übernehmen? Dann kann man den f18 style gut verwenden und hat ein paar mehr Möglichkeiten das Aussehen anzupassen...

Hallo,
das mache ich gerne, denn deshalb habe ich den Thread hier mal vor Jahren angefangen

Ist es denn nur die sub FUNC_batt(), oder war da noch mehr? Ich hatte da ja auch noch im uiTable etwas von Dir übernommen.

Edit: Mit Deiner Änderung ist jetzt jedoch die Überlagerung mit dem Hintergrund weg und die Batterie wird nur als Farbverlauf bis zum Ende angezeigt, obwohl sie noch nicht voll ist.
   Das könnte an der berechneten Startposition liegen, die Du wohl auf 0px gesetzt hast.

VG   Christian

[trupf]

Ist es denn nur die sub FUNC_batt(), oder war da noch mehr? Ich hatte da ja auch noch im uiTable etwas von Dir übernommen.

Edit: Mit Deiner Änderung ist jetzt jedoch die Überlagerung mit dem Hintergrund weg und die Batterie wird nur als Farbverlauf bis zum Ende angezeigt, obwohl sie noch nicht voll ist.
  Das könnte an der berechneten Startposition liegen, die Du wohl auf 0px gesetzt hast.

Du musst noch etwas am Code ändern, deswegen habe ich ja den kompletten uiTable gepostet. Bei jeder einzelnen Box muss "background:linear-gradient( to right, red 0 px,yellow 30px,green 50px);" durch "background:transparent" ersetzt werden, dadurch wird nur der leere Rahmen gezeichnet. Stattdessen wird durch die sub FUNK_batt() dann der Teil des Balkens gezeichnet, der dem Ladestand entspricht - und nichts mehr überdeckt. Natürlich muss die Startposition auch auf 0px sitzen, damit das funktioniert.

Code Auswählen Erweitern

<div style='border-width:2px;border-style:solid;border-color:gray;position:relative;width:90px;height:20px;padding:0px 0px;display:inline-block;background:transparent;'>".STY(" ",FUNC_batt([$SELF:SpeicherMaxSOC_Actual])).STY("geplant","font-size:12px;position:absolute;top:3px;left:25px")."</div><br>".widget([$SELF:SpeicherMaxSOC_Actual],"selectnumbers,5,1,100,0,lin")."%"

[trupf]

Ach so, und es gibt noch weitere Änderungen, aber die haben einen anderen Hintergrund:

- Änderung der Spaltenbreiten der Tabelle, damit die Vormonats- und Vorjahreswerte mit in eine Zeile passen
- das "display:inline-block;" vor dem "background:transparent" für mittige Ausrichtung
- das <br>-Tag für den Zeilenumbruch innerhalb der Zelle