FTUI Widget Dimmer für Zigbee Lampe

[moerte]

Nabend meine Lieben...

Ich hab zu ersten mal Lampen zum dimmen in Fhem eingebunden. (Zigbee - Nous P3Z)
Jetzt wollte ich einen Dimmer in mein TabletUI einbauen und bekomm es einfach nicht hin.
Wenn ich diese nach Wiki Anleitung einbinde, ist der Slider hinter der "Lampe" und wenn ich dann mit Touch drauf geh kann ich sie nur ein und ausschalten.
Hat vlt jemand einen schönen code schnipsel wie ich diese halbwegs bedienbar auf mein Touch Display bedienen / Dimmen und schalten Kann.


EDIT:

hab es mit einen Pupup und slider erstmal gelöst- aber schön ist was anderes, da sich das Popup dann mit verschiebt, und um die Lampe anzuklicken muss ich auch runter scrollen.

mein Code sieht derzeit so aus:

Code Auswählen Erweitern

<td>
<div data-type="popup"
data-height="500px"
data-width="500px">
<div data-type="symbol"
data-device="L_WZ_Stehlampe"
data-get="state"
data-states='["on","off"]'
data-colors='["#86b300","#4d4d4d"]'
data-icon="fs-hue_filled_white_e27_b22"
class="big top-space">
</div>

<div class="dialog">
<header>Wohnzimmer</header>
<div data-type="slider"
data-device="L_WZ_Stehlampe"
data-get="brightness"
data-set="brightness"
class="horizontal">
</div>

<div data-type="switch"
data-device="L_WZ_Stehlampe"
data-get-on="on"
data-get-off="off"
data-on-color="#282828"
data-off-color="#282828"
data-on-background-color="#86b300"
data-off-background-color="#4d4d4d">
</div>

</div>
</td>


Schönen Abend euch

[juemuc]

Hi,

für meine HUE-Lampen habe ich es so definiert:

Code Auswählen Erweitern

    <ftui-row margin="-2" align-items="center">
      <ftui-icon name="circle" [color]="{{Lampe}}:onoff | map('1:dark,0:medium')" size="9" top="35px">
        <ftui-icon [color]="{{Lampe}}:onoff | map('1:yellow,0:black')" size="-2" left="25px" top="25px"
              @click="sendFhem('set {{Lampe}} toggle')"
              [name]="{{Lampe}}:onoff | map('1:lightbulb-on, 0:lightbulb')">
        </ftui-icon>
      </ftui-icon>
      <ftui-icon left="100px" top="40px" [rgb]="{{Lampe}}:rgb" size="2"
            name="color_lens" @click="pop_{{pop_lampe}}.open()">
      </ftui-icon>
    </ftui-row>
    <ftui-slider
          [(value)]="{{Lampe}}:pct" min="0" max="100" margin="0.3">
    </ftui-slider>
    <ftui-label color="white" size="1" margin="0.2"
          [text]="{{Lampe}}:pct">
    </ftui-label>
Sieht dann so aus:

[moerte]

Danke für deine Antwort - das gefällt mir sehr gut.
Dein Code irretiert mich jedoch mit <ftui ....

Das schau ich mir morgen mal genauer an.
Aber genau so hätte ich mir das vorgestellt! 
... hoffe das bekomm ich hin

Ich sag erstmal gute Nacht - Arbeit ruft morgen früh 

[moerte]

Hi,

für meine HUE-Lampen habe ich es so definiert:

Code Auswählen Erweitern

    <ftui-row margin="-2" align-items="center">
      <ftui-icon name="circle" [color]="{{Lampe}}:onoff | map('1:dark,0:medium')" size="9" top="35px">
        <ftui-icon [color]="{{Lampe}}:onoff | map('1:yellow,0:black')" size="-2" left="25px" top="25px"
              @click="sendFhem('set {{Lampe}} toggle')"
              [name]="{{Lampe}}:onoff | map('1:lightbulb-on, 0:lightbulb')">
        </ftui-icon>
      </ftui-icon>
      <ftui-icon left="100px" top="40px" [rgb]="{{Lampe}}:rgb" size="2"
            name="color_lens" @click="pop_{{pop_lampe}}.open()">
      </ftui-icon>
    </ftui-row>
    <ftui-slider
          [(value)]="{{Lampe}}:pct" min="0" max="100" margin="0.3">
    </ftui-slider>
    <ftui-label color="white" size="1" margin="0.2"
          [text]="{{Lampe}}:pct">
    </ftui-label>
Sieht dann so aus:

OK ich habs - das ist FTUI3 - ist sowas auch in der Art mit FTUI2 möglich?

[moerte]

Ok, ich hab mir das FTUI3 mal angeschaut und installiert - interessant.
Aber alles neu für mich. Hab mal deinen Code angepasst und komm nicht mal zum schalten.
und sieht nicht im geringsten so schön aus wie bei dir 
Könnte den mal jemand für mich anpassen?

