Skip to content
This repository has been archived by the owner on Aug 10, 2024. It is now read-only.

input bind tab with css variables #72

Open
egs2003 opened this issue Oct 8, 2020 · 1 comment
Open

input bind tab with css variables #72

egs2003 opened this issue Oct 8, 2020 · 1 comment

Comments

@egs2003
Copy link

egs2003 commented Oct 8, 2020

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
Copy link
Owner

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

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants