FTUI Neue Version chart_widget

[eki]

Außerdem wäre eine ganz genaue Beschreibung deiner Umgebung hilfreich:
- welche Geräte
- welches Betriebssystem
- welche App (Version)
- welcher Browser
...

Weiß jemand ob es für den Fully so etwas wie eine Konsole/Debugumgebung gibt?

[wcraffonara]

@Knallkopp_02: danke für den Tipp, hat aber bei mir nichts genutzt... ich hab das auch schon vorher ausprobiert, aber leider ohne Erfolg.

@eki: jetzt hab ich mal Fully auf 2 anderen Geräten installiert und dort funktioniert es. Ich glaube, dass es mit der veralteten Webview Version meines FHEM-Tablet zusammenhängt und zwar verwende ich ein Cube U9GT5 mit Android 4.4.2. Ich habe die App "Webview Info" installiert und mir die System Infos anzeigen lassen (siehe Anhang).
Leider gibt es kein neues Update für mein FHEM-Tablet und kann dementsprechend auch nicht Webview updaten :/
Jetzt ist natürlich die Frage welche Funktionen der neuen Engine bei dir im Einsatz sind

lG
Walter

[eki]

Noch ein Rateversuch (siehe Anhang).

[wcraffonara]

Eki, du bist ein Wahnsinn! das war's! Jetzt schaut alles prima aus (siehe Anhang)

[eki]

Na ja, ich weiß dann jetzt, woran es liegt, und Du hast eine temporäre Lösung. Die Lösung kann ich aber so ncht einfach in die allgemeine Version mit rein nehmen, weil ich damit etwas abgeschaltet habe, das auf anderen Plattformen schon noch möglich sein sollte. Aber einen Schritt weiter sind wir jetzt erst mal.

[Knallkopp_02]

ich wollte noch mal nachfragen was das hier angeht.

https://forum.fhem.de/index.php/topic,48450.msg1071206.html#msg1071206

Mit freundlichen Grüßen

[eki]

Ups, ist eigentlich schon lange fertig (data-filltime_start und data-filltime_end setzen das entsprechende Verhalten). Habe es mal zum Testen angehängt. Allerdings sind in dieser Version auch noch einige andere Dinge verändert und ich bin noch nicht zum vollständigen Testen gekommen. Probiers aber gern mal aus.

[Knallkopp_02]

Werde ich nachher mal runterladen, was sind denn noch für Änderungen gemacht? Kann man beim Testen helfen?

[eki]

Das Hauptfeature ist, Daten aus FHEM zu nutzen, um Symbole entsprechend diesen Daten zu drehen oder deren Größe einzustellen (Grund war die Darstellung von Richtungspfeilen für die Windrichtung in Wettercharts (unten ist ein Beispiel). Um das zu bewerkstelligen, muss man folgendes als data-style eingeben:

Code Auswählen Erweitern

["graphbase:1","style:ftui l1symbig","rotation:0"]

Die 1 hinter graphbase bedeutet, dass der Graph auf Basis des zweiten definierten Graphen, was die Y-Höhe betrifft dargestellt werden soll, danach kommt hinter "style:" ganz normal der zu verwendende Stil und als dritter Parameter ob rotiert oder die Größe verändert werden soll und dort als Wert, aus welchem Graphen der Rotationswert gelesen werden soll.

Die komplette Definition für das unten angehängte Bild sieht dann so aus (Basis ist ein PROPLANTA device mit entsprechenden Logs).

Code Auswählen Erweitern


<div class="normal nobuttons fitsize"
data-type="chart"
data-logdevice='["lp"]'
data-logfile="CURRENT"
data-device="AgroWeather"
data-columnspec='[
"Func:logProxy_proplanta2Plot(\\x22AgroWeather\\x22,\\x22windDir12\\x22,$from,$to,12)",
"Func:logProxy_proplanta2Plot(\\x22AgroWeather\\x22,\\x22tempMin\\x22,$from,$to,12)",
"Func:logProxy_proplanta2Plot(\\x22AgroWeather\\x22,\\x22weatherIcon\\x22,$from,$to,12)",
["Func:logProxy_proplanta2Plot(\\x22AgroWeather\\x22,\\x22tempMax\\x22,$from,$to,12)","Func:logProxy_proplanta2Plot(\\x22AgroWeather\\x22,\\x22tempMin\\x22,$from,$to,12)"],
"Func:logProxy_proplanta2Plot(\\x22AgroWeather\\x22,\\x22rain\\x22,$from,$to,0,\\x22day\\x22)"
]'
data-style='[
["graphbase:1","style:ftui l1symbig","rotation:0"],
"ftui l2",
"ftui l99icon",
["fill",["-20","#0000ff","0.7"],["0","#0000ff","0.5"],["0","#ff0000","0.5"],["30","#ff0000","0.7"]],
"ftui l1fill"
]'
data-ptype='[
"fa-long-arrow-alt-up",
"points",
"icons:3",
"cubic",
"steps"
]'
data-uaxis='[
"primary",
"primary",
"primary",
"primary",
"secondary"
]'
data-legend='[
"Windrichtung",
"",
"Wetterbedingung",
"Temperature Range",
"Rain"
]'
data-legendpos='["-1","below"]'
data-legend_horiz="true"
data-yunit=""
data-yticks_format="#.#"
data-yticks_format_sec="#.#"
data-ytext="Temperature (°C)"
data-minvalue="auto"
data-maxvalue="auto"
data-yunit_sec=""
data-yticks_prio="secondary"
data-ytext_sec="Rain (l/m<sup>2</sup>)"
data-yticks="auto"
data-y_margin="20"
data-showlegend="true"
data-dosort="false"
data-minvalue_sec="auto"
data-maxvalue_sec="auto"
data-nofulldays="false"
data-daysago_start="0d"
data-daysago_end="-12d"
data-crosshair="true"
data-cursorgroup="1"
data-scrollgroup="1"
data-cursorshown='[false,true,false,true,true]'
data-graphsshown='[true,true,true,true,true]'
data-timeformat="ee\LF\dd.MM"
data-xticks="1440">
</div>


