[FHEM-Tablet-UI] User-Demos

[OrlandoGardiner]

Hallo, als Newbie blicke ich hier einfach nicht mehr durch und habe schon an zu vielen Stellen rumgespielt. Also würde ich die FTUI gern neu aufbauen. Als Vorlage würde ich gern die Userdemo von nesges aus dem github nutzen. Bekomme die allerdings nicht zu laufen. Ich erhalte immer nur eine weiße Seite mit den paar definierten Labels aber keinen Grafiken. Hat jemand nesges' userdemo zum laufen bekommen und kann mir hier weiterhelfen?

Beste Grüße
O.

[h3llsp4wn]

Hallo zusammen,

habe die Tablet UI nun auch für mich entdeckt und baue mir gerade fleissig meine UI zusammen. Daher eine kurze Frage:

@Phil___/nesges: Wie habt Ihr den schicken Plot von der ersten Seite hinbekommen? Ich hab da mal in die Küchen-HTML geschaut, aber da wird wohl
per iframe auf externe plots verlinkt (/plot/?p=...)? Ist das eine Erweiterung, die ich verpasst habe? Kleiner Tipp wäre prima - Rest bekomme ich dann schon hin.

Cheers,

h3ll

---------------------------------------------------------------------------------------------------------------------------------------------
Hat sich erledigt - werde mich also selbst an dygraphs rannmachen ....

[blackbluegl]

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.

[setstate]

Willkommen blackbluegl
Wunderbar deine Charts. Gefällt mir sehr
Verstehe ich das richtig, du hast schon ein FTUI Widget gebaut für die Chart API Einbindung?
Wenn ja, dann wollen wir das natürlich alle haben !!!
Bitte Code an mich senden oder einen Pullrequest im Github anlegen 
Danke

[blackbluegl]

Ja ich hab für Area und Line-Chart ein Widget, das auch mehrere Graphen in ein Diagramm darstellt (z.B. Speicher min/max/avg). Wie im Screen halt. Dann das 3D Balkendiagramm bottom-Up. Fand ich halt neckisch für Zustände wie Tor offen und Zu.

Dann hab ich die Screens mit der Wettervorhersage bei einigen gesehen und dachte, das kannste doch irgendwoher und siehe da Also den ganzen Sourcecode in eine Lib und ein widget gebaut, und es geht.

Ich bin noch recht frisch unterwegs mit FHem und dem Tablet-UI.

[eki]

Hallo zusammen,

da hier die Sprache auf charts gekommen ist, möchte ich auch mal etwas zu dem Thema beitragen. Ich habe einen etwas anderen Ansatz gewählt, und ein chart widget gebaut, welches möglichst ohne weitere Bibliotheken auskommt (ich hatte am Anfang auch mal geschaut, was es da so gibt, aber nichts gefunden, was mir richtig gefallen hat und nicht irgendwann an Grenzen gestoßen ist, bin aber auch nicht sehr tief eingestiegen) und das in weiten Teilen konfiguriert und angepasst werden kann.
Das widget kann im Prinzip alles das was die FHEM plots auch können mit einigen Ergänzungen und auch (noch) einigen Einschränkungen. Eine kurze Liste der wichtigsten Punkte:

