search

bartbutenaers / node-red-contrib-ui-svg

A Node-RED widget node to show interactive SVG (vector graphics) in the dashboard
Apache License 2.0
93 stars 27 forks source link

v2.0.0 - sending text does not work anymore. #67

Closed IoTPlay closed 4 years ago

IoTPlay commented 4 years ago

Hi, since upg to v.2.0.0 sending text into an svg does not work anymore, I see you have breaking changes with v2.0.0, but I do not see my problem listed in your doc'n.

Priot to upg to v2.0.0 - by sending this message:

{"payload":{"SystemStateDesc":"testing testing"},"topic":"databind"}

to the node, with ie. the below code, worked - by updating the text field, "payload.SystemStateDesc".

`

State not Read yet...

`

But after upgrade, it give the following error:

"Useless to send msg.topic 'databinding' since no bindings have been specified in the config screen."

Could you point me in the right direction?

bartbutenaers commented 4 years ago

Morning Jéan, That is the first reported bug ... I have added more error handling, to make troubleshooting easier, but have forgotten that people use databindings also like this. Will fix it tonight. Bart

bartbutenaers commented 4 years ago

Jéan, I have published version 2.0.1 on NPM which now works for me with your flow:

[{"id":"df0c7987.9fb1b8","type":"ui_svg_graphics","z":"4142483e.06fca8","group":"b0bf7afb.3fb1c8","order":2,"width":0,"height":0,"svgString":"<svg x=\"0\" y=\"0\" height=\"310\" width=\"420\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:svg=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"> <rect id=\"svgEditorBackground\" width=\"300\" height=\"340\" x=\"1\" y=\"1\" style=\"fill: grey; stroke: black;stroke-width:2px;\"/> <text data-bind-text=\"payload.SystemStateDesc\" font-size=\"16\" x=\"150\" y=\"22\" stroke=\"white\" text-anchor=\"middle\"> State not Read yet... </text> </svg>","clickableShapes":[],"smilAnimations":[],"bindings":[],"showCoordinates":false,"autoFormatAfterEdit":false,"showBrowserErrors":false,"outputField":"payload","editorUrl":"//drawsvg.org/drawsvg.html","directory":"","panning":"disabled","zooming":"disabled","panOnlyWhenZoomed":false,"doubleClickZoomEnabled":false,"mouseWheelZoomEnabled":false,"name":"","x":640,"y":1420,"wires":[[]]},{"id":"a0590bb1.3e2ad8","type":"inject","z":"4142483e.06fca8","name":"","topic":"databind","payload":"{\"SystemStateDesc\":\"testing testing\"}","payloadType":"json","repeat":"","crontab":"","once":false,"onceDelay":0.1,"showConfirmation":false,"confirmationLabel":"","x":470,"y":1420,"wires":[["df0c7987.9fb1b8"]]},{"id":"b0bf7afb.3fb1c8","type":"ui_group","z":"","name":"Default","tab":"2aef1413.c4ee3c","order":1,"disp":false,"width":"6","collapse":false},{"id":"2aef1413.c4ee3c","type":"ui_tab","z":"","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

svg_attribute_based_binding

I have also expanded the readme page, to make sure people know about this feature:

image

Would be nice if you could give me some feedback!

IoTPlay commented 4 years ago

Fantastic, thank you for your DETAILED documentation, and fast response, it was a pleasure to work with the previous version, looking forward to take the v2 for a drive tonight !

IoTPlay commented 4 years ago

Funny, does not work with me. Upgraded to to V2.0.1 of this Node, node-red 1.1.2, node-red-dashboard 2.23.0, Code saves, running Inject does not create an error anymore, but the SVG does not appear in Dashboard. Any ideas?

[{"id":"f59ff779.abc5b","type":"ui_svg_graphics","z":"3d960719.7a6db8","group":"f47ba44f.68784","order":1,"width":"6","height":"7","svgString":"<svg x=\"0\" y=\"0\" height=\"310\" width=\"420\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:svg=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"> <rect id=\"svgEditorBackground\" width=\"300\" height=\"340\" x=\"1\" y=\"1\" style=\"fill: grey; stroke: black;stroke-width:2px;\"/> <text data-bind-text=\"payload.SystemStateDesc\" font-size=\"16\" x=\"150\" y=\"22\" stroke=\"white\" text-anchor=\"middle\"> State not Read yet... </text> </svg>","clickableShapes":[],"smilAnimations":[],"bindings":[],"showCoordinates":false,"autoFormatAfterEdit":false,"showBrowserErrors":false,"outputField":"payload","editorUrl":"//drawsvg.org/drawsvg.html","directory":"","panning":"disabled","zooming":"disabled","panOnlyWhenZoomed":false,"doubleClickZoomEnabled":false,"mouseWheelZoomEnabled":false,"name":"TEST ESS","x":610,"y":160,"wires":[[]]},{"id":"7b686ee0.68145","type":"inject","z":"3d960719.7a6db8","name":"","repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"databind","payload":"{\"SystemStateDesc\":\"testing testing\"}","payloadType":"json","x":390,"y":160,"wires":[["f59ff779.abc5b"]]},{"id":"f47ba44f.68784","type":"ui_group","z":"","name":"Energy Storage Status","tab":"d3e6a116.d34a98","order":1,"disp":true,"width":"6","collapse":false},{"id":"d3e6a116.d34a98","type":"ui_tab","z":"","name":"Victron","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

bartbutenaers commented 4 years ago

Do you see any errors in the console (developer tools) of your browser? There is a new checkbox on the "Settings" tabsheet to show the client-side errors in the debug sidebar. And did you refresh the browser cache?

bartbutenaers commented 4 years ago

I have imported your flow, and works fine here ...

IoTPlay commented 4 years ago

No, have not refreshed browser cache etc, will try that.

IoTPlay commented 4 years ago

Removed cache, svg nodes still not displaying. Error on node-red console is the following:

TypeError: config.svgString.matchAll is not a function at new SvgGraphicsNode (/data/node_modules/node-red-contrib-ui-svg/svg_graphics.js:220:44) at Object.createNode (/usr/src/node-red/node_modules/@node-red/runtime/lib/nodes/flows/util.js:493:31) at Flow.start (/usr/src/node-red/node_modules/@node-red/runtime/lib/nodes/flows/Flow.js:193:48) at start (/usr/src/node-red/node_modules/@node-red/runtime/lib/nodes/flows/index.js:345:33) at tryCatchReject (/usr/src/node-red/node_modules/when/lib/makePromise.js:845:30) at runContinuation1 (/usr/src/node-red/node_modules/when/lib/makePromise.js:804:4) at Fulfilled.when (/usr/src/node-red/node_modules/when/lib/makePromise.js:592:4) at Pending.run (/usr/src/node-red/node_modules/when/lib/makePromise.js:483:13) at Scheduler._drain (/usr/src/node-red/node_modules/when/lib/Scheduler.js:62:19) at Scheduler.drain (/usr/src/node-red/node_modules/when/lib/Scheduler.js:27:9)

I am going to completely remove svg, restart, and add svg node back. Will report back.

Nope, that did not work, did above, still have above node-red console erros.

bartbutenaers commented 4 years ago

The error occurs on this line:

image

The matchAll function doesn't exist in your case. Seems that it is supported from NodeJs version 12.0.0. Could it be that you have an older version of NodeJs? Anyway I should make sure that it works on older NodeJs versions also. Sorry for the inconvenience!!

bartbutenaers commented 4 years ago

Jéan, I have added a fix to Github, which doesn't use matchAll anymore. So it should work on older NodeJs versions. Would you be so kind to install it directly from Github and test whether it works now? You can install it from your Node-RED directory:

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

As soon as it works for you, I will publish it on NPM. Thanks !!!

IoTPlay commented 4 years ago

I am using the latest Docker version of node-red. Node.js version is v10.21.0 in the docker version. I will try now...

IoTPlay commented 4 years ago

Still same problem - extract from node-red log:

29 Jul 22:27:41 - [info] Starting flows. TypeError: config.svgString.matchAll is not a function at new SvgGraphicsNode (/data/node_modules/node-red-contrib-ui-svg/svg_graphics.js:220:44) at Object.createNode (/usr/src/node-red/node_modules/@node-red/runtime/lib/nodes/flows/util.js:493:31) at Flow.start (/usr/src/node-red/node_modules/@node-red/runtime/lib/nodes/flows/Flow.js:193:48) at start (/usr/src/node-red/node_modules/@node-red/runtime/lib/nodes/flows/index.js:345:33) at tryCatchReject (/usr/src/node-red/node_modules/when/lib/makePromise.js:845:30) at runContinuation1 (/usr/src/node-red/node_modules/when/lib/makePromise.js:804:4) at Fulfilled.when (/usr/src/node-red/node_modules/when/lib/makePromise.js:592:4) at Pending.run (/usr/src/node-red/node_modules/when/lib/makePromise.js:483:13) at Scheduler._drain (/usr/src/node-red/node_modules/when/lib/Scheduler.js:62:19) at Scheduler.drain (/usr/src/node-red/node_modules/when/lib/Scheduler.js:27:9)

bartbutenaers commented 4 years ago

That is not possible, because on line 220 (see your error) there is no matchAll statement anymore on Github. I think you have installed it in the wrong directory, so Node-RED continues to use the old version (which has not been overwritten).

I have published it on NPM, so would be nice if you could test it.

IoTPlay commented 4 years ago

Upgraded to v2.0.2 on the palette. Now working !!!

IoTPlay commented 4 years ago

And thank you so much for working the problem so fast !

bartbutenaers commented 4 years ago

Thanks for the fast feedback!