Außerdem kann man durch einen Klick auf einen Wert auf der x-Achse den Plot aufzoomen, durch einen Klick auf den ersten oder letzten Wert an der x-Achse kann das wieder rückgängig gemacht werden.
Dazu gibt es noch einen neuen Stilparameter im css File (auch angehängt), wenn man bei data-style noch "graph_shadow" anhängt, werden die Linien mit einem Schatten versehen, sieht optisch, finde ich, ganz gut aus, vor allem wenn man viele Graphen hat und einzelne hervorheben will (hierzu habe ich auch ein Beispiel angehängt).

[wcraffonara]

Hallo,
  wenn ich data-maxvalue="5" setze, dann werden ja alle Werte die größer als 5 sind nicht dargestellt, da sie ja außerhalb der Skala liegen.

Gibt es die Möglichkeit die y-Skala anhand des höchsten darzustellenden Wert automatisch zu erweitern (wie bei data-maxvalue="5") und dabei die Skala auf mindestens 5 zu haben (sozusagen ein data-minmaxvalue)?

Siehe Chart im Anhang.

Hier die Definition:

Code Auswählen Erweitern


<div
data-type="chart" 
data-device="DUMMY_Timer_5_min"
data-logdevice='["MYLOGPROXY","MYLOGPROXY","MYLOGPROXY","MYLOGPROXY","MYLOGPROXY","MYLOGPROXY"]'
data-logfile='["HISTORY","HISTORY","HISTORY","HISTORY","HISTORY","HISTORY"]'
data-columnspec='[
"DbLog:LOGDB,postFn=\\x22plotNegPowerConsumption\\x22:AS1440:verbrauch::",
"DbLog:LOGDB,postFn=\\x22plotEigenverbrauch\\x22:AS1440:einspeisung::",
"DbLog:LOGDB:PVLogger_PAC:power_production",
"DbLog:LOGDB,postFn=\\x22plotPowerConsumption\\x22:AS1440:verbrauch::"
]' 
data-style='["ftui l3fillfull","ftui l0fillfull","ftui l3fillfull","ftui l2fillfull"]'
data-ptype='["cubic:2","cubic:2","cubic","cubic:2"]'
data-uaxis='["primary","primary","primary","primary"]'
data-legend='["","PV-Ertrag","Eigenverbrauch","EVN-Bezug"]'
data-maxvalue="5"
data-minvalue="0"
data-cursorgroup="2"
data-scrollgroup="2"
data-crosshair = "false"
data-showlegend = "false"
data-legendpos='["23","0"]'
data-legend_horiz="false"
data-y_margin="0"
data-y_margin_sec="0"
data-yunit="kW&nbsp"
data-yticks_format="#"
data-xticks="auto"
data-xticks_angle="0"
data-prefetch="false"
data-height="220"
data-width="592"
data-nofulldays="true"
data-daysago_start="-6H"
data-daysago_end="-20H"
data-show_both_axes="true"
data-filltime="true"
class="top-space-05x nobuttons"
style="position: relative; top: -25px; left: 0px;"></div>


