Background color of block must be color of light

[Enz0jacco]

hey guys,

just wondering, is anyone able to change the background color of a block to the color of the light?
so if the light are on and red the background should be red and if the lights are off the standard background color.

I posted the following question in another post but maybe I get a reaction in this post:
the garbage app is working great, I put a line break between the type of container and the date/day which makes the colon obsolete. Is there any way to remove the colon?

thanx in advance,
Jacco

[Lokonli]

Both are not standard functionality.

You could set the background color via a getStatus function in custom.js. An example for device 20:

Code: Select all

function getStatus_20(block){
	var color = JSON.parse(block.device.Color);
	if (block.device.Data=='On') {
		var colorStr = `rgb(${color.r},${color.g},${color.b})`;
		$(block.mountPoint + ' > div').css('background-color', colorStr)
	}
	else
		$(block.mountPoint + ' > div').css('background-color', '')
}

The colon is the garbage line is more difficult, because it currently is hard coded. I'll add a block parameter for it.

[Enz0jacco]

Thnx Lokonli!
I'll try this out 2night!

[Enz0jacco]

ok I tried the code and it is working thnx !
however the background is only changing when used in domoticz.
so for instance: if I use domoticz or google home to turn on the light the background is not changing.
is there anything to do about that?

thanx again!

[Lokonli]

Little update:

Code: Select all

function getStatus_20(block){
	var color = JSON.parse(block.device.Color);
	if (block.device.Data!='Off') {
		var colorStr = `rgb(${color.r},${color.g},${color.b})`;
		$(block.mountPoint + ' > div').css('background-color', colorStr)
	}
	else
		$(block.mountPoint + ' > div').css('background-color', '')
}

[Enz0jacco]

working like a charm! thank you so much.

im getting the hang of it now so if u are up for another one
is the same possible with only WW light bulbs?

[Lokonli]

working like a charm! thank you so much.

im getting the hang of it now so if u are up for another one
is the same possible with only WW light bulbs?

I guess ...

I only have RGBWW device. Such a device contains the following Color value:

Code: Select all

			"Color" : "{\"b\":0,\"cw\":60,\"g\":0,\"m\":2,\"r\":0,\"t\":195,\"ww\":195}",

So instead of the r,g and b values, you can use the t -value (color temperature), cw value (cold white) or ww value (warm white).

Normally the t value is the same as the ww value.
and cw + ww = 255

Yellow means no blue, so if you would like to change from light-blue to light- yellow you could use something like in the code below. Probably you have to scale the colors a bit:

Code: Select all

function getStatus_20(block){
	var color = JSON.parse(block.device.Color);
	if (block.device.Data!='Off') {
		var yellow=255;
		var blue=255;
		if (color.ww>128) //very warm, so reduce blue
			blue = 255 - color.ww/2+64;
		if (color.cw>128) //very cold, so reduce yellow
			yellow = 255 - color.cw/2+64;
		var colorStr = `rgb(${yellow},${yellow},${blue})`;
		$(block.mountPoint + ' > div').css('background-color', colorStr)
	}
	else
		$(block.mountPoint + ' > div').css('background-color', '')
}

First check whether your ww device also contains a color value with cw and ww values.

[Maikel76]

working like a charm! thank you so much.

im getting the hang of it now so if u are up for another one
is the same possible with only WW light bulbs?

I guess ...

I only have RGBWW device. Such a device contains the following Color value:

Code: Select all

			"Color" : "{\"b\":0,\"cw\":60,\"g\":0,\"m\":2,\"r\":0,\"t\":195,\"ww\":195}",

So instead of the r,g and b values, you can use the t -value (color temperature), cw value (cold white) or ww value (warm white).

Normally the t value is the same as the ww value.
and cw + ww = 255

Yellow means no blue, so if you would like to change from light-blue to light- yellow you could use something like in the code below. Probably you have to scale the colors a bit:

Code: Select all

function getStatus_20(block){
	var color = JSON.parse(block.device.Color);
	if (block.device.Data!='Off') {
		var yellow=255;
		var blue=255;
		if (color.ww>128) //very warm, so reduce blue
			blue = 255 - color.ww/2+64;
		if (color.cw>128) //very cold, so reduce yellow
			yellow = 255 - color.cw/2+64;
		var colorStr = `rgb(${yellow},${yellow},${blue})`;
		$(block.mountPoint + ' > div').css('background-color', colorStr)
	}
	else
		$(block.mountPoint + ' > div').css('background-color', '')
}

