[FHEM-Tablet-UI] User-Demos

[Gunther]

sehr cool. Das wäre super im Wiki-Einstieg!

[MCh76]

wahnsinnig tolle und beindruckende arbeit daniel. respekt und danke für viele ideen.

[hsepm]

Hallo zusammen,

nachdem ich vor vier Wochen mit fhem und ftui angefangen habe und bisher nur stiller Mitleser und Nutznießer von Ideen war, möchte ich nun schrittweise meinen aktuellen Entwicklungsstand vorstellen und bin über Feedback / Verbesserungsvorschläge dankbar.

Mein Haupt-Tablet ist ein Trekstor Surftab Theatre 13.3, welches mit dem im Forum beschriebenen genialen Powermanagement über AMAD und Schaltsteckdose ausgestattet ist.

Fhem steuert Intertechno-Rolloschalter (4x) über das Modul ROLLO, Intertechno Schaltsteckdosen (3x), FS20 Schaltsteckdosen (3x). Hinzu kommen 3 Geräte, die nur über Echo Plus gesteuert werden können (ein Ärgernis, dass man nicht auf die Echo Huebridge zugreifen kann).

Ich habe über ha-bridge alle von fhem verwalteten Geräte, den fhem Homestatus und Tablet an/aus über Alexa schaltbar gemacht, dann klappt auch die Steuerung aller Geräte (fhem und Echo Plus) in Gruppen wieder  , aber nur über Alexa. ("Alexa, Tablet an", "Alexa, Licht aus", "Alexa, Schlafen an") ... Aber zurück zum Thema ...

Mein Tablet UI ist fest auf 1920x1080 Pixel verlötet. An einem Responsive UI für unsere Smartphones und sonstigen Tablets arbeite ich gerade.

Anbei ein Screenshot der Oberfläche des Master-Tablets.

Viele Grüße,
Holger

[hsepm]

Hallo zusammen,

wie versprochen, weitere Infos zu meiner Tablet UI Implementierung.

Ich halte es nicht für sinnvoll, Code-Schnipsel ohne eine Erklärung zu posten, deshalb werde ich zunächst mal meine Vorgehensweise erklären.

Phase 1: Ausprobieren

Ich habe, wie vermutlich alle hier, zunächst einmal eine existierende Implementierung kopiert und angepasst. Diese diente vor allem dazu, die bestehenden ftui Widgets und ihre Eigenarten kennen zu lernen.

Das Ergebnis war eine funktionierende Steuerung, die aber visuell und von der Performance her akut zu wünschen übrig ließ. Wenn man ein großes Tablet hat, ist man versucht, irgendwie alles an Info auf eine Seite zu packen, dabei geht schnell die Übersicht verloren und die Nutzerakzeptanz ist schlecht (Stichwort WAF).

Immerhin hat mir diese Phase die Auslagerung wiederkehrender Steuerelemente in Templates gebracht, so dass der Aufbau eines neuen Look&Feel/Layouts eigentlich ziemlich einfach wird.


Phase 2: Professionelle Entwicklung

Da ich als Projekt- und Programmleiter für Webentwicklungen zuständig bin, kenne ich die "best practices" guter Webentwicklung. Ganz wichtig ist hierbei das Wireframing und User Testing, um mit der Zielgruppe an Hand eines Click-Model/Wireframe die Bedienung zu optimieren. Man erstellt ein Konzept und testet das so lange an den Benutzern oder deren Repräsentanten, bis die Bedienung intuitiv und einfach ist.

Meine Zielgruppe ist klein (meine Frau und ich). Also habe ich ein Basiskonzept erstellt und dieses in mehreren Iterationen an meiner Frau getestet.

Das Basiskonzept (siehe Anhang) enthält:

