New FHEM Tablet UI

[stephanr]

Da es gerade Thema war kurz meine Lösung für blinkende Müll-Symbole. Mein persönliches Ziel war es direkt auf meine CALLVIEW Instanz und den dort vorgehaltenen Terminen aufzusetzen, ohne zusätzliche Dummys erzeugen zu müssen. Herausgekommen ist eine Lösung auf Javascript Basis.

1. Zunächst die "klassische" Table UI Definition + eine Ergänzung der Blöcke um eine ID. Wozu folgt später.

Code Auswählen Erweitern


<li data-row="3" data-col="1" data-sizex="2" data-sizey="1">
<header>MÜLLABFUHR</header>
<div data-type="symbol" class="big inline top-narrow-10"
data-device="callview_abfall"
data-get="t_001_summary"
id="t_001_summary_blink"                  <-------- ID für das Symbol Element
      data-icons='["fa-trash","fa-trash","fa-trash","fa-trash","fa-tree"]'
      data-on-colors='["grey","yellow","green","blue","green"]'
      data-get-on='["Restabfall(14-täglich)","Gelber Sack(14-täglich)","Bioabfall(14-täglich)","Papiertonne(4-wöchentlich)","Weihnachtsbaum"]'>
</div>
<div class="cell inline">
<div data-type="label" class="top-narrow-10 w3x"
data-device="callview_abfall"
data-get="t_001_bdate"
id="t_001_bdate_blink">                    <---- ID für das Datums Element
</div>
<div data-type="label" class="cw3x small"
                data-device="callview_abfall"
                data-get="t_001_summary">
        </div>
</div>
</li>


Der Termin für die Abholung steht in "t_001_bdate".

2. Jetzt hab ich folgendes Javascript gebaut.

Code Auswählen Erweitern


1 function trash_blink(elementid, symbolid) {
2 var abholung = document.getElementById(elementid).innerHTML;
3 var myDateAbholung = abholung;
4 myDateAbholung=myDateAbholung.split(".");
5 var newDateAbholung=myDateAbholung[2]+"-"+myDateAbholung[1]+"-"+myDateAbholung[0];
6
7 var datum=new Date();
8 heute = Math.floor(Date.now());
9
10 var timediff = (new Date(newDateAbholung).getTime()) - heute;
11
12 if (timediff < 86400000) {
13 document.getElementById(symbolid).className += " blink";
14 }
15 }
16 setTimeout(trash_blink, 2000, "t_001_bdate_blink", "t_001_summary_blink");
17 setTimeout(trash_blink, 2000, "t_002_bdate_blink", "t_002_summary_blink");
18 setTimeout(trash_blink, 2000, "t_003_bdate_blink", "t_003_summary_blink");



Kurz ein paar Erklärungen. Zeile 16-18 ruft die Funktion "trash_blink" mit einer Verzögerung von 2000ms auf. Übergeben werden dabei die oben gekennzeichneten IDs. Die muss für jedes Abholdatum geschehen, dessen Symbol blinken soll.
In den Zeilen 2-5 wird das Datum der Abholung eingelesen, an den . gesplittet und in das ISO Format 8601 geändert. Identifiziert wird das zu lesenden Datum über den Funktionsparameter 1. Bsp. "t_001_bdate_blink"
Zeile 7-8 schreiben das aktuelle Datum bzw. die Anzahl der Millisekunden, die seit dem 01.01.1970 00:00:00 UTC vergangen sind in die Variable heute.
In Zeile 10 ziehe ich die Millisekunden von heute von den vergangenen Millisekunden für das Abholdatum ab und speichere das Ergebnis in die Variable timediff.
In den Zeilen 12-14 wird jetzt geprüft, ob das Ergbenis der Subtraktion kleiner als 86400000 Millisekunden ist. Die Anzahl der Millisekunden entspricht dabei genau 24 Std. Ist die zeitliche Differenz von jetzt zum Abholdatum also kleiner 24 Std. füge ich der css Definition den Wert "blink" hinzu. Dadurch fängt das Symbol dann halt an zu blinken. Identifiziert wird das Symbol über den Funktionsparameter 2. Bsp. "t_001_summary_blink"

Viele Grüße
Stephan

[Gunther]

Super danke, die Zeile hat geholfen:

Code Auswählen Erweitern

<meta http-equiv="Cache-Control" content="no-store" />

bei mir steht

Code Auswählen Erweitern

<meta http-equiv='pragma' content='no-cache'>

Was ist der Unterschied?

[FhemPiUser]

Hallo,
ich möchte mein Tablet mit Funk-Steckdose aus dem Standby holen und das Display anschalten lassen sobald jemand davor steht (mit Bewegungsmelder). Leider ist die Tablet UI Anzeige im Webviewcontrol zu träge nach dem Standby. Wenn ich morgens das Tablet aus dem Standby hole ist die Anzeige zwar sofort da, aber mit den alten Readigns vom Vortag und es dauert bis zu 15min bis alle Readings aktualisiert wurden. Longpoll ist natürlich aktiviert. Wie kann ich das automatisiert beschleunigen?

