# \[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:** 4

<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:** [6 October 2019 10:12 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg-final-beta-update-v1-2-1/16210/61 "2019-10-06T10:12:12Z")

</div>

I've seen that behaviour as well - I wondered what was going on at first (thought Node-RED had frozen).

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [6 October 2019 11:05 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg-final-beta-update-v1-2-1/16210/62 "2019-10-06T11:05:33Z")

</div>

@Steve-Mcl - no - never seen that.

---

<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:** [6 October 2019 11:23 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg-final-beta-update-v1-2-1/16210/63 "2019-10-06T11:23:41Z")

</div>

@mtoko, @dynamicdave

Is this the same thing [I reported](https://discourse.nodered.org/t/node-red-1-0-0-beta-4-released/15577/25) on V1.beta4?

Can you list steps to reproduce this?

Can you look in console.log see if you have the same error?

It may well be our node causing this issue (likely) or something node-red is not handling (less likely but possible).

If you can re-produce this consistently we might be able to figure it out.

---

<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:** [6 October 2019 12:00 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg-final-beta-update-v1-2-1/16210/64 "2019-10-06T12:00:09Z")

</div>

@ [Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)  
Steps  
1.) Add SVG graphics node on new flow  
2.) Select SVG graphics node and open DrawSvg editor  
3.) Make a small edit in DrawSvg editor and save  
4.) Deploy changes in Node Red editor  
5.) Cannot select any node in Node Red editor on any flows  
6.) Cannot open any node config on any flow when double click any node  
7.) Work around is to refresh Node Red editor and all works fine again  
I have attached Console log (hope this is what you want)  
Thanks[svgLog.txt](https://discourse.nodered.org/uploads/short-url/u1NMXPizv8IWb1EkBszJSk6szj.txt) (10.1 KB)

---

<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:** [6 October 2019 12:09 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg-final-beta-update-v1-2-1/16210/65 "2019-10-06T12:09:12Z")

</div>

Thanks for feedback.

Could you try the followng (please follow exact steps)...

1. refresh editor
2. ensure you can click items.
3. Open the svg node & change something
4. deploy
5. refresh browser
6. try your steps to see if the problem still exists.

NOTE...  
In your log I see `Uncaught TypeError: Cannot read property '_focusTabbable' of undefined` - that is the same as the error I seen too.

Uncertain what is causing it.

It would seem likely that since you have the SVG node installed & you are witnessing this issue the problem is related. However I am unsure if there is something node-red is not handling/checking (regardless of cause).

---

<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:** [6 October 2019 12:24 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg-final-beta-update-v1-2-1/16210/66 "2019-10-06T12:24:38Z")

</div>

@ [Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)  
I have followed your steps and the issue remains the same, it can still be used but it is necessary to reload the Node Red editor after any changes in the SVG graphic node  
See this video  
https://player.vimeo.com/video/364598843

---

<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:** [6 October 2019 19:34 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg-final-beta-update-v1-2-1/16210/67 "2019-10-06T19:34:33Z")

</div>

> [@Steve-Mcl](#):
>
> However I am unsure if there is something node-red is not handling/checking

Hey Steve (@Steve-Mcl),

I couldn't reproduce the problem on my test system, which still was running an older Node-RED version. So this evening I have upgraded to Node-RED **1.0.1** and now indeed I get the same error...

Found on [StackOverflow](https://stackoverflow.com/questions/37185031/jquery-ui-focus-issue) that the problem is caused in some jQuery versions, _when a popup dialog is being opened inside another popup dialog_. That is indeed the same situation we are dealing with here: we open the first popup (i.e. our node's config screen) and from there we open another popup (i.e. the DrawSvg editor).

So did a quick test by putting a breakpoint in our `oneditsave` (i.e. just before our config screen popup is closed, and we are returning to the flow editor):

- When I change something in our config screen but I don't open DrawSvg, then `$.ui.dialog.overlayInstances` is `1` (which means 1 popup open).
- When I change something in our config screen and I open DrawSvg, then `$.ui.dialog.overlayInstances` is `undefined`!!

The _ **problem 'seems' to be solved when I add this** _:

```auto
oneditsave: function() {
   ...
   $.ui.dialog.overlayInstances = 1;
},
oneditcancel: function() {
   ...
   $.ui.dialog.overlayInstances = 1;
},

```

But of course it isn't really a scientific approach. Because I don't know how this will behave in future jQuery versions. However it is the only approach I can think of at the moment ...

**[EDIT]:** I see now that the DrawSvg window is never destroyed. Could that be the cause?

Anybody a suggestion?

P.S. @mtoko: you recording is by far the most beautiful incident description that I have ever received from a end user 👍

---

<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:** [6 October 2019 19:51 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg-final-beta-update-v1-2-1/16210/68 "2019-10-06T19:51:52Z")

</div>

> [@BartButenaers](#):
>
> **[EDIT]:** I see now that the DrawSvg window is never destroyed. Could that be the cause?

It 'seems' to me that the problem is also solved when I _ **destroy** _ the (DrawSvg popup) window after it has been closed:

```auto
buttons : {
   "Yes":function(){
      saveSVG(function(){
      //onSuccess
      window.svgEditorDialog.closeConfirmed = true;
      window.svgEditorDialog.dialog("close");
      window.svgEditorDialog.dialog('destroy');
      messageBox.close();
      })
   },
   "No": function(){
      window.svgEditorDialog.closeConfirmed = true;
      window.svgEditorDialog.dialog("close"); 
      window.svgEditorDialog.dialog('destroy');
      messageBox.close();
   },
   "Cancel": function(){
      window.svgEditorDialog.closeConfirmed = false;
      messageBox.close();
   }
}

```

I'm more confident with this second solution. Will test it a bit more, to make sure it wasn't a lucky shot...

---

<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:** [6 October 2019 20:05 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg-final-beta-update-v1-2-1/16210/69 "2019-10-06T20:05:21Z")

</div>

I found the same thing Bart, did some tests (and broke some stuff in the process). just didn't get time to finish the fix so good stuff. I agree with the 2nd option.

---

<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:** [6 October 2019 20:06 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg-final-beta-update-v1-2-1/16210/70 "2019-10-06T20:06:45Z")

</div>

> [@Steve-Mcl](#):
>
> @mtoko, @dynamicdave

@mtoko, @dynamicdave: It is now available on Github (as version **1.0.1** ).

---

<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:** [6 October 2019 20:13 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg-final-beta-update-v1-2-1/16210/71 "2019-10-06T20:13:54Z")

</div>

> [@BartButenaers](#):
>
> I see now that the DrawSvg window is never destroyed. Could that be the cause?

If you remember Bart, this was the only way I could get DrawSVG to be stable (I said I didn't like it but it worked!). And if you recall, I challenged you to find a better way 😂😂😂

---

<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:** [6 October 2019 20:55 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg-final-beta-update-v1-2-1/16210/72 "2019-10-06T20:55:47Z")

</div>

> [@BartButenaers](#):
>
> @mtoko, @dynamicdave: It is now available on Github (as version **1.0.1** ).

@mtoko, @dynamicdave: Had some chit chat with @Steve-Mcl and seems this fix makes things even more worse. So I have removed it again from Github. Due to the complexity and our limited spare time, this will most probably take some time to get solved...

---

<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:** [7 October 2019 08:56 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg-final-beta-update-v1-2-1/16210/73 "2019-10-07T08:56:57Z")

</div>

🖖

---

<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:** [13 October 2019 21:57 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg-final-beta-update-v1-2-1/16210/74 "2019-10-13T21:57:06Z")

</div>

Hi folks,

Good news for the SVG lovers in the Node-RED community, since we proudly announce our **second beta version (1.1.0)**🍾 🥳 🍾 🥳

But to be honest, due to private issues I had very few spare time for this beta release. So most credits go to my partner in crime @Steve-Mcl !!!

A summary of the major changes (beside a series of smaller bugfixes and enhancements):

### 1 - DrawSvg as preferred input

Joseph Liard (the author of DrawSvg) is currently implementing our feature requests, to integrate DrawSvg even better into Node-RED. Looks very promising, so we have changed the initial mindset of this SVG-node: instead of entering the SVG source manually (and optionally open DrawSvg afterwards), now we advise to draw in DrawSvg (and optionally change the SVG source manually afterwards).

To highlight that DrawSvg is the preferred way to go: we have removed the small DrawSvg button (below the SVG source editor), and instead added a new _ **"Editor" tabsheet** _ containing a large button:

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

P.S. As you can see in the above demo, a link to the 'Settings' tabsheet is displayed when no editor URL has been specified (as an extra help for the issue that @dynamicdave had registered above).

P.S. Also thanks to @dceejay for assisting us with the CSS [issues](https://discourse.nodered.org/t/fontawesome-icon-with-incorrect-color/)!!

### 2 - FontAwesome support in DrawSvg

Joseph Liard has already been so kind to add FontAwesome icon support in his online drawing editor. This allows you e.g. to create very easily a floorplan of your house:

![svg_beta2_demo](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/5/59cd434d0a621e5aeffea4c2cf155ed279a8a91e.gif)

The above demo shows also how to customize the look-and-feel of the icon (e.g. change the color), but also how to apply an **identifier** ("_cam\_kitchen_"). That identifier can be used later on to interact dual-way with your icon (i.e. via both input and ouput messages), similar to the interaction with other SVG elements.

### 3 - Unresponsive flow editor fix

Users like @mtoko had reported that the flow editor became unresponsive (i.e. you couldn't click on any other node), after leaving our config screen. This problem should be solved now ...

_ **--- WHAT IS NEXT ---** _  
The major required functionality is now available in this current beta version, so we will try to publish a final version on NPM soon. Perhaps we might fix one or more smaller bugs next week, but we don't expect huge changes anymore. So it would be nice if this beta could be tested as much as possible!

Have fun with drawing in Node-RED!  
Bart & Steve

---

<div class="post-metadata">

**Author:** ![jmorris644](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jmorris644/32/31964_2.png) [@jmorris644](https://discourse.nodered.org/u/jmorris644)\
**Post date:** [16 October 2019 16:11 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg-final-beta-update-v1-2-1/16210/75 "2019-10-16T16:11:07Z")

</div>

I can use exactly this for an upcoming project. Where can I find the demo flow? I looked on the NR forum and Git. I didn't see this one.

edit: It is the data driven HMI demo

---

<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:** [16 October 2019 16:59 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg-final-beta-update-v1-2-1/16210/76 "2019-10-16T16:59:55Z")

</div>

> [@jmorris644](#):
>
> Where can I find the demo flow?

Hi Joe (@jmorris644),

You can find the nice demo from @Steve-Mcl in the "_ **import** _" menu.  
For Node-RED version 1.0.x it can be accessed like this:

![svg_example_flow](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/0/09100e4d614c5a8f333f4cbd48df84b2bcc645f3.gif)

---

<div class="post-metadata">

**Author:** ![jmorris644](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jmorris644/32/31964_2.png) [@jmorris644](https://discourse.nodered.org/u/jmorris644)\
**Post date:** [16 October 2019 20:15 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg-final-beta-update-v1-2-1/16210/77 "2019-10-16T20:15:43Z")

</div>

Thanks Bart! I didn't even know the demo area of import existed.

The layout that @Steve-Mcl created is exactly what I will be needing. But the flow was not quite what I had imagined by being data driven.

I need to monitor about 100 remote IOT devices with both architectural health information but internal user information as well. Also the number of devices may change upon implementation so I do not wish to hard-code the boxes in the node.

At a high level, if I needed to create the boxes with the data and the ability to drill down just like @Steve-Mcl did, but totally from outside of the SVG control, what would be the best process for doing that?

I hope there is a little clarity to my question.

Joe

---

<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:** [16 October 2019 22:05 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg-final-beta-update-v1-2-1/16210/78 "2019-10-16T22:05:27Z")

</div>

> [@jmorris644](#):
>
> But the flow was not quite what I had imagined by being data driven.

For a demo, demo data is faked. What did you expect? If you want real data to drive it then replace the demo data 👍

> [@jmorris644](#):
>
> Also the number of devices may change upon implementation so I do not wish to hard-code the boxes in the node

You want something to draw boxes in a 4x2 format that drills down but you don't want to hard code them? How do you imagine such a program could guess what you want? Please elaborate.

> [@jmorris644](#):
>
> ability to drill down just like @Steve-Mcl did, but totally from outside of the SVG control

I am struggling to understand what you mean? From outside? Our control is for simplifying the creation and manipulation of SVG graphics - not for controlling things outside of itself?

---

<div class="post-metadata">

**Author:** ![jmorris644](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jmorris644/32/31964_2.png) [@jmorris644](https://discourse.nodered.org/u/jmorris644)\
**Post date:** [16 October 2019 23:14 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg-final-beta-update-v1-2-1/16210/79 "2019-10-16T23:14:38Z")

</div>

Sorry, total confusion.

So lets say that I want the boxes lie you have them with certain names and certain data and allow drilldown to display more data within a box. Each box could represent a device in the real world that is being monitored. Based on the state of the real-world device the box would change color.

Now, lets say that when we implement the flow solution that contains the SVG node that we do not know how many real-world devices exist or the names of those devices.

Is there a way to dynamically build the SVG source without any of it being hardcoded in the node itself?

I see that the node input allows me to set attributes of elements, but can I dynamically create the elements themselves?

I hope this is more understandable.

Thanks

Joe

---

<div class="post-metadata">

**Author:** ![Bobo](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bobo/32/8401_2.png) [@Bobo](https://discourse.nodered.org/u/Bobo)\
**Post date:** [17 October 2019 04:15 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg-final-beta-update-v1-2-1/16210/80 "2019-10-17T04:15:37Z")

</div>

> [@BartButenaers](#):
>
> You can find the nice demo from @Steve-Mcl in the " _ **import** _ " menu.

In Win10/Chrome the behaviours are not working for me (title bar not going to full screen, and station 10 click just flashes up page 2 then drops back to page 1).

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

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