Karl,
Could you elaborate?
<style>
ui-card-panel {
background-image: url("/some_picture_you_choose.png");
background-size: 100% 100%;
}
</style>
Karl
1 Like
@knolleary,
What would be the httpStatic path for the Windows file system? I was able to make it work for my Raspberry Pi by setting it to "/home/pi/image".
Thanks,
Mike
It would be whatever path you wanted to use... but just must make sure you use double backslashes: c:\\some\\random\\path\\to\\wherever\\the\\files\\are.
Thanks @knolleary!
I have settings.js using httpStatic: '/image/'. That path is actually C:\image. I found it by moving the image folder to the root C directory.
1 Like
Instead of using absolute paths to my Windows project folders, I'm using this trick in my settings.js file... First, include (or uncomment) these modules at the top of the file (before the exports):
// The `https` setting requires the `fs` module. Uncomment the following
// to make it available:
var fs = require("fs");
var path = require ("path");
Then, inside the export section, I can make the static directory "relative" to wherever my node-red instance is running -- this code joins the current working dir with any relative folder name:
// When httpAdminRoot is used to move the UI to a different root path, the
// following property can be used to identify a directory of static content
// that should be served at http://localhost:1880/.
httpStatic: path.join(__dirname, 'public'),
This way, I can simply create a folder called "public" under each project folder, and build whatever dir structure I need under that -- such as:
C:\NODE\NODE_RED_UI\PUBLIC
├───data
├───images
├───RGraph
│ ├───css
│ ├───demos
│ ├───images
│ ├───libraries
│ └───scripts
└───scripts
As you've probably discovered, the url to access a file under (for instance) the images folder excludes the "public" dirname -- so it would be /images/house_plan.jpg
5 Likes
fixed it! 
forgot i had a template with the same code in a other tab to test it.
Thanks for the help .
Hello, I'm new to this, I tried to add the background image in my dashbord but I have not succeeded; I changed the httpStatic path for the Windows file system; for this: "httpStatic: 'C: / Pictures'," and in the node template this is used:
body { background-image: url("/salud.jpg"); background-size: cover; }But I have not achieved any results, please could you help me regards
This directory path has spaces in it -- is that just the way you posted it on this forum, or is also like that inside your settings.js file? (if so, remove them)
Since you are on a windows machine, you may need to use the backslash \ path separator. However, inside a JS string, that character means "escape the next character", so try this instead:
httpStatic: "C:\\Pictures",
Thanks for answering my question, but I still have problems attached to the screen capture, of the file settings.js
Thanks,
Shrickus
First step, make sure you can just load one of your pictures in your browser using http://localhost:1880/pic1.jpg -- substituting your host, port, and filename information, of course...
Once that works, you know you have node-red set up to serve those static pictures correctly. Then you need to add that same url into your CSS directive for the background of the dashboard's <body> element.
That line is a css directive that tells the browser how to "style" the page's body element -- it is not valid html syntax. Please include the entire text of your ui_template node so we can verify the syntax you are using. You can also use the F12 key to open your browser's Dev Console, to see exactly what is being rendered into the dashboard, and whether there are any html or js errors.
I can not load the image in my browser, so I consider that the error must exist in the file settings.js
You did restart node-red after changing the settings.js file, right? Did you also follow this note in the settings file, and change the editor's root url to some other path?
// By default, the Node-RED UI is available at http://localhost:1880/ // The following property can be used to specify a different root path. // If set to false, this is disabled. httpAdminRoot: '/admin',
// When httpAdminRoot is used to move the UI to a different root path, the // following property can be used to identify a directory of static content // that should be served at http://localhost:1880/. httpStatic: 'C:\\Pictures',
What errors or status code is returned when you try to load the image in your browser? (check the dev console's "Network" tab)
To restart node-red there is some command ?, usually I just stop the node and reload it.
Also, in the file setting.js I have it as the capture.
I did not understand very well, excuse me should I change something in this route: httpAdminRoot: '/admin'?
Your settings.js file looks fine... but it is only read one time, when the node-red service is started.
I cannot tell you how to restart node-red, since there are many ways to set up a system to start running automatically. If you didn't set it up, then you may need to talk to whoever set it up for you... I would start by looking at the installed services, and if there is one listed then use the buttons to stop/start it.
Can you see the console log output? If so, then it will show you what directory is being used to serve static files. If you can paste the log output from when the system is started, the answer will probably be obvious to someone here.
I think the modifications I make in the settings.js file are not being made; really that is the problem
Thank you Shrickus
Just a note about using a relative URL from the Dashboard ui:
When viewing the dashboard, your browser considers that you are in the 'ui' directory.
For example:
http://192.168.43.106:1880/ui/
If your settings.js file is set to serve static files in /home/pi/.node-red/static/,
your browser will consider this static directory as root.
You need a ../ to move up one directory from 'ui' to root.
A relative URL from the 'ui' directory would look like this (assuming msg.payload has the image name):
<img src="../{{ msg.payload }}">
I changed the httpStatic to 'c:\Desktop'
Welcome to Node-RED
12 Feb 18:31:52 - [info] Node-RED version: v0.19.4
12 Feb 18:31:52 - [info] Node.js version: v10.8.0
12 Feb 18:31:52 - [info] Windows_NT 10.0.17134 x64 LE
12 Feb 18:31:52 - [info] Loading palette nodes
12 Feb 18:31:56 - [warn] rpi-gpio : Raspberry Pi specific node set inactive
12 Feb 18:31:56 - [info] Dashboard version 2.13.2 started at /ui
12 Feb 18:31:56 - [warn] ------------------------------------------------------
12 Feb 18:31:56 - [warn] [node-red/tail] Not currently supported on Windows.
12 Feb 18:31:56 - [warn] ------------------------------------------------------
12 Feb 18:31:56 - [info] Settings file : \Users\tobi.node-red\settings.js
12 Feb 18:31:56 - [info] HTTP Static : C:\Desktop
12 Feb 18:31:56 - [info] Context store : 'default' [module=memory]
12 Feb 18:31:56 - [info] User directory : \Users\tobi.node-red
12 Feb 18:31:56 - [warn] Projects disabled : editorTheme.projects.enabled=false
12 Feb 18:31:56 - [info] Flows file : \Users\tobi.node-red\start
12 Feb 18:31:57 - [info] Server now running at http://127.0.0.1:1880/
12 Feb 18:31:57 - [warn]
and this is my function node
> > if(msg.payload==1){ > // return {payload:"/grunein.png"}; > return {payload:"/windows10.jpg"}; > } > else{ > return{payload:"/grunaus.png"}; > } > return msg;
but the Dashboard shows no Picture
the desktop not really being a good location to store your files for this as everything else in that directory is also potentially accessible.
What error messages does your browser have? Use the developer tools and check to see the path.
thats the error message
