Making a warning light controlled by msg.payload?

[a1ex]

I’d like to add warning lights to my dashboard to track when certain events take place.

But I need the lights to have a custom appearance so I prefer not to use existing nodes for this.

My first thought was to use the ui-template mode with svg to create vector circles and with js to control the graphics using msg.payload as a command signal.

But I cannot access msg.payload in my ui-template block.

Is there a better way to do this?

[Steve-Mcl]

@a1ex

But I cannot access msg.payload in my yo-template block

There is an example in the built in help on the sidebar.

[a1ex]

Huge thanks to @BartButenaers for his response (elsewhere) to this question!

The SVG block turned out to be a much better way to do this.

I had actually tried it before but hadn't seen the tutorials for it and assumed it was made just for UI interactions (e.g. to allow users to click buttons and lights).

I see now that it works just as well when you want to control SVG graphics (lights, etc) using just message payloads (e.g., built from data received by TCP connection as in my case, with no interaction with dashboard elements).

Anyway, I accomplished in 30 minutes what I couldn't accomplish in a whole day yesterday, so I'm super excited about this node. Thank you for sharing!

[a1ex]

Omygod I think I'm actually understanding some of what's happening. This is great. This is an entry point for noobs like me to start doing useful things before we've had time to learn it all. That SVG node is priceless. Thank you thank you to the people who made it.

[BartButenaers]

@a1ex

to control SVG graphics (lights, etc)

Alex,
Thanks for the nice feedback!
BTW when you are playing with lights, there are some tutorials on our wiki. And - not sure if that is useful for you - an experiment with light sources in SVG...
Have fun with it!