Wenn ich ein Reload der Seite mache, was man ja von fhem aus mit Webviewcontrol initiieren könnte, dauert der Aufbau der Seite recht lange und manchmal wird die Seite nicht korrekt aufgebaut und muss noch einmal manuell gereloaded werden.

Ich würde also gerne alle Readings nach Standby sofort aktualisieren ohne Reload der Seite. Gibt es da eine Möglichkeit automatisiert über Webviewcontrol (z.b. durch kurzzeitiges Setzen von shortpoll)?

[Haecksler]

@Setstate
Ich würde gerne mit dem Range-widget die Heizzeiten meiner Heizung visualisieren.
Gibt es eine Möglichkeit das Range-widget horizontal darzustellen ?
Weiterhin wäre es schön, wenn man 2 Bereiche darstellen könnte. Siehst du da eine Möglichkeit das so zu realisieren?

Danke schon mal im voraus!

Gruß,
Stefan

[bmwfan]

Zurück zum Tablet für die Visualisierung. Ich habe mir jetzt nach ausführlichem Studium der Vorschläge - mein Dank dafür - für ein HANNSpad 13,3" (SN14T72) entschieden. Scheint mir für meinen Bedarf ausreichend groß zu sein und hatte für mich die Vorteile:
Großes und gutes Display
Sehr dünn, da ich es an die Wand machen möchte
Hat alles notwendige eingebaut, aber nichts überflüssiges
Kann ich auch mit in den Urlaub nehmen oder als normales Tablet verwenden

Ich habe allerdings auch Rezensionen gefunden, die über schlechten WLAN-Empfang bei einigen Geräten berichten. Mal sehen, wie meines dann ist. Meine Auswahlübersicht stelle ich hier hinein, da sie vielleicht auch anderen bei der Auswahl hilft. Ich erhebe keinen Anspruch auf Vollständigkeit, ebenso keine Gewähr auf die Richtigkeit der Angaben.

@Tommy82: Mir hat Deine Visualisierung sehr gut gefallen und ich würde gerne etwas ähnliches erstellen. Könntest Du mir vielleicht Deine Konfiguration zur Verfügung stellen, damit ich nicht alles neu von 0 an aufsetzen muss? Ändern ist immer einfacher und schneller als neu erstellen. Wie hast Du die Wandhalterung gelöst?

Viele Grüße
Jürgen

[setstate]

@Setstate
Ich würde gerne mit dem Range-widget die Heizzeiten meiner Heizung visualisieren.
Gibt es eine Möglichkeit das Range-widget horizontal darzustellen ?
Weiterhin wäre es schön, wenn man 2 Bereiche darstellen könnte. Siehst du da eine Möglichkeit das so zu realisieren?

Klingt realisierbar ... eher eine Fleißarbeit
Es sind ja auch noch ein paar Anforderungen offen in Richtung der Skalierung.

Wie sind die zwei Bereiche im FHEM definiert? n-fache Readings (Start_0, End_0, Start_1, End_1) oder als Array, mit Startpunkt und Endpunkt im Wechsel

[Haecksler]

Klingt realisierbar ... eher eine Fleißarbeit
Es sind ja auch noch ein paar Anforderungen offen in Richtung der Skalierung.

Wie sind die zwei Bereiche im FHEM definiert? n-fache Readings (Start_0, End_0, Start_1, End_1) oder als Array, mit Startpunkt und Endpunkt im Wechsel

Also ich bin da offen, wäre es nicht am einfachste ein Array zu machen.
Ich hatte mir das so vorgestellt ich mache mir Dummies mit denen ich die Schaltzeiten an einen Weekdaytimer weitergebe...dann würde ich noch ein userReading machen, welches die Uhrzeit in eine Kommazahl also aus 12:30 wird 12,5 umsetzt, dieses  Reading würde dann ins Array vom Range-Widget kommen. Also immer 2 Zahlenpaare im Array für einen Bereich.

[persching]

Hallo zusammen,
ich habe diese Woche das Tablet UI für mich entdeckt. Das ist genau das was ich gesucht hatte. Leider bekomme ich das irgendwie nicht hin mit der Umsetzung. Ich hatte mal all meine MAX Thermostate in die index.html eingefügt und das hat soweit auch funktioniert. Das war aber nur mal als erster Trail-and-Error versuch. Ich hab mir dann die Beispiel UIs angesehen und bemerkt, dass der Aufbau sich grundlegend unterscheidet. Es wird nicht alles in die index.html gepackt, sondern in einzelne htmls. Leider komme ich damit überhaupt nicht klar. Ich schaffe es noch nicht mal die Uhrzeit in einem Feld anzeigen zu lassen. Ich dachte eigentlich, dass das nicht so schwierig sein könnte. Wenn ich dann ein komplettes Beispiel importiere, dann funktioniert es auch nicht, weil dann die ganzen Daten aus FHEM fehlen. Kürze ich das auf 2 Felder, dann sind die einfach nur grau und im Hintergrund sieht man noch das FHEM Logo von der normalen Ansicht.
Lange Reder, kurzer Sinn: gibt es irgendwo ein Howto, Tutorial oder sonst irgendwas, wie man sich da einarbeiten kann??

