[ANNOUNCE]node-red-contrib-ui-svg : pan & zoom (beta)

[BartButenaers]

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 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 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):

npm install bartbutenaers/node-red-contrib-ui-svg#panzoom

The pan/zoom functionalities can be activated in the "Settings" tabsheet:

Here is a demo to show it in action. All the christmas balls are defined as 'clickable':

[{"id":"3b053fec.6e949","type":"ui_svg_graphics","z":"ae5f2a27.a96178","group":"87e79a83.f45268","order":2,"width":"14","height":"14","svgString":"<svg xmlns:rdf=\"http://www.w3.org/1999/02/22-rdf-syntax-ns#\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:cc=\"http://web.resource.org/cc/\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" xmlns:dc=\"http://purl.org/dc/elements/1.1/\" xmlns:svg=\"http://www.w3.org/2000/svg\" id=\"svg548\" height=\"400pt\" width=\"400pt\" viewBox=\"72.69879150390625 24.70800018310547 353.5199890136719 440.0771484375\"><rect id=\"svgEditorBackground\" x=\"72.69879150390625\" y=\"24.70800018310547\" width=\"353.5199890136719\" height=\"440.0771484375\" style=\"fill:none;stroke:none;\"/>\n <path id=\"path749\" stroke-linejoin=\"bevel\" d=\"m157.22 412.76c0.91 52.71 198.11 52.71 197.2 0.91-0.9-55.44-195.38-56.35-197.2-0.91z\" fill-rule=\"evenodd\" stroke=\"#000\" stroke-width=\"3.75\" fill=\"#623e35\"/>\n <path id=\"path748\" stroke-linejoin=\"bevel\" d=\"m212.66 306.43l-0.91 107.23c7.94 11.82 76.77 13.64 88.15-0.9v-107.24c-10 15.45-67.25 20.9-87.24 0.91z\" fill-rule=\"evenodd\" transform=\"matrix(.61856 0 0 1 98.944 -.90881)\" stroke=\"#000\" stroke-width=\"4.7681\" fill=\"#623e35\"/>\n <path id=\"path747\" stroke-linejoin=\"bevel\" d=\"m248.1 24.708c-3.64 10.905-113.6 87.242-176.31 125.41 37.26 100.87 322.62 97.24 353.52 0-53.62-15.45-174.49-115.42-177.21-125.41z\" fill-rule=\"evenodd\" transform=\"translate(.90878 139.04)\" stroke=\"#000\" stroke-width=\"3.75\" fill=\"#009500\"/>\n <path id=\"path746\" stroke-linejoin=\"bevel\" d=\"M248.1,24.708c-3.6399999999999864,10.905000000000001,-79.97999999999999,87.242,-142.68,125.41c39.08000000000001,56.34,250.82000000000002,62.71000000000001,285.36,-1.8199999999999932c-53.620000000000005,-15.449999999999989,-139.96,-113.6,-142.68,-123.59Z\" fill-rule=\"evenodd\" transform=\"translate(-3.7253e-7 71.794)\" stroke=\"#000\" stroke-width=\"3.75\" fill=\"#009500\"/>\n <path id=\"path750\" stroke-linejoin=\"bevel\" d=\"m157.34 412.76l1.26 19.08c42.71 49.98 181.72 37.39 194.45 0.13l1.15-19.21c1.82 53.62-194.13 50.89-196.86 0z\" fill-rule=\"evenodd\" stroke=\"#000\" stroke-width=\"3.75\" fill=\"#623e35\"/>\n <path id=\"path745\" stroke-linejoin=\"bevel\" d=\"M248.1,24.708c-3.6399999999999864,10.905000000000001,-40.900000000000006,82.702,-103.6,120.87c37.25999999999999,44.53,178.12,48.16,212.64999999999998,0.9000000000000057c-53.620000000000005,-15.439999999999998,-106.32999999999998,-111.78,-109.05000000000001,-121.77Z\" fill-rule=\"evenodd\" stroke=\"#000\" stroke-width=\"3.75\" fill=\"#009500\"/>\n <path id=\"path751\" fill-rule=\"evenodd\" fill-opacity=\".5\" fill=\"#fff\" d=\"m247.19 38.34c-28.17 52.709-76.34 98.15-95.42 107.24 8.18 14.54 54.52 29.08 73.61 26.35-11.82-30.9-9.09-59.98 21.81-133.59z\"/>\n <path id=\"path752\" fill-rule=\"evenodd\" fill-opacity=\".49804\" fill=\"#fff\" d=\"m179.94 171.93c-11.82 10-54.53 43.62-65.43 50.89-8.18 0.91 42.71 29.08 60.89 29.08-39.99-23.62 41.8-74.52 4.54-79.97z\"/>\n <path id=\"path753\" fill-rule=\"evenodd\" fill-opacity=\".49804\" fill=\"#fff\" d=\"m140.86 250.99c-14.54 9.09-38.17 26.36-62.705 39.08 5.453 19.99 45.435 45.44 54.525 48.17-36.349-45.44 42.72-78.16 8.18-87.25z\"/>\n <path id=\"path755\" fill-rule=\"evenodd\" fill-opacity=\".3\" fill=\"#fff\" d=\"m233.31 366.28c0.81 12.73-1.67 37.21 0.31 47.01 13.64 6.77 22.66 5.26 33.34 4.82-13.63-5.45-24.63-15.72-33.65-51.83z\"/>\n <path id=\"path756\" fill-rule=\"evenodd\" fill-opacity=\".3\" fill=\"#fff\" d=\"m222.46 376.37c-20.66 2.76-67.15 14.81-60.95 39.61 6.19 22.72 51.99 27.2 64.74 30.64-6.2-7.23-54.41-40.63-3.79-70.25z\"/>\n <path id=\"path757\" d=\"m161.16 428.03c2.41 1.03 11.71 13.77 47.52 28.93-15.15-4.14-45.45-16.54-47.52-28.93z\" fill-opacity=\".3\" fill-rule=\"evenodd\" fill=\"#fff\"/>\n <path id=\"path758\" fill-rule=\"evenodd\" fill-opacity=\".25\" fill=\"#001\" d=\"m315.44 454.54c14.12-6.2 31.33-11.02 34.43-22.04 5.17-10.33-1.37 3.79-34.43 22.04z\"/>\n <path id=\"path759\" fill-rule=\"evenodd\" fill-opacity=\".24706\" fill=\"#001\" d=\"m287.89 377.41c38.57 0 96.07 33.74 39.94 60.95 34.79-39.95-39.94-59.92-39.94-60.95z\"/>\n <path id=\"path760\" fill-rule=\"evenodd\" fill-opacity=\".24706\" fill=\"#001\" d=\"m259.65 366.04s20.32-2.75 21.69-0.34c1.38 2.41 0.35 21.35-0.34 26.17-1.03-9.3 1.38-23.07-21.35-25.83z\"/>\n <path id=\"path761\" fill-rule=\"evenodd\" fill-opacity=\".24706\" fill=\"#001\" d=\"m387.93 328.06c13.26-5.21 30.79-26.52 33.63-35.52-3.32-3.79-36-17.06-43.58-23.69 5.69 9.48 31.74 28.9 9.95 59.21z\"/>\n <path id=\"path762\" fill-rule=\"evenodd\" fill-opacity=\".24706\" fill=\"#001\" d=\"m352.4 245.64c18.48-7.1 29.84-16.58 32.21-22.73-9-3.79-29.36-17.05-39.31-22.74 7.58 8.05 23.21 21.32 7.1 45.47z\"/>\n <path id=\"path763\" fill-rule=\"evenodd\" fill-opacity=\".24706\" fill=\"#001\" d=\"m305.04 115.86c7.58 10.9 41.68 31.74 45.47 32.68-4.74 7.58-28.42 19.9-37.42 20.84-4.74-0.47 23.68-16.57-8.05-53.52z\"/>\n <g id=\"g771\" transform=\"translate(-249.19 169.47)\" fill-rule=\"evenodd\">\n  <path id=\"ball_9\" stroke=\"#000\" stroke-width=\"3.75\" fill=\"#f00\" d=\"M424.69,52.534c20.769999999999982,-0.6700000000000017,20.769999999999982,29.473999999999997,1.339999999999975,29.473999999999997c-24.79000000000002,0.6700000000000017,-21.439999999999998,-28.804000000000002,-1.339999999999975,-29.474000000000004Z\"/>\n  <path id=\"path773\" fill-opacity=\".7\" fill=\"#fff\" d=\"m425.36 55.214c-2.01-2.01-23.44 8.708-9.38 20.096 8.71-0.67 11.39-18.087 9.38-20.096z\"/>\n </g>\n <g id=\"g774\" transform=\"translate(-46.89 243.83)\" fill-rule=\"evenodd\">\n  <path id=\"ball_21\" stroke=\"#000\" stroke-width=\"3.75\" fill=\"#f00\" d=\"M424.69,52.534c20.769999999999982,-0.6700000000000017,20.769999999999982,29.473999999999997,1.339999999999975,29.473999999999997c-24.79000000000002,0.6700000000000017,-21.439999999999998,-28.804000000000002,-1.339999999999975,-29.474000000000004Z\"/>\n  <path id=\"path776\" fill-opacity=\".7\" fill=\"#fff\" d=\"m425.36 55.214c-2.01-2.01-23.44 8.708-9.38 20.096 8.71-0.67 11.39-18.087 9.38-20.096z\"/>\n </g>\n <g id=\"g777\" transform=\"translate(-226.41 271.29)\" fill-rule=\"evenodd\">\n  <path id=\"ball_18\" stroke=\"#000\" stroke-width=\"3.75\" fill=\"#f00\" d=\"M424.69,52.534c20.769999999999982,-0.6700000000000017,20.769999999999982,29.473999999999997,1.339999999999975,29.473999999999997c-24.79000000000002,0.6700000000000017,-21.439999999999998,-28.804000000000002,-1.339999999999975,-29.474000000000004Z\"/>\n  <path id=\"path779\" fill-opacity=\".7\" fill=\"#fff\" d=\"m425.36 55.214c-2.01-2.01-23.44 8.708-9.38 20.096 8.71-0.67 11.39-18.087 9.38-20.096z\"/>\n </g>\n <g id=\"g780\" transform=\"translate(-117.9 83.732)\" fill-rule=\"evenodd\">\n  <path id=\"ball_4\" stroke=\"#000\" stroke-width=\"3.75\" fill=\"#f00\" d=\"M424.69,52.534c20.769999999999982,-0.6700000000000017,20.769999999999982,29.473999999999997,1.339999999999975,29.473999999999997c-24.79000000000002,0.6700000000000017,-21.439999999999998,-28.804000000000002,-1.339999999999975,-29.474000000000004Z\"/>\n  <path id=\"path782\" fill-opacity=\".7\" fill=\"#fff\" d=\"M425.36,55.214c-2.009999999999991,-2.009999999999998,-23.439999999999998,8.707999999999998,-9.379999999999995,20.096000000000004c8.70999999999998,-0.6700000000000017,11.389999999999986,-18.087000000000003,9.379999999999995,-20.096000000000004Z\"/>\n </g>\n <g id=\"g791\" transform=\"translate(-236.46 103.16)\" fill-rule=\"evenodd\">\n  <path id=\"ball_5\" stroke=\"#000\" stroke-width=\"3.75\" fill=\"#f0f\" d=\"M424.69,52.534c20.769999999999982,-0.6700000000000017,20.769999999999982,29.473999999999997,1.339999999999975,29.473999999999997c-24.79000000000002,0.6700000000000017,-21.439999999999998,-28.804000000000002,-1.339999999999975,-29.474000000000004Z\"/>\n  <path id=\"path793\" stroke-width=\"1pt\" fill-opacity=\".7\" fill=\"#fff\" d=\"m425.36 55.214c-2.01-2.01-23.44 8.708-9.38 20.096 8.71-0.67 11.39-18.087 9.38-20.096z\"/>\n </g>\n <g id=\"g794\" transform=\"translate(-85.742 124.59)\" fill-rule=\"evenodd\">\n  <path id=\"ball_7\" stroke=\"#000\" stroke-width=\"3.75\" fill=\"#f0f\" d=\"M424.69,52.534c20.769999999999982,-0.6700000000000017,20.769999999999982,29.473999999999997,1.339999999999975,29.473999999999997c-24.79000000000002,0.6700000000000017,-21.439999999999998,-28.804000000000002,-1.339999999999975,-29.474000000000004Z\"/>\n  <path id=\"path796\" stroke-width=\"1pt\" fill-opacity=\".7\" fill=\"#fff\" d=\"m425.36 55.214c-2.01-2.01-23.44 8.708-9.38 20.096 8.71-0.67 11.39-18.087 9.38-20.096z\"/>\n </g>\n <g id=\"g797\" transform=\"translate(-144.02 236.46)\" fill-rule=\"evenodd\">\n  <path id=\"ball_15\" stroke=\"#000\" stroke-width=\"3.75\" fill=\"#f0f\" d=\"M424.69,52.534c20.769999999999982,-0.6700000000000017,20.769999999999982,29.473999999999997,1.339999999999975,29.473999999999997c-24.79000000000002,0.6700000000000017,-21.439999999999998,-28.804000000000002,-1.339999999999975,-29.474000000000004Z\"/>\n  <path id=\"path799\" stroke-width=\"1pt\" fill-opacity=\".7\" fill=\"#fff\" d=\"m425.36 55.214c-2.01-2.01-23.44 8.708-9.38 20.096 8.71-0.67 11.39-18.087 9.38-20.096z\"/>\n </g>\n <g id=\"g808\" transform=\"translate(-158.76 60.287)\" fill-rule=\"evenodd\">\n  <path id=\"ball_3\" stroke=\"#000\" stroke-width=\"3.75\" fill=\"#00f\" d=\"M424.69,52.534c20.769999999999982,-0.6700000000000017,20.769999999999982,29.473999999999997,1.339999999999975,29.473999999999997c-24.79000000000002,0.6700000000000017,-21.439999999999998,-28.804000000000002,-1.339999999999975,-29.474000000000004Z\"/>\n  <path id=\"path810\" stroke-width=\"1pt\" fill-opacity=\".7\" fill=\"#fff\" d=\"M425.36,55.214c-2.009999999999991,-2.009999999999998,-23.439999999999998,8.707999999999998,-9.379999999999995,20.096000000000004c8.70999999999998,-0.6700000000000017,11.389999999999986,-18.087000000000003,9.379999999999995,-20.096000000000004Z\"/>\n </g>\n <g id=\"g811\" transform=\"translate(-300.77 212.35)\" fill-rule=\"evenodd\">\n  <path id=\"ball_13\" stroke=\"#000\" stroke-width=\"3.75\" fill=\"#00f\" d=\"M424.69,52.534c20.769999999999982,-0.6700000000000017,20.769999999999982,29.473999999999997,1.339999999999975,29.473999999999997c-24.79000000000002,0.6700000000000017,-21.439999999999998,-28.804000000000002,-1.339999999999975,-29.474000000000004Z\"/>\n  <path id=\"path813\" stroke-width=\"1pt\" fill-opacity=\".7\" fill=\"#fff\" d=\"m425.36 55.214c-2.01-2.01-23.44 8.708-9.38 20.096 8.71-0.67 11.39-18.087 9.38-20.096z\"/>\n </g>\n <g id=\"g814\" transform=\"translate(-109.19 185.55)\" fill-rule=\"evenodd\">\n  <path id=\"ball_12\" stroke=\"#000\" stroke-width=\"3.75\" fill=\"#00f\" d=\"M424.69,52.534c20.769999999999982,-0.6700000000000017,20.769999999999982,29.473999999999997,1.339999999999975,29.473999999999997c-24.79000000000002,0.6700000000000017,-21.439999999999998,-28.804000000000002,-1.339999999999975,-29.474000000000004Z\"/>\n  <path id=\"path816\" stroke-width=\"1pt\" fill-opacity=\".7\" fill=\"#fff\" d=\"M425.36,55.214c-2.009999999999991,-2.009999999999998,-23.439999999999998,8.707999999999998,-9.379999999999995,20.096000000000004c8.70999999999998,-0.6700000000000017,11.389999999999986,-18.087000000000003,9.379999999999995,-20.096000000000004Z\"/>\n </g>\n <g id=\"g822\" transform=\"translate(-192.92 111.87)\" fill-rule=\"evenodd\">\n  <path id=\"ball_6\" stroke=\"#000\" stroke-width=\"3.75\" fill=\"#0ff\" d=\"M424.69,52.534c20.769999999999982,-0.6700000000000017,20.769999999999982,29.473999999999997,1.339999999999975,29.473999999999997c-24.79000000000002,0.6700000000000017,-21.439999999999998,-28.804000000000002,-1.339999999999975,-29.474000000000004Z\"/>\n  <path id=\"path824\" stroke-width=\"1pt\" fill-opacity=\".7\" fill=\"#fff\" d=\"m425.36 55.214c-2.01-2.01-23.44 8.708-9.38 20.096 8.71-0.67 11.39-18.087 9.38-20.096z\"/>\n </g>\n <g id=\"g825\" transform=\"translate(-101.15 279.33)\" fill-rule=\"evenodd\">\n  <path id=\"ball_20\" stroke=\"#000\" stroke-width=\"3.75\" fill=\"#0ff\" d=\"M424.69,52.534c20.769999999999982,-0.6700000000000017,20.769999999999982,29.473999999999997,1.339999999999975,29.473999999999997c-24.79000000000002,0.6700000000000017,-21.439999999999998,-28.804000000000002,-1.339999999999975,-29.474000000000004Z\"/>\n  <path id=\"path827\" stroke-width=\"1pt\" fill-opacity=\".7\" fill=\"#fff\" d=\"m425.36 55.214c-2.01-2.01-23.44 8.708-9.38 20.096 8.71-0.67 11.39-18.087 9.38-20.096z\"/>\n </g>\n <g id=\"g836\" transform=\"translate(-293.4 267.94)\" fill-rule=\"evenodd\">\n  <path id=\"path837\" stroke=\"#000\" stroke-width=\"3.75\" fill=\"#0f0\" d=\"m424.69 52.534c20.77-0.67 20.77 29.474 1.34 29.474-24.79 0.67-21.44-28.804-1.34-29.474z\"/>\n  <path id=\"ball_17\" stroke-width=\"1pt\" fill-opacity=\".7\" fill=\"#fff\" d=\"M425.36,55.214c-2.009999999999991,-2.009999999999998,-23.439999999999998,8.707999999999998,-9.379999999999995,20.096000000000004c8.70999999999998,-0.6700000000000017,11.389999999999986,-18.087000000000003,9.379999999999995,-20.096000000000004Z\"/>\n </g>\n <g id=\"g839\" transform=\"translate(-203.64 194.93)\" fill-rule=\"evenodd\">\n  <path id=\"ball_10\" stroke=\"#000\" stroke-width=\"3.75\" fill=\"#0f0\" d=\"M424.69,52.534c20.769999999999982,-0.6700000000000017,20.769999999999982,29.473999999999997,1.339999999999975,29.473999999999997c-24.79000000000002,0.6700000000000017,-21.439999999999998,-28.804000000000002,-1.339999999999975,-29.474000000000004Z\"/>\n  <path id=\"path841\" stroke-width=\"1pt\" fill-opacity=\".7\" fill=\"#fff\" d=\"m425.36 55.214c-2.01-2.01-23.44 8.708-9.38 20.096 8.71-0.67 11.39-18.087 9.38-20.096z\"/>\n </g>\n <g id=\"g851\" transform=\"translate(-81.053 214.35)\" fill-rule=\"evenodd\">\n  <path id=\"ball_16\" stroke=\"#000\" stroke-width=\"3.75\" fill=\"#ff0\" d=\"M424.69,52.534c20.769999999999982,-0.6700000000000017,20.769999999999982,29.473999999999997,1.339999999999975,29.473999999999997c-24.79000000000002,0.6700000000000017,-21.439999999999998,-28.804000000000002,-1.339999999999975,-29.474000000000004Z\"/>\n  <path id=\"path853\" stroke-width=\"1pt\" fill-opacity=\".7\" fill=\"#fff\" d=\"m425.36 55.214c-2.01-2.01-23.44 8.708-9.38 20.096 8.71-0.67 11.39-18.087 9.38-20.096z\"/>\n </g>\n <g id=\"g854\" transform=\"translate(-146.03 146.03)\" fill-rule=\"evenodd\">\n  <path id=\"ball_8\" stroke=\"#000\" stroke-width=\"3.75\" fill=\"#ff0\" d=\"M424.69,52.534c20.769999999999982,-0.6700000000000017,20.769999999999982,29.473999999999997,1.339999999999975,29.473999999999997c-24.79000000000002,0.6700000000000017,-21.439999999999998,-28.804000000000002,-1.339999999999975,-29.474000000000004Z\"/>\n  <path id=\"path856\" stroke-width=\"1pt\" fill-opacity=\".7\" fill=\"#fff\" d=\"m425.36 55.214c-2.01-2.01-23.44 8.708-9.38 20.096 8.71-0.67 11.39-18.087 9.38-20.096z\"/>\n </g>\n <g id=\"g857\" transform=\"translate(-231.77 227.75)\" fill-rule=\"evenodd\">\n  <path id=\"ball_14\" stroke=\"#000\" stroke-width=\"3.75\" fill=\"#ff0\" d=\"M424.69,52.534c20.769999999999982,-0.6700000000000017,20.769999999999982,29.473999999999997,1.339999999999975,29.473999999999997c-24.79000000000002,0.6700000000000017,-21.439999999999998,-28.804000000000002,-1.339999999999975,-29.474000000000004Z\"/>\n  <path id=\"path859\" stroke-width=\"1pt\" fill-opacity=\".7\" fill=\"#fff\" d=\"m425.36 55.214c-2.01-2.01-23.44 8.708-9.38 20.096 8.71-0.67 11.39-18.087 9.38-20.096z\"/>\n </g>\n <g id=\"g865\" transform=\"translate(-202.97 64.976)\" fill-rule=\"evenodd\">\n  <path id=\"ball_2\" stroke=\"#000\" stroke-width=\"3.75\" fill=\"#ff9300\" d=\"M424.69,52.534c20.769999999999982,-0.6700000000000017,20.769999999999982,29.473999999999997,1.339999999999975,29.473999999999997c-24.79000000000002,0.6700000000000017,-21.439999999999998,-28.804000000000002,-1.339999999999975,-29.474000000000004Z\"/>\n  <path id=\"path867\" stroke-width=\"1pt\" fill-opacity=\".7\" fill=\"#fff\" d=\"m425.36 55.214c-2.01-2.01-23.44 8.708-9.38 20.096 8.71-0.67 11.39-18.087 9.38-20.096z\"/>\n </g>\n <g id=\"g868\" transform=\"translate(-158.09 287.37)\" fill-rule=\"evenodd\">\n  <path id=\"ball_19\" stroke=\"#000\" stroke-width=\"3.75\" fill=\"#ff9300\" d=\"M424.69,52.534c20.769999999999982,-0.6700000000000017,20.769999999999982,29.473999999999997,1.339999999999975,29.473999999999997c-24.79000000000002,0.6700000000000017,-21.439999999999998,-28.804000000000002,-1.339999999999975,-29.474000000000004Z\"/>\n  <path id=\"path870\" stroke-width=\"1pt\" fill-opacity=\".7\" fill=\"#fff\" d=\"m425.36 55.214c-2.01-2.01-23.44 8.708-9.38 20.096 8.71-0.67 11.39-18.087 9.38-20.096z\"/>\n </g>\n <g id=\"g871\" transform=\"translate(-152.73 188.23)\" fill-rule=\"evenodd\">\n  <path id=\"ball_11\" stroke=\"#000\" stroke-width=\"3.75\" fill=\"#ff9300\" d=\"M424.69,52.534c20.769999999999982,-0.6700000000000017,20.769999999999982,29.473999999999997,1.339999999999975,29.473999999999997c-24.79000000000002,0.6700000000000017,-21.439999999999998,-28.804000000000002,-1.339999999999975,-29.474000000000004Z\"/>\n  <path id=\"path873\" stroke-width=\"1pt\" fill-opacity=\".7\" fill=\"#fff\" d=\"m425.36 55.214c-2.01-2.01-23.44 8.708-9.38 20.096 8.71-0.67 11.39-18.087 9.38-20.096z\"/>\n </g>\n <g id=\"g880\" transform=\"translate(-140 25)\" fill-rule=\"evenodd\">\n  <polygon id=\"polygon878\" transform=\"matrix(.99434 -.10623 .10623 .99434 -2.3444 42.913)\" stroke=\"#000\" points=\"418.66 76.649 399.53 56.504 376.86 72.559 390.11 48.14 367.83 31.538 395.15 36.592 404.06 10.276 407.69 37.819 435.47 38.157 410.4 50.125\" stroke-width=\"3.75\" fill=\"#f00\"/>\n  <path id=\"path879\" fill-opacity=\".5\" fill=\"#fff\" d=\"m388.53 62.81c13.26-22.097-7.73-21.035-6.74-23.459 17.35 5.089 17.23-3.805 19-15.337 2.65 16.31 5.92 19.751-12.26 38.796z\"/>\n </g>\n <g id=\"g883\" transform=\"translate(-216.14 24.929)\" fill-rule=\"evenodd\">\n  <path id=\"ball_1\" stroke=\"#000\" stroke-width=\"3.75\" fill=\"#0f0\" d=\"M424.69,52.534c20.769999999999982,-0.6700000000000017,20.769999999999982,29.473999999999997,1.339999999999975,29.473999999999997c-24.79000000000002,0.6700000000000017,-21.439999999999998,-28.804000000000002,-1.339999999999975,-29.474000000000004Z\"/>\n  <path id=\"path885\" stroke-width=\"1pt\" fill-opacity=\".7\" fill=\"#fff\" d=\"m425.36 55.214c-2.01-2.01-23.44 8.708-9.38 20.096 8.71-0.67 11.39-18.087 9.38-20.096z\"/>\n </g>\n <rdf:RDF xmlns=\"http://web.resource.org/cc/\">\n  <Work rdf:about=\"\">\n   <dc:title>Clipart by Nicu Buculei - baloon1_04</dc:title>\n   <dc:rights>\n    <Agent>\n     <dc:title>Nicu Buculei</dc:title>\n    </Agent>\n   </dc:rights>\n   <dc:type rdf:resource=\"http://purl.org/dc/dcmitype/StillImage\"/>\n   <license rdf:resource=\"http://web.resource.org/cc/PublicDomain\"/>\n  </Work>\n  <License rdf:about=\"http://web.resource.org/cc/PublicDomain\">\n   <permits rdf:resource=\"http://web.resource.org/cc/Reproduction\"/>\n   <permits rdf:resource=\"http://web.resource.org/cc/Distribution\"/>\n   <permits rdf:resource=\"http://web.resource.org/cc/DerivativeWorks\"/>\n  </License>\n </rdf:RDF>\n <metadata>\n  <rdf:RDF>\n   <cc:Work>\n    <dc:format>image/svg+xml</dc:format>\n    <dc:type rdf:resource=\"http://purl.org/dc/dcmitype/StillImage\"/>\n    <cc:license rdf:resource=\"http://creativecommons.org/licenses/publicdomain/\"/>\n    <dc:publisher>\n     <cc:Agent rdf:about=\"http://openclipart.org/\">\n      <dc:title>Openclipart</dc:title>\n     </cc:Agent>\n    </dc:publisher>\n   </cc:Work>\n   <cc:License rdf:about=\"http://creativecommons.org/licenses/publicdomain/\">\n    <cc:permits rdf:resource=\"http://creativecommons.org/ns#Reproduction\"/>\n    <cc:permits rdf:resource=\"http://creativecommons.org/ns#Distribution\"/>\n    <cc:permits rdf:resource=\"http://creativecommons.org/ns#DerivativeWorks\"/>\n   </cc:License>\n  </rdf:RDF>\n </metadata>\n</svg>","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 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

[edje11]

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

[BartButenaers]

@edje11

Tested the pan and zoom

Hi Evert,
Very kind of you to test this new feature. Thanks a lot!!!!
Bart

[BartButenaers]

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.

[seth350]

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

[BartButenaers]

Hey Seth,
Long time ago...
I have no pc at the moment, but here 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...

[BartButenaers]

Seth,
I have tested it and added a new section to my readme page:

My christmas holidays are over now, so my Node-RED developments will slow down again ...

[afelix]

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.

[BartButenaers]

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):

Which allows us to setup custom dashboard layouts like this:

.

I think this is very useful e.g. for large floor plans.
P.S. this example flow is available on the readme page.

Have fun with it!
Bart

[BartButenaers]

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 is not well maintained. The last last commit is from october 2019, as you can see from the commit history:

So I was considering to use the one from anvaka (as explained above), because that has more recent developments (last commits 10 days ago):

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. That project seems to be maintained 'again' after a long dead period:

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!

[BartButenaers]

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:

The pan/zoom feature has been explained in this section on the readme page.
And here is a short demo with the SVG-based Node-RED logo:

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!!