Node-RED and icons

I’ve been looking at Pete Scargill’s thermostat and got stuck on icons. He blogged about icons recently but that didn’t say how to install them.  So on the basis of ‘if I didn’t know there will be others who don’t know’, here’s how to install some icons in Node-RED.

Pete’s suggestion is to create a static folder under the node-red folder and put the icons in there such as home/pi/.node-red/public/myicons .

To make these available you need to edit the file /home/pi/.node-red/settings.js  and add the line

note the closing comma! (there is an example in the default file – just search for it).

I’ll quote a comment Pete made on this (explains it better than I could);

“So then the web pages think that the root page for all assets is the above – hence your reference in the web starts at /myicons.

The reason I use myimages and myicons etc is that Node-Red already has some directories it uses for UI and images is one of them – if you make an “images” directory it conflicts – so I just prefix any of my stuff with “my” – so there you go.

That solves where to put them, but what to put there.  Well in his blog he directs you to this open icon set on SourceForge https://sourceforge.net/projects/openiconlibrary/.

I downloaded the file from SourceForge and copied it across to the Pi using WinSCP into a folder in my home directory I called ‘icons’.  It is a tar.bz2 file but that is easily unpacked in one go with:

I prefer to keep things like this icon pack separate and link to them so if you want to change the icon set, you just change the link.  To do that move into the public folder you have created  cd /home/pi/.node-red/public and run the following command to create a symbolic link (adjusting paths as necessary) to your icon set;

If you do ls -la you will see the link.  Restart Node-RED

and wait until it has properly started.  Refresh the dashboard page and you should have icons!

HTH

by