Gruß persching

[setstate]

Auf voizchat.de gibt es da was:

http://voizchat.de/fhem-tutorial-serie-teil-5-tablet-ui-installieren-und-konfigurieren/

https://www.youtube.com/watch?v=vlJOol0C-Yg

https://www.youtube.com/watch?v=vlJOol0C-Yg

Vielen Dank dafür an Jan! 

[cotecmania]

Hallo,

hat schon jemand die Funksteckdosen PCA301 sauber mit dem Tablet-UI visualisiert ?
Ich hätte gern einen Button mit Label und der Anzeige der aktuellen Leistung. Und das ganze sehr kompakt.
Durch die variierende Anzahl der Stellen bei der Leistungsanzeige verschiebt sich bei mir immer alles.
Jemand ne Idee oder fertiges Widget fur PCA301 ?

Gruss
Joe

[waschbaerbauch]

Ich hab das für mich so umgesetzt. Einmal mit Harmony Hub als Schalter inkl. PCA301 Energiewerte und einmal PCA301 komplett. Ist natürlich auch erweiterbar.

Code Auswählen Erweitern

<li data-row="3" data-col="8" data-sizex="1" data-sizey="1">
<header>KODI</header>
<div class="container">
<div data-type="switch"
data-device="PCA301.09"
data-icon="fa-power-off"
class="cell">
</div>
<div data-type="label" class="">RPi2 OpenElec<br>Aktueller Verbrauch</div>
<div data-type="label" data-device="PCA301.09" data-get="power" data-unit="W" class=""></div>
</div>
</li>

<li data-row="3" data-col="9" data-sizex="1" data-sizey="1">
        <header>AV-Receiver</header>
        <div class="container">
        <div data-type="switch"
data-device="harmony_31688040"
data-get="STATE"
data-set-on="PowerOn"
data-get-off="PowerOff"
data-icon="fa-power-off"
class="cell"></div>
        <div data-type="label" class="">Denon AVR-X4000<br>Aktueller Verbrauch</div>
        <div data-type="label" data-device="PCA301.18" data-get="power" data-unit="W" class=""></div>
</div>
</li>


[setstate]

Stellen nach den Komma kann man begrenzen. Wenn dann das Label noch genügend Platz hat, sollte es doch funktionieren. Vermeid sollte man, dass solche Objekte mit variablen Breite zu eng mit anderen Objekten in einer Zeile zu positionieren. Solch einem Label würde ich eine eigene Zeile spendieren oder eine feste Breite durch Anlegen von Columns (siehe col-1-2).
Da gibt es viele Möglichkeiten.
Zur Not poste mal das entsprechende Gridster Element, was dir Ärger bereitet.

[Spartacus]

Moin zusammen,
habe jetzt das TABLET-UI insalliert und auch schon die Uhr einbinden können.
Da ich noch nicht viel Erfahrung habe:
An welcher Schraube muss ich drehen, um die Ziffern der Uhrzeit zu vergrößern und die Farbe anzupassen!

Danke und Gruß,
Spartacus.

[setstate]

Moin zusammen,
habe jetzt das TABLET-UI insalliert und auch schon die Uhr einbinden können.
Da ich noch nicht viel Erfahrung habe:
An welcher Schraube muss ich drehen, um die Ziffern der Uhrzeit zu vergrößern und die Farbe anzupassen!

Danke und Gruß,
Spartacus.

Durch Hinzufügen von vordefinierten CSS Klassen

Code Auswählen Erweitern


           <div data-type="clock" data-format="H:i" class="large"></div>
           <div data-type="clock" data-format="d.n.Y" class="small blue"></div>


https://github.com/knowthelist/fhem-tablet-ui/blob/master/README.md#format

[Spartacus]

Hallo setstate,
danke für die schnelle Antwort und sorry, wenn ich so doofe Fragen stelle.
Das mit den Klassen funktioniert. Allerdings wird bei "large" die Uhr kleiner anstatt größer:

Ich habe die Zeit jetzt eingefärbt, das ist auch ok so. Aber eigentlich wollte ich die als eigenen Screen über fast die ganze Fläche des Displays laufen lassen. Quasi als Anzeige im Schlafzimmer während der Nacht. Kann man das skalieren?

index.html

Code Auswählen Erweitern

<li data-row="1" data-col="2" data-sizex="3" data-sizey="1" data-template="inc_uhr.html"></li>
inc_uhr.html

Code Auswählen Erweitern

<div data-type="clock" data-format="H:i:s" class="blue container bigger"></div>

Danke und Gruß,
Christian