Ich verwende nicht so gerne Slider. Habe daher mal eine Lösung mit festen Werten gebaut. Als Grundlage dient hier das Tradfri-Modul für die Ikea Smarthome Beleuchtung. Ist aber prinzipiell an andere Module anpassbar. (dazu einfach data-fhem-cmd ändern)
Vielleicht kann es jemand gebrauchen. Die Grafiken sind im ZIP beigefügt. Sie liegen bei mir in ./www/tablet/images/avatare/
Beispiel 1 (92.jpg):
<div class="inline">
<div class="" data-type="popup" id="popup_ku_1" data-height="580px" data-width="650px">
<div class=""
data-type="symbol"
data-icon="fa-lightbulb-o"
data-device="ku_licht_fenster"
data-get="dimvalue"
data-get-on="1"
data-states='["0","1","50","100","150","200","254"]'
data-background-icons='["fa-circle","fa-circle","fa-circle","fa-circle","fa-circle","fa-circle","fa-circle"]'
data-color="#303030"
data-on-background-colors='["#505050","orange","orange","orange","orange","orange","orange"]'
data-off-background-color="#505050"
></div>
<div class="narrow">Küche</div>
<div class="dialog dialogTransparent">
<header class="dialogheaderTransparent">Licht Küche Fenster</header>
<div class="top-space">
<div class="inline">
<div data-type="image"
data-fhem-cmd="set ku_licht_fenster dimvalue 0"
onclick="$('#popup_ku_1.dialog-close').trigger('click');"
class="cell" data-url="./images/avatare/87_bulb_off.png"
data-size="43px"
></div>
</div>
<div class="inline">
<div data-type="image"
data-fhem-cmd="set ku_licht_fenster dimvalue 1"
class="cell" data-url="./images/avatare/87_bulb_1.png"
data-size="43px"
></div>
</div>
<div class="inline">
<div data-type="image"
data-fhem-cmd="set ku_licht_fenster dimvalue 50"
class="cell" data-url="./images/avatare/87_bulb_4.png"
data-size="43px"
></div>
</div>
<div class="inline">
<div data-type="image"
data-fhem-cmd="set ku_licht_fenster dimvalue 100"
class="cell" data-url="./images/avatare/87_bulb_5.png"
data-size="43px"
></div>
</div>
<div class="inline">
<div data-type="image"
data-fhem-cmd="set ku_licht_fenster dimvalue 150"
class="cell" data-url="./images/avatare/87_bulb_6.png"
data-size="43px"
></div>
</div>
<div class="inline">
<div data-type="image"
data-fhem-cmd="set ku_licht_fenster dimvalue 200"
class="cell" data-url="./images/avatare/87_bulb_7.png"
data-size="43px"
></div>
</div>
<div class="inline">
<div data-type="image"
data-fhem-cmd="set ku_licht_fenster dimvalue 254"
class="cell" data-url="./images/avatare/87_bulb_8.png"
data-size="43px"
></div>
</div>
<div class="cell newline">
<div class="inline">
<div data-type="image"
data-fhem-cmd="set ku_licht_fenster color f1e0b5"
class="cell" data-url="./images/avatare/87_bulb_coldwarm.png"
data-size="43px"
></div>
<div data-type="label"
class="narrow">Alltag
</div>
</div>
<div class="inline">
<div data-type="image"
data-fhem-cmd="set ku_licht_fenster color f5faf6"
class="cell" data-url="./images/avatare/87_bulb_cold.png"
data-size="43px"
></div>
<div data-type="label"
class="narrow">Fokus
</div>
</div>
<div class="inline">
<div data-type="image"
data-fhem-cmd="set ku_licht_fenster color efd275"
class="cell" data-url="./images/avatare/87_bulb_warm.png"
data-size="43px"
></div>
<div data-type="label"
class="narrow">Entspannung
</div>
</div>
</div>
<div class="cell newline">
<div class="inline">
<div data-type="image"
onclick="$('#popup_ku_1.dialog-close').trigger('click');"
class="cell" data-url="./images/avatare/43_check.png"
data-size="33px"
></div>
<div data-type="label"
class="narrow">Schliessen
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Beispiel 2 (91.jpg):
<div class="inline">
<div class="" data-type="popup" id="popup_ku_1" data-height="580px" data-width="650px">
<div class=""
data-type="symbol"
data-icon="fa-lightbulb-o"
data-device="ku_licht_fenster"
data-get="dimvalue"
data-get-on="1"
data-states='["0","1","50","100","150","200","254"]'
data-background-icons='["fa-circle","fa-circle","fa-circle","fa-circle","fa-circle","fa-circle","fa-circle"]'
data-color="#303030"
data-on-background-colors='["#505050","orange","orange","orange","orange","orange","orange"]'
data-off-background-color="#505050"
></div>
<div class="narrow">Küche</div>
<div class="dialog dialogTransparent">
<header class="dialogheaderTransparent">Licht Küche Fenster</header>
<div class="top-space">
<div class="inline">
<div data-type="image"
data-fhem-cmd="set ku_licht_fenster dimvalue 0"
onclick="$('#popup_ku_1.dialog-close').trigger('click');"
class="cell" data-url="./images/avatare/87_bulb_off.png"
data-size="43px"
></div>
</div>
<div class="inline">
<div data-type="image"
data-fhem-cmd="set ku_licht_fenster dimvalue 1"
class="cell" data-url="./images/avatare/87_bulb_1.png"
data-size="43px"
></div>
</div>
<div class="inline">
<div data-type="image"
data-fhem-cmd="set ku_licht_fenster dimvalue 50"
class="cell" data-url="./images/avatare/87_bulb_4.png"
data-size="43px"
></div>
</div>
<div class="inline">
<div data-type="image"
data-fhem-cmd="set ku_licht_fenster dimvalue 100"
class="cell" data-url="./images/avatare/87_bulb_5.png"
data-size="43px"
></div>
</div>
<div class="inline">
<div data-type="image"
data-fhem-cmd="set ku_licht_fenster dimvalue 150"
class="cell" data-url="./images/avatare/87_bulb_6.png"
data-size="43px"
></div>
</div>
<div class="inline">
<div data-type="image"
data-fhem-cmd="set ku_licht_fenster dimvalue 200"
class="cell" data-url="./images/avatare/87_bulb_7.png"
data-size="43px"
></div>
</div>
<div class="inline">
<div data-type="image"
data-fhem-cmd="set ku_licht_fenster dimvalue 254"
class="cell" data-url="./images/avatare/87_bulb_8.png"
data-size="43px"
></div>
</div>
<div class="cell newline">
<div class="inline">
<div data-type="image"
data-fhem-cmd="set ku_licht_fenster dimvalue 0; set ku_licht_fenster color f1e0b5"
onclick="$('#popup_ku_1.dialog-close').trigger('click');"
class="cell" data-url="./images/avatare/87_bulb_off.png"
data-size="43px"
></div>
</div>
<div class="inline">
<div data-type="image"
data-fhem-cmd="set ku_licht_fenster dimvalue 1; set ku_licht_fenster color f1e0b5"
class="cell" data-url="./images/avatare/87_bulb_coldwarm_1.png"
data-size="43px"
></div>
</div>
<div class="inline">
<div data-type="image"
data-fhem-cmd="set ku_licht_fenster dimvalue 50; set ku_licht_fenster color f1e0b5"
class="cell" data-url="./images/avatare/87_bulb_coldwarm_4.png"
data-size="43px"
></div>
</div>
<div class="inline">
<div data-type="image"
data-fhem-cmd="set ku_licht_fenster dimvalue 100; set ku_licht_fenster color f1e0b5"
class="cell" data-url="./images/avatare/87_bulb_coldwarm_5.png"
data-size="43px"
></div>
</div>
<div class="inline">
<div data-type="image"
data-fhem-cmd="set ku_licht_fenster dimvalue 150; set ku_licht_fenster color f1e0b5"
class="cell" data-url="./images/avatare/87_bulb_coldwarm_6.png"
data-size="43px"
></div>
</div>
<div class="inline">
<div data-type="image"
data-fhem-cmd="set ku_licht_fenster dimvalue 200; set ku_licht_fenster color f1e0b5"
class="cell" data-url="./images/avatare/87_bulb_coldwarm_7.png"
data-size="43px"
></div>
</div>
<div class="inline">
<div data-type="image"
data-fhem-cmd="set ku_licht_fenster dimvalue 254; set ku_licht_fenster color f1e0b5"
class="cell" data-url="./images/avatare/87_bulb_coldwarm_8.png"
data-size="43px"
></div>
</div>
</div>
<div class="cell newline">
<div class="inline">
<div data-type="image"
data-fhem-cmd="set ku_licht_fenster dimvalue 0; set ku_licht_fenster color f5faf6"
onclick="$('#popup_ku_1.dialog-close').trigger('click');"
class="cell" data-url="./images/avatare/87_bulb_off.png"
data-size="43px"
></div>
</div>
<div class="inline">
<div data-type="image"
data-fhem-cmd="set ku_licht_fenster dimvalue 1; set ku_licht_fenster color f5faf6"
class="cell" data-url="./images/avatare/87_bulb_cold_1.png"
data-size="43px"
></div>
</div>
<div class="inline">
<div data-type="image"
data-fhem-cmd="set ku_licht_fenster dimvalue 50; set ku_licht_fenster color f5faf6"
class="cell" data-url="./images/avatare/87_bulb_cold_4.png"
data-size="43px"
></div>
</div>
<div class="inline">
<div data-type="image"
data-fhem-cmd="set ku_licht_fenster dimvalue 100; set ku_licht_fenster color f5faf6"
class="cell" data-url="./images/avatare/87_bulb_cold_5.png"
data-size="43px"
></div>
</div>
<div class="inline">
<div data-type="image"
data-fhem-cmd="set ku_licht_fenster dimvalue 150; set ku_licht_fenster color f5faf6"
class="cell" data-url="./images/avatare/87_bulb_cold_6.png"
data-size="43px"
></div>
</div>
<div class="inline">
<div data-type="image"
data-fhem-cmd="set ku_licht_fenster dimvalue 200; set ku_licht_fenster color f5faf6"
class="cell" data-url="./images/avatare/87_bulb_cold_7.png"
data-size="43px"
></div>
</div>
<div class="inline">
<div data-type="image"
data-fhem-cmd="set ku_licht_fenster dimvalue 254; set ku_licht_fenster color f5faf6"
class="cell" data-url="./images/avatare/87_bulb_cold_8.png"
data-size="43px"
></div>
</div>
</div>
<div class="cell newline">
<div class="inline">
<div data-type="image"
data-fhem-cmd="set ku_licht_fenster dimvalue 0; set ku_licht_fenster color efd275"
onclick="$('#popup_ku_1.dialog-close').trigger('click');"
class="cell" data-url="./images/avatare/87_bulb_off.png"
data-size="43px"
></div>
</div>
<div class="inline">
<div data-type="image"
data-fhem-cmd="set ku_licht_fenster dimvalue 1; set ku_licht_fenster color efd275"
class="cell" data-url="./images/avatare/87_bulb_warm_1.png"
data-size="43px"
></div>
</div>
<div class="inline">
<div data-type="image"
data-fhem-cmd="set ku_licht_fenster dimvalue 50; set ku_licht_fenster color efd275"
class="cell" data-url="./images/avatare/87_bulb_warm_4.png"
data-size="43px"
></div>
</div>
<div class="inline">
<div data-type="image"
data-fhem-cmd="set ku_licht_fenster dimvalue 100; set ku_licht_fenster color efd275"
class="cell" data-url="./images/avatare/87_bulb_warm_5.png"
data-size="43px"
></div>
</div>
<div class="inline">
<div data-type="image"
data-fhem-cmd="set ku_licht_fenster dimvalue 150; set ku_licht_fenster color efd275"
class="cell" data-url="./images/avatare/87_bulb_warm_6.png"
data-size="43px"
></div>
</div>
<div class="inline">
<div data-type="image"
data-fhem-cmd="set ku_licht_fenster dimvalue 200; set ku_licht_fenster color efd275"
class="cell" data-url="./images/avatare/87_bulb_warm_7.png"
data-size="43px"
></div>
</div>
<div class="inline">
<div data-type="image"
data-fhem-cmd="set ku_licht_fenster dimvalue 254; set ku_licht_fenster color efd275"
class="cell" data-url="./images/avatare/87_bulb_warm_8.png"
data-size="43px"
></div>
</div>
</div>
<div class="cell newline">
<div class="inline">
<div data-type="image"
data-fhem-cmd="set ku_licht_fenster color f1e0b5"
class="cell" data-url="./images/avatare/87_bulb_coldwarm.png"
data-size="43px"
></div>
<div data-type="label"
class="narrow">Alltag
</div>
</div>
<div class="inline">
<div data-type="image"
data-fhem-cmd="set ku_licht_fenster color f5faf6"
class="cell" data-url="./images/avatare/87_bulb_cold.png"
data-size="43px"
></div>
<div data-type="label"
class="narrow">Fokus
</div>
</div>
<div class="inline">
<div data-type="image"
data-fhem-cmd="set ku_licht_fenster color efd275"
class="cell" data-url="./images/avatare/87_bulb_warm.png"
data-size="43px"
></div>
<div data-type="label"
class="narrow">Entspannung
</div>
</div>
</div>
<div class="cell newline">
<div class="inline">
<div data-type="image"
onclick="$('#popup_ku_1.dialog-close').trigger('click');"
class="cell" data-url="./images/avatare/43_check.png"
data-size="33px"
></div>
<div data-type="label"
class="narrow">Schliessen
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Beispiel 3 (90.jpg):
<div class="inline">
<div class="" data-type="popup" id="popup_ku_1" data-height="580px" data-width="650px">
<div class=""
data-type="symbol"
data-icon="fa-lightbulb-o"
data-device="ku_licht_fenster"
data-get="dimvalue"
data-get-on="1"
data-states='["0","1","50","100","150","200","254"]'
data-background-icons='["fa-circle","fa-circle","fa-circle","fa-circle","fa-circle","fa-circle","fa-circle"]'
data-color="#303030"
data-on-background-colors='["#505050","orange","orange","orange","orange","orange","orange"]'
data-off-background-color="#505050"
></div>
<div class="narrow">Küche</div>
<div class="dialog dialogTransparent">
<header class="dialogheaderTransparent">Licht Küche Fenster</header>
<div class="top-space">
<div class="inline">
<div data-type="image"
data-fhem-cmd="set ku_licht_fenster dimvalue 0"
onclick="$('#popup_ku_1.dialog-close').trigger('click');"
class="cell" data-url="./images/avatare/87_bulb_off.png"
data-size="43px"
></div>
<div data-type="label"
class="narrow">Aus
</div>
</div>
<div class="inline">
<div data-type="image"
data-fhem-cmd="set ku_licht_fenster dimvalue 1"
class="cell" data-url="./images/avatare/87_bulb_1.png"
data-size="43px"
></div>
<div data-type="label"
class="narrow">1
</div>
</div>
<div class="inline">
<div data-type="image"
data-fhem-cmd="set ku_licht_fenster dimvalue 50"
class="cell" data-url="./images/avatare/87_bulb_4.png"
data-size="43px"
></div>
<div data-type="label"
class="narrow">20
</div>
</div>
<div class="inline">
<div data-type="image"
data-fhem-cmd="set ku_licht_fenster dimvalue 100"
class="cell" data-url="./images/avatare/87_bulb_5.png"
data-size="43px"
></div>
<div data-type="label"
class="narrow">40
</div>
</div>
<div class="inline">
<div data-type="image"
data-fhem-cmd="set ku_licht_fenster dimvalue 150"
class="cell" data-url="./images/avatare/87_bulb_6.png"
data-size="43px"
></div>
<div data-type="label"
class="narrow">60
</div>
</div>
<div class="inline">
<div data-type="image"
data-fhem-cmd="set ku_licht_fenster dimvalue 200"
class="cell" data-url="./images/avatare/87_bulb_7.png"
data-size="43px"
></div>
<div data-type="label"
class="narrow">80
</div>
</div>
<div class="inline">
<div data-type="image"
data-fhem-cmd="set ku_licht_fenster dimvalue 254"
class="cell" data-url="./images/avatare/87_bulb_8.png"
data-size="43px"
></div>
<div data-type="label"
class="narrow">100
</div>
</div>
<div class="cell newline">
<div class="inline">
<div data-type="image"
data-fhem-cmd="set ku_licht_fenster dimvalue 0; set ku_licht_fenster color f1e0b5"
onclick="$('#popup_ku_1.dialog-close').trigger('click');"
class="cell" data-url="./images/avatare/87_bulb_off.png"
data-size="43px"
></div>
<div data-type="label"
class="narrow">Aus
</div>
</div>
<div class="inline">
<div data-type="image"
data-fhem-cmd="set ku_licht_fenster dimvalue 1; set ku_licht_fenster color f1e0b5"
class="cell" data-url="./images/avatare/87_bulb_coldwarm_1.png"
data-size="43px"
></div>
<div data-type="label"
class="narrow">1
</div>
</div>
<div class="inline">
<div data-type="image"
data-fhem-cmd="set ku_licht_fenster dimvalue 50; set ku_licht_fenster color f1e0b5"
class="cell" data-url="./images/avatare/87_bulb_coldwarm_4.png"
data-size="43px"
></div>
<div data-type="label"
class="narrow">20
</div>
</div>
<div class="inline">
<div data-type="image"
data-fhem-cmd="set ku_licht_fenster dimvalue 100; set ku_licht_fenster color f1e0b5"
class="cell" data-url="./images/avatare/87_bulb_coldwarm_5.png"
data-size="43px"
></div>
<div data-type="label"
class="narrow">40
</div>
</div>
<div class="inline">
<div data-type="image"
data-fhem-cmd="set ku_licht_fenster dimvalue 150; set ku_licht_fenster color f1e0b5"
class="cell" data-url="./images/avatare/87_bulb_coldwarm_6.png"
data-size="43px"
></div>
<div data-type="label"
class="narrow">60
</div>
</div>
<div class="inline">
<div data-type="image"
data-fhem-cmd="set ku_licht_fenster dimvalue 200; set ku_licht_fenster color f1e0b5"
class="cell" data-url="./images/avatare/87_bulb_coldwarm_7.png"
data-size="43px"
></div>
<div data-type="label"
class="narrow">80
</div>
</div>
<div class="inline">
<div data-type="image"
data-fhem-cmd="set ku_licht_fenster dimvalue 254; set ku_licht_fenster color f1e0b5"
class="cell" data-url="./images/avatare/87_bulb_coldwarm_8.png"
data-size="43px"
></div>
<div data-type="label"
class="narrow">100
</div>
</div>
</div>
<div class="cell newline">
<div class="inline">
<div data-type="image"
data-fhem-cmd="set ku_licht_fenster dimvalue 0; set ku_licht_fenster color f5faf6"
onclick="$('#popup_ku_1.dialog-close').trigger('click');"
class="cell" data-url="./images/avatare/87_bulb_off.png"
data-size="43px"
></div>
<div data-type="label"
class="narrow">Aus
</div>
</div>
<div class="inline">
<div data-type="image"
data-fhem-cmd="set ku_licht_fenster dimvalue 1; set ku_licht_fenster color f5faf6"
class="cell" data-url="./images/avatare/87_bulb_cold_1.png"
data-size="43px"
></div>
<div data-type="label"
class="narrow">1
</div>
</div>
<div class="inline">
<div data-type="image"
data-fhem-cmd="set ku_licht_fenster dimvalue 50; set ku_licht_fenster color f5faf6"
class="cell" data-url="./images/avatare/87_bulb_cold_4.png"
data-size="43px"
></div>
<div data-type="label"
class="narrow">20
</div>
</div>
<div class="inline">
<div data-type="image"
data-fhem-cmd="set ku_licht_fenster dimvalue 100; set ku_licht_fenster color f5faf6"
class="cell" data-url="./images/avatare/87_bulb_cold_5.png"
data-size="43px"
></div>
<div data-type="label"
class="narrow">40
</div>
</div>
<div class="inline">
<div data-type="image"
data-fhem-cmd="set ku_licht_fenster dimvalue 150; set ku_licht_fenster color f5faf6"
class="cell" data-url="./images/avatare/87_bulb_cold_6.png"
data-size="43px"
></div>
<div data-type="label"
class="narrow">60
</div>
</div>
<div class="inline">
<div data-type="image"
data-fhem-cmd="set ku_licht_fenster dimvalue 200; set ku_licht_fenster color f5faf6"
class="cell" data-url="./images/avatare/87_bulb_cold_7.png"
data-size="43px"
></div>
<div data-type="label"
class="narrow">80
</div>
</div>
<div class="inline">
<div data-type="image"
data-fhem-cmd="set ku_licht_fenster dimvalue 254; set ku_licht_fenster color f5faf6"
class="cell" data-url="./images/avatare/87_bulb_cold_8.png"
data-size="43px"
></div>
<div data-type="label"
class="narrow">100
</div>
</div>
</div>
<div class="cell newline">
<div class="inline">
<div data-type="image"
data-fhem-cmd="set ku_licht_fenster dimvalue 0; set ku_licht_fenster color efd275"
onclick="$('#popup_ku_1.dialog-close').trigger('click');"
class="cell" data-url="./images/avatare/87_bulb_off.png"
data-size="43px"
></div>
<div data-type="label"
class="narrow">Aus
</div>
</div>
<div class="inline">
<div data-type="image"
data-fhem-cmd="set ku_licht_fenster dimvalue 1; set ku_licht_fenster color efd275"
class="cell" data-url="./images/avatare/87_bulb_warm_1.png"
data-size="43px"
></div>
<div data-type="label"
class="narrow">1
</div>
</div>
<div class="inline">
<div data-type="image"
data-fhem-cmd="set ku_licht_fenster dimvalue 50; set ku_licht_fenster color efd275"
class="cell" data-url="./images/avatare/87_bulb_warm_4.png"
data-size="43px"
></div>
<div data-type="label"
class="narrow">20
</div>
</div>
<div class="inline">
<div data-type="image"
data-fhem-cmd="set ku_licht_fenster dimvalue 100; set ku_licht_fenster color efd275"
class="cell" data-url="./images/avatare/87_bulb_warm_5.png"
data-size="43px"
></div>
<div data-type="label"
class="narrow">40
</div>
</div>
<div class="inline">
<div data-type="image"
data-fhem-cmd="set ku_licht_fenster dimvalue 150; set ku_licht_fenster color efd275"
class="cell" data-url="./images/avatare/87_bulb_warm_6.png"
data-size="43px"
></div>
<div data-type="label"
class="narrow">60
</div>
</div>
<div class="inline">
<div data-type="image"
data-fhem-cmd="set ku_licht_fenster dimvalue 200; set ku_licht_fenster color efd275"
class="cell" data-url="./images/avatare/87_bulb_warm_7.png"
data-size="43px"
></div>
<div data-type="label"
class="narrow">80
</div>
</div>
<div class="inline">
<div data-type="image"
data-fhem-cmd="set ku_licht_fenster dimvalue 254; set ku_licht_fenster color efd275"
class="cell" data-url="./images/avatare/87_bulb_warm_8.png"
data-size="43px"
></div>
<div data-type="label"
class="narrow">100
</div>
</div>
</div>
<div class="cell newline">
<div class="inline">
<div data-type="image"
data-fhem-cmd="set ku_licht_fenster color f1e0b5"
class="cell" data-url="./images/avatare/87_bulb_coldwarm.png"
data-size="43px"
></div>
<div data-type="label"
class="narrow">Alltag
</div>
</div>
<div class="inline">
<div data-type="image"
data-fhem-cmd="set ku_licht_fenster color f5faf6"
class="cell" data-url="./images/avatare/87_bulb_cold.png"
data-size="43px"
></div>
<div data-type="label"
class="narrow">Fokus
</div>
</div>
<div class="inline">
<div data-type="image"
data-fhem-cmd="set ku_licht_fenster color efd275"
class="cell" data-url="./images/avatare/87_bulb_warm.png"
data-size="43px"
></div>
<div data-type="label"
class="narrow">Entspannung
</div>
</div>
</div>
<div class="cell newline">
<div class="inline">
<div data-type="image"
onclick="$('#popup_ku_1.dialog-close').trigger('click');"
class="cell" data-url="./images/avatare/43_check.png"
data-size="33px"
></div>
<div data-type="label"
class="narrow">Schliessen
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Finde ich garnicht so schlecht. Bevor man an verschiedenen Rädern dreht und stellt, bis das Licht passt, hat man so mit zwei mal drücken gleich die richtige Einstellung.
Allerdings würde ich das als Template bauen, das spart viel Arbeit.