FTUI Neue Version chart_widget

Begonnen von eki, 31 Januar 2016, 00:17:26

Vorheriges Thema - Nächstes Thema

somansch

Gelöst! Im Error stand ja etwas von negativer Höhe... Dann kam es mir wieder in den Sinn, dass fast alle Widgets in Kombination mit Sections und deren dynamischer Höhe ein Problem haben.

Lösung: Feste Höhe in Pixel angeben, z.B.: data-height="310px"

somansch

Jetzt komme ich doch nicht weiter. Hier mein Code: <div data-type="chart"
data-device="Wetter_Pro"
data-logdevice='[
"myLogProxy",
"myLogProxy",
"myLogProxy"
]'
data-columnspec='[
"Func:logProxy_proplanta2Plot(\\x22Wetter_Pro\\x22,\\x22tempMax\\x22,$from,$to,12,\\x22day\\x22)",
"Func:logProxy_proplanta2Plot(\\x22Wetter_Pro\\x22,\\x22weatherIcon\\x22,$from,$to,12,\\x22day\\x22)",
"Func:logProxy_proplanta2Plot(\\x22Wetter_Pro\\x22,\\x22rain_\\x22,$from,$to,12,\\x22day\\x22)"
]'
data-style='[
"ftui l1fill",
"ftui l99icon",
"ftui l5fill"
]'
data-ptype='[
"quadraticSmooth",
"icons:1",
"steps"
]'
data-uaxis='[
"primary",
"primary",
"secondary"
]'
data-legend='[
"Max. Temperatur",
"Wetterbedingung",
"Regen"
]'
data-yunit="°C"
data-ytext="Temperatur"
data-yunit_sec="mm"
data-ytext_sec="Regen"
data-timeformat="ee\LF\dd.MM"
data-minvalue="auto"
data-maxvalue="auto"
data-minvalue_sec="auto"
data-maxvalue_sec="auto"
data-daysago_start = "-1w"
data-daysago_end = "-10d"
data-y_margin="20"
data-xticks="1440"
data-yticks="auto"
data-showlegend="true"
data-width="100%"
data-height="310px"
class="nobuttons fullsize">
</div>


Habe die zusätzlichen Einträge in meiner user.css ebenfalls gemacht. Zwei Probleme:
1. Wie bekomme ich die Wettericons auf den Temperaturgraph?
2. Wie kann man den letzten Temperaturwert "0" rausnehmen, sodass der Graph dort nicht "abstürzt"?

eki

#377
Damit die Icons auf die Werte eines anderen Graphen gesetzt werden, musst Du hinter dem ':' bei data-ptype den Index des Graphen setzen, von dem die Y-Werte kommen sollen. Der Index zählt von 0 an. In Deinem Fall beziehst Du die Icons auf sie selbst. Außerdem sollten die Icons immer die ersten in der Liste sein (dann werden sie als letztes gezeichnet und es ist sicher gestellt, dass die anderen Daten schon abgeholt sind).
Bezüglich des "Absturzes" am Ende würde ich Dir raten statt "quadraticSmooth" "cubic" zu verwenden. Beim Algorithmus für quadraticSmooth is nicht gewährleistet, dass die Linie immer durch die Messpunkte geht, was bei cubic der Fall ist.
Mit dem folgenden Setting sollte es eigentlich gehen:


<div data-type="chart"
data-device="Wetter_Pro"
data-logdevice='[
"myLogProxy",
"myLogProxy",
"myLogProxy"
]'
data-columnspec='[
"Func:logProxy_proplanta2Plot(\\x22Wetter_Pro\\x22,\\x22weatherIcon\\x22,$from,$to,12,\\x22day\\x22)",
"Func:logProxy_proplanta2Plot(\\x22Wetter_Pro\\x22,\\x22tempMax\\x22,$from,$to,12,\\x22day\\x22)",
"Func:logProxy_proplanta2Plot(\\x22Wetter_Pro\\x22,\\x22rain_\\x22,$from,$to,12,\\x22day\\x22)"
]'
data-style='[
"ftui l99icon",
"ftui l1fill",
"ftui l5fill"
]'
data-ptype='[
"icons:1",
"cubic",
"steps"
]'
data-uaxis='[
"primary",
"primary",
"secondary"
]'
data-legend='[
"Wetterbedingung",
"Max. Temperatur",
"Regen"
]'
data-yunit="°C"
data-ytext="Temperatur"
data-yunit_sec="mm"
data-ytext_sec="Regen"
data-timeformat="ee\LF\dd.MM"
data-minvalue="auto"
data-maxvalue="auto"
data-minvalue_sec="auto"
data-maxvalue_sec="auto"
data-daysago_start = "-1w"
data-daysago_end = "-10d"
data-y_margin="20"
data-xticks="1440"
data-yticks="auto"
data-showlegend="true"
data-width="100%"
data-height="310px"
class="nobuttons fullsize">
</div>

