Detect Keypress events in Dashboard
Little demo flow of capturing keypress events in the dashboard and then displaying the back into a text widget in realtime. Thanks to hugobox in the Node-RED Slack for the function code
[{"id":"99366da2301717ce","type":"tab","label":"Flow 1","disabled":false,"info":"","env":[]},{"id":"81093c9dbc487b42","type":"ui_template","z":"99366da2301717ce","group":"1184fa1d91ac2538","name":"","order":1,"width":0,"height":0,"format":"<script>\n (function($scope) {\n document.onkeydown = function (e) {\n let msg = {\"payload\": e.key, \"topic\": \"keydown\"};\n $scope.send(msg);\n };\n \n document.onkeyup = function (e) {\n let msg = {\"payload\": e.key, \"topic\": \"keyup\"};\n $scope.send(msg);\n };\n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":160,"y":660,"wires":[["35604768cf5f159f"]]},{"id":"0f33b2ab2975bbed","type":"ui_text","z":"99366da2301717ce","group":"1184fa1d91ac2538","order":2,"width":"0","height":"0","name":"","label":"","format":"{{msg.payload}}","layout":"row-spread","className":"","x":1050,"y":640,"wires":[]},{"id":"b4311ff42d6fdead","type":"change","z":"99366da2301717ce","name":"","rules":[{"t":"delete","p":"text","pt":"flow"}],"action":"","property":"","from":"","to":"","reg":false,"x":1080,"y":600,"wires":[[]]},{"id":"b89ef7f9fef90d00","type":"function","z":"99366da2301717ce","name":"append","func":"var txt = flow.get(\"text\") || \"\";\ntxt += msg.payload\nmsg.payload = txt\nflow.set(\"text\", txt)\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":720,"y":700,"wires":[["0f33b2ab2975bbed"]]},{"id":"35604768cf5f159f","type":"switch","z":"99366da2301717ce","name":"","property":"topic","propertyType":"msg","rules":[{"t":"eq","v":"keydown","vt":"str"}],"checkall":"true","repair":false,"outputs":1,"x":310,"y":660,"wires":[["aba498bb53e66a0a"]]},{"id":"e10542f7393f612f","type":"change","z":"99366da2301717ce","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":740,"y":620,"wires":[["0f33b2ab2975bbed","b4311ff42d6fdead"]]},{"id":"aba498bb53e66a0a","type":"switch","z":"99366da2301717ce","name":"","property":"payload","propertyType":"msg","rules":[{"t":"eq","v":"Enter","vt":"str"},{"t":"eq","v":"Backspace","vt":"str"},{"t":"else"}],"checkall":"true","repair":false,"outputs":3,"x":450,"y":660,"wires":[["e10542f7393f612f"],["658e0aadf8bb2fd4"],["b89ef7f9fef90d00"]]},{"id":"658e0aadf8bb2fd4","type":"function","z":"99366da2301717ce","name":"delete","func":"var txt = flow.get(\"text\") || \"\";\nmsg.payload = txt.slice(0, -1)\nflow.set(\"text\", msg.payload)\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":710,"y":660,"wires":[["0f33b2ab2975bbed"]]},{"id":"1184fa1d91ac2538","type":"ui_group","name":"Default","tab":"9bccee99e8427849","order":1,"disp":true,"width":"12","collapse":false,"className":""},{"id":"9bccee99e8427849","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]
