Getting image in dashboard

[mammoet]

Oke so i saw this tread on the google group : https://groups.google.com/forum/#!topic/node-red/xMsaLwZ8lnw
about getting a background image.
now i have changed my httpstatic to /home/pi/image/
and my question is what do i need to change in the script that the guy on this tread is providing

Kind Regarts Niels-Yvo Grummel

[knolleary]

Hi @mammoet

If you have set httpStatic to /home/pi/image then any file you have in that directory can be accessed from http://localhost:1880/

For example, if your background image is /home/pi/image/my-image.png then you should be able to access that as http://localhost:1880/my-image.png

Following the example on the mailing list you’ve linked to, you can insert the following into a ui_template node within your dashboard:

<style>
    body {
        background-image: url("/my-image.png");
    }
</style>

[mammoet]

@knolleary

http://localhost:1880/my-image.png

Somehow it doest work for me.
ill put a prtscreen to to this reply.
and my node setup atm.

[{"id":"37e9e5e1.d6b36a","type":"ui_template","z":"7afea17.cb4ff6","group":"96491a51.892388","name":"","order":0,"width":0,"height":0,"format":"\n body {\n background-image: url("/school.jpg");\n }\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":260,"y":600,"wires":[["29604d95.36fe92"]]},{"id":"29604d95.36fe92","type":"debug","z":"7afea17.cb4ff6","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","x":910,"y":600,"wires":},{"id":"96491a51.892388","type":"ui_group","z":"","name":"image","tab":"42744ce7.172a24","disp":true,"width":"6","collapse":false},{"id":"42744ce7.172a24","type":"ui_tab","z":"","name":"Image","icon":"dashboard","order":2}]

[knolleary]

The line in your settings file for httpStatic is still commented out - so is being ignored. Remove the // characters at the start of that line and restart node-red.

[mammoet]

Thanks for the help so far. but im still kinda stuck. i can now get the image to load on the localhost.
but not in the dashboard while is used that template node with the provided code. and changed 'my-image’to the file name i wanted

[knolleary]

Getting the image to load in the browser is a good first step.

1. what have you called your image file?

2. have you added the ui_template node as suggested? What did you put in the template node?

[dceejay]

in the ui_template node you should also select the add the head section option

[mammoet]

My image is called building.jpg

[mammoet]

i fixed it! forgot i had a template with the same code in a other tab to test it.

Thanks for the help .

[Trying_to_learn]

I don’t like to butt in, but I am studying this and have a slight problem…

My screen size is 1368 x 768 and I don’t have images that size.

So if I have an image (say) 800 x 600… (yeah, sorry, I’m still a 4x3 person.) How do I stretch it to fit the screen?

I know that is a poor example, but I hope you get the idea.

Oh, and likewise, if I have a picture (say) 5300 x 3600… How do I shrink it down to fit 1:1 on the screen?

Until now I am getting a tile of the smaller image all over the screen.

Thanks in advance.

[knolleary]

@Trying_to_learn you need to use CSS to resize the image - lots of help to be found via Google, such as: https://stackoverflow.com/questions/1150163/stretch-and-scale-a-css-image-in-the-background-with-css-only

[Colin]

You might also like to consider reducing the size of the image using some image processing software if the image is vastly larger than you need. Then it will not need to send the large image to the browser for it to reduce, so reducing network and processing overheads.

[Trying_to_learn]

Thanks both.

Colin, I only gave the sizes as examples. I accept I can reduce the size of the picture.
There again, I could increase the size too.

If NR supports scaling, I would prefer to do it that way.

[knolleary]

If NR supports scaling

This is about HTML/CSS sizing of an image on a webpage - nothing specific to Node-RED

[Trying_to_learn]

I stand corrected.

Um… I’m gonna cop it for asking, but the link you gave.

I’m confused.

Ok, the person asked about doing what I want to do.
There are answers.

I scroll down to the “preferred answer” and I don’t understand HOW that answer works.

CSS3 has a nice little attribute called background-size:cover.

This scales the image so that the background area is completely covered by the background image whilst maintaining aspect ratio. The entire area will be covered however part of the image may not be visible if the width/height of the resized image is too great

Yeah, great.

So is that “background-size:cover” added to the line with the image?

I’ve tried that and got no result.

Yeah, ok. I need to study more the commands and where they are put.

I guess a lot of this is showing me how little I know about all the languages.

[knolleary]

Much earlier in this topic, I shared this snippet:

<style>
    body {
        background-image: url("/my-image.png");
    }
</style>

That is a CSS stylesheet where you can add more CSS rules, for example:

<style>
    body {
        background-image: url("/my-image.png");
        background-size: cover;
    }
</style>

[Trying_to_learn]

{{HUGS}}

I am really hoping that at some stage MY brain will kick in and start to associate things better than it is doing now.

Kudos to you.

[karlbo]

is it possible to display background image on the group node aswell?
body will display it nicely in the background, but what ref do i use for the group node?

Best regards
Karl

[dceejay]

You need to set the group and widget background transparency. Probably via more css

[karlbo]

found it

ui-card-panel

Karl