somansch

Zitat von: eki am 20 September 2018, 09:15:52
Damit die Icons auf die Werte eines anderen Graphen gesetzt werden, musst Du hinter dem ':' bei data-ptype den Index des Graphen setzen, von dem die Y-Werte kommen sollen. Der Index zählt von 0 an. In Deinem Fall beziehst Du die Icons auf sie selbst. Außerdem sollten die Icons immer die ersten in der Liste sein (dann werden sie als letztes gezeichnet und es ist sicher gestellt, dass die anderen Daten schon abgeholt sind).
Bezüglich des "Absturzes" am Ende würde ich Dir raten statt "quadraticSmooth" "cubic" zu verwenden. Beim Algorithmus für quadraticSmooth is nicht gewährleistet, dass die Linie immer durch die Messpunkte geht, was bei cubic der Fall ist.
Mit dem folgenden Setting sollte es eigentlich gehen:


<div data-type="chart"
data-device="Wetter_Pro"
data-logdevice='[
"myLogProxy",
"myLogProxy",
"myLogProxy"
]'
data-columnspec='[
"Func:logProxy_proplanta2Plot(\\x22Wetter_Pro\\x22,\\x22weatherIcon\\x22,$from,$to,12,\\x22day\\x22)",
"Func:logProxy_proplanta2Plot(\\x22Wetter_Pro\\x22,\\x22tempMax\\x22,$from,$to,12,\\x22day\\x22)",
"Func:logProxy_proplanta2Plot(\\x22Wetter_Pro\\x22,\\x22rain_\\x22,$from,$to,12,\\x22day\\x22)"
]'
data-style='[
"ftui l99icon",
"ftui l1fill",
"ftui l5fill"
]'
data-ptype='[
"icons:1",
"cubic",
"steps"
]'
data-uaxis='[
"primary",
"primary",
"secondary"
]'
data-legend='[
"Wetterbedingung",
"Max. Temperatur",
"Regen"
]'
data-yunit="°C"
data-ytext="Temperatur"
data-yunit_sec="mm"
data-ytext_sec="Regen"
data-timeformat="ee\LF\dd.MM"
data-minvalue="auto"
data-maxvalue="auto"
data-minvalue_sec="auto"
data-maxvalue_sec="auto"
data-daysago_start = "-1w"
data-daysago_end = "-10d"
data-y_margin="20"
data-xticks="1440"
data-yticks="auto"
data-showlegend="true"
data-width="100%"
data-height="310px"
class="nobuttons fullsize">
</div>


Vielen Dank, jetzt habe ich die Logik verstanden und es funktioniert bestens!

somansch

Hallo eki,

ich habe noch zwei weitere Wetterdienste im Einsatz. Hättest du Lust, die ProxyLog-Funktionen für "Wunderground" und "DWD" umzusetzen? Ich könnte meine Readings bereitstellen...

Viele Grüße
Andreas

cotecmania

Hallo,

seit meinem FHEM Update gestern meldet das widget_chart Fehler. (siehe Bilder)

Wenn ich folgenden Graph raus nehme sind die Fehler weg :

