Create interactive light bulb icon - bartbutenaers/node-red-contrib-ui-svg GitHub Wiki

Create an interactive light-bulb icon

Add a light-bulb icon to the drawing

  1. Put an Svg-graphics node on your flow:

    image

  2. Open the DrawSvg drawing editor:

    image

  3. Insert a light-bulb FontAwesome icon:

    image

  4. Now left click with the mouse on the drawing, and keep the mouse down while dragging until the icon has the required size and location.

    image

  5. Click on the icon's properties and specify an id (e.g. "my_light_bulb"), to make sure you can identify it afterwards:

    image

    You can specify other properties here, e.g. like the fill color and so on ...

  6. Close the DrawSvg popup window, and save your changes to the SVG node in Node-RED:

    image

  7. Press the 'Done' button to leave the node's config screen.

  8. After pressing 'Deploy', the light-bulb icon becomes visible on your drawing in the Node-RED dashboard:

    image

Make the icon clickable

  1. Wire a Debug-node to the output of the SVG-node:

    image

  2. Go the 'Events' tabsheet on the node's config screen.

  3. Press the 'Add' button to add a new event row. As soon as you start entering the id of your icon, you will see that an autocomplete list will be filled with all available identifiers:

    image

  4. After entering our id "#my_light_bulb" (note that the # is the most simple css selector to specify a single id), you can specify your entire output message here also:

    image

    Note that 'click' is the default event, but other events can also be specified.

  5. Press the 'Done' button to leave the node's config screen.

  6. After pressing 'Deploy', the light-bulb icon becomes clickable on your drawing in the Node-RED dashboard (i.e. the mouse cursor gets another shape when hoovering the icon):

    clickable_icon

  7. As soon as you click the icon, an output message will be send (containing the content you have specified above):

    image

  8. That output message can be used in your Node-RED flow to trigger other actions...

Make the icon controllable

  1. Wire an Inject-node to the input of the SVG-node:

  2. Let's specify a JSON payload (in the Inject-node), to turn the color of the light-bulb to red:

    {
   "command": "update_style",
   "selector": "#my_light_bulb",
   "attributeName": "fill",
   "attributeValue": "red"
}

    Depending on the attribute you want to change, different input messages are possible. But in this case the fill color is a 'style' attribute, which we apply on the element with id 'my_light_bulb' (again the # is required to have a css selector for a single element id).

  3. Press the 'Deploy' button.

  4. As soon as you inject the message, the light bulb will become red in the dashboard:

    image

Here is the example flow of this tutorial:

[{"id":"d933559c.703508","type":"ui_svg_graphics","z":"9f1652ec.e8236","group":"6bfff10e.f6969","order":1,"width":"14","height":"10","svgString":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:svg=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" preserveAspectRatio=\"none\" x=\"0\" y=\"0\" viewBox=\"0 -0.05780346691608429 900 710.1156005859375\" width=\"100%\" height=\"100%\">\n  <defs id=\"svgEditorDefs\">\n    <symbol xmlns=\"http://www.w3.org/2000/svg\" id=\"f03d\" preserveAspectRatio=\"xMidYMid meet\" viewBox=\"0 0 576 512\">\n      <path d=\"M336.2 64H47.8C21.4 64 0 85.4 0 111.8v288.4C0 426.6 21.4 448 47.8 448h288.4c26.4 0 47.8-21.4 47.8-47.8V111.8c0-26.4-21.4-47.8-47.8-47.8zm189.4 37.7L416 177.3v157.4l109.6 75.5c21.2 14.6 50.4-.3 50.4-25.8V127.5c0-25.4-29.1-40.4-50.4-25.8z\" />\n    </symbol>\n    <polygon id=\"svgEditorIconDefs\" style=\"fill:rosybrown;\" />\n    <symbol xmlns=\"http://www.w3.org/2000/svg\" id=\"f0eb\" preserveAspectRatio=\"xMidYMid meet\" viewBox=\"0 0 352 512\">\n      <path d=\"M96.06 454.35c.01 6.29 1.87 12.45 5.36 17.69l17.09 25.69a31.99 31.99 0 0 0 26.64 14.28h61.71a31.99 31.99 0 0 0 26.64-14.28l17.09-25.69a31.989 31.989 0 0 0 5.36-17.69l.04-38.35H96.01l.05 38.35zM0 176c0 44.37 16.45 84.85 43.56 115.78 16.52 18.85 42.36 58.23 52.21 91.45.04.26.07.52.11.78h160.24c.04-.26.07-.51.11-.78 9.85-33.22 35.69-72.6 52.21-91.45C335.55 260.85 352 220.37 352 176 352 78.61 272.91-.3 175.45 0 73.44.31 0 82.97 0 176zm176-80c-44.11 0-80 35.89-80 80 0 8.84-7.16 16-16 16s-16-7.16-16-16c0-61.76 50.24-112 112-112 8.84 0 16 7.16 16 16s-7.16 16-16 16z\" />\n    </symbol>\n  </defs>\n  <rect id=\"svgEditorBackground\" x=\"0\" y=\"0\" width=\"900\" height=\"710\" style=\"fill: none; stroke: none;\" />\n  <image width=\"889\" height=\"703\" id=\"background\" xlink:href=\"https://www.roomsketcher.com/wp-content/uploads/2016/10/1-Bedroom-Floor-Plans.jpg\" />\n  <circle id=\"mycircle\" cx=\"182.901\" cy=\"91.4841\" style=\"fill:rosybrown;stroke:black;stroke-width:1px;\" r=\"48\" />\n  <use xlink:href=\"#f03d\" x=\"408.63543701169755\" y=\"468.86914062501455\" width=\"57.22543352601201\" height=\"50.867052023121786\" id=\"my_icon\" style=\"fill:blue;\" />\n  <use xlink:href=\"#f0eb\" x=\"323.444542001759\" y=\"62.398229632181\" width=\"54.624894157494\" height=\"79.45439150180945\" id=\"my_light_bulb\" style=\"fill:rosybrown;\" />\n</svg>","clickableShapes":[{"targetId":"#my_light_bulb","action":"click","payload":"my_output_value","payloadType":"str","topic":"my_topic"}],"smilAnimations":[],"bindings":[{"selector":"#banner","bindSource":"payload.title","bindType":"text","attribute":""},{"selector":"#camera_living","bindSource":"payload.position.x","bindType":"attr","attribute":"x"},{"selector":"#camera_living","bindSource":"payload.camera.colour","bindType":"attr","attribute":"fill"}],"showCoordinates":false,"autoFormatAfterEdit":false,"outputField":"my_output_field","editorUrl":"http://drawsvg.org/drawsvg.html","directory":"","name":"","x":500,"y":160,"wires":[["43d0f52a.3a275c"]]},{"id":"63aa05f8.1f41cc","type":"inject","z":"9f1652ec.e8236","name":"Set color red","topic":"","payload":"{\"command\":\"update_style\",\"selector\":\"#my_light_bulb\",\"attributeName\":\"fill\",\"attributeValue\":\"red\"}","payloadType":"json","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":290,"y":160,"wires":[["d933559c.703508"]]},{"id":"43d0f52a.3a275c","type":"debug","z":"9f1652ec.e8236","name":"SVG event","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","x":720,"y":160,"wires":[]},{"id":"6bfff10e.f6969","type":"ui_group","z":"","name":"Floorplan test","tab":"142bc95.bfbb637","disp":true,"width":"14","collapse":false},{"id":"142bc95.bfbb637","type":"ui_tab","z":"","name":"SVG","icon":"dashboard","disabled":false,"hidden":false}]
⚠️ **GitHub.com Fallback** ⚠️