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 …

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…

[image] 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. [httpstatic%20screen] [{"id":"37e9e5e1.d6b36a","type":"ui_template","z":"7afea17.cb4ff6","group":"96491a51.892388","name":"","order":0,"width":0,…

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.

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

Getting the image to load in the browser is a good first step. what have you called your image file? have you added the ui_template node as suggested? What did you put in the template node?

My image is called building.jpg [template%20scrn]

i fixed it! :smiley: forgot i had a template with the same code in a other tab to test it. Thanks for the help .

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 ho…

@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

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.

Node-RED

Node-RED Forum

Getting image in dashboard

Dashboard

dceejay 18 May 2018 12:00 7

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

Node-red-log to dashboard

Topic		Replies	Views
Not getting "pictures" on dashboard Dashboard	11	830	14 April 2020
Dashboard background image Dashboard	25	556	7 March 2024
Background image in Dashboard 2.0 Dashboard dashboard-2	12	366	14 February 2025
Show Image as icon on dashboard Dashboard	17	15422	6 September 2019
Image integration in the dashboard Dashboard	35	502	12 July 2024

Copyright OpenJS Foundation and Node-RED contributors. All rights reserved. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them.

Getting image in dashboard

Related topics