New FHEM Tablet UI

chris1284 · 27 März 2015, 18:20:49

wenn man selbst ein widget bauen wollen würde und von java nicht viel plan hat, was wären die anlaufstellen um sich auf die hier verwendeten techniken(?) einzulesen?

wenn ich's richtig versteh greifen die widgets die daten aus den data-tags ab und führen eigene funktionen aus oder greifen auf fhem-tablet-ui.js zu (zb setFhemStatus)...
gibt's ne doku zu fhem-tablet-ui.js?

bjoernbo · 27 März 2015, 19:01:54

das würde mich auch interessieren. Ein How-To an einem kleinem, einfachen Beispiel

Damian · 27 März 2015, 19:23:21

Wie sieht es aus die "Kacheln" (Widgets) bunt zu gestalten, z. B. abhängig von einer Temperatur oder Feuchtigkeit. Hier finde ich ein schönes Beispiel für abstrakte Plot-Darstellung:

http://dashingdemo.herokuapp.com/sampletv

Gruß

Damian

setstate · 27 März 2015, 19:31:34

Hallo zusammen,

es ist sehr schön, wie viele Meinungen, Fragen und Wünsche zum Tablet UI hier wieder neu aufgeschlagen sind.
Ich sehe kaum noch durch, deshalb nehmt es mir nicht böse, wenn ich nicht gleich auf alles eingehen kann.

Hier kurz meine Meinungen zu einigen genannten Punkten:
- Thermostat Widget mit Boost und Off Button möchte ich ungern. Das wäre zu überfrachtet. Evtl. kann sich jeder entsprechende Buttons daneben positionieren.
- WebViewControl: Es ist mir bewusst, dass die WebViewControl-Icons hinter dem Board liegen, ich will die auch nicht sehen, solange sie soooooo aussehen. Nix gegen das WebViewControl, das ist eine Spitzensachen und ohne das, hatte ich mir auch kein Tablet zugelegt und die UI gebastelt. Ich kann mal schauen, ob man mit 'z-index' in der CSS was machen könnte, das hängt vom benutzen 'position' Wert ab
- Timer widgets: ist interessant und hier auch schon mal angefragt, besonders für on-for-time. Würde ich gerne machen. Aber nicht sofort ...

- @bjoernbo: Deine ganzen Ungereimtheiten schaue ich mir an, wenn ich dazu komme. Schau aber bitte mal nach, ob das von der UI gesendete auch das ist, was richtig ist. Besonders welche Readings du änderst. und welche Änderungen im Rückkanal wieder reinkommen. Dazu die Console aufmachen und Debug einschalten ...
- Programmieren rund um die fhem-tablet-ui.js : da muss ich euch enttäuschen, mit Doku habe ich leider nicht soviel am Hut

Da müsst ihr euch im Selbststudium ran wagen. Ich verweise gerne auf https://jquery.com/ und http://learn.jquery.com/. Da hilft leider nur ein einfaches - widget schnappen und probieren. Web-Console ist das Hauptwerkzeug und ein Texteditor. Bei den Widgets ist es aber manchmal nicht so einfach, Syntax-Fehler zu erkennen. In diesem Fall würde es erst gar nicht geladen und man sieht nix in der Console. Dann kann man das widget explizit einbinden und sieht Fehler in der Console: <script data-type="text/javascript" src="/fhem/tablet/js/widget_mywidget.js"></script> Ich empfehle das Image Widgets als Template nehmen (oder das widget_template.js) und etwas erweitern. Vlt. könnt ihr gleich die data-url Sache implementieren. Die Widgets sind immer gleich aufgebaut: eine Init-Function, die beim Start aufgerufen wird und die Elemente anlegt und eine Update-Function, die für alle Widgets aufgerufen werden, um die Änderungen zu bewirken.
Und viel Google benutzen, mache ich auch gaaaanz viel.
- Update: Das möchte ich auch gerne. Dafür gibt es den Issue https://github.com/knowthelist/fhem-tablet-ui/issues/11. Ich hoffe, ein FHME Power-Auskenner kann uns zum Thema FHEM-update Mechanismus unterstützen und Starthilfe geben. Zum Thema Widgets, bin ich auch dafür, alle verfügbaren Widgets aus einer zentralen Quelle anzubieten.

nesges · 27 März 2015, 19:34:47

Zitat von: chris1284 am 27 März 2015, 18:20:49
wenn man selbst ein widget bauen wollen würde und von java nicht viel plan hat, was wären die anlaufstellen um sich auf die hier verwendeten techniken(?) einzulesen?

wenn ich's richtig versteh greifen die widgets die daten aus den data-tags ab und führen eigene funktionen aus oder greifen auf fhem-tablet-ui.js zu (zb setFhemStatus)...
gibt's ne doku zu fhem-tablet-ui.js?

Javascript! Nicht Java - wichtiger Unterschied, sonst liest du nachher Seitenweise Bücher über eine vollkommen unnütze Sprache!