Dankeschön!

lG
Walter

[eki]

Direkt geht das bisher nicht. Was allerdings geht, ist ein Reading aus FHEM als data-maxvalue zu verwenden (data-maxvalue="<device>:<reading>", entscheidend ist der Doppelpunkt). Dann könntest Du in FHEM dafür sorgen, dass das Reading mindestens 5 und wenn nötig größer ist (z.B. indem Du die statistics Funktion von FHEM verwendest).
Ich könnte das natürlich auch in's Chart einbauen, wird aber ein bisschen dauern, weil ich aktuell noch ein paar andere Baustellen habe.

[dirk.k]

Hi,
ich würde das auch gut finden.
Das statische scalieren ist lästig. Und wenn die temperatur zwischen 1 und -1 pendelt, sollte das halt keinen Vollausschlag in beide Richtungen geben.

[killah78]

Eki, du bist ein Wahnsinn! das war's! Jetzt schaut alles prima aus (siehe Anhang)

Hallo wcraffonara,
deine Energiebilanz gefällt mir sehr gut. Wie hast du die Funktionen(plotNegPowerConsumption, etc) definiert, dass du die Werte so bekommst? Würdest du mir die Definition zeigen wollen? Auch bezüglich der "Levelanzeige" darunter.
Viele Grüße

[wcraffonara]

Servus killah78,
  hier ein Auszug aus meiner 99_myUtils.pm:

Code Auswählen Erweitern


sub startPlotAtZero($$) {
  my ($devspec, $data) = @_;
  my $min = LONG_MAX;
 
  foreach my $point (@{$data}) {
    if ($min > $point->[1]) {
  $min = $point->[1];
}
  }
 
  foreach my $point (@{$data}) {
    $point->[1] -= $min;
  }

  return $data;
}

sub plotPowerConsumption($$) {
  my ($devspec, $data) = @_;
  my $n = @{$data} - 1;
 
  my $sub_temp = ${$data}[0]->[1];
  my $sub = ${$data}[0]->[1];
 
  # calculate difference
  my $first;
 
  ${$data}[0]->[1] = 0;
 
  foreach my $point (@{$data}) {
    next unless $first++;

  $sub_temp = $point->[1];

$point->[1] = ($point->[1] - $sub) ;

$sub = $sub_temp;
  } 
 
  # calculate interpolation
  my $pre_item = ${$data}[0]->[1];
  my $temp = 0;

  # first element
 
  ${$data}[0]->[1] = 0;
  my $i;
  for ($i=1; $i<$n-1; $i++) {
    $temp = ${$data}[$i]->[1];
    ${$data}[$i]->[1] = (($pre_item + ${$data}[$i]->[1] + ${$data}[$i + 1]->[1]) / 3) * 12;
$pre_item = $temp;
  } 
 
  # last element
  ${$data}[$i]->[1] = ${$data}[$i-1]->[1];
 
  return $data;
}

sub plotNegPowerConsumption($$) {
  my ($devspec, $data) = @_;
  my $n = @{$data} - 1;
 
  my $sub_temp = ${$data}[0]->[1];
  my $sub = ${$data}[0]->[1];
 
  # calculate difference
  my $first;
 
  ${$data}[0]->[1] = 0;
 
  foreach my $point (@{$data}) {
    next unless $first++;

  $sub_temp = $point->[1];

$point->[1] = ($point->[1] - $sub) ;

$sub = $sub_temp;
  } 
 
  # calculate interpolation
  my $pre_item = ${$data}[0]->[1];
  my $temp = 0;

  # first element
 
  ${$data}[0]->[1] = 0;
  my $i;
  for ($i=1; $i<$n-1; $i++) {
    $temp = ${$data}[$i]->[1];
    ${$data}[$i]->[1] = - 10 * (($pre_item + ${$data}[$i]->[1] + ${$data}[$i + 1]->[1]) / 3) * 12;
$pre_item = $temp;
  } 
 
  # last element
  ${$data}[$i]->[1] = ${$data}[$i-1]->[1];
 
  return $data;
}



