New FHEM Tablet UI

tomster · 18 Mai 2015, 20:24:03

Yepp, scheint zu gehen. Also, Start und Stop zumindest. Wenn ich auf "Next" klicke, geht Play aber in die off-color...

setstate · 18 Mai 2015, 20:41:21

Bei mir auch

Aber 'next' kommt auch nicht beim MPD an. Mit mpc klappt es.
Im FHEMWEB geht auch kein 'next'

StG (DD) · 18 Mai 2015, 23:17:15

Hallo Mario,

was stimmt hier nicht?

Code Auswählen


<div data-type="symbol" data-device="tmp_heizungskeller" data-get="battery" data-icons='["oa-measure_battery_100","oa-measure_battery_0"]' data-get-on='["1","0"]' data-on-colors='["#8c8c8c","#aa6900"]'></div>

Ist "battery"=1 dann soll er eine volle Batterie in grau anzeigen, wechselt der Status auf 0, soll das Bild auf leere Batterie wechseln und orange werden.

Leider wird eine leere Batterie in Orange angezeigt, obwohl in FHEM der Status 1 ist. Bin gerade ratlos

setstate · 18 Mai 2015, 23:50:03

Zitat von: StG (DD) am 18 Mai 2015, 23:17:15
Hallo Mario,

was stimmt hier nicht?

Code Auswählen Erweitern
<div data-type="symbol" data-device="tmp_heizungskeller" data-get="battery" data-icons='["oa-measure_battery_100","oa-measure_battery_0"]' data-get-on='["1","0"]' data-on-colors='["#8c8c8c","#aa6900"]'></div>

Ist "battery"=1 dann soll er eine volle Batterie in grau anzeigen, wechselt der Status auf 0, soll das Bild auf leere Batterie wechseln und orange werden.

Leider wird eine leere Batterie in Orange angezeigt, obwohl in FHEM der Status 1 ist. Bin gerade ratlos

So einen Fall hatten wir schon einmal: http://forum.fhem.de/index.php/topic,34233.msg290459.html#msg290459

Ursache: Numerischer >= Vergleich gewinnt. Dafür müsste die Reihenfolge aber aufsteigend sein, damit es wie erwartet funktioniert -> also

Code Auswählen


data-get-on='["0","1"]'

oder man forciert RegEx Vergleich, dann ist die Reihenfolge egal

Code Auswählen


data-get-on='["[1]","[0]"]'

StG (DD) · 18 Mai 2015, 23:53:49

Danke Mario, hat funktioniert

viegener · 19 Mai 2015, 00:35:51

Habe ein aufgefrischtes widget_pagetab im alten Posting hochgeladen, dass weiter stabilisiert ist und auch auf Android, iOS8 und Windows mit verschiedenen Browsern getestet ist.

Feedback weiter willkommen,
Johannes

Siehe vorheriges Post:

Zitat von: viegener am 14 Mai 2015, 13:27:30
Ich habe mal mit widget_pagetab herumgespielt und habe eine Lösung gebaut, die bei mir auch beim Refresh die richtige Seite lädt.

Die geänderte widget_pagetab.js anbei, vielleicht kann das ja jemand ausprobieren, der eine komplexere Umgebung hat.

Änderung: 19.5. - Weiter stabilisierte Version

setstate · 19 Mai 2015, 00:55:42

Hallo Johannes,
ich habe den Eindruck, es läuft flotter, aber es werden beim Start und Refresh immer noch zwei Seiten nacheinander geladen. Beim Start zweimal die Index.html. Kann man da noch was optimieren?

DanHard · 19 Mai 2015, 17:46:44

Hallo Zusammen

Einfach geniale Sache was hier mit dem neuen UI so abgeht,
Kompliment an die Ersteller!

Momentan bin ich dran mein altes UI auf das FHEM Tablet UI umzuschreiben.
Fast alles habe ich geschafft, nur eines liegt mir noch auf dem Herzen.

Ich habe in FHEM den Abfallkalender von hexenmeister.
http://forum.fhem.de/index.php/topic,32382.0.html