First check whether your ww device also contains a color value with cw and ww values.

Hi Lokonli,
I'm using a Philips hue light and am sure I have ww and cw values but unfortunately this code doesn't work on my running Dashticz 3.8.0.2 master
It would be more than awesome if I could make this work, I have a slider like a virtual dimmer device as block 44, could i use something like this then:

Code: Select all

$('.block_44' + ' > div').css('background-color', colorStr)

and how do I implement to apply this on .ui-slider-horizontal ??

Thanks for your answer

[Maikel76]

Tried the original script and a combination of other scripts but this is also not working (also with and without else statement and else with and without {} ):

Code: Select all

 
  //add custom javascript in here   //original
 function afterGetDevices(){           //original
    //function getStatus_42(block){
         var devices = Domoticz.getAllDevices();
         var couch = devices[42];
         var kleur = parseInt(couch.Color);
         if (couch.State=='Set Color') {
                 var yellow=255;
                 var blue=255;
                 if (kleur.ww>128) //very warm, so reduce blue
                         blue = 255 - kleur.ww/2+64;
                 if (kleur.cw>128) //very cold, so reduce yellow
                         yellow = 255 - kleur.cw/2+64;
                 var colorStr = `rgb(${yellow},${yellow},${blue})`;
                 $(block.mountPoint + ' > div').css('background-color', colorStr);
         }
         //else {
         //      $(block.mountPoint + ' > div').css('background-color', '');
         //}
    //}
 ...
}                                                      //original

Is the ' > div' still supported (and what does it do?)
Anyone has any idea??
Please help!

[Lokonli]

Tried the original script and a combination of other scripts but this is also not working (also with and without else statement and else with and without {} ):

Code: Select all

 
  //add custom javascript in here   //original
 function afterGetDevices(){           //original
    //function getStatus_42(block){
         var devices = Domoticz.getAllDevices();
         var couch = devices[42];
         var kleur = parseInt(couch.Color);
         if (couch.State=='Set Color') {
                 var yellow=255;
                 var blue=255;
                 if (kleur.ww>128) //very warm, so reduce blue
                         blue = 255 - kleur.ww/2+64;
                 if (kleur.cw>128) //very cold, so reduce yellow
                         yellow = 255 - kleur.cw/2+64;
                 var colorStr = `rgb(${yellow},${yellow},${blue})`;
                 $(block.mountPoint + ' > div').css('background-color', colorStr);
         }
         //else {
         //      $(block.mountPoint + ' > div').css('background-color', '');
         //}
    //}
 ...
}                                                      //original

Is the ' > div' still supported (and what does it do?)
Anyone has any idea??
Please help!

ok, let's try to do this step by step.

Your Hue lamp is device 42 I guess.

Can you post the output of:

Code: Select all

http://domoticz-ip:port/json.htm?type=devices&rid=42

[Maikel76]

Tried the original script and a combination of other scripts but this is also not working (also with and without else statement and else with and without {} ):

Code: Select all

 
  //add custom javascript in here   //original
 function afterGetDevices(){           //original
    //function getStatus_42(block){
         var devices = Domoticz.getAllDevices();
         var couch = devices[42];
         var kleur = parseInt(couch.Color);
         if (couch.State=='Set Color') {
                 var yellow=255;
                 var blue=255;
                 if (kleur.ww>128) //very warm, so reduce blue
                         blue = 255 - kleur.ww/2+64;
                 if (kleur.cw>128) //very cold, so reduce yellow
                         yellow = 255 - kleur.cw/2+64;
                 var colorStr = `rgb(${yellow},${yellow},${blue})`;
                 $(block.mountPoint + ' > div').css('background-color', colorStr);
         }
         //else {
         //      $(block.mountPoint + ' > div').css('background-color', '');
         //}
    //}
 ...
}                                                      //original

Is the ' > div' still supported (and what does it do?)
Anyone has any idea??
Please help!

ok, let's try to do this step by step.

Your Hue lamp is device 42 I guess.

Can you post the output of:

Code: Select all

