tkirchm commented 4 years ago

Would it be possible to activate pan and zoom?

Like https://github.com/ariutta/svg-pan-zoom

bartbutenaers commented 4 years ago

Hi @tkirchm,

Well pan and zoom is something that we surely should add in the near future. And that library might indeed be a very good one to use.

It looks like they offer quite a lot of settings. So I assume we should add an extra tabsheet "Pan/Zoom" to support this.
And they have an API to programmatically specify some settings. Which we could use to control the pan/zoom via input messages.

But the problem is (spare) time. My partner in crime (@Steve-Mcl) is currently not available - for a rather long time - to develop, and I'm also busy with lots of new Node-RED nodes ...

But it is for sure a good proposal ! Bart

tkirchm commented 4 years ago

Hi @bartbutenaers,

for a start a tickbox to just enable pan and zoom with standard settings would be great.

tk

bartbutenaers commented 4 years ago

Short term solution

Suppose I create a new tabsheet, and add some checkboxes:

"Enable panning": which can be used to fill panEnabled: true
"Enable zooming": which can be used to fill zoomEnabled: true
"Enable control icons": which can be used to fill controlIconsEnabled: true
"Enable double click zoom": which can be used to fill dblClickZoomEnabled: true
"Enable mouse wheel zoom": which can be used to fill mouseWheelZoomEnabled: true

When at least one of those checkboxes is activated, I activate that library. Something like this:

var panZoomTiger = svgPanZoom($scope.svg)

Then it "should" start with the default settings.

Does this makes sense to you? P.S. There is no definition of short term! Have lots of other things to do. If you have any programming skills, you are always welcome to do a pull request. That way you are sure that you will get it in short term...

Long term solution

Later on (when I have more time) I add extra options to that tabsheet, to override the defaults:

zoomScaleSensitivity: 0.2
minZoom: 0.5
maxZoom: 10
fit: true
contain: false
center: true
refreshRate: 'auto'

Later on we also should handle the event handlers, or at least some of them. There should be checkboxes to enable sending output messages for a number of events:

beforeZoom
onZoom
beforePan
onPan
onUpdatedCTM

And we could in the future allow input messages to control the panning/zooming by calling the API functions.

tkirchm commented 4 years ago

Sounds great.

Unfortunately I'm not a JavaScript programmer.

bartbutenaers commented 4 years ago

@tkirchm,

I have created a new branch "panzoom" in this repository, to test quickly if it works...

But I have no time to test it thoroughly! So would be nice if you could test it and give me feedback! For example I'm not sure what happens if you define a shape as 'clickable'. Does the panzoom library swallow the click events, or isn't it clickable anymore (because the library uses the click event to start panning), or ...

You can install the branch directly from Github (version 1.3.0), using this command in your Node-RED directory:

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

You can find the 'basic' settings here:

For example following test flow:

