Dashboard background Change?

[omerhuso]

Hello there,
ı am a university student and currently doing my summer internship programme. My project is to read "OMRON PLC İNPUTS AND MAKE A SCADA VİA DASHBOARD". I manage to read plc outputs and use them to glow led depending on the boolean (if true green if false red led glow). and ı need to put those leds on templete . I thought that would be easy if ı change the basic backgound with the production line drawing and put leds on that background. but ı cannot change the background with my drawings. As ı am an intern and ı just learned node-red one week ago I dont know if this is even possible. I attached the example project and it was not made using node-red. I want to make this on node-red.

[smanjunath211]

Creating SCADA-Like User Interfaces For Node-RED

[dynamicdave]

It might be worth taking a look at the SVG node (there are loads of examples that should help).

node-red-contrib-ui-svg

I've used it to place an image as a background on the dashboard, then change the colour of what looks like LEDs at various places on top of the image.

Note:
To avoid any confusion, I don't use an LED node, just a circular icon to represent the shape of an LED.

This example is a photo of a mini tower of four RPi-3Bs.

The grey coloured blobs are positioned at X, Y coords over where the LED is located on the RPi.
When my flow is running it also updates the IP address and CPU temperature for each Pi.

[HaroldPetersInskipp]

@dynamicdave That's pretty cool, would you mind sharing the flow?

[OriolFM]

Instead of using the LED, I'd use a full circle icon from icon-awesome with the appropriate colour, formatted in HTML. You could handle it inline along with the IP and TEMP texts, and it would be far more efficient than the LED node.

In my experience, the LED node has a big overhead and slows down the dashboard a lot if you're using several of them, whereas using an icon character with the text is the same as displaying any other character and has a minimal load.

[dynamicdave]

Hi @OriolFM , I think my wording may have caused confusion. I'm not using an LED node, I'm using an icon that is referenced (as in an example in Bart's SVG node) like your suggestion.

  <use id="led_1" xlink:href="#led" href="#led" x="175" y= "96" style="--ledColor:red;" />
  <use id="led_2" xlink:href="#led" href="#led" x="175" y="176" style="--ledColor:red;" />
  <use id="led_3" xlink:href="#led" href="#led" x="175" y="248" style="--ledColor:red;" />
  <use id="led_4" xlink:href="#led" href="#led" x="175" y="312" style="--ledColor:red;" />

I can change the color in the SVG node using an HTML reference from a function node.

I'll have to revisit my NR flow as I built it a few years ago for a mini-tower of RPi-3Bs (that I don't use anymore) and re-work it for my set of RPi-4Bs. I'm sure there have been all sorts of enhancements to SVG that might help improve my flow.

Note: I've edited the wording in my previous post to try to make it a bit clearer.

[dynamicdave]

More than pleased to share my flow, but first I need to re-work it as it was built for a set of RPi-3Bs (that I don't use anymore) and bring it up-to-date with my RPi-4Bs.

I might even write it up as a simple tutorial for my new group of IoT students (Sept, 2022).

[OriolFM]

Okay, in the picture the LEDs appear to have the gradient around them as the regular LED nodes, and that was what confused me. In addition to the better performance, I prefer the crisp appearance of the full circle awesome-icons:

I use this snippet of code to set the LEDs:

var led = "<i class=\"fa fa-2x fa-circle\"></i>";
    var glamp = "<a class=" + msg.machine.lamp.greenstyle + ">" + led + " " + "</font>";

I have some CSS classes defined for off, green (fixed), and green (blinking) light, and the same for the other colors I use (yellow and red, basically), so by changing the CSS class I can turn it on, off, or setting it to blink without modifying the icon.

[dynamicdave]

Thanks for the feedback - When I revamp my flow I'll incorporate your suggestion.