- Layout mit Menubar (1), Content-Bereich (2) und festem Infobereich (3). Bitte benutzt Pagebutton mit prefetch, Pagetab ist auf langsamen Tablets (wie meinem) einfach gruselig langsam.
- Standardisierte Template-Widgets (Licht, Lichtgruppe, Rollo, Rollogruppe, Status-Symbole, Reisezeiten, Trash/Müll, Telefoneintrag, Wettereintrag, HomeStatus ...)
- Bedienung der Einzelgeräte / Gerätegruppen, Gerätegruppen (a) kennen auch den Status "Mixed=Unknown" mit extra Icon. Im Hintergrund arbeitet hier LightScene.
- Einfachste und elegante Rollo-Steuerung (b) mit Circle-Menu (open, closed, half, Notstop), im Hintergrund arbeitet hier ROLLO. Feinere Rollo-Einstellungen macht Alexa ("Alexa, setze Wohnzimmerfenster 60%")
- Schönes Hintergrundbild, bei mir Denali/Alaska, dazu haben wir einen persönlichen Bezug (bester Urlaub ever) --> CSS-Thema
- Elegante Font-Darstellung (thin) --> CSS-Thema
- Konsistente Farben (Farbgebung mit einem gängigen Color-Tool abgestimmt) --> CSS-Thema

Nachdem das Click-Model "abgenommen" war, war eigentlich nicht mehr viel zu tun außer intensives Testen, da die Template-Widgets direkt im Click-Model eingebaut werden konnten.

Phase 2 hat ganze zwei Tage gedauert, allerdings sind die Pages 2,3,4,6 noch optimierungsbedürftig. Hier sind teilweise iFrames eingebunden (Google Calendar, Enigma, Google Maps, foreca) und daran muss ich definitiv noch arbeiten.

Bis demnächst,
Holger

EDIT 1: Ich hoffe, es ist OK, wenn ich meinen Code schrittweise per Edit anhänge.

A) Ein paar Templates:

Rollogruppe - funktioniert mit einem Gerät vom Typ LightScene Edit: Natürlich müssen die 14 Lichtszenen (außer unknown) auch angelegt werden, Fleißarbeit.

Code Auswählen Erweitern


<div data-type="circlemenu" class="top-space">
<ul>
<li class="">
<div data-type="symbol" class="large"
data-device="par01"
data-get="state"
data-background-icons='["fa-circle", "fa-circle", "fa-circle", "fa-circle", "fa-circle", "fa-circle", "fa-circle", "fa-circle","fa-circle","fa-circle",
"fa-circle", "fa-circle", "fa-circle","fa-circle","fa-circle"]'
data-icons='["oa-fts_shutter_100", "oa-fts_shutter_50", "oa-fts_window_2w", "mi-import_export", "mi-import_export", "mi-border_clear", "mi-pause_circle_outline",
"oa-fts_shutter_10", "oa-fts_shutter_20", "oa-fts_shutter_30", "oa-fts_shutter_40", "oa-fts_shutter_60", "oa-fts_shutter_70", "oa-fts_shutter_80", "oa-fts_shutter_90"]'
data-states='["closed","half","open", "drive-up", "drive-down", "unknown", "stop", "position-10",
"position-20", "position-30", "position-40", "position-60", "position-70", "position-80", "position-90"]'
data-colors='["white","white", "white", "red", "red", "white", "red", "white", "white", "white", "white", "white", "white", "white", "white"]'
data-background-colors='["mint", "mint", "mint", "white", "white", "mint", "white", "mint", "mint", "mint", "mint", "mint", "mint", "mint", "mint"]'>
</div>
</li>
<li>
<div data-type="push" class="large"
data-device="par01"
data-set-on="scene open"
data-get="state"
data-get-on="open"
data-on-color="white"
data-off-color="gray"
data-on-background-color="mint"
data-off-background-color="white"
data-lock="locked"
data-background-icon="fa-circle"
data-icon="oa-fts_window_2w">
</div>
</li>
<li>
<div data-type="push" class="large"
data-device="par01"
data-set-on="scene half"
data-get="state"
data-get-on="half"
data-on-color="white"
data-off-color="gray"
data-on-background-color="mint"
data-off-background-color="white"
data-lock="locked"
data-background-icon="fa-circle"
data-icon="oa-fts_shutter_50">
</div>
</li>
<li>
<div data-type="push" class="large"
data-device="par01"
data-set-on="scene closed"
data-get="state"
data-get-on="closed"
data-on-color="white"
data-off-color="gray"
data-on-background-color="mint"
data-off-background-color="white"
data-lock="locked"
data-background-icon="fa-circle"
data-icon="oa-fts_shutter_100">
</div>
</li>
</ul>
</div>

