[FHEM-Tablet-UI] User-Demos

[Gerd]

@Gerd/wkarl:
Ich habe nichts geändert - ich schaue zur Sicherheit noch mal nach, nicht, dass ich da was übersehen habe. Muss nur mal eine Sicherung machen. Ich habe aber noch das data-device ergänzt, da ich die Tage ein Update gemacht habe und es ohne gar nicht
läuft.

Sieht dann so aus:

Code Auswählen Erweitern


<div class="normal"
data-type="chart"
data-device="logdb"
data-logdevice='["logdb","logdb","logdb"]'
data-logfile='["HISTORY","HISTORY","HISTORY"]'



So läufts bei mir jetzt. Ich hatte bei meinen ersten versuchen auch nur zwei von drei Sätzen zu Gesicht bekommen, da die Daten
außerhalb der definierten Anzeige lagen.


Cheers,

h3ll

Top!
mir fehlte auch das data-device.

Danke

Gruß Gerd

[eki]

Hier sind die Änderungen mit denen jetzt auch popup funktonieren sollte.

[l3skon3]

@eki

einfach Klasse.

Klappt auf anhieb, und schnell 

Danke & Gruß

Daniel

[setstate]

Hallo, Ich wollte mich bei meinem ersten Post im Forum mit ein paar Bilder beteiligen. Ich habe auf vielen Screens die Plots und Diagramme gesehen und da ich daheim auch ein paar Auswertung darstellen wollte und ich mit den vorhandenen Lösung optisch nicht zu frieden war hab ich widgets basierend auf der Highcharts-API erstellt.

Ziel ist es alle sinnvollen Diagramme der Highcharts-API via Widget zur Verfügung zustellen. Die sind optisch sowie technisch gut anpassbar und halt modern 

WetterUI zeigt mir das Wetter mit Forecast der nächsten Stunden und Tage. Das Große Diagramm wird direkt erzeugt und nicht als Bild eingebunden. Das war mir wichtig, da in den Popups mehr Infos drinnen sind. Das andere sind Beispiele für die Darstellung in Popups und 3D-Charts.

Hier also mal ein paar Screens für den Anfang.

Die Highcharts-Widgets sind nun eingechecket und per Update verfügbar.

Dank an blackbluegl: https://github.com/knowthelist/fhem-tablet-ui/pull/122

Beispiele sind im examples Ordner verfügbar.

[MichaelT]

Hallo Forum,

großes Lob an alle Beteiligten - Das ist richtig gut was Ihr da gebaut habt.

Ich habe mit dem Chart aber leider ein Problem. Solange ich ein Wert im Chart habe, funktioniert es. Wenn ich einen zweiten Wert einfüge habe ich ein leeres Widget.
Es werden in der Browser-Console keine Fehlerausgaben gemacht.

Wäre schön wenn mir einer eine Tipp geben könnte.

Geht:

Code Auswählen Erweitern

<header>GÄSTEZIMMER</header>
           <div    class="normal"
                data-type="chart"
                data-device="OG_GZ_RTth"
                data-logdevice='["OG_GZ_HZ_FL"]'
                data-columnspec='["4:measured-temp"]'
                data-style='["ftui l0fill","ftui l0dot","ftui l2dash"]'
                data-ptype='["lines","lines","lines"]'
                data-uaxis='["primary","primary","secondary"]'
                data-legend='["Ist", "Soll", "Ventil"]'
                data-yunit="°C"
                data-ytext="Temperatur"
                data-minvalue="auto"
                data-maxvalue="auto"
                data-yunit_sec="%"
                data-ytext_sec="Prozent"
                data-yticks="auto"
                data-minvalue_sec="0"
                data-maxvalue_sec="100"
                data-daysago_start="0"
                data-daysago_end="-1"
                data-crosshair="true"
                data-cursorgroup="1"
                data-scrollgroup="1"
                data-showlegend="true"
                data-xticks="auto"
                data-height="300px">
           </div>



Geht nicht:

Code Auswählen Erweitern

