How to enter GPS Position in input text field and display it on map

Dashboard
1

Hello,
I am having little trouble as to how I can make a dashboard where a user can enter GPS Position and is then displayed on the map. I have been working with NR for about 7 months now but I got a new task from my supervisor to build a dashboard for a UAV stick which could show position of UAV when GPS coordinates are entered. As an initial starting I have done this till now (flow attached), can anyone guide/help as to how I can achieve this? Thank you.
My current flow is:

[
    {
        "id": "594f4d4bfd9f7699",
        "type": "tab",
        "label": "Flight_Control_SIMULU",
        "disabled": false,
        "info": "",
        "env": []
    },
    {
        "id": "319ff3a15befbaa7",
        "type": "ui_worldmap",
        "z": "594f4d4bfd9f7699",
        "group": "b4ebae93d455bbc5",
        "order": 1,
        "width": 7,
        "height": 10,
        "name": "",
        "lat": "",
        "lon": "",
        "zoom": "",
        "layer": "OSMG",
        "cluster": "",
        "maxage": "",
        "usermenu": "hide",
        "layers": "hide",
        "panit": "true",
        "panlock": "false",
        "zoomlock": "false",
        "hiderightclick": "true",
        "coords": "deg",
        "showgrid": "false",
        "showruler": "false",
        "allowFileDrop": "false",
        "path": "/worldmap",
        "overlist": "DR,CO,RA,DN,HM",
        "maplist": "OSMG,OSMC,EsriC,EsriS,EsriT,EsriDG,UKOS",
        "mapname": "",
        "mapurl": "",
        "mapopt": "",
        "mapwms": false,
        "x": 820,
        "y": 140,
        "wires": []
    },
    {
        "id": "01732bfeeaa6afce",
        "type": "ui_text_input",
        "z": "594f4d4bfd9f7699",
        "name": "",
        "label": "Initial GPS Position",
        "tooltip": "",
        "group": "b4ebae93d455bbc5",
        "order": 2,
        "width": 5,
        "height": 1,
        "passthru": true,
        "mode": "number",
        "delay": "100",
        "topic": "gps",
        "sendOnBlur": true,
        "className": "",
        "topicType": "str",
        "x": 230,
        "y": 320,
        "wires": [
            [
                "bb2883299b8bc021"
            ]
        ]
    },
    {
        "id": "2aeed1b10c6c1515",
        "type": "ui_button",
        "z": "594f4d4bfd9f7699",
        "name": "",
        "group": "b4ebae93d455bbc5",
        "order": 3,
        "width": 5,
        "height": 1,
        "passthru": false,
        "label": "Set",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "",
        "payload": "",
        "payloadType": "str",
        "topic": "set",
        "topicType": "str",
        "x": 230,
        "y": 400,
        "wires": [
            [
                "bb2883299b8bc021"
            ]
        ]
    },
    {
        "id": "bb2883299b8bc021",
        "type": "function",
        "z": "594f4d4bfd9f7699",
        "name": "function 1",
        "func": "var data = context.get(\"data\") || 0;\n\nif (msg.topic == \"gps\"){\n    data = msg.payload;\n    context.set(\"data\",data);\n    return\n}\n\nif(msg.topic == \"set\"){\n    msg.payload = data;\n    \n}\nreturn msg;",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 460,
        "y": 360,
        "wires": [
            [
                "0b8c558142c13b6e"
            ]
        ]
    },
    {
        "id": "0b8c558142c13b6e",
        "type": "debug",
        "z": "594f4d4bfd9f7699",
        "name": "debug 3",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "false",
        "statusVal": "",
        "statusType": "auto",
        "x": 640,
        "y": 360,
        "wires": []
    },
    {
        "id": "b4ebae93d455bbc5",
        "type": "ui_group",
        "name": "UAV Flight Control",
        "tab": "37a720198b072daf",
        "order": 1,
        "disp": true,
        "width": 17,
        "collapse": false,
        "className": ""
    },
    {
        "id": "37a720198b072daf",
        "type": "ui_tab",
        "name": "Flight_Control",
        "icon": "dashboard",
        "order": 2,
        "disabled": false,
        "hidden": false
    }
]
2

What are you entering for a GPS position?
You are feeding nothing into the worldmap node.
Click on the Worldmap node and then in the left sidebar, click on the 'Help' tab and read about the node.

3

Hello @zenofmud ,
This is my updated flow. I want to input the correct lat and lon positions in the input text field and show them on the worldmap. Can you see in my flow where I am doing wrong? Thank you.