<div data-type="label" class="top-space-2x left-space bold">Gruppe</div>


Rollo - funktioniert mit einem Gerät vom Typ ROLLO

Code Auswählen Erweitern


<div data-type="circlemenu" class="top-space">
<ul>
<li>
<div data-type="symbol" class="large"
data-device="par01"
data-get="state"
data-background-icons='["fa-circle","fa-circle","fa-circle", "fa-circle", "fa-circle", "fa-circle","fa-circle","fa-circle", "fa-circle", "fa-circle", "fa-circle","fa-circle","fa-circle"]'
data-icons='["oa-fts_shutter_100","oa-fts_shutter_50","oa-fts_window_2w", "oa-fts_shutter_up", "oa-fts_shutter_down", "oa-fts_shutter_10", "oa-fts_shutter_20", "oa-fts_shutter_30", "oa-fts_shutter_40", "oa-fts_shutter_60", "oa-fts_shutter_70", "oa-fts_shutter_80", "oa-fts_shutter_90"]'
data-states='["closed","half","open", "drive-up", "drive-down", "position-10", "position-20", "position-30", "position-40", "position-60", "position-70", "position-80", "position-90"]'
data-colors='["white","white","white", "red", "red", "white", "white", "white", "white", "white", "white", "white", "white"]'
data-background-colors='["mint", "mint", "mint", "white","white", "mint", "mint", "mint", "mint", "mint", "mint", "mint", "mint"]'>
</div>
</li>
<li>
<div data-type="push" class="large"
data-device="par01"
data-set-on="open"
data-get="state"
data-get-on="open"
data-on-color="white"
data-off-color="gray"
data-on-background-color="mint"
data-off-background-color="white"
data-lock="locked"
data-background-icon="fa-circle"
data-icon="oa-fts_window_2w">
</div>
</li>
<li>
<div data-type="push" class="large"
data-device="par01"
data-set-on="half"
data-get="state"
data-get-on="half"
data-on-color="white"
data-off-color="gray"
data-on-background-color="mint"
data-off-background-color="white"
data-lock="locked"
data-background-icon="fa-circle"
data-icon="oa-fts_shutter_50">
</div>
</li>
<li>
<div data-type="push" class="large"
data-device="par01"
data-set-on="closed"
data-get="state"
data-get-on="closed"
data-on-color="white"
data-off-color="gray"
data-on-background-color="mint"
data-off-background-color="white"
data-lock="locked"
data-background-icon="fa-circle"
data-icon="oa-fts_shutter_100">
</div>
</li>
<li>
<div data-type="push" class="large"
data-device="par01"
data-set-on="stop"
data-get="state"
data-get-on="stop"
data-on-color="white"
data-off-color="gray"
data-on-background-color="red"
data-off-background-color="white"
data-background-icon="fa-circle"
data-icon="mi-pause_circle_outline">
</div>
</li>
</ul>
</div>

<div data-type="label" class="top-space-2x left-space thin">par02</div>


EDIT 2 - Mehr Templates

Lichtgruppe - funktioniert mit einem Gerät vom Typ LightScene

Code Auswählen Erweitern


<div data-type="switch" class="large"
data-device="par01"
data-set="scene"
data-set-states='["off","on"]'
data-states='["on","off", "unknown"]'
data-colors='["white","gray", "white"]'
data-background-colors='["yellow","white", "yellow"]'
data-icons='["mi-lightbulb_outline","mi-lightbulb_outline", "mi-border_clear"]'>
</div>

<div data-type="label" class="top-space bold">Gruppe</div>


Licht - funktioniert mit einem an/aus Gerät - Schaltsteckdose, z.B. Intertechno, FS20

Code Auswählen Erweitern


