data-color anpassen an reading + Beispielcode/ Screenshot

[Gunther]

Ist es möglich einen Button (z. B. push) durch ein Reading "rgb" meines Milight-Devices farblich anzupassen?

[setstate]

ja, einfach eines/mehrere der data-*-color drauf zeigen lassen

Code Auswählen Erweitern

data-off-background-color="rob"

[Gunther]

Danke für die schnelle Antwort.
Es funktioniert noch nicht. Ich bin mir aber auch nicht sicher, ob ich Dich richtig verstanden habe.

So habe ich es nun definiert:

Code Auswählen Erweitern

<div data-type="push"
                     data-icon="fa-paint-brush"
                     data-off-color="#808080"
                     data-off-background-color="#3D4C66"
                     data-device="eg_ki_mi_LED"
                     data-off-color="rgb"
                  data-hide="eg_ki_LEDStreifen:state"
data-hide-on="off"                     
                     class="">
                </div>

Das list sieht so aus:

Code Auswählen Erweitern

Internals:
   DEF        RGBW eg_ki_MilightBridge_LED_Streifen 5
   INIT       1
   IODev      eg_ki_MilightBridge_LED_Streifen
   LEDTYPE    RGBW
   NAME       eg_ki_mi_LED
   NR         1245
   NTFY_ORDER 50-eg_ki_mi_LED
   SLOT       5
   SLOTID     5
   STATE      on 76
   TYPE       MilightDevice
   Readings:
     2017-03-18 23:50:02   brightness      76
     2017-03-18 18:32:43   brightness_on   76
     2017-03-18 23:50:02   discoMode       0
     2017-03-18 23:50:02   discoSpeed      0
     2017-03-18 23:50:02   hsv             122,100,76
     2017-03-18 23:50:02   hue             122
     2017-03-18 23:50:02   previousState   125,100,76
     2017-03-18 23:50:02   rgb             00C106
     2017-03-18 23:50:02   saturation      100
     2017-03-18 23:50:02   state           on 76
     2017-03-18 23:50:02   transitionInProgress 0
   Helper:
     COMMANDSET on off toggle dimup dimdown discoModeUp:noArg discoSpeedUp:noArg discoSpeedDown:noArg night:noArg white:noArg toggleWhite:noArg pair unpair restorePreviousState:noArg saveState:noArg restoreState:noArg hsv rgb:colorpicker,RGB hue:colorpicker,HUE,0,1,360 saturation:slider,0,100,100 preset dim:slider,0,4,100 brightness:slider,0,4,100
     colorLevel 20
     colorValue 95
     targetHue  122
     targetSat  69
     targetTime 1489877402.65774
     targetVal  76
     whiteLevel 0
     COLORMAP:
       176
       175
       175
       174
       174
       173
       173
       172
       172
       171
       171
       170
       170
       169
       169
       168
       167
       167
       166
       166
       165
       165
       164
       164
       163
       163
       162
       162
       161
       161
       160
       159
       159
       158
       158
       157
       157
       156
       156
       155
       155
       154
       154
       153
       153
       152
       151
       151
       150
       150
       149
       149
       148
       148
       147
       147
       146
       146
       145
       145
       144
       143
       142
       142
       141
       140
       139
       138
       138
       137
       136
       135
       134
       134
       133
       132
       131
       130
       130
       129
       128
       127
       126
       126
       125
       124
       123
       122
       122
       121
       120
       119
       118
       118
       117
       116
       115
       114
       114
       113
       112
       111
       110
       110
       109
       108
       107
       106
       106
       105
       104
       103
       102
       102
       101
       100
       99
       98
       98
       97
       96
       95
       95
       94
       93
       93
       92
       91
       91
       90
       89
       89
       88
       87
       87
       86
       85
       85
       84
       83
       83
       82
       81
       81
       80
       79
       79
       78
       77
       77
       76
       75
       75
       74
       73
       73
       72
       71
       71
       70
       69
       69
       68
       67
       67
       66
       65
       65
       64
       63
       63
       62
       61
       61
       60
       59
       59
       58
       57
       57
       56
       55
       55
       54
       53
       53
       52
       51
       51
       50
       49
       49
       48
       47
       47
       46
       45
       45
       44
       43
       43
       42
       41
       41
       40
       39
       39
       38
       37
       37
       36
       35
       35
       34
       33
       33
       32
       31
       31
       30
       29
       29
       28
       27
       27
       26
       25
       25
       24
       23
       23
       22
       21
       21
       20
       19
       19
       18
       17
       17
       17
       16
       15
       15
       14
       13
       12
       11
       11
       10
       9
       8
       7
       7
       6
       5
       4
       3
       3
       2
       1
       0
       254
       254
       253
       252
       251
       250
       250
       249
       248
       247
       246
       246
       245
       244
       243
       242
       242
       241
       240
       239
       238
       238
       237
       236
       235
       234
       234
       233
       232
       231
       230
       230
       229
       228
       227
       226
       226
       225
       224
       223
       222
       222
       221
       220
       219
       218
       218
       217
       216
       215
       214
       214
       213
       212
       211
       210
       210
       209
       208
       207
       206
       206
       205
       204
       203
       202
       202
       201
       200
       199
       198
       198
       197
       196
       195
       194
       194
       193
       192
       191
       190
       190
       189
       188
       187
       186
       186
       185
       184
       183
       182
       182
       181
       180
       179
       178
       178
       177
     GAMMAMAP:
       0
       4
       4
       4
       4
       5
       6
       7
       8
       9
       10
       11
       12
       13
       14
       15
       16
       17
       18
       19
       20
       21
       22
       23
       24
       25
       26
       27
       28
       29
       30
       31
       32
       33
       34
       35
       36
       37
       38
       39
       40
       41
       42
       43
       44
       45
       46
       47
       48
       49
       50
       51
       52
       53
       54
       55
       56
       57
       58
       59
       60
       61
       62
       63
       64
       65
       66
       67
       68
       69
       70
       71
       72
       73
       74
       75
       76
       77
       78
       79
       80
       81
       82
       83
       84
       85
       86
       87
       88
       89
       90
       91
       92
       93
       94
       95
       96
       97
       98
       99
       100
     cmdQueue:
