# \[ANNOUNCE\]node-red-contrib-ui-svg : pan & zoom (beta) **URL:** \ **Category:** Share Your Nodes\ **Created:** [30 December 2019 08:02 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg-pan-zoom-beta/19729 "2019-12-30T08:02:43Z")\ **Posts on this page:** 11\ **Page:** 1

**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:** [30 December 2019 08:02 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg-pan-zoom-beta/19729/1 "2019-12-30T08:02:43Z")

Hi folks, Trying to publish all my nearly-completed-stuff as soon as possible. Here the next one ... Got a feature request recently to have **pan and zoom functionality** in the [node-red-contrib-ui-svg](https://github.com/bartbutenaers/node-red-contrib-ui-svg) node. This might indeed be very interesting when you are displaying _large SVG drawings_ in your dashboard, e.g. large buildings or large process flows. It works fine in my test setup, but the requester of this feature cannot get it working on his pc. Seems that the [library](https://github.com/ariutta/svg-pan-zoom) that I'm using, cannot be loaded from it's Node-RED server for some reason: > By entering http://\_\_\_\_:1880/ui/ui\_svg\_graphics/library/svg-pan-zoom.min.js I get: {"code":"unexpected\_error","message":"Unknown library type 'svg-pan-zoom.min.js'"}\* I cannot figure out why it doesn't work, so _ **would be nice if a few people from the community could install and test this new feature** _!\* You can install the beta directly from my Github repository (the "panzoom" branch): ```auto npm install bartbutenaers/node-red-contrib-ui-svg#panzoom ``` The pan/zoom functionalities can be activated in the "_Settings_" tabsheet: ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/5/5fa6b17f94fee7e2a90144cb7db2087cc0c5fa01.png) Here is a demo to show it in action. All the christmas balls are defined as 'clickable': ![svg_pan_and_zoom](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/3/30770dadae23f6789a8e33fd24ea4514a6e8b9f5.gif) ```auto [{"id":"3b053fec.6e949","type":"ui_svg_graphics","z":"ae5f2a27.a96178","group":"87e79a83.f45268","order":2,"width":"14","height":"14","svgString":"","clickableShapes":[{"targetId":"#ball_1","action":"click","payload":"Ball 1 clicked. Merry christmas!","payloadType":"str","topic":"Merry christmas"},{"targetId":"#ball_2","action":"click","payload":"Ball 2 clicked. Merry christmas!","payloadType":"str","topic":"Merry christmas"},{"targetId":"#ball_3","action":"click","payload":"Ball 3 clicked. Merry christmas!","payloadType":"str","topic":"Merry christmas"},{"targetId":"#ball_4","action":"click","payload":"Ball 4 clicked. Merry christmas!","payloadType":"str","topic":"Merry christmas"},{"targetId":"#ball_5","action":"click","payload":"Ball 5 clicked. Merry christmas!","payloadType":"str","topic":"Merry christmas"},{"targetId":"#ball_6","action":"click","payload":"Ball 6 clicked. Merry christmas!","payloadType":"str","topic":"Merry christmas"},{"targetId":"#ball_7","action":"click","payload":"Ball 7 clicked. Merry christmas!","payloadType":"str","topic":"Merry christmas"},{"targetId":"#ball_8","action":"click","payload":"Ball 8 clicked. Merry christmas!","payloadType":"str","topic":"Merry christmas"},{"targetId":"#ball_9","action":"click","payload":"Ball 9 clicked. Merry christmas!","payloadType":"str","topic":"Merry christmas"},{"targetId":"#ball_10","action":"click","payload":"Ball 10 clicked. Merry christmas!","payloadType":"str","topic":"Merry christmas"},{"targetId":"#ball_11","action":"click","payload":"Ball 11 clicked. Merry christmas!","payloadType":"str","topic":"Merry christmas"},{"targetId":"#ball_12","action":"click","payload":"Ball 12 clicked. Merry christmas!","payloadType":"str","topic":"Merry christmas"},{"targetId":"#ball_13","action":"click","payload":"Ball 13 clicked. Merry christmas!","payloadType":"str","topic":"Merry christmas"},{"targetId":"#ball_14","action":"click","payload":"Ball 14 clicked. Merry christmas!","payloadType":"str","topic":"Merry christmas"},{"targetId":"#ball_15","action":"click","payload":"Ball 15 clicked. Merry christmas!","payloadType":"str","topic":"Merry christmas"},{"targetId":"#ball_16","action":"click","payload":"Ball 16 clicked. Merry christmas!","payloadType":"str","topic":"Merry christmas"},{"targetId":"#ball_17","action":"click","payload":"Ball 17 clicked. Merry christmas!","payloadType":"str","topic":"Merry christmas"},{"targetId":"#ball_18","action":"click","payload":"Ball 18 clicked. Merry christmas!","payloadType":"str","topic":"Merry christmas"},{"targetId":"#ball_19","action":"click","payload":"Ball 19 clicked. Merry christmas!","payloadType":"str","topic":"Merry christmas"},{"targetId":"#ball_20","action":"click","payload":"Ball 21 clicked. Merry christmas!","payloadType":"str","topic":"Merry christmas"},{"targetId":"#ball_21","action":"click","payload":"Ball 22 clicked. Merry christmas!","payloadType":"str","topic":"Merry christmas"}],"smilAnimations":[],"bindings":[],"showCoordinates":false,"autoFormatAfterEdit":false,"outputField":"payload","editorUrl":"https://drawsvg.org/drawsvg.html","directory":"","panEnabled":true,"zoomEnabled":true,"controlIconsEnabled":true,"dblClickZoomEnabled":true,"mouseWheelZoomEnabled":true,"name":"","x":1320,"y":120,"wires":[["fed8df5a.4c652"]]},{"id":"fed8df5a.4c652","type":"debug","z":"ae5f2a27.a96178","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","x":1510,"y":120,"wires":[]},{"id":"e4241244.0efc3","type":"inject","z":"ae5f2a27.a96178","name":"","topic":"","payload":"[{\"command\":\"update_attribute\",\"selector\":\"#micro_bertje\",\"attributeName\":\"x\",\"attributeValue\":\"50\"}]","payloadType":"json","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":1130,"y":120,"wires":[["3b053fec.6e949"]]},{"id":"87e79a83.f45268","type":"ui_group","z":"","name":"Hikvision","tab":"935e3c31.38046","disp":true,"width":"14","collapse":false},{"id":"935e3c31.38046","type":"ui_tab","z":"","name":"Camera","icon":"dashboard","disabled":false,"hidden":false}] ``` Remark: it is not possible yet to trigger the pan/zoom via input messages. I have created an [issue](https://github.com/bartbutenaers/node-red-contrib-ui-svg/issues/47) for that, to implement it later when I have more time. Pull requests are always welcome 😉 As usual all '_constructive_' feedback is more than welcome! Have fun with it! Bart ---

**Author:** ![edje11](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/edje11/32/572_2.png) [@edje11](https://discourse.nodered.org/u/edje11)\ **Post date:** [30 December 2019 20:27 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg-pan-zoom-beta/19729/2 "2019-12-30T20:27:28Z")

Hi Bart, Tested the pan and zoom Christmas tree for you and everything works fine here. No errors in the console. Running on Pi 3B+ with Buster Evert ---

**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:** [30 December 2019 21:05 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg-pan-zoom-beta/19729/3 "2019-12-30T21:05:22Z")

> [@edje11](#): > > Tested the pan and zoom Hi Evert, Very kind of you to test this new feature. Thanks a lot!!!! Bart ---

**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:** [1 January 2020 14:45 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg-pan-zoom-beta/19729/4 "2020-01-01T14:45:05Z")

Hi folks, Got a great tip this morning, from the same guy that pointed me to the panzoom library that I'm using now. When you install the "_panzoom_" branch from my Github repository (see command above), you should have _ **touch event support** _🍾 🥳 Works like a charm on my Samsung Android smartphone ... This is a really cool feature for people that want to display a floorplan of their home on a wall mounted touch screen. ---

**Author:** ![seth350](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/seth350/32/4617_2.png) [@seth350](https://discourse.nodered.org/u/seth350)\ **Post date:** [1 January 2020 18:42 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg-pan-zoom-beta/19729/5 "2020-01-01T18:42:30Z")

Does that mean the pinch to zoom touch gestures work as well? ---

**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:** [1 January 2020 18:53 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg-pan-zoom-beta/19729/6 "2020-01-01T18:53:47Z")

Hey Seth, Long time ago... I have no pc at the moment, but [here](https://github.com/bartbutenaers/node-red-contrib-ui-svg/blob/91e00392edbbc5e4ccaa821c1bc5c22623eb5028/svg_graphics.js#L313) you can see the pinch event handling. And if I'm not mistaken, I have tested the pinch to zoom this afternoon. But I'm not a part of the "_swipe generation_", so I might be wrong 🤫 Will test it tonight and add it to the documentation... ---

**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:** [1 January 2020 23:04 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg-pan-zoom-beta/19729/7 "2020-01-01T23:04:27Z")

Seth, I have tested it and added a new section to my [readme](https://github.com/bartbutenaers/node-red-contrib-ui-svg/blob/panzoom/README.md#pan-and-zoom) page: ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/e/e3c918a8f015383e11008438b54a612865bc0a22.png) My christmas holidays are over now, so my Node-RED developments will slow down again ... ---

**Author:** ![afelix](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/afelix/32/9743_2.png) [@afelix](https://discourse.nodered.org/u/afelix)\ **Post date:** [2 January 2020 23:07 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg-pan-zoom-beta/19729/8 "2020-01-02T23:07:23Z")

Adding it here as well. Managed to reproduce it on 0.20.7 with 13.5.0, as the user on github had too. I'm now working on figuring out why. ---

**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 April 2020 21:51 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg-pan-zoom-beta/19729/9 "2020-04-06T21:51:33Z")

Hi folks (and @Steve-Mcl), Would like to publish this pan/zoom functionality soon, in the _ **2.0.0** _ release of the SVG node. But only allowing pan/zoom control via user gestures (see discussion above) seemed a bit too minimalistic for me. So tonight I added new functionality to the _ **"panzoom" branch** _ on Github, to be able to _ **control panning and zooming via input messages** _. This way it is now possible to pan and zoom via the flow editor (e.g. using Inject nodes) or via the dashboard (e.g. using buttons): ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/c/3cf6b6db70b9665300ce6fcc032c56bf8ff97f3f.png) Which allows us to setup custom dashboard layouts like this: ![svg_panzoom_demo](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/9/894a7579f435b012264141d28960bf84d00533ee.gif) . I think this is very useful e.g. for large floor plans. P.S. this example flow is available on the readme [page](https://github.com/bartbutenaers/node-red-contrib-ui-svg/tree/panzoom#pan-and-zoom). Have fun with it! Bart ---

**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:** [14 June 2020 06:32 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg-pan-zoom-beta/19729/10 "2020-06-14T06:32:23Z")

Hi everybody (including @Steve-Mcl), would like to start with the svg node again soon, but not sure what I have to do with the panzoom. That library that I use from [ariutta](https://github.com/ariutta/svg-pan-zoom) is not well maintained. The last last commit is from october 2019, as you can see from the commit history: ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/4/a47d5f4c3a099946df77614c5a290460f6640e51.png) So I was considering to use the one from [anvaka](https://github.com/anvaka/panzoom) (as explained above), because that has more recent developments (last commits 10 days ago): ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/c/6cd41c25a7e2e5d89f1868c6c0258d4a964e2b93.png) But when looking at the recent open issues from the latter library, I see that anvaka almost never responds 😩 Now I found another library from [timmywil](https://github.com/timmywil/panzoom). That project seems to be maintained 'again' after a long dead period: ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/b/ab85d9c7fc938134f1bba99bee29be0dcf5929b0.png) But this guy only has 1 open issue, and 429 closed ones! But it is based on CSS. Don't know what the difference is with the other libraries, and if this is a disadvantage? In any way I need to change a lot of stuff to migrate to each of those new ones. And they both don't offer all the functionality from the first library (e.g. missing 'fit' feature). Does anybody have any advise, because I really don't have time anymore to redesign this node over and over again ... Thanks! ---

**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:** [28 June 2020 22:07 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg-pan-zoom-beta/19729/11 "2020-06-28T22:07:33Z")

After comparing the repositories over and over again, I have finally decided to go for the panzoom library from Timmy Willison. Hopefully I have chosen wisely this time ... Anyway the _"panzoom"_ branch on Github has been redesigned to use that library. Had to add some of my own stuff to achieve the same features as with the original library, but I think it is now complete. The _"Settings"_ tabsheet has been extended to make it a bit more flexible: ![svg_panzoom_settings](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/b/cb4547ec29d7e933dda73a1731f7cda16a5e4c57.gif) The pan/zoom feature has been explained in this [section](https://github.com/bartbutenaers/node-red-contrib-ui-svg/blob/panzoom/README.md#pan-and-zoom) on the readme page. And here is a short demo with the SVG-based Node-RED logo: ![svg_panzoom_mouse](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/6/066a3d75da17fd057f435c854fecc0113a667021.gif) _ **QUESTIONS:** _ 1. If there is anybody in the community prosperous enough to buy Apple devices, then it would be nice to get feedback whether this also works e.g. on an iPhone 😉 P.S. the NPM installation command is in the first post of this discussion (and an example flow is available on my readme page). 2. At every double-click with the _ **mouse** _ I trigger a zoom-in, and every SHIFT double-click I trigger a zoom-out. So when you double click once and then again, this means there will be a zoom-in twice. On the other hand on a _ **touch** _ screen (where I don't have a SHIFT button) I do it like this: the first double-tap I trigger a zoom-in, the second double-tap a zoom-out, then again a zoom-in and so on ... So the behaviour is a bit different in both circumstances. Is there anybody experienced with this kind of stuff, who can confirm whether I have implemented the correct behaviour? Thanks and have fun with it!!