set color based on value

[Venzent]

I searched the forum, but cannot find the right answer.
I want to change the color of a icon when a value of the sensor is between 2 values.
For example, if the value is above 85 it must be green, if it is between 75 and 85 orange, and below 75 it must be red.
I can find some examples with on-off states, but not multiple colors on pre-defined values and ranges.
Some example would be nice.

[Lokonli]

Below an example of a combined temperature/humidity device with index 56.
Define the styles you want to apply in custom.css:

Code: Select all

.warningred {
  color: red !important;
}
.warningorange {
  color: orange !important;
}
.warninggreen {
  color: green !important;
}

In custom.js define the function afterGetDevices() as follows:

Code: Select all

function afterGetDevices(){
	 if ((alldevices[56].Temp>=75) && (alldevices[56].Temp<85)) {
		$('.block_56_1 .col-icon').addClass('warningorange');
	 }	
	 if (alldevices[56].Temp<75) {
		$('.block_56_1 .col-icon').addClass('warninggreen');
	 }	
	if (alldevices[56].Temp>=85) {
		$('.block_56_1 .col-icon').addClass('warningred');
	 }
}	

If you have just a single value device, you can use block_56 instead of block_56_1.
Depending on the kind of device you are using you may change alldevices[56].Temp to something applicable for your device.

[HansieNL]

I have same kind of question. I have a text block and want to change it depending on message. This is what I have done so far:
In custom.js:

Code: Select all

//Buienradar
function getStatus_345(idx,value,device){
  if(device['Data']=="Voorlopig droog") {
            $('div.block_345').addClass('off-stat');
            $('.block_345 .col-icon').addClass('off-ico');
    }
    else {
            $('div.block_345').removeClass('off-stat');
            $('.block_345 .col-icon').removeClass('off-ico');
    }
}

In custom.css:

Code: Select all

.off-stat {
    color: #6A6A6A;
}
.off-ico {
    opacity: 0.4 !important;
}

The title and value text change color, but the icon color (png image) does not change.
Please advice how to solve this.
Thanks in advance.

[Lokonli]

I have same kind of question. I have a text block and want to change it depending on message. This is what I have done so far:
In custom.js:

Code: Select all

//Buienradar
function getStatus_345(idx,value,device){
  if(device['Data']=="Voorlopig droog") {
            $('div.block_345').addClass('off-stat');
            $('.block_345 .col-icon').addClass('off-ico');
    }
    else {
            $('div.block_345').removeClass('off-stat');
            $('.block_345 .col-icon').removeClass('off-ico');
    }
}

In custom.css:

Code: Select all

.off-stat {
    color: #6A6A6A;
}
.off-ico {
    opacity: 0.4 !important;
}

The title and value text change color, but the icon color (png image) does not change.
Please advice how to solve this.
Thanks in advance.

Dashticz regenerates the icon (and data part) of a block after calling the getStatus function. As a side-effect the off-ico class you applied disappears as well. (block_345 itself doesnt get recreated so the off-stat class persists)

The afterGetDevices function gets called after creating the icon part, so you should use that one if you want to change the icon. If you need an example let me know.

[HansieNL]

Dashticz regenerates the icon (and data part) of a block after calling the getStatus function. As a side-effect the off-ico class you applied disappears as well. (block_345 itself doesnt get recreated so the off-stat class persists)

The afterGetDevices function gets called after creating the icon part, so you should use that one if you want to change the icon. If you need an example let me know.

@Lokonli: Thanks for the help. This is code is working ok:

Code: Select all

//Buienradar
function afterGetDevices(){
    if (alldevices[345].Data == 'Voorlopig droog') {
            $('.block_345 .col-icon').addClass('off-ico');
            $('.block_345 .col-data').addClass('off-stat');
    }
    else {
            $('.block_345 .col-icon').removeClass('off-ico');
            $('.block_345 .col-data').removeClass('off-stat');
    }
}

[HansieNL]

@Lokonli: I wanna change the off color for the blocks Kodi Media Server and StreamPlayer too if possible. I don't have an idea how to fix this. Can you help to fix this please. Thanks in advance.

