# \[Announce\] node-red-contrib-ui-svg (final beta) UPDATE V1.2.1

**URL:** <https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg-final-beta-update-v1-2-1/16210>\
**Category:** Share Your Nodes\
**Created:** [2 October 2019 17:46 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg-final-beta-update-v1-2-1/16210 "2019-10-02T17:46:56Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [2 October 2019 17:46 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg-final-beta-update-v1-2-1/16210/1 "2019-10-02T17:46:56Z")

</div>

Hi folks,

Some time ago I have announced an alpha version of node-red-contrib-ui-svg, to create interactive SVG (vector graphics) drawings in Node-RED:

> [@Announce node-red-contrib-ui-svg : feedback request](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg-feedback-request/14431):
>
> Hi folks, An interactive floorplan is already a long time on top of my TODO list, so I developed an alfa version of [node-red-contrib-ui-svg](https://github.com/bartbutenaers/node-red-contrib-ui-svg)... It would be nice if you could read the readme documentation, test it and give some 'constructive' feedback. Keep in mind that this is an early alfa version, that I published only to start the discussion! I have already registered a list of known [issues](https://github.com/bartbutenaers/node-red-contrib-ui-svg/issues). For most of those issues I will need some input from the community. I'm not going to repeat all i…

The use cases can vary from a simple round button, to a complex animated floorplan of your entire house and garden...

Got a lot of useful feedback, but it was a hell of a job to start implementing. Fortunately @Steve-Mcl immediately proposed to help me, and he has been a tremendous partner in crime. So thanks a lot Steve for all your spare time!!!!!!

We decided not continuing the previous discussion, because this beta version is a _complete rewrite_ (and we don't want to confuse users with obsolete information). So let's start from scratch here ...

The node contains a lot of new _ **features** _, so please have a look our Github [readme page](https://github.com/bartbutenaers/node-red-contrib-ui-svg) for a complete overview and some animations. A small summary:

- Enter raw SVG source (incl. beautification)
- Draw your SVG visually with the DrawSvg cloud drawing tool
- Update your SVG dynamically via input messages
- Bind shape attributes to input message fields
- Create customizable output messages for lots of events (click, double click, ...)
- Fontawesome icon support
- ...

Since the previous version was an early alpha, we haven't added any _migration_ code to convert any previous tests. But from now on, we will add migration code for next beta releases. This way we will avoid that users (who help us testing) will have to redraw everything again in a next beta.

We recently also got some great assistance from Joseph Liard, the creator of [DrawSvg](http://www.drawsvg.org/home-en.html#tools). He is currently busy adding new functionality to his drawing editor, to make sure we can **integrate DrawSvg** even better into Node-RED:

- We already received an _offline_ version, which would allow offline Node-RED installations (that cannot connect to his cloud solution) to offer a drawing editor. More about this soon...
- Currently FontAwesome icons cannot be added via DrawSvg, but have to be entered manually into the SVG source.
- Currently local images can only be searched from the machine where the dashboard is being viewed, but not from the machine where the Node-RED flow is running (e.g. Raspberry Pi).
- ...

So we will need at least one extra _next beta_ version, before we publish this node on NPM! This means you will have to install our node directly from the Github repository (see the command at the top of our readme page).

We hope you will have lots of fun with this node, and are looking forward to your '_constructive_' feedback!

Steve and Bart

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [2 October 2019 18:26 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg-final-beta-update-v1-2-1/16210/2 "2019-10-02T18:26:00Z")

</div>

Reserving this slot for some decent screenshots.

Update1...

This was a simple HMI demo I did using the databinding capabilities...

 ![2019-08-29_13-30-09.gif](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/3/3a80af54f901e4ff4700febcdfbe2feb0872a416.gif)

The source flow of this demo is supplied in the built in demos

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [2 October 2019 20:11 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg-final-beta-update-v1-2-1/16210/3 "2019-10-02T20:11:40Z")

</div>

## Demo - Integration with DrawSvg

This demo demonstrates how the DrawSvg drawing editor can be used to create a circle with id = "mycircle". Once saved, the circle will appear in the node's SVG source. And after deploy, the circle will be drawn in the dashboard:

 ![svg_demos_1](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/d/d7a727ea198a0d6aaf1ec78f1c01e68d471b968b.gif)

## Demo - Start animation via input msg

This demo demonstrates how an animation can be added to the circle (with id = "mycircle") to animate 3 radius from `1` to `30` in 3 seconds:

![svg_demos_2](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/5/51ee88b2e76ec0a484dfe7491d806e3d44b2c69d.gif)

You can also see that we have introduced as much autocomplete fields as possible, which allows you to select id's instead of having to enter them manually (to avoid mistakes as much as possible).

## Demo - Send output msg on event

This demo demonstrates how to send an output messages, when the circle (with id = "mycircle") is being clicked:

 ![svg_demos_3](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/1/1b2a0d9f8f6482ba08fb0180404bcf914b4fa834.gif)

As you can see the payload (or any other field) and the topic contents are both customizable...

---

<div class="post-metadata">

**Author:** ![jodelkoenig](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jodelkoenig/32/44645_2.png) [@jodelkoenig](https://discourse.nodered.org/u/jodelkoenig)\
**Post date:** [3 October 2019 07:41 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg-final-beta-update-v1-2-1/16210/4 "2019-10-03T07:41:05Z")

</div>

Gentlemen, you are absolutely crazy. What a great tool. Thanks a lot.

Node-RED will become a lot sexier with this, in particular for Smart Homes.

Chapeau!

---

<div class="post-metadata">

**Author:** ![dynamicdave](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dynamicdave/32/96_2.png) [@dynamicdave](https://discourse.nodered.org/u/dynamicdave)\
**Post date:** [3 October 2019 08:29 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg-final-beta-update-v1-2-1/16210/5 "2019-10-03T08:29:12Z")

</div>

Hi Bart,  
I've just seen your post about your UI-SVG node/widget.

Well you have disrupted what I had planned to do today as I've just installed SVG-graphics and your examples and am **completely HOOKED on it.**

Thanks for creating such a useful tool, I'm going to have so much fun discovering just what I can do with it.

_ **Must dash as I want to get back to getting up the learning curve.** _

Thanks again for developing UI-SVG-graphics and sharing it with the community.

---

<div class="post-metadata">

**Author:** ![mtoko](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mtoko/32/138_2.png) [@mtoko](https://discourse.nodered.org/u/mtoko)\
**Post date:** [3 October 2019 08:38 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg-final-beta-update-v1-2-1/16210/6 "2019-10-03T08:38:03Z")

</div>

Bart

I have been waiting for the beta and watching the development. I have not tried it yet, but thanks for the great work.

---

<div class="post-metadata">

**Author:** ![kuema](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/kuema/32/6542_2.png) [@kuema](https://discourse.nodered.org/u/kuema)\
**Post date:** [3 October 2019 09:35 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg-final-beta-update-v1-2-1/16210/7 "2019-10-03T09:35:48Z")

</div>

Great work!

Now I am torn, I wanted to move to uibuilder for my new Dashboard... including an SVG floor plan.  
Damn you, Bart! Now I really have to try your new node. 😆

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [3 October 2019 09:39 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg-final-beta-update-v1-2-1/16210/8 "2019-10-03T09:39:14Z")

</div>

Apologies to Julian (@TotallyInformation) 🤣

---

<div class="post-metadata">

**Author:** ![kuema](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/kuema/32/6542_2.png) [@kuema](https://discourse.nodered.org/u/kuema)\
**Post date:** [3 October 2019 09:45 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg-final-beta-update-v1-2-1/16210/9 "2019-10-03T09:45:42Z")

</div>

I think I will make the move to uibuilder anyway for the other things I have planned, because I need more control over the page layout than the Dashboard can provide. Not to mention the performance gain, Angular can get pretty heavy on the Pi.

But why not go both routes and integrate one into the other 🤔 At least for the floor plan, because your solution takes a lot of work off the shelf. 👍

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [3 October 2019 09:56 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg-final-beta-update-v1-2-1/16210/10 "2019-10-03T09:56:42Z")

</div>

@BartButenaers when we were developing this node, I considered starting a conversation about splitting the SVG node into 2 parts so that it could be used in uibuilder.

I cant remember why I didnt raise it but I seem to remember thinking there were some design hurdles or it was too closely coupled to dashboard & thus it was a flawed idea?

Perhaps if @TotallyInformation were to come on board with us & figure out a way to decouple it from dashboard (or make dashboard/uibuilder an option in the node config) we can support uibuilder too?

Thoughts?

---

<div class="post-metadata">

**Author:** ![kuema](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/kuema/32/6542_2.png) [@kuema](https://discourse.nodered.org/u/kuema)\
**Post date:** [3 October 2019 10:06 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg-final-beta-update-v1-2-1/16210/11 "2019-10-03T10:06:41Z")

</div>

I'd definitely like the idea, but uibuilder is not tied to a specific UI framework. I can't think of a generic solution of integrating it. Only Julian (@TotallyInformation) would know... 😀

If you use uibuilder with Vue, then _maybe_ there could be a Vue component for the SVG visualization part...🤔

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [3 October 2019 10:09 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg-final-beta-update-v1-2-1/16210/12 "2019-10-03T10:09:42Z")

</div>

@Steve-Mcl, was thinking something similar when reading the discussion. But I didn't have time yet to investigate uibuilder, so I don't dare to give any advise in that direction...

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [3 October 2019 10:32 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg-final-beta-update-v1-2-1/16210/13 "2019-10-03T10:32:10Z")

</div>

But perhaps if we want to discuss svg in uibuilder, we should do that in a separate discussion. We have to avoid that our testers get lost in heavy technical stuff...

---

<div class="post-metadata">

**Author:** ![kuema](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/kuema/32/6542_2.png) [@kuema](https://discourse.nodered.org/u/kuema)\
**Post date:** [3 October 2019 10:34 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg-final-beta-update-v1-2-1/16210/14 "2019-10-03T10:34:13Z")

</div>

I'm missing the 👍 feature in Discourse that Github provides.

But yes, makes sense.

Nevertheless, before I can think about a floor plan, I need to do the wiring of my doors and windows. Something I had planned for today, until you distracted me... 😆

---

<div class="post-metadata">

**Author:** ![dynamicdave](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dynamicdave/32/96_2.png) [@dynamicdave](https://discourse.nodered.org/u/dynamicdave)\
**Post date:** [3 October 2019 12:41 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg-final-beta-update-v1-2-1/16210/15 "2019-10-03T12:41:05Z")

</div>

Hi Bart,  
When I try to click the 'Editor' button at the bottom of the window, I get this message...

Drawing Editor (No URL)

Any ideas what I'm missing ?

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [3 October 2019 12:42 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg-final-beta-update-v1-2-1/16210/16 "2019-10-03T12:42:26Z")

</div>

On the settings tab, there should be a URL. If not, try clicking the button along side the input box

---

<div class="post-metadata">

**Author:** ![dynamicdave](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dynamicdave/32/96_2.png) [@dynamicdave](https://discourse.nodered.org/u/dynamicdave)\
**Post date:** [3 October 2019 13:00 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg-final-beta-update-v1-2-1/16210/17 "2019-10-03T13:00:34Z")

</div>

Thanks Steve,  
For anyone else who has this issue, simply click on the SVG-Graphics node, then select the 'Settings' tab and refresh the Editor URL link by pressing the anticlockwise arrow.

![ScreenShot012](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/4/4405c733a2f0d32010d3761f54eeb24e666a3129.png)

![ScreenShot013](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/0/05adde06822cb4b766012edc753fdb5483b425da.png)

![ScreenShot014](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/d/dffd5a0227ab444ebf26b072f6b44f004cfa3a42.png)

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [3 October 2019 14:03 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg-final-beta-update-v1-2-1/16210/18 "2019-10-03T14:03:42Z")

</div>

> [@dynamicdave](#):
>
> For anyone else who has this issue

I don't get it. The Editor URL field should be filled with the DrawSvg cloud URL by default:

```auto
defaults: {
   ...
   editorUrl: {value: "http://drawsvg.org/drawsvg.html"},
   ...
},

```

And indeed when I install it from Github on a fresh Node-RED, then the URL field is filled be default.  
No idea why it is empty in your use case. There is no other code snippet that could clear the value ...

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [3 October 2019 14:43 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg-final-beta-update-v1-2-1/16210/19 "2019-10-03T14:43:10Z")

</div>

Steve (@Steve-Mcl),  
Think I found the cause. Some test flows on the readme page have been made with an older version of our node, when our node didn't had the editor url field yet... When you import such a flow (like @dynamicdave probably did), the node gets an **empty editor url**.

We just need to do following steps for every flow on our readme (and in the examples directory):

1. import the test flow in Node-RED.
2. hit the Editor URL refresh button
3. export the test flow and update it on the readme page

Will do that tonight, but won't be early ...

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [3 October 2019 14:57 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg-final-beta-update-v1-2-1/16210/20 "2019-10-03T14:57:40Z")

</div>

> [@BartButenaers](#):
>
> perhaps if we want to discuss svg in uibuilder

I think this is sensible.

> [@kuema](#):
>
> uibuilder is not tied to a specific UI framework. I can't think of a generic solution of integrating it

I think I'd need to understand more about what your node does and how it works.

In theory, if you have a core that can be split like uibuilder itself is - e.g. a back-end Node and a front-end library, then it should be easy enough to have an integration that leverages uibuilder without being locked in to it.

I continue to think about where uibuilder goes next and high on the priority list is a way to enable other nodes to make use of uibuilder. For example, I'm thinking that the configuration for uibuilder may need to move out of the node itself and into a configuration node - that way, other nodes could link to the URL and the websocket without having to do anything themselves.

It is possible though that there are other ways to let an "external" node know how to connect to the socket? Perhaps just an API that lets a node request the [Socket.IO](http://Socket.IO) end-point?

> [@kuema](#):
>
> If you use uibuilder with Vue, then _maybe_ there could be a Vue component for the SVG visualization part

Again, this is certainly a possibility. Obviously I've been thinking about the best approach to creating standard components for uibuilder and I'm leaning towards a focus on Vue for that. **But** , if you don't _need_ to restrict yourself to Vue then don't 🙂

So please let's take this to a separate thread and explore what the need is so that we can propose some approaches.

[Next page](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg-final-beta-update-v1-2-1/16210.md?page=2)