http://domoticz-ip:port/json.htm?type=devices&rid=42

Yes, that's correct, it's idx 42
This is my SJON output:

Code: Select all

{
	"ActTime" : 1628866206,
	"AstrTwilightEnd" : "19:55",
	"AstrTwilightStart" : "04:50",
	"CivTwilightEnd" : "19:03",
	"CivTwilightStart" : "05:42",
	"DayLength" : "12:37",
	"NautTwilightEnd" : "19:29",
	"NautTwilightStart" : "05:16",
	"ServerTime" : "2021-08-13 21:50:06",
	"SunAtSouth" : "12:23",
	"Sunrise" : "06:04",
	"Sunset" : "18:41",
	"app_version" : "2021.1",
	"result" : 
	[
		{
			"AddjMulti" : 1.0,
			"AddjMulti2" : 1.0,
			"AddjValue" : 0.0,
			"AddjValue2" : 0.0,
			"BatteryLevel" : 255,
			"Color" : "{\"b\":0,\"cw\":34,\"g\":0,\"m\":2,\"r\":0,\"t\":221,\"ww\":221}",
			"CustomImage" : 0,
			"Data" : "Set Color",
			"Description" : "",
			"DimmerType" : "abs",
			"Favorite" : 1,
			"HardwareDisabled" : false,
			"HardwareID" : 7,
			"HardwareName" : "HueBridge",
			"HardwareType" : "Philips Hue Bridge",
			"HardwareTypeVal" : 38,
			"HaveDimmer" : true,
			"HaveGroupCmd" : false,
			"HaveTimeout" : false,
			"ID" : "1",
			"Image" : "Light",
			"IsSubDevice" : false,
			"LastUpdate" : "2021-08-13 18:41:04",
			"Level" : 89,
			"LevelInt" : 89,
			"MaxDimLevel" : 100,
			"Name" : "HueCouch",
			"Notifications" : "false",
			"PlanID" : "0",
			"PlanIDs" : 
			[
				0
			],
			"Protected" : false,
			"ShowNotifications" : true,
			"SignalLevel" : "-",
			"Status" : "Set Level: 89 %",
			"StrParam1" : "",
			"StrParam2" : "",
			"SubType" : "WW",
			"SwitchType" : "Dimmer",
			"SwitchTypeVal" : 7,
			"Timers" : "false",
			"Type" : "Color Switch",
			"TypeImg" : "dimmer",
			"Unit" : 1,
			"Used" : 1,
			"UsedByCamera" : false,
			"XOffset" : "0",
			"YOffset" : "0",
			"idx" : "42"
		}
	],
	"status" : "OK",
	"title" : "Devices"
}

Thanks a lot

[Lokonli]

Your code tests for

Code: Select all

couch.State=='Set Color'

but in the device info there is no field named 'State'. However, there is a field named 'Data'

So replace the following line:

