How to add slider on map sensor once on click it should do some action

General
1

In node-red I wanted to add slider on the dashboard world map, and once the user clicks on sensor mapped on world map it should show slider on tool tip.I wanted to control sensor based on that slider action is that possible?.

2

In theory you can set the popup to contain any html you want so it should be possible to add such a control - but I haven't even thought about it so you will be blazing a trail here.

3

I have created a html table with button on popup, once user click on button how I can open another tab(I mean I want to open another view).

4

what do you mean by tab / view ? inside the popup ? inside the worldmap ? in another web page ?
so far it sounds like a standard javascript question.

5

I mean once the user clicks, it should open another tab which is hidden in dashboard.

6

in our Node-RED-Dashboard ? You need to send a click back to the worldmap-in node that you then pass to a dashboard ui_control node.

for example I set this in the payload for the marker - Info:"<button onclick=\"console.log(ws); ws.send(JSON.stringify({'tab':1}));\">Click</button>",

Then have this in the flow

image
image.png988Ă—122 16 KB

[{"id":"62ae3b3c.8de704","type":"worldmap in","z":"f86be7c2.1183b8","name":"","path":"/worldmap","x":140,"y":620,"wires":[["2eadb3d5.d063ec","c47cdeab.f4911"]]},{"id":"292fba36.e8f4c6","type":"ui_ui_control","z":"f86be7c2.1183b8","name":"","x":480,"y":620,"wires":[]},{"id":"c47cdeab.f4911","type":"switch","z":"f86be7c2.1183b8","name":"","property":"payload.tab","propertyType":"msg","rules":[{"t":"nnull"}],"checkall":"true","repair":false,"outputs":1,"x":310,"y":620,"wires":[["292fba36.e8f4c6"]]}]

[{"id":"62ae3b3c.8de704","type":"worldmap in","z":"f86be7c2.1183b8","name":"","path":"/worldmap","x":140,"y":620,"wires":[["2eadb3d5.d063ec","c47cdeab.f4911"]]},{"id":"292fba36.e8f4c6","type":"ui_ui_control","z":"f86be7c2.1183b8","name":"","x":480,"y":620,"wires":[[]]},{"id":"c47cdeab.f4911","type":"switch","z":"f86be7c2.1183b8","name":"","property":"payload.tab","propertyType":"msg","rules":[{"t":"nnull"}],"checkall":"true","repair":false,"outputs":1,"x":310,"y":620,"wires":[["292fba36.e8f4c6"]]}]

and when I click the button in the popup it switches to tab 1

7

Thank you!! one doubt, how I can pass variables to another tab.

8

you can't - the tabs are wired up in Node-RED - Node-RED passes messages to tabs - if you need to send different messages you need to use the message from the click to change your logic on the Node-RED side.

9

If I use flow variables then can i pass

10

you can send whatever you like from the map back to the worldmap input node. What you do with it then is up to you - you can use it to switch a tab - or be the data - or whatever. just try it.

11

To add slider I have added the below code but it is not sending event. The below javascript code will send once the slider action is stopped. World map is endpoint is /worldmap1
<input type=\"range\" id=\"range\"><\/input><script>function addEvent(el, name, func, bool) { if (el.addEventListener) el.addEventListener(name, func, bool); else if (el.attachEvent) el.attachEvent('on' + name, dunc); else el['on' + name] = func; } addEvent(range, 'change', function(e) { myFunction(e.target.value) }, false); function myFunction(a) { console.log(ws); ws.send(JSON.stringify({'tab':'light'})); }<\/script>

12

If I use a recent (1.5.31 or better) version of worldmap then I can use a marker like this

msg.payload = {
    name:"Light",
    icon:"fa-lightbulb-o",
    lat:51.15,
    lon:-1.45,
    popped:true,
    popup:'<input name="slide1" type="range" min="1" max="100" value="50" onchange=\'feedback(this.name,this.value)\' style="width:250px;">'
}
return msg;

And it will have a slider in the popup and the output will appear in the worldmap in node as an action like this
image

1 Like
13

In your example you use a constant slider name "slide1" in the popup command line.

popup:'<input name="slide1" type="range" min="1" max="100" value="50" onchange='feedback(this.name,this.value)' style="width:250px;">'

How can I use a variable to change the name? I used - name = {{variable for slide name}} - , but that didn't work...
Thank you in advance.

14

It's just javascript - so just concatenate the string as you would normally.

    popup:'<input name="' + your_variable + ''" type="range" .....