Using a Background Image and Links Together in Node-RED UI

Hi, I am wondering if Node-RED has the dynamic ability in the UI to have a background image where you can click on part of the image and it shows pre-defined group data (i.e., like one of the group "tiles"). What I am trying to do is to show data from the different zones of a building or house, with the layout of the building displayed on the background image. I have seen that you can load a background image into Node-RED, but was not sure if more advanced functionality with backgrounds and the UI is supported.

Thanks in advance for any help that is given!!

Hi James,
Could our node-red-contrib-ui-svg be of any help for you? You can add a background image, and show (e.g. invisible) shapes on top of it. Those shapes can be defined 'clickable' to create output messages, which can be used in turn to trigger other stuff in your flow...
Bart

Thanks for the link. Let me look into this further and I will get back to you.

1 Like

Or if you don't need Dashboard, I recently posted how to do it with uibuilder.

I saw that, but uibuilder looks waaaay too complicated for a non-programmer like me!!

Haha, well it is "only" web development and that is always worth learning since it gives you a nice toolkit for getting the most out of computers, especially with Node-RED doing the heavy lifting in the background. :wink:

I understand that it is daunting to get started though you will find it all very logical if you just step through it.

If you decide to have a go, there is a nice simple example in the library once you've installed uibuilder. And I'm generally around for questions.

Truth is, once you start building UI's, you will likely end up learning much of this stuff anyway even with Dashboard since its basic nodes can only get you so far before you have to start using the template for bespoke code. But of course, that is also the beauty of Dashboard in that it lets you get started easily.

Personally, I think that you are already pushing the edges of what can be done. Thankfully for you, Steve and Bart have put together an amazing extension to Dashboard so hopefully that will be enough, but don't be afraid to have a go with other solutions.

Whatever path you choose, enjoy!