Code: Select all

         if (couch.State=='Set Color') {

with

Code: Select all

         if (couch.Data=='Set Color') {

I did not test, but maybe this fix is sufficient...

[Maikel76]

Goodmorning Lokonli,
Thanks for your suggestion. Unfortunately it didn't work.
I also noticed the Color in the JSON output seems like JSON too, so, i tried

Code: Select all

var kleur = JSON.parse(couch.Color);

First original and than this code. Unfortunately that also didn't do the trick
Do you have more suggestions?

Have a great Saturday

PS: I used the code that you quoted

[Lokonli]

ok, let's restart.

Assuming that in CONFIG.js you use device 42 in a column, or defined a block like:

Code: Select all

blocks[42] = {
  title: 'My dimmer',
  ...
}

Then add the following to custom.js:

Code: Select all

function getStatus_42(block) {
  var color = JSON.parse(block.device.Color);
  if (block.device.Data != 'Off') {
    var yellow = 255;
    var blue = 255;
    if (color.ww > 128)
      //very warm, so reduce blue
      blue = 255 - color.ww / 2 + 64;
    if (color.cw > 128)
      //very cold, so reduce yellow
      yellow = 255 - color.cw / 2 + 64;
    var colorStr = `rgb(${yellow},${yellow},${blue})`;
    $(block.mountPoint + ' > div').css('background-color', colorStr);
  } else $(block.mountPoint + ' > div').css('background-color', '');
}

This code is working. It will give the dimmer block in Dashticz a background color of more blue or more yellow, depending on the warm white/cold white slider.

First try to get this working. After that we can change the behavior if needed.

Note: So don't use the afterGetDevices function hook for this. (the block parameter is not known. It's more difficult to find the exact device block in the browser window)

[Maikel76]

ok, let's restart.

Assuming that in CONFIG.js you use device 42 in a column, or defined a block like:

Code: Select all

blocks[42] = {
  title: 'My dimmer',
  ...
}

Then add the following to custom.js:

Code: Select all

function getStatus_42(block) {
  var color = JSON.parse(block.device.Color);
  if (block.device.Data != 'Off') {
    var yellow = 255;
    var blue = 255;
    if (color.ww > 128)
      //very warm, so reduce blue
      blue = 255 - color.ww / 2 + 64;
    if (color.cw > 128)
      //very cold, so reduce yellow
      yellow = 255 - color.cw / 2 + 64;
    var colorStr = `rgb(${yellow},${yellow},${blue})`;
    $(block.mountPoint + ' > div').css('background-color', colorStr);
  } else $(block.mountPoint + ' > div').css('background-color', '');
}

This code is working. It will give the dimmer block in Dashticz a background color of more blue or more yellow, depending on the warm white/cold white slider.

First try to get this working. After that we can change the behavior if needed.

Note: So don't use the afterGetDevices function hook for this. (the block parameter is not known. It's more difficult to find the exact device block in the browser window)

Absolutely awesome! It's working wow
Ok, so if i want to change the slider and slider-button can i use

Code: Select all

.ui-slider-horizontal

and another one for the slider-button for this?
Also is it possible to use idx 44 for this? This is a virtual dimmer that has a level from 1-100 where 100 is 100 Kelvin and 1 is 1 Kelvin
This is the JSON output of that virtual dimmer:

Code: Select all

{
	"ActTime" : 1628946726,
	"AstrTwilightEnd" : "19:55",
	"AstrTwilightStart" : "04:50",
	"CivTwilightEnd" : "19:03",
	"CivTwilightStart" : "05:42",
	"DayLength" : "12:36",
	"NautTwilightEnd" : "19:28",
	"NautTwilightStart" : "05:16",
	"ServerTime" : "2021-08-14 20:12:06",
	"SunAtSouth" : "12:22",
	"Sunrise" : "06:04",
	"Sunset" : "18:41",
	"app_version" : "2021.1",
	"result" : 
	[
		{
			"AddjMulti" : 1.0,
			"AddjMulti2" : 1.0,
			"AddjValue" : 0.0,
			"AddjValue2" : 0.0,
			"BatteryLevel" : 255,
			"CustomImage" : 0,
			"Data" : "Set Level: 99 %",
			"Description" : "",
			"DimmerType" : "abs",
			"Favorite" : 1,
			"HardwareDisabled" : false,
			"HardwareID" : 4,
			"HardwareName" : "VirtualSwitches",
			"HardwareType" : "Dummy (Does nothing, use for virtual switches only)",
			"HardwareTypeVal" : 15,
			"HaveDimmer" : true,
			"HaveGroupCmd" : true,
			"HaveTimeout" : false,
			"ID" : "0001407C",
			"Image" : "Light",
			"IsSubDevice" : false,
			"LastUpdate" : "2021-08-14 20:12:00",
			"Level" : 99,
			"LevelInt" : 99,
			"MaxDimLevel" : 100,
			"Name" : "Hue",
			"Notifications" : "false",
			"PlanID" : "0",
			"PlanIDs" : 
			[
				0
			],
			"Protected" : false,
			"ShowNotifications" : true,
			"SignalLevel" : "-",
			"Status" : "Set Level: 99 %",
			"StrParam1" : "",
			"StrParam2" : "",
			"SubType" : "Switch",
			"SwitchType" : "Dimmer",
			"SwitchTypeVal" : 7,
			"Timers" : "false",
			"Type" : "Light/Switch",
			"TypeImg" : "dimmer",
			"Unit" : 1,
			"Used" : 1,
			"UsedByCamera" : false,
			"XOffset" : "0",
			"YOffset" : "0",
			"idx" : "44"
		}
	],
	"status" : "OK",
	"title" : "Devices"
}

