Home

Welcome to the node-red-contrib-ui-svg wiki!

Step-by-step tutorials:

• Getting started with the UI SVG node
• Create an SVG path without editor (and start troubleshooting)
• Apply an event to multiple shapes using CSS selectors
• Add an interactive light-bulb icon
• Creating light sources
• Start and stop animations via input messages
• Dynamically change a style attribute (like fill color)
• Use databinding to simplify the input message structure
• Create a reusable definition (like a LED)
• Add an image to an SVG drawing
• Apply internal CSS style(sheet)s
• Troubleshooting JS event handlers
• Manipulate the viewbox
• Managing multiple floors
• Enlarge the clickable area of a light bulb icon
• Create a client side timer in Javascript (and store it in the $scope)
• Use non SVG html elements (as foreign elements)
• Create an electronic switch (by toggling the visibility of two separate groups) +Using timers in Js events (store on the $scope)
• Partially filled shape (based on gradients)
• Fill a shape with a pattern (to create shutter effect)
• Chaining animations
• Display partially filled shapes (like liquid)