[
    {
        "id": "594f4d4bfd9f7699",
        "type": "tab",
        "label": "Flight_Control_SIMULU",
        "disabled": false,
        "info": "",
        "env": []
    },
    {
        "id": "319ff3a15befbaa7",
        "type": "ui_worldmap",
        "z": "594f4d4bfd9f7699",
        "group": "b4ebae93d455bbc5",
        "order": 1,
        "width": 7,
        "height": 10,
        "name": "",
        "lat": "48.80",
        "lon": "13.50",
        "zoom": "",
        "layer": "OSMC",
        "cluster": "",
        "maxage": "",
        "usermenu": "hide",
        "layers": "hide",
        "panit": "true",
        "panlock": "false",
        "zoomlock": "false",
        "hiderightclick": "true",
        "coords": "deg",
        "showgrid": "false",
        "showruler": "false",
        "allowFileDrop": "false",
        "path": "/worldmap",
        "overlist": "DR,CO,RA,DN,AC,HM",
        "maplist": "OSMG,OSMC,EsriC,EsriS,EsriT,EsriDG,UKOS",
        "mapname": "",
        "mapurl": "",
        "mapopt": "",
        "mapwms": false,
        "x": 820,
        "y": 140,
        "wires": []
    },
    {
        "id": "01732bfeeaa6afce",
        "type": "ui_text_input",
        "z": "594f4d4bfd9f7699",
        "name": "",
        "label": "Initial GPS Position",
        "tooltip": "",
        "group": "b4ebae93d455bbc5",
        "order": 2,
        "width": 5,
        "height": 1,
        "passthru": true,
        "mode": "number",
        "delay": "100",
        "topic": "gps",
        "sendOnBlur": true,
        "className": "",
        "topicType": "str",
        "x": 230,
        "y": 320,
        "wires": [
            [
                "bb2883299b8bc021"
            ]
        ]
    },
    {
        "id": "2aeed1b10c6c1515",
        "type": "ui_button",
        "z": "594f4d4bfd9f7699",
        "name": "",
        "group": "b4ebae93d455bbc5",
        "order": 3,
        "width": 5,
        "height": 1,
        "passthru": false,
        "label": "Set",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "",
        "payload": "",
        "payloadType": "str",
        "topic": "set",
        "topicType": "str",
        "x": 230,
        "y": 400,
        "wires": [
            [
                "bb2883299b8bc021"
            ]
        ]
    },
    {
        "id": "bb2883299b8bc021",
        "type": "function",
        "z": "594f4d4bfd9f7699",
        "name": "function 1",
        "func": "var data = context.get(\"data\") || 0;\n\nif (msg.topic == \"gps\"){\n    data = msg.payload;\n    context.set(\"data\",data);\n    return\n}\n\nif(msg.topic == \"set\"){\n    msg.payload = {\n        \"name\": \"SIMULU\",\n        \"lat\": data,\n        \"lon\": 40.00,\n        \"icon\": \"fa-plane\",\n        \"iconColor\": \"blue\",\n        \"layer\": \"gps\"\n    }\n    \n}\nreturn msg;",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 460,
        "y": 360,
        "wires": [
            [
                "0b8c558142c13b6e",
                "2cb3acd121995f56",
                "14927396080798d3"
            ]
        ]
    },
    {
        "id": "0b8c558142c13b6e",
        "type": "debug",
        "z": "594f4d4bfd9f7699",
        "name": "debug 3",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "false",
        "statusVal": "",
        "statusType": "auto",
        "x": 640,
        "y": 500,
        "wires": []
    },
    {
        "id": "2cb3acd121995f56",
        "type": "worldmap-tracks",
        "z": "594f4d4bfd9f7699",
        "name": "",
        "depth": 20,
        "layer": "single",
        "smooth": false,
        "x": 630,
        "y": 280,
        "wires": [
            [
                "14927396080798d3"
            ]
        ]
    },
    {
        "id": "14927396080798d3",
        "type": "worldmap",
        "z": "594f4d4bfd9f7699",
        "name": "",
        "lat": "48.80",
        "lon": "13.50",
        "zoom": "",
        "layer": "OSMC",
        "cluster": "",
        "maxage": "",
        "usermenu": "show",
        "layers": "show",
        "panit": "true",
        "panlock": "false",
        "zoomlock": "false",
        "hiderightclick": "false",
        "coords": "deg",
        "showgrid": "false",
        "showruler": "false",
        "allowFileDrop": "false",
        "path": "/worldmap",
        "overlist": "DR,CO,RA,DN,AC,HM",
        "maplist": "OSMG,OSMC,EsriC,EsriS,EsriT,EsriDG,UKOS",
        "mapname": "",
        "mapurl": "",
        "mapopt": "",
        "mapwms": false,
        "x": 840,
        "y": 360,
        "wires": []
    },
    {
        "id": "b4ebae93d455bbc5",
        "type": "ui_group",
        "name": "UAV Flight Control",
        "tab": "37a720198b072daf",
        "order": 1,
        "disp": true,
        "width": 17,
        "collapse": false,
        "className": ""
    },
    {
        "id": "37a720198b072daf",
        "type": "ui_tab",
        "name": "Flight_Control",
        "icon": "dashboard",
        "order": 2,
        "disabled": false,
        "hidden": false
    }
]
4

Please add a debug node to the output of the 'Initial GPS Position' node and sow me the results.

There’s a great page in the docs (Working with messages : Node-RED) that will explain how to use the debug panel to find the right path to any data item.