Eine gute Einsteigerdoku zu Javascript kenne ich nicht, evtl. ist http://wiki.selfhtml.org/wiki/JavaScript eine gute Anlaufstelle. Wichtig ist vor allem JQuery, da gibt's mW aber auch nur die API-Doku unter http://api.jquery.com/. Die ist zwar exzellent, aber nicht wirklich einsteigerfreundlich. Ich würde am ehesten empfehlen sich ein einfaches Widget zu nehmen (widget_push.js dürfte am einfachsten sein) und damit so lange rumzuspielen, bist du verstanden hast, was dort passiert. Und in fhem-tablet-ui.js kann man sich auch einlesen, es sind nur gut 350 Zeilen Code, der an keiner Stelle besonders kryptisch ist.

Ich bin selber kein Javascript-Experte. Abgesehen von ein paar JQuery-UI Projekten habe ich die Sprache bisher eher gemieden.

setstate · 27 März 2015, 19:38:28

Zitat von: Damian am 27 März 2015, 19:23:21
Wie sieht es aus die "Kacheln" (Widgets) bunt zu gestalten, z. B. abhängig von einer Temperatur oder Feuchtigkeit. Hier finde ich ein schönes Beispiel für abstrakte Plot-Darstellung:

http://dashingdemo.herokuapp.com/sampletv

Gruß

Damian

Nein, bitte nicht !!! Das würde ich nicht gut finden. Das ist viel zu dick aufs Auge. Ich habe ja doch kein Atomkraftwerk Zuhause, wo Fehlerzustände sofort ins Auge springen müssen.
Ich möchte eine eine minimalistische UI, wo man sich ständig fragen sollte, was kann man noch weglassen um es einfacher und übersichtlicher zu machen.

Ich bin eher Fan von so etwas: http://biznology.com/2014/10/dashboard-finally-perfected/

nesges · 27 März 2015, 19:39:28

...und ein neues Widget: clock

Zeigt eine einfache Uhr in Form eines sich aktualisierenden Labels an. Zeitformat und Aktualisierungsinterval sind einstellbar. Doku unter https://github.com/nesges/Widgets-for-fhem-tablet-ui#clock, Download unter https://github.com/nesges/Widgets-for-fhem-tablet-ui/blob/master/js/widget_clock.js

Diese Widget hat übrigens keinerlei Interaktion mit fhem und ist daher eher als Spielzeug, Deko oder Gadget zu bezeichnen

bjoernbo · 27 März 2015, 20:01:00

@nesges. Jedesmal wenn du hier aufschlägst bringste ein neues Widget mit! Das gefällt mir. Bei Gelegenheit bitte noch eine Hardcopy für die Uhr hinterlegen. Du hast recht in kurzer Zeit passiert hier so viel....das ist Wahnsinn!

Damian · 27 März 2015, 20:25:08

Zitat von: setstate am 27 März 2015, 19:38:28
Nein, bitte nicht !!! Das würde ich nicht gut finden. Das ist viel zu dick aufs Auge. Ich habe ja doch kein Atomkraftwerk Zuhause, wo Fehlerzustände sofort ins Auge springen müssen.
Ich möchte eine eine minimalistische UI, wo man sich ständig fragen sollte, was kann man noch weglassen um es einfacher und übersichtlicher zu machen.

Ich bin eher Fan von so etwas: http://biznology.com/2014/10/dashboard-finally-perfected/

ja, den minimalistischen Ansatz finde ich auch gut. Ich denke hier auch an unbedarfte Anwender, bei denen eine wichtige Information, wie "schlechte Luft" ins Auge fallen soll. Immerhin werden ja Farbelemente z. B. auf der Skalierung vorgenommen, die ins Auge fallen. Genauso könnte aber auch die Feuchtigkeitszahl, die jetzt weiß ist, die entsprechende Farbe einnehmen. Immerhin kann sich offenbar jeder seine Widgets ja relativ einfach selbst bauen und das macht den Ansatz um so interessanter. Ich bin mir jetzt schon sicher, dass eine große Bibliothek entstehen wird und da kann sich jeder sein Widget nehmen bzw. anpassen.

Hast du denn eine Idee, warum der longpoll bei manchen hier nicht durchkommt? Wie schon geschrieben: Fehlermeldungen habe ich auf der Konsole keine.

Gruß

Damian

setstate · 27 März 2015, 20:41:21

@Damian: oookaay, da gehe ich mit. Wollte ich aber gesagt haben.

das mit dem longpoll ist schon merkwürdig. Unter Windows sagst du, geht es nicht? Hast du auch ein Tablet, geht es da auch nicht?
Geht longpoll mit dem normalen FHEM Webgui auf dem gleichen Client? Hast du FHEM aktuell, ich frage wegen der jquery.js, die du benutzt. Ich habe, um es schlank zu halten, keine eigene jQuery Version dabei, sondern nutze die aus der FHEM Installation.

Ich kann ja mal meine Windows Maschine rausholen und anwerfen zum Checken...

Damian · 27 März 2015, 22:00:44

Zitat von: setstate am 27 März 2015, 20:41:21
@Damian: oookaay, da gehe ich mit. Wollte ich aber gesagt haben.