<!-- ********************************************************************* -->
<!-- ****************************** TOM ********************************** -->
<!-- ********************************************************************* -->
<li data-row="6" data-col="3" data-sizex="2" data-sizey="1">
  <header>TOM</header>
  <div class="normal left-narrow-10 right-narrow nobuttons"
       data-type="chart"
       data-device="PCA301_0361E4"
       data-logdevice="FileLog_PCA301_0361E4"
       data-logfile="-"
       data-columnspec="4:power"
       data-style="SVGplot l1"
       data-ptype="lines"
       data-uaxis="primary"
       data-yunit="W"
       data-height="75"
       data-width="260"
       data-yunit_sec="W"
       data-minvalue="0"
       data-maxvalue="40"
       data-yticks_sec="10"
       data-nofulldays="true"
       data-cursorgroup="1"
       data-scrollgroup="1"
       data-xticks="720"
       data-showlegend="false">
  </div>
</li>


Seither gings ohne Fehler. Was passt hier auf einmal nicht ?

Gruss
Joe
FHEM auf RaspberryPI B (buster)
2xCUL868 für MAX/Slow_RF, HM-LAN, JeeLink
MAX!/HM-Thermostate, FS20/HM-Rolladenschalter, FS20-EM, LevelJet-Ölstandsmessung, PCA301, IT, KM271, IPCAM, FireTAB10 FTUI

eki

Kannst Du bitte mit folgender Änderung testen:

data-style='["SVGplot l1"]'

statt

data-style="SVGplot l1"

cotecmania

Japp, jetzt gehts wieder ohne Fehler.

Aber laut WIKI steht bei data-style : Für eine einfache graue Linie ist also die Angabe data-style="ftui l1" korrekt, wohingegen ...
https://wiki.fhem.de/wiki/FTUI_Widget_Chart#Aussehen_der_Linien

Gruss
Joe
FHEM auf RaspberryPI B (buster)
2xCUL868 für MAX/Slow_RF, HM-LAN, JeeLink
MAX!/HM-Thermostate, FS20/HM-Rolladenschalter, FS20-EM, LevelJet-Ölstandsmessung, PCA301, IT, KM271, IPCAM, FireTAB10 FTUI

curt

@eki
Gibt es ein Script, welches eine SVG_[...].gplot-Datei in die für das Chart-Widget erforderliche DIV-Sektion umwandelt? Für Chart fehlende Strukturelemente könnten ja durch so ein Script mit Standardwerten belegt werden.

Falls es so ein Script nicht gibt: Wäre es aufwendig, das zu programmieren? Oder ist das eine Fingerübung für Dich?

Hintergrund:
1) Ich bin nachher der 300., der die Frage stellt, wie man zu einem gerade eben erstellten Chat mit Temperatur und Luftfeuchtigkeit auch noch den Zustand des Fensters hinzufügt - wie die 299 vor mir scheitere ich daran.

2) Ich habe ein Dutzend Öffnungsmelder und ein Dutzend Temperatursensoren. Selbst wenn ich das von Hand könnte, wäre die Freizeit der nächsten vier Wochen gestrichen - alles anpassen, testen, ärgern, typo suchen ...

Eine bei mir funktionierende typische SVG-Plot-Datei sieht so aus (hier: aus einem dritten LogDevive wird zudem die CPU-Temperatur eines dort stehenden Servers gezogen und angezeigt):

HINT: Nicht sichtbar ist, dass ich bei vielen Logs fehlende Werte durch den letzten bekannten Wert vermittels addLog in das LOg schreiben lasse. - Egal wie - unten stehendes funktioniert wunderfein.

# Created by FHEM/98_SVG.pm, 2018-04-16 23:48:48
set terminal png transparent size <SIZE> crop
set output '<OUT>.png'
set xdata time
set timefmt "%Y-%m-%d_%H:%M:%S"
set xlabel " "
set title 'Arbeitszimmer Temperatur und Luftfeuchtigkeit'
set ytics
set y2tics
set grid y2tics
set ylabel "Luftfeuchtigkeit"
set y2label "Temperatur"
set yrange [0:100]
set y2range [15:60]

#FileLog_Temperatur_Arbeitszimmer 4:Temperatur_Arbeitszimmer.temperature\x3a::
#FileLog_sysmon 4:sysmon.cpu_temp\x3a::
#FileLog_Temperatur_Arbeitszimmer 4:Temperatur_Arbeitszimmer.humidity\x3a::
#FileLog_Arbeits_rechts 3:Arbeits_rechts\s(open|closed)::$fld[2]=~"open"?18:15

