Optimal size for an SVG in the dashboard

General
1

Hi folks,

Unfortunately I still didn't have time yet to use my node-red-contrib-ui-svg node myself :weary:
How stupid is that ...

So would be nice to get some feedback from users that have used it already.
More specifically about the size of the SVG compared to the widget size.

  1. I specify some size of the dashboard widget:

    image

    General question: I give it a long size in the X-direction, to fit nicely on a horizontal placed tablet. However on a smartphone it should be longer in the Y-direction I assume. How can I deal with that?

  2. Now I assumed that I have to have the SVG fit that parent widget container:

    image

    However that 'might' be difficult to draw (with percentages). Perhaps it easier to have a fixed size, and then use the preserveAspectRatio to define how it needs to be stretched in both directions. I have seen some examples from other users who use an SVG element with the same pixel size as the background image:

    <svg preserveAspectRatio="none" x="0" y="0" viewBox="0 0 1704 695" width="100%">
  <image width="1704px" height="695" id="background"...

    Not sure which way is the most optimal?

Here is an simple flow (for anybody who wants to experiment) that shows a 900x550px image in an svg (with orange blackground):

[{"id":"2399b014.7c6ad","type":"ui_svg_graphics","z":"4ae15451.7b2f5c","group":"2df28529.6748aa","order":2,"width":"12","height":"11","svgString":"<svg width=\"100%\" height=\"100%\" \n  xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">       \n  <rect width=\"100%\" height=\"100%\" fill=\"orange\"/>\n  <image href=\"https://www.securitymagazine.com/ext/resources/SEC/2016/0216/SEC0216-edu-feature-slide1_900px.jpg\" height=\"100%\" width=\"100%\" preserveAspectRatio=\"xMidYMid meet\"/>\n</svg>","clickableShapes":[],"smilAnimations":[],"bindings":[],"showCoordinates":false,"autoFormatAfterEdit":false,"showBrowserErrors":false,"selectorAsElementId":true,"outputField":"payload","editorUrl":"http://drawsvg.org/drawsvg.html","directory":"","panEnabled":false,"zoomEnabled":false,"controlIconsEnabled":false,"dblClickZoomEnabled":false,"mouseWheelZoomEnabled":false,"name":"","x":520,"y":580,"wires":[[]]},{"id":"2df28529.6748aa","type":"ui_group","z":"","name":"Default","tab":"70e1bf49.ae7ee","order":1,"disp":true,"width":"12","collapse":false},{"id":"70e1bf49.ae7ee","type":"ui_tab","z":"","name":"Background test","icon":"dashboard","disabled":false,"hidden":false}]

image

All tips are very welcome!
Bart

2 Likes
2

For me there is only one solution and it limits a lot what you can do.
If you try to target multiple screen sizes, the widest card must fit into smallest screen. (If you don't want to see sidebars.) With devices you also must choose one best fitted orientation.
Doing that you also must choose how many units the widest card must have. Fine-tuning can be done with 1x1 widget size. Do not go to extreme values with that.

That done, you can always calculate exact dimensions for content based on 1x1 widget size, widget spacing, count of units and gaps in direction (and depending on theme, the padding also may affect)

Otherwise you have that "difficult draw with percentages" option which again may or may not satisfy your needs. That depends on the content ...

3

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.