Leider weis ich nicht wie ich diesen ins neue UI integrieren kann.
Kann mir da vielleicht jemand helfen?

Danke vielmals und Gruss

bjoernbo · 19 Mai 2015, 18:50:08

Daran bin ich auch gescheitert. letztenendes habe ich mir in Google solch einen Kalender angelegt und diesen via URL direkt im UI eingebunden. Das hat zudem noch den Vorteil, dass wenn es sich um einen abonnierten-Kalender handelt dieser auch automatisch aktualisiert wird !

DanHard · 19 Mai 2015, 18:52:12

Zitat von: bjoernbo am 19 Mai 2015, 18:50:08
Daran bin ich auch gescheitert. letztenendes habe ich mir in Google solch einen Kalender angelegt und diesen via URL direkt im UI eingebunden. Das hat zudem noch den Vorteil, dass wenn es sich um einen abonnierten-Kalender handelt dieser auch automatisch aktualisiert wird !

Ist auch eine gute Lösung.
Aber die mit der ReadingsGroup finde ich einfach eleganter.
Eventuell hat ja noch jemand anders eine Idee wie man das anpacken könnte.

tomster · 19 Mai 2015, 19:28:27

Ich hab doch meine Lösung zum Abfallkalender gestern hier im Thread gepostet:
http://forum.fhem.de/index.php/topic,34233.msg295617/topicseen.html#msg295617

Oder wolltest Du etwas anderes?

DanHard · 19 Mai 2015, 22:07:57

Zitat von: tomster am 19 Mai 2015, 19:28:27
Ich hab doch meine Lösung zum Abfallkalender gestern hier im Thread gepostet:
http://forum.fhem.de/index.php/topic,34233.msg295617/topicseen.html#msg295617

Oder wolltest Du etwas anderes?

Habe mir jetzt diese Lösung auch mal eingerichtet.
Das gute an dem ReadingsGroup war eben das ich nicht nur gesehen habe was am nächsten Tag
passiert sondern auch was in den nächsten 7 Tagen so los ist. Daher ist diese Lösung für mich noch nicht perfekt.

bjoernbo · 20 Mai 2015, 06:09:42

Durch die DEMO-Version von nesges habe ich mich im Bezug auf die Multimedia inspirieren lassen und für meine VU+Duo2 (Sat-Reciever) eine vollständige Fernbedienung abgebildet. Für die Steuerung kommt ein HUB der Fa. Harmony in Einsatz. Da es aber immer Ewigkeiten gedauert hat bis sich der HUB mit einem iPhone verbunden hat ist somit ein nettes Feature in UI entstanden. Meine Frau ist begeistert und somit werde ich in kürze noch eine "Smartphone-Varinate" erstellen. Den Code stelle ich gerne zur Verfügung:

Zitat<li data-row="1" data-col="2" data-sizex="1" data-sizey="1">
<header>1</header>
<img src="img/senderlogos/Das-Erste-HD.png" height="80" wight="80" class="top-space" onclick="setFhemStatus('set hub command 24775848 Number1')"></img>
</li>

