FTUI version 3

[mr_petz]

So sollte es funzen...

Code Auswählen Erweitern


<ftui-button [value]="HUEGroup2:any_on" states="pct 20, off" shape="circle"
[color]="HUEGroup2:any_on | map('1:brown, 0:dark')"
(value)="HUEGroup2">
</ftui-button>


[yersinia]

Davon ab, eine weitere Frage:
Lassen sich weitere Icons irgendwie nutzen und falls ja, wie ? (z.B. die Font-Awesome Sammlung, auf die man auch in FTUI 2 Zugriff hat).
Hintergrund: mir fehlen so einige Icons, auf die ich nicht mehr verzichten möchte, wie z.B. mehr unterschiedliche Shutter-Status-Icons oder Door-open / -cloed usw.

Schau mal hier: https://forum.fhem.de/index.php/topic,117545.0.html

[Dracolein]

So sollte es funzen...

Code Auswählen Erweitern


<ftui-button [value]="HUEGroup2:any_on" states="pct 20, off" shape="circle"
[color]="HUEGroup2:any_on | map('1:brown, 0:dark')"
(value)="HUEGroup2">
</ftui-button>


Dankeschön, das bringt mich ein Stück weiter.  Das Attribut "states=" war mir nicht bekannt.

.... aber der Knopf mag noch immer nicht so richtig mit Deinem Code.
Einschalten = klappt perfekt
Ausschalten = muss ich 2x betätigen. Er klickert die Reihenfolge von "states" durch, wie ich sehen kann.

[mr_petz]

Dankeschön, das bringt mich ein Stück weiter.  Das Attribut "states=" war mir nicht bekannt.

.... aber der Knopf mag noch immer nicht so richtig mit Deinem Code.
Einschalten = klappt perfekt
Ausschalten = muss ich 2x betätigen. Er klickert die Reihenfolge von "states" durch, wie ich sehen kann.

Du könntest noch das probieren wenn off auch pct 0 =off sein kann:

Code Auswählen Erweitern


<ftui-button [value]="HUEGroup2:any_on" states="20,0" shape="circle"
[color]="HUEGroup2:any_on | map('1:brown, 0:dark')"
(value)="HUEGroup2:pct">
</ftui-button>


Ansonsten musst du mal ein list zeigen...
Ist ein bischen Glaskugel gucken...

[Dracolein]

Du könntest noch das probieren wenn off auch pct 0 =off sein kann:

Code Auswählen Erweitern


<ftui-button [value]="HUEGroup2:any_on" states="20,0" shape="circle"
[color]="HUEGroup2:any_on | map('1:brown, 0:dark')"
(value)="HUEGroup2:pct">
</ftui-button>


Ansonsten musst du mal ein list zeigen...

klappt auch nicht.  HUEGroup2 ist ein ganz langweiliges Device
Das Attribut "any_on" geht auf 1, sobald eine der 4 Birnen leuchtet und damit lässt sich wunderbar der optische Button-Zustand abbilden (klappt ja auch).
Die Lampengruppe schalte ich über "pct".

Das hier ist ein passender Drehknopf, der bereits für stufenlose Einstellung funktioniert:

Code Auswählen Erweitern


                      <ftui-knob has-scale has-arc has-value-text has-needle
                        [(value)]="HUEGroup2:pct" max="100"
                        [color]="HUEGroup2:pct | step('0: light, 1: brown, 70: warning')">
                      </ftui-knob>


Die alten FTUI 2.x Attribute data-set-on="20" data-set-off="0" waren eindeutiger lesbar.
Hier das List:

Code Auswählen Erweitern


