Morning @thucar,
My first intention with this SVG node was to allow users very easily to have (2 way) interaction with their vector graphics in the dashboard. But based on all kind of feedback, we added a lot of extra features for users that want to build more complex stuff. Hopefully our node is still understandable for less-technical users that only want to have simple graphics. That is not clear for me at the moment... So if you (or someone else reading this) have tips for improving the user friendlyness, don't hesitate to share your ideas. Also improvements of our documentation?
For example I would like to have this: when an unexisting shape id is entered, we could show it red highlighted...
If perhaps a console warning was generated (if it is even possible to detect missing prop in dashboard core) then perhaps at minimum, when people complain about dashboard elements jumping around & post their logs, you could quickly see which nodes are being reported (console.warned) as not having index property? - perhaps the warning could instruct the more savvy users to "raise and issue with node-contrib-ui-xxxx! re: index property not provided"?
edit...
Assumptions were made - sorry if that is complete nonsense
Bart, with flexibility comes complexity (usually).
I dont' think our node is too un-intuitive but sure, things could be (and will be) improved in time.
The thing with SVG is its not a simple subject & the animation, events, binding etc we have provided do greatly simplify (imo) some of the more advanced parts of SVG.
Will be interesting to see what users comeback with.
@ Everyone...
How long would you give a beta before we publish on NPM?
Warning works well. Users dont like warnings (if the dont produce them by themselves) and owner gets real quick attention about to deal with it.
(for me it took 2 days to get bug reported in github about annoying warning)
Yeah, U know. Just wanted to say that at the moment I have no idea whether our node is easy enough to use, or whether our documentation is overwhelming or not. Haven't got any kind of feedback about that...
If we don't get any feedback for a week, don't think it has advantages anymore to keep it in the beta phase... We can always do bug fixing afterwards, but we need to make sure that we don't need to change anything fundamentally afterwards (and risking existing flows to become corrupted)...
Think we will get most response once it is on npm...
I agree. Users are the best monitoring software available on the market
Keen to investigate how your node could work with uibuilder. I can think of various ways we could interact but we probably need to get our virtual heads together to talk about what we want to achieve. If you want to follow that up at any point then lets start another thread.
Hi
Great work! When I try to use the editor I get this warning message and cant use the editor
I have tried on two different Pi's with the same result. When this error occurs there is also no access to any config view on any node, not only the svg node
Any suggestions appreciated
Hi @mtoko,
This is a known issue. I will tonight adjust our default svg source string so ig contains at least the namespaces. And I will try to create a fix to add those namespaces automatically when somebody forgets to include them.
Bart
I now got time to play around with this a bit. However, I almost immediately ran into another issue - my SVG graphics do not show up in the ui. I decided to test with the first basic demo - the red circle. It shows up properly in the editor but not in the ui. And when I create a new Tab and Group specifically for SVG, then the new tab does not show up in my UI menu until I add something else to it.
In which case, only the added "something else" shows up and not SVG graphics.
Another piece to the puzzle - I just noticed in the debug output, this pops up, referring to the SVG graphics node: TypeError: Cannot read property 'push' of undefined
Hi @thucar,
Thanks for sharing this extra piece of the puzzle!
This is becoming very annoying. Last week I got a notification of exact the same error, but for my other UI node.
I assume this error occurs in the Node-RED log, and not in the browser console log (where your dashboard is running)?
Could you please share the version numbers of NodeJs, dashboard and Node-RED itself. If I understand it correctly, it might be caused by an older NodeJs version, but I have no clue which part of the code eventually triggers that exception ...
Hi @BartButenaers I do remember having this error pop up with some other node as well in the past. So it is very likely it's an issue related to the system setup.
Here are mu version numbers:
NodeJs - v8.11.4
Node-Red - 0.18.4
Dashboar - 2.14.0
I'll run a full upgrade once my house gets up to temperature
This fix is available on Github, but it only will work for new nodes that you draw on your flow!
@Steve-Mcl: should we detect these missing attributes automatically, and add them automatically (before displaying the SVG source string both in DrawSvg or in the dashboard)?
@BartButenaers this sounds like the strange dashboard behaviour I seen when running node red from the debugger in vscode.
At the time I just thought my Dev environment was screwed as the "disappearing tabs" and "disappearing elements" problem stopped happening by simply running node-red from a regular command line (no debugging)
@dceejay, in all your time developing dashboard, have you ever witnessed this problem when running nr with debugger and certain parts of dashboard don't show/missing? I did try to debug this but have up as I couldn't figure it out as I am not familiar enough with the underlying architecture and design of dashboard.
That would be the kind thing to do but I'm not sure we should forcefully modify someone's SVG source.
A slightly less forceful method might be to....
Upon launching DrawSVG ,
alert the user of the issue & ask if they would like the missing attributes added.
Alternatively, the Ace editor could put a red mark in the left hand margin & it's tool tip could explain the issue? (Ps, I have no idea how to add custom syntax checking to Ace editor)
That would indeed be very user friendly, if we could implement that somehow...
P.S. we still have an issue that might be related to this. We still use "html" instead of "svg" in our code. Perhaps then it would work better already. Perhaps we can add the Ace file for SVG to our lib directory, and serve it to the client whenever it is needed?
Thanks for this fix, that worked ! I can now use the svg editor, but when I edit the svg code and close the editor it is not possible to select any nodes on any flows in the Node Red editor or access any configuration. This problem is resolved if I refresh the Node Red editor in the browser.