sub plotEigenverbrauch {
  my ($devspec, $data) = @_;
  my $n = @{$data} - 1;
 
  my $sub_temp = ${$data}[0]->[1];
  my $sub = ${$data}[0]->[1];
 
  # calculate difference
  my $first;
 
  ${$data}[0]->[1] = 0;
 
  foreach my $point (@{$data}) {
    next unless $first++;

  $sub_temp = $point->[1];

$point->[1] = ($point->[1] - $sub) ;

$sub = $sub_temp;
  } 
 
  # calculate interpolation
  my $pre_item = ${$data}[0]->[1];
  my $temp = 0;

  # first element
 
  ${$data}[0]->[1] = 0;
  my $i;
  for ($i=1; $i<$n-1; $i++) {
    $temp = ${$data}[$i]->[1];
    ${$data}[$i]->[1] = -1 * (($pre_item +${$data}[$i]->[1] + ${$data}[$i + 1]->[1]) / 3) * 12;
$pre_item = $temp;
  } 
 
  # last element
  ${$data}[$i]->[1] = ${$data}[$i-1]->[1];
 
  return $data;
}


Und hier die Definition in FTUI:

Code Auswählen Erweitern


<header class="large">ENERGIEBILANZ</header>
<div
data-type="chart" 
data-device="DUMMY_Timer_5_min"
data-logdevice='["MYLOGPROXY","MYLOGPROXY","MYLOGPROXY","MYLOGPROXY","MYLOGPROXY","MYLOGPROXY","MYLOGPROXY","MYLOGPROXY"]'
data-logfile='["HISTORY","HISTORY","HISTORY","HISTORY","HISTORY","HISTORY","HISTORY","HISTORY"]'
data-title="Erzeugung: <i>$data{currval4}kWh</i>          Ersparnis: <i>$eval(parseInt((($data{currval3}-$data{min3})*0.0637+($data{currval4}-$data{currval3})*0.1568)*100)/100)€</i>          Kosten: <i>$eval(parseInt((($data{currval2}-$data{min2})*0.1568-($data{currval3}-$data{min3})*0.0637)*100)/100)€</i>"
data-columnspec='[
    "DbLog:LOGDB:AS1440:helpline",
"DbLog:LOGDB,postFn=\\x22startPlotAtZero\\x22:AS1440:verbrauch::",
"DbLog:LOGDB,postFn=\\x22startPlotAtZero\\x22:AS1440:einspeisung::",
"DbLog:LOGDB:PVLogger:energy_production",
"DbLog:LOGDB,postFn=\\x22plotNegPowerConsumption\\x22:AS1440:verbrauch::",
"DbLog:LOGDB,postFn=\\x22plotEigenverbrauch\\x22:AS1440:einspeisung::",
"DbLog:LOGDB:PVLogger_PAC:power_production",
"DbLog:LOGDB,postFn=\\x22plotPowerConsumption\\x22:AS1440:verbrauch::"
]' 

data-style='["ftui l1dot","ftui l0hide","ftui l0hide","ftui l0hide","ftui l3fillfull","ftui l0fillfull","ftui l3fillfull","ftui l2fillfull"]'
data-ptype='["lines","lines","lines","lines","cubic:6","cubic:6","cubic","cubic:6"]'
data-uaxis='["primary","secondary","secondary","secondary","primary","primary","primary","primary"]'
data-legend='["","","","","","PV-Erzeugung","Eigenverbrauch","EVN-Bezug"]'
data-maxvalue="30"
data-minvalue="0"
data-cursorgroup="1"
data-scrollgroup="1"
data-crosshair = "false"
data-showlegend = "false"
data-legend_horiz="false"
data-y_margin="2"
data-y_margin_sec="0"
data-yunit="kW&nbsp"
data-xticks="auto"
data-xticks_angle="0"
data-yticks="30"
data-prefetch="false"
data-height="294"
data-nofulldays="false"
data-show_both_axes="false"
class="top-space-05x nobuttons noticks"
style="position: relative; top: 0px; left: 20px; }"
></div>
<!-- data-style='["ftui l2dot","ftui l4dot","ftui l0hide","ftui l3fillfull","ftui l0fillfull","ftui l3fillfull","ftui l2fillfull"]'  -->
<div
data-type="chart" 
data-device="DUMMY_Timer_5_min"
data-logdevice='["MYLOGPROXY","MYLOGPROXY","MYLOGPROXY","MYLOGPROXY","MYLOGPROXY","MYLOGPROXY"]'
data-logfile='["HISTORY","HISTORY","HISTORY","HISTORY","HISTORY","HISTORY"]'
data-columnspec='[
"DbLog:LOGDB,postFn=\\x22plotNegPowerConsumption\\x22:AS1440:verbrauch::",
"DbLog:LOGDB,postFn=\\x22plotEigenverbrauch\\x22:AS1440:einspeisung::",
"DbLog:LOGDB:PVLogger_PAC:power_production",
"DbLog:LOGDB,postFn=\\x22plotPowerConsumption\\x22:AS1440:verbrauch::"
]' 
data-style='["ftui l3fillfull","ftui l0fillfull","ftui l3fillfull","ftui l2fillfull"]'
data-ptype='["cubic:2","cubic:2","cubic","cubic:2"]'
data-uaxis='["primary","primary","primary","primary"]'
data-legend='["","PV-Ertrag","Eigenverbrauch","EVN-Bezug"]'
data-maxvalue="5"
data-minvalue="0" 
data-cursorgroup="2"
data-scrollgroup="2"
data-crosshair = "false"
data-showlegend = "false"
data-legendpos='["23","0"]'
data-legend_horiz="false"
data-y_margin="0"
data-y_margin_sec="0"
data-yunit="kW&nbsp"

