Animation - Not working

Talkatoo · 29 December 2022 10:16

Hi Node-Red,

I am new to Node-Red and I am working on creating a dashboard to control the hydraulic system.
I created an animation for a hydraulic cylinder and it works perfectly when it is placed in a stand alone svg image, like this,

I created a hydraulic circuit diagram by incorporating various svg images, like this,

After incorporating hydraulic cylinder into my circuit diagram , animation is not working. I am getting this error.

msg : string[93]
"Invalid selector. No SVG elements found for selector #head-1(msg._msgid = '1d2f4a347810eb82')"
29/12/2022, 3:28:36 pmnode: djsvg
msg : string[93]
"Invalid selector. No SVG elements found for selector #tail-1(msg._msgid = '1d2f4a347810eb82')"
29/12/2022, 3:28:37 pmnode: djsvg
msg : string[93]
"Invalid selector. No SVG elements found for selector #head-2(msg._msgid = '1d2f4a347810eb82')"
29/12/2022, 3:28:38 pmnode: djsvg
msg : string[93]
"Invalid selector. No SVG elements found for selector #tail-2(msg._msgid = '1d2f4a347810eb82')"

My observation,
1.If I enter target-id's name as animation id . Not getting any errors and animation is not working.
2. If I enter a different name for animation id other than target id,I am getting an error and the animation is not working.

Please provide your comment

BartButenaers · 29 December 2022 10:57

Hi @Talkatoo,
I assume you use the node-red-contrib-ui-svg node for this? If so, please share a simplified flow (only including the Inject node and an svg node) here, then I will have a look.
Bart

Talkatoo · 2 January 2023 06:13

Hi @BartButenaers ,

Thanks for your response...
Sorry for delayed reply.

Actually, my code size exceeded the allowed limit in the node-red forum. So I am able to share the code and getting error here ,

FYR, I have share my code here Paste.ee - code flow . Please view it.

BartButenaers · 2 January 2023 22:52

@Talkatoo,
The injected message is quite large, and I get a large series of errors when injecting it into the SVG node. I thought your question was about an animation? But not sure anymore, because your flow contains lots of errors.

It would be best if you fix all the issues in your flow, share the flow again and explain a bit more in detail what still doesn't work.

About fixing the flow, I will give an example of one (of the many) errors I get:

You inject this:
But since there is no element in your svg with id="bp1:

image721×152 12.1 KB
So you get this error:

Talkatoo · 3 January 2023 06:28

@BartButenaers ,,

Actually, SVG Editor appending some extra character to my object ID. When I creating new pipe, I have edited/added name as bp-1 for my pipes using Abode Illustrator.

But I am observing bp-1-4 in SVG Editor.

I don't know how extra character is appended.

As of now, I removed the extra character in object ID. I am not seeing issue. Still, my node-red inject node is not able to locate the animation ID. I am getting error like this.

FYR, new updated code Paste.ee - code flow 1

I have created animation for my hydraulic cylinder using node-red Flow.