Internals:
   DEF        group 2  IODev=deCONZ
   FUUID      5e06744e-f33f-4dec-91b8-5dcfc5ada10e5296
   FVERSION   31_HUEDevice.pm:0.239120/2021-03-08
   ID         G2
   INTERVAL   
   IODev      deCONZ
   NAME       HUEGroup2
   NR         47
   STATE      off
   TYPE       HUEDevice
   desired    0
   lights     6,7,11,12
   name       lampeesstisch
   type       LightGroup
   READINGS:
     2021-11-01 19:52:05   IODev           deCONZ
     2021-11-01 19:52:14   alert           none
     2021-11-01 20:11:58   all_on          0
     2021-11-01 20:11:58   any_on          0
     2021-11-01 19:59:43   bri             50
     2021-11-01 19:52:14   colormode       
     2021-11-01 19:52:14   ct              0
     2021-11-01 19:52:14   effect         
     2021-11-01 20:11:58   onoff           0
     2021-11-01 20:11:58   pct             0
     2021-11-01 19:52:14   reachable       1
     2021-11-01 19:52:14   sat             0
     2021-11-01 20:11:58   state           off
   helper:
     alert      none
     bri        50
     colormode 
     ct         0
     devtype    G
     effect     
     onoff      0
     pct        0
     reachable  1
     sat        0
     state      off
     update_timeout 1
     json:
       etag       f1e5c70db59517735257cc1a35e0baf7
       id         2
       name       lampeesstisch
       type       LightGroup
       action:
         alert      none
         bri        50
         colormode  hs
         ct         0
         effect     none
         hue        0
         sat        0
         scene     
         xy:
           0.312703
           0.328985
       devicemembership:
       lights:
         7
         11
         12
         6
       scenes:
         HASH(0x29c7510)
       state:
     lights:
       11         1
       12         1
       6          1
       7          1
     scenes:
       HASH(0x29c7510)
Attributes:
   IODev      deCONZ
   alias      Esstischlampe
   color-icons 2
   delayedUpdate 1
   devStateIcon {(HUEDevice_devStateIcon($name),"toggle")}
   group      HUEGroup
   room       HUEDevice,Homekit
   userattr   createActionReadings:1,0 createGroupReadings:1,0
   webCmd     pct:toggle:on:off


[mr_petz]

Code Auswählen Erweitern


<ftui-button [(value)]="HUEGroup2:pct" states="20,0" shape="circle"
[color]="HUEGroup2:any_on | map('1:brown, 0:dark')">
</ftui-button>


Dann so. das get brauchst du ja nur für die Farben...

[Dracolein]

Einwandfrei. Danke.

[mr_petz]

...

Das hier ist ein passender Drehknopf, der bereits für stufenlose Einstellung funktioniert:

Code Auswählen Erweitern


                      <ftui-knob has-scale has-arc has-value-text has-needle
                        [(value)]="HUEGroup2:pct" max="100"
                        [color]="HUEGroup2:pct | step('0: light, 1: brown, 70: warning')">
                      </ftui-knob>


.....

Nur eine Frage. Funzt der Knob bei dir mehrfach?
Also kannst du den mehrfach hintereinander hoch und runter "drehen" und werden dann neue Werte gesetzt?
Wenn ja, sag mal bitte deine Systemconfig/Hardware von Fhem. Hintergrund ist folgender:
Bei manchen funzt das drehen nur einmal oder zweimal und ich suche da den Grund warum...

[Dracolein]

Ich muss es heute nochmal vor Ort genauer prüfen für Dich, da ich gestern physisch eine Etage höher saß, wie die Deckenlampe zum zugehörigen Knopf.
Aber rein von der Anzeige des Drehknopfes schien es zu funktionieren, also ich konnte problemlos die Lampe von Null auf z.B. 20% hochdrehen, danach weiterdrehen auf z.B. 60& und sie auch wieder ganz abschalten.

Mein FHEM läuft auf einem raspberry Pi 4 2GB mit Raspbian & aktiver GUI. FTUI läuft fullscreen lokal am angeschlossenen 15" Touchscreen im Chromebrowser



edit:
nachgetestet, der Drehregler funktioniert zuverlässig auch mehrfach direkt hintereinander. Habe keine Schwierigkeiten.

[Wolfgang Hochweller]

Hier noch mal ein Beispiel fuer reelle Zahlen :

Code Auswählen Erweitern


<ftui-label [text]="MQTT2_ams:diffVerbrauch | multiply(.01)" size="10" decimals="1" class="bold" color="red"></ftui-label>



Ausgangswert : 482
Ergebnis, siehe Bild , rechts unten.

Auffallen tut es eigentlich nur, weil 'decimals'   keine Funktion hat.
 

[setstate]

das ist ein Javascript Rundungsfehler.

Am besten du machst noch ein  | fix(1) hinter das multiply

Oder nur mit Integer arbeiten, dann passiert das Problem auch nicht. Also anstatt des | multiply(.01)  ein | divide(100)

[Dracolein]

Nur eine Frage. Funzt der Knob bei dir mehrfach?

Ich hab eine abgewandelte Form jetzt für anderweitige Zwecke in einem Popup untergebracht. Code sieht so aus:

Code Auswählen Erweitern


               <ftui-knob has-scale has-arc has-value-text has-needle
                  [(value)]="HUEDevice2:ct" min="155" max="370"
                  [color]="HUEDevice2:ct | step('0: light, 1: brown, 70: warning')">
               </ftui-knob>


