Node-Red and images

[miriki]

Hi, all!

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.

Michael

[miriki]

nobody? really?
approx. 100 views and after 3 weeks no reply?
sigh

[jbudd]

@miriki

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.

CSS. Give the group a custom class and you can style the background for just that group.

@miriki

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.

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.

@miriki

c) And finally (until now... ): How would I change an image at "runtime"

CSS again. Pass the image as a msg property.

@miriki

d) Where should I store pictures to be used in the dashboard, esp. on a linux machine?

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/',

[E1cid]

Some times you just fall through the cracks.

a, set a class for the group you can then use css to add images to background

b, not sure i am understanding this one, but again ui-led is available and you can also a class and use css to position to I think.

c, you can use the ui-template to create css, you can change the image set in the template dynamically at runtime.

d, you can set up a http static folder to serve the images

you can search using the forum for extensive examples, and any terms used, using node-red "term" docs using a search engine.

Then you can provide short example flows if you have trouble, people will gladly provide feedback and working examples relevant to your examples.

P.s. Most here do not use HA so for that you might find more help on HA forum, but there are some users here.