<li data-row="1" data-col="3" data-sizex="1" data-sizey="1">
<header>2</header>
<img src="img/senderlogos/ZDF-HD.png" height="80" wight="80" class="top-space" onclick="setFhemStatus('set hub command 24775848 Number2')"></img>
</li>
<li data-row="1" data-col="4" data-sizex="1" data-sizey="1">
<header>3</header>
<img src="img/senderlogos/WDR-HD.png" height="80" wight="80" class="top-space" onclick="setFhemStatus('set hub command 24775848 Number3')"></img>
</li>
<li data-row="1" data-col="5" data-sizex="1" data-sizey="1">
<header>4</header>
<img src="img/senderlogos/RTL-HD.png" height="80" wight="80" class="top-space" onclick="setFhemStatus('set hub command 24775848 Number4')"></img>
</li>
<li data-row="1" data-col="6" data-sizex="4" data-sizey="4">
<header>VU+ duo2</header>
<div class="center"><br>
<div data-type="button"
data-fhem-cmd="set hub command 24775848 Rewind"
data-icon="font1-backward2"
data-on-background-color="rgb(150, 150, 136)"
class="cell">
</div>
<div data-type="button"
data-fhem-cmd="set hub command 24775848 Pause"
data-icon="font1-pause2"
data-on-background-color="rgb(150, 150, 136)"
class="cell">
</div>
<div id="" data-type="button" data-fhem-cmd="set hub command 24775848 Play"data-icon="font1-play3" data-on-background-color="rgb(150, 150, 136)" class="cell"></div>
<div id="" data-type="button" data-fhem-cmd="set hub command 24775848 Stop" data-icon="font1-stop2" data-on-background-color="rgb(150, 150, 136)" class="cell"></div>
<div id="" data-type="button" data-fhem-cmd="set hub command 24775848 Record" data-icon="fa-circle" data-on-color="red" data-on-background-color="rgb(150, 150, 136)" class="cell"></div>
<div id="" data-type="button" data-fhem-cmd="set hub command 24775848 FastForward" data-icon="font1-forward3" data-on-background-color="rgb(150, 150, 136)" class="cell"></div><br><br><hr>
</div>
<div style="margin-top:18px" class="center">
<div id="" data-type="button" data-fhem-cmd="set hub command 24775848 Exit" data-icon="font1-exit" data-on-background-color="rgb(170,105,0)" class="cell"></div>
<div id="" data-type="button" data-fhem-cmd="set hub command 24775848 VolumeUp" data-icon="font1-volume-increase" data-on-background-color="rgb(170,105,0)" class="cell"></div>
<div id="" data-type="button" data-fhem-cmd="set hub command 24775848 DirectionUp" data-icon="fa-angle-up" data-on-background-color="#2E8AE6" class="cell"></div>
<div id="" data-type="button" data-fhem-cmd="set hub command 24775848 ChannelUp" data-icon="fa-plus" data-on-background-color="rgb(170,105,0)" class="cell"></div>
<div id="" data-type="button" data-fhem-cmd="set hub command 24775848 Guide" data-icon="fa-th-list" data-on-background-color="rgb(170,105,0)" class="cell"></div>
</div>
<div class="center">
<div id="" data-type="button" data-fhem-cmd="set hub command 24775848 DirectionLeft" data-icon="fa-angle-left" data-on-background-color="#2E8AE6" class="cell"></div>
<div id="" data-type="button" data-fhem-cmd="set hub command 24775848 Select" data-icon="fa-check-circle" data-on-background-color="#0066FF" class="cell"></div>
<div id="" data-type="button" data-fhem-cmd="set hub command 24775848 DirectionRight" data-icon="fa-angle-right" data-on-background-color="#2E8AE6" class="cell"></div>
</div>
<div class="center">
<div id="" data-type="button" data-fhem-cmd="set hub command 24775848 VolumeDown" data-icon="font1-volume-decrease" data-on-background-color="rgb(170,105,0)" class="cell"></div>
<div id="" data-type="button" data-fhem-cmd="set hub command 24775848 DirectionDown" data-icon="fa-angle-down" data-on-background-color="#2E8AE6" class="cell"></div>
<div id="" data-type="button" data-fhem-cmd="set hub command 24775848 ChannelDown" data-icon="fa-minus" data-on-background-color="rgb(170,105,0)" class="cell"></div><br>
<div id="" data-type="button" data-fhem-cmd="set hub command 24775848 Mute" data-icon="font1-volume-mute2" data-on-background-color="rgb(170,105,0)" class="cell"></div>
</div><hr>

<div style="margin-top:30px" class="center">

<div id="" data-type="button" data-fhem-cmd="set hub command 24775848 Red" data-icon="fa-minus-circle" data-on-background-color="red" class="cell"></div>
<div id="" data-type="button" data-fhem-cmd="set hub command 24775848 Green" data-icon="fa-minus-circle" data-on-background-color="green" class="cell"></div>
<div id="" data-type="button" data-fhem-cmd="set hub command 24775848 Yellow" data-icon="fa-minus-circle" data-on-background-color="yellow" class="cell"></div>
<div id="" data-type="button" data-fhem-cmd="set hub command 24775848 Blue" data-icon="fa-minus-circle" data-on-background-color="blue" class="cell"></div>

