Closed metcalfepete closed 4 years ago
Hi Pete. you're welcome.
Bart and I spent many many hours making this node a reality.
Question, have you tried manually changing the fill of the #panels in the Devtools?
It may be that there is an overriding style or class that is preventing the DOM showing your animation.
As a test, you could try setting up a couple of CSS classes .orange-panel and .green-panel then try animating the class?
Hello @metcalfepete,
Thanks for the constructive feedback!
In our wiki you can find a tutorial about setting styles (e.g. fill). When I change your function code to this:
msg.payload = {
"command": "update_style",
"selector": "#panels",
"attributeName": "fill",
"attributeValue": "orange"
}
return msg;
Then you will see it works:
Here is the entire flow:
[{"id":"7bfe8fa1.78341","type":"ui_svg_graphics","z":"1fbbbe5c.b86de2","group":"df5f317f.eb69","order":0,"width":"6","height":"19","svgString":"<svg version=\"1.1\" id=\"Layer_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" xml:space=\"preserve\"><desc>Copyright Opto 22</desc> <svg><g>\n<g id=\"shape\">\n\t<path id=\"panels\" fill=\"MidnightBlue\" d=\"M100,33.4l-24.1-3.3l-7,11.3l-1-0.2l7-11.3l-0.7-0.1L51,26.6l-7.1,10.9l-1.1-0.2l7.1-10.9l-0.7-0.1L25.1,23\n\t\tl-7.2,10.5l-1,1.4l11,1.7v1.1l-11.7-1.8L8.8,46.7l-0.3,0.4L25.7,50v0.7L25.1,51L7.8,48.1l-7.9,11.5l8.2,1.5L6.7,62l-4.8-0.9\n\t\tl0.9,1.3v0.9l-0.9,0.9L77,77.7l0.6-1v-0.9l-0.444-0.698l0.719-1.235L95.3,62.5l3.7,0.6V60l-1.454-0.273L97.4,59.8l-1.9-0.3V43.622\n\t\tL100,35.9V33.4L100,33.4z M92.3,46.5l0.2-0.4l0.9-1.6v0.226l-7.687,13.191L85.6,57.9l6-10.4l-24.3-3.7L61,54l-1-0.2l6.9-11.2\n\t\tL92.3,46.5z M76.7,73.3L83.9,61l-24.42-4.087L59.5,56.9l24.548,3.876L76.78,73.248L76.7,73.3z M65.3,42.4l-0.6,1L42.3,40l-6.5,10\n\t\tl-1-0.2l7.1-11L65.3,42.4z M30,37l10.2,1.6l-0.7,1L30,38.1V37z M39.1,68.1L8.6,62.4l1.4-0.8l14.6,2.7l0.6,0.1l7.6-11.7l1,0.2\n\t\tl-7.6,11.8l14.2,2.6L39.1,68.1z M75,74.5l-33.9-6.1l1.3-0.8l7.8,1.4l0.7,0.1l6.8-11l1.63-1.087L51.8,69.2l24.4,4.5L75,74.5z\n\t\t M79.118,71.735l6.263-10.749L93.7,62.3L79.118,71.735z M93.4,59.1l-6.35-0.977l6.35-10.897V59.1z M95.5,41.122V41.1l4.488-7.679\n\t\tL95.5,41.122z\"></path>\n</g>\n<g id=\"dark\">\n\t<polygon fill=\"#666\" points=\"30,37 28,36.7 28,37.8 30,38.1 \t\"></polygon>\n\t<polygon fill=\"#666\" points=\"28.6,36.3 28,36.2 28,36.2 \t\"></polygon>\n\t<polygon fill=\"#666\" points=\"76.4,76.4 100,35.9 100,33.4 76.4,73.9 \t\"></polygon>\n\t<polygon fill=\"#666\" points=\"33.3,50.9 25.8,49.7 25.8,49.7 \t\"></polygon>\n\t<polygon fill=\"#666\" points=\"25.2,51.1 31.3,52.2 32,51.2 25.8,50.1 25.8,50.8 \t\"></polygon>\n\t<polygon fill=\"#666\" points=\"35.7,50.2 35.8,50 34.8,49.8 34.6,50 \t\"></polygon>\n\t<polygon fill=\"#666\" points=\"60.9,54.5 61.2,54 60.2,53.9 59.9,54.3 \t\"></polygon>\n\t<polygon fill=\"#666\" points=\"34.1,52.6 54.2,56 56.7,56.4 57.3,55.4 33.7,51.5 32.9,52.6 34,52.8 \t\"></polygon>\n\t<polygon fill=\"#666\" points=\"97.6,59.8 97.6,59.7 97.4,59.8 95.5,59.5 95.5,41.1 93.5,44.5 93.5,59.1 85.7,57.9 84.7,59.6 \n\t\t60.3,55.5 84.7,59.6 84.5,60 59,55.7 57.6,58 59.5,56.9 93.6,62.3 76.7,73.3 76.5,73.7 76.2,73.7 75,74.5 41.1,68.3 42.4,67.5 \n\t\t40.5,67.2 39.2,68 8.6,62.4 10.1,61.6 8.2,61.2 6.8,62.1 2,61.2 2.9,62.5 2.9,63.4 2,64.3 77.1,77.8 77.8,76.8 77.8,75.9 \n\t\t77.1,74.8 76.9,74.8 95.5,62.6 99.2,63.2 99.2,60.1 \t\"></polygon>\n\t<path fill=\"#666\" d=\"M59.5,53.7l-0.9,1.5L59.5,53.7z\"></path>\n\t<polygon fill=\"#666\" points=\"17.8,36.3 18.5,35.3 17,35 16.3,36 \t\"></polygon>\n\t<polygon fill=\"#666\" points=\"7.9,48.2 9.4,48.5 10.1,47.5 8.6,47.3 8.9,46.8 8.9,46.8 16.1,36.2 0.1,59.6 0.1,59.6 \t\"></polygon>\n</g>\n<g id=\"light\">\n\t\n\t\t<rect x=\"17.113\" y=\"36.276\" transform=\"matrix(0.9885 0.151 -0.151 0.9885 5.8372 -4.0161)\" fill=\"#ccc\" width=\"24.498\" height=\"0.3\"></rect>\n\t\n\t\t<rect x=\"17.881\" y=\"35.219\" transform=\"matrix(0.9888 0.1495 -0.1495 0.9888 5.6261 -4.1072)\" fill=\"#ccc\" width=\"24.502\" height=\"0.3\"></rect>\n\t\n\t\t<rect x=\"18.699\" y=\"34.017\" transform=\"matrix(0.989 0.148 -0.148 0.989 5.3975 -4.2042)\" fill=\"#ccc\" width=\"24.5\" height=\"0.3\"></rect>\n\t\n\t\t<rect x=\"19.491\" y=\"32.778\" transform=\"matrix(0.9892 0.1465 -0.1465 0.9892 5.1665 -4.2948)\" fill=\"#ccc\" width=\"24.5\" height=\"0.3\"></rect>\n\t\n\t\t<rect x=\"20.299\" y=\"31.678\" transform=\"matrix(0.9894 0.145 -0.145 0.9894 4.9586 -4.376)\" fill=\"#ccc\" width=\"24.398\" height=\"0.3\"></rect>\n\t\n\t\t<rect x=\"21.121\" y=\"30.49\" transform=\"matrix(0.9896 0.1435 -0.1435 0.9896 4.742 -4.4644)\" fill=\"#ccc\" width=\"24.398\" height=\"0.3\"></rect>\n\t\n\t\t<rect x=\"21.884\" y=\"29.313\" transform=\"matrix(0.9899 0.142 -0.142 0.9899 4.5289 -4.5414)\" fill=\"#ccc\" width=\"24.402\" height=\"0.3\"></rect>\n\t\n\t\t<rect x=\"22.689\" y=\"28.222\" transform=\"matrix(0.9901 0.1405 -0.1405 0.9901 4.3322 -4.6204)\" fill=\"#ccc\" width=\"24.4\" height=\"0.3\"></rect>\n\t\n\t\t<rect x=\"23.483\" y=\"26.991\" transform=\"matrix(0.9903 0.139 -0.139 0.9903 4.1184 -4.6894)\" fill=\"#ccc\" width=\"24.3\" height=\"0.3\"></rect>\n\t\n\t\t<rect x=\"24.297\" y=\"25.799\" transform=\"matrix(0.9905 0.1375 -0.1375 0.9905 3.9142 -4.765)\" fill=\"#ccc\" width=\"24.3\" height=\"0.3\"></rect>\n\t\n\t\t<rect x=\"25.095\" y=\"24.587\" transform=\"matrix(0.9907 0.136 -0.136 0.9907 3.7103 -4.8355)\" fill=\"#ccc\" width=\"24.3\" height=\"0.3\"></rect>\n\t\n\t\t<rect x=\"8.869\" y=\"48.796\" transform=\"matrix(0.9862 0.1658 -0.1658 0.9862 8.3996 -2.8332)\" fill=\"#ccc\" width=\"24.602\" height=\"0.2\"></rect>\n\t\n\t\t<rect x=\"9.589\" y=\"47.673\" transform=\"matrix(0.9864 0.1643 -0.1643 0.9864 8.1466 -2.9472)\" fill=\"#ccc\" width=\"24.6\" height=\"0.2\"></rect>\n\t\n\t\t<rect x=\"10.374\" y=\"46.613\" transform=\"matrix(0.9867 0.1628 -0.1628 0.9867 7.907 -3.0682)\" fill=\"#ccc\" width=\"24.602\" height=\"0.2\"></rect>\n\t\n\t\t<rect x=\"11.094\" y=\"45.493\" transform=\"matrix(0.9869 0.1613 -0.1613 0.9869 7.6606 -3.1764)\" fill=\"#ccc\" width=\"24.6\" height=\"0.2\"></rect>\n\t\n\t\t<rect x=\"11.831\" y=\"44.402\" transform=\"matrix(0.9871 0.1598 -0.1598 0.9871 7.4218 -3.2842)\" fill=\"#ccc\" width=\"24.598\" height=\"0.2\"></rect>\n\t\n\t\t<rect x=\"12.505\" y=\"43.315\" transform=\"matrix(0.9874 0.1583 -0.1583 0.9874 7.1853 -3.3792)\" fill=\"#ccc\" width=\"24.6\" height=\"0.2\"></rect>\n\t\n\t\t<rect x=\"13.202\" y=\"42.184\" transform=\"matrix(0.9876 0.1569 -0.1569 0.9876 6.9503 -3.4775)\" fill=\"#ccc\" width=\"24.6\" height=\"0.2\"></rect>\n\t\n\t\t<rect x=\"13.973\" y=\"41.115\" transform=\"matrix(0.9879 0.1554 -0.1554 0.9879 6.7237 -3.5822)\" fill=\"#ccc\" width=\"24.602\" height=\"0.2\"></rect>\n\t\n\t\t<rect x=\"14.684\" y=\"39.993\" transform=\"matrix(0.9881 0.1539 -0.1539 0.9881 6.4917 -3.6751)\" fill=\"#ccc\" width=\"24.6\" height=\"0.2\"></rect>\n\t\n\t\t<rect x=\"15.409\" y=\"38.908\" transform=\"matrix(0.9883 0.1524 -0.1524 0.9883 6.2763 -3.7667)\" fill=\"#ccc\" width=\"24.6\" height=\"0.3\"></rect>\n\t\n\t\t<rect x=\"16.097\" y=\"37.768\" transform=\"matrix(0.9885 0.151 -0.151 0.9885 6.0515 -3.8531)\" fill=\"#ccc\" width=\"24.598\" height=\"0.3\"></rect>\n\t\n\t\t<rect x=\"-0.18\" y=\"61.903\" transform=\"matrix(0.9836 0.1801 -0.1801 0.9836 11.3786 -1.213)\" fill=\"#ccc\" width=\"25.098\" height=\"0.3\"></rect>\n\t\n\t\t<rect x=\"0.608\" y=\"60.714\" transform=\"matrix(0.9839 0.1787 -0.1787 0.9839 11.0874 -1.3627)\" fill=\"#ccc\" width=\"25\" height=\"0.3\"></rect>\n\t\n\t\t<rect x=\"1.382\" y=\"59.502\" transform=\"matrix(0.9842 0.1773 -0.1773 0.9842 10.787 -1.5171)\" fill=\"#ccc\" width=\"25.002\" height=\"0.2\"></rect>\n\t\n\t\t<rect x=\"2.193\" y=\"58.392\" transform=\"matrix(0.9844 0.1759 -0.1759 0.9844 10.5179 -1.6726)\" fill=\"#ccc\" width=\"25\" height=\"0.2\"></rect>\n\t\n\t\t<rect x=\"2.989\" y=\"57.216\" transform=\"matrix(0.9847 0.1744 -0.1744 0.9847 10.233 -1.8231)\" fill=\"#ccc\" width=\"25.002\" height=\"0.2\"></rect>\n\t\n\t\t<rect x=\"3.814\" y=\"55.991\" transform=\"matrix(0.9849 0.173 -0.173 0.9849 9.9493 -1.9679)\" fill=\"#ccc\" width=\"24.898\" height=\"0.2\"></rect>\n\t\n\t\t<rect x=\"4.618\" y=\"54.832\" transform=\"matrix(0.9852 0.1715 -0.1715 0.9852 9.6735 -2.1133)\" fill=\"#ccc\" width=\"24.9\" height=\"0.2\"></rect>\n\t\n\t\t<rect x=\"5.397\" y=\"53.678\" transform=\"matrix(0.9854 0.1701 -0.1701 0.9854 9.4079 -2.252)\" fill=\"#ccc\" width=\"24.898\" height=\"0.2\"></rect>\n\t\n\t\t<rect x=\"6.088\" y=\"52.481\" transform=\"matrix(0.9857 0.1686 -0.1686 0.9857 9.1303 -2.3727)\" fill=\"#ccc\" width=\"24.9\" height=\"0.2\"></rect>\n\t\n\t\t<rect x=\"6.933\" y=\"51.283\" transform=\"matrix(0.9859 0.1671 -0.1671 0.9859 8.8582 -2.5079)\" fill=\"#ccc\" width=\"24.798\" height=\"0.2\"></rect>\n\t\n\t\t<rect x=\"7.685\" y=\"50.194\" transform=\"matrix(0.9862 0.1657 -0.1657 0.9862 8.6111 -2.6329)\" fill=\"#ccc\" width=\"24.802\" height=\"0.2\"></rect>\n\t\n\t\t<rect x=\"26.118\" y=\"66.574\" transform=\"matrix(0.9836 0.1801 -0.1801 0.9836 12.6426 -5.792)\" fill=\"#ccc\" width=\"24.198\" height=\"0.3\"></rect>\n\t\n\t\t<rect x=\"26.896\" y=\"65.397\" transform=\"matrix(0.9839 0.1787 -0.1787 0.9839 12.3409 -5.9136)\" fill=\"#ccc\" width=\"24.2\" height=\"0.3\"></rect>\n\t\n\t\t<rect x=\"27.672\" y=\"64.202\" transform=\"matrix(0.9842 0.1773 -0.1773 0.9842 12.0304 -6.0328)\" fill=\"#ccc\" width=\"24.202\" height=\"0.2\"></rect>\n\t\n\t\t<rect x=\"28.516\" y=\"63\" transform=\"matrix(0.9844 0.1758 -0.1758 0.9844 11.725 -6.1488)\" fill=\"#ccc\" width=\"24.098\" height=\"0.2\"></rect>\n\t\n\t\t<rect x=\"29.205\" y=\"61.805\" transform=\"matrix(0.9847 0.1743 -0.1743 0.9847 11.4215 -6.2431)\" fill=\"#ccc\" width=\"24.1\" height=\"0.2\"></rect>\n\t\n\t\t<rect x=\"30.01\" y=\"60.578\" transform=\"matrix(0.9849 0.1729 -0.1729 0.9849 11.125 -6.3583)\" fill=\"#ccc\" width=\"24.098\" height=\"0.2\"></rect>\n\t\n\t\t<rect x=\"30.798\" y=\"59.299\" transform=\"matrix(0.9852 0.1715 -0.1715 0.9852 10.8215 -6.4683)\" fill=\"#ccc\" width=\"24.1\" height=\"0.2\"></rect>\n\t\n\t\t<rect x=\"31.635\" y=\"58.096\" transform=\"matrix(0.9854 0.17 -0.17 0.9854 10.529 -6.5709)\" fill=\"#ccc\" width=\"23.998\" height=\"0.2\"></rect>\n\t\n\t\t<rect x=\"32.387\" y=\"56.891\" transform=\"matrix(0.9857 0.1686 -0.1686 0.9857 10.2439 -6.6677)\" fill=\"#ccc\" width=\"24\" height=\"0.2\"></rect>\n\t\n\t\t<rect x=\"33.121\" y=\"55.678\" transform=\"matrix(0.9859 0.1671 -0.1671 0.9859 9.9552 -6.7556)\" fill=\"#ccc\" width=\"23.998\" height=\"0.2\"></rect>\n\t\n\t\t<rect x=\"33.883\" y=\"54.493\" transform=\"matrix(0.9862 0.1657 -0.1657 0.9862 9.6801 -6.8481)\" fill=\"#ccc\" width=\"24.002\" height=\"0.2\"></rect>\n\t\n\t\t<rect x=\"51.616\" y=\"71.397\" transform=\"matrix(0.9836 0.1801 -0.1801 0.9836 13.9355 -10.3867)\" fill=\"#ccc\" width=\"25.098\" height=\"0.3\"></rect>\n\t\n\t\t<rect x=\"52.395\" y=\"70.097\" transform=\"matrix(0.9839 0.1787 -0.1787 0.9839 13.5977 -10.466)\" fill=\"#ccc\" width=\"25\" height=\"0.3\"></rect>\n\t\n\t\t<rect x=\"53.113\" y=\"68.816\" transform=\"matrix(0.9842 0.1772 -0.1772 0.9842 13.2499 -10.5359)\" fill=\"#ccc\" width=\"25.002\" height=\"0.2\"></rect>\n\t\n\t\t<rect x=\"53.914\" y=\"67.593\" transform=\"matrix(0.9844 0.1758 -0.1758 0.9844 12.9351 -10.6215)\" fill=\"#ccc\" width=\"24.998\" height=\"0.2\"></rect>\n\t\n\t\t<rect x=\"54.7\" y=\"66.319\" transform=\"matrix(0.9847 0.1744 -0.1744 0.9847 12.613 -10.7017)\" fill=\"#ccc\" width=\"25.002\" height=\"0.2\"></rect>\n\t\n\t\t<rect x=\"55.425\" y=\"65.096\" transform=\"matrix(0.9849 0.1729 -0.1729 0.9849 12.296 -10.7626)\" fill=\"#ccc\" width=\"24.998\" height=\"0.2\"></rect>\n\t\n\t\t<rect x=\"56.196\" y=\"63.797\" transform=\"matrix(0.9852 0.1715 -0.1715 0.9852 11.9752 -10.8261)\" fill=\"#ccc\" width=\"24.9\" height=\"0.2\"></rect>\n\t\n\t\t<rect x=\"56.904\" y=\"62.57\" transform=\"matrix(0.9854 0.1701 -0.1701 0.9854 11.6713 -10.8839)\" fill=\"#ccc\" width=\"24.898\" height=\"0.2\"></rect>\n\t\n\t\t<rect x=\"57.708\" y=\"61.314\" transform=\"matrix(0.9857 0.1686 -0.1686 0.9857 11.3585 -10.9494)\" fill=\"#ccc\" width=\"24.9\" height=\"0.2\"></rect>\n\t\n\t\t<rect x=\"58.526\" y=\"60.108\" transform=\"matrix(0.9859 0.1671 -0.1671 0.9859 11.0591 -11.0138)\" fill=\"#ccc\" width=\"24.898\" height=\"0.2\"></rect>\n\t\n\t\t<rect x=\"59.189\" y=\"58.789\" transform=\"matrix(0.9862 0.1657 -0.1657 0.9862 10.7472 -11.0482)\" fill=\"#ccc\" width=\"24.802\" height=\"0.2\"></rect>\n\t\n\t\t<rect x=\"60.083\" y=\"57.394\" transform=\"matrix(0.9862 0.1657 -0.1657 0.9862 10.5285 -11.2155)\" fill=\"#ccc\" width=\"24.802\" height=\"0.2\"></rect>\n\t\n\t\t<rect x=\"60.83\" y=\"56.206\" transform=\"matrix(0.9864 0.1642 -0.1642 0.9864 10.2397 -11.2602)\" fill=\"#ccc\" width=\"24.798\" height=\"0.2\"></rect>\n\t\n\t\t<rect x=\"61.504\" y=\"55.012\" transform=\"matrix(0.9867 0.1627 -0.1627 0.9867 9.9512 -11.2897)\" fill=\"#ccc\" width=\"24.802\" height=\"0.2\"></rect>\n\t\n\t\t<rect x=\"62.307\" y=\"53.794\" transform=\"matrix(0.9869 0.1613 -0.1613 0.9869 9.6707 -11.3365)\" fill=\"#ccc\" width=\"24.7\" height=\"0.2\"></rect>\n\t\n\t\t<rect x=\"63.032\" y=\"52.703\" transform=\"matrix(0.9871 0.1598 -0.1598 0.9871 9.4071 -11.3678)\" fill=\"#ccc\" width=\"24.698\" height=\"0.2\"></rect>\n\t\n\t\t<rect x=\"63.686\" y=\"51.504\" transform=\"matrix(0.9874 0.1584 -0.1584 0.9874 9.1338 -11.3925)\" fill=\"#ccc\" width=\"24.702\" height=\"0.2\"></rect>\n\t\n\t\t<rect x=\"64.398\" y=\"50.279\" transform=\"matrix(0.9876 0.1569 -0.1569 0.9876 8.8552 -11.4179)\" fill=\"#ccc\" width=\"24.7\" height=\"0.2\"></rect>\n\t\n\t\t<rect x=\"65.089\" y=\"49.109\" transform=\"matrix(0.9879 0.1554 -0.1554 0.9879 8.5867 -11.4281)\" fill=\"#ccc\" width=\"24.602\" height=\"0.2\"></rect>\n\t\n\t\t<rect x=\"65.908\" y=\"47.914\" transform=\"matrix(0.9881 0.1539 -0.1539 0.9881 8.3209 -11.464)\" fill=\"#ccc\" width=\"24.6\" height=\"0.2\"></rect>\n\t\n\t\t<rect x=\"66.576\" y=\"46.783\" transform=\"matrix(0.9883 0.1525 -0.1525 0.9883 8.0799 -11.4797)\" fill=\"#ccc\" width=\"24.6\" height=\"0.3\"></rect>\n\t\n\t\t<rect x=\"67.293\" y=\"45.572\" transform=\"matrix(0.9885 0.151 -0.151 0.9885 7.817 -11.4946)\" fill=\"#ccc\" width=\"24.598\" height=\"0.3\"></rect>\n\t\n\t\t<rect x=\"68.221\" y=\"44.095\" transform=\"matrix(0.9885 0.151 -0.151 0.9885 7.604 -11.644)\" fill=\"#ccc\" width=\"24.498\" height=\"0.3\"></rect>\n\t\n\t\t<rect x=\"68.869\" y=\"42.897\" transform=\"matrix(0.9887 0.1496 -0.1496 0.9887 7.3531 -11.6514)\" fill=\"#ccc\" width=\"24.5\" height=\"0.3\"></rect>\n\t\n\t\t<rect x=\"69.703\" y=\"41.615\" transform=\"matrix(0.989 0.148 -0.148 0.989 7.0836 -11.669)\" fill=\"#ccc\" width=\"24.5\" height=\"0.3\"></rect>\n\t\n\t\t<rect x=\"70.494\" y=\"40.399\" transform=\"matrix(0.9892 0.1465 -0.1465 0.9892 6.8333 -11.6846)\" fill=\"#ccc\" width=\"24.5\" height=\"0.3\"></rect>\n\t\n\t\t<rect x=\"71.209\" y=\"39.083\" transform=\"matrix(0.9894 0.145 -0.145 0.9894 6.571 -11.6871)\" fill=\"#ccc\" width=\"24.498\" height=\"0.3\"></rect>\n\t\n\t\t<rect x=\"71.994\" y=\"37.87\" transform=\"matrix(0.9896 0.1436 -0.1436 0.9896 6.3326 -11.6965)\" fill=\"#ccc\" width=\"24.398\" height=\"0.3\"></rect>\n\t\n\t\t<rect x=\"72.7\" y=\"36.622\" transform=\"matrix(0.9899 0.142 -0.142 0.9899 6.0817 -11.6829)\" fill=\"#ccc\" width=\"24.402\" height=\"0.3\"></rect>\n\t\n\t\t<rect x=\"73.47\" y=\"35.4\" transform=\"matrix(0.9901 0.1406 -0.1406 0.9901 5.8491 -11.6918)\" fill=\"#ccc\" width=\"24.402\" height=\"0.3\"></rect>\n\t\n\t\t<rect x=\"74.301\" y=\"34.116\" transform=\"matrix(0.9903 0.139 -0.139 0.9903 5.6026 -11.6909)\" fill=\"#ccc\" width=\"24.4\" height=\"0.3\"></rect>\n\t\n\t\t<rect x=\"74.981\" y=\"32.877\" transform=\"matrix(0.9905 0.1375 -0.1375 0.9905 5.3689 -11.6669)\" fill=\"#ccc\" width=\"24.3\" height=\"0.3\"></rect>\n\t\n\t\t<rect x=\"75.797\" y=\"31.589\" transform=\"matrix(0.9907 0.136 -0.136 0.9907 5.1337 -11.6659)\" fill=\"#ccc\" width=\"24.3\" height=\"0.3\"></rect>\n\t\n\t\t<rect x=\"34.776\" y=\"53.079\" transform=\"matrix(0.9862 0.1657 -0.1657 0.9862 9.4575 -7.0074)\" fill=\"#ccc\" width=\"23.902\" height=\"0.2\"></rect>\n\t\n\t\t<rect x=\"35.624\" y=\"51.901\" transform=\"matrix(0.9864 0.1642 -0.1642 0.9864 9.1845 -7.1059)\" fill=\"#ccc\" width=\"23.898\" height=\"0.2\"></rect>\n\t\n\t\t<rect x=\"36.275\" y=\"50.799\" transform=\"matrix(0.9867 0.1628 -0.1628 0.9867 8.9293 -7.1718)\" fill=\"#ccc\" width=\"23.902\" height=\"0.2\"></rect>\n\t\n\t\t<rect x=\"37.005\" y=\"49.703\" transform=\"matrix(0.9869 0.1613 -0.1613 0.9869 8.6744 -7.2443)\" fill=\"#ccc\" width=\"23.9\" height=\"0.2\"></rect>\n\t\n\t\t<rect x=\"37.833\" y=\"48.494\" transform=\"matrix(0.9871 0.1598 -0.1598 0.9871 8.4049 -7.323)\" fill=\"#ccc\" width=\"23.798\" height=\"0.2\"></rect>\n\t\n\t\t<rect x=\"38.486\" y=\"47.403\" transform=\"matrix(0.9874 0.1584 -0.1584 0.9874 8.1603 -7.3814)\" fill=\"#ccc\" width=\"23.802\" height=\"0.2\"></rect>\n\t\n\t\t<rect x=\"39.214\" y=\"46.189\" transform=\"matrix(0.9876 0.1569 -0.1569 0.9876 7.896 -7.4465)\" fill=\"#ccc\" width=\"23.8\" height=\"0.2\"></rect>\n\t\n\t\t<rect x=\"40.028\" y=\"45.1\" transform=\"matrix(0.9879 0.1554 -0.1554 0.9879 7.6546 -7.5202)\" fill=\"#ccc\" width=\"23.8\" height=\"0.2\"></rect>\n\t\n\t\t<rect x=\"40.672\" y=\"43.998\" transform=\"matrix(0.9881 0.154 -0.154 0.9881 7.418 -7.57)\" fill=\"#ccc\" width=\"23.802\" height=\"0.2\"></rect>\n\t\n\t\t<rect x=\"41.387\" y=\"42.775\" transform=\"matrix(0.9883 0.1525 -0.1525 0.9883 7.1687 -7.6166)\" fill=\"#ccc\" width=\"23.7\" height=\"0.3\"></rect>\n\t\n\t\t<rect x=\"42.215\" y=\"41.705\" transform=\"matrix(0.9885 0.151 -0.151 0.9885 6.9403 -7.684)\" fill=\"#ccc\" width=\"23.698\" height=\"0.3\"></rect>\n\t\n\t\t<rect x=\"43.113\" y=\"40.188\" transform=\"matrix(0.9885 0.151 -0.151 0.9885 6.7215 -7.837)\" fill=\"#ccc\" width=\"23.698\" height=\"0.3\"></rect>\n\t\n\t\t<rect x=\"43.89\" y=\"39.023\" transform=\"matrix(0.9888 0.1495 -0.1495 0.9888 6.482 -7.8852)\" fill=\"#ccc\" width=\"23.602\" height=\"0.3\"></rect>\n\t\n\t\t<rect x=\"44.598\" y=\"37.801\" transform=\"matrix(0.989 0.148 -0.148 0.989 6.2377 -7.9288)\" fill=\"#ccc\" width=\"23.6\" height=\"0.3\"></rect>\n\t\n\t\t<rect x=\"45.389\" y=\"36.576\" transform=\"matrix(0.9892 0.1465 -0.1465 0.9892 5.9975 -7.982)\" fill=\"#ccc\" width=\"23.6\" height=\"0.3\"></rect>\n\t\n\t\t<rect x=\"46.206\" y=\"35.386\" transform=\"matrix(0.9894 0.145 -0.145 0.9894 5.766 -8.0354)\" fill=\"#ccc\" width=\"23.598\" height=\"0.3\"></rect>\n\t\n\t\t<rect x=\"47.02\" y=\"34.196\" transform=\"matrix(0.9896 0.1435 -0.1435 0.9896 5.5377 -8.0854)\" fill=\"#ccc\" width=\"23.598\" height=\"0.3\"></rect>\n\t\n\t\t<rect x=\"47.774\" y=\"33.01\" transform=\"matrix(0.9899 0.142 -0.142 0.9899 5.3118 -8.1163)\" fill=\"#ccc\" width=\"23.502\" height=\"0.3\"></rect>\n\t\n\t\t<rect x=\"48.474\" y=\"31.786\" transform=\"matrix(0.9901 0.1405 -0.1405 0.9901 5.0843 -8.1446)\" fill=\"#ccc\" width=\"23.5\" height=\"0.3\"></rect>\n\t\n\t\t<rect x=\"49.294\" y=\"30.494\" transform=\"matrix(0.9903 0.139 -0.139 0.9903 4.852 -8.1876)\" fill=\"#ccc\" width=\"23.5\" height=\"0.3\"></rect>\n\t\n\t\t<rect x=\"50.123\" y=\"29.321\" transform=\"matrix(0.9905 0.1374 -0.1374 0.9905 4.6362 -8.2219)\" fill=\"#ccc\" width=\"23.5\" height=\"0.3\"></rect>\n\t\n\t\t<rect x=\"50.891\" y=\"28.082\" transform=\"matrix(0.9907 0.136 -0.136 0.9907 4.4212 -8.2502)\" fill=\"#ccc\" width=\"23.4\" height=\"0.3\"></rect>\n</g>\n<g id=\"shadow\">\n\t<path fill=\"#000\" d=\"M68.3,42.4l0.6-1l-1-0.2l7-11.3l-0.7-0.1l-7.6,12.3l-23.4-3.6l0.7-1l-1.1-0.2l7.1-10.9l-0.7-0.1l-7.7,11.9l-24.2-3.7\n\t\tL17,34.9l23.2,3.5l-0.7,1l1.1,0.2l-7.3,11.2L8.9,46.7l-0.3,0.4L32,51l-0.6,1l1,0.2l-7.7,11.9l0.6,0.1l8.4-12.9l23.6,4l-0.6,1l1,0.2\n\t\tl-7.6,12.3l0.7,0.1L59,55.6l25.5,4.3l0.3-0.4l-24.4-4.1l0.6-1l-1-0.2l7.2-11.6l25.3,3.9l0.2-0.4L68.3,42.4z M58.6,55.2l-23.6-4\n\t\tl0.6-1l-1-0.2l7.3-11.2l23.4,3.6l-0.6,1l1,0.2L58.6,55.2z\"></path>\n</g>\n<g id=\"hlight\">\n\t\n\t\t<rect x=\"1.601\" y=\"70.319\" transform=\"matrix(0.9843 0.1767 -0.1767 0.9843 13.0946 -5.9139)\" fill=\"#f2f2f2\" width=\"76.306\" height=\"0.5\"></rect>\n<text id=\"watts\" name=\"watts\" x = \"40\" y = \"20\" fill= \"blue\" style=\"font-family:verdana;font-weight:bold; font-size:10px\">266 W</text>\n</g>\n</g></svg></svg>","clickableShapes":[],"smilAnimations":[],"bindings":[],"showCoordinates":false,"autoFormatAfterEdit":false,"outputField":"payload","editorUrl":"http://drawsvg.org/drawsvg.html","directory":"","name":"","x":560,"y":220,"wires":[[]]},{"id":"5b90fdc6.6d0af4","type":"inject","z":"1fbbbe5c.b86de2","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":180,"y":220,"wires":[["db2b475d.93c3f8"]]},{"id":"db2b475d.93c3f8","type":"function","z":"1fbbbe5c.b86de2","name":"Change fill style","func":"msg.payload = {\n\"command\": \"update_style\",\n\"selector\": \"#panels\",\n\"attributeName\": \"fill\",\n\"attributeValue\": \"orange\"\n}\n\nreturn msg;","outputs":1,"noerr":0,"x":360,"y":220,"wires":[["7bfe8fa1.78341"]]},{"id":"df5f317f.eb69","type":"ui_group","z":"","name":"Default","tab":"a523cf7e.798ec","disp":true,"width":"6","collapse":false},{"id":"a523cf7e.798ec","type":"ui_tab","z":"","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]
Perhaps my CSS master (@Steve-Mcl) can explain this better than me, but I think it is related to this quote that I have added some time ago to that tutorial:
Watch out: (as you can see in the animation) as soon as the CSS style attributes have been applied, the SVG attribute values won't be displayed anymore (due to their lower priority)!
If it works for you now, please don't forget to close this issue. Have fun with it! Bart
Hi Bart,
Thanks for looking at my problem. After stripping things down I found that topic: "databind" was still in, and it was conflicting with command:"update_style". After I removed it things were working great.
Again thanks for all your help. Awesome package that you guys put together.
Cheer Pete
[cid:74aa8ef7-e176-46bf-9b20-ff38aaf2f78e]
From: bartbutenaers notifications@github.com Sent: April 15, 2020 6:03 PM To: bartbutenaers/node-red-contrib-ui-svg node-red-contrib-ui-svg@noreply.github.com Cc: metcalfepete metcalfepete@hotmail.com; Mention mention@noreply.github.com Subject: Re: [bartbutenaers/node-red-contrib-ui-svg] Changing attributes in complex SVG files is a problem (#57)
Hello @metcalfepetehttps://github.com/metcalfepete,
Thanks for the constructive feedback!
In our wiki you can find a tutorial https://github.com/bartbutenaers/node-red-contrib-ui-svg/wiki/Dynamically-change-a-style-attribute-(like-fill-color) about setting styles (e.g. fill). When I change your function code to this:
msg.payload = { "command": "update_style", "selector": "#panels", "attributeName": "fill", "attributeValue": "orange" }
return msg;
Then you will see it works:
[svg_fill_style]https://user-images.githubusercontent.com/14224149/79393136-016c5700-7f75-11ea-889f-46bb785e6db0.gif
Here is the entire flow:
[{"id":"7bfe8fa1.78341","type":"ui_svg_graphics","z":"1fbbbe5c.b86de2","group":"df5f317f.eb69","order":0,"width":"6","height":"19","svgString":"<svg version=\"1.1\" id=\"Layer_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" xml:space=\"preserve\">
Perhaps my CSS master (@Steve-Mclhttps://github.com/Steve-Mcl) can explain this better than me, but I think it is related to this quote that I have added some time ago to that tutorial:
Watch out: (as you can see in the animation) as soon as the CSS style attributes have been applied, the SVG attribute values won't be displayed anymore (due to their lower priority)!
If it works for you now, please don't forget to close this issue. Have fun with it! Bart
- You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://github.com/bartbutenaers/node-red-contrib-ui-svg/issues/57#issuecomment-614302546, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AGEFM4UFVYPT726ZHV6R2CLRMYVJJANCNFSM4MIXNIZA.
Hi Bart,
Thanks for looking at my problem. After stripping things down I found that topic: "databind" was still in, and it was conflicting with command:"update_style". After I removed it things were working great.
Again thanks for all your help. Awesome package that you guys put together.
Cheer Pete
Well I must admit that I already had to use my debugger a number of times, to determine why things aren't working. We definately should improve error handling, to assist our users. Will discuss this with Steve for the 2.0 release...
Hi,
First I've got to say that you've made an awesome component. Excellent work.
I'm finding that when I use simple SVG files everything is good. However when I start to use more complex files things start to break. Attached is my SVG file.
solarpanels.svg.zip
I find that I can change attributes in a standalone HTML/Javascript file.
solarpanels.htm.zip
In NodeRed I'm able to change the colour of a text item. I've tried both the "Input Bind" approach and Javascript. The function node code below works:
msg.payload = { "command": "update_attribute", "selector": "#panels", "attributeName": "fill", "attributeValue": "orange" } msg.topic= "update_attribute";
//msg.topic = "databind";
return msg;
But I'm unable to change the "panels" item in NodeRed, with similar code:
msg.payload = { "command": "update_attribute", "selector": "#panels", "attributeName": "fill", "attributeValue": "orange" } msg.topic= "update_attribute";
//msg.topic = "databind";
return msg;
FYI: My goal is to use MQTT devices send IoT info NodeRed with SVG graphics
Again thanks for all the great work that you've done on the SVG node.
Cheers Pete