How to put image background in the Node-Red (Raspberry Pi 5)

[fourskin99]

Hi everyone, I already achieved to put background and logo on Node-Red as picture below while im using Windows OS.

Then I try to do it on Raspberry Pi 5, same instruction as Windows, but still cannot display the logo and background. I already use the https://static , create folder and put template. Please help me.

[jbudd]

@fourskin99

I already use the https://static

1. Can you explain this?
2. How do you specify the background image?
3. What does settings.js specify for httpStatic?

[fourskin99]

for 1 & 3

settings.js for raspberry pi 5.

httpStatic: '/lib/node_modules/node-red/image'

This setting is used to call the picture in the image folder. But still, I cannot display the picture for my background dashboard for rasp pi 5.

for 2

As you can see the coffee image as the background. Thats what I mean.

[jbudd]

OK thanks.

Yes, I suspected the image of coffee beans might be what you mean

On my Raspberry Pi I have a simple dashboard with a background image:

It is specified like this:

• My dashboard tab name is "Consolidated".
  The background image is /home/pi/.node-red/node-red-static/raindrops.jpg
• In settings.js I have httpStatic: '/home/pi/.node-red/node-red-static/', (I don't like the idea of using /lib/node_modules/node-red/image, can Node-red's web server see that directory?)
• A ui-template defines the CSS.
  The mistake I keep making is omitting the leading / in the url.

<style> 
#Tab_Consolidated {
    background-image: url("/raindrops.jpg");
}
</style>

[smcgann99]

So which API do you believe ?

[jbudd]

Ah yes. I was intending to compare them all with a local personal weather station site but in the time it's taken to sculpt all those APIs, he's gone dark.

Surely the Met Office must be the most accurate and it is indeed currently 16.16° C?
Yet the METAR report for the nearest airport, 20 miles away, ought to be bang on the nose, (at least for pressure!) but they only offer integer precision and claim it's 18°.

I suppose I could step outside and look up, but it seems so old fashioned.

Here's the full set, all requested at 20:30 and showing bizarrely different times.
There seems little point having a weather dashboard if I don't even know what the data represent!

[fourskin99]

I already follow your instructions but still can't get the image background. I think maybe the directory. BTW, how come you install Node-Red and place your file at /home/pi ? And why my Node-Red doesn't have a "." in front of the text ?

[jbudd]

@fourskin99

And why my Node-Red doesn't have a "." in front of the text ?

If you follow the documentation for installing on a Raspberry Pi it creates a directory ~/.node-red for your Node-red files.

As far as I know, on either Windows or Linux, your Node-red files always live in .node-red in your home directory.

Are you sure you don't have a .node-red directory? What does ls -l ~/.node-red show you?

The tilda ~ is a short-cut for "my home folder", ie /home/pi.

[karlbo]

i add 1 picture on top, one at background and im trying to put one one group level

its been some years, pls remind me what to call the group.

[smcgann99]

#name of tab with underscores for spaces_cards.nr-dashboard-cardcontainer

[karlbo]

I fount the card name eventually, but then the objects was not transparent, so i gave up, made a template node instead with background image of silos and bar ontop