Detect Keypress events in Dashboard

README.md

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

flow.json

[
    {
        "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
    }
]