Where to find httpStatic: '/home/nol/node-red-static/' on my computer?

Hi I want to use custom icons on the node-red worldmap.
In another post Is there is anyway to use Custom Icon in Worldmap node? - #5 by Zak
I read you can put them in a node-red-static map.

When I uncomment httpStatic in the settings.js file to : httpStatic: '/home/nol/node-red-static/' and reload node-red, should then this node-red-static folder appear somewhere? Should node-red create it or only load static files there? I can not find the folder "node-red-static" anywhere. If I have to create it, does /home mean my user folder? Or where do I have to create '/home/nol/node-red-static/' ? Thx for help in advance!

No.

The path /home/nol/node-red-static is provided as an example of a path. You should change it to a path to the folder you want to use to store static content in. You can call it whatever you want, you can put it wherever you want - the key point is the value of httpStatic should be the full path to that folder.

Are you on Linux?

The folder does not get created automatically, you have to create it and put the files there.

So on my Raspberry Pi, Node-red is installed in /home/pi/.node-red
mkdir /home/pi/.node-red/static
settings.js includes
httpStatic: '/home/pi/.node-red/static/',

I am trying on windows, should it be the complete absolute path?
I will try also on RP.
Thanks

I am trying on windows, I will try the complete absolute path! Thanks.

Hey Oliver

below is step by step what i have done:

1- i have create a folder in the user called "img", my username is zak so my path was /home/zak/img (see image below):

2- i have edited the httpstatic in the settings.js to have the path of this folder as shown in the image below.

3- i have deployed the icons that i need inside the folder that i have created.

4- i restarted my node red using the command node-red-stop in the terminal, and then node-red-start
5- after the restart i have opened my node-red editor, and edited my payload going to world map to include msg.payload.icon that is setup as a string and that holds https://hostname:1880/icon_name.png as shown below (the desktop.png icon was placed in the main folder, if you have placed your icon in a sub-folder then the config should be https://hostname:1880/folder/icon_name.png)

the result would be that node red will read the icon from that folder and shows it on the map.
i hope that this step by step guide works for you, its working for me.

Note: i am using Linux Mint to run my node red., but i think the same process works for windows as well

1 Like

But more static folders?
Is it possible ?

i am sorry i didnt follow, you need to create more than one folder?

if this is the case as you can see i have created multiple sub-folders inside the main folder where i have deployed more icons, so if i want to use another icon from the sub-folders then the configuration in the editor would be https://hostname:1880/folder/icon_name.png

Hi Zac,
I tried in Windows first but it not works.
I created the folder 'D:\Dropbox\node-red-static' and pointed httpStatic to it in the settings.js file with httpStatic: 'D:\Dropbox\node-red-static'
Then I put an image in this node-red-static folder and tried to view it in the browser with : http://127.0.0.1:1880/esp32.jpg , I got the error Cannot GET /esp32.jpg
Any idea what I did wrong? Thanks.

More different folder., not sub-folders

Like C:/FolderX , D:/FolderY

I changed the slashes and then it is ok!
httpStatic: 'D:\Dropbox\node-red-static',
to
httpStatic: 'D:/Dropbox/node-red-static',|

Thanks again!

I think that line should have a trailing slash on the end (as was posted above).
httpStatic: '/home/pi/.node-red/static/',

So maybe on a Windows machine its should be...

httpStatic: 'D:/Dropbox\node-red-static/',

1 Like

to be honest i haven't tried it with multiple folders.

to be honest i dont know if it will work, this has to be tried, you can try by creating multiple lines like the one shown in the settings.js but i am not sure that it will work.
in my understanding its there so we can point to one main folder where the node-red will go and fetch from with the ability to categorize the icons in different sub-folders, however i think this could easily be put to a test.

I had to use forward slashes instead of backward slashes, not sure why :slight_smile: but it works.

yeah i was going to inform you that you need to change the slash as it will not be acceptable in the settings.js.

glad to know that i was able to help you out.

Yes very happy that part works..
Now I would like to be able to rotate the icons , before or after I put them on the map. Maybe I should start a new topic for that.
Thanks.

Hey Oliver.

i have tried to do that, but i dont think its possible as the payload doesnt contain any like angle, however i will follow your topic regarding that, if you were successful in doing that please let me know as this would be helpful for me too.

Hi Zak,
I could not find it yet but expect it might be possible because on the node-red-contrib-web-worldmap (node) - Node-RED they start with an image of the same icons in different directions. ( the blue boats? )
Until I find how to do that I will put many similar icons with different angle in the static directory and select the one closest to the GNSS course value. I will let you know if I find a way to rotate the icons. Thanks.

1 Like

yeah i was just checking the picture in the worldmap node and somehow they managed to rotate the icons towards some kind of a path, i will do some research from my side as well and will contact you if i was ever been successful.

have a great day.

1 Like

Hi Zak,
When we retested it this evening it worked, we could rotate the special icons as mentioned on node-red-contrib-web-worldmap document. It works only with the special icons and it needs the heading parameter!

example to test : {"name":3, "utc":"20220313150827.000", "lat":51.147071,"lon": 4.017049,"icon":"arrow", "heading":210}

special icons are for example:

  • plane : a jet plane icon that aligns with the heading of travel.
  • smallplane : a light aircraft icon that aligns with the heading of travel.
  • ship : a ship icon that aligns with the heading of travel.
  • car : a car icon that aligns with the heading of travel.
  • bus : a bus/coach icon that aligns with the heading of travel.
  • uav : a small uav like icon that aligns with the heading of travel.
  • helicopter : a small helicopter icon that aligns with the heading of travel.
  • arrow : a map GPS arrow type pointer that aligns with the heading of travel.