Attributes:
   IODev      eg_ki_MilightBridge_LED_Streifen
   devStateIcon {(MilightDevice_devStateIcon($name),"toggle")}
   event-on-change-reading state,transitionInProgress
   lightSceneParamsToSave brightness
   restoreAtStart 1
   room       Kino
   webCmd     on:off:dim:ct:night

[setstate]

data-off-color aber nur einmal angeben. Entweder Festwert oder ein Reading. Hatte ich noch vergessen, dass ein Reading gemeint ist, wird nur erkannt, wenn es mit Device:Reading angegeben ist.

Code Auswählen Erweitern


<div data-type="push"
                     data-icon="fa-paint-brush"
                     data-off-background-color="#3D4C66"
                     data-device="eg_ki_mi_LED"
                     data-off-color="eg_ki_mi_LED:rgb"
                     data-hide="eg_ki_LEDStreifen:state"
     data-hide-on="off"                     
                     class="">
                </div>


[Gunther]

klappt soweit. Danke Dir!
Meine Lösung habe ich unten beschrieben.

2 offene Punkte habe ich noch:
1.) Das Aktualisieren klappt nicht sauber. Ich muss die Seite im Browser (Chrome) neu laden. Dann geht es.
In der index.html habe ich Folgendes eingetragen.

Code Auswählen Erweitern

    <meta name="longpoll" content="1">
    <meta name="longpoll_type" content="websocket">
Alst toast message bekomme ich, dass Ajax gestartet wurde
2.) das Popup zeigt noch eine Scoll-Leiste. Keine Ahnung warum. Ich habe schon unterschiedliche Höhen ausprobiert.
Die hätte ich gerne weg. Nur wie?

Anbei mal mein Code (abgekufert und erweitert) und anbei zwei ein Screenshots (aus und an mit Popup)
Funktion: Wenn Licht aus (homematic), ist der Zusatzbutton für Farbe und Dimmen nicht zu sehen.
Wenn der Homematic-Schalter den Trafo samt Milight-LED-Steuerung anschaltet, wird der Zusatzbutton eingeblendet.
Dieser zeigt die aktuelle Farbe der LED-RGBWW-Streifen. Wenn man ihn drückt kommt ein Popup für festgelegte Farben, individuelle Farbfestlegung und einen Dimmbutton.

Code Auswählen Erweitern


<header><div data-type="label" class="medium orange">LED Streifen Kino</div></header>
    <div class="top-space">
        <div data-type="switch"
             data-device="eg_ki_LEDStreifen"
             data-get-on="on.*"
             data-set-on="on"
             data-on-background-color="eg_ki_mi_LED:rgb"
             class="">
        </div>
        <div data-type="label" class="darker">AN/AUS</div>
