Hello, I'm working with svg and animations. I'm using node-red-contrib-ui-svg 2.3.1. When I place my svg inside the group, I increase it to almost the size of svg. However, It is always left align. How can I center align a node in the group?
I think this is related to css, but I can't find a documentation regarding it. A lot of tries are not helping.
Let me change the question.
If I place a button from dashboard-ui and set its size to 2. How can I center it in the group? It is always left aligned.
There is a layout tool for widgets placement inside groups.
1 Like
Hi @hotNipi, appreciate your reply. Unfortunately, layout doesn't let me edit alignment.
Here is the output.
My SVG graphics is a bit smaller, this it gets left aligned.
This is a little bit tricky and difficult to make it clear. I really appreciate your help.
If I do as you suggested, basically I'm telling nodered to space 4 blocks (which are equal to 48px) to the right. This is not my problem.
My problem is inside the button object, in my case, the svg element. The css of button is making it fill all the available space. But if I have an object smaller, which doesn't follow this rule, it gets left aligned.
Hear is the example.
The black and blue boxes are what I can configure from dashboard layout. However, the element inside the group gets left aligned. I need to center it.
According to css - How do I center an SVG in a div? - Stack Overflow, I must play with css. However, I can't get it to work.
So if you want the OG question answered you may want to post a example flow showing issue.
Sorry, totally miss it. Here is an example.
[{"id":"f6f2187d.f17ca8","type":"tab","label":"Flow 1","disabled":false,"info":""},{"id":"7e602b47fa0cd2bd","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false},{"id":"d0d0e9664e069f5b","type":"ui_base","theme":{"name":"theme-light","lightTheme":{"default":"#0094CE","baseColor":"#0094CE","baseFont":"-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif","edited":true,"reset":false},"darkTheme":{"default":"#097479","baseColor":"#097479","baseFont":"-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif","edited":false},"customTheme":{"name":"Untitled Theme 1","default":"#4B7930","baseColor":"#4B7930","baseFont":"-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif"},"themeState":{"base-color":{"default":"#0094CE","value":"#0094CE","edited":false},"page-titlebar-backgroundColor":{"value":"#0094CE","edited":false},"page-backgroundColor":{"value":"#fafafa","edited":false},"page-sidebar-backgroundColor":{"value":"#ffffff","edited":false},"group-textColor":{"value":"#1bbfff","edited":false},"group-borderColor":{"value":"#ffffff","edited":false},"group-backgroundColor":{"value":"#ffffff","edited":false},"widget-textColor":{"value":"#111111","edited":false},"widget-backgroundColor":{"value":"#0094ce","edited":false},"widget-borderColor":{"value":"#ffffff","edited":false},"base-font":{"value":"-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif"}},"angularTheme":{"primary":"indigo","accents":"blue","warn":"red","background":"grey","palette":"light"}},"site":{"name":"Node-RED Dashboard","hideToolbar":"false","allowSwipe":"false","lockMenu":"false","allowTempTheme":"true","dateFormat":"DD/MM/YYYY","sizes":{"sx":48,"sy":48,"gx":6,"gy":6,"cx":6,"cy":6,"px":0,"py":0}}},{"id":"5dd70977ae98a553","type":"ui_group","name":"Default","tab":"7e602b47fa0cd2bd","order":1,"disp":true,"width":"18","collapse":false,"className":""},{"id":"3cc11d24.ff01a2","type":"comment","z":"f6f2187d.f17ca8","name":"WARNING: please check you have started this container with a volume that is mounted to /data\\n otherwise any flow changes are lost when you redeploy or upgrade the container\\n (e.g. upgrade to a more recent node-red docker image).\\n If you are using named volumes you can ignore this warning.\\n Double click or see info side panel to learn how to start Node-RED in Docker to save your work","info":"\nTo start docker with a bind mount volume (-v option), for example:\n\n```\ndocker run -it -p 1880:1880 -v /home/user/node_red_data:/data --name mynodered nodered/node-red\n```\n\nwhere `/home/user/node_red_data` is a directory on your host machine where you want to store your flows.\n\nIf you do not do this then you can experiment and redploy flows, but if you restart or upgrade the container the flows will be disconnected and lost. \n\nThey will still exist in a hidden data volume, which can be recovered using standard docker techniques, but that is much more complex than just starting with a named volume as described above.","x":350,"y":80,"wires":[]},{"id":"28c7c63215809253","type":"ui_svg_graphics","z":"f6f2187d.f17ca8","group":"5dd70977ae98a553","order":0,"width":0,"height":0,"svgString":"<svg x=\"0\" y=\"0\" height=\"100%\" viewBox=\"18.578828811645508 22.649887084960938 26.461881637573242 23.501110076904297\" width=\"100%\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" preserveAspectRatio=\"xMinYMin meet\"><rect id=\"svgEditorBackground\" x=\"0\" y=\"0\" width=\"100\" height=\"100\" style=\"fill:none;stroke:none\"/><defs id=\"svgEditorDefs\"><symbol id=\"1f60a\" viewBox=\"0 0 64 64\" preserveAspectRatio=\"xMidYMid meet\"><rect x=\"0\" y=\"0\" width=\"64\" height=\"64\" style=\"stroke:none;fill:none;\"/><g xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"32\" cy=\"32\" fill=\"#ffdd67\" r=\"30\"/><g fill=\"#ff717f\"><circle cx=\"50.811\" cy=\"36\" opacity=\".8\" r=\"8\"/><circle cx=\"13.189\" cy=\"36\" opacity=\".8\" r=\"8\"/></g><g fill=\"#664e27\"><path d=\"m17.316 40.949c2.475 1.457 4.865 2.34 7.314 2.926 2.439.584 4.9.834 7.371.84 2.469-.012 4.928-.26 7.367-.846 2.447-.588 4.838-1.467 7.314-2.92-1.061 2.717-3.416 4.854-6.04 6.221-2.652 1.381-5.662 2.043-8.641 2.043-2.977-.006-5.984-.668-8.637-2.049-2.623-1.367-4.978-3.502-6.04-6.215\"/><path d=\"m27.59 26.648c-3.264-6.197-12.653-6.197-15.917 0-.195.378.32.921.95 1.353 4.135-3.271 9.88-3.271 14.01-.001.631-.431 1.145-.974.952-1.352\"/><path d=\"m52.33 26.648c-3.264-6.197-12.653-6.197-15.917-.001-.195.379.32.922.951 1.353 4.135-3.271 9.879-3.271 14.01-.001.631-.431 1.146-.973.952-1.351\"/></g></g></symbol></defs>\n<!-- Add here your SVG shapes (circles, rectangles, ...) -->\n<!-- Or remove everything, if you want to paste an entire drawing (<svg...>...</svg>).-->\n<use xlink:href=\"#1f60a\" x=\"23.39\" y=\"26.166\" width=\"15.914\" height=\"15.914\" id=\"e1_emoji\" style=\"fill:rosybrown;\"/></svg>","clickableShapes":[],"javascriptHandlers":[],"smilAnimations":[],"bindings":[],"showCoordinates":false,"autoFormatAfterEdit":false,"showBrowserErrors":false,"showBrowserEvents":false,"enableJsDebugging":false,"sendMsgWhenLoaded":false,"noClickWhenDblClick":false,"outputField":"payload","editorUrl":"//drawsvg.org/drawsvg.html","directory":"","panning":"disabled","zooming":"disabled","panOnlyWhenZoomed":false,"doubleClickZoomEnabled":false,"mouseWheelZoomEnabled":false,"dblClickZoomPercentage":150,"cssString":"div.ui-svg svg{\n color: var(--nr-dashboard-widgetColor);\n fill: currentColor !important;\n}\ndiv.ui-svg path {\n fill: inherit;\n}","name":"","x":380,"y":240,"wires":[[]]}]
Out of topic: How to I make those nicely integrated videos that appear in some topics?
Is this your real design target? That emoticon doesn't need to be drawn with very complex svg graphics node.
The svg itself can be aligned however you want but the emoticon inside is drawn in relation of that svg boundaries. To manipulate elements inside svg with CSS that is long learning curve to take and even then the svg and drawn elements must be done in the way to support such manipulations.
SVG is first option to draw things when HTML and CSS is not enough. But for sure it is much more complex than just "hey, I want it to be centered"
Hi @hotNipi , I just posted a simple example of the problem. This is not my real goal. I have a complex SVG drawing with animations and updates.
From my understanding, the group box is fixing its length. So far, so good.
The problem, from my understanding, is that SVG UI inside the group gets left-aligned. The SVG itself has a fixed sized. I just need to know how to edit the css of the node. In nodered case, this should be true for any node, correct?
In fact, there is a place to edit css, however, I'm missing the correct parameters.
Then add for CSS inside the svg graphics node editor
div.ui-svg{
display:flex;
justify-content: center;
align-items: center;
}
1 Like
CSS is not really my specialism...
The 2 other guys that are already helping you in this discussion, know waaaay lot more about that 
2 Likes
Hi @hotNipi , I'm doing something wrong. I couldn't make it work. Also, using developer tools of chrome, I have no success.
Were you able to center it?
Define the "it" . The provided example centers the SVG inside container the node forces your drawing to be in it. It has no relationship with the content inside SVG.
Sorry, it was the emoji.
I noticed that SVG object is interpreted as 100% width and 100% height. The center alignment is not visible, since SVG sees no room to move. Is my interpretation correct?
And CSS
div.ui-svg svg{
color: var(--nr-dashboard-widgetColor);
fill: currentColor !important;
}
div.ui-svg path {
fill: inherit;
}
div.ui-svg{
display:flex;
justify-content: center;
align-items: center;
}
2 Likes
Hi @hotNipi , despite of my best efforts, I think I need to study a little bit more. I've made a SVG with inkscape with a lot of positions and sizes. Despite of my best effort, I wasn't able to center it. But, for the record, you help pointed me a direction for further readings. Thank you!
Using the SVG node makes things really complicated. Even if the SVG size/position related things are different and a bit more complicated compared to regular HTML CSS stuff, this node puts your SVG into another and that is complexity squared. Low code loses it's meaning if such amount of struggling comes in as side effect.
I'd make my SVG ready in a good editor and then probably try to move/manipulate things with plain JavaScript and CSS. All that can be done with ui_template node.
Your opinion is very valueable to me! So very sorry to hear that this is the summary of the current status of the ui node. I have spend a ridiculous amount a free time to achieve the complete opposite of what you describe...
Can you describe a bit more what you mean by "into another"? Not that I will ever have time/energy again to make large changes for this node, but might be usefull in case somebody else ever wants to do it.