@Lokonli: Kodi Media Server off color already fixed by using a virtual on/of switch.
Would be great if StreamPlayer can have off color when not playing.

[HansieNL]

Someone who knows how to set Streamplayer off color?
This is what I already tried, but that doesn't work:

Code: Select all

if (alldevices[streamplayer].audio != 'play') {
  $('div.streamplayer').addClass('pause-stat');
}
else {
  $('div.streamplayer').removeClass('pause-stat');
}

[Venzent]

Below an example of a combined temperature/humidity device with index 56.
Define the styles you want to apply in custom.css:

Code: Select all

.warningred {
  color: red !important;
}
.warningorange {
  color: orange !important;
}
.warninggreen {
  color: green !important;
}

In custom.js define the function afterGetDevices() as follows:

Code: Select all

function afterGetDevices(){
	 if ((alldevices[56].Temp>=75) && (alldevices[56].Temp<85)) {
		$('.block_56_1 .col-icon').addClass('warningorange');
	 }	
	 if (alldevices[56].Temp<75) {
		$('.block_56_1 .col-icon').addClass('warninggreen');
	 }	
	if (alldevices[56].Temp>=85) {
		$('.block_56_1 .col-icon').addClass('warningred');
	 }
}	

If you have just a single value device, you can use block_56 instead of block_56_1.
Depending on the kind of device you are using you may change alldevices[56].Temp to something applicable for your device.

Hi Lokonli,
Thanks for the code. I did not find the time yet to implement and test it. But would like to let you know I I've seen it and will try it asap.

[Lokonli]

Someone who knows how to set Streamplayer off color?
This is what I already tried, but that doesn't work:

Code: Select all

if (alldevices[streamplayer].audio != 'play') {
  $('div.streamplayer').addClass('pause-stat');
}
else {
  $('div.streamplayer').removeClass('pause-stat');
}

The streamplayer block is not a Domoticz device, but functionality from Dashticz. Changing the appearance of the block via custom.js requires quite some hacking.

A cleaner solution is to add the playing state as a class to the streamplayer block. Then the styling can be changed easily via custom.css.

I will make the change. It will be merged in the next beta version of Dashticz.

[HansieNL]

I will make the change. It will be merged in the next beta version of Dashticz.

Thanks. That’ll make my dashboard almost complete.

[jaaap]

Hi all,

I want a UV index alert sensor to get a color according to its value. For instance, if the UV is >= 6 I want the title of the block to be red. I tried several things but have not succeeded yet. Here's the code I added to the custom.js:

Code: Select all

function afterGetDevices(){

   // Warnings UV index
         
	 if (alldevices[165].Data>=6) {
		$('.block_165' .title).addClass('warningred');
	 }
         if ((alldevices[165].Data >= 5) && (alldevices[165].Data<6)) {
		$('.block_165 .title').addClass('warningorange');
	 }	
         if ((alldevices[165].Data >= 4) && (alldevices[165].Data<5)) {
		$('.block_165 .title').addClass('warningyellow');
	 }
	 if (alldevices[165].Data <4) {
		$('.block_165 .title').addClass('warninggreen');
	 }
}

In the CSS file I added:

Code: Select all

.warningred {
  color: red !important;
}
.warningorange {
  color: orange !important;
}
.warningyellow {
  color: yellow !important;
}
.warninggreen {
  color: green !important;
}

Domoticz gives me the following info about the sensor:

