New FHEM Tablet UI

[nesges]

Würdest du für das Mapping auf die Icon-Readings umstellen wollen (z.B. fc0_weatherDay --> fc0_weatherDayIcon)?
Alternativ könnte man auch die Proplanta-Icons direkt verwenden ( data-imageset="proplanta")?

Gute Idee und danke für die beiden Files! Werde ich so integrieren, dann sind die unbekannten Bezeichner nicht mehr so wichtig. Wobei ich die immer noch gerne hätte, damit's vollständig ist

[nesges]

Auf Deutsch gesagt möchte ich, dass beim Status "PapGes" 2 Icons nebeneinenader angezeigt werden.

Ah, Missverständnis. Das geht so leider nicht. Du musst dir das Widget als ein(1) Icon vorstellen, bei dem du nur das Bild austauschst. Was aber geht: Zwei Icons und das zweite hat immer die Farbe des Hintergrunds, ausser im Status "PapGes".

Code Auswählen Erweitern

<div class="inline wider">
    <div data-type="label" class="">Abfallkalender</div>
    <div data-type="symbol"
        data-device="ui_abfallkalender"
        data-get-on='["Papier","Restmuell","Biomuell","GelberSack","PapGeS"]'
        data-icons='["trashcan_ico","trashcan_ico","trashcan_ico","bag","trashcan_ico"]'
        data-on-colors='["#01A3F5","#aa6900","#82550C","#FFFF00","#FFFF00"]'
        class="narrow small"></div>
    <div data-type="symbol"
        data-device="ui_abfallkalender"
        data-get-on="PapGeS"
        data-get-off="!on"
        data-icon="bag"
        data-on-color="#FFFF00"
        data-off-color="#2a2a2a"
        data-off-background-color="#2a2a2a"
        class="narrow small"></div>
</div>

[Haecksler]

Was genau meinst du damit? Grundsätzlich funktioniert die Konfiguration mehrerer Status bei den Symbol, Switch und Button-Widgets gleich. Zum Beispiel:

Code Auswählen Erweitern

<div data-type="switch"
            data-device="TEST"
            data-on-colors='["red","blue","green"]'
            data-get-on='["1","2","3"]'
            data-icons='["fa-bolt","fa-power-off","fa-diamond"]'
        ></div>

Ja genau das wollte ich, funktioniert aber nicht, hier mein Code

Code Auswählen Erweitern

<div data-type="switch"
           data-device="Auto_Ja_SE"
           data-get-on='["AN","AUS_Licht","AUS"]'
           data-icons='["fa-square","fa-square","fa-square"]'
           data-on-colors='["#aa6900","SeaGreen","IndianRed"]'
           class="cell big"
></div>

Es wird immer ein "

Code Auswählen Erweitern

set Auto_Ja_SE AN,AUS_Licht,AUS
oder

Code Auswählen Erweitern

set Auto_Ja_SE off
gesendet.
Eigentlich will ich die 3 Zustände AN, AUS_Licht und AUS beim betätigen des Schalters durchtoggeln.

[nesges]

Würdest du für das Mapping auf die Icon-Readings umstellen wollen (z.B. fc0_weatherDay --> fc0_weatherDayIcon)?
Alternativ könnte man auch die Proplanta-Icons direkt verwenden ( data-imageset="proplanta")?

Bitte einmal diese Version testen: https://github.com/nesges/Widgets-for-fhem-tablet-ui/blob/master/testing/widget_weather.js

Neu:

data-device-type
Mögliche Werte: PROPLANTA, Weather, OPENWEATHER. Wenn nicht gesetzt, wird versucht den Typ aus dem verwendeten Readingnamen zu erschliessen. Relevant ist das Attribut bzw. die automatische Erkennung derzeit nur für PROPLANTA: Wenn beim data-device-type "PROPLANTA" der Wert kein P.-Icon-URL ist, wird die Translationmap nicht verwendet; ansonsten wird der Icon-Dateiname ohne Endung in die Translationmap gegeben.

data-imageset="reading"
Das Imageset "reading" ist ein virtuelles Set. Ist es gesetzt, wird angenommen, dass das Reading einen Icon-URL enthält und dieses direkt angezeigt.


Beispiele:

Code Auswählen Erweitern

<div data-type="weather"
            data-device="WETTER_PROPLANTA"
            data-get="fc0_weatherNightIcon"
            data-imageset="reading"></div>

Zeigt das Proplanta-Icon direkt an.

