New FHEM Tablet UI

rudolfkoenig · 15 März 2015, 16:31:12

Koennte jemand ein schoenes Beispiel (==Bild) und ein Link zum Doku hier posten, ich wuerde gerne dieses Frontend im fhem.de "Frontend Screenshots" Abschnitt erwaehnen.

setstate · 15 März 2015, 21:37:15

Der große Meister persönlich

welche Ehre

Eine Doku ist noch nicht richtig verfügbar, zur Zeit gibt es nur die Readme auf Github https://github.com/knowthelist/fhem-tablet-ui.
Ich will aber noch das Wiki auf Github pflegen https://github.com/knowthelist/fhem-tablet-ui/wiki (Hilfe ist gern willkommen)
Screenshot-Sammlung gibt heute noch auf http://knowthelist.github.io/fhem-tablet-ui/

Viele Grüße
Mario

nesges · 16 März 2015, 10:03:16

Dann zeig ich auch mal eine Auswahl

Edit: Ich habe die HTML-Konfiguration noch hinzugefügt. Sie wird in meiner Installation aus verschiedenen PHP-Templates zusammengefügt; im Anhang ist das HTML, das am Browser ankommt zu sehen. Teilweise werden JS-Modifikationen verwendet (devices.js), die ich in diesem frühen Stadium nicht veröffentlichen möchte um die Entwicklung des UI nicht von der Seite zu torpedieren. Ich bitte um Verständnis. Fragen dazu beantworte ich aber gerne, sofern sie hier im Thread nicht ohnehin schon behandelt worden sind.

Edit 2: Bei den on-for-timer-Buttons habe ich übrigens einen Fehler übersehen, es wird einmal zu oft mit 3600 multipliziert.

schka17 · 16 März 2015, 11:35:02

Hallo Nesges,

Respekt!!!

das entspricht ziemlich meine Vorstellungen von einem einfachen, klarem Usereinterface.

Leider kommt ich mit dem Basis Set überhaupt nicht weiter, also nicht annähernd soweit wie du. Wärest du bereit deine Konfig auch zu sharen, ich denke das würde mir, und vielleicht auch anderen, sehr helfen?

Gruß

Karl

Brockmann · 16 März 2015, 11:44:46

Dank der zusätzlichen console-Logs bin ich bei meinem Problem mit longpoll einen Schritt weiter.
Events dieser Art:

Code Auswählen


2015-03-16 11:32:09 CUL_HM Wetterstation T: 10.6 H: 73 W: 1.5 R: 5.9 IR: 0 WD: 230 WDR: 67.5 S: 175 B: 114

ordnet fhem-tablet-ui.js nicht state zu, sondern einem imaginären Reading "T":

Code Auswählen


"#2015-03-16 11:38:01 CUL_HM Wetterstation T: 10.8 H: 72 W: 5.4 R: 5.9 IR: 0 WD: 180 WDR: 67.5 S: 181 B: 115#" fhem-tablet-ui.js:458:6
"update done (filter:Wetterstation)" fhem-tablet-ui.js:384:1
"2015-03-16 11:38:01 / Wetterstation / T / 10.8 H: 72 W: 5.4 R: 5.9 IR: 0 WD: 180 WDR: 67.5 S: 181 B: 115" fhem-tablet-ui.js:487:8
"2015-03-16 11:38:01 / Wetterstation / T / 10.8 H: 72 W: 5.4 R: 5.9 IR: 0 WD: 180 WDR: 67.5 S: 181 B: 115"

Mit der Gegenprobe data-get="T" und data-part angepasst, funktioniert das longpoll-Updaten denn auch. Aber dann passt die Anzeige eben nur beim longpoll, aber nicht beim Abruf bzw. manuellen Update.
Eine Idee, wie man das fixen könnte?

bjoernbo · 16 März 2015, 12:27:41

@nesges: Wie hast Du im Wohnzimmer den Temperaturverlauf hinbekommen? Das fehlt in meiner Ansicht noch!

nesges · 16 März 2015, 12:59:50

