New FHEM Tablet UI

[setstate]

Wollte ich auch gerade schreiben: 
data-get="state"
weglassen

[danieljo]

@nesges @setstate : Ich habe jetzt date-get="state" weggelassen. Aber ein Erfolg kann ich damit nicht verzeichnen.

[hankman]

@setstate

Vielen Danke, der Tipp mit dem Button hat mir super geholfen.

zur Vollständigkeit hier mein funktionierender Code:

Code Auswählen Erweitern


<div data-type="button" data-fhem-cmd="set+LED_KZi+HSV+60%2C0%2C100+%3B+set+LED_KZi+HSV+240%2C100%2C0+40+q"
                        data-icon="fa-sun-o"
                        >
                </div>
                <div data-type="label" class="cell">Sonnenuntergang</div>

               <div data-type="button" data-fhem-cmd="set+LED_KZi+HSV+240%2C100%2C0++%3B+set+LED_KZi+HSV+60%2C0%2C100+40+q"
                        data-icon="fa-sun-o"
                        >
                </div>
                <div data-type="label" class="cell">Sonnenaufgang</div>


Vielen Dank für die schnelle Hilfe.

[setstate]

@nesges @setstate : Ich habe jetzt date-get="state" weggelassen. Aber ein Erfolg kann ich damit nicht verzeichnen.

Dann weiß ich auch nicht mehr weiter (mit Ferndiagnose)
Ich habe den Code bei mir mit einem Dummy getestet -> geht.
Es war zwar noch data-icons (Array) und nur ein String statt eines Array angegegeben, weshalb dann auch nur das Defalt-Icon 'Fenster' angezeigt wurde, aber es schaltete um.

Funktionierender Code in Dual State Notation:

Code Auswählen Erweitern


    <div data-type="symbol"
        data-device="Aquarium_Thermostat"
        data-get-on="on"
        data-get-off="off"
        data-icon="fa-arrow-up"
        data-on-color="IndianRed"
        data-off-color="SeaGreen"
        class="big">
    </div>


In aktueller Multi State Notation (Update von heute) würde es auch so funktionieren:

Code Auswählen Erweitern


    <div data-type="symbol"
        data-device="Aquarium_Thermostat"
        data-states='["on","off"]'
        data-icons='["fa-arrow-up","fa-arrow-down"]'
        data-colors='["IndianRed","SeaGreen"]'
        class="big">
    </div>


Klappen andere Symbol und Switch-Widgets?

[danieljo]

Code Auswählen Erweitern


    <div data-type="symbol"
        data-device="Aquarium_Thermostat"
        data-states='["on","off"]'
        data-icons='["fa-arrow-up","fa-arrow-down"]'
        data-colors='["IndianRed","SeaGreen"]'
        class="big">
    </div>


Klappen andere Symbol und Switch-Widgets?

Mit diesem Code klappt es nun endlich. Warum auch immer aber es klappt. Andere Sachen wie Switches gehen tadellos auch readings aus Temperatursensoren etc. Wind_Direction geht ja auch soweit ohne Probleme.

[matrois]

Das FHEM Tablet UI gefällt mir sehr gut und ich versuche mir gerade eine für mich passende Oberfläche zusammenzubauen.

Bei einer Sache komme ich nicht weiter:
Ich möchte ein Menü in dem mir durch eine andere Farbe des aktuell gedrückten Buttons angezeigt wird auf welcher Seite ich mich befinde. Im Prinzip so wie in diesem Userdemo zu sehen: https://github.com/ovibox/fhem-ftui-user-demos/blob/master/user-demos/Risiko/screenshots/wetter.png

Leider bekomme ich es so nicht hin, da "pagetab" entweder gar nicht oder anders funktioniert als gewollt (es wird nur der Teil hinter "/url/index.html#" geändert und es findet kein richtiger "Seitenwechsel" statt), wenn ich von "famultibutton" auf "pagetab" ändere.

Code Auswählen Erweitern

<div style="font-size:30px; color:rgb(96, 0, 0);" data-url="living.html"
     data-type="famultibutton"
     data-color="#aa6900"
     data-icon="fa-group"
     class="cell small"></div>
Mit den Infos von http://www.fhemwiki.de/wiki/FHEM_Tablet_UI#Beispiel_pagetab komme ich nicht weiter.
Ich bin euch für Tipps zum Widget "Pagetab" daher sehr dankbar. Falls das auch mit anderen Widgets (z.B. famultibutton) funktioniert, mit welchen?

Bei Nutzung von "famultibutton" erscheint der gefärbte Button, den ich haben will - aber leider nur während des Klickens...

[setstate]

Hallo matrois,