</div>
<div data-type="circlemenu" class="cell circlemenu top-space" data-circle-radius="85">
<ul>
<li><div data-type="symbol"
data-icon="fa-th"
data-on-background-color="rgb(150, 150, 136)"
data-off-background-color="rgb(150, 150, 136)"
data-on-color="rgb(255,255,255)"
data-off-color="rgb(255,255,255)"
data-background-icon="fa-circle">
</div>
</li>
<li>1<div data-type="button"
data-fhem-cmd="set hub command 24775848 Number1">
</div></li>
<li>2<div data-type="button"
data-fhem-cmd="set hub command 24775848 Number2">
</div></li>
<li>3<div data-type="button"
data-fhem-cmd="set hub command 24775848 Number3">
</div></li>
<li>4<div data-type="button"
data-fhem-cmd="set hub command 24775848 Number4">
</div></li>
<li>5<div data-type="button"
data-fhem-cmd="set hub command 24775848 Number5">
</div></li>
<li>6<div data-type="button"
data-fhem-cmd="set hub command 24775848 Number6">
</div></li>
<li>7<div data-type="button"
data-fhem-cmd="set hub command 24775848 Number7">
</div></li>
<li>8<div data-type="button"
data-fhem-cmd="set hub command 24775848 Number8">
</div></li>
<li>9<div data-type="button"
data-fhem-cmd="set hub command 24775848 Number9">
</div></li>
<li>0<div data-type="button"
data-fhem-cmd="set hub command 24775848 Number0">
</div></li>
</ul>
</div>
</li>

</li>
<li data-row="2" data-col="2" data-sizex="1" data-sizey="1">
<header>5</header>
<img src="img/senderlogos/Sat.1-HD.png" height="80" wight="80" class="top-space" onclick="setFhemStatus('set hub command 24775848 Number5')"></img>
</li>
<li data-row="2" data-col="3" data-sizex="1" data-sizey="1">
<header>6</header>
<img src="img/senderlogos/VOX-HD.png" height="80" wight="80" class="top-space" onclick="setFhemStatus('set hub command 24775848 Number6')"></img>
</li>
<li data-row="2" data-col="4" data-sizex="1" data-sizey="1">
<header>7</header>
<img src="img/senderlogos/Pro7-HD.png" height="80" wight="80" class="top-space" onclick="setFhemStatus('set hub command 24775848 Number7')"></img>
</li>
<li data-row="2" data-col="5" data-sizex="1" data-sizey="1">
<header>8</header>
<img src="img/senderlogos/kabel-eins-HD.png" height="80" wight="80" class="top-space" onclick="setFhemStatus('set hub command 24775848 Number8')"></img>
</li>
<li data-row="3" data-col="2" data-sizex="1" data-sizey="1">
<header>9</header>
<img src="img/senderlogos/N24-HD.png" height="80" wight="80" class="top-space" onclick="setFhemStatus('set hub command 24775848 Number9')"></img>
</li>
<li data-row="3" data-col="3" data-sizex="1" data-sizey="1">
<header>10</header>
<img src="img/senderlogos/n-tv-hd.png" height="80" wight="80" class="top-space" onclick="setFhemStatus('set hub command 24775848 Number10')"></img>
</li>
<li data-row="3" data-col="4" data-sizex="1" data-sizey="1">
<header>11</header>
<img src="img/senderlogos/ZDFinfo-HD.png" height="80" wight="80" class="top-space" onclick="setFhemStatus('set hub command 24775848 Number17')"></img>
</li>
<li data-row="3" data-col="5" data-sizex="1" data-sizey="1">
<header>12</header>
<img src="img/senderlogos/RTL2-HD.png" height="80" wight="80" class="top-space" onclick="setFhemStatus('set hub command 24775848 Number18')"></img>
</li>
<li data-row="4" data-col="3" data-sizex="1" data-sizey="1">
<header>SKY Bundesliga HD</header>
<div data-type="circlemenu" class="cell circlemenu top-space" data-circle-radius="85">
<ul>
<li><div data-type="symbol"
data-icon="font1-tv"
data-on-background-color="rgb(111,69,120)"
data-off-background-color="rgb(111,69,120)"
data-on-color="rgb(255,255,255)"
data-off-color="rgb(255,255,255)"
data-background-icon="fa-circle">
</div>
</li>
<li><div data-type="push"
data-on-color="white"
data-cmd="set hub command 24775848 Number5;set hub command 24775848 Number6"
data-icon="">1</div></li>
<li><div data-type="push"
data-on-color="white"
data-cmd="set hub command 24775848 Number5;set hub command 24775848 Number7"
data-icon="">2</div></li>
<li><div data-type="push"
data-on-color="white"
data-cmd="set hub command 24775848 Number5;set hub command 24775848 Number8"
data-icon="">3</div></li>
<li><div data-type="push"
data-on-color="white"
data-cmd="set hub command 24775848 Number5;set hub command 24775848 Number9"
data-icon="">4</div></li>
<li><div data-type="push"
data-on-color="white"
data-cmd="set hub command 24775848 Number6;set hub command 24775848 Number0"
data-icon="">5</div></li>
<li><div data-type="push"
data-on-color="white"
data-cmd="set hub command 24775848 Number6;set hub command 24775848 Number1"
data-icon="">6</div></li>
<li>
<div data-type="push"
data-on-color="white"
data-cmd="set hub command 24775848 Number6;set hub command 24775848 Number2"
data-icon="">7</div>
</li>
<li><div data-type="push"
data-on-color="white"
data-cmd="set hub command 24775848 Number6;set hub command 24775848 Number3"
data-icon="">8</div></li>
<li><div data-type="push"
data-on-color="white"
data-cmd="set hub command 24775848 Number6;set hub command 24775848 Number4"
data-icon="">9</div></li>
<li><div data-type="push"
data-on-color="white"
data-cmd="set hub command 24775848 Number6;set hub command 24775848 Number5"
data-icon="">10</div></li>
</ul>
</div>
</li>

