[Announce] node-red-contrib-ui-svg

BartButenaers · 8 January 2021 20:59

The following flow loads a 600x400 image (generated via https://dummyimage.com/) and shows it inside the SVG:

<svg width="100%" height="100%" enable-background="new 0 0 250 250" xmlns="http://www.w3.org/2000/svg">/svg> 
   <image width="100%" height="100%"  xlink:href="https://dummyimage.com/600x400/000/fff" />
</svg>

So the SVG fits (100% width and height) the available are, which has been allocated by the dashboard. And the image fits (100% width and height) into the SVG drawing.
The result is an image fitting nicely:

[{"id":"9d8d5a1e.a63e98","type":"ui_svg_graphics","z":"7f1827bd.8acfe8","group":"2fa9557d.3cbe1a","order":0,"width":"6","height":"5","svgString":"<svg width=\"100%\" height=\"100%\" enable-background=\"new 0 0 250 250\" xmlns=\"http://www.w3.org/2000/svg\">/svg> \n<image width=\"100%\" height=\"100%\"  xlink:href=\"https://dummyimage.com/600x400/000/fff\" />\n</svg>","clickableShapes":[{"targetId":"#light_living","action":"click","payload":"light_living","payloadType":"str","topic":"light_living"},{"targetId":"r","action":"click","payload":"r","payloadType":"str","topic":"r"}],"javascriptHandlers":[],"smilAnimations":[],"bindings":[],"showCoordinates":false,"autoFormatAfterEdit":false,"showBrowserErrors":true,"showBrowserEvents":false,"enableJsDebugging":false,"sendMsgWhenLoaded":false,"outputField":"payload","editorUrl":"//drawsvg.org/drawsvg.html","directory":"","panning":"disabled","zooming":"disabled","panOnlyWhenZoomed":false,"doubleClickZoomEnabled":false,"mouseWheelZoomEnabled":false,"dblClickZoomPercentage":150,"name":"","x":700,"y":2600,"wires":[[]]},{"id":"2fa9557d.3cbe1a","type":"ui_group","z":"","name":"Fit available area","tab":"680a9e2f.a6726","order":1,"disp":true,"width":"6","collapse":false},{"id":"680a9e2f.a6726","type":"ui_tab","z":"","name":"SVG size","icon":"dashboard","disabled":false,"hidden":false}]

So you can load even bigger images, it will still fit.
Is this an answer to your question, or did I misunderstood it??

vkuehn · 8 January 2021 21:09

yes the first part answers how to load images and than write over them with svg..cool!
My assumption was that the floorplan is all svg. So yes it is a good help and surprising

Is there a way to make the widgets larger ?

BartButenaers · 8 January 2021 21:14

Do you mean this:

svg_width

vkuehn · 9 January 2021 12:48

exactly but for me it stops raising limits after six horizontal
!?
I have fiddeled with these but doesn't show any differences
DashboardDefaults

btw how do you do these funny videos ?

dceejay · 9 January 2021 15:16

You have to first adjust the group size that the widget sits in... then you can make the widget as large as the group width...

vkuehn · 9 January 2021 15:33

excellent thanks a lot !

BartButenaers · 9 January 2021 16:55

See here, and you can find other software that others use in the same discussion...

vkuehn · 10 January 2021 11:10

thanks for that and for sharing these screen casts.

Miliano · 10 February 2021 17:23

I think, I´m to stupid!

I tried it with the example:
https://dummyimage.com/600x400/000/fff

If I open this in the browser, the 600x400 area is mutch bigger, than if i open it with the example flow above.

An if I try to make it bigger by putting the percent to 200% then only a part of the graphic is shown.

Same with a own graphic ... very small. and if i edited it, with the editor, only a part is shown!?

Isn´t there an easy way, to get a grafic as Backgroung in a "normal" size?

PS. I try to set a privat graphic by this tuturial

And it doesn´t work at all. Image isn´t shown.
Is there a way to see the error massages why this happen? Any log or debug?

I try it again and again, but I don´t understand it ... I change something in the editor ... and in the dashboard it looks totaly different!?!?

BartButenaers · 10 February 2021 19:55

Yes but I can't do much about that. When I open that image in Chrome on my desktop computer, then it is large. When I open it in Chrome on my Android smartphone, then it is small. The browser has an entire screen available, and they try to show it as good as possible.

When you open the same image in the SVG node, then it becomes an entirely different story:

Depending on dashboard settings (see above widget size, group width, ...) the dashboard will give the SVG some available space, based on what "you" have specified. So the SVG node will fill the space that you have offered to it. It cannot choose anything: it gets nothing more, or nothing less...
Then you say to the SVG node: show this image and use 100% of the available width and height. So the node will shrink or stretch the image to fill the available space, whatever the original size of the image was. It is a dumb node: it does only what have asked it to do...

When you say to the SVG node that it has to show the image on 200% of the available space. Then the node will make try to display your image on twice the available space. But of course the SVG node is not able to stretch your physical screen. Otherwise I would either have gotten a lot of lawsuits, or I would be rich by now . So you will see only part of the picture, i.e. the part of the (stretched) image that fits on the available space. Something like this:

I "assume" you mean that you have a teeny weeny image, and you ask the SVG node to show it at 200%? Then the SVG node will do what you have asked it to do: to stretch the teeny weeny image across a large area.

I assume with "normal" size that you mean not stretched or shrinked?
Have not tried it, but I would expect that you have to specify then your fixed image dimensions in the image element like this (instead of 100%):

<image width="600" height="400" ...

I would expect that the SVG node will try to draw your image in an area of 600x400 pixels. But of course on a small screen, it won't have that much of available space on the screen. So you most probably will get scrollbars then (because the browser can only show part of the image).

That is not enough information to allow me to help you. Can you share some screenshots (of your settings screen containing the path, of your file explorer showing the directory with the image ...), or other kind of info that can help us troubleshooting...

The problem could be on the server side (while trying to read the image from the filesystem), so you should have a look at the Node-RED log. But the problem could also be on the frontend side (while trying to request the image from the server), so you should also have a look at your browser console log (via the "developer tools" menu of your browser where your dashboard is displayed).

I cannot figure out what is going wrong on your computer, only based on "something" and "totally". My paranormal capabilities are still not mature enough

Miliano · 10 February 2021 20:16

Okay, first of all thanks for your reply!
I try to make it more understandable:

I copy this from above:

At Dashboard:

If I change the area:

Then at Dashboard:

And if I try the Editor:

In Dashboard:

Hope this is better
Thanks for your help!

BartButenaers · 10 February 2021 21:03

You have no idea...

It doesn't happen ofter, but I'm flabbergasted...

The first thing that I do all my UI nodes, is setting the CSS width and height (of the parent DIV element) to 100%. Just to make sure that the UI element nicely fits the available height.
But it seems this is not available on the SVG node:

<div class='ui-svg' id='svggraphics_` + config.id + `' ng-init='init(` + configAsJson + `)'>` + svgString + `</div>

So I thought that perhaps I have removed this accidentally in a recent release. But when I look at the commit history, it looks like this has never been added in the svg node in the past...

When I add it manually in my Chrome debugger:

Then it is indeed solved:

But it is nearly impossible that this has always been like that. The SVG node has been downloaded already 12907 times, and nobody (inclusive myself) has ever seen it. Until now ...

@Steve-Mcl : do you remember anything about that? I cannot explain that this has never been detected before by anybody. My old brain is not functioning well anymore

Miliano · 10 February 2021 21:14

Sorry for the new Problem
I tried it with Opera (my default browser) firefox and a minute ago with chrome ... always the same

I will have tomorrow a deaper look on it.
If there any ideas or more information needed, please tell me.

BartButenaers · 10 February 2021 21:18

Yes that is normal. If the SVG node doesn't set 100% width and height on it's parent DIV element, then the browser (Chrome, Safari, Firefox...) won't stretch it to fill the available area.
I can fix that very easily, but would like to understand first why that has never been reported before.
Just don't get it...
PS. you don't need to have a deaper look on it, since it is a bug in the svg node...

Miliano · 10 February 2021 21:31

Okay, I wait for this. No stress please! Thanks for all the work!
Perhaps all other 12907 think, they are to stupid, like I do ... because over 12000 have it run.
And they don´t dare to ask!?

BartButenaers · 10 February 2021 21:39

Meanwhile you can experiment with the fix, by installing the node directly from my Github account (since it is not published on NPM yet!). By running following command in your .node-red folder:

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

BartButenaers · 10 February 2021 22:11

No the problem is that it works fine for them ...
If you look e.g. at this dashboard from another user.
I simply cannot explain that it fitted the entire area nicely

Although when I look at his SVG source:

<svg x="0" y="0" height="100%" viewBox="-0.1964024156332016 -0.0687660425901413 1000.392822265625 350.1374816894531" width="100%" preserveAspectRatio="xMidYMid meet">
  ...
</svg>

I assume that the width and height of the viewbox force the browser to fill the available area anyway (see stackoverflow).

Just don't want to break existing flows: incorrect resizing, wrong aspect ratio, ...

If anybody has any ideas/suggestions, please share them!!!

Miliano · 11 February 2021 16:31

Hello again
I have install it, from your lokal copy.
Now your example works "normal"

But if I only make a easy example with the editor:

Save it

And on the Dashboard:

Still the same ..

If I change it from 100 to 100% in the svg code

Then it gets bigger:

But still cut off!?

Help Please!

PS. Okay, I helped myself!
I also have to make the viewbox bigger, then it works correctly.
But I think, if I paint something in the editor, the "normal" way should be, that it shown completely on the dashboard. Or am I wrong and it´s normal to paint something, save it and manually set the area correct?

Steve-Mcl · 11 February 2021 16:44

SVG is tricky & without meaning to sound uncaring, not really a node-red (or Bart) issue.

As you have already demonstrated it is possible to set the height and width.

We are not SVG experts - we only wrote the node to make it easier to add SVG to node-red dashboard. So i'm afraid you are going to have to do a bit leg work & read up on SVG positioning / sizing / scaling.

Below is a link to a very good guide - have a read, have a play, see if you can solve it yourself...

Miliano · 11 February 2021 16:55

Okay, thanks for the Link, I will have a look at it!

Two Points are still open for me:

Will the changes got into the "normal" version? (sorry for my often use of normal, don´t have a better word!)
And where can I find information, why the graphic out of my nodered data dirctory isn´t loaded?
I get no error message in node red.

Help myself again
I dont have to use the completed path, only the path from node red to the picture. (In my case /data)
Know it works!
Thanks a lot! Rest is only try and error
Please tell me, if the changes dont go in the "normal" Version, then I have to find a different way.

Thanks for help and all your work!

Topic		Replies	Views
[ANNOUNCE] node-red-contrib-drawsvg (beta version) Share Your Nodes	2	472	19 November 2019
[Announce] node-red-contrib-ui-svg (final beta) UPDATE V1.2.1 Share Your Nodes	91	9448	23 October 2019
[ANNOUNCE] node-red-contrib-ui-svg: v2.3.0 beta Share Your Nodes	1	446	21 October 2021
[ANNOUNCE] node-red-contrib-ui-svg: 2.3.1 Share Your Nodes	0	369	8 December 2021
Announce node-red-contrib-ui-svg : feedback request Share Your Nodes	43	5305	2 October 2019

[Announce] node-red-contrib-ui-svg

Related topics