Maybe i could read the value of idx 42 as it is working now and change the .ui-slider-horizontal (?) color for this?
I calculate the kelvin color in a domoticz dzVents script from cc to input as value for idx 44 as follows;

Code: Select all

colorcalc = math.floor((maxi-delta/2)+(delta/2)*math.cos((now-offset)*2*math.pi/periode)+0.5)
couch.setKelvin(colorcalc)
hue.setLevel(colorcalc)

Where couch is idx42, the Hue lamp and hue is the virtual dimmer that shows the hue color is Kelvin

Then i have one last question. Is it also possible to change the % in this virtual dimmer idx44 to a the letter K? I tried that with the code in CUSTOM.js but it didnt work there. I tried

Code: Select all

blocks[44] = {title: 'Hue', width: 8, unit: 'K', icon: 'fas fa-sun'}

The unit: code isn't working

Sorry for all questions but very happy already wirh this result

[Lokonli]

Absolutely awesome! It's working wow
Ok, so if i want to change the slider and slider-button can i use

Code: Select all

.ui-slider-horizontal

and another one for the slider-button for this?

In principe yes. I found a small bug (getStatus function was called before the block was updated), so update to the latest beta version first.

After update you can add the following two lines to your code in custom.js:

Code: Select all

      $(block.mountPoint + ' .ui-slider-horizontal').css('background-color', colorStr);
      $(block.mountPoint + ' .ui-slider-handle').css('background-color', colorStr);

Also is it possible to use idx 44 for this? This is a virtual dimmer that has a level from 1-100 where 100 is 100 Kelvin and 1 is 1 Kelvin
This is the JSON output of that virtual dimmer:

Code: Select all

{
	"ActTime" : 1628946726,
	"AstrTwilightEnd" : "19:55",
	"AstrTwilightStart" : "04:50",
	"CivTwilightEnd" : "19:03",
	"CivTwilightStart" : "05:42",
	"DayLength" : "12:36",
	"NautTwilightEnd" : "19:28",
	"NautTwilightStart" : "05:16",
	"ServerTime" : "2021-08-14 20:12:06",
	"SunAtSouth" : "12:22",
	"Sunrise" : "06:04",
	"Sunset" : "18:41",
	"app_version" : "2021.1",
	"result" : 
	[
		{
			"AddjMulti" : 1.0,
			"AddjMulti2" : 1.0,
			"AddjValue" : 0.0,
			"AddjValue2" : 0.0,
			"BatteryLevel" : 255,
			"CustomImage" : 0,
			"Data" : "Set Level: 99 %",
			"Description" : "",
			"DimmerType" : "abs",
			"Favorite" : 1,
			"HardwareDisabled" : false,
			"HardwareID" : 4,
			"HardwareName" : "VirtualSwitches",
			"HardwareType" : "Dummy (Does nothing, use for virtual switches only)",
			"HardwareTypeVal" : 15,
			"HaveDimmer" : true,
			"HaveGroupCmd" : true,
			"HaveTimeout" : false,
			"ID" : "0001407C",
			"Image" : "Light",
			"IsSubDevice" : false,
			"LastUpdate" : "2021-08-14 20:12:00",
			"Level" : 99,
			"LevelInt" : 99,
			"MaxDimLevel" : 100,
			"Name" : "Hue",
			"Notifications" : "false",
			"PlanID" : "0",
			"PlanIDs" : 
			[
				0
			],
			"Protected" : false,
			"ShowNotifications" : true,
			"SignalLevel" : "-",
			"Status" : "Set Level: 99 %",
			"StrParam1" : "",
			"StrParam2" : "",
			"SubType" : "Switch",
			"SwitchType" : "Dimmer",
			"SwitchTypeVal" : 7,
			"Timers" : "false",
			"Type" : "Light/Switch",
			"TypeImg" : "dimmer",
			"Unit" : 1,
			"Used" : 1,
			"UsedByCamera" : false,
			"XOffset" : "0",
			"YOffset" : "0",
			"idx" : "44"
		}
	],
	"status" : "OK",
	"title" : "Devices"
}

