Worldmap Popup button query

Dashboard
1

Hi all, I previously had an open topic regarding this but due to some personal issues and work commitments I was unable to respond before the thread was closed. As it stands this simplified flow exemplifies the issue:

[
    {
        "id": "0883546e4ce0276f",
        "type": "ui_ui_control",
        "z": "e70f83e354d182dd",
        "name": "Dashboard control",
        "events": "all",
        "x": 610,
        "y": 420,
        "wires": [
            []
        ]
    },
    {
        "id": "f9b11faa906e6427",
        "type": "ui_worldmap",
        "z": "e70f83e354d182dd",
        "group": "20ec120557ab9985",
        "order": 1,
        "width": 20,
        "height": 15,
        "name": "dashmap",
        "lat": "50.86928",
        "lon": "-1.85308",
        "zoom": "2",
        "layer": "OSM",
        "cluster": "",
        "maxage": "",
        "usermenu": "show",
        "layers": "show",
        "panit": "false",
        "panlock": "false",
        "zoomlock": "false",
        "hiderightclick": "false",
        "coords": "none",
        "showgrid": "false",
        "allowFileDrop": "true",
        "path": "/dashmap",
        "x": 580,
        "y": 360,
        "wires": []
    },
    {
        "id": "78a5e9a8c97632f2",
        "type": "inject",
        "z": "e70f83e354d182dd",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "",
        "payloadType": "date",
        "x": 240,
        "y": 400,
        "wires": [
            [
                "5a05750ccfc0aef6"
            ]
        ]
    },
    {
        "id": "5a05750ccfc0aef6",
        "type": "function",
        "z": "e70f83e354d182dd",
        "name": "",
        "func": "var codeBlock_true = '<div class=\"content\">' +\n                    '<p>Parent :  Testing</p>' +\n                    '<p>Parent : Testing</p>' +\n                    '<p style=\"color:red\">State : true </p>' +\n                    '<button name=\"History\" onmouseover=\\'addToForm(\"name\",\"testname\"), addToForm(\"node\",\"00.00.00\")\\' onclick=\\'feedback(this.name,\"$form\",\"History\",true)\\'>History</button>' +\n                '</div>';\n                \nmapMsg = {}  \nmapMsg.payload = {}\nmapMsg.payload.name = \"testing\"\nmapMsg.payload.layer = \"Nodes\"\nmapMsg.payload.icon = \"fa-upload\"\nmapMsg.payload.iconColor = \"#ff0000\"\nmapMsg.payload.id = \"node.properties.mesh_address\"\nmapMsg.payload.lon = -1.837366\nmapMsg.payload.lat = 51.004608\nmapMsg.payload.popup = codeBlock_true\nmsg = mapMsg\nreturn msg;",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 380,
        "y": 400,
        "wires": [
            [
                "f9b11faa906e6427",
                "b487a9f634455e72",
                "0883546e4ce0276f"
            ]
        ]
    },
    {
        "id": "b487a9f634455e72",
        "type": "debug",
        "z": "e70f83e354d182dd",
        "name": "",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "false",
        "statusVal": "",
        "statusType": "auto",
        "x": 370,
        "y": 340,
        "wires": []
    },
    {
        "id": "41d441edcb73a221",
        "type": "debug",
        "z": "e70f83e354d182dd",
        "name": "mapevents",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "true",
        "targetType": "full",
        "statusVal": "",
        "statusType": "auto",
        "x": 390,
        "y": 460,
        "wires": []
    },
    {
        "id": "ba349ef0da70acc0",
        "type": "worldmap in",
        "z": "e70f83e354d182dd",
        "name": "",
        "path": "/dashmap",
        "events": "all",
        "x": 220,
        "y": 460,
        "wires": [
            [
                "41d441edcb73a221"
            ]
        ]
    },
    {
        "id": "20ec120557ab9985",
        "type": "ui_group",
        "name": "Map",
        "tab": "ef10a04c.589f3",
        "order": 9,
        "disp": true,
        "width": "20",
        "collapse": false
    },
    {
        "id": "ef10a04c.589f3",
        "type": "ui_tab",
        "name": "Map",
        "icon": "dashboard",
        "order": 1,
        "disabled": false,
        "hidden": false
    }
]

When you click on the icon you should see the 'click' action in the debug window, this works fine. However when you then click on the imbedded button which should send the 'history' action message nothing occurs until after a right click has been made on the map.

For reference the old topic is: Node-RED Worldmap Popup's requiring right click for button to function

Any feedback would be much appreciated.

2

What version of NR and node.js and the dashboard are you running? (all these can be gotten from the startup log)
what browser?

Running your example I notice an error appearing in the browsers console log when you click the 'History' button:
TypeError: undefined is not an object (evaluating 'rclk.lat')
Not sure what that means, but it might give someone else (@dceejay??) an idea...

The button is defined in the function node:

var codeBlock_true = '<div class="content">' +
                    '<p>Parent :  Testing</p>' +
                    '<p>Parent : Testing</p>' +
                    '<p style="color:red">State : true </p>' +
                    '<button name="History" onmouseover=\'addToForm("name","testname"), addToForm("node","00.00.00")\' onclick=\'feedback(this.name,"$form","History",true)\'>History</button>' +
                '</div>';
                
mapMsg = {}  
mapMsg.payload = {}
mapMsg.payload.name = "testing"
mapMsg.payload.layer = "Nodes"
mapMsg.payload.icon = "fa-upload"
mapMsg.payload.iconColor = "#ff0000"
mapMsg.payload.id = "node.properties.mesh_address"
mapMsg.payload.lon = -1.837366
mapMsg.payload.lat = 51.004608
mapMsg.payload.popup = codeBlock_true
msg = mapMsg
return msg;
3

Ah right yes - currently the button name need to be the same as the object so that we can retrieve the lat lon correctly - so '<button name="testing"

1 Like
4

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