Der Temperaturverlauf wird per iframe geladen und wird weder vom Tablet UI noch von fhem erstellt. Die Grafik erzeuge ich mittels dygraphs (http://dygraphs.com/) aus Daten einer per DbLog befüllten MySQL-Datenbank.

Die HTML-Konfiguration habe ich in meinem Post noch ergänzt. Vielleicht sind ja Ideen für euch dabei

bjoernbo · 16 März 2015, 14:11:24

interessant! Welche Hardware hast Du im Einsatz? Würde das auf einem RaspberryPI laufen? Ich denke mal

Zitatdygraphs

wird sich auf dem Raspberry installieren lassen, aber welche Datenbank soll ich nehmen? Ich habe noch ein NSA mit einer SQL DB, frage mich allerdings wie ich da eine Verbindung hin aufbauen soll / kann.

Ist die Einrichtung sehr "tricky" ?

bjoernbo · 16 März 2015, 14:36:13

by the way .... womit misst du die Temperatur deines Kühlschrankes ??

nesges · 16 März 2015, 14:43:53

dygraphs ist nur eine Javascript-Bibliothek, der ist ziemlich egal wer sie ausliefert. fhem und Apache laufen bei mir auf einem Raspberry 2, MySQL auf einem Netgear ReadyNAS. Die Einrichtung von DbLog ist in http://www.fhemwiki.de/wiki/DbLog umfassend erklärt. Schwierig ist an dem gesamten Setup eigentlich nichts, aber das sagt sich immer leicht wenn man weiss wie's geht. Für den Anfang würde ich aber empfehlen sich auf das Wesentliche zu konzentrieren. Die Anbindung MySQL -> dygraphs ist zB ein ganz eigenes Thema, das man sich ersparen kann, wenn man einfach die durch fhem erzeugten SVG-Plots benutzt.

Im Kühlschrank liegt einfach ein TFA 30.3147.IT Temperatursender (http://tfa-dostmann.de/index.php?id=117).

setstate · 16 März 2015, 18:56:15

@nesges: von mir auch einen Big Respect !!! Sieht sehr sehr schön aus. Gefällt mir ...

Wegen Tabs, Weather-Widget, Chart-Widgets, Color-Schema ... unterhalten wir uns demnächst offline. Ich bin noch mitten im Umbau zum Auslagern der Controls als Modul. Auch schaue ich nach einer Optimierung bei der Logpoll-Event Verarbeitung, so dass nur noch gewollte Parameter aktualisiert werden.

@Brockmann: Danke für die Log-Analyse. Das mit imaginären Reading "T" ist nachvollziehbar und ich schaue heute Abend, wie man das besser machen kann.

bjoernbo · 16 März 2015, 21:10:59

@nsges:
Wird bei dir das Symbol für das Schlafzimmer weiterhin angezeigt? Ich habe jetzt sogar deinen Code übernommen, aber mehr als einen gelben, ausgefüllten Kreis bekomme ich nicht.

Zitat<div class="container">
<a id="room_index" href="index.php" class="cell fa-stack fa-2x">


</a>
<a id="room_schlafzimmer" href="schlafzimmer.php" class="cell fa-stack fa-2x">


</a>
<a id="room_kueche" href="kueche.php" class="cell fa-stack fa-2x">


</a>
<a id="room_wohnzimmer" href="wohnzimmer.php" class="cell fa-stack fa-2x">


</a>
<a id="room_ben" href="ben.php" class="cell fa-stack fa-2x">


</a>
<a id="room_julia" href="julia.php" class="cell fa-stack fa-2x">


</a>
</div>

setstate · 16 März 2015, 21:31:53

@Brockmann: in der js/fhem-tablet-ui.js habe ich eine kleine Änderung am Erkennungsmuster gemacht, um besser zwischen STATE und einem Reading unterscheiden zu können. Probier mal deine Wetterstation jetzt.

nesges · 16 März 2015, 21:57:05

Zitat von: setstate am 16 März 2015, 18:56:15
Wegen Tabs, Weather-Widget, Chart-Widgets, Color-Schema ... unterhalten wir uns demnächst offline. Ich bin noch mitten im Umbau zum Auslagern der Controls als Modul. Auch schaue ich nach einer Optimierung bei der Logpoll-Event Verarbeitung, so dass nur noch gewollte Parameter aktualisiert werden.

Offline? Sehr gerne! Gibt's kalte Getränke?

Was mir so ausnehmend gut an deinem UI gefällt, ist dass es so simpel ist und deshalb ohne weitere Klimmzüge mit Webstandards erweiterbar ist. Von daher hab ich kaum noch Feature-Wünsche mehr von denen ich aktuell wüsste. Wobei ich mich natürlich gerne vom Gegenteil überzeugen lasse.

@bjoernbo: das Icon "bed" ist erst in der aktuellsten Font-Awesome Version enthalten. Du kannst sie einfach von http://fortawesome.github.io/Font-Awesome/ laden und die entsprechenden Files in der UI-Installation austauschen.

Brockmann · 17 März 2015, 09:49:22

Zitat von: setstate am 16 März 2015, 21:31:53
@Brockmann: in der js/fhem-tablet-ui.js habe ich eine kleine Änderung am Erkennungsmuster gemacht, um besser zwischen STATE und einem Reading unterscheiden zu können. Probier mal deine Wetterstation jetzt.

Sieht auf den ersten Blick gut aus. Ich behalte es mal noch im Auge, aber ich denke, so passt es jetzt. Danke!