Nachdem ich eine kurze Einleitung zur Weboberfläche TabletUI verfasst habe, möchte ich in diesem Beitrag etwas ausführlicher auf meine eigene TabletUI-Installation eingehen. Wie im Einführungs-Beitrag bereits erwähnt, habe ich mich selbst am TabletUI von Roman Ueberück inspirieren lassen. Ich werde also in diesem Beitrag weniger auf das Design eingehen, sondern eher auf die Widgets selber und wie man sie richtig konfiguriert.
Contents
Switch und Label für die Gerätesteuerung und Verbrauchsanzeige
Das Widget Switch nutze ich für die einfache AN/AUS-Steuerung meiner Geräte. Des Weiteren lasse ich mir mit dem Widget Label die Verbrauchsdaten anzeigen.
<li data-row="1" data-col="1" data-sizex="1" data-sizey="2">
<header>Papierlampe</header>
<div class="top-space">
<div data-type="switch"
data-device="WZ_Papierlampe"
data-on-color="black"
data-off-color="#808080"
data-on-background-color="cornflowerblue"
data-off-background-color="#3D4C66"
class="big">
</div>
<div class="">
An/Aus
</div>
<div class="top-space">
<div class="">
Power:
</div>
<div data-type="label"
data-device="WZ_Papierlampe_Power"
data-get="state"
data-unit="W"
data-limits='[0,20,50]'
data-colors='["#6699FF","green","firebrick"]'
class="big">
</div>
</div>
<div class="top-space">
<div class="">
Verbrauch:
</div>
<div data-type="label"
data-device="WZ_Papierlampe_Verbrauch"
data-get="Verbrauch"
data-fix="2"
data-unit="kW/h"
data-limits='[0,20,50]'
data-colors='["#6699FF","green","firebrick"]'
class="big">
</div>
</div>
</div>
</li>
Im ersten Teil definiere ich das Widget „Switch“. Dies 
geschieht durch den Eintrag „data-typ“. Über „data-device“ gebe ich an, welches FHEM-Devices ich steuern möchte. Der Name muss exakt mit dem Namen in FHEM übereinstimmen. Durch das Weglassen der „data-get-on“ bzw. „data-get-off“ Angaben, wird automatisch das Reading STATE vom Device ausgelesen bzw. gesteuert. Die weiteren Angaben dienen dem Aussehen des Widgets. „data-on/off-color“ bestimmt die Farbe des Symbols im An/Aus-Zustand. Die Einträge „data-on/off-background-color“ bestimmen die Füllfarbe des „Buttons“. Zum Schluss definiere ich noch mit der Klasse „big“ die Größe des Buttons. Unter dem Button habe ich noch eine simple An/Aus-Beschriftung eingefügt.
Im zweiten Teil lasse ich mir mit dem Widget „Label“ die Verbrauchsdaten anzeigen. Diese Verbrauchsdaten werden mit PCA301-Funksteckdosen gemessen. Mit „Label“ lassen sich die Readings von beliebigen Devices anzeigen. Definiert wird das Label wieder mit dem Eintrag „data-typ“. Mit dem Eintrag „data-device“ wird angegeben von welchem Devices man ein Reading anzeigen lassen will. In meinem Fall vom dummy „WZ_Papierlampe_Verbrauch“. Das gewünschte Reading gibt man mit den Eintrag „data-get“ an. Nun lässt sich das Reading noch anpassen. Ich habe es durch den Eintrag „data-fix“ auf zwei Nachkommastellen begrenzt und lass es mit der Einheit W anzeigen („data-unit“). Um es etwas „aufzupeppen“ habe ich für unterschiedlich Werte-Bereiche unterschiedliche Textfarbe definiert. Dies geschieht durch die Angabe eines „Arrays“. Zuerst wird mit „data-limit“ die Grenzen der Werte-Bereiche angegeben. Danach gibt man mit „data-color“ die gewünschte Farbe für die Bereiche. Auch bei den „Labels“ habe ich mich wieder für die Größe „big“ entschieden. Als Überschrift habe ich einen einfachen Text genommen. Das Label und die Überschrift habe ich mit der Klasse „top-space“ umhüllt, damit der Abstand zum „Switch“ etwas größer ist.
Im unteren Teil habe ich das gleiche für den Gesamtverbrauch gemacht. Die Angaben entsprechend angepasst.
Lampe mit Farbwahl
Für meine MiLight RGB-Lampe habe ich einen „Switch“ für das Ein/Aus-Schalten verwendet und Taster (push) für das Einstellen der Farbe Weiß und für das Öffnen eines Pop-Ups für die Farbauswahl. Des Weiteren ein Dimm-Regler zum Dimmen der Lampe.
<li data-row="1" data-col="1" data-sizex="1" data-sizey="3">
<Header>Haengelampe</header>
<div class="top-space">
<div data-type="switch"
data-device="WZ_Haengelampe"
data-get-on="on.*"
data-set-on="on"
data-on-color="black"
data-off-color="#808080"
data-on-background-color="cornflowerblue"
data-off-background-color="#3D4C66"
class="big">
</div>
<div class="">
An/Aus
</div>
<div class="">
<div data-type="push"
data-device="WZ_Haengelampe"
data-set="rgb"
data-set-on="FFFFFF"
data-off-color="#808080"
data-off-background-color="#3D4C66"
data-icon="fa-paint-brush"
class="big">
</div>
<div class="">
Weiss
</div>
</div>
<div class="">
<div data-type="popup"
data-height="150px"
data-width="600px"
class="">
<div data-type="push"
data-icon="fa-paint-brush"
data-off-color="#808080"
data-off-background-color="#3D4C66"
class="big">
</div>
<div class="">
Farbe
</div>
<div class="dialog dialogTransparent">
<header>Haengelampe - FARBE</header>
<div class="top-space">
<div class="inline">
<div onclick="$('.dialog-close').trigger('click');"
data-type="push"
data-device="WZ_Haengelampe"
data-set="hue"
data-set-on="0"
data-off-color="#FF0000"
data-off-background-color="#3D4C66"
data-icon="fa-paint-brush"
class="big">
</div>
<div class="">Rot</div></div>
<div class="inline">
<div onclick="$('.dialog-close').trigger('click');"
data-type="push"
data-device="WZ_Haengelampe"
data-set="hue"
data-set-on="60"
data-off-color="#FFFF00"
data-off-background-color="#3D4C66"
data-icon="fa-paint-brush"
class="big">
</div>
<div class="">Gelb</div>
</div>
<div class="inline">
<div onclick="$('.dialog-close').trigger('click');"
data-type="push"
data-device="WZ_Haengelampe"
data-set="hue"
data-set-on="125"
data-off-color="#00FF00"
data-off-background-color="#3D4C66"
data-icon="fa-paint-brush"
class="big">
</div>
<div class="">Gruen</div>
</div>
<div class="inline">
<div onclick="$('.dialog-close').trigger('click');"
data-type="push"
data-device="WZ_Haengelampe"
data-set="hue"
data-set-on="190"
data-off-color="#00FFFF"
data-off-background-color="#3D4C66"
data-icon="fa-paint-brush"
class="big">
</div>
<div class="">Tuerkis</div>
</div>
<div class="inline">
<div onclick="$('.dialog-close').trigger('click');"
data-type="push"
data-device="WZ_Haengelampe"
data-set="hue"
data-set-on="260"
data-off-color="#0000FF"
data-off-background-color="#3D4C66"
data-icon="fa-paint-brush"
class="big">
</div>
<div class="">Blau</div>
</div>
<div class="inline">
<div onclick="$('.dialog-close').trigger('click');"
data-type="push"
data-device="WZ_Haengelampe"
data-set="hue"
data-set-on="325"
data-off-color="#FF00FF"
data-off-background-color="#3D4C66"
data-icon="fa-paint-brush"
class="big">
</div>
<div class="">Pink</div>
</div>
<div class="inline">
<div onclick="$('.dialog-close').trigger('click');"
data-type="push"
data-device="WZ_Haengelampe"
data-set="rgb"
data-set-on="FFFFFF"
data-off-color="#FFFFFF"
data-off-background-color="#3D4C66"
data-icon="fa-paint-brush"
class="big">
</div>
<div class="">Weiss</div>
</div>
</div>
</div>
</div>
</div>
<div class="top-space">
<div data-type="volume"
data-device="WZ_Haengelampe"
data-get="brightness"
data-set="brightness"
data-min="0"
data-max="100"
data-tickstep="10"
data-unit="%"
class="small dim-tick dim-back">
</div>
</div>
</div>
</li>
Zuerst wird wieder ein „Switch“ definiert für das An- und Ausschalten der Lampe mit der An/Aus Beschriftung. Das Vorgehen ist identisch wie oben bereits beschrieben.
Im zweiten Teil wird ein Taster definiert um die Lampe auf weiß zu 
stellen. Dies geschieht über das Widget „push“ – „data-typ=push“. Die restliche Konfiguration ähnelt dem Widget „Switch“. Das Reading „rgb“ wird gesteuert (data-set=“rgb“). Das Reading wird dann auf den gewünschten Farbwert gesetzt (data-set-on=“xxx“). Das Symbol hat die Farbe der gewünschten Farbe (data-off-color=“xxxx“). Die Größe ist wieder auf „big“ eingestellt (class=“big“). Unter dem Taster habe ich wieder eine einfache Beschriftung eingefügt.
Im dritten Teil wird es interessant. Anstatt ein „Color-Picker“ oder ähnliches zu konfigurieren, habe ich mich für Taster entschieden. Mit diesen Tastern lassen sich vordefinierte Farben auswählen. Um nicht alle Taster durchgehend anzuzeigen, wird ein Popup-Fenster definiert. Dies geschieht durch den Daten-Typ „popup“. Die nachfolgenden Einträge bestimmen die Größe des Popups (data-height, data-width). Danach wird der Taster zum Öffnen des Popups definiert mit der Beschriftung „Farbe“. Nun wird das Popup selbst definiert. Durch die Klasse „Dialog“ wird die Konfiguration „eingeleitet“. Innerhalb dieser Klasse werden dann die Taster für die unterschiedlichen Farben definiert.
Zum Schluss dann noch ein Dimmer für die Helligkeit (data-typ=“small dim-tick dim-back“) Hier kann man natürlich durch ändern des Eintrages „small“ die Größe des Widgets ändern.
Abfahrtsmonitor
Nachdem man sich in FHEM einen Abfahrtsmonitor definiert hat, liegt es doch nahe, diesen auch auf seinen Tablet anzuzeigen. Der Abfahrtmonitor lässt sich einfach durch eine Tabelle realisieren. Der Inhalt der Zellen wird dann mit den Readings vom definierten DBPlan-Modul befüllt.
<li data-row="2" data-col="2" data-sizex="7" data-sizey="3">
<header>Hübschstraße - Kronenplatz</header>
<table width="100%" class="">
<tr>
<th class="big">Verkehrsmittel</th>
<th class="big">Abfahrt</th>
<th class="big">Ankuft</th>
<th class="big">Umsteigen</th>
<th class="big">Dauer</th>
</tr>
<tr>
<td>
<div data-type="label"
data-device="Bahn_Kronenplatz"
data-get="plan_connection_1"
class="big">
</div>
</td>
<td>
<div data-type="label"
data-device="Bahn_Kronenplatz"
data-get="plan_departure_1"
class="big">
</div>
</td>
<td>
<div data-type="label"
data-device="Bahn_Kronenplatz"
data-get="plan_arrival_1"
class="big">
</div>
</td>
<td>
<div data-type="label"
data-device="Bahn_Kronenplatz"
data-get="plan_travel_change_1"
class="big">
</div>
</td>
<td>
<div data-type="label"
data-device="Bahn_Kronenplatz"
data-get="plan_travel_duration_1"
class="big">
</div>
</td>
</tr>
<tr>
<td>
<div data-type="label"
data-device="Bahn_Kronenplatz"
data-get="plan_connection_2"
class="big">
</div>
</td>
<td>
<div data-type="label"
data-device="Bahn_Kronenplatz"
data-get="plan_departure_2"
class="big">
</div>
</td>
<td>
<div data-type="label"
data-device="Bahn_Kronenplatz"
data-get="plan_arrival_2"
class="big">
</div>
</td>
<td>
<div data-type="label"
data-device="Bahn_Kronenplatz"
data-get="plan_travel_change_2"
class="big">
</div>
</td>
<td>
<div data-type="label"
data-device="Bahn_Kronenplatz"
data-get="plan_travel_duration_2"
class="big">
</div>
</td>
</tr>
<tr>
<td>
<div data-type="label"
data-device="Bahn_Kronenplatz"
data-get="plan_connection_3"
class="big">
</div>
</td>
<td>
<div data-type="label"
data-device="Bahn_Kronenplatz"
data-get="plan_departure_3"
class="big">
</div>
</td>
<td>
<div data-type="label"
data-device="Bahn_Kronenplatz"
data-get="plan_arrival_3"
class="big">
</div>
</td>
<td>
<div data-type="label"
data-device="Bahn_Kronenplatz"
data-get="plan_travel_change_3"
class="big">
</div>
</td>
<td>
<div data-type="label"
data-device="Bahn_Kronenplatz"
data-get="plan_travel_duration_3"
class="big">
</div>
</td>
</tr>
</table>
</li>
Wetter-Widget
Das „Wetter-Widget“ ist etwas komplexer. Ich werde deswegen die verwendeten Devices etwas erklären. Die Wetterdaten werden vom Device „WetterProplante“ geladen. Mehr Infos zum Modul auf der FHEM-Wiki-Seite. Den Wetter-Trend habe ich mit dem Hilfs-Modul STATISTICS realisiert. Ich habe es wie folgt definiert:
define WetterTrend statistics WetterProplanta|DR_Temperatur
attr WetterTrend tendencyReadings temperature,humidity,dewPoint,pressure
Es wird somit eine Statistiks für das Device WetterProplanta und DR_Temperatur geführt. Anhand dieser Statistik wird dann ein Wetter-Trend erstellt. Das Device DR_Temperatur habe ich deswegen mit reingenommen, da ich dieses Device für die Außentemperaturmessung mit 1-Wire-Sensoren verwende.
Im folgenden der HTML-Code. Die Größe (data-row=“1″, data-col=“2″…) muss ggf. entsprechend angepasst werden. Ich habe sie nach langen rum probieren an mein Tablet angepasst. Dabei war das Zusammenspiel zwischen den Spalten- und Reihenangaben und den Zellenmaßen ausschlaggebend.
<meta name="widget_base_width" content="105"> <meta name="widget_base_height" content="33">
<li class="halbTransparent border-left border-right" data-row="1"
data-col="2" data-sizex="6" data-sizey="4">
<header class="headerTransparent">Wetter in Karlsruhe</header>
<table width="90%" class="">
<tr>
<td rowspan="5"
style="text-align:center;vertical-align:top">
<!--**Wetter-Symbole******************************************************-->
<div data-type="weather"
data-device="WetterProplanta"
data-get="fc0_weatherDay"
data-imageset="kleinklima"
style="width:150px"
class="centered">
</div>
</td>
<td>
<!--**Temperatur-Wert*****************************************************-->
<div class="inline">
<div data-type="label"
data-device="DR_Temperatur"
data-get="temperature"
data-fix="1"
data-limits='[-73,18,28]'
data-colors='["cornflowerblue","green","firebrick"]'
data-unit="%B0C%0A"
data-substitution="s/(\d$)//g"
class="big">
</div>
<div class="">
<!--**Klima-Trend-Temperatur***********************************************-->
<div data-type="klimatrend"
data-device="WetterProplanta"
data-get="statTemperatureTendency"
data-refperiod="1"
class="inline large">
</div>
<div data-type="klimatrend"
data-device="WetterProplanta"
data-get="statTemperatureTendency"
data-refperiod="2"
class="inline large">
</div>
</div>
<!--**Beschriftung: Temperatur*********************************************-->
<div class="">
Temperatur
</div>
</div>
</td>
<td>
<div class="inline">
<!--**Luftfeuchtigkeit*****************************************************-->
<div data-type="label"
data-device="WetterProplanta"
data-get="humidity"
data-limits='[0,40,71]'
data-colors='["cornflowerblue","green","firebrick"]'
data-unit="%"
class="big">
</div>
<div class="">
<!--**Klima-Trend-Luftfeuchtigkeit*****************************************-->
<div data-type="klimatrend"
data-device="WetterProplanta"
data-get="statHumidityTendency"
data-refperiod="1"
class="inline large">
</div>
<div data-type="klimatrend"
data-device="WetterProplanta"
data-get="statHumidityTendency"
data-refperiod="2"
class="inline large">
</div>
</div>
<!--**Beschriftung: Luftfeuchte*********************************************-->
<div class="">
Luftfeuchte
</div>
</div>
</td>
<td>
<div class="inline">
<!--**Wetter-Daten: Taupunkt************************************************-->
<div data-type="label"
data-device="WetterProplanta"
data-get="dewPoint"
data-limits='[-73,18,28]'
data-colors='["cornflowerblue","green","firebrick"]'
data-unit="%B0C%0A"
class="big">
</div>
<div class="">
<!--**Klima-Trend: Taupunkt*************************************************-->
<div data-type="klimatrend"
data-device="WetterProplanta"
data-get="statDewPointTendency"
data-refperiod="1"
class="inline large">
</div>
<div data-type="klimatrend"
data-device="WetterProplanta"
data-get="statDewPointTendency"
data-refperiod="2"
class="inline large">
</div>
</div>
<!--**Beschriftung: Taupunkt************************************************-->
<div class="">
Taupunkt
</div>
</div>
</td>
<td>
<div class="inline left-space">
<div class="inline">
<div class="">
<!--**Beschriftung: Wind*****************************************************-->
<div class="inline">
Wind:
</div>
<!--**Wetter-Daten: Wind*****************************************************-->
<div data-type="label"
data-device="WetterProplanta"
data-get="wind"
data-unit="km/h"
data-limits="[0, 20, 29, 39, 50, 62, 75, 89, 103, 117]"
data-colors='["green","green","#aa6900","#aa6900","firebrick",
"firebrick","firebrick","red","red","red"]'
style="display:inline"
class="inline big border-right">
</div>
</div>
</div>
<div class="inline">
<div class="">
<!--**Beschriftung: Sicht***************************************************-->
<div class="inline">
Sicht:
</div>
<!--**Wetter-Daten: Sicht***************************************************-->
<div data-type="label"
data-device="WetterProplanta"
data-get="visibility"
data-unit="km"
class="inline big border-right">
</div>
</div>
</div>
<div class="inline">
<div class="">
<!--**Beschrifung: Druck*****************************************************-->
<div class="inline">
Druck:
</div>
<!--**Wetter-Daten: Druck****************************************************-->
<div data-type="label"
data-device="WetterProplanta"
data-get="pressure"
data-unit="hPa"
data-limits="[0,1005,1015]"
data-colors='["cornflowerblue","green","#aa6900"]'
class="inline big border-right">
</div>
</div>
</div>
</div>
</td>
</table>
</li>
Spritmonitor
Nachdem ich mir einen eigenen Spritmonitor mit Tankalarm definiert habe (Blog-Beitrag folgt), habe ich diesen natürlich auch in mein TabletUI eingebunden. 
Der Spritmonitor ist eigentlich nichts anderes wie eine Tabelle. Ähnlich wie beim Abfahrtsmonitor. Den verwendeten Code findet ihr hier:
<li class="halbTransparent" data-row="8" data-col="6" data-sizex="3" data-sizey="4">
<header class="headerTransparent">Spritmonitor</header>
<table width="100%" class="">
<tr>
<th>Tankstelle</th>
<th>Diesel</th>
<th>Super</th>
<th>E10</th>
</tr>
<tr>
<td>
<div class="inline">
ESSO
</div>
</td>
<td>
<div data-type="label"
data-device="TankstelleESSO"
data-get="Diesel"
class="">
</div>
</td>
<td>
<div data-type="label"
data-device="TankstelleESSO"
data-get="SuperE5"
class="">
</div>
</td>
<td>
<div data-type="label"
data-device="TankstelleESSO"
data-get="SuperE10"
class="">
</div>
</td>
</tr>
<tr>
<td>
<div class="inline">
ARAL
</div>
</td>
<td>
<div data-type="label"
data-device="TankstelleARAL"
data-get="Diesel"
class="">
</div>
</td>
<td>
<div data-type="label"
data-device="TankstelleARAL"
data-get="SuperE5"
class="">
</div>
</td>
<td>
<div data-type="label"
data-device="TankstelleARAL"
data-get="SuperE10"
class="">
</div>
</td>
</tr>
<tr>
<td>
<div class="inline">
REAL
</div>
</td>
<td>
<div data-type="label"
data-device="TankstelleREAL"
data-get="Diesel"
class="">
</div>
</td>
<td>
<div data-type="label"
data-device="TankstelleREAL"
data-get="SuperE5"
class="">
</div>
</td>
<td>
<div data-type="label"
data-device="TankstelleREAL"
data-get="SuperE5"
class="">
</div>
</td>
</tr>
<tr>
<td>
<div class="inline">
OWM
</div>
</td>
<td>
<div data-type="label"
data-device="TankstelleOWM"
data-get="Diesel"
class="">
</div>
</td>
<td>
<div data-type="label"
data-device="TankstelleOWM"
data-get="SuperE5"
class="">
</div>
</td>
<td>
<div data-type="label"
data-device="TankstelleOWM"
data-get="SuperE10"
class="">
</div>
</td>
</tr>
</table>
</li>
Status der Bewohner
Nachdem ich mir mit einem iBeacon und RESIDENTS und ROOMMATE eine Anwesenheitskontrolle eingerichtet habe, habe ich den Status natürlich auch im TabletUI eingebunden.
Als Vorbereitung solltet ihr meine beiden Beiträge zum Thema iBeacon / Geofancy und das Visualisieren von Bewohnern mit RESIDENTS und ROOMMATE anschauen.
<li class="halbTransparent border-left border-right" data-row="14" data-col="7" data-sizex="1" data-sizey="3">
<header class="headerTransparent">Daniel</header>
<div class="">
<div data-type="symbol"
data-device="Daniel"
data-get="location"
data-get-on='["home","Arbeit","absent","Hochschule"]'
data-icons='["fa-home","fa-suitcase","fa-car","fa-university"]'
class="bigger">
</div>
</div>
</li>
Die Reihe (data-row), die Spalte (data-col) und natürlich der Name des ROOMMATE-Devices muss entsprechend angepasst werde. Auch die Zeilen data-get-on und data-alias müssen euren Umfeld angepasst werde.
Um euch das Anpassen etwas zu erleichtert, werde ich die wichtigesten Einträge etwas erläutern.
data-device – Der Name des ROOMMATE-Devices. In meinem Fall „Daniel“. Mehr Infos zu ROOMMATE in meinem Blogbeitrag dazu.
data-get – Der Name des Readings, welches visualisiert werde soll. In diesem Fall das Reading „location“, hier wird der aktuelle Ort abgespeichert, welcher über die Geofancy-App übermittelt wurde.
data-get-on – Eine Liste der möglichen Orte
data-icon – Eine Auflistung der Symbole, die den Orten unter „data-get-on“ zugeordnet werden.
Fazit
Mit den Widgets „switch“, „push“ und „label“ lassen sich in der Regel alle wichtigen Infos aus eurer FHEM-Installation in TabeltUI anzeigen und die wichtigsten Geräte steuern. Ich hoffe ich konnte euch mit diese etwas ausführlicheren Erklärung meiner meist benutzen Widgets etwas helfen. Ansonsten einfach mal den Wiki-Eintrag zum Thema lesen. Da werden die Widgets erklärt und sind mit einem Beispiel versehen. Bei Fragen benutzt einfach die Kommentarfunktion 😉
UPDATE 14.11.2016 – Light Version
Nachdem ich TabletUI schon ein paar Monate im Einsatz habe, habe ich gemerkt, dass ich viele Funktionen gar nicht verwende. Ich habe mir deswegen eine kleine „Light-Version“ zusammengebastelt.
Ich verwende nun nur noch eine Hauptseite auf der ich alle Temperatursensoren und Steckdosen aufliste. Zusätzlich dann noch eine kleine „Extra-Leiste“ um auf den Bahn-Fahrplan, Regenradar und Systeminfo-Seite zu gelangen.
Wenn ihr mehr zum verwendeten HTML-Code wissen möchtet, dann meldet euch kurz in den Kommentaren. Ich versuche dann euch zu helfen.
moin,
bei philips hue iris muss für farben data-set=“hue“ in data-set=“rgb“ geändert werden, sonst geht es nicht.
geht trotzdem nicht, was meinst du mit hue iris?
habe es schon
mich würde das komplette setting für das wetter interessieren
(inkl ggf. devices und images)
Hallo ana,
habe den Code für das „Wetter-Widget“ dem Beitrag angehängt. Den Code hier als Kommentar zu posten hätte den Rahmen gesprengt 😉
Gruß Daniel
Hallo Daniel,
mich würde dann noch interssieren wie du das mit dem Tendency eingeben hast. Bei mir legt er nur das standard PressureTendency an, alles andere fehlt. Dabei habe ich das im attr des statistics moduls angegeben.
Gruß
Jan
Hallo Jan,
wie im Beitrag schon geschrieben, habe ich mir das Statistic-Modul definiert:
define WetterTrend statistics WetterProplanta|DR_TemperaturInbegriffen sind dann die Devices „WetterProplanta“ und „DR_Temperatur“. Mit dem Attribut
attr WetterTrend tendencyReadings temperature,humidity,dewPoint,pressurehabe ich dann festgelegt, welche Readings benutzt werden sollen. In den eingebunden Devices entstehen dann folgende Readings, zum Beispiel beim Device „DR_Temperatur“:In diesem Fall die Statistik des Readings „temperatue“. Das benötigte Reading „statTemperatureTendency“ wird ebenfalls erzeugt. Dieses Reading wird dann in TabletUI angezeigt:
Den ganzen Code findest du oben im Beitrag. Bei mir wurden auch die anderen Readings automatisch angelegt:
statTemperatureTendency, statHumidityTendency, statDewPointendencyDie Readings werden natürlich nur angelget, wenn das Wetter-Device diese auch besitzt. Solltest du das PROPLANTA-Device verwendet haben, sollte dies aber der Fall sein.
Gruß Daniel
Hallo,
kannst Du uns den Code für den „homestatus“ zeigen? Ich versuche mich verzweifelt an einem wechselnden Symbol der „residents“ ausliest.
Danke 🙂
Hallo,
habe den Code im Beitrag veröffentlicht. Hoffe ich konnte dir damit bisschen Helfen.
Ansonsten Frag einfach.
Gruß Daniel
Gibt es für das TabletUI eine Vorlage für die einzelnen Auflösungen von 7 / 10 Zoll Tablets ? Ich muss mit meiner FTUI immer scrollen, sprich das Tablet zeigt mir dies nicht komplett im Vollmodus an.
Hallo Sven,
ich hatte das gleiche Problem. Habe online leider nichts passendes gefunden.
Denke der Grund ist, dass es ja viele Möglichkeiten gibt.
Mit den beiden Einträgen in der index.html kann man ja die Größe der einzelnen Felder anpassen:
<meta name="widget_base_width" content="105"><meta name="widget_base_height" content="33">
In meinem Fall also 105px breit und 33px hoch. Bei meinem Tablet mit einer Auflösung von 1280×800 kann ich somit 16 Zeilen (16 x 33px = 528px) und 9 Spalten (9 x 105px = 972px) anzeigen lassen um ein etwa gleiches Seitenverhältnis zu bekommen.
Ein 1×1 Widget hat bei mir somit eine Größe von 1×3 (also 105px x 99px). Nicht gerade quadratisch, aber ich bin zufrieden. Möchte zum Beispiel ein 2×1 Widget haben, so gebe ich es wie folgt an:
<li class="halbTransparent border-left border-right" data-row="1" data-col="1" data-sizex="1" data-sizey="3">...oder ein 3×2 Widget wie folgt:
<li class="halbTransparent border-left border-right" data-row="1" data-col="1" data-sizex="3" data-sizey="6">...Mein TabletUI hat also eine Auflösung von 972×528. Also ein Seitenverhältnis von 1,84 : 1.
Mein Tablet hat ein Seitenverhältnis von ca. 1,78 : 1(On-Screen-Button bereits abgezogen).
Mein TabletUI wird also relativ gut angezeigt – also Bildschirm füllend.
Die einzige Möglichkeit ist glaube ich etwas mit den Widget-Maßen und Größe der Widgets zu spielen.
Einfach bisschen herumspielen. Irgendwann passt es dann ganz gut. Oder halt mathematisch an die Sache gehen und die perfekte Angaben errechnen. Ich empfehle jedoch nicht allzu große Widget-Maße zu nehmen. Dadurch, dass bei mir ein Widget in der y-Achse aus drei „Feldern“ besteht, kann ich relativ gut die höhe des Widgets anpassen. Zum Beispiel ein Widget welches ein Tick höher ist als ein 1×1 Widget:
<li class="halbTransparent border-left border-right" data-row="1" data-col="1" data-sizex="1" data-sizey="4">...Gruß Daniel
Moin,
habe gerade deine Light Version gesehen und dachte mir, wow genau so sollte das aussehen. Wärst du so freundlich ünd könntest mir das Grundgerüst zukommen lassen, gerne auch per Email?
Hallo Sascha,
hier mein TabletUI-Light: https://waschto.eu/wp-content/uploads/2017/06/TabletUI_light.zip
Ist aber nicht kommentiert. Aber sollte denke ich verständlich sein.
Das Gitter ist auf ein Display mit der Auflösung von 1280×800 angepasst. Kann also sein, dass du es bisschen an dein Display anpassen musst.
Insbesondere einmal die Allgemeine Größe eines „Feldes“ in der index.html Zeile 6 und 7:
<meta name="widget_base_width" content="105"><meta name="widget_base_height" content="33">
und in den jeweiligen Widgets die Ausbreitung des Widgets, zum Beispiel das Wetter Widget:
<li class="halbTransparent border-left border-right" data-row="1" data-col="2" data-sizex="6" data-sizey="4"><header class="headerTransparent">Wetter in Karlsruhe</header>
<table width="90%" class="">
...
Dies breitet sich über 6 Felder in x-Richtung und 4 Felder in y-Richtung aus. Wenn du natürlich die allgemeine Gittergröße änderst, dann musst du auch die Ausbreitung der Widgets anpassen.
Hat bei mir Stunden gedauert die perfekte Kombination aus allgemeine Größe und Widgetgröße zu finden. Da hilft nur probieren ?
Gruß Daniel
Danke das hilft mir schon weiter 🙂
Hey,
ich verwende momentan deinen Code von den Milights, funktioniert so weit auch alles lediglich der Status vom Dimmen wird nicht aktualisiert. Wenn ich direkt im Widget dimme ok aber wenn ich zb. im widget oben auf aus drücke beleibt der Dimmer bei 100% stehen und ändert sich erst nach einem page reload.
Longpoll funzt aber soweit andere Werte werden sofort neu geladen.
Irgend eine Idee wo das Verhalten her kommt und vor allem wie man es weg bekommt ??
Grüße Peter
Hallo Ihr Fleißigen, die Diskussion ist schon ein paar Tage alt, vielleicht hat trotzdem jemand einen Tipp für mich. Ich versuche gerade die Lichtsteuerung mit dem Popup für die Farbeinstellungen zu bauen. Zwei Probleme konnte ich nicht lösen.
1. ein/aus mit dem 1. Knopf geht. wenn ich den 2. Knopf -Weiß- drücke geht weiß an, der ein/aus Schalter „merkt“ das aber nicht. also drücke ich auf weiß und muss zum ausschalten immer 2x ein/aus drücken. (erst „ein“ dann „aus“)
2. Im Popup für die Farben passiert nichts.Also optisch ist alles ok. Druck auf das ICON für Farben und das Popup öffnet sich. Bei einen Druck auf die gewünschte Farbe erscheint unten auf dem Tablett der Hinweis „set Device hui wert) es passiert aber nichts. Auch im Tracing von Fhem taucht nichts auf.
vielen Dank im Voraus….