I am using Node-Red with ioBroker on a Linux 11.3.0 PC for some time now. Actually I just try to visualize a few things from my home network, esp. from mqtt nodes. But I have set up a web radio for mplayer, too. Right now I try to decipher the meaning of the various nodes from a BambuLab printer. (I'm not using foreign designs. All was designed by myself.)
It's kind of "go to the next step" for me: How am I supposed to use images on the dashboard? I mean...
a) How can I set an image as background for a group? Stretched, scaled, clipped or whatever.
b) And how can I use an image underlying some dashboard controls, direct relating. For example: 4 LED controls, where an LED shows the status / actual used port of the AMS (filament changing device) . The LEDs should be placed at the correct position atop the image of the AMS.
c) And finally (until now... ): How would I change an image at "runtime". Example: The web-radio should display the station's logo (10 buttons for switching) and while playing the radio should display an artist / song (decoded by a function already for displaying) related picture.
d) Extended: Where should I store pictures to be used in the dashboard, esp. on a linux machine? The radio for example might search the internet for artist / song, download an image and display it on the dashboard.
Thank you for listening (tl;dr? Who was that? ), any help appreciated. Just keep in mind: ioBroker! I found a few sources for HomeAssistant, but was not able to adapt.
CSS. Give the group a custom class and you can style the background for just that group.
I suspect this is best done with your own HTML within a dashboard template. However, it might be possible with CSS to position a widget dynamically according to a message property.
I posted an example flow changing the background colour, not position, according to the payload value. It might be worth looking at.
CSS again. Pass the image as a msg property.
There is a line in settings.js which defines the full pathname of a directory to hold static content.
eg httpStatic: '/home/pi/.node-red/node-red-static/',