das mit dem longpoll ist schon merkwürdig. Unter Windows sagst du, geht es nicht? Hast du auch ein Tablet, geht es da auch nicht?
Geht longpoll mit dem normalen FHEM Webgui auf dem gleichen Client? Hast du FHEM aktuell, ich frage wegen der jquery.js, die du benutzt. Ich habe, um es schlank zu halten, keine eigene jQuery Version dabei, sondern nutze die aus der FHEM Installation.

Ich kann ja mal meine Windows Maschine rausholen und anwerfen zum Checken...

Wie schon geschrieben, läuft mein Server unter Windows. FHEM-Update funktioniert da ja nicht. Daher kopiere ich die aktuellen Files immer wieder manuell. Wo liegt die jquery.js? Auf einem Android-Tablet als Client funktioniert die direkte Aktualisierung auch nicht. Was mir jetzt allerdings aufgefallen ist, dass es irgendwann auf den Clients (paar Minuten) doch aktualisiert wird. Es wird wahrscheinlich das Problem des Servers sein und nicht der Clients.

Gruß

Damian

chris1284 · 28 März 2015, 08:55:41

Zitat von: setstate am 27 März 2015, 19:31:34
- Update: Das möchte ich auch gerne. Dafür gibt es den Issue https://github.com/knowthelist/fhem-tablet-ui/issues/11. Ich hoffe, ein FHME Power-Auskenner kann uns zum Thema FHEM-update Mechanismus unterstützen und Starthilfe geben. Zum Thema Widgets, bin ich auch dafür, alle verfügbaren Widgets aus einer zentralen Quelle anzubieten.

ChrisD liefert über github die updates für seine squeezebox-modul, ggf mal ihn ansprechen wie's geht
updates werdne in fhem dann über das eingabefenster angestoßen

Zitatupdate all https://raw.githubusercontent.com/ChrisD70/FHEM-Modules/master/autoupdate/sb/controls_squeezebox.txt

bjoernbo · 28 März 2015, 11:17:29

@nesges: Habe heute dein "statistic" Widget eingerichtet. Dazu habe ich die .js ins /lib Verzeichnis gelegt und innerhalb des Head-Tag das neue Modul eingebunden. Einen entsprechenden FHEM Eintrag habe ich auch. Allerdings wird mir nichts angezeigt.Wo könnte der Fehler liegen ?

Zitat<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="widget_base_width" content="116">
<meta name="widget_base_height" content="131">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="longpoll" content="1"> 
<meta name="debug" content="0"> 
<link rel="stylesheet" href="/fhem/tablet/lib/jquery.gridster.min.css" />
<link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/font-awesome.min.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/jquery.toast.min.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/powerange.min.css" />
<script type="text/javascript" src="/fhem/pgm2/jquery.min.js"></script>
<script type="text/javascript" src="/fhem/tablet/lib/jquery.gridster.min.js"></script>
<script type="text/javascript" src="/fhem/pgm2/jquery.knob.min.js"></script>
<script type="text/javascript" src="/fhem/tablet/lib/jquery.toast.min.js"></script>
<script type="text/javascript" src="/fhem/tablet/lib/fa-multi-button.min.js"></script>
<script type="text/javascript" src="/fhem/tablet/lib/powerange.min.js"></script>
<script type="text/javascript" src="/fhem/tablet/lib/widget_klimatrend"></script>
<script type="text/javascript" src="/fhem/tablet/js/fhem-tablet-ui.js"></script>

...

Zitat<divv class="cell">Ben</diV>
<div data-type="klimatrend" data-device="statistik_ben" data-get="measured-temp"></div>
<div data-type="klimatrend"
data-device="statistik_ben"
data-get="measured-temp"
data-refperiod="1"
data-stagnating-color="rgb(80,80,80)"
data-icon="fa-angle"
data-rising-color="rgb(180,80,80)"
data-falling-color="rgb(80,80,180)"
data-highmark="1"
data-highmark-icon="fa-angle-double"
data-highmark-rising-color="rgb(255,80,80)"
data-highmark-falling-color="rgb(80,80,255)"
></div>

...

Zitatdefine statistik_ben statistics Ben.Wandthermostat
attr statistik_ben ignoreDefaultAssignments 1
attr statistik_ben room Ben
attr statistik_ben tendencyReadings humidity,measured-temp,desired-temp

setstate · 28 März 2015, 11:33:57

Rein optisch, ohne Tests ...
erst einmal

Zitat<script type="text/javascript" src="/fhem/tablet/lib/widget_klimatrend.js"></script>

statt

Zitat<script type="text/javascript" src="/fhem/tablet/lib/widget_klimatrend"></script>

Aber das muss nur für Debug-Zwecke angegeben werden, ansonsten wird es dynamisch angezogen, wenn du ein data-type='klimatrend' irgendwo in der index.html hast.

nesges · 28 März 2015, 12:09:06

Zitat von: bjoernbo am 28 März 2015, 11:17:29
Wo könnte der Fehler liegen ?

"measured-temp" ist nicht das Statistic-Reading. Schau dir dein Device nochmal an, du findest dort eine Reihe neuer Readings, die vom statistic-Modul erzeugt werden. Du willst die Readings mit "Tendency" im Namen.