Pay particular attention to the part about the buttons that appear under your mouse pointer when you over hover a debug message property in the sidebar.

BX00Cy7yHi

5

@zenofmud Here are the results:

Screenshot from 2022-11-28 14-56-00
Screenshot from 2022-11-28 14-56-001575Ă—594 50.3 KB

6

Now what does the Worldmap node say the input msg.payload should look like? You did go to the 'Help' tab and read about it like I told you to do in my first reply...right?

Also, do you know what a GPS position is?

7

@zenofmud
Here is the actual result on the dashboard when I enter a number for e.g 48.80 as lat value. I can see the icon and it works. But how can I design something where a user can input lat, lon values not just a single value to display that actual lat,lon position in the map?

Screenshot from 2022-11-28 15-32-04
Screenshot from 2022-11-28 15-32-041429Ă—712 111 KB

I know what GPS positions are. It mainly consists of lat, lon and alt values.

9

If you want to enter lat and log, then you need to have two inputs. There are several ways you could do this but you could easily use the ui-form node and get rid of your two ui-text nodes and ui-button node. That would also simplify your function node since all the data would arrive when you hit submit, no need for context variables.

Give it a try, you should be able to get the flow down to 5 nodes

11

@ScheepersJohan The flow you posted does not shows the actual position on the map. I think I need to do some tweaks in it. but thank you.

12

It's worth reading the full readme - node-red-contrib-web-worldmap (node) - Node-RED - as there also a built in uav icon that can align withe the direction of travel (if that is also entered :slight_smile: )

13

Hi @all,
I found the solution to my problem and here is my flow.