<div data-type="label" data-device="eg_ki_mi_LED" data-get="brightness" data-unit="%" class="darker"></div>
       
        <div class="">
            <div data-type="popup"
                 data-height="330px"
                 data-width="600px"
                 data-draggable="false"
                 class="">
                 
                <div data-type="push"
                     data-icon="fa-google-wallet"
                     data-on-color="eg_ki_mi_LED:rgb"
                     data-on-background-color="eg_ki_mi_LED:rgb"
                     data-off-background-color="eg_ki_mi_LED:rgb"
                     data-off-color="eg_ki_mi_LED:rgb"
                     data-hide="eg_ki_LEDStreifen:state"
      data-hide-on="off"                     
                     class="invert">
                </div>
                <div data-type="label" data-hide="eg_ki_LEDStreifen:state" data-hide-on="off" class="darker">Farbe & Dimm</div>
                <div class="dialog dialogTransparent">
                    <header>LED Streifen Kino - Farben</header>
                    <div class="top-space">
                        <div class="inline">
                            <div onclick="$('.dialog-close').trigger('click');"
                                 data-type="push"
                                 data-device="eg_ki_mi_LED"
                                 data-set="hue"
                                 data-set-on="0"
                                 data-off-color="#FF0000"
                                 data-off-background-color="#3D4C66"
                                 data-icon="fa-paint-brush"
                                 class="">
                            </div>
                            <div class="">Rot</div></div>
                        <div class="inline">
                            <div onclick="$('.dialog-close').trigger('click');"
                                 data-type="push"
                                 data-device="eg_ki_mi_LED"
                                 data-set="hue"
                                 data-set-on="60"
                                 data-off-color="#FFFF00"
                                 data-off-background-color="#3D4C66"
                                 data-icon="fa-paint-brush"
                                 class="">
                            </div>
                            <div class="">Gelb</div>
                        </div>
                        <div class="inline">
                            <div onclick="$('.dialog-close').trigger('click');"
                                 data-type="push"
                                 data-device="eg_ki_mi_LED"
                                 data-set="hue"
                                 data-set-on="125"
                                 data-off-color="#00FF00"
                                 data-off-background-color="#3D4C66"
                                 data-icon="fa-paint-brush"
                                 class="">
                            </div>
                            <div class="">Gruen</div>
                        </div>
                        <div class="inline">
                            <div onclick="$('.dialog-close').trigger('click');"
                                 data-type="push"
                                 data-device="eg_ki_mi_LED"
                                 data-set="hue"
                                 data-set-on="190"
                                 data-off-color="#00FFFF"
                                 data-off-background-color="#3D4C66"
                                 data-icon="fa-paint-brush"
                                 class="">
                            </div>
                            <div class="">Tuerkis</div>
                        </div>
                        <div class="inline">
                            <div onclick="$('.dialog-close').trigger('click');"
                                 data-type="push"
                                 data-device="eg_ki_mi_LED"
                                 data-set="hue"
                                 data-set-on="260"
                                 data-off-color="#0000FF"
                                 data-off-background-color="#3D4C66"
                                 data-icon="fa-paint-brush"
                                 class="">
                            </div>
                            <div class="">Blau</div>
                        </div>
                        <div class="inline">
                            <div onclick="$('.dialog-close').trigger('click');"
                                 data-type="push"
                                 data-device="eg_ki_mi_LED"
                                 data-set="hue"
                                 data-set-on="325"
                                 data-off-color="#FF00FF"
                                 data-off-background-color="#3D4C66"
                                 data-icon="fa-paint-brush"
                                 class="">
                            </div>
                            <div class="">Pink</div>
                        </div>
                        <div class="inline">
                            <div onclick="$('.dialog-close').trigger('click');"
                                 data-type="push"
                                 data-device="eg_ki_mi_LED"
                                 data-set="rgb"
                                 data-set-on="FFFFFF"
                                 data-off-color="#FFFFFF"
                                 data-off-background-color="#3D4C66"
                                 data-icon="fa-paint-brush"
                                 class="">
                            </div>
                            <div class="">Weiss</div>
                        </div>
                    </div>
                   
                    <div class="col-1-2">
                    <div data-type="colorwheel"
      data-device="eg_ki_mi_LED"
      data-get="rgb"
      data-set="rgb"
      class="roundIndicator">
      </div>
      <div class="darker">individuelle Farbe</div>
      </div>
      <div class="col-1-2">
             <div onclick="$('.dialog-close').trigger('click');"
              data-type="volume"
                  data-device="eg_ki_mi_LED"
                  data-get="brightness"
                  data-set="brightness"
                  data-min="0"
                  data-max="100"
                  data-tickstep="5"
                  data-unit="%"
                  class="dim-tick dim-back top-space-3x">
            </div>
            <div class="darker">Dimmen</div>
            </div>
           
            </div>
            </div>
        </div>
    </div>


[Gunther]

ich schiebe das nochmal hoch. 
Hoffe mir kann jemand helfen.

[setstate]

Setze das mal in den Header

Code Auswählen Erweitern

<meta name="longpoll_filter" content=".*">

Ich habe gerade keine Idee, was bei euch den Autofilter stört.

[Gunther]

Danke für Deine Antwort. Leider hat das Setzen des Filters nicht funktioniert.

Außerdem wäre noch einen Tipp bzgl. des Popups (Scrollbalken elemenieren) toll.

[setstate]

Sorry, für solche zeitraubenden Themen habe ich gerade leider keine Zeit.
Ich kämpfe gerade mit der ETS5  ...

[Gunther]

Vielleicht kann mir ja auch jemand anderes helfen?