Ich setze bisher 3 Philips Hue ein alles die Farbvariante der Glühlampe E27.
Jetzt wollte ich das gerne mal in mein FTUI integrieren, aber so richtig finde ich da keine Variante...!
Am besten wäre es, wenn in einem Popup alles drin wäre so z.B. verschiedene Einstellungen für Farbvarianten, ein Farbversteller und das Ein/Aus schalten und evtl. sogar mehrere Hue, hat jemand hier soetwas schon mal irgendwo bereit gestellt mit einem Beispiel, ich habe da so richtig noch nichts gefunden.
Es ist jetzt nicht so das ich nichts habe, aber ich bekomme im PopUp die beiden nicht richtig in einer guten Darstellung nebeneinander.
Ich hätte da gerne etwas Abstand zwischen beiden...!
Hier mal mein Code dazu:
<li class="" data-row="11" data-col="8" data-sizex="2" data-sizey="5" style="background-color:#1f222e">
<!-- ==== Modus Philips Hue Kugelleuchte ==== -->
<div class="vbox">
<div class="card" style="margin-left:0px !important; margin-top:0px !important; margin-right:0px !important;">
<div data-type="popup" data-height="600px" data-width="500px" data-return-time="20" data-draggable="false">
<div class="" style="margin-top:5px; margin-left:0px;" data-type="symbol" data-device="du_Modus_WZ_hue1" data-states='["FHEM","Urlaub","Aus"]' data-colors='["lightgreen","#4169e1","yellow"]' data-background-colors='["lightgreen","#4169e1","yellow"]' data-background-icon="fa-square-o" data-icons='["fs-hue_filled_white_and_color_e27_b22","oa-user_away","oa-time_manual_mode"]'></div>
<div style="margin-top:5px !important; font-size:100%" data-type="label">- Philips Hue Kugelleuchte -</div>
<div class="dialog">
<header style="background-color:#3d445c;">
<div class="sheet">
<div class="left" style="margin-left:15px; margin-top:10px; margin-bottom:10px; font-size:18px; color:royalblue">Modus - Philips Hue</div>
<div data-type="link" data-color="white" data-icon-left="fa-times" class="right big" style="margin-top:10px;" onclick="$('.dialog-close').trigger('click');"></div>
</div>
</header>
<div class="cell">
<div class="inline"><div class="big" data-type="push" data-device="du_Modus_WZ_hue1" data-get="state" data-background-icon="none" data-get-on="FHEM" data-get-off="!on" data-on-color="lightgreen" data-off-color="white" data-icon="fs-hue_filled_white_and_color_e27_b22" data-set-on="FHEM"></div>
<div style="margin-top:-10px !important; font-size:100%" data-type="label">FHEM</div>
</div>
<div class="inline"><div class="big" data-type="push" data-device="du_Modus_WZ_hue1" data-get="state" data-background-icon="none" data-get-on="Urlaub" data-get-off="!on" data-on-color="#4169e1" data-off-color="white" data-icon="oa-user_away" data-set-on="Urlaub"></div>
<div style="margin-top:-10px !important; font-size:100%" data-type="label">Urlaub</div>
</div>
<!--div class="inline"><div class="big" data-type="push" data-device="du_Modus_WZ_hue1" data-get="state" data-background-icon="none" data-get-on="Weihnachten" data-get-off="!on" data-on-color="crimson" data-off-color="white" data-icon="oa-scene_x-mas" data-set-on="Weihnachten"></div>
<div style="margin-top:-10px !important; font-size:100%" data-type="label">Weihnachten</div>
</div-->
<div class="inline"><div class="big" data-type="push" data-device="du_Modus_WZ_hue1" data-get="state" data-background-icon="none" data-get-on="Aus" data-get-off="!on" data-on-color="yellow" data-off-color="white" data-icon="oa-time_manual_mode" data-set-on="Aus"></div>
<div style="margin-top:-10px !important; font-size:100%" data-type="label">Aus / Hand</div>
</div>
</div>
<div class="cell">
<div class="top-narrow-2x">
<div class="centered inline">
<div data-type="volume" data-device="WZ_hue1" data-min="0" data-max="65353" data-get="hue" data-set="hue" class="hue-tick small top-space-3x"></div>
<div data-type="label" class="narrow">Color</div>
<div data-type="volume" data-device="WZ_hue1" data-min="0" data-max="100" data-get="pct" data-set="pct" data-tickstep='4' class="dim-tick small top-space-3x"></div>
<div data-type="label" class="narrow">Helligkeit</div>
<div data-type="volume" data-device="WZ_hue1" data-min="0" data-max="254" data-get="sat" data-set="sat" data-tickstep='4' class="dim-tick small top-space-3x"></div>
<div data-type="label" class="narrow">Sättigung</div>
</div>
<div class="right inline top-space-3x">
<div>
<div data-type="push" data-device="WZ_hue1" data-icon="fa-lightbulb-o" data-set="hue" data-set-on="44295" data-off-background-color="#3333dd" data-off-color="#3333dd" class="inline"></div>
<div data-type="label" class="narrow w2x left-align inline">blau</div>
</div>
<div>
<div data-type="push" data-device="WZ_hue1" data-icon="fa-lightbulb-o" data-set="hue" data-set-on="20695" data-off-background-color="#33dd33" data-off-color="#33dd33" class="inline"></div>
<div data-type="label" class="narrow w2x left-align inline">grün</div>
</div>
<div>
<div data-type="push" data-device="WZ_hue1" data-icon="fa-lightbulb-o" data-set="hue" data-set-on="0" data-off-background-color="#dd4444" data-off-color="#dd4444" class="inline"></div>
<div data-type="label" class="narrow w2x left-align inline">crimson</div>
</div>
<div>
<div data-type="push" data-device="WZ_hue1" data-icon="fa-lightbulb-o" data-set="hue" data-set-on="9800" data-off-background-color="#cccc44" data-off-color="#cccc44" class="inline"></div>
<div data-type="label" class="narrow w2x left-align inline">gelb</div>
</div>
<div>
<div data-type="push" data-device="WZ_hue1" data-icon="fa-lightbulb-o" data-set="rgb" data-set-on="666666" data-off-background-color="#666666" data-off-color="#666666" class="inline"></div>
<div data-type="label" class="narrow w2x left-align inline">weiß</div>
</div>
<div>
<div data-type="push" data-device="WZ_hue1" data-icon="fa-lightbulb-o" data-set="rgb" data-set-on="aaaaaa" data-off-background-color="#aaaaaa" data-off-color="#aaaaaa" class="inline"></div>
<div data-type="label" class="narrow w2x left-align inline">weiß</div>
</div>
<div>
<div data-type="push" data-device="WZ_hue1" data-icon="fa-lightbulb-o" data-set="rgb" data-set-on="ffffff" data-off-background-color="#ffffff" data-off-color="#ffffff" class="inline"></div>
<div data-type="label" class="narrow w2x left-align inline">weiß</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ==== Modus Philips Hue Tischleuchte ==== -->
<div class="vbox">
<div class="card" style="margin-left:0px !important; margin-top:0px !important; margin-right:0px !important;">
<div data-type="popup" data-height="600px" data-width="500px" data-return-time="20" data-draggable="false">
<div class="" style="margin-top:5px; margin-left:0px;" data-type="symbol" data-device="du_Modus_WZ_hue2" data-states='["FHEM","Urlaub","Aus"]' data-colors='["lightgreen","#4169e1","yellow"]' data-background-colors='["lightgreen","#4169e1","yellow"]' data-background-icon="fa-square-o" data-icons='["fs-hue_filled_white_and_color_e27_b22","oa-user_away","oa-time_manual_mode"]'></div>
<div style="margin-top:5px !important; font-size:100%" data-type="label">- Philips Hue Schrankleuchte -</div>
<div class="dialog">
<header style="background-color:#3d445c;">
<div class="sheet">
<div class="left" style="margin-left:15px; margin-top:10px; margin-bottom:10px; font-size:18px; color:royalblue">Modus - Philips Hue</div>
<div data-type="link" data-color="white" data-icon-left="fa-times" class="right big" style="margin-top:10px;" onclick="$('.dialog-close').trigger('click');"></div>
</div>
</header>
<div class="cell">
<div class="inline"><div class="big" data-type="push" data-device="du_Modus_WZ_hue2" data-get="state" data-background-icon="none" data-get-on="FHEM" data-get-off="!on" data-on-color="lightgreen" data-off-color="white" data-icon="fs-hue_filled_white_and_color_e27_b22" data-set-on="FHEM"></div>
<div style="margin-top:-10px !important; font-size:100%" data-type="label">FHEM</div>
</div>
<div class="inline"><div class="big" data-type="push" data-device="du_Modus_WZ_hue2" data-get="state" data-background-icon="none" data-get-on="Urlaub" data-get-off="!on" data-on-color="#4169e1" data-off-color="white" data-icon="oa-user_away" data-set-on="Urlaub"></div>
<div style="margin-top:-10px !important; font-size:100%" data-type="label">Urlaub</div>
</div>
<div class="inline"><div class="big" data-type="push" data-device="du_Modus_WZ_hue2" data-get="state" data-background-icon="none" data-get-on="Aus" data-get-off="!on" data-on-color="yellow" data-off-color="white" data-icon="oa-time_manual_mode" data-set-on="Aus"></div>
<div style="margin-top:-10px !important; font-size:100%" data-type="label">Aus / Hand</div>
</div>
</div>
<div class="cell">
<div class="top-narrow-2x">
<div class="centered inline">
<div data-type="volume" data-device="WZ_hue2" data-min="0" data-max="65353" data-get="hue" data-set="hue" class="hue-tick small top-space-3x"></div>
<div data-type="label" class="narrow">Color</div>
<div data-type="volume" data-device="WZ_hue2" data-min="0" data-max="100" data-get="pct" data-set="pct" data-tickstep='4' class="dim-tick small top-space-3x"></div>
<div data-type="label" class="narrow">Helligkeit</div>
<div data-type="volume" data-device="WZ_hue2" data-min="0" data-max="254" data-get="sat" data-set="sat" data-tickstep='4' class="dim-tick small top-space-3x"></div>
<div data-type="label" class="narrow">Sättigung</div>
</div>
<div class="right inline top-space-3x">
<div>
<div data-type="push" data-device="WZ_hue2" data-icon="fa-lightbulb-o" data-set="hue" data-set-on="44295" data-off-background-color="#3333dd" data-off-color="#3333dd" class="inline"></div>
<div data-type="label" class="narrow w2x left-align inline">blau</div>
</div>
<div>
<div data-type="push" data-device="WZ_hue2" data-icon="fa-lightbulb-o" data-set="hue" data-set-on="20695" data-off-background-color="#33dd33" data-off-color="#33dd33" class="inline"></div>
<div data-type="label" class="narrow w2x left-align inline">grün</div>
</div>
<div>
<div data-type="push" data-device="WZ_hue2" data-icon="fa-lightbulb-o" data-set="hue" data-set-on="0" data-off-background-color="#dd4444" data-off-color="#dd4444" class="inline"></div>
<div data-type="label" class="narrow w2x left-align inline">crimson</div>
</div>
<div>
<div data-type="push" data-device="WZ_hue2" data-icon="fa-lightbulb-o" data-set="hue" data-set-on="9800" data-off-background-color="#cccc44" data-off-color="#cccc44" class="inline"></div>
<div data-type="label" class="narrow w2x left-align inline">gelb</div>
</div>
<div>
<div data-type="push" data-device="WZ_hue2" data-icon="fa-lightbulb-o" data-set="rgb" data-set-on="666666" data-off-background-color="#666666" data-off-color="#666666" class="inline"></div>
<div data-type="label" class="narrow w2x left-align inline">weiß</div>
</div>
<div>
<div data-type="push" data-device="WZ_hue2" data-icon="fa-lightbulb-o" data-set="rgb" data-set-on="aaaaaa" data-off-background-color="#aaaaaa" data-off-color="#aaaaaa" class="inline"></div>
<div data-type="label" class="narrow w2x left-align inline">weiß</div>
</div>
<div>
<div data-type="push" data-device="WZ_hue2" data-icon="fa-lightbulb-o" data-set="rgb" data-set-on="ffffff" data-off-background-color="#ffffff" data-off-color="#ffffff" class="inline"></div>
<div data-type="label" class="narrow w2x left-align inline">weiß</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>