I love IOTstack idea on RB Pi4 with Node-RED and so on. By studying this wonderful forum i found fantastic tools I'd love to use in my system. One of the most wanted is the ability to make my own layouts, photos, drawings with live data on it in Node-RED Dashboards. I.e. this:
I'm not fluent in Linux and somehow I can't figure out how to use DrawSvg editor in my Node-RED which is running inside the container?
The next thing is - if I manage to install it and run it in Docker container - how can I make a backup copy so if my SSD (my RB Pi4 is running on SSD instead of SD card) fail I'll not have to spend one month trying to set everything up again...
I know IOTstack use /volumes folder accessible from outside of container to store/duplicate user setup files so one can easily destroy container and install a fresh instance. But what about all add-ons like contrib UI's, icons, etc?
Hi @bogi,
Can you explain that a bit more in detail please? Are you talking about separate things on your dashboard: photo's, drawings, ... Or do you mean drawing on top of an image?
Could it be that you are mixing up two things? With the node-red-contrib-ui-svg node you can show SVG drawings on your dashboard, optionally with a background image. The node-red-contrib-drawsvg node on the other hand is an SVG editor that can be used in the config screen of the node-red-contrib-ui-svg node, to construct your SVG drawing. But most people don't use that node, since the node-red-contrib-ui-svg node by default uses the DrawSvg cloud service. You only need the node-red-contrib-drawsvg node when you cannot use that cloud service...
Hi @BartButenaers
Thank you for reply and clarification.
Does it mean i can use any photo, drawing as background and on top of it put SVG graphics controlled by Node-RED Flow? Imagine you have a Dashboard showing your room and you can put live data i.e. temperature in specific places - a small box showing my radiator temperature which is reported by ESP8266 which is there and measuring this temperature.
Or you create a graphics showing your house heating system layout, showing pumps, heat exchangers, gas heater, buffer drum temperature and pressure data and presenting actual state - pump ico will turn red when turned off, become green when your heater controller turns it on. And so on. Just like you can see in control rooms of all kind of plants all around the globe.
One note here - no cloud services. The system is independent, is inside my house, i can only monitor it via VPN from outside.
So clearly i need to use node-red-contrib-drawsvg. What i don't get is how to use all these things if i'm using node-red in container and if i download and upgrade my node-red container - how can i make a back up copy so i'll not lose it if my drive crash. I'm still strugling to understand all this linux and docker stuff...
@bogi,
Yes the node-red-contrib-ui-svg node can do all the things you mention. And it doesn't require a cloud service. The cloud service is only needed at the start, if you use DrawSvg to construct your drawing (via the blue button on the first tabsheet of the node's config screen). But you can also use a third party svg editor and paste your svg string into the second tabsheet of that node. Or you can use the node-red-contrib-drawsvg nod to host Drawsvg locally, so then you can use drawsvg without cloud service.
You will need to read the "manage user data" section on this page. But if you want to use docker, I suggest you read that entire page. Are you aware that most users run Node-RED without Docker?
Yes, i-m aware of it:( As neewbie i took the "easy" route - ready to use script ITOstack.
Yesterday i've made another attempt to my system: tried to use Palette manager in Node-Red ui to install svg and Drawsvg nodes and i hit the wall. I found i can not pull packages from internet repository due to proxy settings. As i'm offshore now and due to some "IT policies" at work here i will not be able to change it. Tried VPN bo it's blocked as well... Is there another way to upload packages from repository? I found an icon "upload package *.tgz file" in Palette manager -> install. Please tell where can i found tgz archive file for node-red-contrib-ui-svg and Drawsvg? This is my last chance...
And then you can see the "assets" of that release:
For the node-red-contrib-drawsvg node there was not yet a release defined yet, so I have done that now. Which means that you will see only the latest release...
Bart thank you.
Tried that just now. In assets there is one ZIP file containing sub folders and files, and tar.gz (not tgz). Noder-RED is asking for TGZ file but i found on the web that these suppose to be the same things. Changed extenstion from tar.gz to tgz and no luck:
i tried with original file tar.gz. No luck as well...
Desperate.
Sorry but don't have any experience with this, and have to work today...
Indeed like Ben say's it seems that automatic dependency inclusion in npm pack has not been implemented. After a 'quick' search I found npm-pack-all which does a bit more...
I have installed that npm-pack-all package (in my case in C:\Users\Gebruiker\node_modules\npm-pack-all)
I did a cd C:\Users\Gebruiker\.node-red\node_modules\node-red-contrib-ui-svg to go within the folder of the SVG node.
I executed node C:\Users\Gebruiker\node_modules\npm-pack-all inside the SVG folder
In my svg node folder there appeared a node-red-contrib-ui-svg-2.3.0.tgz file
But I only see stuff of my SVG node inside that file
So most likely I am doing something wrong. Hopefully somebody else can try this for you, and share the tgz file with you.
P.S. I highly recommend you to change the title of this discussion (e.g. "install a contrib node offline as bundle" or something similar). Because I could imagine that users with npm experience will not read discussions about Docker...
Guys thank you so much, especially thank you Bart for taking your time to help me. Just to give you an idea about internet connection quality on multi-billion dollar offshore project: i'm downloading the file from you (23.9MB) and it will take... well it was 2 hours, now:
I've finally managed to download the file. This time Node-RED accepted it and modules were added. DrawSVG however is not offline version - to use it i have to have internet connection. I suspect DrawSVG is on some different servers and my RB Pi managed to connect to it and load DrawSVG module, but i took soooo long. Any way new world in front of me: already drawn simple floor plan and need to learn how to control SVG attributes over massages payloads.
One thing qorries me: my floor plan SVG is just an element on NR UI Dashboard. Dashboard elements are arranged on kinda grid as a tiles. I can't see the option to make my floor plan to serve as a background on which i can place text boxes (showing temperature, etc), guages, bars, live data charts, etc. I can only place them aside. It looks like i can't use this approach (meaning floor plan as SVG element).
That I don't understand. If you add the drawsvg node in your flow, then you should have a local drawsvg service running. And in the SVG node, you need to point to the local url instead of the cloud url (as you can see in the drawing on my readme page). You should use both nodes in the same flow...
You mean the download takes long, or loading the drawsvg editor in the svg node? For me here that works as fast as the cloud version.
Ah ok, you want to use other UI nodes on top of the SVG UI node... No that is not possible as far as I know. The only thing you can do is use foreign elements inside your SVG. Which means you use HTML elements (that are no SVG elements) in your SVG. You can see an example here, where I use an html input element to enter the required temperature. And here is another example where I display/edit an html table inside an SVG.
Since the SVG node has been extended with new features continuously, the documentation has also been growing. As a result, novice users had a hard time to get started with this node. To assist them a bit, I have now added a "Getting started"tutorial to the wiki.