[
    {
        "id": "594f4d4bfd9f7699",
        "type": "tab",
        "label": "Flight_Control_SIMULU",
        "disabled": false,
        "info": "",
        "env": []
    },
    {
        "id": "319ff3a15befbaa7",
        "type": "ui_worldmap",
        "z": "594f4d4bfd9f7699",
        "group": "b4ebae93d455bbc5",
        "order": 1,
        "width": 7,
        "height": 10,
        "name": "",
        "lat": "48.80",
        "lon": "13.50",
        "zoom": "",
        "layer": "OSMC",
        "cluster": "0",
        "maxage": "",
        "usermenu": "hide",
        "layers": "hide",
        "panit": "true",
        "panlock": "false",
        "zoomlock": "false",
        "hiderightclick": "true",
        "coords": "deg",
        "showgrid": "false",
        "showruler": "false",
        "allowFileDrop": "false",
        "path": "/worldmap",
        "overlist": "DR,CO,RA,DN,AC,HM",
        "maplist": "OSMG,OSMC,EsriC,EsriS,EsriT,EsriDG,UKOS",
        "mapname": "",
        "mapurl": "",
        "mapopt": "",
        "mapwms": false,
        "x": 1100,
        "y": 40,
        "wires": []
    },
    {
        "id": "01732bfeeaa6afce",
        "type": "ui_text_input",
        "z": "594f4d4bfd9f7699",
        "name": "",
        "label": "Initial Lat Position",
        "tooltip": "",
        "group": "b4ebae93d455bbc5",
        "order": 2,
        "width": 5,
        "height": 1,
        "passthru": true,
        "mode": "number",
        "delay": "100",
        "topic": "lat",
        "sendOnBlur": true,
        "className": "",
        "topicType": "str",
        "x": 130,
        "y": 60,
        "wires": [
            [
                "bb2883299b8bc021"
            ]
        ]
    },
    {
        "id": "2aeed1b10c6c1515",
        "type": "ui_button",
        "z": "594f4d4bfd9f7699",
        "name": "",
        "group": "b4ebae93d455bbc5",
        "order": 3,
        "width": 5,
        "height": 1,
        "passthru": false,
        "label": "Set",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "",
        "payload": "",
        "payloadType": "str",
        "topic": "set",
        "topicType": "str",
        "x": 110,
        "y": 180,
        "wires": [
            [
                "bb2883299b8bc021"
            ]
        ]
    },
    {
        "id": "bb2883299b8bc021",
        "type": "function",
        "z": "594f4d4bfd9f7699",
        "name": "function 1",
        "func": "var data1 = context.get(\"data1\") || 0;\nvar data2 = context.get(\"data2\") || 0;\nvar topic = msg.topic\n\nif(msg.topic == \"lat\"){\n    data1 = msg.payload;\n    context.set(\"data1\", data1);\n    return\n}\n\nif(msg.topic == \"lon\"){\n    data2 = msg.payload;\n    context.set(\"data2\", data2);\n    return\n}\n\nif(msg.topic == \"set\"){\n    msg.payload = {\n        \"name\": \"SIMULU\",\n        \"lat\": data1,\n        \"lon\": data2,\n        \"icon\": \"fa-plane\",\n        \"iconColor\": \"blue\",\n        \"layer\": \"gps\"\n    }\n    \n}\nreturn msg;",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 400,
        "y": 120,
        "wires": [
            [
                "2cb3acd121995f56",
                "14927396080798d3",
                "0b8c558142c13b6e"
            ]
        ]
    },
    {
        "id": "0b8c558142c13b6e",
        "type": "debug",
        "z": "594f4d4bfd9f7699",
        "name": "debug 3",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "false",
        "statusVal": "",
        "statusType": "auto",
        "x": 600,
        "y": 180,
        "wires": []
    },
    {
        "id": "2cb3acd121995f56",
        "type": "worldmap-tracks",
        "z": "594f4d4bfd9f7699",
        "name": "",
        "depth": 20,
        "layer": "single",
        "smooth": false,
        "x": 610,
        "y": 40,
        "wires": [
            [
                "14927396080798d3"
            ]
        ]
    },
    {
        "id": "14927396080798d3",
        "type": "worldmap",
        "z": "594f4d4bfd9f7699",
        "name": "",
        "lat": "48.80",
        "lon": "13.50",
        "zoom": "",
        "layer": "OSMC",
        "cluster": "",
        "maxage": "20",
        "usermenu": "show",
        "layers": "show",
        "panit": "true",
        "panlock": "false",
        "zoomlock": "false",
        "hiderightclick": "false",
        "coords": "deg",
        "showgrid": "false",
        "showruler": "false",
        "allowFileDrop": "false",
        "path": "/worldmap",
        "overlist": "DR,CO,RA,DN,AC,HM",
        "maplist": "OSMG,OSMC,EsriC,EsriS,EsriT,EsriDG,UKOS",
        "mapname": "",
        "mapurl": "",
        "mapopt": "",
        "mapwms": false,
        "x": 800,
        "y": 120,
        "wires": []
    },
    {
        "id": "3f1eed7c26c68aa2",
        "type": "ui_text_input",
        "z": "594f4d4bfd9f7699",
        "name": "",
        "label": "Initial Lon Position",
        "tooltip": "",
        "group": "b4ebae93d455bbc5",
        "order": 4,
        "width": 5,
        "height": 1,
        "passthru": true,
        "mode": "number",
        "delay": "100",
        "topic": "lon",
        "sendOnBlur": true,
        "className": "",
        "topicType": "str",
        "x": 130,
        "y": 120,
        "wires": [
            [
                "bb2883299b8bc021"
            ]
        ]
    },
    {
        "id": "c54c5d20a203a231",
        "type": "ui_spacer",
        "z": "594f4d4bfd9f7699",
        "name": "spacer",
        "group": "b4ebae93d455bbc5",
        "order": 5,
        "width": 5,
        "height": 1
    },
    {
        "id": "cf6fc9b676297060",
        "type": "ui_spacer",
        "z": "594f4d4bfd9f7699",
        "name": "spacer",
        "group": "b4ebae93d455bbc5",
        "order": 6,
        "width": 10,
        "height": 1
    },
    {
        "id": "95cc5f6bfc788478",
        "type": "ui_spacer",
        "z": "594f4d4bfd9f7699",
        "name": "spacer",
        "group": "b4ebae93d455bbc5",
        "order": 7,
        "width": 10,
        "height": 1
    },
    {
        "id": "6c82beb83bb2d30f",
        "type": "ui_spacer",
        "z": "594f4d4bfd9f7699",
        "name": "spacer",
        "group": "b4ebae93d455bbc5",
        "order": 8,
        "width": 10,
        "height": 1
    },
    {
        "id": "0f336232e2e704db",
        "type": "ui_spacer",
        "z": "594f4d4bfd9f7699",
        "name": "spacer",
        "group": "b4ebae93d455bbc5",
        "order": 9,
        "width": 10,
        "height": 1
    },
    {
        "id": "93184948e77a61f7",
        "type": "ui_spacer",
        "z": "594f4d4bfd9f7699",
        "name": "spacer",
        "group": "b4ebae93d455bbc5",
        "order": 10,
        "width": 10,
        "height": 1
    },
    {
        "id": "eb80951c3f36d3f5",
        "type": "ui_spacer",
        "z": "594f4d4bfd9f7699",
        "name": "spacer",
        "group": "b4ebae93d455bbc5",
        "order": 11,
        "width": 10,
        "height": 1
    },
    {
        "id": "5249fcc198ac3103",
        "type": "ui_spacer",
        "z": "594f4d4bfd9f7699",
        "name": "spacer",
        "group": "b4ebae93d455bbc5",
        "order": 12,
        "width": 10,
        "height": 1
    },
    {
        "id": "32be4d30e9b24514",
        "type": "ui_spacer",
        "z": "594f4d4bfd9f7699",
        "name": "spacer",
        "group": "b4ebae93d455bbc5",
        "order": 13,
        "width": 10,
        "height": 1
    },
    {
        "id": "b4ebae93d455bbc5",
        "type": "ui_group",
        "name": "UAV Flight Control",
        "tab": "37a720198b072daf",
        "order": 1,
        "disp": true,
        "width": 17,
        "collapse": false,
        "className": ""
    },
    {
        "id": "37a720198b072daf",
        "type": "ui_tab",
        "name": "Flight_Control",
        "icon": "dashboard",
        "order": 2,
        "disabled": false,
        "hidden": false
    }
]