[{"id":"6fcfad46.0ee784","type":"ui_svg_graphics","z":"e2675d9d.6854e","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/\" id=\"svg548\" height=\"400pt\" width=\"400pt\">\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.64 10.905-79.98 87.242-142.68 125.41 39.08 56.34 250.82 62.71 285.36-1.82-53.62-15.45-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.64 10.905-40.9 82.702-103.6 120.87 37.26 44.53 178.12 48.16 212.65 0.9-53.62-15.44-106.33-111.78-109.05-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\" transform=\"\" 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=\"path772\" stroke=\"#000\" stroke-width=\"3.75\" fill=\"#f00\" 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=\"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=\"path775\" stroke=\"#000\" stroke-width=\"3.75\" fill=\"#f00\" 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=\"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=\"path778\" stroke=\"#000\" stroke-width=\"3.75\" fill=\"#f00\" 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=\"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=\"path781\" stroke=\"#000\" stroke-width=\"3.75\" fill=\"#f00\" 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=\"path782\" 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=\"g791\" transform=\"translate(-236.46 103.16)\" fill-rule=\"evenodd\">\n  <path id=\"path792\" stroke=\"#000\" stroke-width=\"3.75\" fill=\"#f0f\" 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=\"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=\"path795\" stroke=\"#000\" stroke-width=\"3.75\" fill=\"#f0f\" 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=\"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=\"path798\" stroke=\"#000\" stroke-width=\"3.75\" fill=\"#f0f\" 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=\"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=\"path809\" stroke=\"#000\" stroke-width=\"3.75\" fill=\"#00f\" 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=\"path810\" 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=\"g811\" transform=\"translate(-300.77 212.35)\" fill-rule=\"evenodd\">\n  <path id=\"path812\" stroke=\"#000\" stroke-width=\"3.75\" fill=\"#00f\" 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=\"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=\"path815\" stroke=\"#000\" stroke-width=\"3.75\" fill=\"#00f\" 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=\"path816\" 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=\"g822\" transform=\"translate(-192.92 111.87)\" fill-rule=\"evenodd\">\n  <path id=\"path823\" stroke=\"#000\" stroke-width=\"3.75\" fill=\"#0ff\" 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=\"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=\"path826\" stroke=\"#000\" stroke-width=\"3.75\" fill=\"#0ff\" 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=\"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=\"path838\" 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=\"g839\" transform=\"translate(-203.64 194.93)\" fill-rule=\"evenodd\">\n  <path id=\"path840\" 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=\"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=\"path852\" stroke=\"#000\" stroke-width=\"3.75\" fill=\"#ff0\" 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=\"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=\"path855\" stroke=\"#000\" stroke-width=\"3.75\" fill=\"#ff0\" 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=\"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=\"path858\" stroke=\"#000\" stroke-width=\"3.75\" fill=\"#ff0\" 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=\"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=\"path866\" stroke=\"#000\" stroke-width=\"3.75\" fill=\"#ff9300\" 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=\"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=\"path869\" stroke=\"#000\" stroke-width=\"3.75\" fill=\"#ff9300\" 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=\"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=\"path872\" stroke=\"#000\" stroke-width=\"3.75\" fill=\"#ff9300\" 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=\"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=\"path884\" 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=\"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":"#mijn_icoon","action":"click","payload":"my payload","payloadType":"str","topic":"my topic"},{"targetId":"#micro_bertje","action":"click","payload":"mijne payload","payloadType":"str","topic":"microoke"}],"smilAnimations":[],"bindings":[],"showCoordinates":false,"autoFormatAfterEdit":false,"outputField":"anderveld","editorUrl":"http://drawsvg.org/drawsvg.html","directory":"","panEnabled":true,"zoomEnabled":true,"controlIconsEnabled":true,"dblClickZoomEnabled":true,"mouseWheelZoomEnabled":true,"name":"","x":480,"y":120,"wires":[["4b2ca1c4.02d27"]]},{"id":"4b2ca1c4.02d27","type":"debug","z":"e2675d9d.6854e","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":650,"y":120,"wires":[]},{"id":"ef3bd797.c25708","type":"inject","z":"e2675d9d.6854e","name":"","topic":"","payload":"[{\"command\":\"update_attribute\",\"selector\":\"#micro_bertje\",\"attributeName\":\"x\",\"attributeValue\":\"50\"}]","payloadType":"json","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":290,"y":120,"wires":[["6fcfad46.0ee784"]]},{"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}]

Will look like this in the dashboard:

svg_panzoom

Hope to hear from you soon! Bart

tkirchm commented 4 years ago

Hi,

your example looks great. But unfortunatly at my end I can't enable pan&zoom. Just the christmas tree apears. I can see the extended settings and played around a little bit but nothing changed.

tk

bartbutenaers commented 4 years ago

Perhaps it cannot load the svg-pan-zoom.min.js file for some reason. Are there any errors in the browser console log (for the dashboard session)?

tkirchm commented 4 years ago

Yes. Thats the problem.

app.min.js:20 GET http://____:1880/ui/ui_svg_graphics/library/svg-pan-zoom.min.js 400 (Bad Request)

bartbutenaers commented 4 years ago

Not sure what this is causing, because I use the related code snippet for lots of my nodes...

I have added some extra logging, so if you could install that branch again from Github... And then please have a look at the Node-RED log and share it here:

And further on:
When you enter the http://____:1880/ui/ui_svg_graphics/library/svg-pan-zoom.min.js manually in your browser address bar, does that work? You should see the js file:
Most of the time this kind of problems occur when the user has added a custom UI path in the settings.js file (something like ui: { path: "ui" },). Is that here the case, and if so what is its value?

tkirchm commented 4 years ago

node-red-log shows no ui_svg_graphics entry
svg-pan-zoom-min.js is located in /home/pi/.node-red/node_modules/node-red-contrib-ui-svg/lib/svg-pan-zoom.min.js
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'"}
ui: is still commented out:
// If you installed the optional node-red-dashboard you can set it's path // relative to httpRoot //ui: { path: "ui" },
I could get it to work by setting src to "http://ariutta.github.io/svg-pan-zoom/dist/svg-pan-zoom.js". Still it would not work on my phone. Just in the browser on my laptop.

bartbutenaers commented 4 years ago

node-red-log shows no ui_svg_graphics entry

When you have reinstalled my panzoom-branch (via the above command), it will always log those extra lines as you can see in my code:

    var uiPath = ((RED.settings.ui || {}).path) || 'ui';
console.log("===> uiPath (1) = " + uiPath);
    // Create the complete server-side path
    uiPath = '/' + uiPath + '/ui_svg_graphics';
console.log("===> uiPath (2) = " + uiPath);
    // Replace a sequence of multiple slashes (e.g. // or ///) by a single one
    uiPath = uiPath.replace(/\/+/g, '/');
console.log("===> uiPath (3) = " + uiPath);

It should always pass through this code, so it should always log those lines. But if you never arrive here, then it is rather normal that it cannot load the js library ...

Don't get it anymore, unless the installation has failed somehow...

Can you try to find the svg_graphics.js file on your system and check whether those extra log lines are available in the file. On my Raspberry the file is located here:
And beside that, please check whether the js file is available in the 'lib' subfolder. On my Raspberry the file is located here:

tkirchm commented 4 years ago

Sorry. Christmas was very busy.

I cleared my node-red setup and started from the beginning:

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

Importing your test flow gives me:

In svg_graphics.js I can find the log lines:

`node-red-log

30 Dec 22:53:18 - [info] Warten auf fehlende Typen, die registriert werden sollen: 30 Dec 22:53:18 - [info] - modbus-client 30 Dec 23:02:33 - [info] Flows stoppen 30 Dec 23:02:33 - [info] Flows gestoppt 30 Dec 23:02:33 - [info] Flows starten 2019-12-30 22:02:33: Connecting to modbustcp slave at 192.168.0.11:502 unit_id: 255 2019-12-30 22:02:34: Connecting to modbustcp slave at 192.168.0.4:502 unit_id: 255 30 Dec 23:02:34 - [error] [modbustcp-write:9e43da23.910be8] TypeError: Cannot read property 'initializeModbusTCPConnection' of null 30 Dec 23:02:34 - [error] [modbustcp-write:6393a7f9.ebca68] TypeError: Cannot read property 'initializeModbusTCPConnection' of null 30 Dec 23:02:34 - [error] [modbustcp-read:3b8ac79d.216db8] TypeError: Cannot read property 'initializeModbusTCPConnection' of null 30 Dec 23:02:36 - [info] Flows gestartet 30 Dec 23:06:23 - [info] Flows stoppen 2019-12-30 22:06:23: Disconnecting from modbustcp slave at 192.168.0.4:502 2019-12-30 22:06:23: Disconnecting from modbustcp slave at 192.168.0.11:502 2019-12-30 22:06:23: EG 1:Closing 2019-12-30 22:06:23: EG 2:Closing 30 Dec 23:06:23 - [info] Flows gestoppt 30 Dec 23:06:23 - [info] Flows starten 2019-12-30 22:06:23: Connecting to modbustcp slave at 192.168.0.11:502 unit_id: 255 2019-12-30 22:06:24: Connecting to modbustcp slave at 192.168.0.4:502 unit_id: 255 30 Dec 23:06:24 - [error] [modbustcp-write:9e43da23.910be8] TypeError: Cannot read property 'initializeModbusTCPConnection' of null 30 Dec 23:06:24 - [error] [modbustcp-write:6393a7f9.ebca68] TypeError: Cannot read property 'initializeModbusTCPConnection' of null 30 Dec 23:06:25 - [error] [modbustcp-read:3b8ac79d.216db8] TypeError: Cannot read property 'initializeModbusTCPConnection' of null 30 Dec 23:06:27 - [info] Flows gestartet`

Log just shows problems with my modbus connection.

*/ With the external library the click event works correctly. So I assume you have not added options.preventMouseEventsDefault = false?

No

Best wishes for 2020

bartbutenaers commented 4 years ago

Hey no problem. Meanwhile I have also announced this feature on the forum, to get some feedback from others.

I'm running out of creativity. Will explain your issue on the forum tomorrow, and hopefully anybody else has a clue why it doesn't work in your case. Don't understand why my log lines don't appear in your console. Looks like that code is never executed? Grrrrr...

Will get back to you, as soon as I have an illumination... And for you also my best wishes for 2020!

boisei0 commented 4 years ago

Bart, popping in real quick. The error shown on the console is a 400 bad request error. Something is definitely going iffy there. The line before that I see a synchronous xhr request failing, potentially to the same file.

@tkirchm can you confirm which browser you use (it looks like chrome, but is it, and which version). In the meantime I’ll check the code to see if synchronous xhr might cause this failure, I’ve dealt with that on other JavaScript projects in the past.

tkirchm commented 4 years ago

@boisei0 it is chrome Version 79.0.3945.88 (Offizieller Build) (64-Bit). Microsoft Edge shows the same result without any pan&zoom actions.

@bartbutenaers as mentioned before mobile device was not supported when I loaded it externally. I found that it has to be enabled like in this mobile example.

bartbutenaers commented 4 years ago

That mobile example is VERY interesting. I really appreciate the effort you put into this!!!! This makes it even worse that I haven't found a solution for your issue yet... Until now nobody else had the same problem as you.

It is a pitty that I cannot debug your NodeJs server side of my node. Now I'm kind of blind... I will add some more log lines to the code. Still don't get it why I don't understand why my console.log lines work. That part of the code is being executed by Node-RED when the node is deployed. So I assume we never arrive there, so no htpp endpoint is registrated...

bartbutenaers commented 4 years ago

Hi @tkirchm, I have updated the panzoom branch. When I detect a device with touch capabilities, the custom event handlers are now applied. Works like a charm on my Samsung smartphone!!!

You earned your name on our readme page!!!!

But I assume you won't be able to download the hammer.js file... Will get back to troubleshoot your issue as soon as possible, but my christmas holidays are over (so less free time) ...

Thanks a lot for your pointers!! Bart

tkirchm commented 4 years ago

Thanks for mentioning.

I tested it on another raspi with the same result. The only thing I can think of is that there was the main branch already installed and I deinstalled it and then did the new installation.

tkirchm commented 4 years ago

How can I debug Node.js on my raspberry pi?

Do you have any useful instructions?

bartbutenaers commented 4 years ago

I'm also running on Raspberry, and I'm doing updates all the time ...

Can you please install the panzoom branch again:

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

I have added a lot of console.log lines to the svg_graphics.js file:

Hopefully we can learn something from this.

PS. I have explained in the past how I use the Chrome debugger to debug my server side NodeJs code. You only need to follow the steps in the section "Starting from NodeJs version 8.?"
P.S. I start my Node-RED in debug mode like this: node --inspect=0.0.0.0:5858 /usr/local/lib/node_modules/node-red/red.js

bartbutenaers commented 4 years ago

BTW sorry if you have already asked this before, but I hope you are on a recent (preferred 10.x) NodeJs version?

tkirchm commented 4 years ago

I updated the branch. Output:

`Willkommen bei Node-RED!

1 Jan 23:37:30 - [info] Node-RED Version: v0.20.7 1 Jan 23:37:30 - [info] Node.js Version: v13.5.0 1 Jan 23:37:30 - [info] Linux 4.19.66-v7+ arm LE 1 Jan 23:37:31 - [info] Paletten-Nodes werden geladen ===> Line 144 reached ===> Line 762 reached ===> Line 766 reached ===> Line 836 reached ===> uiPath (1) = ui ===> uiPath (2) = /ui/ui_svg_graphics ===> uiPath (3) = /ui/ui_svg_graphics 1 Jan 23:37:37 - [info] Dashboard version 2.19.2 started at /ui 1 Jan 23:37:38 - [warn] ------------------------------------------------------ 1 Jan 23:37:38 - [warn] [node-red-node-serialport/serialport] Error: The module '/usr/lib/node_modules/node-red-node-serialport/node_modules/@serialport/bindings/build/Release/bindings.node' was compiled against a different Node.js version using NODE_MODULE_VERSION 57. This version of Node.js requires NODE_MODULE_VERSION 79. Please try re-compiling or re-installing the module (for instance, using `npm rebuild` or `npm install`). 1 Jan 23:37:38 - [warn] [node-red-contrib-dht-sensor/rpi-dht22] Error: The module '/home/pi/.node-red/node_modules/node-red-contrib-dht-sensor/node_modules/node-dht-sensor/build/Release/node_dht_sensor.node' was compiled against a different Node.js version using NODE_MODULE_VERSION 57. This version of Node.js requires NODE_MODULE_VERSION 79. Please try re-compiling or re-installing the module (for instance, using `npm rebuild` or `npm install`). (line:18) 1 Jan 23:37:38 - [warn] ------------------------------------------------------ 1 Jan 23:37:38 - [info] Einstellungsdatei: /home/pi/.node-red/settings.js 1 Jan 23:37:38 - [info] Kontextspeicher: 'default' [ module=memory] 1 Jan 23:37:38 - [info] Benutzerverzeichnis: /home/pi/.node-red 1 Jan 23:37:38 - [warn] Projekte inaktiviert: editorTheme.projects.enabled=false 1 Jan 23:37:38 - [info] Flow-Datei: /home/pi/.node-red/flows_raspberrypi.json 1 Jan 23:37:39 - [info] Server wird jetzt auf http://127.0.0.1:1880/ ausgeführt. 1 Jan 23:37:39 - [warn]

Die Datei mit den Datenflowberechtigungsnachweisen wird mit einem vom System generierten Schlüssel verschlüsselt. Wenn der vom System generierte Schlüssel aus irgendeinem Grund verloren geht, werden Ihre Berechtigungsnachweise Die Datei kann nicht wiederhergestellt werden. Sie müssen sie löschen und erneut eingeben. Ihre Berechtigungsnachweise. Sie sollten Ihren eigenen Schlüssel mit Hilfe der Option 'credentialSecret' in Ihre Einstellungsdatei. Node-RED wird dann Ihre Berechtigungsnachweise erneut verschlüsseln. Datei mit dem ausgewählten Schlüssel beim nächsten Deployen einer Änderung verwenden.

1 Jan 23:37:39 - [info] Flows starten 2020-01-01 22:37:39: Connecting to modbustcp slave at 192.168.0.11:502 unit_id: 255 2020-01-01 22:37:39: Connecting to modbustcp slave at 192.168.0.4:502 unit_id: 255 1 Jan 23:37:39 - [error] [modbustcp-write:9e43da23.910be8] TypeError: Cannot read property 'initializeModbusTCPConnection' of null 1 Jan 23:37:39 - [error] [modbustcp-write:6393a7f9.ebca68] TypeError: Cannot read property 'initializeModbusTCPConnection' of null 1 Jan 23:37:39 - [error] [modbustcp-read:3b8ac79d.216db8] TypeError: Cannot read property 'initializeModbusTCPConnection' of null ===> Line 753 reached 1 Jan 23:37:39 - [info] Flows gestartet`

tkirchm commented 4 years ago

Would it be possible to combine mouse down and touch start so that I don't have to write two lines? On click it creates a message on mouse click and on touch events but mouse down and touch start are two different events which I have to define.

bartbutenaers commented 4 years ago

Ah ok, now suddenly the (previous) console log lines are appearing. Must have gone something wrong in your previous installation I assume;

So your endpoint is at least started with the same path as on my Raspberry: ===> uiPath (1) = ui ===> uiPath (2) = /ui/ui_svg_graphics ===> uiPath (3) = /ui/ui_svg_graphics

We are getting closer ... So now I should expect your endpoint is called. Could you please test this:

start node-red
navigate to https://_____:1880/ui/ui_svg_graphics/library/svg-pan-zoom.min.js
You should see this in your server log: ===> directory = /home/pi/.node-red/node_modules/node-red-contrib-ui-svg/lib/ ===> filename = svg-pan-zoom.min.js

"but mouse down and touch start are two different events which I have to define" Could you please explain a bit more in detail what you mean.

tkirchm commented 4 years ago

No. Last post was from console after node-red-start. I have to change logging settings.

Cant start debugging: In /usr/local/lib/node_modules/ is no folder node-red and can't find red.js.

http://192.168.0.10:1880/ui/ui_svg_graphics/library/svg-pan-zoom.min.js gives me: Console on raspberry pi shows nothing. I'm not working on a secure connection.

bartbutenaers commented 4 years ago

Ok, then your node-red is installed somewhere else...

Let's try this: pi@raspberry-testboard:~/.node-red $ which node-red

In my case the result is /usr/local/bin/node-red

Then I start Node-RED (from my node-red folder): pi@raspberry-testboard:~/.node-red $ node --inspect=0.0.0.0:5858 /usr/local/bin/node-red

bartbutenaers commented 4 years ago

@boisei0,

My ExpressJs endpoint looks like this:

RED.httpNode.get(uiPath + "/:cmd/:value", function(req, res){

with uiPath = "/ui/ui_svg_graphics"

But @tkirchm gets following error, when navigating manually to this endpoint:

So :cmd = "library" and :value = "svg-pan-zoom.min.js"

Seems to me that ExpressJs - for some reason - cannot map the "svg-pan-zoom.min.js" to :value.

Thought first that the dots or hyphens perhaps could cause this issue, but from the ExpressJs documentation I don't think that can be the reason:

The hyphen (-) and the dot (.) are interpreted literally by string-based paths.

Do you have any tips, because I'm getting nuts ...

tkirchm commented 4 years ago

Now its working.

Unfortunately it is not showing anything:

I need a message at Mouse down/Touch start and one at Mouse up/Touch end to get a long press for my SPS and I don't want to define two lines each time.

bartbutenaers commented 4 years ago

You see on the screen that you have to press ctrl + P When you do that, you can see a list of all loaded js files. Type svg_graphics.js and open it. Then you can add breakpoints, by clicking in the left bar. But I'm afraid that you won't arrive at the breakpoint inside the endpoint, because ExpressJs doesn't navigate - for some reason - to the endpoint. I have the impression that ExpressJs cannot parse the URL that you have entered, because he needs to extract the two variables (:cmd and :value) from the url ...

boisei0 commented 4 years ago

I'm going to see if I can reproduce this exact problem on a clean install tomorrow. I'm highly curious what is going wrong here.

bartbutenaers commented 4 years ago

That would be very kind of you!!!

tkirchm commented 4 years ago

Thanks a lot.

Like you wrote breakpoints where never hit.

boisei0 commented 4 years ago

@bartbutenaers Just reproduced it, more or less. Now trying to figure out what is happening, and why. Firefox 71.0 on Mac, but same Node-RED and NodeJS versions as above. 400 bad request to svg-pan-zoom.min.js

The 400 error is equivalent to the thing seen in the browser in a previous image: https://user-images.githubusercontent.com/58719851/71689517-835bba00-2da2-11ea-879c-56afe276ad00.png

boisei0 commented 4 years ago

So to summarize the other issue that just appeared in here: it's an issue caused by too broad regex in the Node-RED core. It doesn't happen on 1.0.3 because the specific path that gets hit got changed there, but can be hit there as well.

And after pushing through a local fix in Node-RED the following log lines appear for me:

[Lena] In `uiPath + /:cmd/:value`
===> directory = /Users/afelix/Projects/Node-RED Projects/svg-ptz-test/nr/node_modules/node-red-contrib-ui-svg/lib/
===> filename = svg-pan-zoom.min.js
[Lena] In `uiPath + /:cmd/:value`
===> directory = /Users/afelix/Projects/Node-RED Projects/svg-ptz-test/nr/node_modules/node-red-contrib-ui-svg/lib/
===> filename = hammer.js
[Lena] In `uiPath + /:cmd/:value`
===> directory = /Users/afelix/Projects/Node-RED Projects/svg-ptz-test/nr/node_modules/node-red-contrib-ui-svg/lib/
===> filename = svg-pan-zoom.min.js

bartbutenaers commented 4 years ago

Hi @tkirchm,

So all credits go to Lena (@boisei0) for finding the bug in Node-RED. I have pushed the workaround to Github. Hopefully it works now better in your setup. Fingers crossed!!!!!

If you could install it once again, and let us something know...

tkirchm commented 4 years ago

Works like a charm 😄

Thanks @boisei0 for investigating the bug. Thanks @bartbutenaers for fixing it and helping a newbie.

Pan&Zoom takes over all touch and mouse gestures. For mobile devices, there should be just one picture with Pan&Zoom enabled. When zooming in to full screen size one cannot zoom back to see the other icons. That is ok for me.

Where are the Input Bind, Events,… information’s saved for every node? I want to text edit my node to be faster.

bartbutenaers commented 4 years ago

Ok that is finally good news...

But for the other new issues you are mentioning, please add a bit more detail because I don't think I understand these correctly!

For mobile devices, there should be just one picture with Pan&Zoom enabled.

You have multiple svg drawings and they all zoom? Or what is the problem?

When zooming in to full screen size one cannot zoom back to see the other icons. That is ok for me.

How do you achieve full screen? And why can't you zoom back? I can keep zooming in and out (using both fingers) without any problem ...

Where are the Input Bind, Events,… information’s saved for every node?

Are those settings lost? Or do they not work anymore (because when I tick with my finger on one of the christmas balls, a message nicely appears in my debug window). Everything (i.e. bindings, events, ...) that I have setup for this demo in the node's config screen, still works correctly. Or do you mean you don't know where you have to specify those events and bindings?

I want to text edit my node to be faster.

That I don't understand...

tkirchm commented 4 years ago

On your phone if you scroll down to an svg with pan&zoom enabled and start zooming it will soon fill the screen an than all touch gestures are for panning and zooming but you can't get back to original zoom. So you can't get back to dashboard and scroll around. You have to change tabs to restore old size. However, if you just use one svg per tab it is no problem and for me this was the goal. One tab per level.

I have to define around thirty events and it would be easier to define them in SVG Editor directly like @@Input:Source:#Light1:att:fill@@ or something like that. Other option would be to edit the underlying file for that node in a text editor and add lines manually.

bartbutenaers commented 4 years ago

Ok, think I got it now ...
P.S. next time please raise a separate issue, because now it becomes very confused for people that want to learn from this discussion ...

About the large series of events: In my christmas tree example I also have been defining a separate event handler for each christmas ball:

So in the first column I had added the id of the path-elements, for example "ball_1". However in that first column you can use any CSS selector. I will add that to the readme file, because it is not clearly explained in our documentation!

So I could have accomplished the same by using a single event line:

Indeed the CSS selector path[id^="ball_"] in fact means: apply it to any path-element whose id starts with "ball_". So every christmas ball again becomes clickable. That is a very powerful mechanism...

But I see there might be another issue popping up. When I click a ball, an output message like this is being sent:

So the msg.elementId contains the CSS selector, which means you cannot determine which christmas ball has been clicked. Instead it should contain e.g. "ball_21". But I think that can be easily fixed:

Line 149: it gets all elements that corresponds to the CSS selector, i.e. all christmas balls.
Line 164: it adds an event handler (e.g. clicked) on every of those balls. At this point I have the real elementId (e.g. "ball_21")
As soon as the event occurs, it will send a message:
- The selector is now undefined, but instead it should contain the CSS selector value path[id^="ball_"].
- The elementId contains now the CSS selector value, but instead it should contain the real element id (e.g. "ball_21")

Does that solve your new issue?

I will need to FIX the msg.selector and msg.elementId fields. Only thing that bothers me, is that might have impact on existing flows (that use those msg fields already) ;-(

tkirchm commented 4 years ago

Sounds great. Events: element.id sounds great.

Input Bind: Can I use CSS selector here too? Maybe in Selector? Binding Source could than be the same as ID. I could set payload.[ID] before sending it to the node.

bartbutenaers commented 4 years ago

Yes you can indeed use CSS selectors in the "Selector" field, to bind an input message field to multiple SVG elements.

Will try to fix the the msg.selector and msg.elementId fields this week ...

tkirchm commented 4 years ago

Any news on this topic?

I tried path[id^="Li_"] but I couldn't get lightbulp clickable and send events.

[{"id":"5837fb53.ff27f4","type":"tab","label":"Heizung","disabled":false,"info":""},{"id":"bf923bb3.23d118","type":"ui_svg_graphics","z":"5837fb53.ff27f4","group":"95d6f17f.6a6f9","order":4,"width":"30","height":"9","svgString":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" xmlns:svg=\"http://www.w3.org/2000/svg\" width=\"1620px\" height=\"730px\" viewBox=\"0 0 1620 730\" preserveAspectRatio=\"xMidYMid meet\">\n <rect id=\"svgEditorBackground\" x=\"0\" y=\"0\" width=\"1620\" height=\"730\" style=\"fill: none; stroke: none;\" />\n <defs id=\"svgEditorDefs\">\n <symbol xmlns=\"http://www.w3.org/2000/svg\" id=\"f0eb\" preserveAspectRatio=\"xMidYMid meet\" viewBox=\"0 0 352 512\">\n <path d=\"M96.06 454.35c.01 6.29 1.87 12.45 5.36 17.69l17.09 25.69a31.99 31.99 0 0 0 26.64 14.28h61.71a31.99 31.99 0 0 0 26.64-14.28l17.09-25.69a31.989 31.989 0 0 0 5.36-17.69l.04-38.35H96.01l.05 38.35zM0 176c0 44.37 16.45 84.85 43.56 115.78 16.52 18.85 42.36 58.23 52.21 91.45.04.26.07.52.11.78h160.24c.04-.26.07-.51.11-.78 9.85-33.22 35.69-72.6 52.21-91.45C335.55 260.85 352 220.37 352 176 352 78.61 272.91-.3 175.45 0 73.44.31 0 82.97 0 176zm176-80c-44.11 0-80 35.89-80 80 0 8.84-7.16 16-16 16s-16-7.16-16-16c0-61.76 50.24-112 112-112 8.84 0 16 7.16 16 16s-7.16 16-16 16z\" />\n </symbol>\n <polygon id=\"svgEditorIconDefs\" style=\"fill:rosybrown;\" />\n </defs>\n <use xlink:href=\"#f0eb\" x=\"463\" y=\"290\" width=\"111\" height=\"161.45454545454547\" id=\"Li_One\" style=\"fill:rosybrown;\" />\n</svg>","clickableShapes":[{"targetId":"path[id^=\"Li_\"]","action":"click","payload":"a","payloadType":"str","topic":"a"}],"smilAnimations":[],"bindings":[],"showCoordinates":false,"autoFormatAfterEdit":false,"outputField":"payload","editorUrl":"http://drawsvg.org/drawsvg.html","directory":"","panEnabled":false,"zoomEnabled":false,"controlIconsEnabled":false,"dblClickZoomEnabled":false,"mouseWheelZoomEnabled":false,"name":"","x":400,"y":300,"wires":[["51ee8d68.513e54"]]},{"id":"3d3aea6d.e79366","type":"inject","z":"5837fb53.ff27f4","name":"","topic":"","payload":"{\"command\":\"update_style\",\"selector\":\"#Li_Bad\",\"attributeName\":\"fill\",\"attributeValue\":\"red\"}","payloadType":"json","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":190,"y":300,"wires":[["bf923bb3.23d118"]]},{"id":"51ee8d68.513e54","type":"debug","z":"5837fb53.ff27f4","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":630,"y":300,"wires":[]},{"id":"95d6f17f.6a6f9","type":"ui_group","z":"","name":"WZ","tab":"91210917.c9b998","disp":true,"width":"100","collapse":true},{"id":"91210917.c9b998","type":"ui_tab","z":"","name":"Plan","icon":"dashboard","disabled":false,"hidden":false}]

boisei0 commented 4 years ago

As Bart mentioned on another issue, he’s having surgery this week so it will be a while before he’s back. I’m afraid you’ve to wait a bit longer than you’ve done so far.

bartbutenaers commented 4 years ago

Hi @tkirchm, I'm back ...

Fix output message

When you install my "panzoom" branch again, you will see that the output message bug now should be fixed:

Suppose the selector field is path[id^="ball_"] for 'clicked' event. This means that a clicked event will be fired for all path elements, whose id starts with 'ball_...' Suppose I click on the seventh ball, then previously you would get this in the output message:

msg.elementId = 'path[id^="ball_"]'
msg.selector is undefined

Which are both incorrect.
With the fix you should now get this output message:

msg.elementId = 'ball_7'
msg.selector =  'path[id^="ball_"]'

Which is a breaking change for existing flows of course ... But now at least you know which ball (id) has been clicked!

Question about CSS selector in example flow

I tried path[id^="Li_"] but I couldn't get lightbulp clickable and send events.

In your latest SVG example, I see that your 'path' element has no id itself. Via a 'use' element, you use the 'path' element in your drawing at a specified location. And that 'use' element has an id "Li_One".

Via your CSS selector path[id^="Li_"] in fact you say to the browser "_apply this to all path elements whose id starts with Li_". Since your path element has no id, it is rather obvious that the browser cannot find any path element whose id starts with Li But in fact you need to say e.g. "apply this to all elements whose id starts with Li_". So when you use CSS selector [id^="Li_"] you will see that it works fine:

demo_incorrect_css_selector

I have added a link to the CSS selectors page, in all places where “selectors” can be used:

Hopefully it then becomes less confusing how it works.

Since these kind of questions (e.g. about SVG, CSS selectors …) are not really issues about this node, it would be nice if you could discuss these in the future on the Node-RED forum. Because I’m not able to answer here all questions from anybody on my own … Of course you can always mention me on the forum (@bartbutenaers) to attract my attention.

tkirchm commented 4 years ago

Thanks a lot. Works perfekt.

Now working with my floorplan is much easier.

bartbutenaers commented 4 years ago

Hey @tkirchm, Thanks a lot for your feedback! Your suggestion for the panzoom library was a very good start point! Glad it finally works ... Our documentation needs a lot of improvement, but unfortunately no time at the moment. See you around !! Bart

bartbutenaers / node-red-contrib-ui-svg

Zoom #45

Short term solution

Long term solution

`Willkommen bei Node-RED!

Fix output message

Question about CSS selector in example flow