HMTL Slider controls for RGBW lights (Mi-Light + Others)
I added a HTML5 slider control that allows you change brightness and hue.
Sliding the bar does not work correctly on touch devices, however by tapping the control at the desired position you can control your lights brightness and hue just fine.
Code has been tested on a 10 inch Tablet (Toshiba Encore 2 WT-10) on the chrome browser on a tweaked frontpage.
I give this code as-is, i can't garantuee that it will give you the same accuracy in color selection as i experience
Tweak the code yourself if you run into any problems. if the controls don't stay within their cell, tweak the inline css.
Brightness
Brightness can be controlled with a 1% interval in the range 0-100%
Hue
Hue can be controlled with a interval of 1 degree in the range 0-360
Milight has an offset in the hue of around 24. To correct for this set the plusmin parameter of your device to 100 in the FrontPage settings
Use 101 for other brands of lights if they don't exhibit the same problem
Return to white
To return your lights to white, press and hold on the brightness slider for two seconds.
Installation
In frontpage.js locate the dimmer if statement, search for
Code: Select all
//Dimmer
If (vtype == 'level' && item.SwitchType = 'Dimmer')
Replace the entire if statement with the one below:
Code: Select all
//Dimmer
if(vtype == 'Level' && item.SwitchType == 'Dimmer') {
if(vplusmin > 0 && vplusmin !=2 && vplusmin !=4) {
if (vdata == txt_off) {
if(vplusmin == 1) { //Normal dimmer
var hlp = '<span onclick="SwitchToggle('+item.idx+',\'On\');lightbox_open(\'switch\', '+switch_on_timeout+', '+txt_switch_on+')"; style='+alarmcss+'>'+ vdata+'</span>';
}
if(vplusmin == 100) { //Normal dimmer
var hlp = '<span onclick="SwitchToggle('+item.idx+',\'On\');lightbox_open(\'switch\', '+switch_on_timeout+', '+txt_switch_on+')"; style='+alarmcss+'>'+ vdata+'</span>';
}
if(vplusmin == 5) { //Set ZWave dimmer on certain value from frontpage_settings
z_dimmer = '40';
var hlp = '<span onclick="SwitchDimmer('+item.idx+', '+z_dimmer+');lightbox_open(\'switch\', '+switch_on_timeout+', '+txt_switch_on+')"; style='+alarmcss+'>'+ vdata+'</span>';
//var hlp = '<span onclick="SwitchToggle('+item.idx+',\'On\');lightbox_open(\'switch\', '+switch_on_timeout+', '+txt_switch_on+')"; style='+alarmcss+'>'+ vdata+'</span>';
//End ZWave dimmer
}
//var plus = "<img src=icons/up2.png align=right vspace=12 onclick=ChangeStatus('plus',txt_off," + item.idx + ","+ vdimmercurrent+")>"; //align=right replaced by hspace and vspace
//var min = "<img src=icons/down3.png align=left vspace=12 onclick=ChangeStatus('min',txt_off," + item.idx + ","+ vdimmercurrent+")>" //allign=left
var plus = ""; //no buttons when switch is off
var min = ""; //no buttons when switch is off
}
else if(vplusmin !=2 && vplusmin !=4) {
if (item.MaxDimLevel == 100) {
//For ZWave dimmer
if(vplusmin == 5 && item.idx == idx_zdimmer) { //compare idx_zdimmer with z_whichdimmer if there are more zdimmers
//vdata = z_dimmer;
vdimmervalue = Math.round(vdimmervalue / 10)*10; //round to ten
if(z_dimmer == '') { //when starting the frontpage
vdata = vdimmervalue; //show current dim value
} else if (z_dimmer != vdimmervalue) { //when dimmer is changed
vdata = z_dimmer;
z_dimmer = vdimmervalue;
} else {
vdata = z_dimmer;
}
var hlp = '<span onclick="SwitchToggle('+item.idx+', \'Off\');lightbox_open(\'switch\', '+switch_off_timeout+', '+txt_switch_off+')"; style='+alarmcss+'>'+ vdata+'</span>';
var plus = "<img src=icons/up2.png align=right vspace=12 onclick=ZWaveDim('plus'," + vdata + "," + item.idx + ")>";
var min = "<img src=icons/down3.png align=left vspace=12 onclick=ZWaveDim('min'," + vdata + "," + item.idx + ")>";
//console.log(vdata + " | " + item.idx);
}
else if(vplusmin == 100) { //html5 slider bar for milight lights
if (typeof hue_array[item.idx] == 'undefined'){
hue_array[item.idx]=360
}
var hlp = '<div style="position:relative;z-index=1000;top:-4px;font-size:initial;line-height:initial"><input onmousedown="startCountToWhite(this.value,' + item.idx + ')" onmouseup="stopCountToWhite()" style="position:relative;top:4px" type="range" min="0" max="' + item.MaxDimLevel +'" value="'+ vdimmercurrent +'" step="2" onChange="ChangeStatus100(this.value,'+item.idx+')" /></div>';
hlp = hlp + '<div style="position:relative;z-index=1000;top:-6px;font-size:initial;line-height:initial"><input style="position:relative;top:4px;-webkit-appearance: none;background: white;background: -webkit-linear-gradient(left, hsl(0,100%,50%),hsl(60,100%, 50%), hsl(120,100%, 50%), hsl(180, 100%, 50%), hsl(240,100%,50%),hsl(300,100%,50%),hsl(360,100%,50%));height:5px" type="range" min="0" max="360" value="' + hue_array[item.idx] +'" step="1" onChange="ChangeHue(this.value,' + vdimmercurrent + ','+item.idx+',24)" /></div>';
var plus = "";
var min = "";
}
else if(vplusmin == 101) { //html5 slider bar for other lights
if (typeof hue_array[item.idx] == 'undefined'){
hue_array[item.idx]=360
}
var hlp = '<div style="position:relative;z-index=1000;top:-4px;font-size:initial;line-height:initial"><input onmousedown="startCountToWhite(this.value,' + item.idx + ')" onmouseup="stopCountToWhite()" style="position:relative;top:4px" type="range" min="0" max="' + item.MaxDimLevel +'" value="'+ vdimmercurrent +'" step="2" onChange="ChangeStatus100(this.value,'+item.idx+')" /></div>';
hlp = hlp + '<div style="position:relative;z-index=1000;top:-6px;font-size:initial;line-height:initial"><input style="position:relative;top:4px;-webkit-appearance: none;background: white;background: -webkit-linear-gradient(left, hsl(0,100%,50%),hsl(60,100%, 50%), hsl(120,100%, 50%), hsl(180, 100%, 50%), hsl(240,100%,50%),hsl(300,100%,50%),hsl(360,100%,50%));height:5px" type="range" min="0" max="360" value="' + hue_array[item.idx] +'" step="1" onChange="ChangeHue(this.value,' + vdimmercurrent + ','+item.idx+',0)" /></div>';
var plus = "";
var min = "";
}
else {
//vdata = o_dimmer;
vdimmervalue = Math.round(vdimmervalue / 10)*10; //round to ten
vdata = vdimmervalue; //show current dim value
var hlp = '<span onclick="SwitchToggle('+item.idx+', \'Off\');lightbox_open(\'switch\', '+switch_off_timeout+', '+txt_switch_off+')"; style='+alarmcss+'>'+ vdata+'</span>';
var plus = "<img src=icons/up2.png align=right vspace=12 onclick=BlindChangeStatus('plus'," + vdata + "," + item.idx + ")>";
var min = "<img src=icons/down3.png align=left vspace=12 onclick=BlindChangeStatus('min'," + vdata + "," + item.idx + ")>";
//console.log(vdata + " | " + item.idx);
}
}
else {
//vdata2 = vdimmervalue; //used for ChangeStatus
//vdimmervalue = Math.round(vdimmervalue / 5)*5; //round to ten
vdata = vdimmervalue; //show current dim value
var hlp = '<span onclick="SwitchToggle('+item.idx+',\'Off\');lightbox_open(\'switch\', '+switch_off_timeout+', '+txt_switch_off+')"; style='+alarmcss+'>'+ vdata+'</span>';
var plus = "<img src=icons/up2.png align=right vspace=12 onclick=ChangeStatus('plus'," + vdata + "," + item.idx + ","+ vdimmercurrent+")>"; //align=right replaced by hspace and vspace
var min = "<img src=icons/down3.png align=left vspace=12 onclick=ChangeStatus('min'," + vdata + "," + item.idx + ","+ vdimmercurrent+")>" //align=left
}
}
}
vdata = min.concat(hlp,plus);
//console.log(vdata);
}
Next, locate the line
And add the following line above it
Next Add the following functions to the frontpage.js file, i added them below the SwitchDimmer function but the location does not matter as long as it's in the script.
Code: Select all
//Color Picker
function ChangeHue(hue,brightness,idx,offset){
var newhue = parseInt(hue) + offset;
if (newhue > 360){
newhue=newhue-360;
}
$.ajax({
url: $.domoticzurl+"/json.htm?type=command¶m=setcolbrightnessvalue&idx=" + idx + "&hue=" + newhue.toString() + "&brightness=" + brightness + "&iswhite=false",
async: false,
dataType: 'json',
success: function(){
console.log('SUCCES');
hue_array[idx]=hue
},
error: function(){
console.log('ERROR');
}
});
}
// Disable
var count = 0;
var t;
var timer_exceeded = 1;
function timeToWhite(brightness,idx) {
if (timer_exceeded == true){
return;
}
if (count == 4){
timer_exceeded=true;
$.ajax({
url: $.domoticzurl+"/json.htm?type=command¶m=setcolbrightnessvalue&idx=" + idx + "&hue=0&brightness=" + brightness + "&iswhite=true",
async: false,
dataType: 'json',
success: function(){
console.log('SUCCES');
hue_array[idx]=0
},
error: function(){
console.log('ERROR');
}
});
}
else{
count = count + 1;
t = setTimeout(function(){ timeToWhite(brightness,idx) }, 1000);
}
}
function startCountToWhite(brightness,idx) {
count = 0;
timer_exceeded=false;
timeToWhite(brightness,idx);
}
function stopCountToWhite() {
timer_exceeded=1;
}
function ChangeStatus100(level,idx){
$.ajax({
url: $.domoticzurl+"/json.htm?type=command¶m=switchlight&idx=" + idx + "&switchcmd=Set Level&level=" + level,
async: false,
dataType: 'json',
success: function(){
console.log('SUCCES');
},
error: function(){
console.log('ERROR');
}
});
}
Visuals on Chrome Browser

- rgbw chrome.PNG (136.62 KiB) Viewed 3098 times
Visuals on Edge Browser

- rgbw edge.PNG (75.17 KiB) Viewed 3098 times
In frontpage_settings.js locate your RGBW control entry and change the plusmin parameter to 100 for milight or 101 for other lights e.g.
Code: Select all
['98','Level', 'cell10', 'Lamp Zithoek','1','100']
If you can't get it to work, backup yout frontpage.js file and replace it with the one i've attached to this post