<header>GÄSTEZIMMER</header>
           <div    class="normal"
                data-type="chart"
                data-device="OG_GZ_RTth"
                data-logdevice='["OG_GZ_HZ_FL","OG_GZ_HZ_FL"]'
                data-columnspec='["4:measured-temp","4:humidity"]'
                data-style='["ftui l0fill","ftui l0dot"]'
                data-ptype='["lines","lines"]'
                data-uaxis='["primary","primary"]'
                data-legend='["Ist", "Soll"]'
                data-yunit="°C"
                data-ytext="Temperatur"
                data-minvalue="auto"
                data-maxvalue="auto"
                data-yunit_sec="%"
                data-ytext_sec="Prozent"
                data-yticks="auto"
                data-minvalue_sec="0"
                data-maxvalue_sec="100"
                data-daysago_start="0"
                data-daysago_end="-1"
                data-crosshair="true"
                data-cursorgroup="1"
                data-scrollgroup="1"
                data-showlegend="true"
                data-xticks="auto"
                data-height="300px">
           </div>



Gruß aus dem Ruhrgebiet
Michael

[blackbluegl]

Die Highcharts-Widgets sind nun eingechecket und per Update verfügbar.

Dank an blackbluegl: https://github.com/knowthelist/fhem-tablet-ui/pull/122

Beispiele sind im examples Ordner verfügbar.

Super. Danke.

[eki]

Ich habe mit dem Chart aber leider ein Problem. Solange ich ein Wert im Chart habe, funktioniert es. Wenn ich einen zweiten Wert einfüge habe ich ein leeres Widget.
Es werden in der Browser-Console keine Fehlerausgaben gemacht.

Auf den ersten Blick sieht es OK aus, kannst Du mal einen Auszug aus dem Logfile posten.

[MichaelT]

@eki, hab gerade erst gelesen. Mach ich morgen abend.

[dadoc]

Hallo eki,
das ist superklasse, und der Einbau klappte mehr oder weniger auf Anhieb - vielen Dank! Ich visualisiere damit die Daten eines Poolcontrollers, der in 1500 km vor sich hindümpelt und über einen vpn Tunnel (vvia GSM) mit
dem hiesigen Router verbunden ist.
In der Beschreibung sind die CSS Klassen für die Formatierung von Schrift usw. erwähnt (.text.axes Font and color for the chart axes usw.).
Wo/wie genau müsste man diese einsetzen bzw. gibt es dafür vielleicht ein Beispiel, aus dem man das ersehen kann? Mein "css" ist leider noch ausbaufähiger als mein perl 
Grüße
Martin

[dadoc]

Kanns mir jetzt selbst beantworten - muss ich in der fhem-tablet-ui-user.css ändern. Dachte deshalb, es geht nicht, weil ich nicht auf dem Schirm hatte, dass ich nach jeder Änderung erst den FF Cache leeren muss, um sie zu sehen.

[MichaelT]

Hallo eki,

danke für dein Interesse. Habe mal für den Fall "Geht nicht" die Logausgabe der Chrome-Console eingehangen.

Code Auswählen Erweitern

Plugin dir: /fhem/tablet/js
fhem-tablet-ui.js:118 Filename: index_Test.html
fhem-tablet-ui.js:211 Collecting required readings
VM803:598 start init
jquery.min.js:4 Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check http://xhr.spec.whatwg.org/.
VM803:630 init exit
VM803:1663 start update
VM803:1680 update exit
fhem-tablet-ui.js:57 Loaded plugin: widget_chart
fhem-tablet-ui.js:223 Request readings from FHEM
fhem-tablet-ui.js:278 start longpoll
2fhem-tablet-ui.js:278 start longpoll
fhem-tablet-ui.js:346 2015-11-11 18:21:35 / OG_GZ_RTth / STATE / T: 20.9 desired: 18.0
VM803:1663 start update
VM803:1680 update exit
fhem-tablet-ui.js:65 update done for device:OG_GZ_RTth parameter:STATE
3fhem-tablet-ui.js:278 start longpoll
fhem-tablet-ui.js:346 2015-11-11 18:24:08 / OG_GZ_RTth / STATE / T: 20.9 desired: 18.0
VM803:1663 start update
VM803:1680 update exit
fhem-tablet-ui.js:65 update done for device:OG_GZ_RTth parameter:STATE

Mehr kommt nicht.

Hier für "geht"

Code Auswählen Erweitern

Plugin dir: /fhem/tablet/js
fhem-tablet-ui.js:118 Filename: index_Test.html
fhem-tablet-ui.js:211 Collecting required readings
VM852:598 start init
jquery.min.js:4 Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check http://xhr.spec.whatwg.org/.
VM852:630 init exit
VM852:1663 start update
VM852:1680 update exit
VM852:1663 start update
VM852:633 start refresh
2VM852:734 Main loop HTTP
2VM852:1145 Main loop page content
VM852:1680 update exit
fhem-tablet-ui.js:57 Loaded plugin: widget_chart
fhem-tablet-ui.js:223 Request readings from FHEM
fhem-tablet-ui.js:278 start longpoll