Code: Select all

		{
			"AddjMulti" : 1.0,
			"AddjMulti2" : 1.0,
			"AddjValue" : 0.0,
			"AddjValue2" : 0.0,
			"BatteryLevel" : 255,
			"CustomImage" : 0,
			"Data" : "7.4 UVI",
			"Description" : "",
			"Favorite" : 0,
			"HardwareID" : 28,
			"HardwareName" : "UV index",
			"HardwareType" : "OpenUV",
			"HardwareTypeVal" : 94,
			"HaveTimeout" : false,
			"ID" : "001C0003",
			"LastUpdate" : "2020-05-22 08:32:53",
			"Level" : 2,
			"Name" : "UV index - UV Max",
			"Notifications" : "false",
			"PlanID" : "0",
			"PlanIDs" : 
			[
				0
			],
			"Protected" : false,
			"ShowNotifications" : true,
			"SignalLevel" : "-",
			"SubType" : "Alert",
			"Timers" : "false",
			"Type" : "General",
			"TypeImg" : "Alert",
			"Unit" : 3,
			"Used" : 1,
			"XOffset" : "0",
			"YOffset" : "0",
			"idx" : "165"
		},

Any ideas where I'm going wrong?

[Lokonli]

There is a small typo in the beginning:

Code: Select all

		$('.block_165' .title).addClass('warningred');

should be:

Code: Select all

		$('.block_165 .title').addClass('warningred');

Further, Data is a string (=text). You first have to create a number from it via:

Code: Select all

  var value = parseFloat(alldevices[165].Data);
 

and then in the if statements you can use:

Code: Select all

if (value>=6) {

The only disadvantage is that this is not very efficient: the code gets called at every device update. (but probably not really a problem)
You could rewrite it to a getStatus_165() function. See some examples in the documentation (beta version!)

[jaaap]

There is a small typo in the beginning:

Code: Select all

		$('.block_165' .title).addClass('warningred');

should be:

Code: Select all

		$('.block_165 .title').addClass('warningred');

Further, Data is a string (=text). You first have to create a number from it via:

Code: Select all

  var value = parseFloat(alldevices[165].Data);
 

and then in the if statements you can use:

Code: Select all

if (value>=6) {

The only disadvantage is that this is not very efficient: the code gets called at every device update. (but probably not really a problem)
You could rewrite it to a getStatus_165() function. See some examples in the documentation (beta version!)

Ouch! A typo...that's painful I got it working now, thanks! Only the getStatus_165() is still a mystery to me. More to look into the coming evenings

[Ierlandfan]

What if I want to change the background of the block based on value?
Do I define those in custom.css and if how?

Code: Select all

div.mh.transbg.block_275.col-xs-4.on

(On)

Code: Select all

div.mh.transbg.block_275.col-xs-4.off

(Off)

[Lokonli]

yes, in custom.css. Try:

Code: Select all

.block_275.on {
  background-color: red !important
}

.block_275.off {
  background-color: green !important
}

[Lokonli]

This is only for the on/off state of switches.
If you want to change the styling based on the value (like temperature) you have to use custom.js
See the documentation for some examples:
https://dashticz.readthedocs.io/en/beta ... -idx-block

[Ierlandfan]

The custom.css code did the trick! Small minor question: Can it be done for all blocks in custom.css instead of defining it for each individual block?

[Lokonli]

The custom.css code did the trick! Small minor question: Can it be done for all blocks in custom.css instead of defining it for each individual block?

'.block_275' is indeed a specific block selector.
Luckily all Domoticz block also have the class '.mh' attached, so the following should work if you want to apply the styling to all blocks at once:

Code: Select all

.mh.on {
  background-color: red !important
}

.mh.off {
  background-color: green !important
}

[Vondee]

I want to change the color of IDX 462 based on the status of IDX 460
but

Code: Select all

function getStatus_460(idx,value,device){
   if(device['Data']=='Off'){
      $('div.block_462').removeClass('warningred');
   }
   else {
      $('div.block_462').addClass('warningred');
   }
}

does not work, how should this be programmed in custom.js?

[Lokonli]

I want to change the color of IDX 462 based on the status of IDX 460
but

Code: Select all

function getStatus_460(idx,value,device){
   if(device['Data']=='Off'){
      $('div.block_462').removeClass('warningred');
   }
   else {
      $('div.block_462').addClass('warningred');
   }
}

does not work, how should this be programmed in custom.js?

https://dashticz.readthedocs.io/en/mast ... -idx-block
https://dashticz.readthedocs.io/en/mast ... ther-block