<li data-row="4" data-col="4" data-sizex="1" data-sizey="1">
<header>SKY Sport<br>HD</header>
<div data-type="circlemenu" class="cell circlemenu top-space" data-circle-radius="85">
<ul>
<li><div data-type="symbol"
data-icon="font1-tv"
data-on-background-color="rgb(111,69,120)"
data-off-background-color="rgb(111,69,120)"
data-on-color="rgb(255,255,255)"
data-off-color="rgb(255,255,255)"
data-background-icon="fa-circle">
</div>
</li>
<li><div data-type="push"
data-on-color="white"
data-cmd="set hub command 24775848 Number6;set hub command 24775848 Number6"
data-icon="">1</div></li>
<li><div data-type="push"
data-on-color="white"
data-cmd="set hub command 24775848 Number6;set hub command 24775848 Number7"
data-icon="">2</div></li>
<li><div data-type="push"
data-on-color="white"
data-cmd="set hub command 24775848 Number6;set hub command 24775848 Number8"
data-icon="">3</div></li>
<li><div data-type="push"
data-on-color="white"
data-cmd="set hub command 24775848 Number6;set hub command 24775848 Number9"
data-icon="">4</div></li>
<li><div data-type="push"
data-on-color="white"
data-cmd="set hub command 24775848 Number7;set hub command 24775848 Number0"
data-icon="">5</div></li>
<li><div data-type="push"
data-on-color="white"
data-cmd="set hub command 24775848 Number7;set hub command 24775848 Number1"
data-icon="">6</div></li>
<li>
<div data-type="push"
data-on-color="white"
data-cmd="set hub command 24775848 Number7;set hub command 24775848 Number2"
data-icon="">7</div>
</li>
<li><div data-type="push"
data-on-color="white"
data-cmd="set hub command 24775848 Number7;set hub command 24775848 Number3"
data-icon="">8</div></li>
<li><div data-type="push"
data-on-color="white"
data-cmd="set hub command 24775848 Number7;set hub command 24775848 Number4"
data-icon="">9</div></li>
<li><div data-type="push"
data-on-color="white"
data-cmd="set hub command 24775848 Number7;set hub command 24775848 Number5"
data-icon="">10</div></li>
</ul>
</div>
</li>
</ul>
</div>
</li>