Code Auswählen Erweitern

<div data-type="weather"
            data-device="TEST"
            data-device-type="PROPLANTA"
            data-imageset="reading"></div>

Zeigt das Proplanta-Icon ebenfalls direkt an; da aber der Readingname keinen Hinweis auf das verwendete Wetter-Modul gibt, muss dem Widget per data-device-type="PROPLANTA" geholfen werden.

[nesges]

Eigentlich will ich die 3 Zustände AN, AUS_Licht und AUS beim betätigen des Schalters durchtoggeln.

Ah, um's senden ging's! Das hatten wir bisher noch nicht, ich hab aber grade ein wenig experimentiert und habe eine erste, experimentelle(!) Version. Probier mal bitte https://github.com/nesges/Widgets-for-fhem-tablet-ui/blob/master/testing/widget_tripush.js aus.

Code Auswählen Erweitern

<div data-type="tripush"
           data-device="Auto_Ja_SE"
           data-get-on='["AN","AUS_Licht","AUS"]'
           data-set-on='["AUS_Licht","AUS","AN"]'
           data-set-off="AUS"
           data-icons='["fa-square","fa-square","fa-square"]'
           data-on-colors='["#aa6900","SeaGreen","IndianRed"]'
           class="cell big"
           ></div>

[Risiko]

Bitte einmal diese Version testen: https://github.com/nesges/Widgets-for-fhem-tablet-ui/blob/master/testing/widget_weather.js

Funktioniert prima.
Nur an die translation map muss man nochmal ran.
Versuche ich heut Abend zu machen.

Risiko.

[Nobby1805]

Nachdem ich jetzt seit ein paar Tagen mit dem Thermostat-Widget rumspiele hätte ich einen Erweiterungswunsch ... falls das schon irgendwie klappt und ich es nur nicht gefunden habe, bitte ich um einen kurzen Hinweis 

Es wäre schön  , wenn man minColor und maxColor beim Aufruf des Widgets angeben könnte. Ich habe das bei mir schon geändert, aber es wäre besser wenn dies eine Erweiterung im Standard ist

Code Auswählen Erweitern

'minColor': $(this).data('mincolor') || getStyle('.thermostat.mincolor','color') ||'#4477ff',
'maxColor': $(this).data('maxcolor') || getStyle('.thermostat.maxcolor','color') ||'#ff0000',


Noch schöner  wäre es, wenn man mehrere Bereiche für den Farbverlauf angeben könnte. Z.B. min-17 = kalt = blau-blaugrün, 17-23 = wohlfühl = blaugrün-gelbgrün, 23-max = zu warm = gelbgrün bis rot

[mc-hollin]

Hallo,
ich wollte mir die Arbeit ein bischen erleichtern und die Seitendefinitionen in eine Konfigurationsdatei auslagern und nur noch die Templates erstellen.
Bei der Suche bin ich auf AngularJS und Angular-Gridster gestossen.
Vorab mal eine Frage: Gibt es einen Grund AngularJS nicht zu nutzen?

Die Neugier brachte mich auf folgenden Stand:
- Es gibt nur noch eine index.html, die die einzelnen Seitendefinitionen aus einer JSON-Datei ausliest. Diese Datei liegt im TabletUI Root-Verzeichnis.
- Ich habe eine eigenen Tag (Directive) "ftui-pagebutton" programmiert, womit ich die einzelnen Seitendefinitionen aus der Config abrufen und darstellen kann
Jetzt müsste noch die Funktionalität von FTUI hier verheiratet werden.
Ich hänge mal ein paar Dateien an. Vielleicht gefällt ja der Ansatz.
Es ist aber wirklich nur absolute Alpha-Version. Reines Interesse an AngularJS.

Die Initialisierung mit InitWidgets funktioniert zur Zeit erst nach einem Wechsel der Seite unten im select.
Ach ja, in den Dateien ist noch das Verzeichnis tabletTest eingetragen. Wollte mir nicht mein FTUI beim Testen zerschiessen.
Sehe gerade das im FF nicht alle Button angezeigt werden. Hab selber im IE getestet.
Wie gesagt, war nur so ne Idee

[Wegwerf]

Code Auswählen Erweitern


<div data-type="switch" data-device="CUL_HM_HM_CC_RT_DN_xxxxx"
        data-get="R-btnLock"
        data-get-on="on"
        data-get-off="off"
        data-set-on="regSet btnLock on"
        data-set-off="regSet btnLock off"
        data-icon="fa-lock" class="cell"></div>