[
    {
        "id": "7b5dc595967afb31",
        "type": "debug",
        "z": "dd6662b64540bd5f",
        "name": "debug 3",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "true",
        "targetType": "full",
        "statusVal": "",
        "statusType": "auto",
        "x": 420,
        "y": 640,
        "wires": []
    },
    {
        "id": "460b749017bbec94",
        "type": "ui_svg_graphics",
        "z": "dd6662b64540bd5f",
        "group": "5dd24274.e5a58c",
        "order": 2,
        "width": "24",
        "height": "14",
        "svgString": "<svg xmlns:osb=\"http://www.openswatchbook.org/uri/2009/osb\" xmlns:dc=\"http://purl.org/dc/elements/1.1/\" xmlns:cc=\"http://creativecommons.org/ns#\" xmlns:rdf=\"http://www.w3.org/1999/02/22-rdf-syntax-ns#\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:sodipodi=\"http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd\" xmlns:inkscape=\"http://www.inkscape.org/namespaces/inkscape\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" version=\"1.1\" id=\"Layer_1\" x=\"0px\" y=\"0px\" viewBox=\"0 0 595.280029296875 841.8900146484375\" style=\"enable-background:new 0 0 595.28 841.89;\" xml:space=\"preserve\" sodipodi:docname=\"vector_cylinder2.svg\" inkscape:version=\"0.92.1 r15371\" width=\"100%\" height=\"100%\" preserveAspectRatio=\"xMidYMid meet\">\n  <rect id=\"svgEditorBackground\" x=\"0\" y=\"0\" width=\"595.280029296875\" height=\"841.8900146484375\" style=\"fill:none;stroke:none;\" />\n  <metadata id=\"metadata19\">\n    <rdf:RDF>\n      <cc:Work rdf:about=\"\">\n        <dc:format>image/svg+xml</dc:format>\n        <dc:type rdf:resource=\"http://purl.org/dc/dcmitype/StillImage\" />\n      </cc:Work>\n    </rdf:RDF>\n  </metadata>\n  <defs id=\"defs17\">\n    <linearGradient id=\"linearGradient936\" osb:paint=\"solid\">\n      <stop style=\"stop-color:#8d3092;stop-opacity:1;\" offset=\"0\" id=\"stop934\" />\n    </linearGradient>\n  </defs>\n  <sodipodi:namedview pagecolor=\"#ffffff\" bordercolor=\"#666666\" borderopacity=\"1\" objecttolerance=\"10\" gridtolerance=\"10\" guidetolerance=\"10\" inkscape:pageopacity=\"0\" inkscape:pageshadow=\"2\" inkscape:window-width=\"1366\" inkscape:window-height=\"705\" id=\"namedview15\" showgrid=\"false\" inkscape:zoom=\"0.28032165\" inkscape:cx=\"-282.0512\" inkscape:cy=\"420.94501\" inkscape:window-x=\"-8\" inkscape:window-y=\"-8\" inkscape:window-maximized=\"1\" inkscape:current-layer=\"g12\" />\n  <style type=\"text/css\" id=\"style2\">\n    .st0\n    {}\n\n    .st1\n    {\n      fill: #414042;\n    }\n  </style>\n  <g id=\"g12\" transform=\"matrix(3.299456,0,0,2.1672893,-617.67818,-416.58455)\">\n    <path id=\"piston-head\" class=\"st0\" d=\"m326.19,338.11h-74.76v-19.66h74.76v19.66m4.79,3.96V314.5h-84.34v27.57Z\" inkscape:connector-curvature=\"0\" style=\"fill-opacity: 1;\" fill=\"#963092\" />\n    <path id=\"piston-tail\" class=\"st0\" d=\"M298.47,502.67H282.04V342.55h16.43v160.12m4.79,3.95V338.6h-26.01v168.03h26.01Z\" inkscape:connector-curvature=\"0\" style=\"fill-opacity: 1;\" fill=\"#963092\" />\n    <polygon class=\"st1\" points=\"240.72,470.15 273.38,470.15 273.38,466.24 245.45,466.24 245.45,284.39 332.15,284.39 332.15,466.24 307.12,466.24 307.12,470.15 336.88,470.15 336.88,280.48 240.72,280.48 \" id=\"polygon6\" style=\"fill:#414042\" />\n    <rect x=\"223.39999\" y=\"441.09\" transform=\"rotate(90,225.8111,455.6814)\" class=\"st1\" width=\"4.8200002\" height=\"29.18\" id=\"rect8\" style=\"fill:#414042\" />\n    <rect x=\"223.39999\" y=\"280.25\" transform=\"rotate(90,225.81105,294.83715)\" class=\"st1\" width=\"4.8200002\" height=\"29.18\" id=\"rect10\" style=\"fill:#414042\" />\n  </g>\n</svg>",
        "clickableShapes": [],
        "javascriptHandlers": [],
        "smilAnimations": [
            {
                "id": "move_head",
                "targetId": "piston-head",
                "classValue": "",
                "attributeName": "transform",
                "transformType": "translate",
                "fromValue": "0,2",
                "toValue": "0,50",
                "trigger": "msg",
                "duration": "7",
                "durationUnit": "s",
                "repeatCount": "1",
                "end": "restore",
                "delay": "1",
                "delayUnit": "s",
                "custom": ""
            },
            {
                "id": "move_tail",
                "targetId": "piston-tail",
                "classValue": "",
                "attributeName": "transform",
                "transformType": "translate",
                "fromValue": "0,0",
                "toValue": "0,50",
                "trigger": "msg",
                "duration": "7",
                "durationUnit": "s",
                "repeatCount": "1",
                "end": "restore",
                "delay": "1",
                "delayUnit": "s",
                "custom": ""
            }
        ],
        "bindings": [],
        "showCoordinates": false,
        "autoFormatAfterEdit": true,
        "showBrowserErrors": true,
        "showBrowserEvents": false,
        "enableJsDebugging": true,
        "sendMsgWhenLoaded": false,
        "noClickWhenDblClick": false,
        "outputField": "payload",
        "editorUrl": "http://127.0.0.1:1880/drawsvg_local/edrawsvg.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;\n}\ndiv.ui-svg path {\n    fill: inherit;\n}",
        "name": "",
        "x": 440,
        "y": 560,
        "wires": [
            []
        ]
    },
    {
        "id": "0b767bc1d6f02a33",
        "type": "ui_button",
        "z": "dd6662b64540bd5f",
        "name": "",
        "group": "5dd24274.e5a58c",
        "order": 3,
        "width": 0,
        "height": 0,
        "passthru": false,
        "label": "Start Cylinder",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "",
        "payload": "[{\"command\":\"update_style\",\"selector\":\"#piston\",\"attributeName\":\"fill\",\"attributeValue\":\"#3AF000\"},{\"command\":\"trigger_animation\",\"selector\":\"#move_head\",\"action\":\"start\"},{\"command\":\"trigger_animation\",\"selector\":\"#move_tail\",\"action\":\"start\"}]",
        "payloadType": "json",
        "topic": "topic",
        "topicType": "msg",
        "x": 80,
        "y": 560,
        "wires": [
            [
                "460b749017bbec94"
            ]
        ]
    },
    {
        "id": "ee8c8551ac7b51f7",
        "type": "inject",
        "z": "dd6662b64540bd5f",
        "name": "Trigger the cylinder ",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "[{\"command\":\"update_style\",\"selector\":\"#piston-head\",\"attributeName\":\"fill\",\"attributeValue\":\"#3AF000\"},{\"command\":\"update_style\",\"selector\":\"#piston-tail\",\"attributeName\":\"fill\",\"attributeValue\":\"#3AF000\"},{\"command\":\"trigger_animation\",\"selector\":\"#move_head\",\"action\":\"start\"},{\"command\":\"trigger_animation\",\"selector\":\"#move_tail\",\"action\":\"start\"},{\"command\":\"trigger_animation\",\"selector\":\"#move_head\",\"action\":\"start\"}]",
        "payloadType": "json",
        "x": 110,
        "y": 640,
        "wires": [
            [
                "460b749017bbec94",
                "7b5dc595967afb31"
            ]
        ]
    },
    {
        "id": "5dd24274.e5a58c",
        "type": "ui_group",
        "name": "dj_dashboard_group",
        "tab": "c07e0049.90e8a",
        "order": 1,
        "disp": true,
        "width": "24",
        "collapse": false,
        "className": ""
    },
    {
        "id": "c07e0049.90e8a",
        "type": "ui_tab",
        "name": "dj_sample",
        "icon": "dashboard",
        "order": 19,
        "disabled": false,
        "hidden": false
    }
]

