Fix feedback function and hull multiple layer handling

This commit is contained in:
Dave Conway-Jones 2020-11-17 19:50:38 +00:00
parent ff19903cbb
commit 67125dc3c7
No known key found for this signature in database
GPG Key ID: 88BA2B8A411BE9FF
4 changed files with 41 additions and 13 deletions

View File

@ -1,5 +1,6 @@
### Change Log for Node-RED Worldmap
- v2.5.9 - Fix handling of multiple hulls, tidy contextmenu handling
- v2.5.8 - Let node name be the full page map title
- v2.5.7 - Let fillColor set color of hulls
- v2.5.6 - Let node accept plain text payload kml or nvg input

View File

@ -11,6 +11,7 @@ map web page for plotting "things" on.
### Updates
- v2.5.9 - Fix handling of multiple hulls, tidy contextmenu handling
- v2.5.8 - Let node name be the full page map title
- v2.5.7 - Let fillColor set color of hulls
- v2.5.6 - Let node accept plain text payload kml or nvg input
@ -350,7 +351,7 @@ All actions also include a `msg._sessionid` property that indicates which client
There are some internal functions available to make interacting with Node-RED easier (e.g. from inside a user defined popup., these include:
- **feedback()** : it takes 2, 3, or 4 parameters, name, value, and optionally an action name (defaults to "feedback"), and optional boolean to close the popup on calling this function, and can be used inside something like an input tag - `onchange='feedback(this.name,this.value,null,true)'`. Value can be a more complex object if required as long as it is serialisable.
- **feedback()** : it takes 2, 3, or 4 parameters, name, value, and optionally an action name (defaults to "feedback"), and optional boolean to close the popup on calling this function, and can be used inside something like an input tag - `onchange='feedback(this.name,this.value,null,true)'`. Value can be a more complex object if required as long as it is serialisable. If used with a marker the name should be that of the marker - you can use `$name` to let it be substituted automatically.
- **delMarker()** : takes the name of the marker as a parameter. In a popup this can be specified as `$name` for dynamic substitution.
@ -416,13 +417,27 @@ appropriate property to an html string. Often you will need some embedded javasc
in order to make it do something when you click a button for example. You need to be
careful escaping quotes, and that they remain matched.
For example a popup with a slider (note the \ escaping the internal ' )
For example a marker popup with a slider (note the \ escaping the internal ' )
popup: '<input name="slide1" type="range" min="1" max="100" value="50" onchange=\'feedback(this.name,this.value)\' style="width:250px;">'
popup: '<input name="slide1" type="range" min="1" max="100" value="50" onchange=\'feedback($name,this.value,this.name)\' style="width:250px;">'
Or a contextmenu with a button
Or a marker contextmenu with an input box
contextmenu: '<button name="Clicker" onclick=\'feedback(this.name)\'>Click me</button>'
contextmenu: '<input name="channel" type="text" value="5" onchange=\'feedback($name,{"name":this.name,"value":this.value},"myFeedback")\' />'
Or you can add a contextmenu to the map. Simple contextmenu with a button
msg.payload.command = {
contextmenu: '<button name="Clicker" onclick=\'feedback(this.name,"ping!)\'>Click me</button>'
}
Or with an input box
msg.payload.command : {
contextmenu: '<input name="slide1" type="range" min="1" max="100" value="50" onchange=\'feedback(this.name,this.value,"myEventName")\' >'
}
See the section on **Utility Functions** for details of the feedback function.
#### To add and remove a legend
@ -439,7 +454,7 @@ style server by adding a property `wms: true`. You can also set `wms: "grey"` to
may let you markers be more visible. (see overlay example below).
msg.payload.command.map = {
"name":"OSMhot",
"name":"OSMhot", // use "overlay":"MyOverlayName" for an overlay rather than a base layer.
"url":"https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png",
"opt":{ "maxZoom":19, "attribution":"&copy; OpenStreetMap" }
};

View File

@ -372,7 +372,7 @@ module.exports = function(RED) {
RED.nodes.createNode(this,n);
this.prop = n.prop || "layer";
var node = this;
var oldl = 0;
node.oldlayercount = {};
node.hulls = {};
var convexHull = function(points) {
@ -433,11 +433,16 @@ module.exports = function(RED) {
newmsg.payload.fillColor = msg.payload.fillColor;
}
if (node.oldlayercount[newmsg.payload[node.prop]] === undefined) {
node.oldlayercount[newmsg.payload[node.prop]] = 0;
}
var oldl = node.oldlayercount[newmsg.payload[node.prop]];
if (leafletHull.length === 1 && oldl === 2) {
newmsg.payload.deleted = true;
node.send(newmsg);
}
if (leafletHull.length === 2 && (oldl === 1 || oldl ===3)) {
if (leafletHull.length === 2 && (oldl === 1 || oldl === 3)) {
newmsg.payload.deleted = true;
node.send(newmsg);
delete newmsg.payload.deleted;
@ -454,7 +459,7 @@ module.exports = function(RED) {
node.send(newmsg);
}
oldl = leafletHull.length;
node.oldlayercount[newmsg.payload[node.prop]] = leafletHull.length;
}
}

View File

@ -591,8 +591,14 @@ var addThing = function() {
}
var feedback = function(n,v,a,c) {
var fp = markers[n]._latlng;
ws.send(JSON.stringify({action:a||"feedback", name:n, layer:markers[n].lay, lat:fp.lat, lon:fp.lng, value:v}));
if (markers[n]) {
var fp = markers[n]._latlng;
ws.send(JSON.stringify({action:a||"feedback", name:n, layer:markers[n].lay, lat:fp.lat, lon:fp.lng, value:v}));
}
else {
if (n === undefined) { n = "map"; }
ws.send(JSON.stringify({action:a||"feedback", name:n, value:v}));
}
if (c === true) { map.closePopup(); }
}
@ -617,7 +623,8 @@ map.on('contextmenu', function(e) {
rightmenuMap.setLatLng(e.latlng);
map.openPopup(rightmenuMap);
setTimeout( function() {
document.getElementById('rinput').focus();
try { document.getElementById('rinput').focus(); }
catch(e) {}
}, 200);
}
}, 300);
@ -1019,7 +1026,7 @@ function setMarker(data) {
rightcontext = "<button onclick='editPoly(\""+data.name+"\",true);'>Edit</button><button onclick='delMarker(\""+data.name+"\",true);'>Delete</button>";
}
if ((data.contextmenu !== undefined) && (typeof data.contextmenu === "string")) {
rightcontext = data.contextmenu.replace(/\$name/g,data.name);
rightcontext = data.contextmenu.replace(/\$name/g,'"'+data.name+'"');
delete data.contextmenu;
}
if (rightcontext.length > 0) {