Hier funktioniert die Nutzereingabe problemlos und auch mehrfach (die Soll-Werte werden auch zuverlässig übermittelt & ausgeführt), aber die Knob-Darstellung funktioniert überhaupt nicht.
Sprich, die Anzeigeelemente bleiben auf niedrigster Stufe bzw. hüpfen nach Eingabe sofort wieder dort hin.

[Dracolein]

Kann mir jmd. Hilfestellung zum Verständnis des Circlemenu geben?

Anhand dieses Default-Beispiels:

Code Auswählen Erweitern



        <ftui-circlemenu>

              <ftui-icon name="home1"></ftui-icon>

              <ftui-button-nice get="dummy1"></ftui-button-nice>

              <ftui-button-nice get="dummy2"></ftui-button-nice>

              <ftui-button-nice get="dummy3"></ftui-button-nice>

              <ftui-button-nice get="ftuitest"></ftui-button-nice>

        </ftui-circlemenu>

Wie kann ich jedem Menüpunkt ein individuelles Icon verpassen? Ich hätte gedacht so:

Code Auswählen Erweitern


                        <ftui-button-nice get="set shelly5 pct 90">
                          <ftui-icon name="wind" color="light"></ftui-icon>
                        </ftui-button-nice>

aber das klappt nicht, da weiterhin die default-Lightbulb dargestellt wird.

[Eisix]

Hallo Dracolein,

einfach ftui-icon dazu

Code Auswählen Erweitern


                       <ftui-button class="size-3" shape="circle" color="secondary" fill="solid" (value)="set Luefter off;set Steuerung.Luefter checkall">
                                <ftui-icon name="power-off" color="mygreen"></ftui-icon>
                        </ftui-button>


hier nochmal komplett

Code Auswählen Erweitern


<ftui-row>
        <ftui-circlemenu direction="top-half">
                <ftui-icon class="size-3"
                        path="../images/openautomation"
                        [name]="Luefter:state | map('auto:vent_ventilation_level_automatic, man:vent_ventilation_level_manual_m, off:power-off')"
                        [color]="Luefter:state  | map('auto:mygreen, man:mygreen, off:mygreen')"
                ></ftui-icon>
                        <ftui-button class="size-3" shape="circle" color="secondary" fill="solid" (value)="set Luefter off;set Steuerung.Luefter checkall">
                                <ftui-icon name="power-off" color="mygreen"></ftui-icon>
                        </ftui-button>
                        <ftui-button class="size-3" shape="circle" color="secondary" fill="solid" (value)="set Luefter man;setreading Luefter stufe 1">
                                <ftui-icon class="size-5" color="mygreen">1</ftui-icon>
                        </ftui-button>
                        <ftui-button class="size-3" shape="circle" color="secondary" fill="solid" (value)="set Luefter man;setreading Luefter stufe 2">
                                <ftui-icon class="size-5" color="mygreen">2</ftui-icon>
                        </ftui-button>
                        <ftui-button class="size-3" shape="circle" color="secondary" fill="solid" (value)="set Luefter man;setreading Luefter stufe 3">
                                <ftui-icon class="size-5" color="mygreen">3</ftui-icon>
                        </ftui-button>
                        <ftui-button class="size-3" shape="circle" color="secondary" fill="solid" (value)="set Luefter man;setreading Luefter stufe 4">
                                <ftui-icon class="size-5" color="mygreen">4</ftui-icon>
                        </ftui-button>
                        <ftui-button class="size-3" shape="circle" color="secondary" fill="solid" (value)="set Luefter auto; set Steuerung.Luefter checkall">
                                <ftui-icon class="size-2"
                                        path="../images/openautomation"
                                        name="vent_ventilation_level_automatic"
                                        color="mygreen"
                                ></ftui-icon>
                        </ftui-button>
        </ftui-circlemenu>
        <ftui-badge
                backgroundcolor="secondary"
                [text]="Luefter:stufe">
        </ftui-badge>
</ftui-row>



oder fehlt dir der Path zu den Icons?

Code Auswählen Erweitern


path="../images/openautomation"


Gruß
Eisix

[Wolfgang Hochweller]

@setstate

Das ist ein Javascript Rundungsfehler.

Am besten du machst noch ein  | fix(1) hinter das multiply

Oder nur mit Integer arbeiten, dann passiert das Problem auch nicht. Also anstatt des | multiply(.01)  ein | divide(100)

Danke, das funktioniert.

Dabei haette ich schwoeren koennen, dass ich das auch mal probiert habe ....