Animation is working perfectly in above svg code/image. When I included this svg image in my main wire diagram, animation is not working.

BartButenaers · 3 January 2023 20:26

Yes indeed your animation works fine when I click the inject node, because there you are using the correct id's:

However when I click on the "Start cylinder" button in the dashboard, then I get again:
"Invalid selector. No SVG elements found for selector #piston"
The reason is because in the Button-node you use the incorrect id again:

Well I have no idea how the extra characters get there. But you can do all kind of nice stuff with the CSS selectors, that the SVG node uses to select elements.

For example when you google for "css selector id starts with" then you would find that the CSS selector [id^=piston] means "select all elements whose id starts with piston".

As a result instead of specifying the id of each part of your piston separately:

[  {
      "command": "update_style",
      "selector": "#piston-head",
      "attributeName": "fill",
      "attributeValue": "#3AF000"
  },
    {
        "command": "update_style",
        "selector": "#piston-tail",
        "attributeName": "fill",
        "attributeValue": "#3AF000"
    }
]

You can also execute this command on all elements of your piston:

    {
        "command": "update_style",
        "selector": "[id^=piston]",
        "attributeName": "fill",
        "attributeValue": "#3AF000"
    }

Then your animation still works, but your input messages will be easier to manage:

piston_demo

And it also doesn't matter if there some unexpected number added to your id's. You can simply ignore it in your CSS selector...

Unfortunately your link contains only your svg, and not your exported flow. So I cannot test that.

Talkatoo · 4 January 2023 05:33

Sorry, I mistakenly included the svg file instead of flow. I have shared the correct flow here, Paste.ee - code flow 2

I can't move the arrow in the SVG image to show the direction of fluid.

Please view it and provide your comments.

BartButenaers · 5 January 2023 06:25

Well it would have helped if you had provided a "minimal" not-working flow, because I have not enough time to analyze for everybody what is going wrong their complete flow...

So I haven't looked through your entire flow to see which arrow your are referring to, but I assume you mean this animation in your injected message?

I can only repeat what I said already above. When I search in your SVG for this id, it doesn't exist:

So it wouldn't be able to find that element...

Talkatoo · 5 January 2023 07:01

@BartButenaers ..

