HTML Events: How To Trigger a Node-Red Message?

General
1

I am a HTML / Node-Red beginner. I want to learn how to use HTML events in the Node-Red Template node, and use that to trigger Node-Red messages via the Template nodes.

I built a HTML blue box, when clicked, will alert. It works in my Node-Red Dashboard, using the Template and Template-ui nodes:

Screen Shot 2022-07-30 at 2.42.54 PM
Screen Shot 2022-07-30 at 2.42.54 PM822×335 6.8 KB

Question: How do I code the HTML "on click" element listener, to send a Node-Red message, from the Template-ui Node?

I found an example using Angular, "ng-change="send(msg)", but is there a pure HTML way to do it?

Here is my simple HTML:

<style>
#box{
    width: 200px;
    height: 200px;
    background: blue;
}
</style>
<div    id = "box" >   </div>
<script>
    const BoxDiv = document.getElementById("box");

    function boxClick(e) {    alert("Test of the Click");  msg.payload = "test"  }

    BoxDiv.addEventListener("click", boxClick  )

</script>

And, here is my "test" flow:

[
    {
        "id": "609696582c501145",
        "type": "tab",
        "label": "Flow 1",
        "disabled": false,
        "info": "",
        "env": []
    },
    {
        "id": "a557a7895dbe03e7",
        "type": "template",
        "z": "609696582c501145",
        "name": "",
        "field": "template",
        "fieldType": "msg",
        "format": "handlebars",
        "syntax": "plain",
        "template": "\n\n<style>\n\n#box{\n\n    width: 200px;\n    height: 200px;\n    background: blue;\n}\n\n\n</style>\n\n<div    id = \"box\" >   </div>\n\n\n<script>\n\n    const BoxDiv = document.getElementById(\"box\");\n\n    function boxClick(e) {    alert(\"Test of the Click\");  msg.payload = \"test\"  }\n\n    BoxDiv.addEventListener(\"click\", boxClick  )\n\n\n</script>\n\n",
        "output": "str",
        "x": 340,
        "y": 220,
        "wires": [
            [
                "e43fd34ea3238e96"
            ]
        ]
    },
    {
        "id": "e43fd34ea3238e96",
        "type": "ui_template",
        "z": "609696582c501145",
        "group": "68aac522c027a8e4",
        "name": "",
        "order": 9,
        "width": "9",
        "height": "4",
        "format": "",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 520,
        "y": 220,
        "wires": [
            [
                "a2e6ad903ba776e9"
            ]
        ]
    },
    {
        "id": "3f7e823af33770a4",
        "type": "inject",
        "z": "609696582c501145",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "",
        "payloadType": "date",
        "x": 180,
        "y": 220,
        "wires": [
            [
                "a557a7895dbe03e7"
            ]
        ]
    },
    {
        "id": "a2e6ad903ba776e9",
        "type": "debug",
        "z": "609696582c501145",
        "name": "debug 1",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "false",
        "statusVal": "",
        "statusType": "auto",
        "x": 720,
        "y": 220,
        "wires": []
    },
    {
        "id": "68aac522c027a8e4",
        "type": "ui_group",
        "name": "Group 1",
        "tab": "911a0d7d34b66434",
        "order": 1,
        "disp": true,
        "width": "15",
        "collapse": false,
        "className": ""
    },
    {
        "id": "911a0d7d34b66434",
        "type": "ui_tab",
        "name": "HTML",
        "icon": "dashboard",
        "order": 1,
        "disabled": false,
        "hidden": false
    }
]

Alan

2

The dashboard is AngularJS Material (https://material.angularjs.org/latest/) so it's better to use it's functionalities. It's sometimes even easier as the flow below:

[
    {
        "id": "609696582c501145",
        "type": "tab",
        "label": "Flow 1",
        "disabled": false,
        "info": "",
        "env": []
    },
    {
        "id": "e43fd34ea3238e96",
        "type": "ui_template",
        "z": "609696582c501145",
        "group": "68aac522c027a8e4",
        "name": "",
        "order": 9,
        "width": "9",
        "height": "4",
        "format": "<style>\n\n#box{\n\n    width: 200px;\n    height: 200px;\n    background: blue;\n}\n\n\n</style>\n\n<div    id = \"box\" ng-click=\"clickSend($event)\">   </div>\n\n\n<script>\n    \n    scope.clickSend = function(evt){\n        alert(\"Test of the Click\");\n        console.log(evt);\n        this.send({payload:\"test\"});\n    }\n\n</script>",
        "storeOutMessages": false,
        "fwdInMessages": false,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 440,
        "y": 220,
        "wires": [
            [
                "a2e6ad903ba776e9"
            ]
        ]
    },
    {
        "id": "a2e6ad903ba776e9",
        "type": "debug",
        "z": "609696582c501145",
        "name": "debug 1",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "true",
        "targetType": "full",
        "statusVal": "",
        "statusType": "auto",
        "x": 720,
        "y": 220,
        "wires": []
    },
    {
        "id": "68aac522c027a8e4",
        "type": "ui_group",
        "name": "Group 1",
        "tab": "911a0d7d34b66434",
        "order": 1,
        "disp": true,
        "width": "15",
        "collapse": false,
        "className": ""
    },
    {
        "id": "911a0d7d34b66434",
        "type": "ui_tab",
        "name": "HTML",
        "icon": "dashboard",
        "order": 1,
        "disabled": false,
        "hidden": false
    }
]
3

Thanks, knoepsche

A followup question please.

I see you are using a J Query to find the element "event",

Where is the element "event"? Is "event" an element in the event object, or is it the full event object?

I did look at the console.log, which returns the parameter, "evt", for the event object, but could not find it.

Alan

4

$event should own the browsers event objekt.

https://www.w3schools.com/angular/angular_events.asp

5

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.