# Questions on node-red-contrib-ui-svg

**URL:** <https://discourse.nodered.org/t/questions-on-node-red-contrib-ui-svg/37031>\
**Category:** General\
**Created:** [5 December 2020 01:32 UTC](https://discourse.nodered.org/t/questions-on-node-red-contrib-ui-svg/37031 "2020-12-05T01:32:19Z")\
**Posts on this page:** 7\
**Page:** 2

<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:** [11 December 2020 21:14 UTC](https://discourse.nodered.org/t/questions-on-node-red-contrib-ui-svg/37031/21 "2020-12-11T21:14:09Z")

</div>

> [@Sean-McG](#):
>
> I had to guess the coordinates btw as the " Show mouse coordinates (as tooltip)" figures are drawn underneath the floorplan so I cannot see them.

This is now hopefuly solved with the Github version...

> [@Sean-McG](#):
>
> and the amount of zoom was configurable somehow

In the Github version you can now adjust the zoom percentage (minimum value is 100%):

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/1/11124a4ba8561ca83df17b703cda297d01958ca9.png)

> [@Sean-McG](#):
>
> it would be of more use if the zoom was centred on the click location

This was again a brain breaker... At the end I found [this](https://github.com/timmywil/panzoom#faq):

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/7/471ba6e3542c4bd1aa6cb54fa6d2df2f965b3ccd.png)

Since the upper left corner of the drawing was the center of animation, the circly would have moved to that point ...

So now I pass the (client) coordinates - where you have double clicked/tapped - to the zoom function, to make sure that point is the center of the animation:

![svg_double_click](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/2/f28367d0da896074f7d5ea4b0f7c2871ce0a0bc9.gif)

> [@Sean-McG](#):
>
> If you just change your screen resolution and check what you see after sending the same command you may see what I mean. Hope this makes sense ?

Don't understand exactly what is going on...  
I fixed one thing, but I'm not sure whether it will entirely solve your problem: in the input msg (_{"command":"zoom\_by\_percentage","percentage":300,"x":300,"y":30}_) you specify _ **SVG coordinates** _, because it it are the coordinates relative to the upper left point of your drawing. However the [zoomtopoint](https://github.com/timmywil/panzoom#zoomtopoint) function expects _ **client coordinates** _, i.e. relative to your browser window. When I have a circle at (100, 100), I can now zoom in on it - similar to the above double click animation - by injecting your message:

![svg_client_coord](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/0/205af93c19075ef56d209a75a5ae167cbea3013c.gif)

But I have a bad feeling that this this client coordinate fix is not end of story yet ...

---

<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:** [11 December 2020 21:57 UTC](https://discourse.nodered.org/t/questions-on-node-red-contrib-ui-svg/37031/22 "2020-12-11T21:57:09Z")

</div>

> [@Sean-McG](#):
>
> Hope this makes sense ?

Sean,  
Here a little summary of the 3 available coordinate systems:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/7/87929f7623ea0193063df51329b46801300e9bb7.png)

So you inject a message with SVG coordinates, i.e. and X and Y coordinate relative to the green origin.  
But the PanZoom library (zoomToPoint) expects client coordinates, i.e. relative to the red origin.  
=\> I now convert your SVG coordinates to client coordinates:  
` clientX = yourSvgX + svgDrawingOriginX `

Hopefully this gives you some insights, and you can give me some more tips of where it might go wrong ...

---

<div class="post-metadata">

**Author:** ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)\
**Post date:** [11 December 2020 23:44 UTC](https://discourse.nodered.org/t/questions-on-node-red-contrib-ui-svg/37031/23 "2020-12-11T23:44:30Z")

</div>

Bart,

Tool tip is now viewable on the top. Injecting zoom values seems to be consistent on both my tablet and PC at different screen resolutions.

Unfortunately I think you missed off the zoom percentage box as I cannot see it in settings, and double click to zoom no longer works ?

Take a look in your own time- Just reporting back !

Sean

---

<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:** [12 December 2020 06:50 UTC](https://discourse.nodered.org/t/questions-on-node-red-contrib-ui-svg/37031/24 "2020-12-12T06:50:33Z")

</div>

> [@Sean-McG](#):
>
> I think you missed off the zoom percentage box

Could it be that you have forgotten to refresh the browser session where your flow editor is running? I have installed the version from github:

- The checkbox is there
- The double mouse click works fine on Windows 10
- The double tap works fine on my Android phone

---

<div class="post-metadata">

**Author:** ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)\
**Post date:** [12 December 2020 15:54 UTC](https://discourse.nodered.org/t/questions-on-node-red-contrib-ui-svg/37031/25 "2020-12-12T15:54:45Z")

</div>

My bad again - All good now thanks for all your help !

---

<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:** [12 December 2020 17:18 UTC](https://discourse.nodered.org/t/questions-on-node-red-contrib-ui-svg/37031/26 "2020-12-12T17:18:33Z")

</div>

Ooooooh, so glad it works...  
At the time being I had to replace quickly the underlying panzoom library, because the previous one seemed not to be maintained anymore. But had no time unfortunately to test it in detail like you did now.  
Anyway hopefully others can benefit now from it.  
I will release this as soon on NPM...

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [26 December 2020 17:18 UTC](https://discourse.nodered.org/t/questions-on-node-red-contrib-ui-svg/37031/27 "2020-12-26T17:18:34Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.

[Previous page](https://discourse.nodered.org/t/questions-on-node-red-contrib-ui-svg/37031.md?page=1)