mc-hollin · 20 Mai 2015, 07:53:38

Zitat von: DanHard am 19 Mai 2015, 22:07:57
Habe mir jetzt diese Lösung auch mal eingerichtet.
Das gute an dem ReadingsGroup war eben das ich nicht nur gesehen habe was am nächsten Tag
passiert sondern auch was in den nächsten 7 Tagen so los ist. Daher ist diese Lösung für mich noch nicht perfekt.

Hallo,
ich nutze für den Abfallkalender folgendes Script in FHEM:
http://forum.fhem.de/index.php/topic,24646.msg293851.html#msg293851
Als Datensource hole ich mir die ICS Datei meines Abfallentsorgers.
Das Script berechnet die Tage bis zur Leerung und diese zeige ich im UI als Bag-Symbol mit warn an.
Also alle Tonnen als Übersicht. Somit kann ich auch doppelte Leerungen sehen.
Das Symbol wird bei <= 1Tag als blinkend angezeigt.

Hier mein FTUI-Code des Abfalltemplates:

Code Auswählen


<header>Abfall</header>
<div data-type="symbol" data-background-icon="fa-circle-thin " data-off-background-color="white" data-on-background-color="white" data-device="Gelbetonne" data-get='STATE' data-off-color="yellow" data-get-on='["off","^[01]$","^[1-9][0-9]|[2-9]$"]' data-icons='["fa-trash warn","fa-trash warn blink","fa-trash warn"]' data-on-colors='["yellow","yellow","yellow"]' class="bigger"></div>
<div data-type="symbol" data-background-icon="fa-circle-thin " data-off-background-color="white" data-on-background-color="white" data-device="Biomuell" data-get='STATE' data-off-color="#996633" data-get-on='["off","^[01]$","^[1-9][0-9]|[2-9]$"]' data-icons='["fa-trash warn","fa-trash warn blink","fa-trash warn"]' data-on-colors='["#996633","#996633","#996633"]' class="bigger"></div>
<div data-type="symbol" data-background-icon="fa-circle-thin " data-off-background-color="white" data-on-background-color="white" data-device="Papiertonne" data-get='STATE' data-off-color="green" data-get-on='["off","^[01]$","^[1-9][0-9]|[2-9]$"]' data-icons='["fa-trash warn","fa-trash warn blink","fa-trash warn"]' data-on-colors='["green","green","green"]' class="bigger"></div>
<div data-type="symbol" data-background-icon="fa-circle-thin " data-off-background-color="white" data-on-background-color="white" data-device="Restmuell" data-get='STATE' data-off-color="grey" data-get-on='["off","^[01]$","^[1-9][0-9]|[2-9]$"]' data-icons='["fa-trash warn","fa-trash warn blink","fa-trash warn"]' data-on-colors='["gray","gray","gray"]' class="bigger"></div>

Ich nutze die Off-Werte, da ich hier in der Umgebung keinen Zugriff auf FHEM habe.

@setstate
Wäre es eigentlich auch möglich einen Defaultwert anzugeben für den Fall, dass keine Verbindung zum FHEM besteht?
Damit auch die warn-werte zum Testen angezeigt werden.

update:
Hab gerade gesehen, dass fa-trash als icon auch gut aussieht!

setstate · 20 Mai 2015, 08:08:37

@bjoernbo: Respekt! Sehr, sehr fleißig!

Das kann ich doch gleich mal als meine erste zusätzliche Seite übernehmen, für den VU+Solo2 müsste das doch auch passen.
Nur werde ich die Steuerung per Enigma2 Modul machen und die Farben etwas dezenter ( zu bonbonfarben für meinen Geschmack

New FHEM Tablet UI

mc-hollin