Actually move-head-2 is my animation ID and svg id is piston-head-2. I dont' know why my flow is not able to locate the svg object ID for mentioned animation id (in Animatetab). Once I add the animation ID will it be reflected in SVG code (which is embedded in node-red) ?.

I am expecting when I refer move-head-2 in my code flow, node red will automatically point piston-head-2.. Please correct me if my assumption are wrong.

FYI, if I mention object ID(Target Element Id) name to Animation ID, I am not getting any error, but animation is not happening.

Animation is working when it is a stand alone svg image. After incorporating(stand alone svg image) in to my main hydraulic circuit diagram (SVGimage), Hydraulic Cylinder's animation is not working. I don't know why flow is able to fetch the animation ID.

Talkatoo · 8 January 2023 14:08

@BartButenaers and Node-Red forum..sorry to disturb you. As I am new to node-red, JS and SVG concepts. I am working to fix the issue. Please provide your comments, it will be helpful in my development activity.

BartButenaers · 8 January 2023 20:01

@Talkatoo,

Seems that you have hit a bug. This is what happens:

You have an empty Javascript eventhandler added:
In the frontend code, the querySelectorAll function will be called with that empty selector:
Seems that - instead of returning no elements - the function fails with an exception, as you can see in the browser console log:

image816×93 7.48 KB
As a result the next code statements won't be executed anymore. Which means your animations (which you had added via the config screen), won't be added to your SVG drawing.
As a result, you cannot find your animation via your selector:
So your animation won't start.

When I remove that empty Javascript event handler, then your animation starts:

animation_bug

Seems it is going into the wrong direction, but I will leave that up to you.

BartButenaers · 8 January 2023 20:02

BTW that is a really nice drawing. It would be nice if you could share how you created something like that. Because I think this might be interesting for other community members...

Talkatoo · 9 January 2023 14:38

@BartButenaers .. Thanks you very much for help and technicial input. ..

Following are steps involved in developing hydraulic drawings,

Actually, I downloaded images from Freepik (which has .eps format).
I am using Adobe illustrator to edit the downloaded image, rename the path ID and save it as an SVG image.
I incorporated all my images in Inkscape and developed hydraulic wire diagram.
For node-red implementation, I followed old issues discussed in this forum.

I am facing these issues.
1.I am observing my circuit diagram and some images are obscured (in Browser). Why is it ?
2. In my hydraulic animation, once the piston reaches ends,it abruptly comes back to starting place instead of slowly(they way went down).

BartButenaers · 9 January 2023 19:32

Can you explain that a bit more?

I assume you can use a combination of the values and corresponding keyTimes, to say which value you want at which moment (like in this example). But perhaps you can do it another way. I haven't used animations myself, but there are a huge number of tutorials/videos available on the web.

Talkatoo · 12 January 2023 14:00

@BartButenaers , Sorry for late reply.
My actual svg image look like this,

In node-red output, color quality is decreased and clear, like this,

smcgann99 · 12 January 2023 18:22

check the opacity of the affected objects, also perhaps the layer and move them to the top if something is above them ?

BartButenaers · 12 January 2023 20:08

I think that @smcgann99 is right...

Right click on one of the SGV shapes that have a bad color in the dashboard:

image572×538 25.8 KB
You can see that your shape is an SVG path (highlighted in light blue), and in the right "Style" tab you can see that it has the correct orange fill color that you want:

image1309×427 53.3 KB

That color has overruled the other colors that you can find as strikethrough further below in that panel.
When I manually add an opacity attribute, the correct color indeed appears in your drawing:

Not sure what could case this. So everybody is welcome to provide tips!

Talkatoo · 19 January 2023 13:11

@BartButenaers and @smcgann99 , thanks for the info ..

I have added opactiy in CSS file itself.
After adding code like this (in settings ->.CSS ), I am observing that my hydraulic diagram glowing with actual color,

    color: var(--nr-dashboard-widgetColor);
    fill: currentColor ;
    opacity: initial;
}
div.ui-svg path {
    fill: inherit;
  opacity: initial;
}

BartButenaers · 20 January 2023 13:50

Thanks for sharing your workaround!
And glad that it now works...

system · 21 March 2023 13:50

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

Topic		Replies	Views
Animation - Color is not getting changed Dashboard	5	258	28 January 2023
Issues with triggering animations in SVG UI Dashboard	3	227	16 August 2023
Node-red-contrib-ui-svg example flow not working properly General	4	720	19 July 2020
Animation SVG object by node-red-contrib-ui-svg General node-red-dashboard	5	388	16 September 2023
How can i make animation hmi scada with node red (i couldn't find any video that goes step by step ) Dashboard node-red-dashboard	2	756	12 May 2022

Animation - Not working

Related topics