How to make blinked SVG object for attention?

Hi all

I have pedestrian icon SVG object. I would make a blinked attention image. I tired this ineffective code. What is my fault.

Best regards

[{"id":"43340326.b8e7dc","type":"tab","label":"Flow 1","disabled":false,"info":""},{"id":"901a33ed.b55c2","type":"ui_svg_graphics","z":"43340326.b8e7dc","group":"ea0c6216.9052c","order":1,"width":"0","height":"0","svgString":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" version=\"1.0\" width=\"869pt\" height=\"1280pt\" viewBox=\"0 0 869.000000 1280.000000\" preserveAspectRatio=\"xMidYMid meet\"><rect id=\"svgEditorBackground\" x=\"0\" y=\"0\" width=\"869\" height=\"1280\" style=\"fill:none;stroke:none;\"/>\n<metadata>\nCreated by potrace 1.15, written by Peter Selinger 2001-2017\n</metadata>\n<g transform=\"translate(0.000000,1280.000000) scale(0.100000,-0.100000)\" fill=\"msg.payload\" stroke=\"none\" selector=\"#whead\">\n<path d=\"M4440 12794 c-14 -2 -59 -9 -100 -15 -88 -13 -259 -68 -344 -111 -279 -141 -496 -384 -598 -668 -58 -160 -82 -389 -59 -551 96 -661 721 -1115 1399 -1015 602 89 1042 585 1042 1175 0 641 -524 1165 -1185 1186 -71 2 -141 2 -155 -1z\" id=\"whead\"/>\n<path d=\"M4300 10199 c-157 -26 -310 -76 -458 -152 -122 -62 -2553 -1739 -2605 -1797 -71 -79 -94 -135 -162 -392 -35 -134 -114 -434 -175 -668 -61 -234 -145 -551 -185 -705 -132 -502 -128 -482 -122 -569 19 -290 352 -497 676 -421 108 26 188 71 272 155 97 96 116 138 185 403 30 117 77 298 104 402 27 105 106 408 174 674 69 267 131 490 138 497 24 22 831 574 835 570 2 -2 -188 -725 -422 -1607 -545 -2052 -764 -2878 -825 -3108 -27 -101 -57 -195 -66 -210 -10 -14 -354 -506 -766 -1093 -411 -587 -766 -1095 -787 -1128 -57 -87 -101 -218 -108 -315 -11 -175 56 -344 191 -480 168 -170 370 -249 631 -249 160 0 276 26 398 88 111 57 181 110 256 193 74 83 1704 2417 1811 2593 87 144 50 18 326 1102 l167 658 46 -43 c25 -23 420 -390 877 -814 773 -718 832 -775 842 -815 6 -24 131 -578 277 -1233 147 -655 277 -1215 290 -1246 88 -218 295 -391 550 -460 119 -33 335 -33 460 0 175 45 312 125 425 248 111 121 177 304 167 459 -5 75 -576 2652 -607 2741 -10 30 -31 76 -46 101 -17 30 -418 439 -1108 1130 -704 705 -1080 1089 -1079 1101 3 24 531 2001 542 2026 6 16 29 -17 124 -178 65 -108 170 -286 234 -394 84 -143 132 -213 172 -253 46 -45 217 -149 971 -590 503 -294 944 -546 980 -561 229 -93 478 -53 645 103 187 174 191 434 11 611 -52 52 -182 131 -909 556 l-849 496 -613 1035 c-591 997 -617 1038 -700 1128 -201 214 -474 361 -755 407 -104 16 -339 19 -430 4z\" id=\"wbody\"/>\n</g>\n</svg>","clickableShapes":[],"smilAnimations":[],"bindings":[],"showCoordinates":false,"autoFormatAfterEdit":false,"outputField":"payload","editorUrl":"http://drawsvg.org/drawsvg.html","directory":"","name":"","x":840,"y":180,"wires":[[]]},{"id":"4ef3f73c.6c6888","type":"function","z":"43340326.b8e7dc","name":"","func":"msg.payload = {\n    \"update_style\": \"true\",\n    \"command\": \"update_style\",\n    \"selector\": \"#whead, #wbody\",\n    \"attributeName\":\"fill\",\n    \"attributeValue\":\"green\"\n}\nreturn msg;","outputs":1,"noerr":0,"x":510,"y":180,"wires":[["901a33ed.b55c2","f0cf6c5c.5cc06"]]},{"id":"f0cf6c5c.5cc06","type":"debug","z":"43340326.b8e7dc","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":710,"y":340,"wires":[]},{"id":"3b37910a.db72fe","type":"trigger","z":"43340326.b8e7dc","op1":"false","op2":"true","op1type":"bool","op2type":"bool","duration":"400","extend":false,"units":"ms","reset":"true","bytopic":"all","name":"","x":320,"y":180,"wires":[["4ef3f73c.6c6888","43535112.14401"]]},{"id":"43535112.14401","type":"function","z":"43340326.b8e7dc","name":"","func":"msg.payload = {\n    \"update_style\": \"false\",\n    \"command\": \"update_style\",\n    \"selector\": \"#whead, #wbody\",\n    \"attributeName\":\"fill\",\n    \"attributeValue\":\"gray\"\n}\nreturn msg;","outputs":1,"noerr":0,"x":510,"y":260,"wires":[["901a33ed.b55c2"]]},{"id":"35e4049b.cc0d3c","type":"inject","z":"43340326.b8e7dc","name":"","topic":"","payload":"true","payloadType":"bool","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":130,"y":140,"wires":[["3b37910a.db72fe"]]},{"id":"f3b67b87.00fed8","type":"inject","z":"43340326.b8e7dc","name":"","topic":"","payload":"false","payloadType":"bool","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":130,"y":240,"wires":[["3b37910a.db72fe"]]},{"id":"ea0c6216.9052c","type":"ui_group","z":"","name":"BLINK_TEST","tab":"426cb14d.4527e","order":1,"disp":true,"width":"6","collapse":false},{"id":"426cb14d.4527e","type":"ui_tab","z":"","name":"TEST","icon":"dashboard","order":6,"disabled":false,"hidden":false}]

Here is one way to do it.

set the 'true' inject to

  • inject once after .01 seconds
  • repeat "interval' every 2 seconds
    and connect it directly to the 'true' function node

set the 'false' inject to

  • inject once after 1 seconds
  • repeat "interval' every 2 seconds
    and connect it directly to the 'false' function node

get rid of the trigger node

Hi. I haven't loaded your code. Are you using the ui-svg node?

If so, then you can add an animation that animates colour or animates visibility then simply trigger the animation when required.

Read the help on the sidebar and the more extensive help on the Repositorys' home page.

1 Like

Solved. Thnks

Yes i have using svg-node.

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