Closed smcgann99 closed 4 years ago
Hi,
It seems that the SVG is incomplete (it starts with
Is this any help to see what I'm doing ?
[{"id":"1add694f.e89217","type":"tab","label":"Flow 2","disabled":false,"info":""},{"id":"47d96b9.8687594","type":"ui_svg_graphics","z":"1add694f.e89217","group":"d06516d3.15555","order":23,"width":"12","height":"12","svgString":"<svg x=\"0\" y=\"0\" height=\"100\" viewBox=\"0 0 100 100\" width=\"100\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:svg=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n <rect id=\"svgEditorBackground\" x=\"0\" y=\"0\" width=\"100\" height=\"100\" style=\"fill:none; stroke: none;\"/>\n <g id=\"g_fan\" transform=\"matrix(6.27128, 0.0294742, -0.0294742, 6.27128, -191.716, -159.136)\"><svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"6.87419\" height=\"6.87419\" viewBox=\"0 0 360 464\" preserveAspectRatio=\"xMidYMid meet\" id=\"e1_fan\" x=\"33.623\" y=\"27.2676\">\n <g transform=\"translate(0.000000,464.000000) scale(0.100000,-0.100000)\" fill=\"#000000\" stroke=\"none\">\n <path d=\"M1636,4629c-826,-73,-1504,-718,-1621,-1542c-19,-133,-19,-385,0,-512c43,-284,150,-551,315,-787c77,-109,283,-321,390,-400c173,-127,360,-221,562,-282c88,-26,114,-38,116,-52c1,-11,-19,-136,-46,-279l-47,-260l-300,-5c-285,-5,-302,-6,-341,-27c-58,-31,-103,-79,-130,-138c-21,-44,-24,-65,-24,-177c0,-125,0,-127,26,-147c27,-21,27,-21,1266,-21l1240,0l30,30l30,31l-4,117c-5,135,-22,186,-85,249c-77,77,-81,78,-418,81l-300,3l-51,280l-50,279l41,11c657,172,1154,671,1314,1319c39,161,51,260,51,438c0,938,-713,1710,-1655,1791c-135,12,-168,12,-309,0ZM2130,4317c534,-127,939,-494,1110,-1006c59,-174,74,-276,74,-481c0,-188,-12,-280,-60,-438c-164,-544,-634,-959,-1199,-1058c-135,-23,-375,-23,-510,0c-566,99,-1035,514,-1200,1061c-48,160,-60,247,-59,445c1,150,5,204,22,286c31,146,65,244,131,379c195,398,557,691,987,801c150,38,206,43,409,39c160,-3,207,-7,295,-28Z\"/>\n <path d=\"M1714,4162c-78,-27,-148,-77,-225,-161c-113,-122,-179,-281,-179,-431c0,-113,48,-263,110,-347l27,-36l-43,-59c-23,-32,-45,-67,-49,-77c-5,-17,-33,-7,-258,92c-242,106,-255,111,-322,111c-86,0,-143,-24,-208,-90c-123,-126,-150,-326,-65,-485c60,-114,233,-256,367,-304c161,-56,373,-30,521,65l60,40l46,-36c26,-19,59,-41,75,-49l28,-15l-96,-217c-123,-283,-125,-287,-125,-361c1,-153,129,-280,315,-312c85,-15,168,-2,253,40c87,43,227,190,276,291c39,78,68,197,68,274c0,109,-45,252,-108,344l-30,45l33,40c18,23,40,56,49,74c10,19,23,32,29,29c7,-3,118,-51,247,-108c234,-104,235,-104,315,-104c97,0,156,26,216,94c113,128,139,314,64,466c-58,119,-225,262,-368,314c-63,22,-88,26,-197,26c-144,0,-211,-18,-324,-86l-67,-40l-35,26c-19,15,-52,37,-74,49l-39,22l106,239c96,219,105,247,110,316c5,67,2,84,-19,130c-59,128,-200,209,-362,209c-41,-1,-92,-8,-122,-18ZM1921,3005c82,-58,112,-178,67,-264c-46,-90,-145,-137,-235,-113c-198,53,-220,323,-33,401c14,6,55,10,92,8c56,-2,74,-8,109,-32Z\" class=\"fan_blade\" id=\"fan_blade\"/>\n </g>\n </svg></g>\n</svg>","clickableShapes":[],"smilAnimations":[{"id":"rotate_fan","targetId":"fan_blade","classValue":"fan_blade","attributeName":"rotate","fromValue":"360","toValue":"0","trigger":"time","duration":"3","durationUnit":"s","repeatCount":"0","end":"restore","delay":"1","delayUnit":"s","custom":""}],"bindings":[],"showCoordinates":false,"autoFormatAfterEdit":false,"outputField":"payload","editorUrl":"http://drawsvg.org/drawsvg.html","directory":"","name":"","x":840,"y":280,"wires":[[]]},{"id":"d06516d3.15555","type":"ui_group","z":"","name":"test","tab":"4e8fd009.82ce3","disp":true,"width":"12","collapse":false},{"id":"4e8fd009.82ce3","type":"ui_tab","z":"","name":"test","icon":"dashboard","disabled":false,"hidden":false}]
So this is your animation:
When you have a look at the html (that is generated for the dashboard), you will see that this is generated for your animation:
<animate id="rotate_fan" attributeType="XML" class="fan_blade" attributeName="rotate" from="360" to="0" dur="3s" repeatCount="indefinite" fill="remove" begin="1s"></animate>
Normally the attributeName should be the radius, or width, or height ... In this case you want to animate a transformation (e.g. rotate). But I think it your case we should generate something like this:
<animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="3s" repeatCount="indefinite"/>
Not sure at the moment how we should implement that, without impact on existing flows... Perhaps @Steve-Mcl has a suggestion about this?
Unfortunately I will have to go this week for surgery, so won't be available for a few weeks. Will get back to you on this one afterwards! Bart
Thanks for looking at it, I hope you get well soon!
Hi @smcgann99,
I'm finally back :-) I have implemented on Github your request to animate transformations... Please install my "panzoom" branch (directly from Github since not available on NPM yet) into your Node-RED folder:
npm install bartbutenaers/node-red-contrib-ui-svg#panzoom
Would be nice if you could test it and give me some feedback...
Now you should be able to animate transformations. Indeed when the attribute name is "transform" an extra "animation type" dropdown will appear:
For example this little demo flow:
[{"id":"cfcb01a3.1bd47","type":"ui_svg_graphics","z":"66231c1b.516ef4","group":"23b16fbe.b0541","order":23,"width":"12","height":"12","svgString":"<svg\n xmlns:dc=\"http://purl.org/dc/elements/1.1/\"\n xmlns:cc=\"http://creativecommons.org/ns#\"\n xmlns:rdf=\"http://www.w3.org/1999/02/22-rdf-syntax-ns#\"\n xmlns:svg=\"http://www.w3.org/2000/svg\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n xmlns:sodipodi=\"http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd\"\n xmlns:inkscape=\"http://www.inkscape.org/namespaces/inkscape\"\n id=\"svg2\"\n version=\"1.1\"\n inkscape:version=\"0.48.2 r9819\"\n width=\"600\"\n height=\"600\"\n viewBox=\"0 0 600 600\"\n sodipodi:docname=\"gear-anim.svg\">\n <sodipodi:namedview\n pagecolor=\"#ffffff\"\n bordercolor=\"#666666\"\n borderopacity=\"1\"\n objecttolerance=\"10\"\n gridtolerance=\"10\"\n guidetolerance=\"10\"\n inkscape:pageopacity=\"0\"\n inkscape:pageshadow=\"2\"\n inkscape:window-width=\"1739\"\n inkscape:window-height=\"838\"\n id=\"namedview4\"\n showgrid=\"false\"\n borderlayer=\"true\"\n inkscape:showpageshadow=\"false\"\n inkscape:zoom=\"0.48750832\"\n inkscape:cx=\"68.256195\"\n inkscape:cy=\"279.24558\"\n inkscape:window-x=\"450\"\n inkscape:window-y=\"46\"\n inkscape:window-maximized=\"0\"\n inkscape:current-layer=\"svg2\"\n showguides=\"false\">\n <inkscape:grid\n type=\"xygrid\"\n id=\"grid3757\"\n empspacing=\"100\"\n visible=\"true\"\n enabled=\"true\"\n snapvisiblegridlinesonly=\"false\" />\n </sodipodi:namedview>\n <metadata\n id=\"metadata8\">\n <rdf:RDF>\n <cc:Work\n rdf:about=\"\">\n <dc:format>image/svg+xml</dc:format>\n <dc:type\n rdf:resource=\"http://purl.org/dc/dcmitype/StillImage\" />\n <dc:title></dc:title>\n </cc:Work>\n </rdf:RDF>\n </metadata>\n <defs\n id=\"defs6\" />\n\n <path\n style=\"fill:#65c4ff;fill-opacity:1\"\n d=\"m 278.12748,498.21403 c -69.69859,-8.4164 -130.5709,-52.17746 -159.96831,-115.00115 -7.28202,-15.56203 -12.94615,-34.02475 -16.50254,-53.79151 -1.27872,-7.1073 -1.64134,-13.98646 -1.65511,-31.39931 -0.0155,-19.66101 0.23679,-23.64351 2.13372,-33.67463 7.81573,-41.32999 25.60367,-76.04296 53.80536,-105.00057 11.49805,-11.80625 19.59945,-18.56568 32.83899,-27.39936 23.10389,-15.41533 48.98418,-25.69085 77.04457,-30.58977 15.79947,-2.758357 41.78884,-3.370902 57.60632,-1.35773 35.49963,4.5182 67.95944,17.55194 96.51725,38.75504 12.06718,8.95944 32.13673,29.10144 41.17254,41.32114 19.21991,25.99232 31.07564,54.13736 37.22336,88.36681 1.26773,7.05834 1.63946,14.00425 1.65637,30.94425 0.0191,18.88718 -0.26246,23.42102 -2.07846,33.50423 -7.75191,43.04356 -27.57354,80.38704 -58.57872,110.36074 -29.7519,28.7622 -65.12608,46.38751 -107.84789,53.73566 -9.77436,1.68118 -43.2331,2.44992 -53.36745,1.22616 z m 25.2827,-19.30462 c 0.49457,-0.62571 1.1303,-4.00456 1.41272,-7.50854 0.8011,-9.93948 1.26713,-10.42888 9.95465,-10.45401 4.98138,-0.0144 5.40438,0.49727 7.13893,8.63377 1.72009,8.06849 2.27727,8.86791 5.71554,8.19956 1.59418,-0.3099 4.02991,-0.77908 5.41282,-1.04263 l 2.51427,-0.47916 -0.23591,-8.79317 -0.23591,-8.79316 5.28855,-1.6781 c 2.90863,-0.92294 5.91063,-1.43969 6.671,-1.1483 0.76036,0.29138 2.85881,3.80812 4.66327,7.81497 2.11254,4.69109 3.79354,7.27806 4.72091,7.26519 2.71509,-0.0376 9.18672,-3.5267 9.18672,-4.95273 0,-0.78166 -0.81945,-4.37461 -1.82118,-7.98433 -2.10482,-7.58543 -1.86609,-8.08731 5.31718,-11.17493 4.88255,-2.09868 5.68046,-1.67621 10.92555,5.78457 2.16745,3.08311 4.59209,5.60565 5.38809,5.60565 0.7959,0 3.21245,-1.03314 5.37009,-2.29589 4.40054,-2.57539 4.40136,-2.45081 -0.0727,-11.26888 -3.352,-6.60598 -3.09864,-7.66649 2.75918,-11.54946 l 5.08182,-3.36853 6.263,6.20666 6.26309,6.20666 3.672,-2.54129 c 6.16927,-4.26953 6.16527,-4.22498 1.04309,-11.50886 -2.54146,-3.61398 -4.62082,-7.00309 -4.62082,-7.53136 0,-1.75789 7.64127,-8.7658 9.53118,-8.74117 1.02345,0.0133 4.29036,1.85634 7.25991,4.09557 2.96945,2.2392 5.89509,4.0713 6.50127,4.0713 1.16418,0 7.69382,-6.78501 7.69382,-7.9947 0,-0.38967 -2.46073,-3.14016 -5.46818,-6.11224 -3.00746,-2.97207 -5.46819,-6.07442 -5.46819,-6.8941 0,-1.92557 6.11709,-9.94321 7.58619,-9.94321 0.61772,0 4.15427,1.45067 7.85899,3.2237 3.70473,1.77305 7.17909,3.04625 7.72082,2.82934 0.54173,-0.21691 2.01027,-2.31172 3.26336,-4.65513 l 2.27846,-4.26074 -2.35346,-1.98156 c -1.29436,-1.08985 -4.26763,-3.30417 -6.60736,-4.9207 -2.72818,-1.885 -4.25391,-3.60958 -4.25391,-4.80841 0,-2.6101 4.34718,-10.91 5.71428,-10.91 0.61972,0 3.9949,0.81911 7.50045,1.82024 3.50554,1.00115 7.037,1.82026 7.84763,1.82026 1.44237,0 4.45564,-6.21656 4.45564,-9.19216 0,-0.8533 -2.832,-2.71909 -7.29082,-4.80343 -7.97891,-3.7298 -8.08063,-3.90907 -6.27827,-11.05737 1.48546,-5.89135 2.25827,-6.25041 11.35673,-5.2764 8.89372,0.95208 8.83954,0.98634 9.89109,-6.25502 l 0.62072,-4.27494 -3.46618,-0.90989 c -1.90645,-0.50045 -5.40182,-1.38673 -7.76763,-1.96952 -2.36573,-0.58279 -4.72609,-1.57068 -5.24518,-2.1953 -0.9901,-1.19136 0.01,-11.74008 1.22872,-12.95687 0.35273,-0.35226 3.39382,-0.78008 6.758,-0.9507 9.57245,-0.4855 9.90418,-0.63332 10.55591,-4.7033 0.31627,-1.97518 0.19882,-4.57952 -0.26109,-5.78741 -0.76346,-2.00534 -1.49609,-2.24687 -8.43091,-2.77956 -9.23718,-0.70954 -10.06063,-1.49407 -9.68309,-9.22528 l 0.26546,-5.43596 4.10118,-1.11063 c 2.25554,-0.61086 5.844,-1.56029 7.97436,-2.10984 3.70773,-0.95651 3.86936,-1.14355 3.78236,-4.37709 -0.212,-7.88444 -0.27,-7.92853 -10.43354,-7.92853 l -9.06973,0 -1.33654,-5.27409 c -0.89418,-3.52843 -1.04482,-5.7361 -0.45491,-6.66994 0.48491,-0.76772 3.75209,-2.61652 7.26036,-4.10845 3.50827,-1.49193 6.70445,-3.03417 7.10255,-3.4272 0.56027,-0.55311 -2.58982,-11.0617 -3.29555,-10.9939 -0.0891,0.008 -3.23818,0.82067 -6.99754,1.80465 -10.15409,2.65775 -10.20728,2.64315 -13.20555,-3.6215 -2.55591,-5.34024 -2.57263,-5.47686 -0.89791,-7.32495 0.93864,-1.03576 4.08582,-3.32653 6.99364,-5.09059 2.90791,-1.76406 5.28709,-3.60762 5.28709,-4.0968 0,-1.25009 -2.69118,-6.41528 -4.29627,-8.24579 -1.24682,-1.42196 -1.83091,-1.3086 -8.20609,1.59272 -3.775,1.71802 -7.40882,3.12366 -8.07518,3.12366 -1.53491,0 -7.67455,-7.95461 -7.67455,-9.94322 0,-0.81968 2.46073,-3.92202 5.46818,-6.8941 3.00746,-2.97207 5.46809,-5.83522 5.46809,-6.36254 0,-1.60565 -5.51027,-7.74439 -6.95145,-7.74439 -0.74291,0 -3.78073,1.64795 -6.75073,3.66211 -2.97,2.01416 -6.05372,3.91264 -6.85272,4.21883 -1.74764,0.66973 -9.51982,-6.56577 -9.51982,-8.86246 0,-0.83196 2.04609,-4.31541 4.54682,-7.74101 l 4.54681,-6.22834 -2.89636,-2.98427 c -4.71009,-4.85301 -5.629,-4.74136 -12.10727,1.47096 -3.17891,3.04847 -6.08054,5.54268 -6.448,5.54268 -1.79418,0 -10.426,-6.65466 -10.426,-8.03793 0,-0.86335 1.43546,-4.56084 3.18982,-8.21663 1.75436,-3.6558 3.18973,-6.81317 3.18973,-7.01638 0,-0.48923 -6.41855,-4.46767 -8.35891,-5.18112 -1.13064,-0.41577 -2.71973,1.07676 -6.161,5.78691 -2.55054,3.49097 -5.20673,6.56541 -5.90273,6.83212 -1.67172,0.64062 -10.4939,-3.85975 -11.20763,-5.71722 -0.30718,-0.79943 0.32718,-4.46016 1.40982,-8.13494 1.08263,-3.6748 1.96836,-7.07021 1.96836,-7.54536 0,-0.79899 -9.97963,-5.02088 -10.49445,-4.43968 -0.12646,0.14275 -1.92264,3.63837 -3.99146,7.76807 -2.06891,4.12969 -4.20654,7.50852 -4.75036,7.50852 -2.83109,0 -10.94827,-3.06385 -11.62673,-4.38854 -0.43018,-0.83999 -0.46345,-3.9846 -0.0736,-6.98802 1.34391,-10.36088 1.57882,-9.9466 -6.22755,-10.98075 l -4.37781,-0.57996 -2.51382,8.38634 -2.51382,8.38634 -5.87595,-0.37364 c -3.23177,-0.20551 -6.38241,-0.87944 -7.00144,-1.49763 -0.62646,-0.62562 -1.27743,-4.23841 -1.46817,-8.14815 -0.18846,-3.8633 -0.75861,-7.53612 -1.26701,-8.16183 -1.2003,-1.47728 -9.32325,-1.47728 -10.49034,0 -0.49433,0.62571 -1.15938,4.07257 -1.47788,7.65968 -0.31851,3.58713 -0.80755,7.11655 -1.08676,7.84317 -0.56776,1.47757 -12.03749,3.06167 -13.24614,1.82944 -0.38979,-0.39738 -1.68349,-4.20374 -2.87489,-8.45857 -2.39345,-8.54765 -2.09133,-8.3512 -10.49556,-6.82454 l -2.97178,0.53985 0.23771,8.82415 0.23771,8.82416 -5.2885,1.67809 c -2.90867,0.92295 -5.91062,1.43969 -6.67099,1.1483 -0.76036,-0.29138 -2.85883,-3.80811 -4.66326,-7.81496 -2.11258,-4.69109 -3.7936,-7.27806 -4.72097,-7.26519 -2.71503,0.0377 -9.18675,3.52669 -9.18675,4.95273 0,0.78166 0.81955,4.37461 1.8212,7.98433 2.10487,7.58543 1.86608,8.0873 -5.31714,11.17493 -4.88253,2.09868 -5.68048,1.67621 -10.92554,-5.78457 -2.16746,-3.08311 -4.5921,-5.60566 -5.38806,-5.60566 -0.79596,0 -3.21253,1.03315 -5.37015,2.29589 -4.40051,2.5754 -4.40132,2.45082 0.0732,11.26889 3.34672,6.59551 3.09443,7.66931 -2.70526,11.5137 -5.77789,3.82998 -5.30686,3.98104 -12.84228,-4.11857 l -4.65544,-5.004 -3.75408,2.59805 c -6.26226,4.33388 -6.25598,4.26937 -1.12507,11.56564 2.54144,3.61398 4.62079,7.00309 4.62079,7.53135 0,1.7579 -7.64124,8.76581 -9.53116,8.74118 -1.02344,-0.0134 -4.29041,-1.85634 -7.25993,-4.09557 -2.96951,-2.23921 -5.8951,-4.07131 -6.5013,-4.07131 -1.16685,0 -7.69377,6.78633 -7.69377,7.99957 0,0.39232 2.46067,3.10696 5.46815,6.03251 3.00748,2.92557 5.46814,5.93929 5.46814,6.69717 0,2.01703 -4.77151,9.24085 -6.46082,9.78137 -0.79661,0.25488 -4.65475,-0.99578 -8.57363,-2.77925 -3.91889,-1.78348 -7.57329,-3.06339 -8.12088,-2.84424 -0.5476,0.21916 -2.02091,2.31581 -3.27403,4.65922 l -2.27839,4.26075 2.35343,1.98155 c 1.29437,1.08985 4.26767,3.30417 6.60733,4.9207 2.7282,1.885 4.25392,3.60958 4.25392,4.80842 0,2.61009 -4.34717,10.90999 -5.71423,10.90999 -0.61971,0 -3.99491,-0.81911 -7.50045,-1.82025 -8.68813,-2.48122 -9.13703,-2.40505 -10.83733,1.83867 -2.44758,6.10883 -2.17155,6.59867 5.82487,10.33667 8.03812,3.75751 8.24051,4.12993 6.10963,11.24303 -1.75022,5.84244 -2.13973,6.0227 -10.808,5.00134 -6.19117,-0.72949 -7.79387,-0.66162 -8.62108,0.36505 -1.44987,1.79943 -2.39635,9.65067 -1.24879,10.35893 0.51518,0.31798 4.00869,1.30138 7.76337,2.18535 4.31644,1.01623 7.1371,2.18647 7.6709,3.18253 0.84205,1.57124 -0.0385,11.39312 -1.11802,12.4712 -0.3065,0.3061 -3.34849,0.73992 -6.75999,0.96406 -9.80494,0.6442 -9.99362,0.72891 -10.64194,4.77782 -0.31627,1.97519 -0.19782,4.58206 0.26323,5.79306 0.76866,2.01902 1.46518,2.24473 8.38951,2.71869 9.22969,0.63176 10.10393,1.46628 9.72232,9.2805 l -0.26547,5.43596 -4.10111,1.11064 c -2.25561,0.61085 -5.89831,1.57486 -8.0949,2.14224 l -3.9938,1.03162 0.52377,5.06784 c 0.28805,2.78732 0.8658,5.40944 1.28387,5.82694 0.41806,0.4175 4.02531,0.39341 8.0161,-0.0536 3.99079,-0.44693 7.84781,-0.48186 8.57114,-0.0776 1.42341,0.79549 3.68253,7.36609 3.70492,10.77565 0.0115,1.76075 -1.25791,2.69334 -7.7327,5.68066 -4.2606,1.96574 -7.74654,3.76691 -7.74654,4.00261 0,0.57237 3.73137,10.51253 3.93875,10.49261 0.0893,-0.008 3.23819,-0.82067 6.99754,-1.80465 10.14948,-2.65655 10.20861,-2.64043 13.19422,3.59776 3.04978,6.37223 3.06739,6.33408 -5.49721,11.90659 -3.23087,2.10214 -5.87429,4.20387 -5.87429,4.6705 0,1.21608 2.71549,6.40197 4.29626,8.20478 1.24685,1.42196 1.83093,1.3086 8.2061,-1.59272 3.77503,-1.71801 7.40887,-3.12365 8.07521,-3.12365 1.53487,0 7.67449,7.9546 7.67449,9.94321 0,0.81968 -2.46066,3.92202 -5.46813,6.8941 -3.00748,2.97207 -5.46815,5.83522 -5.46815,6.36255 0,1.61428 5.51402,7.74439 6.96606,7.74439 0.75087,0 3.95144,-1.843 7.11241,-4.09557 3.16095,-2.25255 6.29474,-4.09556 6.96399,-4.09556 1.62314,0 9.03233,7.3201 9.03233,8.92373 0,0.69505 -2.05203,4.17238 -4.56006,7.7274 l -4.56006,6.46366 2.90959,2.99786 c 4.72452,4.86789 5.63916,4.75792 12.12048,-1.45734 3.17896,-3.04848 6.08056,-5.54268 6.448,-5.54268 1.79424,0 10.42598,6.65465 10.42598,8.03792 0,0.86336 -1.43539,4.56085 -3.18975,8.21664 -1.75436,3.65579 -3.18975,6.81316 -3.18975,7.01637 0,0.49227 6.42365,4.46944 8.38328,5.19048 1.15718,0.42577 2.57468,-0.86707 5.61363,-5.12002 6.17825,-8.64633 6.10555,-8.61385 12.47525,-5.57352 6.23087,2.97405 6.33518,3.32922 3.60263,12.26626 -0.99483,3.25369 -1.81193,6.39833 -1.81575,6.98807 -0.006,0.93899 9.88856,5.32424 10.48755,4.64803 0.12645,-0.14276 1.92259,-3.63839 3.99144,-7.76808 2.06884,-4.12969 4.20648,-7.50852 4.75029,-7.50852 2.91862,0 10.96553,3.087 11.72085,4.49642 0.48195,0.89931 0.74089,1.79136 0.57542,1.98232 -0.16548,0.19095 -0.57384,3.47257 -0.90748,7.29248 -0.68371,7.82789 -0.85227,7.60687 6.54923,8.58739 l 4.38759,0.58125 2.25476,-8.05696 2.25476,-8.05697 6.08255,0 c 3.50683,0 6.54427,0.46125 7.17287,1.08921 0.59967,0.59907 1.28611,4.28507 1.52545,8.19113 0.23933,3.90605 0.84452,7.61386 1.34487,8.23957 0.50035,0.62571 2.85984,1.13765 5.24332,1.13765 2.38348,0 4.73825,-0.51194 5.23284,-1.13765 z\"\n id=\"gear-B\"\n inkscape:connector-curvature=\"0\">\n </path>\n <path\n id=\"gear-A\"\n style=\"fill:#ff6584;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none\"\n d=\"m 299.8116,343.84392 c 22.58158,-0.28673 42.62107,15.91793 46.43184,38.83342 4.20497,25.28611 -12.94871,49.21058 -38.28321,53.4075 -25.33444,4.19684 -49.29925,-12.93246 -53.50423,-38.2185 -4.20497,-25.28607 12.94867,-49.21043 38.2832,-53.40749 2.37512,-0.39345 4.73639,-0.58552 7.0724,-0.61493 z m -9.90136,-41.04722 c -0.60003,-0.0462 -1.28509,0.042 -1.96797,0.21523 -1.36561,0.34605 -0.74081,0.21174 -2.12172,0.49195 -1.38076,0.28056 -2.63729,0.86373 -2.89046,1.78333 -0.51441,1.86727 3.07706,15.4993 2.39847,17.2183 -0.32994,0.83581 -2.72912,1.43754 -7.3184,3.0747 -4.58927,1.63712 -6.68027,2.67155 -7.47214,2.24452 -1.62863,-0.87866 -7.65745,-13.62998 -9.25562,-14.7278 -0.78725,-0.54035 -2.14547,-0.18147 -3.38245,0.49196 -1.2372,0.67338 -0.66918,0.37069 -1.93722,0.9839 -1.26811,0.61303 -2.31994,1.5371 -2.33697,2.49051 -0.0346,1.93613 6.81083,14.21663 6.58041,16.04992 -0.11188,0.89143 -2.53063,1.70518 -4.55094,3.47441 -2.02037,1.76914 -3.15897,4.04337 -4.05894,4.02785 -1.85076,-0.031 -13.08056,-8.55378 -15.00579,-8.79363 -0.94791,-0.11784 -1.98033,0.80155 -2.76746,1.9678 -0.78749,1.16614 -0.41786,0.65622 -1.26073,1.78332 -0.8428,1.1271 -1.37787,2.40483 -0.95323,3.25919 0.86287,1.73423 12.80727,9.96526 13.28381,11.25339 0.47647,1.28815 -1.01754,2.73798 -3.29021,7.04106 -2.2727,4.30309 -3.21396,6.58718 -4.08969,6.79508 -1.80085,0.42728 -14.77217,-5.04067 -16.69701,-4.79653 -0.94767,0.12044 -1.7409,1.25801 -2.21397,2.58274 -0.47319,1.32481 -0.23226,0.72886 -0.76874,2.0293 -0.53682,1.30054 -0.7465,2.6904 -0.123,3.41292 1.26661,1.46669 14.59995,6.07397 15.65153,7.5945 0.51136,0.73946 -0.78853,2.96102 -1.81422,5.90342 -1.02576,2.94225 -0.28405,5.36402 -0.95324,5.96491 -1.37605,1.2361 -15.40104,2.6477 -16.97376,3.78188 -0.77423,0.55826 -0.8966,1.96249 -0.67649,3.35142 0.22038,1.38907 0.124,0.75412 0.27675,2.15229 0.15266,1.3982 0.64338,2.70764 1.53748,3.04395 1.8156,0.68227 15.72087,-1.63188 17.3735,-0.79942 0.80366,0.40467 1.15429,2.68426 2.42921,7.37927 1.27487,4.69485 2.15951,7.00051 1.66048,7.74824 -1.02604,1.53782 -14.28661,6.35271 -15.52853,7.84048 -0.61148,0.73269 -0.40454,2.12156 0.15375,3.41291 0.5583,1.2912 0.33496,0.71274 0.83024,2.0293 0.49527,1.31689 1.295,2.4475 2.24472,2.552 1.92843,0.2118 14.82773,-5.47072 16.63551,-5.07325 0.87917,0.19321 1.76042,3.96281 3.0442,5.71894 1.28374,1.75613 3.80471,4.33238 3.7207,5.22698 -0.17242,1.83943 -9.54582,12.36894 -9.93211,14.2666 -0.19012,0.93446 0.67843,2.04852 1.78348,2.92096 1.10508,0.87255 0.59872,0.45885 1.66047,1.38362 1.06173,0.92472 2.31213,1.55663 3.19796,1.19913 1.79833,-0.72641 10.45794,-11.85419 12.23832,-12.36028 0.86572,-0.24574 2.67016,1.22284 6.79566,3.81262 4.12559,2.58975 6.31662,3.69382 6.4574,4.5813 0.28989,1.82478 -6.15483,14.33104 -6.05766,16.26514 0.0477,0.95243 1.14175,1.82639 2.42922,2.39827 1.28735,0.57186 0.70971,0.28937 1.96797,0.92241 1.25834,0.63333 2.61314,0.9346 3.38245,0.36896 1.56188,-1.1486 7.19508,-14.07372 8.79437,-15.00452 0.77766,-0.45259 2.87049,0.947 6.14991,2.15229 3.27936,1.2053 5.78321,0.80442 6.30366,1.53734 1.07057,1.50731 0.8369,15.58944 1.78348,17.27981 0.466,0.8322 1.85165,1.13351 3.25945,1.07614 1.40794,-0.0568 0.74338,-0.0708 2.15247,-0.0615 1.40915,0.0116 2.79036,-0.32114 3.22871,-1.16839 0.88927,-1.72095 0.17957,-15.76857 1.19923,-17.31054 0.49596,-0.74975 2.80601,-0.81718 7.62589,-1.53735 4.82002,-0.72029 7.21612,-1.31904 7.90264,-0.73793 1.41149,1.19549 4.69011,14.89244 6.02691,16.2959 0.65836,0.69108 2.06343,0.61934 3.4132,0.21522 1.34975,-0.40396 0.72336,-0.24554 2.09097,-0.58419 1.36792,-0.33855 2.61494,-0.97682 2.82896,-1.90631 0.43411,-1.8871 -3.74123,-15.34903 -3.13645,-17.09532 0.29418,-0.84916 2.85323,-1.09755 5.81166,-3.0132 2.95848,-1.91575 4.43322,-4.02936 5.31968,-3.87412 1.8233,0.31935 11.57341,10.47067 13.43755,11.00741 0.91819,0.26423 2.11483,-0.47724 3.07496,-1.5066 0.96033,-1.02924 0.49795,-0.58606 1.50673,-1.56809 1.00881,-0.98217 1.73118,-2.16487 1.44523,-3.0747 -0.58086,-1.84783 -10.98431,-11.34796 -11.34659,-13.1597 -0.17599,-0.88108 1.51968,-2.69215 4.48944,-6.54911 2.96981,-3.85698 4.14553,-5.83419 5.04292,-5.90341 1.84584,-0.14166 13.83542,7.28957 15.77453,7.34852 0.95513,0.0285 1.90839,-1.00989 2.58296,-2.24453 0.67457,-1.23481 0.3429,-0.67466 1.07624,-1.87557 0.73322,-1.20072 1.14876,-2.54076 0.64574,-3.35141 -1.02155,-1.64623 -13.46663,-8.26555 -14.2678,-9.93128 -0.38946,-0.80985 0.73563,-1.54376 1.75273,-5.74969 1.01715,-4.2058 0.38684,-6.68496 1.19923,-7.0718 1.67053,-0.79611 15.54331,1.84179 17.3735,1.19914 0.90116,-0.31665 1.41562,-1.6188 1.59898,-3.01321 0.18336,-1.39428 0.0879,-0.76829 0.33824,-2.15229 0.2508,-1.38421 0.14675,-2.77585 -0.61499,-3.35142 -1.5474,-1.16804 -15.5636,-2.88504 -16.91226,-4.15084 -0.65586,-0.61542 0.11023,-3.02618 -0.39974,-6.73359 -0.50993,-3.70729 -1.60185,-5.96607 -1.04549,-6.67209 1.1442,-1.45252 14.72644,-5.22507 16.08202,-6.6106 0.66728,-0.68229 0.54698,-2.08173 0.0922,-3.41292 -0.45433,-1.33109 -0.25595,-0.70838 -0.64574,-2.06004 -0.38981,-1.35135 -1.09099,-2.55766 -2.02947,-2.73648 -1.90577,-0.36317 -15.23371,4.28942 -17.0045,3.75113 -0.86113,-0.26174 -1.65864,-2.60545 -3.6592,-7.04105 -2.00046,-4.43575 -3.19251,-6.40364 -2.82896,-7.22555 0.7479,-1.69024 12.99126,-8.71501 13.9603,-10.39247 0.47704,-0.82628 0.033,-2.14354 -0.73799,-3.32067 -0.77106,-1.17717 -0.45505,-0.63195 -1.16848,-1.84483 -0.71318,-1.21267 -1.691,-2.21109 -2.64447,-2.15228 -1.93646,0.11998 -13.6793,7.92372 -15.52852,7.84047 -0.89927,-0.0402 -1.89527,-2.4087 -3.8437,-4.42755 -1.94843,-2.01882 -4.32161,-2.91744 -4.39719,-3.81263 -0.15567,-1.84106 7.21221,-13.83719 7.2569,-15.7732 0.0221,-0.95345 -1.03327,-1.88808 -2.27547,-2.552 -1.24199,-0.66407 -0.66716,-0.35313 -1.87572,-1.07614 -1.20871,-0.72307 -2.5741,-1.12305 -3.38245,-0.61494 -1.64203,1.03184 -8.17695,13.48538 -9.83986,14.29734 -0.8087,0.39454 -2.97806,-0.76232 -7.47215,-2.64424 -4.49412,-1.88208 -6.71505,-2.53363 -7.01089,-3.38217 -0.60813,-1.7452 3.51247,-15.17821 3.07495,-17.06457 -0.21588,-0.92895 -1.42982,-1.60095 -2.79821,-1.93706 -1.36838,-0.33588 -0.77103,-0.18291 -2.12172,-0.58419 -1.35009,-0.40145 -2.7562,-0.44623 -3.4132,0.24598 -1.33409,1.4058 -4.55617,15.09769 -5.96541,16.29589 -0.68532,0.58247 -3.03122,-0.43718 -5.96542,-0.55344 -2.93424,-0.11635 -5.30451,0.82484 -5.96541,0.21523 -1.35951,-1.25415 -4.04398,-15.0829 -5.31968,-16.54188 -0.31422,-0.35916 -0.81444,-0.53808 -1.41448,-0.58419 z\"\n inkscape:connector-curvature=\"0\">\n </path>\n</svg>","clickableShapes":[],"smilAnimations":[{"id":"rotate_gearA","targetId":"gear-A","classValue":"","attributeName":"transform","transformType":"rotate","fromValue":"0,300,390","toValue":"360,300,390","trigger":"time","duration":"10","durationUnit":"s","repeatCount":"0","end":"restore","delay":"1005","delayUnit":"ms","custom":""},{"id":"rotate_gearB","targetId":"gear-B","classValue":"","attributeName":"transform","transformType":"rotate","fromValue":"360,300,300","toValue":"0,300,300","trigger":"time","duration":"21176","durationUnit":"ms","repeatCount":"0","end":"restore","delay":"1","delayUnit":"s","custom":""}],"bindings":[],"showCoordinates":true,"autoFormatAfterEdit":false,"outputField":"payload","editorUrl":"http://drawsvg.org/drawsvg.html","directory":"","panEnabled":false,"zoomEnabled":false,"controlIconsEnabled":false,"dblClickZoomEnabled":false,"mouseWheelZoomEnabled":false,"name":"","x":840,"y":280,"wires":[[]]},{"id":"23b16fbe.b0541","type":"ui_group","z":"","name":"test","tab":"3d0faef1.feef72","disp":true,"width":"12","collapse":false},{"id":"3d0faef1.feef72","type":"ui_tab","z":"","name":"test","icon":"dashboard","disabled":false,"hidden":false}]
Will produce this result:
Nice work Bart π
Looking good so far, thankyou very much. Can you confim if I can start AND stop via input message ?
It's working fine with trigger set to delay, but when I tried changing to input message and injected this message nothing happens.
msg : Object object payload: object command: "trigger_animation" selector: "#fan" Action: "start"
There are a few problems with your flow. I have added a new wiki page to provide you with a working example flow and explanation.
Thanks - working now using firefox with your syntax for message object. I have noted that it dosn't seem to work with Chrome, MS IE11 or MS Edge though, not sure if you tested this ?
To be clear - your example works in all but edge. My floor plan only works in firefox...
Morning @smcgann99 ,
I use the beginElement
and endElement
, but it indeed seems that IE11 and Edge don't support this.
You can see that in this compatibility chart:
There are some polyfills (like this one) available, to add it to Edge. But those projects are abandonned for a long time already, so that is no solution...
So I'm afraid that is the end of this story.
When Microsoft doesn't support it, then there is less I can do about that ...
My floor plan only works in firefox...
To be honest, you don't give me much information to get started...
If this is not related to this animation issue, please close this issue and create a new one. Otherwise it is becoming a mess to follow up.
I will close this issue now - thanks for all your help.
Hy bartbuttenaers I have problem rotate svg,can't stay posisition. If i set 0,40,50 and 360,40,50 Have is solusition?
ζ¨ηζ΅η¨εε¨δΈδΊει‘γζζ°ε’δΊδΈεζ°ηwiki ι ι’οΌηΊζ¨ζδΎε·₯δ½η―δΎζ΅η¨ε解ιγ
Please tell me how to modify it according to the example. The fan still cannot turn on and off. flows.json
[
{
"id": "a60c493e99d93768",
"type": "ui_svg_graphics",
"z": "cad3dda3ba68c7bb",
"group": "23b16fbe.b0541",
"order": 23,
"width": "12",
"height": "12",
"svgString": "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" version=\"1.1\" width=\"256\" height=\"256\" viewBox=\"0 0 256 256\" xml:space=\"preserve\" preserveAspectRatio=\"xMidYMid meet\"><rect id=\"svgEditorBackground\" x=\"0\" y=\"0\" width=\"256\" height=\"256\" style=\"fill:none;stroke:none\"/>\n\n
ζ¨ηζ΅η¨εε¨δΈδΊει‘γζζ°ε’δΊδΈεζ°ηwiki ι ι’οΌηΊζ¨ζδΎε·₯δ½η―δΎζ΅η¨ε解ιγ flows.json Please tell me how to modify it according to the example. The fan still cannot turn on and off.
@kevining123,
You have created an animation that is used to animate a property of an SVG element with id "gear-A":
But none of the SVG (path) elements in your SVG drawing has such an id:
So the animation cannot know which element it needs to animate...
Bart
Hi,
Firstly let me say this is just what I was looking for my home setup so great work. I'm a newbie with regard to "SVG" so not sure if this is an issue or just me doing something wrong.
I used the SVG editor to import an svg element (picture of a fan) I would like to make the blade rotate in a circle based on state from an input message.
I named the path that contains the fan blade but cannot select it in the animation editor. If I select the id "fan" (the whole object ?) I still don't get any rotation. Could you point me in the right direction please ?
This is copied from the svg source view.