Dynamically change individual colours of On and Off ui switch Custom icons

[PdeJ]

Based on the guidance by jbudd I have deduced that the colour of a Custom icon can be set dynamically by passing a message to the switch node which in my example includes msg.className "SUCCESS" with a ui_template of

<style>

    md-card.nr-dashboard-switch.SUCCESS ng-md-icon {
        color:red;  
    }
    
</style> 

However, this will set the colour of both the On and Off Custom icons. Is there a way to specifically address the individual Custom icons?

[Steve-Mcl]

What does the html look like when in these 2 different states? Perhaps you can use a more specific selector for the css (it depends on how the html is generated)

[PdeJ]

I've looked through the html with web developer tools but I can't see anything that is specific to the individual Custom icons.

<ng-md-icon ng-if="iconType===='angular-material'" icon="face">

[PdeJ]

In the other state the icon is "power"

[Steve-Mcl]

then there you have a difference. You can probably make a CSS selector specific to the differences.

e.g...

md-card.nr-dashboard-switch.SUCCESS ng-md-icon[icon="face"] {
    color:red;  
}

md-card.nr-dashboard-switch.SUCCESS ng-md-icon[icon="power"] {
    color:blue;  
}

untested

[PdeJ]

Thanks so much, I didn't know how to make such a CSS selector.

[jbudd]

You can style individual dashboard widgets using their node-id like this

[node-id="041ba93a7486200e"].SUCCESS {
    background-color: gold;
}
[node-id="041ba93a7486200e"].FAILURE {
    background-color: teal;
}

Use the Info tab in the right hand column to get the node ID

[PdeJ]

Thanks, even more enlightening. The first suggestion enables one to independently set the colour of the Custom icon within the widget ui_switch, while the second suggestion sets the colour of the widget but not the Custom icon.

Thanks again.

[jbudd]

Yes. I didn't address the icon specifically but you can change the CSS selector to refer to whatever aspect of the widget you want.
I am sure you can combine both suggestions but without a picture of the sort of dashboard you are making I can't imagine how it would work.

Edit - determining CSS selectors.
There may be a better way to do this, if someone knows one please enlighten me!
Using the browser "Inspect" option you can select a screen element and see it's properties.
Using right click, copy CSS Path.

For the widget shown I get this

html body#nr-dashboard.nr-dashboard-theme.layout-column md-content._md.layout-column.flex section.layout-row.flex md-content._md.flex div#Tab_Demo.masonry-container ui-card-panel#Demo_demo.visible div.nr-dashboard-cardpanel.layout-column div#Demo_demo_cards.nr-dashboard-cardcontainer md-card.nr-dashboard-switch._md.layout-align-space-between-center.layout-row.HEATER.visible

I'm not interested in anything before md-card, so that cuts it down to

md-card.nr-dashboard-switch._md.layout-align-space-between-center.layout-row.HEATER.visible

Generally I keep md-card, the type of widget and my applied class and throw away the rest.

md-card.nr-dashboard-switch.HEATER

This is what my CSS code should target.

md-card.nr-dashboard-switch.HEATER {
border: 1px solid red;
}

I have found that including md-card sometimes makes the difference between needing !important or not. I don't know why.
I am also ignorant if it makes a difference including spaces and "div." in the selector.

[PdeJ]

I am controlling x3 433MHz remote control sockets via a PICO from Node Red on a raspberry Pi. Each switch can send a specific on or off code for each remote by a Http Request node. Sometimes because of local conditions the Http Request is unresponsive, resulting in several requests, while host unreachable can be picked up by an error, it is preferable that the switch can show 3 conditions, an off condition, Http Requesting, and Successfully reached. Now that I know how to set the colour of the icon, my objectives should now be attainable. Of course there is no way of knowing whether the Remote has responded, but at least one of weak links in the system is detectable.

[jbudd]

@PdeJ

Of course there is no way of knowing whether the Remote has responded

Can you request a status report from them?
I use MQTT rather than HTTP and my smart sockets use Tasmota.
I send a message "ON" and they (hopefully) respond "ON".
I can also periodically send "STATUS" which returns a status message including "ON". That way the dashboard can reflect presses on the physical button on the socket.

[PdeJ]

The Remotes are inexpensive 433Mhz remote control socket plugs with a simple hand controller from which the signals have been decoded. So alas I am unable to request a status report.

[stefan24]

You can get smart plugs with tasmota already pre-installed for about 12 Euro.

Tasmota Steckdose NOUS A1T - Kleinste Wlan ESP8266 smart plug. 16A mini wifi...

[PdeJ]

Thanks Stefan, I'll bear them in mind for future projects, but my plug sockets were bought some 15 years ago, so I am just updating their usefulness.

[dynamicdave]

I have an identical set of remote controlled UK mains switches that are in a cupboard gathering dust.
Just interested what hardware you used to "talk" from the Pico via 433MHz to the switches?

[PdeJ]

Hi Dave, the 433Mhz transmitter (FS1000A) and receiver (MX-RM-5V) modules are widely available online. In 2020 I paid less than £6 for thee pairs of modules. The recievers are needed to initially decode the 433 Mhz signals from the hand controller for the socket plugs. I've used them on PICO WH, and on a Pi Zero WH. The range of the transmitter on the Zero seems better than that on the PICO, whether due to individual pecularities of the modules or the raspberry devices. On both devices the transmitter modules are powered by the 5v output. No additional antennas used, but transmits through exterior/interior walls without issue using either the PICO or Pi Zero

The software I used on the PICO to decode and transmit 433 Mhz signals : pico433mhz/src at main · AdrianCX/pico433mhz · GitHub and more info at
GitHub - AdrianCX/pico433mhz: Simple raspberry pi pico 433mhz receiver/transmitter controlled via http

and for the the Pi Zero GitHub - ninjablocks/433Utils: 433Kit is a collection of code and documentation designed to assist you in the connection and usage of RF 433MHz transmit and receive modules to/with your Arduino and Rapberry Pi.

[dynamicdave]

Thanks - I'll look into these documents.