bartbutenaers / node-red-contrib-ui-svg

A Node-RED widget node to show interactive SVG (vector graphics) in the dashboard
Apache License 2.0
94 stars 27 forks source link

input bind tab with css variables #72

Open egs2003 opened 3 years ago

egs2003 commented 3 years ago

https://github.com/bartbutenaers/node-red-contrib-ui-svg/wiki/Create-a-reusable-definition-(like-a-LED)

How can I use the input bind tab with this tutorial. I tried to define --ledColor as style attribute und bulish an input of yellow. But that don'T work

[{"id":"54b291eb.44b36","type":"ui_svg_graphics","z":"7b2e7ea7.31838","group":"cde01fc.9478ce","order":5,"width":"0","height":"0","svgString":"<svg x=\"0\" y=\"0\" height=\"200\" viewBox=\"0 0 300 200\" width=\"99%\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:svg=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n\n <g id=\"led\">\n <filter id=\"ledBlur\">\n <feGaussianBlur stdDeviation=\"3\"/>\n \n <circle cx=\"0\" cy=\"0\" r=\"40\" fill=\"var(--ledColor)\" stroke-width=\"0\" filter=\"url(#ledBlur)\"/>\n <circle cx=\"0\" cy=\"0\" r=\"35\" fill=\"var(--ledColor)\" stroke-width=\"1\" stroke=\"black\" />\n \n\n<use id=\"led_one\" href=\"#led\" style=\"--ledColor:red;\" transform=\"translate(50 100) scale(1)\"/>\n<use id=\"led_two\" href=\"#led\" style=\"--ledColor:green;\" transform=\"translate(150 100) scale(1)\"/>\n<use id=\"led_three\" href=\"#led\" style=\"--ledColor:lightgreen;\" transform=\"translate(250 100) scale(1)\"/> \n","clickableShapes":[{"targetId":"#led_one","action":"click","payload":"#led_one","payloadType":"str","topic":"#led_one"}],"smilAnimations":[],"bindings":[{"selector":"#led_two","bindSource":"payload","bindType":"style","attribute":"--ledColor"}],"showCoordinates":false,"autoFormatAfterEdit":false,"showBrowserErrors":false,"outputField":"payload","editorUrl":"//drawsvg.org/drawsvg.html","directory":"","panning":"disabled","zooming":"disabled","panOnlyWhenZoomed":false,"doubleClickZoomEnabled":false,"mouseWheelZoomEnabled":false,"name":"","x":160,"y":220,"wires":[[]]},{"id":"15fbd5c1.ed338a","type":"inject","z":"7b2e7ea7.31838","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"databind","payload":"yellow","payloadType":"str","x":160,"y":440,"wires":[["54b291eb.44b36"]]},{"id":"cde01fc.9478ce","type":"ui_group","z":"","name":"Navigation","tab":"6b7dc995.bce6e8","order":1,"disp":false,"width":"6","collapse":false},{"id":"6b7dc995.bce6e8","type":"ui_tab","z":"","name":"Home","icon":"fa-home fa-lg","order":1,"disabled":false,"hidden":false}]

bartbutenaers commented 3 years ago

Hi Marcel,

Did you export your flow via the Node-RED "export" menu item? Because I'm not able to import it into my flow:

image