Object Background's depending of value

[jmir]

Hello!

I have alarm objects and need to change Object's Background to red color when is active, and grey when inactive. I like the default button and I want this to red color.

Is it posible? 

Thanks!

[buuuudzik]

Everything in visualisation is possible via "Custom javascript". Can you give some more info about:
- is this object is shown as text or image?
- if text(what text is for on and what for off)
- if image(what path is to image for on and for off)?

[jmir]

Hi!

The Display mode is: Icon

But this icon is an empty image for ON and OFF.

I have 'Hide Background' unchecked and I have one text over this button.

I want change this button background's color to red when object is ON and get back to grey when OFF.

Thanks!

[admin]

1. Add status-btn to button's Additional classes.
2. Add this to Custom CSS, adjust colors as needed:

Code:

.status-btn.on {
  color: #fff;
  border-color: #900;
  background: #c00;
  background: -webkit-linear-gradient(#a00 0%, #b00 100%);
  background: linear-gradient(#a00 0%, #b00 100%);
}

3. Add this to Custom JavaScript, change 1/1/1 to button group address:

Code:

$(function(){
  if (typeof grp != 'undefined') {
    grp.listen('1/1/1', function(object, state) {
      $('.status-btn').toggleClass('on', object.value);
    });
  }
});

[jmir]

Thanks! 

It works perfect with one Object but i Have 50 objects and All of them are turning RED if only one is in Alarm!

How can I do it ? Need to create one class per object or is there another solution?

Lot of Thanks!

[admin]

Have you considered just using a custom icon for this?

[jmir]

I have considered but I didn't want to do that.

Now it's OK thanks!!