plot "<IN>" using 1:2 axes x1y2 title 'Temperatur' ls l0 lw 2 with lines,\
     "<IN>" using 1:2 axes x1y2 title 'CPU' ls l4 lw 1 with lines,\
     "<IN>" using 1:2 axes x1y1 title 'Luftfeuchtigkeit' ls l2fill lw 0.2 with lines,\
     "<IN>" using 1:2 axes x1y2 title 'Fenster' ls l1fill lw 1 with steps

RPI 4 - Jeelink HomeMatic Z-Wave

eki

Ich habe auch schon mal darüber nachgedacht, SVG Definitionsfiles direkt im Chart nutzen zu können (da braucht es dann kein Script zur Umwandlung, das Chart könnte direkt mit den SVG Plot Files umgehen, und man hätte als parameter im HTML nur noch den Namen des Files).
Aufgrund der vielen Optionen in den SVG Plot Files wäre das allerdings schon ein gewisser Aufwand, und auch ich habe manchmal das Bedürfnis nach Ruhe und Freizeit  :D. Kurzfristig kannst Du da also nicht mit einer Lösung rechnen.

Für die Zustände des Fensters gibt es ein Beispiel im Chart Wiki, das kann kurzfristig als Ansatz dienen, denke ich.

curt

War ja nur eine Idee.

Leider bekomme ich die Sache nicht hin, ich bin offensichtlich nicht in der Lage, aus "#FileLog_Arbeits_rechts 3:Arbeits_rechts\s(open|closed)::$fld[2]=~"open"?18:15" eine funktionierende data-columnspec zu bauen.

Im Log selbst sieht es so aus:

2018-10-17_08:01:33 Arbeits_rechts open   << addLog
2018-10-17_08:06:33 Arbeits_rechts open   << addLog
2018-10-17_08:08:20 Arbeits_rechts battery: ok
2018-10-17_08:08:20 Arbeits_rechts contact: closed (to VCCU)
2018-10-17_08:08:20 Arbeits_rechts closed
2018-10-17_08:08:20 Arbeits_rechts trigger_cnt: 247
2018-10-17_08:11:33 Arbeits_rechts closed   << addLog


Wie muss data-columnspec in diesem Fall aussehen?
RPI 4 - Jeelink HomeMatic Z-Wave

Lichti

Habe diese widget entdeckt und gleich eingebaut.
Super   :D :D

Ein kleines Problem:
Bei data-timeranges werden im Menü nur 6 Einträge angezeigt, der Rest wird abgeschnitten.
Ist das eine Einstellung ?

curt

Zitat von: eki am 19 Oktober 2018, 08:09:55
Für die Zustände des Fensters gibt es ein Beispiel im Chart Wiki, das kann kurzfristig als Ansatz dienen, denke ich.