Next I would want to add a slider for refresh rate which refreshes the map and position of the UAV, but how can I go about it is a little bit confusing, any help in that regard would be great. Thank you.

14

Personally I would have used the form node to simplify things:

Screen Shot 2022-11-29 at 6.06.07 AM
Screen Shot 2022-11-29 at 6.06.07 AM707Ă—184 14.4 KB

[{"id":"64668d69a881beb1","type":"ui_worldmap","z":"bd60f9ebb3e6a070","group":"b4ebae93d455bbc5","order":2,"width":7,"height":10,"name":"","lat":"48.80","lon":"13.50","zoom":"","layer":"OSMC","cluster":"","maxage":"","usermenu":"hide","layers":"hide","panit":"true","panlock":"false","zoomlock":"false","hiderightclick":"true","coords":"deg","showgrid":"false","showruler":"false","allowFileDrop":"false","path":"/worldmap","overlist":"DR,CO,RA,DN,AC,HM","maplist":"OSMG,OSMC,EsriC,EsriS,EsriT,EsriDG,UKOS","mapname":"","mapurl":"","mapopt":"","mapwms":false,"x":720,"y":320,"wires":[]},{"id":"55c67074eab8230d","type":"function","z":"bd60f9ebb3e6a070","name":"function 1","func":"let lat = msg.payload.lat;\nlet lon = msg.payload.lon;\n\nmsg.payload = {\n    \"name\": \"SIMULU\",\n    \"lat\": lat,\n    \"lon\": lon,\n    \"icon\": \"fa-plane\",\n    \"iconColor\": \"blue\",\n    \"layer\": \"gps\"\n}\n  \nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":360,"y":360,"wires":[["4d49beb315ab2936","3a9a1245def7ea53","7c9462484b5a48c7"]]},{"id":"4d49beb315ab2936","type":"debug","z":"bd60f9ebb3e6a070","name":"debug 3","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":540,"y":400,"wires":[]},{"id":"3a9a1245def7ea53","type":"worldmap-tracks","z":"bd60f9ebb3e6a070","name":"","depth":20,"layer":"single","smooth":false,"x":550,"y":320,"wires":[["7c9462484b5a48c7"]]},{"id":"7c9462484b5a48c7","type":"worldmap","z":"bd60f9ebb3e6a070","name":"","lat":"48.80","lon":"13.50","zoom":"","layer":"OSMC","cluster":"","maxage":"","usermenu":"show","layers":"show","panit":"true","panlock":"false","zoomlock":"false","hiderightclick":"false","coords":"deg","showgrid":"false","showruler":"false","allowFileDrop":"false","path":"/worldmap","overlist":"DR,CO,RA,DN,AC,HM","maplist":"OSMG,OSMC,EsriC,EsriS,EsriT,EsriDG,UKOS","mapname":"","mapurl":"","mapopt":"","mapwms":false,"x":720,"y":360,"wires":[]},{"id":"eb5495cb8ca64bcc","type":"ui_form","z":"bd60f9ebb3e6a070","name":"","label":"","group":"b4ebae93d455bbc5","order":8,"width":0,"height":0,"options":[{"label":"Lat","value":"lat","type":"number","required":true,"rows":null},{"label":"Lon","value":"lon","type":"number","required":true,"rows":null}],"formValue":{"lat":"","lon":""},"payload":"","submit":"submit","cancel":"cancel","topic":"topic","topicType":"msg","splitLayout":true,"className":"","x":170,"y":360,"wires":[["55c67074eab8230d"]]},{"id":"b4ebae93d455bbc5","type":"ui_group","name":"UAV Flight Control","tab":"37a720198b072daf","order":1,"disp":true,"width":17,"collapse":false,"className":""},{"id":"37a720198b072daf","type":"ui_tab","name":"Flight_Control","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

How is the data being received? Is there a node that is automatically getting the data? What is the name of the node?

p.s. I edited your last post so the flow could be imported. You need the three back tic's on a seperate line before and after your code.

15

Currently there is no node from where the data is being received. For a test purpose, I have to initialize the lat and lon values by myself and then add a refresh slider -> to refresh the UAV position and worldmap, secondly an altitude slider which the user can set for the altitude, thirdly a speed slider to set the speed of the UAV and lastly four arrow buttons to move the UAV on the worldmap. This is my visualization of the UI.

16

Why not use an inject node set to trigger at a interval and connect that to a function node. In the function node, get a flow variable object 'UAV-state' that will be an object
{"UAV-state": {
"current-lat": 0,
"current-lon": 0,
"height": 0
}
}

Then, seperately, add a random value to each item and store them back in the flow variable object. Then send the data n you msg.payload.

17

And what about the slider functionality for alt, speed and refresh rate? I would like to use the slider to control the altitude, speed and refresh rate of the UAV. Can you give an idea to that?

18

You might want to look at node-red-contrib-ui-joystick that way you could control direction and have a single slider for height and another for refresh rate.

Try playing with that for a bit and see what you can come up with. Read the 'Help' tabs for the nodes.

I'll be out for about 2 hours and will check in with you when I get back.

1 Like
19

Hello @zenofmud , I would like to add a functionality in my flow that every time I press the button up, down, left ,right the icon or UAV should move in that direction but currently if I press it only once the value or UAV goes in that direction only once, so how can I achieve this functionality? any ideas? I would be very thankful to you. This is my current flow:

[
    {
        "id": "594f4d4bfd9f7699",
        "type": "tab",
        "label": "Flight_Control_SIMULU",
        "disabled": false,
        "info": "",
        "env": []
    },
    {
        "id": "319ff3a15befbaa7",
        "type": "ui_worldmap",
        "z": "594f4d4bfd9f7699",
        "group": "b4ebae93d455bbc5",
        "order": 1,
        "width": 9,
        "height": 10,
        "name": "",
        "lat": "48.80",
        "lon": "13.50",
        "zoom": "",
        "layer": "OSMC",
        "cluster": "0",
        "maxage": "",
        "usermenu": "hide",
        "layers": "hide",
        "panit": "true",
        "panlock": "false",
        "zoomlock": "false",
        "hiderightclick": "true",
        "coords": "deg",
        "showgrid": "false",
        "showruler": "false",
        "allowFileDrop": "false",
        "path": "/worldmap",
        "overlist": "DR,CO,RA,DN,AC,HM",
        "maplist": "OSMG,OSMC,EsriC,EsriS,EsriT,EsriDG,UKOS",
        "mapname": "",
        "mapurl": "",
        "mapopt": "",
        "mapwms": false,
        "x": 1100,
        "y": 40,
        "wires": []
    },
    {
        "id": "01732bfeeaa6afce",
        "type": "ui_text_input",
        "z": "594f4d4bfd9f7699",
        "name": "",
        "label": "Initial Lat Position",
        "tooltip": "",
        "group": "b4ebae93d455bbc5",
        "order": 2,
        "width": 6,
        "height": 1,
        "passthru": true,
        "mode": "number",
        "delay": "100",
        "topic": "lat",
        "sendOnBlur": true,
        "className": "",
        "topicType": "str",
        "x": 110,
        "y": 120,
        "wires": [
            [
                "bb2883299b8bc021"
            ]
        ]
    },
    {
        "id": "2aeed1b10c6c1515",
        "type": "ui_button",
        "z": "594f4d4bfd9f7699",
        "name": "",
        "group": "b4ebae93d455bbc5",
        "order": 3,
        "width": 2,
        "height": 1,
        "passthru": false,
        "label": "Set",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "",
        "payload": "",
        "payloadType": "str",
        "topic": "set",
        "topicType": "str",
        "x": 90,
        "y": 200,
        "wires": [
            [
                "bb2883299b8bc021"
            ]
        ]
    },
    {
        "id": "bb2883299b8bc021",
        "type": "function",
        "z": "594f4d4bfd9f7699",
        "name": "function 1",
        "func": "var data1 = global.get(\"data1\") || 0;\nvar data2 = global.get(\"data2\") || 0;\nvar data3 = flow.get(\"data3\") || 0;\nvar topic = msg.topic\n\nif(msg.topic == \"lat\"){\n    data1 = msg.payload;\n    global.set(\"data1\", data1);\n    return\n}\n\nif(msg.topic == \"lon\"){\n    data2 = msg.payload;\n    global.set(\"data2\", data2);\n    return\n}\n\nif(msg.topic == \"alt\"){\n    var dist = data1;\n    var a = dist * Math.tan(data1);\n    var b = dist * Math.tan(data2);\n    data3 = a + b;\n    msg.payload = data3;\n    flow.set(\"data3\", data3);\n    return\n}\n\nif (msg.topic == \"up\") {\n    data1 = data1 + 1;\n    msg.payload = {\n        \"name\": \"SIMULU\",\n        \"lat\": data1,\n        \"layer\": \"gps\"\n    }\n}\n\n\nif(msg.topic == \"down\"){\n    data1 = data1 - 1;\n    msg.payload = {\n        \"name\": \"SIMULU\",\n        \"lat\": data1,\n        \"layer\": \"gps\"\n    }\n}\n\nif(msg.topic == \"left\"){\n    data2 = data2 - 1;\n    msg.payload = {\n        \"name\": \"SIMULU\",\n        \"lon\": data2,\n        \"layer\": \"gps\"\n    }\n}\n\nif(msg.topic == \"right\"){\n    data2 = data2 + 1;\n    msg.payload = {\n        \"name\": \"SIMULU\",\n        \"lon\": data2,\n        \"layer\": \"gps\"\n    }\n}\n\nif(msg.topic == \"set\"){\n    msg.payload = {\n        \"name\": \"SIMULU\",\n        \"lat\": data1,\n        \"lon\": data2,\n        \"alt\": data3,\n        \"icon\": \"fa-plane\",\n        \"iconColor\": \"blue\",\n        \"layer\": \"gps\",\n        \"popped\": true\n    }\n    \n}\nreturn msg;",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 580,
        "y": 140,
        "wires": [
            [
                "2cb3acd121995f56",
                "14927396080798d3",
                "0b8c558142c13b6e"
            ]
        ]
    },
    {
        "id": "0b8c558142c13b6e",
        "type": "debug",
        "z": "594f4d4bfd9f7699",
        "name": "debug 3",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "false",
        "statusVal": "",
        "statusType": "auto",
        "x": 740,
        "y": 200,
        "wires": []
    },
    {
        "id": "2cb3acd121995f56",
        "type": "worldmap-tracks",
        "z": "594f4d4bfd9f7699",
        "name": "",
        "depth": 20,
        "layer": "single",
        "smooth": false,
        "x": 870,
        "y": 40,
        "wires": [
            [
                "14927396080798d3"
            ]
        ]
    },
    {
        "id": "14927396080798d3",
        "type": "worldmap",
        "z": "594f4d4bfd9f7699",
        "name": "",
        "lat": "48.80",
        "lon": "13.50",
        "zoom": "",
        "layer": "OSMC",
        "cluster": "",
        "maxage": "20",
        "usermenu": "show",
        "layers": "show",
        "panit": "true",
        "panlock": "false",
        "zoomlock": "false",
        "hiderightclick": "false",
        "coords": "deg",
        "showgrid": "false",
        "showruler": "false",
        "allowFileDrop": "false",
        "path": "/worldmap",
        "overlist": "DR,CO,RA,DN,AC,HM",
        "maplist": "OSMG,OSMC,EsriC,EsriS,EsriT,EsriDG,UKOS",
        "mapname": "",
        "mapurl": "",
        "mapopt": "",
        "mapwms": false,
        "x": 1120,
        "y": 140,
        "wires": []
    },
    {
        "id": "3f1eed7c26c68aa2",
        "type": "ui_text_input",
        "z": "594f4d4bfd9f7699",
        "name": "",
        "label": "Initial Lon Position",
        "tooltip": "",
        "group": "b4ebae93d455bbc5",
        "order": 4,
        "width": 6,
        "height": 1,
        "passthru": true,
        "mode": "number",
        "delay": "100",
        "topic": "lon",
        "sendOnBlur": true,
        "className": "",
        "topicType": "str",
        "x": 110,
        "y": 160,
        "wires": [
            [
                "bb2883299b8bc021"
            ]
        ]
    },
    {
        "id": "6c78defaf08106ad",
        "type": "ui_slider",
        "z": "594f4d4bfd9f7699",
        "name": "",
        "label": "Altitude",
        "tooltip": "",
        "group": "b4ebae93d455bbc5",
        "order": 6,
        "width": 6,
        "height": 1,
        "passthru": true,
        "outs": "end",
        "topic": "alt",
        "topicType": "str",
        "min": 0,
        "max": "100",
        "step": "0.1",
        "className": "",
        "x": 100,
        "y": 240,
        "wires": [
            [
                "bf273c3b70b21055",
                "bb2883299b8bc021"
            ]
        ]
    },
    {
        "id": "bf273c3b70b21055",
        "type": "function",
        "z": "594f4d4bfd9f7699",
        "name": "function 2",
        "func": "var data = flow.get(\"data\") || 0;\ndata = msg.payload;\nmsg.payload = msg.payload + global.data3;\nflow.set(\"data\", data);\n\nif(msg.topic == \"alt\"){\n    msg.payload = {\n        \"name\": \"SIMULU\",\n        \"alt\": data,\n        \"layer\": \"gps\"\n    }\n}\nreturn msg;",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 340,
        "y": 300,
        "wires": [
            [
                "14927396080798d3"
            ]
        ]
    },
    {
        "id": "bd958146f73af5c1",
        "type": "ui_button",
        "z": "594f4d4bfd9f7699",
        "name": "",
        "group": "b4ebae93d455bbc5",
        "order": 9,
        "width": 6,
        "height": 1,
        "passthru": false,
        "label": "up",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "",
        "payload": "",
        "payloadType": "str",
        "topic": "up",
        "topicType": "str",
        "x": 370,
        "y": 40,
        "wires": [
            [
                "bb2883299b8bc021"
            ]
        ]
    },
    {
        "id": "83cee2bda843d0d2",
        "type": "ui_button",
        "z": "594f4d4bfd9f7699",
        "name": "",
        "group": "b4ebae93d455bbc5",
        "order": 11,
        "width": 6,
        "height": 1,
        "passthru": false,
        "label": "down",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "",
        "payload": "",
        "payloadType": "str",
        "topic": "down",
        "topicType": "str",
        "x": 370,
        "y": 100,
        "wires": [
            [
                "bb2883299b8bc021"
            ]
        ]
    },
    {
        "id": "03aa2f6ba41795a5",
        "type": "ui_button",
        "z": "594f4d4bfd9f7699",
        "name": "",
        "group": "b4ebae93d455bbc5",
        "order": 13,
        "width": 6,
        "height": 1,
        "passthru": false,
        "label": "left",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "",
        "payload": "",
        "payloadType": "str",
        "topic": "left",
        "topicType": "str",
        "x": 370,
        "y": 220,
        "wires": [
            [
                "bb2883299b8bc021"
            ]
        ]
    },
    {
        "id": "7347a00f5de4aab0",
        "type": "ui_button",
        "z": "594f4d4bfd9f7699",
        "name": "",
        "group": "b4ebae93d455bbc5",
        "order": 15,
        "width": 6,
        "height": 1,
        "passthru": false,
        "label": "right",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "",
        "payload": "",
        "payloadType": "str",
        "topic": "right",
        "topicType": "str",
        "x": 450,
        "y": 260,
        "wires": [
            [
                "bb2883299b8bc021"
            ]
        ]
    },
    {
        "id": "da5162007f53f84a",
        "type": "ui_spacer",
        "z": "594f4d4bfd9f7699",
        "name": "spacer",
        "group": "b4ebae93d455bbc5",
        "order": 5,
        "width": 2,
        "height": 1
    },
    {
        "id": "568ad55514974f76",
        "type": "ui_spacer",
        "z": "594f4d4bfd9f7699",
        "name": "spacer",
        "group": "b4ebae93d455bbc5",
        "order": 7,
        "width": 2,
        "height": 1
    },
    {
        "id": "9ee37cbae16930aa",
        "type": "ui_spacer",
        "z": "594f4d4bfd9f7699",
        "name": "spacer",
        "group": "b4ebae93d455bbc5",
        "order": 8,
        "width": 8,
        "height": 1
    },
    {
        "id": "40a1fbfb8a719908",
        "type": "ui_spacer",
        "z": "594f4d4bfd9f7699",
        "name": "spacer",
        "group": "b4ebae93d455bbc5",
        "order": 10,
        "width": 2,
        "height": 1
    },
    {
        "id": "a74ca6865dd325b5",
        "type": "ui_spacer",
        "z": "594f4d4bfd9f7699",
        "name": "spacer",
        "group": "b4ebae93d455bbc5",
        "order": 12,
        "width": 2,
        "height": 1
    },
    {
        "id": "5e21a558c6013ca5",
        "type": "ui_spacer",
        "z": "594f4d4bfd9f7699",
        "name": "spacer",
        "group": "b4ebae93d455bbc5",
        "order": 14,
        "width": 2,
        "height": 1
    },
    {
        "id": "e51b7d57e134cb2b",
        "type": "ui_spacer",
        "z": "594f4d4bfd9f7699",
        "name": "spacer",
        "group": "b4ebae93d455bbc5",
        "order": 16,
        "width": 2,
        "height": 1
    },
    {
        "id": "519946621d2895f0",
        "type": "ui_spacer",
        "z": "594f4d4bfd9f7699",
        "name": "spacer",
        "group": "b4ebae93d455bbc5",
        "order": 17,
        "width": 8,
        "height": 1
    },
    {
        "id": "921f688b0cf3e211",
        "type": "ui_spacer",
        "z": "594f4d4bfd9f7699",
        "name": "spacer",
        "group": "b4ebae93d455bbc5",
        "order": 18,
        "width": 8,
        "height": 1
    },
    {
        "id": "b4ebae93d455bbc5",
        "type": "ui_group",
        "name": "UAV Flight Control",
        "tab": "37a720198b072daf",
        "order": 1,
        "disp": true,
        "width": 17,
        "collapse": false,
        "className": ""
    },
    {
        "id": "37a720198b072daf",
        "type": "ui_tab",
        "name": "Flight_Control",
        "icon": "dashboard",
        "order": 2,
        "disabled": false,
        "hidden": false
    }
]
20

My suggestion (As I have suggested before) would be to use the joystick. You would have to hold it (like in real life) to keep the data coming and it would stop moving when you released it.

Are you going to deal with acceleration? When the UAV is going forward and you push the 'back' button, will the demo slow down forward motion till it gets to 0 then start moving backwards or will it be an instanious back motion>

If you want to use the button, you will have save the last button pushed's payload and feed it back to the function node untill something else is pushed.

You will also have to add a 'stop' button or it will just keep moving. Then think about what happens if altitude gets to zero?? do you blow up the screen (hahaha).

21

Hello @zenofmud ,
I will give your suggestion a try and if I can create something like this it would be a good project. But for now, do you have any idea how to set the speed or track property in the world map ? any example?

22

1 - why are you using some flow contect variables and ome global contect variables?
2 - add a node.warn statement to the code handling the 'right' click in the function node like this:


if(msg.topic == "right"){
    data2 = data2 + 1;
    msg.payload = {
        "name": "SIMULU",
        "lon": data2,
        "layer": "gps"
    }
    node.warn(data2)
}

then click the right key multiple times.

What do you see and why?