<div data-type="switch" class="large"
data-device="par01"
data-set-states='["off","on"]'
data-states='["on","off"]'
data-colors='["white","gray"]'
data-background-colors='["yellow","white"]'
data-icons='["mi-lightbulb_outline","mi-lightbulb_outline"]'>
</div>

<div data-type="label" class="top-space thin">par02</div>


Homestatus - funktioniert mit einem Dummy namens HomeStatus Edit: Das Dummy steuert, ggf. im Verbund mit anderen Geräten/Events (Helligkeit, Wetter, Sonnenstand, Außentemperatur, Bewölkungsgrad) Licht und Rollos, aber das würde hier zu weit führen...

Code Auswählen Erweitern


<div class="cell">
<table class="top-space" width="100%">
<tr>
<td>
</td>
<td>
<div data-type="symbol" class="bigger"
data-device="HomeStatus"
data-background-icon="fa-circle"
data-states='["Zuhause","Schlafen","Abwesend", ".*"]'
data-icons='["fa-home","fa-bed","fa-automobile","fa-bug"]'
data-colors='["white","white","white","white"]'
data-background-colors='["lightblue","black","gray","gray"]'
data-icon="fa-home">
</div>
</td>
<td>
</td>
</tr>
<tr>
<td width="33%">
<div data-type="push" class="big"
data-device="HomeStatus"
data-set-on="Zuhause"
data-on-color="white"
data-off-color="white"
data-on-background-color="lightblue"
data-off-background-color="white"
data-icon="fa-home">
</div>
<div data-type="label" class="">Zuhause</div>
</td>
<td width="34%">
<div data-type="push" class="big"
data-device="HomeStatus"
data-set-on="Schlafen"
data-on-color="white"
data-off-color="white"
data-on-background-color="black"
data-off-background-color="white"
data-icon="fa-bed">
</div>
<div data-type="label" class="">Schlafen</div>
</td>
<td width="33%">
<div data-type="push" class="big"
data-device="HomeStatus"
data-set-on="Abwesend; set HomeStatus_Auto off"
data-on-color="white"
data-off-color="white"
data-on-background-color="yellow"
data-off-background-color="white"
data-icon="fa-automobile">
</div>
<div data-type="label" class="">Abwesend</div>
<td>
</tr>
</table>
</div>


Reisezeit - funktioniert mit einem Gerät vom Typ TRAFFIC Edit: Natürlich nur mit einem User-Reading "Level", das ist bei mir der Level-of-Service der Route. Die Level 1,2,3 werden in TRAFFIC durch die die aktuelle Reisezeit gesetzt, Beispiel: <=35 Minuten: Level=1 (grünes Auto), <=45 Minuten: Level=2 (gelbes Auto); >45 Minuten: Level=3 (rotes Auto)

Code Auswählen Erweitern


<table width="100%">
<tr>
<td colspan="2">
<div data-type="label" class="thin">par02</div>
</td>
</tr>
<tr>
<td width="30%">
<div data-type="symbol" data-get="Level" class="big compressed"
data-device="par01"
data-states='["1","2","3"]'
data-colors='["mint","yellow", "red"]'
data-background-icon=""
data-icons='["fa-automobile","fa-automobile", "fa-automobile"]'>
</div>
</td>
<td width="70%">
<div data-type="label" data-device="par01" data-get="duration_in_traffic" class="big thin"></div>
<div data-type="label" data-device="par01" data-pre-text="(+" data-post-text=")" data-get="delay" class="thin"></div>
</td>
</tr>
</table>