Leider nicht. Das Beispiel im Wiki erklärt im Grunde nichts. Im Grunde wäre es ja schön, wenn erklärt würde, wie man die fragliche Zeile data-columnspec aus dem SVG-File übersetzt. Aber das wird nicht erklärt, also experimentiert man sich zu Tode. (Ich verspreche, den Artikel zu verbessern, wenn Du (oder jemand anders) mir erklärt, wie das zu gehen hat.

Seit Tagen krampfe ich an data-columnspec herum,es will nicht gelingen. Ausgangslage ist in meinem Beitrag #385 beschrieben. Ich habe alles Mögliche und Unmögliche probiert - geht nicht.

Derzeit sieht das nicht gehende so aus:

<div data-type="chart"
        data-device="Arbeits_rechts"
        data-logdevice='["FileLog_Arbeits_rechts"]'
        data-logfile='["-"]'
        data-columnspec='["FileLog_Arbeits_rechts:state:0::$fld[2]=~\\x22open\\x22?1:0"]'
        data-style='["ftui l4fill"]'
        data-ptype='["steps"]'
        data-height="290"
        data-yticks='[[0,"geschlossen"],[1,"offen"]]'
        data-minvalue="0"
        data-maxvalue="1.1"
        data-nofulldays="true"
        data-daysago_start="1"
        data-daysago_end="-1"
        data-cursorgroup="1"
        data-scrollgroup="1">
</div>


RPI 4 - Jeelink HomeMatic Z-Wave

OdfFhem

Auszug aus der gplot-Datei

#FileLog_HM_123456 4:HM_123456.contact\x3a:"":($fld[3]=~"open"?1:0)


resultierendes FTUI-Widget-Attribut

data-columnspec='["HM_123456.contact:0::($fld[3]=~\\x22open\\x22?1:0)"]'


Lauffähiges Beispiel

<div data-type="chart" data-device="HM_123456"
                       data-logdevice='["FileLog_HM_123456"]'
                       data-logfile='["-"]'
                       data-columnspec='["HM_123456.contact:0::($fld[3]=~\\x22open\\x22?1:0)"]'
                       data-style='["ftui l4fill"]'
                       data-ptype='["steps"]'
                       data-yticks='[[0,"geschlossen"],[1,"offen"]]'
                       data-minvalue="0"
                       data-maxvalue="1"/>


Da ich nicht den state, sondern das contact-Reading logge, kann kein 1:1-Vergleich gezogen werden. Übertragen auf den Problemfall könnte die Lösung aus ein/zwei kleinen Änderungen am data-columnspec-Attribut bestehen:

  • statt FileLog_<device> ist nur das <device> zur Werteberechnung anzugeben; denn nur das <device> steht ja in der Logdatei.
  • nicht unbedingt notwendig, aber eindeutiger: den eigentlichen Formelteil mit runden Klammern einfassen.

Statt

data-columnspec='["FileLog_Arbeits_rechts:state:0::$fld[2]=~\\x22open\\x22?1:0"]'

vermutlich

data-columnspec='["Arbeits_rechts:state:0::($fld[2]=~\\x22open\\x22?1:0)"]'

curt

Herzlichen Dank für den Anstupser. Es ist

"Arbeits_rechts:0::($fld[2]=~\\x22open\\x22?20:1)"

Dieses 20:1 am Ende sorgt (bei einem Chart mit Temperatur, Luftfeuchtigkeit, Fenstermelder) dafür, dass bei geschlossenem Fenster gerade so noch sichtbar ist, dass da ein dritter Graph ist. Bei geöffnetem Fenster geht dann dieser Graph nicht über die komplette Diagrammhöhe - sondern nimmt nur die unteren ca. 20% ein.

Ich habe für Temperatur/Luftfeuchtigkeit LaCrosse und für Fenstermelder HomeMatic, eine sicher nicht seltene Konstellation. Meine Definition sieht nun so aus.


<div class="top-space"
      data-type="chart"
      data-device='["Temperatur_Arbeitszimmer","Temperatur_Arbeitszimmer","Arbeits_rechts"]'
      data-logdevice='["FileLog_Temperatur_Arbeitszimmer","FileLog_Temperatur_Arbeitszimmer","FileLog_Arbeits_rechts"]'
      data-logfile="-"
      data-columnspec='["4:temperature","4:humidity","Arbeits_rechts:0::($fld[2]=~\\x22open\\x22?20:1)"]'
      data-style='["ftui l2","ftui l6","ftui l1fill"]'
      data-height="330px"
      data-uaxis='["primary","secondary","secondary"]'
      data-legend='["Temperatur","Luftfeuchtigkeit","Fenster"]'
      data-ptype='["lines","lines","steps"]'
      data-yunit="°C"
      data-ytext="Temperatur"
      data-minvalue="-20"
      data-maxvalue="40"
      data-yunit_sec="%"
      data-ytext_sec="Luftfeuchtigkeit"
      data-height="250"
      data-yticks="auto"
      data-minvalue_sec="0"
      data-maxvalue_sec="100"
      data-daysago_start="1"
      data-daysago_end="0"
      data-cursorgroup="1"
      data-scrollgroup="1">


Die Frage ist, ob es sinnvoll ist, das Beispiel in den Wiki-Artikel zu packen; der ist jetzt schon überladen. Meinungen?
RPI 4 - Jeelink HomeMatic Z-Wave