Code Auswählen Erweitern

      <!-- TESTFELD -->
      <ftui-grid-tile row="3" col="2" height="2" width="2" shape="round">
        <ftui-label size="2">TEST</ftui-label>
<ftui-row margin="-2" align-items="center">
      <ftui-icon name="circle" [color]="{{L_WZ_Stehlampe}}:onoff | map('on:dark,off:medium')" size="9" top="35px">
        <ftui-icon [color]="{{L_WZ_Stehlampe}}:onoff | map('on:yellow,off:black')" size="-2" left="25px" top="25px"
              @click="sendFhem('set {{L_WZ_Stehlampe}} on')"
              [name]="{{L_WZ_Stehlampe}}:onoff | map('on:lightbulb-on, off:lightbulb')">
        </ftui-icon>
      </ftui-icon>
      <ftui-icon left="100px" top="40px" [rgb]="{{L_WZ_Stehlampe}}:hex" size="2"
            name="color_lens" @click="pop_{{pop_lampe}}.open()">
      </ftui-icon>
    </ftui-row>
    <ftui-slider
          [(value)]="{{L_WZ_Stehlampe}}:brightness" min="0" max="255" margin="0.3">
    </ftui-slider>
    <ftui-label color="white" size="1" margin="0.2"
          [text]="{{L_WZ_Stehlampe}}:brightness">
    </ftui-label>     
</ftui-grid-tile>


das Device pop_lampe kann ich nicht nachvollziehen. Was hat es damit auf sich?

mal ein List von meiner Lampe:

Code Auswählen Erweitern

Internals:
   CID        zigbee_L_WZ_Stehlampe
   DEF        zigbee_L_WZ_Stehlampe
   FUUID      67ddd6e5-f33f-599c-2b95-e803297a0a57ed4f
   IODev      myBroker
   LASTInputDev myBroker
   MSGCNT     8
   NAME       L_WZ_Stehlampe
   NR         490
   STATE      off
   TYPE       MQTT2_DEVICE
   eventCount 16
   myBroker_CONN myBroker_127.0.0.1_38728
   myBroker_MSGCNT 8
   myBroker_TIME 2025-03-25 16:27:23
   JSONMAP:
     color_temp ct
   READINGS:
     2025-03-25 15:44:53   IODev           myBroker
     2025-03-21 22:15:17   associatedWith  zigbee_pi
     2025-03-21 22:17:08   attrTemplateVersion 20240108
     2025-03-25 16:27:23   brightness      91
     2025-03-25 16:27:23   color_hue       27
     2025-03-25 16:27:23   color_mode      color_temp
     2025-03-25 16:27:23   color_saturation 92
     2025-03-21 22:15:17   color_temp      360
     2025-03-25 16:27:23   color_x         0.5056
     2025-03-25 16:27:23   color_y         0.4152
     2025-03-25 16:27:23   ct              454
     2025-03-25 16:27:23   hex             FFA629
     2025-03-25 16:27:23   linkquality     48
     2025-03-25 16:27:23   state           off
Attributes:
   devStateIcon {zigbee2mqtt_devStateIcon255($name)}
   devicetopic zigbee2mqtt/L_WZ_Stehlampe
   icon       hue_filled_white_and_color_e27_b22
   jsonMap    color_temp:ct
   model      zigbee2mqtt_light_rgbw_hex
   readingList $DEVICETOPIC:.* { my $ret=json2nameValue($EVENT,'',$JSONMAP); $ret->{state}=lc($ret->{state}) if defined $ret->{state}; return $ret }
   room       1.Etage,MQTT2_DEVICE
   setList    on:noArg $DEVICETOPIC/set {"state":"ON"}
  off:noArg $DEVICETOPIC/set {"state":"OFF"}
  warm:noArg $DEVICETOPIC/set {"brightness": 200 , "color_temp": 360}
  white:noArg $DEVICETOPIC/set {"brightness": 254, "color_temp": 250}
  ct:colorpicker,CT,250,1,454 $DEVICETOPIC/set {"color_temp":$EVTPART1}
  brightness:colorpicker,BRI,0,5,255 $DEVICETOPIC/set {"state":"on","$EVTPART0":$EVTPART1}
  hex:colorpicker,HEX,0,15,255 $DEVICETOPIC/set {"color":{"$EVTPART0":"#$EVTPART1"}}
   userReadings hex:color_y.* {Color::xyY2hex(ReadingsVal($name,'color_x',0),ReadingsVal($name,'color_y',0),ReadingsVal($name,'brightness',254))}
   webCmd     toggle:on:off:brightness:ct:warm:white:hex

LG

[juemuc]

Hi,
mit dem popup steuere ich die Farbpalette. Kannst Du also weglassen.

Viele Grüße