Status (2 Stati, konfigurierbar über Parameter z.B. für on/off oder present/absent (PRESENCE), benutze ich für an/aus Stati für Internet/WLANs/PC/VU+

Code Auswählen Erweitern


<div data-type="symbol" data-get="par02" class=""
data-device="par01"
data-get-on="par03"
data-get-off="par04"
data-on-color="white"
data-off-color="gray"
data-on-background-color="lightblue"
data-off-background-color="white"
data-background-icon="fa-circle"
data-icons='["par05","par05"]'>
</div>
<div data-type="label" class="thin">par06</div>


Wetter - kann Temperatur und Wettersymbol von verschiedenen Diensten holen, z.B. Temperatur von Wunderground und Wettersymbol von Proplanta

Code Auswählen Erweitern


<ul>
<div data-type="weather" data-device="par01" data-color="par06" data-get="par04" data-imageset="kleinklima" class="cell small narrow"></div>
<div data-type="label" class="cell small par06 top-narrow-2x">par03</div>
<div data-type="label" data-device="par02" data-get="par05" data-unit="%B0C%0A" class="cell bigger thin top-narrow-3x" data-limits='[-50,0]' data-colors='["lightblue","par06"]'></div>
</ul>


Trash - arbeitet mit ABFALL, ich habe 4 Instanzen, für jede Mülltonne eine

Code Auswählen Erweitern


<div data-device="par01" data-type="symbol" class="big thin warn left-narrow-2x right-narrow-2x"
data-get="par01_days" 
data-get-on='["0","2"]'
data-on-colors='["par02","par02"]'
data-icons='["fa-trash-o warn fa-blink","fa-trash-o warn"]'>
</div>


[hsepm]

Wie versprochen, hier die Dateien zu meiner Tablet-UI ^^
Viel Spaß damit 

Hallo Pitcher90,

ich habe dein Mobile UI für meine Haussteuerung angepasst, war kein Problem, ich war im Prinzip in 3 Stunden mit 6 Content-Pages  durch.

Super clean programmiert (HTML5 und CSS), es war eine Freude, das für mich anzupassen.

Daumen hoch.

Gruß,
Holger

[eazy_isi]

Hallo Holger,

ich bin schwer beeindruckt was du in so kurzer Zeit realisiert hast.
Würdest du deinen Code bereitstellen ?

Grüße
Thomas

[M.Piet]

Hallo Holger,

das gefällt mir sehr gut!
Ich habe nur eine Frage: wird an dem Telefonhörer die Anzahl der Anrufe in Abwesenheit angezeigt? Falls ja:
-dürfte ich die HTMLs haben?
-wie bestätigst du die Anrufe, damit dort wieder eine "0" erscheint?

ich danke dir

[Gunther]

da wird sowas wie data-warn="tam1_newMsg" (Reading mit der Anzahl der verpassten Anrufe) drinstehen.

[Fixel2012]

da wird sowas wie data-warn="tam1_newMsg" (Reading mit der Anzahl der verpassten Anrufe) drinstehen.

tam1_newMsg stellt aber nur die aufgezeichneten Anrufe auf dem Anrufbeantworter da?

Wenn jemand vorher auflegt würde das nicht erfasst werden. Ich nutze zudem leider einen externen Anrufbeantworter der noch eine hübsche blinkende Led hat, falls drauf gesprochen wurde. Geht also nicht, da ich den FB AB nicht nutze  - Schade

[Gunther]

Du hast Recht, das ist der AB.
Falls Du hier keine Antwort beskommst, gibt es diverse Threads dazu.

z. B. hier kannst Du mal fragen, die der Anzahl-Dummy gefüllt wird:
https://forum.fhem.de/index.php/topic,54593.msg461698.html#msg461698

[hsepm]

Hallo Holger,

ich bin schwer beeindruckt was du in so kurzer Zeit realisiert hast.
Würdest du deinen Code bereitstellen ?

Grüße
Thomas

Hallo Thomas,

ich war im Urlaub und schaue mal, wann ich den gesamten bereinigten Code bereitstellen kann.

Natürlich ist nichts wirklich absolut neu, hier baut wohl jeder auf Vorarbeiten von anderen auf.

Viele Grüße,
Holger

[hsepm]

Hallo Holger,

das gefällt mir sehr gut!
Ich habe nur eine Frage: wird an dem Telefonhörer die Anzahl der Anrufe in Abwesenheit angezeigt? Falls ja:
-dürfte ich die HTMLs haben?
-wie bestätigst du die Anrufe, damit dort wieder eine "0" erscheint?

ich danke dir

Hallo,

die verpassten Anrufe werden durch einen Dummy hochgezählt, der per AT-Job in der Nacht zurück gesetzt wird. Das habe nicht ich erfunden, sondern ich habe es irgendwoher kopiert, weiß nicht mehr woher.

Gruß,
Holger

[Andre0909]

Da ich mein Foto gerade woanders brauchte stelle ich auch mal meins rein.

Umgesetzte Felder:

Außentemp, Innentemp, Anzeige der nächsten Regenzeit, Uhrzeit mit Sonnenauf und untergang, Anzeige der Waschmaschine + Restzeit, Anzeige von 4 Türsensoren ob offen, gekippt, zu,  eigene Unwetteranzeige mithilfe des UWZ Moduls (aktuell kein Unwetter daher leer), Anzeige der nächsten 3 Kalendereinträge aus Iphone Kalender + Option per Klick die nächsten 15 zu sehen, Modischalter für Hausautomatiken (Licht, Rollos,...), Bahnanzeige, Anzeige Türklingel (wenn jmd klingelt wird die Klingen rol und ein Zähler zählt hoch + Screenshot) diverse Stromschaltungen, eigen kreierter Müllkalender mit Option rausgestellte Mülltonne anzuharken, Kamera.

Alle anderen Unterseiten sind noch Spielerei im Aufbau.

Falls jmd Tipps Tricks braucht, hat oder whatever gerne nachricht

Daneben Schaltet Alexa über eine HA-Bridge die Geräte. Z.B. bei "Alle Geräte aus" werden alle schaltbaren Lichter, meine WLAN-Badradios ausgeschaltet.

[amenomade]

@Andre0909: könntest Du evtl. erklären, wie die Quittierung von Mülltonnen bei dir funktioniert?

[paul79]

Hallo, wer gern die Tagesschau in 100 Sekunden als Popup haben möchte kann dieses mal probieren

In die fhem.cfg:

Code Auswählen Erweitern


define tagesschau HTTPMOD http://www.tagesschau.de/100sekunden/index.html 300
attr tagesschau userattr reading01Name reading01Regex
attr tagesschau enableControlSet 1
attr tagesschau reading01Name video
attr tagesschau reading01Regex twitter:player" content="(https:\/\/[\w_-]+(?:(?:\.[\w_-]+)+)[\w.,@?^=%&:\/~+#-]*)
attr tagesschau room Experiment
attr tagesschau stateFormat video
define notify_tagesschau notify tagesschau:* {tagesschau()}
attr notify_tagesschau room Experiment

In die 99_myUtils.pm:

Code Auswählen Erweitern

sub tagesschau(){

   my $url = ReadingsVal("tagesschau","video","");

open(html1,">/opt/fhem/www/tablet/tagesschau_100sec.html") || "die tagesschau_100sec.html nicht gefunden\n";

print html1 "<!DOCTYPE html>\n<html>\n<head>\n<style type=\"text/css\">\nhtml, body { height: 100%; margin: 0; padding: 0; }\n#map { height: 100%; }\n</style>\n</head>\n<body>\n<iframe src=\"$url\" frameborder=\"0\" webkitAllowFullScreen mozallowfullscreen allowFullScreen width=\"800px\" height=\"450px\"></iframe>\n</body>\n</html>";

close(html1)

}


In Tablet UI:

Code Auswählen Erweitern


<div class="left-space" data-type="popup" data-mode="fade" data-height="600px" data-width="970px">
<div class=""><div data-type="image" data-url="/fhem/tablet/images/tagesschau.png" class="shadow" data-size="95%"></div>
<div class="dialog">
    <header class="large">Tagesschau in 100 Sekunden von <div data-type="label" data-device="tagesschau" data-get="zeit" class=""></div> </header>
<div data-type="iframe" data-device='tagesschau' data-src="tagesschau_100sec.html" data-height="500" data-width="830" class=""></div>
</div>
</div>
</div>

Leider kann der Link nicht direkt aufrufen werden deswegen der Umweg über die 99_myUtils.pm und notify.

Gruß Paul