Domoticz

HansieNL wrote: Sunday 19 May 2019 16:20 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 wrote: Sunday 19 May 2019 16:48 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.

//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');
    }
}

Lokonli wrote: Saturday 18 May 2019 17:08 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 wrote: Saturday 25 May 2019 20:55 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');
}

Lokonli wrote: Thursday 30 May 2019 11:02 I will make the change. It will be merged in the next beta version of Dashticz.

Lokonli wrote: Saturday 23 May 2020 23:02 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!)

Ierlandfan wrote: Wednesday 27 May 2020 17:40 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?

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

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

Vondee wrote: Tuesday 17 November 2020 20:18 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?