I should find some time to migrate the node-red-contrib-ui-svg node to Flexdash. But after a tremendous amount of feature requests, that node has resulted in quite some code. So not an easy task to migrate this monster when free time is limited...
Recently our Flexdash guru @tve had a nice proposal, i.e. to separate the integrated SVG editor from the ui-SVG node. That indeed has a number of advantages:
The code is dedicated to integrate an SVG editor, which is easier to maintain.
When somebody else develops another node to integrate another SVG editor, then people can choose which editor they want.
You can not only generate an SVG string for the UI SVG node, but for all kind of other nodes.
Users that use a third party SVG editor (and like to transfer the SVG string manually between their SVG editor and Node-RED) just don't install this node.
The future UI SVG node for Flexdash will become more focussed on SVG and will have cleaner code.
So after quite some time, I can finally present a new node: node-red-contrib-svg-edit
This node allows you to draw your SVG drawing in svg-edit, a free online SVG editor.
Note: due to lack of free time I have not yet implemented an offline version of this editor, so your system need to be connected to the internet...
For people that want to test this beta, please execute the following command in your .node-red folder:
Ah, excellent! That means that this will work well with uibuilder as well - nice!
You can already send HMTL from node-red to a uibuilder front-end very easily and the next release will make that even easier as there will be a direct option on the upcoming uib-element node. But you can also include HTML (including SVG of course) as "slot" input to another element as well.
Of course, you should also be able to use it with the non-dashboard template node.
Ah damn, yes I know what it is. Stupid mistake. Was last busy also for my daily job, so did forget something in my node. It is getting a bad habbit not taking time to test myself before publishing... Will fix it soon.
I'm hitting an issue, which is that my admin root is /admin and not / and that results in:
GET http://core2:1880/svg_edit/lib/Editor.js net::ERR_ABORTED 404 (Not Found)
It should be http://core2:1880/admin/svg_edit/lib/Editor.js
I suspect you request /svg_edit/lib/... instead of ./svg_edit/lib/...
Is there a way not to start the editor in full-screen mode? On a 27" display it's very inconvenient... When it starts it says "hit ESC to exit full screen mode" but hitting ESC closes the editor...
I also see:
seExplorerButton.js:177 GET http://core2:1880/admin/extensions/ext-shapes/shapelib/index.json 404 (Not Found)
Hmmm... if I hit F11 it goes from full-screen to full-page (within the browser), which is better. But then I hit ESC and it reduces into the edit panel, which would be nice, except that it's too tall and the regular edit panel is down below it (if I scroll down) and there doesn't seem to be a way to save the image to Node-RED...
In the old ui-svg node, the editor was displayed inside a popup dialog window. There was a "save" button on that popup dialog, so you could do intermediate saves towards the node.
Had choosen for a fullscreen mode, because it looked good on my Windows portable (using Chrome). And when I go with the mouse cursor to the top of my screen, automatically a "close" button becomes visible:
Why not stay in the flow editor window? The monaco editor has a "maximize" button which is built into the tray stuff, for example. And if someone wants it full-screen then the browser can be maximized/full-screen too.
BTW, this is your example SVG in FlexDash:
We should discuss scaling... What I'm seeing is that the SVG produced has:
<svg width="640" height="480">
which says that it's supposed to be rendered 640x480px and doesn't say anything about the SVG coordinate system.
In the image above, I added a width: 100% style, which overrides the 640x480 but with the effect that you just see the top-left portion of the drawing 'cause there's no viewBox defined.
I believe the SVG should come as:
<svg viewBox="0 0 640 480">
With the application of something like width:100%; height:100%; one could then scale it to the container it's in. (Probably also need to add some aspect ratio stuff, etc.)
Maybe I need a flexdash SVG node that massages that stuff...
This is a historical moment for any community member that loves SVG...
Well done (again)!!!
Ah yes, I had overlooked the dimensions. In the old svg node it was also 100% in both directions.
You mean inside the config screen of my node. That was my first attempt, but I thought that people would not like it, because it was so small.
And do you mean the RED.tray stuff? Not used it myself before.
Will get back here later on the evening. Need to do some familly stuff...
Hmm, not sure yet about it.
It works nice until I select a shape in the svg-edit editor.
At that moment extra elements are displayed in the top bar (to display the properties of the selected shape), but that is quite annoying:
Dunno what that is, perhaps you need a certain minimum size. Possibly so the toolbars fit into two rows? Here's what I see, first with something selected:
You see how it doesn't collapse the two toolbar rows back down to one?
I believe the right thing to do would be to open the svg editor in a separate full-width tray when the user clicks the button. Basically the same as when one clicks the expand button in a function node. I looked a bit into the code necessary to do that... ugh...
Ok thanks for the pointersi I indeed hadn't noticed that it doesn't collapse again after deselecting.
Will try to get that RED.tray stuff up and running in a couple of days from now.
