# Using a touchscreen to add waypoints on Node-Red-WorldMap Dashboard UI

**URL:** <https://discourse.nodered.org/t/using-a-touchscreen-to-add-waypoints-on-node-red-worldmap-dashboard-ui/51892>\
**Category:** Dashboard\
**Created:** [5 October 2021 21:59 UTC](https://discourse.nodered.org/t/using-a-touchscreen-to-add-waypoints-on-node-red-worldmap-dashboard-ui/51892 "2021-10-05T21:59:12Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![Chapanata](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/chapanata/32/49019_2.png) [@Chapanata](https://discourse.nodered.org/u/Chapanata)\
**Post date:** [5 October 2021 21:59 UTC](https://discourse.nodered.org/t/using-a-touchscreen-to-add-waypoints-on-node-red-worldmap-dashboard-ui/51892/1 "2021-10-05T21:59:12Z")

</div>

Hello I'm building a project that requires a user to add waypoints onto a world map component through the UI using a touchscreen display. The node-red project is being run on a Raspbian OS on a Raspberry Pi 4.

When initially testing everything I was using a mouse and keyboard to add waypoints and had no trouble since it was just right-clicking on the map, entering the name of the waypoint and pressing enter. As you can see here:

 ![Map.PNG](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/9/a976b9cef86614f04fa12a73c10dfff0faa0988f.jpeg)

However, once I switch to using a touchscreen it's not as simple. The main issue being able to enter the name of the waypoint and hit an enter key. I've tried using virtual keyboard packages such as: matchbox, florence, and onboard and the only one that seems to work is florence, but that dashboard is meant to run the browser in fullscreen kiosk mode and florence wont display above the browser.

I've also tried some chrome virtual keyboard extensions but the only that that was close to working was Native Virtual On-Screen Keyboard. It could function in fullscreen mode recognize that the waypoint name was a text input, but clicking enter was not the same as pressing enter on my keyboard.

Now I'm stuck here trying to figure out other options or if there's actually a setting that adds a button to the waypoint that would add it to the map.

Thank you for taking the time to read this.

---

<div class="post-metadata">

**Author:** ![meeki007](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/meeki007/32/12499_2.png) [@meeki007](https://discourse.nodered.org/u/meeki007)\
**Post date:** [6 October 2021 00:46 UTC](https://discourse.nodered.org/t/using-a-touchscreen-to-add-waypoints-on-node-red-worldmap-dashboard-ui/51892/2 "2021-10-06T00:46:34Z")

</div>

You need to look into the section on Utility functions ---\> [https://github.com/dceejay/RedMap#utility-functions](https://github.com/dceejay/RedMap#utility-functions)

This way you can create a button to submit

You can do allot with it. You can even have it send a payload without closing so you can create drop down menus that are loaded from selections! Here is a gif of how I use it to add a camera from motioneye.  
 ![Hnet-image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/9/39204377c6f7ab4fe9a18a11166e0f3c254e4c61.gif)

Here is some example code showing the use of a drop down

```auto
var menu ='<select name="dropdown" onChange=\'addToForm(this.name,this.value)\'><option value="">Select an Option</option><option value="user selected option 1">Option 1</option><option value="user selected option 2">Option 2</option></select><br/>'
menu += 'Add some data <input name="foo" onchange=\'addToForm(this.name,this.value)\'></input><br/>'
menu += 'Add more data <input name="bar" onchange=\'addToForm(this.name,this.value)\'></input><br/>'
menu += '<button name="my_form" onclick=\'feedback(this.name,"$form",null,true)\'>Submit</button>'

msg.payload = { command: { "contextmenu":menu } }
return msg;

```

hope this helps

---

<div class="post-metadata">

**Author:** ![meeki007](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/meeki007/32/12499_2.png) [@meeki007](https://discourse.nodered.org/u/meeki007)\
**Post date:** [6 October 2021 00:57 UTC](https://discourse.nodered.org/t/using-a-touchscreen-to-add-waypoints-on-node-red-worldmap-dashboard-ui/51892/3 "2021-10-06T00:57:53Z")

</div>

oh and Tap-and-hold (long press): Equivalent to right mouse click on android. This should allow you to get the context menu up for the location you want to add a way-point for.

---

<div class="post-metadata">

**Author:** ![Chapanata](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/chapanata/32/49019_2.png) [@Chapanata](https://discourse.nodered.org/u/Chapanata)\
**Post date:** [6 October 2021 03:23 UTC](https://discourse.nodered.org/t/using-a-touchscreen-to-add-waypoints-on-node-red-worldmap-dashboard-ui/51892/4 "2021-10-06T03:23:26Z")

</div>

Thank you for the response I really appreciate the help. I'm still quite new to node-red so the example drop-down code snippet would be something I would put into a function node and then connect that to the ui\_worldmap node to get the drop down?

Also I was able to solve the right-click context menu using the evdev-right-click-emulation package.

---

<div class="post-metadata">

**Author:** ![meeki007](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/meeki007/32/12499_2.png) [@meeki007](https://discourse.nodered.org/u/meeki007)\
**Post date:** [6 October 2021 03:45 UTC](https://discourse.nodered.org/t/using-a-touchscreen-to-add-waypoints-on-node-red-worldmap-dashboard-ui/51892/5 "2021-10-06T03:45:56Z")

</div>

Import this flow

```auto
[
    {
        "id": "972e922f5507a5cc",
        "type": "tab",
        "label": "exampleMAP",
        "disabled": false,
        "info": ""
    },
    {
        "id": "0f03f7dedce7464f",
        "type": "worldmap",
        "z": "972e922f5507a5cc",
        "name": "",
        "lat": "",
        "lon": "",
        "zoom": "",
        "layer": "",
        "cluster": "",
        "maxage": "",
        "usermenu": "show",
        "layers": "show",
        "panit": "false",
        "panlock": "false",
        "zoomlock": "false",
        "hiderightclick": "false",
        "coords": "none",
        "showgrid": "false",
        "allowFileDrop": "false",
        "path": "/example-map",
        "mapname": "",
        "mapurl": "",
        "mapopt": "",
        "mapwms": false,
        "x": 840,
        "y": 120,
        "wires": []
    },
    {
        "id": "f363bf77c609f47d",
        "type": "worldmap in",
        "z": "972e922f5507a5cc",
        "name": "",
        "path": "/example-map",
        "events": "all",
        "x": 130,
        "y": 80,
        "wires": [
            [
                "a2235f4f4eaacea0",
                "396c37ab27050d05"
            ]
        ]
    },
    {
        "id": "ddb61c0ed1e3b237",
        "type": "function",
        "z": "972e922f5507a5cc",
        "name": "",
        "func": "var menu ='enter waypoint</br>'; \nmenu += '<input name=\"waypointValue\" onchange=\\'addToForm(this.name,this.value)\\'></input><br/>'\nmenu +='<center>'\nmenu +='<button name=\"my_form\" onclick=\\'feedback(this.name,\"$form\",null,true)\\'>Submit</button>'\nmenu +='</center>'\nmsg.payload = { command: { \"contextmenu\":menu } }\nreturn msg;\n",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 640,
        "y": 120,
        "wires": [
            [
                "0f03f7dedce7464f"
            ]
        ]
    },
    {
        "id": "a2235f4f4eaacea0",
        "type": "switch",
        "z": "972e922f5507a5cc",
        "name": "action: connected?",
        "property": "payload.action",
        "propertyType": "msg",
        "rules": [
            {
                "t": "eq",
                "v": "connected",
                "vt": "str"
            }
        ],
        "checkall": "true",
        "repair": false,
        "outputs": 1,
        "x": 430,
        "y": 120,
        "wires": [
            [
                "ddb61c0ed1e3b237"
            ]
        ]
    },
    {
        "id": "de115f9821383567",
        "type": "debug",
        "z": "972e922f5507a5cc",
        "name": "",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "true",
        "targetType": "full",
        "statusVal": "",
        "statusType": "auto",
        "x": 630,
        "y": 80,
        "wires": []
    },
    {
        "id": "396c37ab27050d05",
        "type": "switch",
        "z": "972e922f5507a5cc",
        "name": "action: feedback?",
        "property": "payload.action",
        "propertyType": "msg",
        "rules": [
            {
                "t": "eq",
                "v": "feedback",
                "vt": "str"
            }
        ],
        "checkall": "true",
        "repair": false,
        "outputs": 1,
        "x": 430,
        "y": 80,
        "wires": [
            [
                "de115f9821383567"
            ]
        ]
    }
]

```

[http://your-ip-here:1880/example-map/](http://your-ip-here:1880/example-map/) is where i put the example map

![Screenshot from 2021-10-05 23-39-30](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/3/633d2580c4e2835450cb0da261e6e3f32c6ae0ea.jpeg)

 ![Screenshot from 2021-10-05 23-39-20](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/c/1c5a65fee31b4dcefb73d95015d48ae8d69f6801.jpeg)

---

<div class="post-metadata">

**Author:** ![meeki007](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/meeki007/32/12499_2.png) [@meeki007](https://discourse.nodered.org/u/meeki007)\
**Post date:** [6 October 2021 03:55 UTC](https://discourse.nodered.org/t/using-a-touchscreen-to-add-waypoints-on-node-red-worldmap-dashboard-ui/51892/6 "2021-10-06T03:55:00Z")

</div>

now you could set up some logic to auto fill the form. so if no waypoints are set it will use waypoint-01 and start counting up from there for the user as it adds them. the logic for this stuff can get pretty nutty at times.

 ![Screenshot from 2021-10-05 23-51-32](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/8/58969bf271c37a9eeeeaaaddc818289bc2dd3283.jpeg)

you will need to get real close and comfy with the function node if your going to be doing big things with the world map.

---

<div class="post-metadata">

**Author:** ![Chapanata](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/chapanata/32/49019_2.png) [@Chapanata](https://discourse.nodered.org/u/Chapanata)\
**Post date:** [6 October 2021 03:58 UTC](https://discourse.nodered.org/t/using-a-touchscreen-to-add-waypoints-on-node-red-worldmap-dashboard-ui/51892/7 "2021-10-06T03:58:11Z")

</div>

I'm starting to understand this bit by bit but I can work on that flow you sent. Right now it doesn't put a waypoint but the context menu with the submit shows and returns a payload message with the object that contains the latitude, longitude, and name of the waypoint I can rework that get current location flow that I have and use it here to add onto the map.

I really appreciate the help and I'll get back to you once I'm done, thank you!

---

<div class="post-metadata">

**Author:** ![meeki007](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/meeki007/32/12499_2.png) [@meeki007](https://discourse.nodered.org/u/meeki007)\
**Post date:** [6 October 2021 04:05 UTC](https://discourse.nodered.org/t/using-a-touchscreen-to-add-waypoints-on-node-red-worldmap-dashboard-ui/51892/8 "2021-10-06T04:05:20Z")

</div>

correct it does not put it on the map 😛

I was trying to give you the minimum needed to get your brain revved up.

to add it to the map after you handle the logic coming out use a function node to create a marker.

here is a hint below showing allot of options you can use to create a marker

```auto
msg.payload = {
    "name":'The Way-point var containing the value the user gave here!',
    "layer":"waypoints",
    "lat":camLatVarHere,
    "lon":camLonVarHere,
    "icon":"fa-video-camera",
    "iconColor":"forestgreen",
    "photoUrl":"http://link-to-a-photo-here",
    "weblink":[
        {
            "name":'send user to this url #1',
            "url":'https://google.com',
            "target":"_new"
        },
        {
            "name":'send user to this url #2',
            "url":'https://nodered.org',
            "target":"_new"
        }]
};

```

if you get stuck ill complete the next step for you tomorrow night 💓

---

<div class="post-metadata">

**Author:** ![Chapanata](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/chapanata/32/49019_2.png) [@Chapanata](https://discourse.nodered.org/u/Chapanata)\
**Post date:** [6 October 2021 04:23 UTC](https://discourse.nodered.org/t/using-a-touchscreen-to-add-waypoints-on-node-red-worldmap-dashboard-ui/51892/9 "2021-10-06T04:23:59Z")

</div>

I was able to get it to add the waypoint as you can see:

 ![new map](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/5/b573c6806780f3a03a5f38f59751f87045a0ef81.png)

Although a new problem has shown up now, the chrome extension I'm using doesn't recognize this as a valid text field meaning that keyboard won't pop up. I'm not exactly sure what to do here.

---

<div class="post-metadata">

**Author:** ![Chapanata](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/chapanata/32/49019_2.png) [@Chapanata](https://discourse.nodered.org/u/Chapanata)\
**Post date:** [6 October 2021 04:27 UTC](https://discourse.nodered.org/t/using-a-touchscreen-to-add-waypoints-on-node-red-worldmap-dashboard-ui/51892/10 "2021-10-06T04:27:43Z")

</div>

This is how the extension looks like when it recognizes a valid input:

 ![valid.PNG](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/b/2be73419b5437ea45920ff1f717fc70eb6447d4c.jpeg)

---

<div class="post-metadata">

**Author:** ![meeki007](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/meeki007/32/12499_2.png) [@meeki007](https://discourse.nodered.org/u/meeki007)\
**Post date:** [6 October 2021 04:28 UTC](https://discourse.nodered.org/t/using-a-touchscreen-to-add-waypoints-on-node-red-worldmap-dashboard-ui/51892/11 "2021-10-06T04:28:07Z")

</div>

html input types might help you...  
[https://www.w3schools.com/html/html\_form\_input\_types.asp](https://www.w3schools.com/html/html_form_input_types.asp)

in the function node try changing it to this....

```auto
var menu ='enter waypoint</br>'; 
menu += '<input type="text" name="waypointValue" onchange=\'addToForm(this.name,this.value)\'></input><br/>'
menu +='<center>'
menu +='<button name="my_form" onclick=\'feedback(this.name,"$form",null,true)\'>Submit</button>'
menu +='</center>'
msg.payload = { command: { "contextmenu":menu } }
return msg;

```

its allot to take in at once. what this function node is doing is replacing the stock worldmap html with your own custom stuff. So it helps to know some html as well.

---

<div class="post-metadata">

**Author:** ![Chapanata](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/chapanata/32/49019_2.png) [@Chapanata](https://discourse.nodered.org/u/Chapanata)\
**Post date:** [6 October 2021 04:31 UTC](https://discourse.nodered.org/t/using-a-touchscreen-to-add-waypoints-on-node-red-worldmap-dashboard-ui/51892/12 "2021-10-06T04:31:44Z")

</div>

Man all the headache this caused and you managed to fix it instantly. Changing the input type was the call.

 ![success.PNG](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/4/0402858c64c2544e190ee76577ec502c0b06c8f6.jpeg)

Thank you so much for the help!

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [20 October 2021 04:32 UTC](https://discourse.nodered.org/t/using-a-touchscreen-to-add-waypoints-on-node-red-worldmap-dashboard-ui/51892/13 "2021-10-20T04:32:16Z")

</div>

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