hast du dir auch die HTMLs der User-Demos angesehen, die pagetab benutzen?

https://github.com/ovibox/fhem-ftui-user-demos/tree/master/user-demos/Risiko/html

Von dort nimmst du index.html, menu.html und eins, zwei Unterseiten.

Die index.html 'zieht' nur das menu mit den pagetab Knöpfen, der erste wird angewählt (meist main.html).
Das Drücken auf ein Pagetab lädt dann die entsprechende Seite nach, diese haben aber alle wieder ein Abschnitt für die menu.html

Code Auswählen Erweitern

<li data-row="1" data-col="1" data-sizex="1" data-sizey="6" data-template="menu.html"></li>

Ein Pagetab mit farbigen Hintergrund bei angewähltem Zustand sieht so aus:

Code Auswählen Erweitern

<div data-type="pagetab" data-url="main.html"
             data-icon="fa-home"
             data-on-background-color="#CC7A00"
             class="cell big"></div>

famultibutton nimmt man nicht direkt, es ist nur die Basisklasse für andere Widget, wie Switch, Symbol, Pagetab usw.

[chunter1]

Zuerst mal vielen Dank für das rundum gelungene Frontend!!!
Als kompletter Neuling hätte ich zwei Fragen:

1.) Was muss man beim Dimmer Widget hinzufügen, damit der Balken auf den aktuellen, "physikalischen" Dimmer-Wert springt?
2.) Warum updatet das UI manchmal sofort und manchmal erst nach 1 Minute?

LG & Danke

[setstate]

zu1.) man muss dafür einen Readingnamen per data-dim angeben

Code Auswählen Erweitern

<div data-type="dimmer" data-device="HUEDevice1"
     data-get="onoff"
     data-get-on="1" data-get-off="0"
     data-set=""
     data-set-on="on" data-set-off="off"
     data-dim="pct"></div>


[chunter1]

Danke setstate!
Funktioniert jetzt wunderbar

[setstate]

Neu: Im CSS gibt es jetzt ein paar col-*-* Klassen, mit denen man die Positionierung der Widgets einfacher gestalten kann.
Mit class="container" entsteht einen neue Box oder eine neue Reihe, mit class="col-1-3" teilt man die Reihe in ein 1/3 (33,3%) Abschnitt. Weitere Column Unterteilungen sind col-1-3,col-2-3,col-1-2,col-1-4,col-1-8,col-1-5,col-2-5,col-3-5,col-4-5.

Am besten sieht man das an einem Beispiel:

Code Auswählen Erweitern

<li data-row="1" data-col="4" data-sizex="5" data-sizey="3">
   <header>EXAMPLE3</header>
   <div class="container top-space">
        <div class="col-1-2">
            <div class="container top-space">
                <div class="col-1-3">
                    <div data-type="switch" data-device="Switch1" data-icon="fa-music"></div>
                    <div data-type="label" class="">Station1</div>
                </div>
                <div class="col-1-3">
                    <div data-type="switch" data-device="Switch2" data-icon="fa-music"></div>
                    <div data-type="label" class="">Station2</div>
                </div>
                <div class="col-1-3">
                    <div data-type="switch" data-device="Switch3" data-icon="fa-music"></div>
                    <div data-type="label" class="">Station3</div>
                </div>
             </div>
             <div class="container top-space">
                 <div class="col-1-2">
                     <div data-type="symbol" data-device="Switch1" data-icon="fa-battery-4"></div>
                     <div data-type="label" class="">Value1</div>
                 </div>
                 <div class="col-1-2">
                     <div data-type="symbol" data-device="Switch1" data-icon="fa-battery-4"></div>
                     <div data-type="label" class="">Value2</div>
                 </div>
              </div>
        </div>
        <div class="col-1-2">
            <div data-type="volume" data-device='Volume1' class="" ></div>
        </div>
   </div>
</li>


Hier wird auf oberster Ebene der Platz in zwei 50% Spalten eingeteilt -> 2mal <div class="col-1-2">. Die linken 50% werden dann wiederum in zwei Reihen unterteilt mit etwas Abstand nach oben -> 2mal <div class="container top-space">. Die erste Reihe wird dann in drei Spalten unterteilt -> 3mal <div class="col-1-3"> und die zweite Reihe in 2 Spalten -> 2mal <div class="col-1-2">

[chunter1]

zu1.) man muss dafür einen Readingnamen per data-dim angeben

Code Auswählen Erweitern

<div data-type="dimmer" data-device="HUEDevice1"
     data-get="onoff"
     data-get-on="1" data-get-off="0"
     data-set=""
     data-set-on="on" data-set-off="off"
     data-dim="pct"></div>


