Input msg event

docs/tabsheet_js.md

@@ -11,6 +11,8 @@ When adding a new line in this tab sheet, several properties need to be entered:
 
 Note that there is a *'fullscreen"* button at every row, to show the Javascript code in a fullscreen editor with syntax highlighting!
 
+## Js events explained
+
 Two things will happen when an event occurs on such an SVG element:
 1. The mouse ***cursor*** will change when hoovering above the element, to visualize that an element responds to events.
 1. The Javascript code will be executed in the dashboard.
@@ -27,6 +29,8 @@ Which will result in this:
 
 ![javascript flow demo](https://user-images.githubusercontent.com/14224149/97641343-f83f6500-1a42-11eb-957e-4180e64f37cb.gif)
 
+## Events versus Js events
+
 The main ***difference*** between the events on the "Event" tabsheet and Javascript events on the "JS" tabsheet:
 + The "Event" tabsheet is used when an event simply needs to send an output message, which in turn can trigger some other nodes in the flow on the server.  E.g. click a light-bulb icon to turn on the lights in your smart home.
 
@@ -46,3 +50,17 @@ Note that there is some overlap between the events on both tabsheets:
    $scope.send({payload: color, topic: 'circle_color'})
    ```
    However it is much easier to use a normal event handler, which sends a message (incl. bounding box and all coordinates) without any coding...
+
+## Input msg event
+
+It is possible to select the "input msg" event.  This isn't a real event (on an SVG shape), but it means the corresponding JS event handler will be triggered as soon as an input message arrives.
+
+When the input message is only used to trigger such an event, the `msg.topic` can be set to ***"custom_msg"***.  In that case the message will be ignored by this node, which means it will not be validated and it will be used only to trigger input-msg event handlers.  This way you can store custom data in the `msg.payload`, which can be used inside the JS event handler.
+
+In the following example flow, the JS event handler will apply a color to the circle based on the payload value:
+
+![custom_msg_demo](https://user-images.githubusercontent.com/14224149/142291397-6c507ea4-c927-40e2-ba35-4d2b4d2991d5.gif)
+
+```
+[{"id":"708b561a27277730","type":"ui_svg_graphics","z":"dd961d75822d1f62","group":"8d3148e0.0eee88","order":2,"width":"24","height":"14","svgString":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" xmlns:drawsvg=\"http://www.drawsvg.org\" id=\"svgMap\" x=\"0\" y=\"0\" viewBox=\"0 0 1920 1200\" width=\"100%\" height=\"100%\" preserveAspectRatio=\"xMidYMid meet\">\n  <circle id=\"my_circle\" cx=\"50\" cy=\"50\" r=\"40\" fill=\"green\" />\n</svg>","clickableShapes":[],"javascriptHandlers":[{"selector":"","action":"msg","sourceCode":"debugger\nswitch (msg.payload) {\n   case 'A':\n        $(\"#my_circle\").css(\"fill\", \"red\");\n        break;\n   case 'B':\n        $(\"#my_circle\").css(\"fill\", \"blue\");\n        break;    \n}"}],"smilAnimations":[],"bindings":[],"showCoordinates":false,"autoFormatAfterEdit":false,"showBrowserErrors":false,"showBrowserEvents":false,"enableJsDebugging":false,"sendMsgWhenLoaded":false,"noClickWhenDblClick":true,"outputField":"payload","editorUrl":"//drawsvg.org/drawsvg.html","directory":"","panning":"disabled","zooming":"disabled","panOnlyWhenZoomed":false,"doubleClickZoomEnabled":false,"mouseWheelZoomEnabled":false,"dblClickZoomPercentage":150,"cssString":"div.ui-svg svg{\n    color: var(--nr-dashboard-widgetColor);\n    fill: currentColor !important;\n}\ndiv.ui-svg path {\n    fill: inherit !important;\n}","name":"","x":1640,"y":220,"wires":[[]]},{"id":"9b0da432d1259189","type":"inject","z":"dd961d75822d1f62","name":"Value A","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"custom_msg","payload":"A","payloadType":"str","x":1450,"y":220,"wires":[["708b561a27277730"]]},{"id":"77d60b330942c145","type":"inject","z":"dd961d75822d1f62","name":"Value B","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"custom_msg","payload":"B","payloadType":"str","x":1450,"y":260,"wires":[["708b561a27277730"]]},{"id":"8d3148e0.0eee88","type":"ui_group","name":"7Shield","tab":"9cdb817b.45e12","order":1,"disp":false,"width":"24","collapse":false,"className":""},{"id":"9cdb817b.45e12","type":"ui_tab","name":"Custom msg demo","icon":"dashboard","order":41,"disabled":false,"hidden":false}]
+```