data-xticks="auto"
data-xticks_angle="0"
data-prefetch="false"
data-height="220"
data-width="100%"
data-nofulldays="true"
data-daysago_start="-6H"
data-daysago_end="-20H"
data-show_both_axes="false"
data-filltime="true"
class="top-space-05x nobuttons"
style="position: relative; top: -285px; left: 0px;"></div>

<div style="position: relative; top: -220px; left: 0px;">
<div class="col-1-3">
<div class="large bold" style="color: #FF4D4D">EVN-Bezug</div>
</div>
<div class="col-1-3">
<div class="large bold" style="color: #CCCC00">Eigenverbrauch</div>
</div>
<div class="col-1-3">
<div class="large bold" style="color: #DDA400">PV-Ertrag</div>
</div>
<!-- <div class="col-1-5"> -->
<!-- <div class="large bold" style="color: #CC0000">Verbrauch</div> -->
<!-- </div> -->
<!-- <div class="col-1-5"> -->
<!-- <div class="large bold" style="color: #33CC33">Einspeisung</div> -->
<!-- </div> -->
</div>
<div>
<table width="100%" style="font-size:100%; color: #666666; position: relative; top: -200px; left: 0px;" class="top-space-05x">
<tr>
<td width="25%" valign="top">
<div class='large bold right-align'>PV-Ertrag</div>
</td>
<td width="45%">
<div data-type="level"
class="horizontal"
data-device="PVLogger_PAC_RealTime"
data-get="power_production_real"
data-min=0
data-max=4.5
data-height="10"
data-step="0.1"
data-limits='[0]'
data-colors='["#DDA400"]'></div>
</td>
<td width="5%" valign="top">
<div data-type="label" data-device='PVLogger_PAC_RealTime' data-get='power_production_real' data-unit="kW" class="left-align large bold"></div>
</td>
<td width="25%">
<div data-type="label" data-device='DBREP_AktuelleEinspeisung' data-get='SqlResultRow_2' data-unit="kWh" data-pre-text="&nbsp;&nbsp;" data-limits='[0,0.6,1.8,3]' data-colors='["grey","#CCCC00","#DDA400","#33CC33"]' class="center-align bigger bold"></div>
</td>
</tr>
<tr>
<td width="25%">
<div class='large bold right-align'>Eigenverbrauch</div>
</td>
<td width="45%" valign="bottom">
<div data-type="level"
class="horizontal"
data-device="PVLogger_AktuellerEigenverbrauch_RealTime"
data-get="aktueller_eigenverbrauch_real"
data-min=0
data-max=4.5
data-height="10"
data-step="0.1"
data-limits='[0]'
data-colors='["#CCCC00"]'></div>
</td>
<td width="5%">
<div data-type="label" data-device='PVLogger_AktuellerEigenverbrauch_RealTime' data-get='aktueller_eigenverbrauch_real' data-unit="kW" class="left-align large bold"></div>
</td>
<td width="25%" class="center-align bold">
Überschuss
</td>
</tr>
</table>
</div>
</li>



lG
Walter

[curt]

Hallo @eki und alle,

wenn ich mir völlig unbekannte "ftui l3fillfull" sehe, denke ich, dass sich offenbar viel getan hat. Kann ich denn irgendwo (Wiki-Artikel wäre sensationell) geballt nachlesen, was alles in der Zwischenzeit neu ist?

Und eine Frage, die mir gerade auf den Nägeln brennt: Ich brauche mehr Farben. SVG-Farben gehen wohl, werden aber nirgendwo erklärt. Oder ich kann im zuständigen css-File rumpfuschen, da ist dann aber die Frage, ob das nächste Update mir das wieder weghaut.

P.S: Wird das Widget während des FHEM-Updates aktualisiert oder muss ich das händisch machen?