Reverse On/Off icon

[madpatrick]

Hi,

Is it possible to reverse the status of On / Off?
If the swtich is off then the iconis faded, but i like to have the changed to highlighted for some switches

[waltervl]

You could make an inverted custom icon for these switches. https://www.domoticz.com/wiki/Custom_ic ... binterface.

Edit: Now I see it is for Dasticz so you probably can ignore my answer.

[Lokonli]

Hi,

Is it possible to reverse the status of On / Off?
If the swtich is off then the iconis faded, but i like to have the changed to highlighted for some switches

You can do that via styling in custom.css.

If you have defined your block via:

Code: Select all

blocks[1324] = {
...
}

Then add the following to custom.css:

Code: Select all

[data-id="1324"] .off.icon {
    opacity: 1 !important;
}

[data-id="1324"] .on.icon {
    opacity: 0.2 !important;
}

or, use the addClass block parameter, and define relevant css classes in custom.js

[habahabahaba]

Yes, its possible if the device supports icon change.

You have to do the icons by yourself and add them via web interface - Setup -> More options -> Custom Icons.

https://domoticz.com/wiki/Custom_icons_for_webinterface - wki

https://drive.google.com/drive/folders/ ... KXRcuCsJWQ - icons pack

[madpatrick]

Hi,

Is it possible to reverse the status of On / Off?
If the swtich is off then the iconis faded, but i like to have the changed to highlighted for some switches

You can do that via styling in custom.css.

If you have defined your block via:

Code: Select all

blocks[1324] = {
...
}

Then add the following to custom.css:

Code: Select all

[data-id="1324"] .off.icon {
    opacity: 1 !important;
}

[data-id="1324"] .on.icon {
    opacity: 0.2 !important;
}

or, use the addClass block parameter, and define relevant css classes in custom.js

Thanks
This is working fine with an icon.
How cani do it for an img ?

I can change the size for the imange, but on/off is not working

Code: Select all

.block_673 img					{max-width: 60px !important;}
.block_673 .off.img				{opacity: 1 !important;}

[Lokonli]

For images (images you use on the position of an icon) you can also just use:

Code: Select all

.block_673 .off.icon {
   opacity: 1 !important
}

Alternative, use addClass, like below:

In your block definition in CONFIG.js, for each block with inverted state styling:

Code: Select all

blocks[673] = {
   addClass: 'invertedstatestyle'
}

And in custom.css, only once:

Code: Select all

.invertedstatestyle .on.icon {
   opacity: 0.4 !important
 }
 
 .invertedstatestyle .off.icon {
   opacity: 1 !important
 }
 
 

[madpatrick]

For images (images you use on the position of an icon) you can also just use:

Code: Select all

.block_673 .off.icon {
   opacity: 1 !important
}

Alternative, use addClass, like below:

In your block definition in CONFIG.js, for each block with inverted state styling:

Code: Select all

blocks[673] = {
   addClass: 'invertedstatestyle'
}
[/quote]
This is working.
Not sure why it didn't work earlier

Thanks for the support !

[madpatrick]

For images (images you use on the position of an icon) you can also just use:

Code: Select all

.block_673 .off.icon {
   opacity: 1 !important
}

This is working.
Not sure why it didn't work earlier

Thanks for the support !