Hallo,
nachdem ich meine ersten Schritte mit FHEM gegangen und relativ zufrieden mit meinen Leistungen bin, habe ich als nächsten Punkt auf meiner To-Do-Liste das TabletUI (Vorab der Hinweis, das Tablet UI ist Version 2.6.15 laut data-bind="ftui.version") stehen. Leider finde ich an dieser Stelle noch nicht die richtigen Lösungen für meine Probleme bzw. die Dokumentation hilft mir nicht so gut weiter.
Die nachfolgenden Fragen haben sich bei mir ergeben:
1. Ist es möglich nur
ein TabletUI für alle Devices (SmartPhone, Tablet und PC) zu nutzen. Hierbei hatte ich an ein sich selbst skalierendes UI gedacht, was die einzelnen Boxen, je nach genutztem Gerät, untereinander verschiebt.
Aus den Beiträgen, die ich gelesen habe, schließe ich, dass viele von euch, ein UI für Smartphones und ein UI für Tablet/PC nutzen und daher diese Möglichkeit ausscheidet bzw. sehr schwierig zu implementieren ist.
2. Welche Konfiguration der Meta-Daten ist erforderlich? Nach meiner Recherche bin ich ,,so klug als wie zuvor". Einerseits habe ich gelesen, die Meta-Daten müssen nicht eingestellt werden (Defaul) und andererseits diverse Hinweise gefunden, dass die Parameter doch einzustellen sind... Bislang bin ich
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="widget_base_width" content="132"> <!-- 9 cols --> DEFINIERT Breite eines FELDES im Gridster
<meta name="widget_base_height" content="114"> <!-- 7 rows --> DEFINIERT Höhe eines FELDES im Gridster
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="gridster_disable" content="1">
<meta name="widget_margin" content="4"> DEFINIERT Abstand zwischen den Feldern
<meta name="widget_min_cols" content="13"> EVTL min. Spalten im WIDGET
<meta name="longpoll" content="1"> <!-- 1=longpoll;0=shortpoll every 30sec -->
<meta name="debug" content="0"> <!-- 1=output to console;0=no output →
über diese Meta-Parameter gestolpert ;-). Hierzu auch noch die Fragen:
- a) Was macht widget_min_cols und gibt es ein widget_min_rows?
- b) Woher weiß ich bei widget_base_width und widget_base_height wie breit eine Spalte (132 = 9 etwa 14,7 entspricht einer Spalte) und wie hoch eine Zeile (114 = 7 etwa 16,3 entspricht einer Zeile) ist?
- c) Welche weiteren (für einen Einsteiger) relevanten Meta-Daten müssen konfiguriert werden?
3) Was ist die beste Konfiguration für das Grundgerüst eines TabletUI? Ich präferiere derzeit ein Gridster mit Row Col, kann aber den Unterschied zwischen Gridster Sheet Row Cell und meiner gewählten Variante nicht genau erkennen. M.E. scheint es mit Row Col einfacher die Positionen zu bestimmen, aber damit liege ich wahrscheinlich falsch ;-). Außerdem befürchte ich, mit Blick auf Frage 1, dass die Variante VBox HBox zu wählen ist....
4) Bei meinem Widget Calview gelingt es mir nicht, sechs Spalten zu erzeugen. Nach der fünften Spalte wird grundsätzlich umgebrochen. Zudem würde ich gerne Überschriften ausgeben, was mir auch nicht gelingt. Die Lösung
<!--################################# KALENDER ################################################-->
<li data-row="1" data-col="2" data-sizey="5" data-sizex="6">
<header class="big">Kalender</header>
<div class="row">
<div class="col">Beginn Datum</div>
<div class="col">Beginn Zeit</div>
<div class="col">Ende Datum</div>
<div class="col">Ende Zeit</div>
<div class="col">Termin</div>
</div>
<div class="row">
<div class="col inline"
data-type="calview"
data-device="cw_Termine"
data-get="all"
data-max="10"
data-all-today-color="#ad3333"
data-detail='["bdate","btime","edate","etime","summary"]'
></div>
</div>
</li>
<!--############################### Ende KALENDER ############################################-→führt zwar zu einem, aber nicht schönem, Ergebnis. Außerdem kann ich "source", sofern eingebunden, nicht mit einem Alias ersetzen.
Ich weiß, es sind einige Fragen, hoffe aber, dass ihr mir weiterhelfen könnt. Entsprechende Code kann ich, sofern erforderlich, gerne nachreichen.
Gruß
Mundus
Hallo,
ich bastle derzeit weiter an meinem TabletUI und komme, neben den oben stehenden Problemen nun auf ein neues und hoffe, dass es hierfür eine Lösung gibt.
Aus den Vorlagen habe ich mir ein Swipe als Kalendar erstellt. Hier lösen aber die Funktion toDate().eeee() und toDate().ddmm() nur den ersten abgefragten Wert auf und zeigen somit falsche Werte an. Der von mir verwandte Code
<!--################################# Wetter als Swipe ################################################-->
<li data-row="1" data-col="7" data-sizey="4" data-sizex="5">
<header class="big bg-gray">Wetter</header>
<div data-type="swiper" data-height="280px" class="top-space">
<ul>
<!--################################# Erster Wetter-Eintrag Aktuell ################################################-->
<li>
<div class="left">
<div data-type="label">Aktuelles Wetter</div>
<div class="row">
<div class="cell verticalLine">
<div data-type="weather" data-device="WetterTest" data-get="condition" class="large"></div>
<div data-type="label" data-device="WetterTest" data-get="condition" ></div>
</div>
<div class="cell">
<div data-type="label" data-device="WetterTest" data-get="temperature" data-unit="%B0C%0A" class="row top left left-space big"></div>
<div data-type="label" data-device="WetterTest" data-get="wind_condition" class="row left newline"></div>
</div>
</div>
</div>
</li>
<!--############################### Ende erster Wetter-Eintrag ############################################-->
<!--################################# Zweiter Wetter-Eintrag Aktuell ################################################-->
<li>
<div class="left">
<div data-type="label" data-device="WetterTest" data-get="fc1_date" data-substitution="toDate().eeee()+','" class="inline"></div>
<div data-type="label" data-device="WetterTest" data-get="fc1_date" data-substitution="toDate().ddmm()" class="inline"></div>
<div class="row">
<div class="cell verticalLine">
<div data-type="weather" data-device="WetterTest" data-get="fc1_condition" class="large"></div>
<div data-type="label" data-device="WetterTest" data-get="fc1_condition" ></div>
</div>
<div class="cell">
<div data-type="label" data-device="WetterTest" data-get="fc1_high_c" data-unit="%B0C%0A" class="left-space big"></div>
<div data-type="label" data-device="WetterTest" data-get="fc1_low_c" data-unit="%B0C%0A" class="left-space big"></div>
</div>
</div>
</div>
</li>
<!--############################### Ende zweiter Wetter-Eintrag ############################################-->
<!--################################# Dritter Wetter-Eintrag Aktuell ################################################-->
<li>
<div class="left">
<div data-type="label" data-device="WetterTest" data-get="fc2_date" data-substitution="toDate().eeee()+','" class="inline"></div>
<div data-type="label" data-device="WetterTest" data-get="fc2_date" data-substitution="toDate().ddmm()" class="inline"></div>
<div class="row">
<div class="cell verticalLine">
<div data-type="weather" data-device="WetterTest" data-get="fc2_condition" class="large"></div>
<div data-type="label" data-device="WetterTest" data-get="fc2_condition" ></div>
</div>
<div class="cell">
<div data-type="label" data-device="WetterTest" data-get="fc2_high_c" data-unit="%B0C%0A" class="left-space big"></div>
<div data-type="label" data-device="WetterTest" data-get="fc2_low_c" data-unit="%B0C%0A" class="left-space big"></div>
</div>
</div>
</div>
</li>
<!--############################### Ende dritter Wetter-Eintrag ############################################-->
<li>
<div class="left">
<div data-type="label" data-device="WetterTest" data-get="fc1_high_c" data-unit="°C " class="bottom inline verticalLine"></div>
<div class="inline">
<div data-type="label" data-device="WetterTest" data-get="fc1_condition" class="large cell"></div>
<div data-type="weather" data-device="WetterTest" data-get="fc1_condition" class="bigplus thin"></div>
<div data-type="label" data-device="WetterTest" data-get="fc1_low_c" data-unit="%B0C%0A" class="inline medium"></div>
</div>
</div><div class="row"></div>
<div class="left">
<div data-type="label" data-device="WetterTest" data-get="fc3_date" data-substitution="toDate().eeee()+','" class="left large cell darker"></div>
<div data-type="label" data-device="WetterTest" data-get="fc3_date" data-substitution="toDate().ddmm()" class="left large cell darker"></div>
</div>
</li>
<li>
<div data-type="label" data-device="WetterTest" data-get="fc4_date" class="cell"></div>
</li>
</ul>
</div>
</li>
<!--############################### Ende Wetter ############################################-->Daher wird nur bei dem zweiten Swipe ein korrekter Wert angezeigt, alle anderen Swipes 3 ff. zeigen bei dem Funktionsuafruf toDate() den Wert des zweiten Swipes, also heute an.... Der Aufruf data-get="fc3_date" liefert aber den richtigen Wert zurück, daher vermute ich, dass der Funktionsaufruf nicht erneut durchgeführt wird.
Leider weiß ich nicht, woran das liegt.
Zudem würde ich mich freuen, wenn mir jmd. erzählen kann, wo ich die Ausgabemöglichkeiten der Funktion toDate() finden kann (meine google-Suche war nicht von Erfolg gekrönt). Ich hätte z.B. gerne das Format 10.04.2017 für das Tagesdatum (toDate()ddmmyyyy() und toDate()ddmmyy() waren nicht erfolgreich).
Gruß
Mundus
Hi mal folgendes probiert:
data-substitution="toDate().eeee()"
.... anstatt:
data-substitution="toDate().eeee()+','"
?
Die Funktionen sind z. B. hier definiert (relativ weit unten):
https://github.com/knowthelist/fhem-tablet-ui/blob/master/www/tablet/js/fhem-tablet-ui.js (https://github.com/knowthelist/fhem-tablet-ui/blob/master/www/tablet/js/fhem-tablet-ui.js)
Zitat von: n4rrOx am 11 April 2017, 12:47:48
Hi mal folgendes probiert:
data-substitution="toDate().eeee()"
.... anstatt:
data-substitution="toDate().eeee()+','"
Ja, das bringt aber leider nicht den gewünschten Effekt. Der Zusatz
+',' fügt lediglich das Komma bei der Substitution an.
Zu Testzwecken habe ich das Beispiel aus http://knowthelist.github.io/fhem/tablet/demo_swiper.html (http://knowthelist.github.io/fhem/tablet/demo_swiper.html) in meinem TabletUI eingefügt und bzgl. des Datums das selbe Phänomen. Gibt es weitere Ideen?
Leider hat mir der Verweis auf die Funktionen nicht geholfen. da die Datumsumwandlung nicht erklärt wird bzw. ich diese nicht erkannt habe.
Gruß
Mundus
Zu Frage 1:
Ich habe hier
https://forum.fhem.de/index.php/topic,66246.msg575211.html#msg575211 (https://forum.fhem.de/index.php/topic,66246.msg575211.html#msg575211)
mal einen Ansatz vorgestellt, wie man mit einer FTUI Version Tablett und Smartphone abdecken kann.
Viele Grüße,
Andreas
Hallo andreas_r,
deinen Artikel hatte ich schon gelesen, da ich aber mit dem Standard genug Baustellen vor Augen hatte (habe), habe ich den Artikel nicht weiter verfolgt bzw. deine Beispiele angeschaut. Nutzt du selbst "Masonry" und wie gut funktioniert es?
Gruß
P.S.: Die Funktion toDate() scheint auch hier https://forum.fhem.de/index.php/topic,68102.0.html (https://forum.fhem.de/index.php/topic,68102.0.html) anders zu reagieren, als erwartet.
Ich nutze das genau so, wie es die Screenshots im genannten Beitrag zeigen.
Viele Grüße,
Andreas