Ein Problem hab ich noch...
Wie bekommich es hin, dass der runde Button gelb wird wenn irgendein Dim-Wert grüßer 0 oder "on" im status steht bzw. grau wird wenn 0 oder "off" drin steht?

[setstate]

Dann muss man die erlaubten Werte per RegEx angeben:

Code Auswählen Erweitern

data-get-on="[0-9]{1,3}|on"
            data-get-off="off"

Wenn statt bei "off" bei 0 ausgeschaltet signalisiert werden soll, muss für data-get-off auch ein RegEx her und bei data-get-on ausgeklammert werden.

[ChrisK]

Neu: Im CSS gibt es jetzt ein paar col-*-* Klassen, mit denen man die Positionierung der Widgets einfacher gestalten kann.
...

Sieht sehr gut aus, vielen Dank!

Das hilft mir auf jeden Fall weiter, denn ich habe in den letzten Tagen damit rum gespielt und versucht Elemente innerhalb eines Widgets passgenau zu positionieren.
Jetzt brauch ich meine .top-space-17px usw. nicht mehr


Ich habe in den letzten Tagen mit webkitSpeechRecognition gespielt und aktueller Stand ist, dass ich eine Spracherkennung im Browser laufen habe, die permanent zuhört und wenn bestimmte Schlagwörte fallen reagiert.
Das ganze läuft im Moment auf einer eigenständigen Seite und das "permanent Zuhören" hört irgendwann auf, da muss ich noch mit rum spielen.
Der Browser muss webkitSpeechRecognition unterstützen, z.B. Chrome und wenn die Seite nicht unter https läuft, merkt sich der Browser nicht, dass man den Zugriff auf das Mikrofon zugelassen hat (man muss es also bei jeden Neuladen der Seite freigeben).

Z.B. funktioniert "Liebstes Smarthome, schalt mal bitte das Licht im Wohnzimmer an" sehr gut. Die Schlagwörter sind hier "Licht", "Wohnzimmer" und "an". Genau so würde funktionieren: "Yo, mach sofort das Licht im Wohnzimmer an"

Wäre sowas als eigenes js-Modul/Widget für die Tablet-UI interessant? Das frage ich mich vor allem wegen der oben genannten Einschränkungen.
Im Moment ist das sehr spezifisch für meinen Fall, aber das kann man dann bestimmt verallgemeinern.

[matrois]

Hallo matrois,
hast du dir auch die HTMLs der User-Demos angesehen, die pagetab benutzen?
https://github.com/ovibox/fhem-ftui-user-demos/tree/master/user-demos/Risiko/html

Danke für den Tipp. Bei Nutzung der Demovorlagen funktioniert Pagetab. Leider ist dann der "echte Seitewechsel" weg (z.B. habe ich keine Möglichkeit gefunden den Seitentitel oder andere Metadaten zu ändern, weil meines Wissens nach ständig die Seite index.html aktiv bleibt). Das scheint wahrscheinlich auch so gewollt, ist aber nicht die Lösung nach der ich suche. Daher suche ich immer noch nach einer Möglichkeit z.B. über CSS die Icons von Buttons einzufärben.

Diese Lösung (ohne CSS) habe ich bislang gefunden:
Die Datei inc_home.html wird über

Code Auswählen Erweitern

<li data-row="1" data-col="1" data-sizex="1" data-sizey="1" data-template="inc_homebutton.html"></li>
in der index.html eingebunden. Die Datei inc_homebutton.html enthält:

Code Auswählen Erweitern

header>START</header>
<div style="font-size:30px; color:rgb(96, 0, 0);" data-url="index.html"
    data-type="button"
    data-color="#aa6900"
    data-icon="fa-home"
    id="start"
    class="cell small"></div>

Wenn ich die folgenden Attribute hinzufüge kann ich Farbe und Hintergrundfarbe der Icons ändern:

Code Auswählen Erweitern

    data-on-color="#ffffff"
    data-on-background-color="#000000"

Diese Lösung ist für einen einzelnen Button OK, aber ich möchte, dass mir ein ganzes Menü durch Farbänderung anzeigt auf welcher Seite ich mich gerade befinde. Bei einem Menü wäre diese Lösung nur praktikabel (ohne für jeden Menüpunkt eine eigene Menüdatei zu erstellen), wenn ich die Buttons z.B. über CSS "ansprechen" könnte.

Es handelt sich um ein "<i>" Element innerhalb eines "<div> Elementes. Das <div> Element kann ich per ID benennen (s. Beispiel oben #start). Wie kann ich die Attribute "data-on-color" und "data-on-background-color" an untergeordnete Elemente weitergeben?

Hat jemand einen Tipp für mich?