Maybe i could read the value of idx 42 as it is working now and change the .ui-slider-horizontal (?) color for this?
I calculate the kelvin color in a domoticz dzVents script from cc to input as value for idx 44 as follows;

Code: Select all

colorcalc = math.floor((maxi-delta/2)+(delta/2)*math.cos((now-offset)*2*math.pi/periode)+0.5)
couch.setKelvin(colorcalc)
hue.setLevel(colorcalc)

Where couch is idx42, the Hue lamp and hue is the virtual dimmer that shows the hue color is Kelvin

Your device 44 contains the information in the field 'Level'.

I do not understand exactly what you try to achieve:

1) set the background color of block 44 based on the value of device 44?
2) set the background color of block 44 based on the value of device 42?
3) set the background color of block 42 based on the value of device 44?

Then i have one last question. Is it also possible to change the % in this virtual dimmer idx44 to a the letter K? I tried that with the code in CUSTOM.js but it didnt work there. I tried

Code: Select all

blocks[44] = {title: 'Hue', width: 8, unit: 'K', icon: 'fas fa-sun'}

The unit: code isn't working

Sorry for all questions but very happy already wirh this result

Add the following to the getStatus function in custom.js to create a custom title based on the device level:

Code: Select all

  block.title=block.device.Level;

and hide the default device info by adding the following to the block definition in CONFIG.js:

Code: Select all

   hide_data: true

[Maikel76]

In principe yes. I found a small bug (getStatus function was called before the block was updated), so update to the latest beta version first.

After update you can add the following two lines to your code in custom.js:

Code: Select all

      $(block.mountPoint + ' .ui-slider-horizontal').css('background-color', colorStr);
      $(block.mountPoint + ' .ui-slider-handle').css('background-color', colorStr);

I updated and the .ui-slider-horizontal is working now, awesome!
The .ui-slider-handle i suppose it the small pinnbutton and it didnt change color, but i like how it looks this way so i don't need it
Then i tried to change the lightbulb with .fas.fa-lightbulb (and .fa-lightbulb) but it didn't work, i can change the background but this code doesn't work;

Code: Select all

$(block.mountPoint + ' .fas.fa-lightbulb').css('color', colorStr);

Your device 44 contains the information in the field 'Level'.

I do not understand exactly what you try to achieve:

1) set the background color of block 44 based on the value of device 44?
2) set the background color of block 44 based on the value of device 42?
3) set the background color of block 42 based on the value of device 44?

Nr 2 so the background colorcode calculated from idx 42 should be set as the backgroundcolor for idx 44

Add the following to the getStatus function in custom.js to create a custom title based on the device level:

Code: Select all

  block.title=block.device.Level;

and hide the default device info by adding the following to the block definition in CONFIG.js:

Code: Select all

   hide_data: true

I changed it to this and now it shows e.g. 7 K

Code: Select all

 block.title=block.device.Level+' K';

The unit code in CUSTOM.js didn't work together with this

So the endresult is that i have a slider background that changes color, but instead of it showing on idx 42 i would like that color on idx 44
Then if possible i would like to change the color of the lightbulb too.
I now have this setup (and disabled for this test);

Code: Select all

.fas.fa-lightbulb {
    color:#FFF8C6;
}
.far.fa-lightbulb {
    color:#FFF8C6;
}

So the above gives me non-changing gold color light bulbs now

Edit: One more question: I see that the color disapears and a later re-apears, is that because the getStatus_42(block) function is not inside the afterGetDevices() function? Can it be changed to keep the color except when it's not 'Off' ?

This looks very promising and it is already looking awesome, thanks for all your help
Hope you can help me with my last questions

[Maikel76]

Edit: One more question: I see that the color disapears and a later re-apears, is that because the getStatus_42(block) function is not inside the afterGetDevices() function? Can it be changed to keep the color except when it's not 'Off' ?

To answer my own question for anyone wants to try this:
rgb values divided gives unworkable values, so rounding them fixed the issue;

Code: Select all

blue = blue.toFixed(0);

after defining blue, same for yellow

Working like a charm now, thanks again @lokonli
another (for me) neat feature I added is;

Code: Select all

} else $(block.mountPoint + ' .ui-slider-horizontal').css('background-color', 'rgba(0,0,0,0.0)');

which makes the slider see-through the same as the light-bulb, when off

Happy new year everyone