Die "start" und "exit" habe ich für mein Verständnis in widget_chart.js eingebaut. Es kommt im Fehlerfall anscheinend gar nicht zu einem "start refresh"

[eki]

Hallo dadoc,

Es muss eben in einem der Files definiert werden, die in der HTML Datei, welche Du laedst, eingebunden sind. Gleichzeitig wird direkt im Chart Widget js noch die Datei ftui_chart.js eingebunden, dort sind auch Beispiele enthalten. Im Wiki sind alle CSS Parameter jetzt auch beschrieben.

[eki]

Hallo Michael,

Anhand Deiner Logs wird zumindest klar, an welcher Stelle das Problem liegt. Kannst Du mal versuchen nur das Array mit den columnspec mit zwei Werten zu setzen und das data-logdevice, wie im Gutfall, mit nur einem Wert, das sollte dann trotzdem 2 Graphen ergeben.
Müsste dann also etwa so aussehen:

Code Auswählen Erweitern

<header>GÄSTEZIMMER</header>
           <div    class="normal"
                data-type="chart"
                data-device="OG_GZ_RTth"
                data-logdevice='["OG_GZ_HZ_FL"]'
                data-columnspec='["4:measured-temp","4:humidity"]'
                data-style='["ftui l0fill","ftui l0dot"]'
                data-ptype='["lines","lines"]'
                data-uaxis='["primary","primary"]'
                data-legend='["Ist", "Soll"]'
                data-yunit="°C"
                data-ytext="Temperatur"
                data-minvalue="auto"
                data-maxvalue="auto"
                data-yunit_sec="%"
                data-ytext_sec="Prozent"
                data-yticks="auto"
                data-minvalue_sec="0"
                data-maxvalue_sec="100"
                data-daysago_start="0"
                data-daysago_end="-1"
                data-crosshair="true"
                data-cursorgroup="1"
                data-scrollgroup="1"
                data-showlegend="true"
                data-xticks="auto"
                data-height="300px">
           </div>

[MichaelT]

Hallo eki, teste ich mal.
Sorry für die lange Anttwortzeit. Bin gerade ein bisschen eingespannt.

Gruss Michael

[MichaelT]

Hallo eki,

habe getestet. Wenn ich data-columnspec erweitere sehe ich trotzdem nur die Daten des ersten Kanal. Der zweite, der jetzt korrigiert auf data-uaxis "secondary" liegt, zeigt zwar auf der rechten Skala den richtigen min und max Wert an, aber der Trend ist nicht zu sehen.

EDIT: Hab gerade gesehen das ich humidity und temp vertaucht habe!

Code Auswählen Erweitern

<header>GÄSTEZIMMER</header>
           <div    class="normal"
                data-type="chart"
                data-device="OG_GZ_RTth"
                data-logdevice='["OG_GZ_HZ_FL"]'
                data-columnspec='["4:humidity","4:measured-temp"]'
                data-style='["ftui l1fill","ftui l0fill"]'
                data-ptype='["lines","lines"]'
                data-uaxis='["primary","secondary"]'
                data-legend='["Ist", "Soll"]'
                data-yunit="°C"
                data-ytext="Temperatur"
                data-minvalue="auto"
                data-maxvalue="auto"
                data-yunit_sec="%"
                data-ytext_sec="Prozent"
                data-yticks="auto"
                data-minvalue_sec="auto"
                data-maxvalue_sec="auto"
                data-daysago_start="0"
                data-daysago_end="-1"
                data-crosshair="true"
                data-cursorgroup="1"
                data-scrollgroup="1"
                data-showlegend="true"
                data-xticks="auto"
                data-height="300px">
           </div>


Code Auswählen Erweitern

Plugin dir: /fhem/tablet/js
fhem-tablet-ui.js:118 Filename: index_Test.html
fhem-tablet-ui.js:211 Collecting required readings
VM225:598 start init
jquery.min.js:4 Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check http://xhr.spec.whatwg.org/.
VM225:630 init exit
VM225:1663 start update
VM225:1680 update exit
VM225:1663 start update
VM225:633 start refresh
2VM225:734 Main loop HTTP
2VM225:1145 Main loop page content
VM225:1680 update exit
fhem-tablet-ui.js:57 Loaded plugin: widget_chart
fhem-tablet-ui.js:223 Request readings from FHEM
fhem-tablet-ui.js:278 start longpoll