• Es können mehrere Graphen in ein Chart gepackt werden (Steuerung geht über Arrays für Logfile etc. (siehe data-logfile von simplechart aber eben als array (Beispiel HTML file erklärt es denke ich))
• Es kann eine primäre und eine sekundäre Achse definiert werden
• Für jeden Graph kann über css styles definiert werden, wie er aussehen soll, in der html Dateil muss man dann nur den style für jeden Graphen setzen
• Die Achsen können automatisch nach Dateninhalt beschriftet werden
• Auch Symbole für die Datenpunkte sind möglich, es können alle font awesome, FHEM und open automation icons als symbole verwendet werden
• Es kann eine Legende eingeblendet werden, dort wird durch einen Klick auf die Einträge ein einzelner Graph ab oder angeschaltet
• Es kann gezoomt und gescrollt werden
• Es gibt einen Cursor, der Die Daten der Graphen als Text anzeigt
• Für den Cursor und das Scrollen/Zoomen können mehrere Charts gekoppelt werden, die scrollen/zoomen dann gemeinsam, wenn eines geschoben oder gezoomt wird
• ... (weitere Details in der Beschreibung (unten angehängt, als html damit fürs Wiki nutzbar))

Als Basis hatte ich mal mit dem simplechart angefangen, daher gibt es einige Parameter, die gleich sind (Beispiel template Datei ist auch angefügt). Eine Beschreibung, des Ganzen, die auch direkt ins Wiki eingefügt werden kann, habe ich unten angehängt, und das js file auch. Damit das Ganze richtig gut aussieht,  sollten einige css styles definiert sein, ich habe das bisher über das fhem-tablet-user.css file gemacht, und dieses auch angehängt. Hierüber kann der Nutzer auch recht weitreichende Anpassungen des Aussehens machen (Fonts für die Achsen, Farben, Styles für die Graphen selbst). Damit das mit den Symbolen funktioniert, müssen die folgenden zwei Zeilen:

Code Auswählen Erweitern

<!-- USER CSS Dateien -->
<!-- ---------------- -->
<link rel="stylesheet" href="/fhem/tablet/lib/openautomation.css"/>
<link rel="stylesheet" href="/fhem/tablet/lib/fhemSVG.css"/>


in die index.html Datei (unter "User CSS Dateien" im angehängten Beispiel) hinzugefügt werden.
Ich habe auch einige Beispielbilder, die ich mit der Demo FHEM gemacht habe angefügt. Ich habe zwar eine ganze Menge getestet, bin mir aber sicher, dass es noch ein paar Problemchen geben wird also fleißig testen und Feedback geben.

[blackbluegl]

Sieht auch vielversprechend aus. Vor allem wenn man keine Fremd-Libs haben möchte. 

Da hast aber ordentlich Tipparbeit reingesteckt, mein lieber mann.

Zum Thema Highcharts muss ich sagen, das ich die halt schon ne ganze Weile für andere Sachen einsetze. Da sind ein paar schöne Sachen bei. Das gute ist, solang das hier keiner kommerziell einsetzen will, die API auch kostenlos verwendet werden kann. (CC3)

[setstate]

Wow, voll die Profies hier am Start

Sehr schön, dass ihr die Sachen hier shared

Ich würde mir das ansehen und dann gerne im FTUI Respository bei github einchecken, damit alle es bekommen?!
Oder wollt ihr es selbst irgendwo hosten?

[blackbluegl]

Meine Change-Request auf GIT-Hub haste vorhin bekommen glaube ich zu mindest...

[eki]

Von Profi kann leider keine Rede sein  .

Für mich wäre es OK, wenn Du das ins FTUI repository eincheckst. Vielleicht kannst Du mir dann noch mal kurz erklären, was ich tun muss, um dort Änderungen machen zu können (ich will das Ding ja auch reparieren/erweitern können).

[setstate]

Dann mache einen Fork vom Hauprepository, checke deine Änderungen bei dir ein und schicke ein Pullrequest upstream. Dann überprüfe ich die Änderungen und publiziere es

[setstate]

Je weniger externe Libs benutzt werden und je weniger Files installiert werden, umso lieber ist es mir

[xxsteffenxx]

Hallo Eki,
hab gleich mal dein Graph ausprobiert... leider zeigt es bei mir nichts an und ich finde keine Fehler...

die widget_chart.js habe ich in die

Code Auswählen Erweitern

/opt/fhem/www/tablet/js kopiert.

dann mein HTML Code

Code Auswählen Erweitern

     <div class="normal"
data-type="chart"
data-logdevice="FileLog_WZ_Thermostat"
data-logfile="WZ_Thermostat-2015-10.log"
data-columnspec='["4:WZ_Thermostat_desiredTemperature:1:int","4:WZ_Thermostat_temperature:1:int","4:WZ_Thermostat_valveposition:1:int"]'
data-style='["ftui l0fill","ftui l0dot","ftui l2dash"]'
data-ptype='["lines","lines","lines"]'
data-uaxis='["primary","primary","secondary"]'
data-legend='["Dewpoint AgroWeather", "Temperature Garden", "Dewpoint Garden", "Humidity"]'
data-yunit="°C"
data-ytext="Temperature"
data-minvalue="auto"
data-maxvalue="auto"
data-yunit_sec="%"
data-ytext_sec="Percentage"
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">
</div>

Würde gerne aus dem device "FileLog_WZ_Thermostat" und dem Logfile "WZ_Thermostat-2015-10.log" die Werte desiredTemperature, Termperatur und ValvePosition in einem Chart zeigen lassen ....

Grüße Steffen

[eki]

Hallo Steffen,

was mir an Deinem HTML Code auffällt, ist, dass die arrays nicht zueinander passende Längen haben. Du musst auch für das data-logdevice ein array mit 3 Werten angeben (in dem Fall dann eben 3 mal das gleiche Logdevice aus der Länge des arrays ermittelt das Script wieviele Graphen es malen soll). Den Logfile Eintrag kannst Du auch weglassen, dann wird das aktuelle Logfile zu einem Device verwendet.
Du koenntest mal ein Stueck aus Deinem Logfile und die Definition des Logdevice aus der fhem.cfg posten.

Wird denn überhaupt etwas gemalt (also z.B. die Achsen, die Buttons). Bei mir sieht ein ähnliches chart so aus wie im angehängten Bild.

[xxsteffenxx]

Hallo Eki,

aber klar doch.
also HTML Code habe ich nun so geändert

Code Auswählen Erweitern

   <div class="normal"
data-type="chart"
data-logdevice='["FileLog_WZ_Thermostat";"FileLog_WZ_Thermostat";"FileLog_WZ_Thermostat"]'
data-logfile="WZ_Thermostat-2015-10.log"
data-columnspec='["4:WZ_Thermostat_desiredTemperature:1:int","4:WZ_Thermostat_temperature:1:int","4:WZ_Thermostat_valveposition:1:int"]'
data-style='["ftui l0fill","ftui l0dot","ftui l2dash"]'
data-ptype='["lines","lines","lines"]'
data-uaxis='["primary","primary","secondary"]'
data-legend='["Termperatur Soll", "Temperature Ist", "Ventil"]'
data-yunit="°C"
data-ytext="Temperature"
data-minvalue="auto"
data-maxvalue="auto"
data-yunit_sec="%"
data-ytext_sec="Percentage"
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">
</div>

Meine Logs in der fhem.cfg

Code Auswählen Erweitern

define WZ_Thermostat MAX HeatingThermostat XXXXX
attr WZ_Thermostat IODev ml
attr WZ_Thermostat room MAX
attr WZ_Thermostat scanTemp 1
attr WZ_Thermostat userReadings onlyAutoMode { return "1";;}
define FileLog_WZ_Thermostat FileLog ./log/WZ_Thermostat-%Y-%m.log WZ_Thermostat
attr FileLog_WZ_Thermostat logtype text
attr FileLog_WZ_Thermostat room 9.90_Logs

Logfile

Code Auswählen Erweitern

2015-10-30_19:44:30 WZ_Thermostat mode: auto
2015-10-30_19:44:30 WZ_Thermostat battery: ok
2015-10-30_19:44:30 WZ_Thermostat desiredTemperature: 19.0
2015-10-30_19:44:30 WZ_Thermostat temperature: 19.3
2015-10-30_19:44:30 WZ_Thermostat valveposition: 40
2015-10-30_19:44:30 WZ_Thermostat 19.0 °C
2015-10-30_19:44:30 WZ_Thermostat onlyAutoMode: 1
2015-10-30_19:44:30 WZ_Thermostat onlyAutoMode: 1
2015-10-30_19:44:30 WZ_Thermostat MAXLAN_initialized: 1
2015-10-30_19:44:30 WZ_Thermostat MAXLAN_error: 0
2015-10-30_19:44:30 WZ_Thermostat MAXLAN_errorInCommand:
2015-10-30_19:44:30 WZ_Thermostat MAXLAN_valid: 1
2015-10-30_19:44:30 WZ_Thermostat MAXLAN_isAnswer: 0
2015-10-30_19:44:30 WZ_Thermostat onlyAutoMode: 1
2015-10-30_19:44:30 WZ_Thermostat onlyAutoMode: 1