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

Use databinding to simplify the input message structure

Jump to bottom
bartbutenaers edited this page Feb 26, 2020 · 1 revision

An SVG attribute value can easily be changed via an input message.

For example another tutorial explains how to change the fill color via following input msg.payload:

{
    "selector": "#cam_living_room",
    "attributeName": "fill",
    "attributeValue": "yellow"
}

However in some cases the flow might become a bit complex/messy in order to compose such input messages. To allow the simplification of input messages, databinding has been provided in the SVG node.

To use this feature, add a new line to the "Input bind" tabsheet:

Config screen

Let's explain the line items that have been entered:

  • Binding source: specify which field from the input message needs to be read.
  • Selector: specifies to which SVG element(s) the new attribute value needs to be applied.
  • Binding destination: specifies which 'attribute' (or 'text') needs to get the new value.

So in this example we have specified that "The value of msg.payload.color needs to be applied to the fill attribute of the SVG element with id cam_living_room".

As a result the required input message becomes very simple:

  • The msg.payload contains only the attribute value: 
    {
   "color": "yellow"
}
  • The msg.topic should contain the text value databind, otherwise nothing will happen!!!!!

The following example flow will demonstrate this databinding mechanism:

Example flow

[{"id":"8f0e54d7.4d1668","type":"ui_svg_graphics","z":"d9a54719.b13a88","group":"8d3148e0.0eee88","order":1,"width":"14","height":"10","svgString":"<svg preserveAspectRatio=\"none\" x=\"0\" y=\"0\" viewBox=\"0 0 900 710\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:svg=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\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=\"pir_living\" cx=\"310\" cy=\"45\" r=\"5\" stroke-width=\"0\" fill=\"#FF0000\" />\n  <text id=\"cam_living_room\" x=\"310\" y=\"45\" font-family=\"FontAwesome\" fill=\"green\" stroke=\"green\" font-size=\"35\" text-anchor=\"middle\" alignment-baseline=\"middle\" stroke-width=\"1\"></text>\n</svg> ","clickableShapes":[{"targetId":"#cam_living_room","action":"click","payload":"camera_living","payloadType":"str","topic":"camera_living"}],"smilAnimations":[],"bindings":[{"selector":"#cam_living_room","bindSource":"payload.color","bindType":"attr","attribute":"fill"}],"showCoordinates":false,"autoFormatAfterEdit":false,"outputField":"","editorUrl":"http://drawsvg.org/drawsvg.html","directory":"","name":"","x":560,"y":460,"wires":[[]]},{"id":"a5398780.b8dc68","type":"inject","z":"d9a54719.b13a88","name":"set fill attribute to yellow","topic":"databind","payload":"{\"color\":\"yellow\"}","payloadType":"json","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":300,"y":460,"wires":[["8f0e54d7.4d1668"]]},{"id":"f3033699.baf7b8","type":"inject","z":"d9a54719.b13a88","name":"set fill attribute to pink","topic":"databind","payload":"{\"color\":\"pink\"}","payloadType":"json","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":300,"y":500,"wires":[["8f0e54d7.4d1668"]]},{"id":"8d3148e0.0eee88","type":"ui_group","z":"","name":"Floorplan test","tab":"93e19e4f.b80ed","disp":true,"width":"14","collapse":false},{"id":"93e19e4f.b80ed","type":"ui_tab","z":"","name":"SVG","icon":"dashboard","disabled":false,"hidden":false}]

Which will behave identical to the complex input message:

bind_color_demo

Clone this wiki locally