Animation - Color is not getting changed

Dashboard
1

Hi NodeRed Forum

I am new to Node Red. I am working to created IoT dashboard for my Industrial hydraulic automation project. I can able to crate animation for Vector image of hydraulic component but not able to change the color. I can able to change the color other images (non vector). I have attached my flow. Please provide your comments.


[
    {
        "id": "58038597d7719603",
        "type": "debug",
        "z": "b10e8e66316915cc",
        "name": "debug 3",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "true",
        "targetType": "full",
        "statusVal": "",
        "statusType": "auto",
        "x": 560,
        "y": 560,
        "wires": []
    },
    {
        "id": "795769ff.1d2ab8",
        "type": "ui_svg_graphics",
        "z": "b10e8e66316915cc",
        "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 !important;\n}\ndiv.ui-svg path {\n    fill: inherit !important;\n}",
        "name": "",
        "x": 480,
        "y": 480,
        "wires": [
            []
        ]
    },
    {
        "id": "e222a371ae6a4486",
        "type": "inject",
        "z": "b10e8e66316915cc",
        "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": 370,
        "y": 560,
        "wires": [
            [
                "795769ff.1d2ab8",
                "58038597d7719603"
            ]
        ]
    },
    {
        "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
    }
]
2

You have some pretty strong CSS rules included to the node.

image
image826×734 30.5 KB

Or you can just remove the !important flag from those rules.

3

@hotNipi , Thanks for the info. ..After implementing your changes, I will be able to change the color. But once the piston reaches the end point , it moves to the starting point abruptly, instead of the way it moved towards the down side.

For some of the images, I am not able to change color and do animation. I need to move / animate the arrow abase on fluid direction in hydraulic.,

[
    {
        "id": "62b65f20a8a16e04",
        "type": "inject",
        "z": "b10e8e66316915cc",
        "name": "Start the Pump",
        "props": [
            {
                "p": "payload"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "[{\"command\":\"update_style\",\"elementId\":\"arrow1\",\"attributeName\":\"fill\",\"attributeValue\":\"#FF0000\"},{\"command\":\"trigger_animation\",\"selector\":\"#move_arrow1\",\"action\":\"start\"}]",
        "payloadType": "json",
        "x": 180,
        "y": 680,
        "wires": [
            [
                "b258a00e159d1106"
            ]
        ]
    },
    {
        "id": "b258a00e159d1106",
        "type": "ui_svg_graphics",
        "z": "b10e8e66316915cc",
        "group": "5dd24274.e5a58c",
        "order": 2,
        "width": "24",
        "height": "14",
        "svgString": "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" version=\"1.1\" baseProfile=\"basic\" id=\"Layer_1\" x=\"0px\" y=\"0px\" viewBox=\"0 0 595.280029296875 841.8900146484375\" xml:space=\"preserve\" 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  <style type=\"text/css\">\n    .st0\n    {}\n\n    #arrow1\n    {}\n  </style>\n  <polygon id=\"arrow1\" class=\"st0\" points=\"463.35,443.86 337.87,341.71 337.87,395.29 131.92,395.29 131.92,492.42 337.87,492.42   337.87,546 \" style=\"\" fill=\"#231F20\" />\n</svg>",
        "clickableShapes": [],
        "javascriptHandlers": [],
        "smilAnimations": [
            {
                "id": "move_arrow1",
                "targetId": "Layer_1",
                "classValue": "",
                "attributeName": "transform",
                "transformType": "rotate",
                "fromValue": "0,0",
                "toValue": "5,0",
                "trigger": "msg",
                "duration": "1",
                "durationUnit": "s",
                "repeatCount": "0",
                "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    \n}\ndiv.ui-svg path {\n    fill: inherit;\n   \n}",
        "name": "",
        "x": 400,
        "y": 680,
        "wires": [
            []
        ]
    },
    {
        "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
    }
]
4

This is out of my knowledge base. Having not much time to deep dive into it just can't help.

5

@hotNipi Thanks for your help

6

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