Ich habe genau diesen Switch bei mir so definiert, natürlich mit meinen data-device. Nun ist mir aufgefallen, dass der Status nicht stimmt sobald dieser Switch sich auf einer anderen Unterseite als index.html befindet. die Unterseiten werden durch pagetab referenziert und aufgerufen. Könnte sein dass hier ein Bug versteckt ist? Auf der index.html läuft der Switch problemlos.

[setstate]

Ich habe genau diesen Switch bei mir so definiert, natürlich mit meinen data-device. Nun ist mir aufgefallen, dass der Status nicht stimmt sobald dieser Switch sich auf einer anderen Unterseite als index.html befindet. die Unterseiten werden durch pagetab referenziert und aufgerufen. Könnte sein dass hier ein Bug versteckt ist? Auf der index.html läuft der Switch problemlos.

Schaue ich mir heute Abend gleich an, am Pagetab bin ich eh gerade dran, um 'activate' und 'warn' Funktionalität einzubauen.

Edit: getestet bei mir ... geht. Hast du auf der sekundären Seite auch keine Skripte eingebunden, wie ich? Also nur:
<html>
<title>FHEM</title>
<head>
</head>
<body>

[Nobby1805]

... und schon wieder eine Frage

Ich habe ein Reading das beliebige Texte enthalten kann und mit einem Label ausgegeben wird.
Ich schaffe es aber nicht, die Farbe des Textes in Abhängigkeit des Textes zu verändern ... also z.B. alle Texte die mit OK beginne in grün, alle die mit Warning beginnen in gelb, usw.

[nesges]

Ich habe ein Reading das beliebige Texte enthalten kann und mit einem Label ausgegeben wird.
Ich schaffe es aber nicht, die Farbe des Textes in Abhängigkeit des Textes zu verändern ... also z.B. alle Texte die mit OK beginne in grün, alle die mit Warning beginnen in gelb, usw.

Farben sind im Label bisher nur für numerische Werte in Verbindung mit Limits implementiert. Aber die Idee ist gut!

[tomster]

Ah, Missverständnis. Das geht so leider nicht. Du musst dir das Widget als ein(1) Icon vorstellen, bei dem du nur das Bild austauschst. Was aber geht: Zwei Icons und das zweite hat immer die Farbe des Hintergrunds, ausser im Status "PapGes".

Die Idee ist nicht schlecht, "zerreisst" mir aber das ganze Layout. Danke trotzdem für Dein Hirnschmalz und Code-Beispiel!
Ich hab's grad auch mit einem eigenen Icon versucht, auf dem die beiden Symbole (in meinem Fall bag + trashchan_ico) zusammen abgebildet sind. Das wird dann aber leider zu fuzzelig.
Mal als Vorschlag in die Runde:
Was haltet ihr von ganz dezenten CSS-Animations so wie z.B. auf http://tympanus.net/Tutorials/CSS3RotatingWords/index.html Demo1 oder 2 oder etwas von http://codyhouse.co/demo/animated-headlines/index.html? In unserem Fall sind es ja quasi nur einzelne "Buchstaben", die animiert werden müssten. Ich bin eigentlich kein großer Freund von zuviel Bewegung auf einer Seite, aber allein um des Layouts Willen, würde ich hier Mal eine Ausnahme machen. Beträfe ja (zunächst) nur diejenigen Stati, die eben 2 Icons benötigen...

[setstate]

Ja, das Rotating ist nicht ganz so verkehrt.   
Ich werde mal sehen, ob das einfach einzubauen geht.

[Doggiebert]

Mal ne Frage: kriegt man eigentlich eine readingsHistory auch angezeigt? Da hab ich den Text ja nicht in einem Reading, sondern es wird über einen get-Befehl ausgeliefert.
Ich nehme die readingsHistory her, um diverse (automatisch oder manuell ausgelöste) Vorgänge quasi als high-level-log an die Oberfläche zu bringen.
Aktuell hab ich's so gelöst, dass ich mir den HTML-Text per notify in einen Dummy rüberziehe, und diesen dann in der GUI anzeige - aber vielleicht gibt's ja einen eleganteren Weg, den ich übersehen habe?

PS: NFTUI find ich echt klasse, einfach umzusetzen, sehr aktive Entwicklung, und schaut definitiv besser aus als mein Floorplanversuch - nicht dass man damit nicht auch schöne Sachen hinbringen könnte, wenn man ein Auge dafür hätte...