You mean other issues then the 'open' and 'load' menu items? If so, please list those issues here please, then we can try to solve them in the near future...
Not had time to go through them in detail since I was just briefly distracting myself from real work 
But I did get a number of odd interactions. For example, the save not working (sometimes not updating the SVG in the node) and then I managed to clear a fill by clicking "none" by mistake and it was very hard to get a fill back again. In the end, I typed in a fill name manually.
Obviously, all of this is in the editor rather than specifically in the node.
Hi guys,
First of all, great job with this node, i was waiting for this functionallity in node-red. I'm not a specialist but I have my home "domotized" with SonOff's and I like to play with node-red and it's different protocols and nodes.
I'm trying to make a lightbulb icon to toggle the state colour when it is clicked, but I don't get to do it.
I don't know if it's possible to send throught "event" a payload message when the icon is clicked, the "fill" value of an "id", so, with a function node I can toggle the value and send it back to the node "svg" to "input bind" and the rest of nodes, the new value.
Because, the same light, can be state changed fisically("Sonoff switch"), throught phone ("MQTT dashboard app"), and from node red UI and all of them have to refresh the state.
Or maybe use a global variable for the value of the "fill" attribute.
Your help will we appreciated.
Greetings,
Without wishing to take anything away from this node which is amazing. It inspired me to have a go at doing something with uibuilder and svg.
The following flow shows how to overlay indicator icons over a floor plan and control the indicators from Node-RED.
https://flows.nodered.org/flow/02eb3716157db586f3f5b8a85c241009#
3 Likes
Nice work Julian.
I haven't played with it yet but do you handle 2 way binding and click events etc?
Thanks Steve.
Yes! Took me a while to learn enough about VueJS components but once I got it, it was also easy. Like most front-end libraries, VueJS encourages you to have one-way binding of data - from the app down to the component.
To get information back, the best way is to use Vue's event handlers and this is exactly what I've done.
You will see @bulbclicked="myClick" in the html which is where the events from the component are linked back to the myClick method in the JavaScript. Currently, the component sends back the ID of the element that was clicked and reference to the full event object. The myClick function updates the relevant data in the app and sends a message back to Node-RED telling it what the new status is for the clicked bulb. I expect that there are even easier ways but this already only requires just a few lines of easy code.
I could also send back other data but there is nothing really to send back at the moment. Let me know if you think that there should be something else.
The component already lets you change colours, add extra svg elements, change size and position, add title text, turn on/off clickability and even add/change the filters used (the default filters are a drop-shadow or the glow).
The only real thing I've not worked out how to do is to animate the filters. 
I would really like to be able to create a throbing glow effect 
I'll probably add some more capabilities, then I'll move it to a separate .vue file and finally produce a "compiled" version in JavaScript so that people can simply include it. Not yet worked out the workflow for that but I know it can be done.
Then I can add it to a new npm package, probably called something like uibuilder-vuejs-components. Then people will be able to install that using uibuilder's npm package feature.
Looks very nice!!
You say in your tutorial that it is "crazy simple". My god Steve (@Steve-Mcl), now my self esteem has dropped "far" below zero ..
Jordi (@Jordi),
I have added a step-by-step tutorial to our wiki page to add an interactive light-bulb to a drawing. Hopefully it helps people better to get started with our node...
1 Like
Oops! Sorry, that wasn't meant. What I really meant is that it is very simple to use once the component is set up. It is the component that does the complected stuff. That's taken a couple of days to get to where I am now.
I'll admit that I've gotten a bit excited about the possibilities. Who knew that it would be reasonably straight-forward to create something so powerful with such a small amount of code?
Thanks for the inspiration Steve and Bart, I would probably have never bothered if you hadn't inadvertently pushed me with your excellent Dashboard extension. 
4 Likes
Many thanks, Bart and Steve!!!
Great node. I use it for the swimming pool automation system.
It is so useful for model verification and visualization!
It is very convenient and the animations work great!
9 Likes
Hi Andrey,
You are welcome!
Woow that is a really cool dashboard, that demonstrates the power of vector graphics in Node-RED!!
Just love it... Thanks a lot for sharing it!
2 Likes
Hi @iungo that is a fantastic demo. Would you be willing to create a sharable demo version of your flow? With fake data etc.
If you can't or don't have time but are willing to share your flow, then send a copy to either myself or @BartButenaers and we will create a demo flow with demo automation as a showcase.
If you can't share due to IP or other reasons then we understand.
Cheers Steve.
Hi Andrey (@iungo),
Don't want to become greedy, but you are doing pioneer work with our node... If you should have some free time left, it would be very nice if you could create a new discussion (category "share your projects") to explain a bit how you started creating something like this.
Some things that popup in my mind:
- Do you use FontAwesome icons
- Or did you draw the shapes yourself via DrawSvg
- Or did you use another third party SVG drawing tool
- Where can animations be useful in such a diagram
- Do you use clickable shapes
- ...
I can image that there are other users around that want to create something similar, but don't know very well how to get started with this kind of stuff...
P.S. and if you would like to share your flow with the community, you could do it inside that discussion...
But don't hesitate to answer that you don't have enough free time!!!! Like we often do 
Bart
2 Likes
Hi Bart,
Just now I have tooo much work.
This project becomes much more complicated than I thought.
This SVG visualization is only the tip of an iceberg. Too many logic behind it and other things behind it (store variables, database, alerts, logging etc).
Also, I use 2 RS485 touchscreen control panels in parallel with the web interface, its not so simple to get it to work in parallel.
Also, I'm developing my own Modbus interface for pH and Redox sensors (on the prototype stage now). It has a complicated analog frontend because of very hi probes impedance. So I use 3 femtoampere(1fA = 0.000000000000001A) op-amps and complicated shielding techniques.
When I will have enough time I will open a discussion.
Also:
- I don't use FontAwesome icons, because I'm not found an easy way how to animate it.
- Initial drawing was made in Corel Draw (it's easy, but I used only simple shapes because too easy to get a huge and unreadable SVG file with complicated shapes)
- Animations are useful to show water flow, waterpumps states (stop, working) and water level.
- I don't use a clickable shape, because don't need it.
2 Likes
I will do it when I will have time. Now, I think it nearly unuseful for the demo reasons.
But I can share an SVG file!
3 Likes
Here the small video which shows normal filtering mode, one backwash cycle and one rinse cycle.
4 Likes
i just made an account to tell you this is one of the best and most versatile pieces of software i found in this whole node red ui ecosystem - thanks!
3 Likes
Hey Simon,
That is very kind of you!!! It was (most of the time ) fun to build this node together with @Steve-Mcl...
1 Like
4 posts were split to a new topic: PLC HMI using svg dashboard node
I have moved that great PLC HMI example into it's own "Share you Projects" thread
Want to agree with @simonbuehler - I am streaming info in from my Victron solar system - the block at the top, and from Shelly energy meters, at the bottom.
I am not at all using any of the advanced functions yet, need to get there.... For instance, the little red dot bottom block - right - would like to flash it green - when I do receive info every 20 sec, else it must go back to red, aas sometimes the info flow stops. (Will ask for help in a seperate post...)
Thank you @BartButenaers and @Steve-Mcl !
2 Likes
@BartButenaers thanks again for this amazing node !
can you give me a hint how to avoid this scrollbar
and maybe how you got a even bigger map/svg loaded ?
