add new ui_worldmap node for displaying map on Node-RED Dashboard (#112)

* add new ui_worldmap node for displaying map on Node-RED Dashboard

* update according to comments
This commit is contained in:
Hiroyasu Nishiyama 2019-09-02 21:22:38 +09:00 committed by Dave Conway-Jones
parent 16b8ce050b
commit cfb9f7feda
2 changed files with 331 additions and 30 deletions

View File

@ -150,6 +150,153 @@ then by default <code>⌘⇧m</code> - <code>ctrl-shift-m</code> will load the m
to <b>control</b> the map remotely, including how to use a local map server.</p> to <b>control</b> the map remotely, including how to use a local map server.</p>
</script> </script>
<script type="text/x-red" data-template-name="ui_worldmap">
<div class="form-row" id="template-row-group">
<label for="node-input-group"><i class="fa fa-table"></i> Group</span></label>
<input type="text" id="node-input-group">
</div>
<div class="form-row" id="template-row-size">
<label><i class="fa fa-object-group"></i> Size</span></label>
<input type="hidden" id="node-input-width">
<input type="hidden" id="node-input-height">
<button class="editor-button" id="node-input-size"></button>
</div>
<div class="form-row">
<table border="0" width="96%">
<tr><td width="100px"><i class="fa fa-globe"></i> Start<td>Latitude</td><td>Longitude</td><td width="60px">Zoom</td></tr>
<tr><td>&nbsp;</td>
<td><input type="text" id="node-input-lat" style="width:90px;"></td>
<td><input type="text" id="node-input-lon" style="width:90px;"></td>
<td><input type="text" id="node-input-zoom" style="width:60px;" placeholder="1 - 18"></td>
</tr>
</table>
</div>
<div class="form-row">
<label for="node-input-layer"><i class="fa fa-map"></i> Base map</label>
<select id="node-input-layer">
<option value="OSM grey">OpenStreetMap Greyscale</option>
<option value="OSM">OpenStreetMap</option>
<option value="Esri">ESRI Streetmap</option>
<option value="Esri Satellite">ESRI Satellite</option>
<option value="Esri Topography">ESRI Topography</option>
// <option value="Esri Terrain">ESRI Terrain</option>
<option value="Esri Dark Grey">ESRI Dark Grey</option>
<option value="Esri Ocean">ESRI Ocean</option>
<option value="Nat Geo">National Geographic</option>
<option value="UK OS Opendata">UK OS Opendata</option>
<option value="Hike Bike">Hike Bike OSM</option>
<option value="Terrain">Terrain</option>
<option value="Watercolor">Stamen Watercolor</option>
</select>
</div>
<div class="form-row">
<label for="node-input-cluster"><i class="fa fa-dot-circle-o"></i>Cluster when</label>
zoom level is less than <input type="text" id="node-input-cluster" placeholder="0 (0,off - 19)" style="width:100px;">
</div>
<div class="form-row">
<label for="node-input-maxage"><i class="fa fa-clock-o"></i> Max age</label>
Remove markers after <input type="text" id="node-input-maxage" placeholder="600" style="width:67px;"> seconds
</div>
<div class="form-row">
<label for="node-input-usermenu"><i class="fa fa-user"></i> User menu</label>
<select id="node-input-usermenu" style="width:64px;">
<option value="show">Show</option>
<option value="hide">Hide</option>
</select>
<i class="fa fa-bars" style="margin-left:30px;"></i> Layer menu
<select id="node-input-layers" style="width:64px;">
<option value="show">Show</option>
<option value="hide">Hide</option>
</select>
</div>
<div class="form-row">
<label for="node-input-panlock"><i class="fa fa-lock"></i> Lock map</label>
<select id="node-input-panlock" style="width:64px;">
<option value="false">False</option>
<option value="true">True</option>
</select>
<i class="fa fa-lock" style="margin-left:30px;"></i> Lock zoom
<select id="node-input-zoomlock" style="width:64px;">
<option value="false">False</option>
<option value="true">True</option>
</select>
</div>
<div class="form-row">
<label for="node-input-panit"><i class="fa fa-arrows-alt"></i> Auto-pan</label>
<select id="node-input-panit" style="width:72px;">
<option value="true">Enable</option>
<option value="false">Disable</option>
</select>
<i class="fa fa-hand-o-right" style="margin-left:22px;"></i> Right click
<select id="node-input-hiderightclick" style="width:72px;">
<option value="false">Enable</option>
<option value="true">Disable</option>
</select>
</div>
<div class="form-row">
<label for="node-input-coords"><i class="fa fa-compass"></i> Co-ordinates</label>
<select id="node-input-coords" style="width:95px;">
<option value="none">Not shown</option>
<option value="deg">Degrees</option>
<option value="dms">D.M.S</option>
</select>
<i class="fa fa-th" style="margin-left:22px;"></i> Graticule
<select id="node-input-showgrid" style="width:95px;">
<option value="false">Not shown</option>
<option value="true">Visible</option>
</select>
</div>
<div class="form-row">
<label for="node-input-path"><i class="fa fa-globe"></i> Web Path</label>
<input type="text" id="node-input-path" placeholder="worldmap">
</div>
<div class="form-row">
<label for="node-input-name"><i class="fa fa-file"></i> Name</label>
<input type="text" id="node-input-name" placeholder="name">
</div>
<div class="form-tips">Set <i>Cluster when</i> to 0 to disable clustering of points.<br/>If <i>Path</i> is left empty,
then by default <code>⌘⇧m</code> - <code>ctrl-shift-m</code> will load the map in a new tab.</div>
</script>
<script type="text/x-red" data-help-name="ui_worldmap">
<p>Plots "things" on a map in Node-RED Dashboard. Needs an internet connection.</p>
<p>It is possible to instantiate multiple worldmap nodes but each one must be given a unique
path. Worldmap-in nodes are matched to worldmap nodes by having exactly the same path.
<p>Shortcut - <code>⌘⇧m</code> - ctrl-shift-m to jump to the default Map (<tt>/worldmap</tt>).</p>
<p>The minimum <code>msg.payload</code> must contain <code>name</code>, <code>lat</code> and <code>lon</code> properties, e.g.</p>
<pre>{"name":"Joe", "lat":51, "lon":-1.05}</pre>
<p><code>name</code> must be a unique identifier.</p>
<p>Optional properties include</p>
<ul>
<li><code>layer</code> : specify a layer on the map to add marker to.</li>
<li><code>speed</code> : combined with bearing, draws a vector.</li>
<li><code>bearing</code> : combined with speed, draws a vector.</li>
<li><code>accuracy</code> : combined with bearing, draws a polygon of possible direction.</li>
<li><code>icon</code> : <a href="https://fontawesome.com/v4.7.0/icons/" target="_new">font awesome</a> icon name or <a href="https://github.com/dceejay/RedMap/blob/master/emojilist.md" target="_new">:emoji name:</a>, or url of icon image.</li>
<li><code>iconColor</code> : standard CSS color name or #rrggbb hex value.</li>
<li><code>SIDC</code> : NATO symbology code (instead of icon).</li>
<li><code>label</code> : permanent label next to marker, or</li>
<li><code>tooltip</code> : hover over text for marker. (alternative to label)</li>
<li><code>bulding</code> : OSMBuildings GeoJSON object.</li>
<li><code>ttl</code> : time to live of an individual marker before deletion.</li>
<li><code>photoUrl</code> : adds an image pointed at by the url to the popup box.</li>
<li><code>videoUrl</code> : adds an mp4 (320x240) pointed at by the url to Popup box</li>
<li><code>weblink</code> : link to an external web page.</li>
<li><code>deleted</code> : set to <i>true</i> to remove the named marker. (default false)</li>
</ul>
<p>Any other sub-properties of <code>msg.payload</code> will be added to the marker popup text box as extra information.</p>
<p>Icons of type <i>plane</i>, <i>ship</i>, <i>car</i>, <i>uav</i> or <i>arrow</i> will use built in SVG icons that align to the
<code>bearing</code> value.</p>
<p>Font Awesome (<a href="https://fontawesome.com/v4.7.0/icons/" target="_new">fa-icons 4.7</a>) can also be used, as can
NATO symbology codes (SIDC), or <a href="https://github.com/dceejay/RedMap/blob/master/emojilist.md" target="_new">:emoji name:</a>,
or the url of a small icon image (32x32)</p>
<p>See the <a href="https://www.npmjs.com/package/node-red-contrib-web-worldmap" target="_new">README</a> for further
details and examples of icons and commands for drawing <b>lines</b> and <b>areas</b>, and to <b>add layers</b> and
to <b>control</b> the map remotely, including how to use a local map server.</p>
</script>
<script type="text/javascript"> <script type="text/javascript">
var lnk = document.location.host+RED.settings.httpNodeRoot+"/worldmap"; var lnk = document.location.host+RED.settings.httpNodeRoot+"/worldmap";
lnk = lnk.replace(new RegExp('\/{1,}','g'),'/'); lnk = lnk.replace(new RegExp('\/{1,}','g'),'/');
@ -211,6 +358,78 @@ then by default <code>⌘⇧m</code> - <code>ctrl-shift-m</code> will load the m
$("#node-input-cluster").spinner({min:0, max:19}); $("#node-input-cluster").spinner({min:0, max:19});
} }
}); });
RED.nodes.registerType('ui_worldmap',{
category: 'dashboard',
color: 'rgb( 63, 173, 181)',
defaults: {
group: {type: 'ui_group', required:true},
order: {value: 0},
width: {
value: 0,
validate: function(v) {
var valid = true
var width = v||0;
var currentGroup = $('#node-input-group').val()|| this.group;
var groupNode = RED.nodes.node(currentGroup);
valid = !groupNode || +width <= +groupNode.width;
$("#node-input-size").toggleClass("input-error",!valid);
return valid;
}},
height: {value: 0},
name: {value:""},
lat: {value:""},
lon: {value:""},
zoom: {value:""},
layer: {value:""},
cluster: {value:""},
maxage: {value:""},
usermenu: {value:"hide"},
layers: {value:"hide"},
panit: {value:"false"},
panlock: {value:"false"},
zoomlock: {value:"false"},
hiderightclick: {value:"false"},
coords: {value:"false"},
showgrid: {value:"false"},
path: {value:"/worldmap"}
},
inputs:1,
outputs:0,
icon: "white-globe.png",
align: "right",
paletteLabel: "worldmap",
label: function() {
return this.name||(this.path.charAt(0)==='/'?this.path.substr(1):this.path)||"world map";
},
labelStyle: function() {
return this.name?"node_label_italic":"";
},
info: function() {
return 'The map can also be found [here]('+RED.settings.httpNodeRoot.slice(0,-1)+this.path+').';
},
oneditprepare: function() {
$("#node-input-size").elementSizer({
width: "#node-input-width",
height: "#node-input-height",
group: "#node-input-group"
});
if ($("#node-input-path").val() === undefined) {
$("#node-input-path").val("worldmap");
this.path = "worldmap";
}
if ($("#node-input-hiderightclick").val() === null) {
$("#node-input-hiderightclick").val("false");
this.hiderightclick = "false";
}
if ($("#node-input-coords").val() === null) {
$("#node-input-coords").val("none");
this.coords = "none";
}
$("#node-input-zoom").spinner({min:0, max:18});
$("#node-input-cluster").spinner({min:0, max:19});
}
});
</script> </script>
<script type="text/x-red" data-template-name="worldmap in"> <script type="text/x-red" data-template-name="worldmap in">

View File

@ -25,34 +25,33 @@ module.exports = function(RED) {
// add the cgi module for serving local maps.... // add the cgi module for serving local maps....
RED.httpNode.use("/cgi-bin/mapserv", require('cgi')(__dirname + '/mapserv')); RED.httpNode.use("/cgi-bin/mapserv", require('cgi')(__dirname + '/mapserv'));
var WorldMap = function(n) { function worldMap(node, n) {
RED.nodes.createNode(this,n); RED.nodes.createNode(node,n);
this.lat = n.lat || ""; node.lat = n.lat || "";
this.lon = n.lon || ""; node.lon = n.lon || "";
this.zoom = n.zoom || ""; node.zoom = n.zoom || "";
this.layer = n.layer || ""; node.layer = n.layer || "";
this.cluster = n.cluster || ""; node.cluster = n.cluster || "";
this.maxage = n.maxage || ""; node.maxage = n.maxage || "";
if (n.maxage == 0) { this.maxage = "0"; } if (n.maxage == 0) { node.maxage = "0"; }
this.showmenu = n.usermenu || "show"; node.showmenu = n.usermenu || "show";
this.layers = n.layers || "show"; node.layers = n.layers || "show";
this.panlock = n.panlock || "false"; node.panlock = n.panlock || "false";
this.zoomlock = n.zoomlock || "false"; node.zoomlock = n.zoomlock || "false";
this.panit = n.panit || "false"; node.panit = n.panit || "false";
this.hiderightclick = n.hiderightclick || "false"; node.hiderightclick = n.hiderightclick || "false";
this.coords = n.coords || "none"; node.coords = n.coords || "none";
this.showgrid = n.showgrid || "false"; node.showgrid = n.showgrid || "false";
this.path = n.path || "/worldmap"; node.path = n.path || "/worldmap";
if (this.path.charAt(0) != "/") { this.path = "/" + this.path; } if (node.path.charAt(0) != "/") { noed.path = "/" + node.path; }
if (!sockets[this.path]) { if (!sockets[node.path]) {
var libPath = path.posix.join(RED.settings.httpNodeRoot, this.path, 'leaflet', 'sockjs.min.js'); var libPath = path.posix.join(RED.settings.httpNodeRoot, node.path, 'leaflet', 'sockjs.min.js');
var sockPath = path.posix.join(RED.settings.httpNodeRoot,this.path,'socket'); var sockPath = path.posix.join(RED.settings.httpNodeRoot,node.path,'socket');
sockets[this.path] = sockjs.createServer({prefix:sockPath, sockjs_url:libPath, log:function() { return; }}); sockets[node.path] = sockjs.createServer({prefix:sockPath, sockjs_url:libPath, log:function() { return; }});
sockets[this.path].installHandlers(RED.server); sockets[node.path].installHandlers(RED.server);
} }
//this.log("Serving "+__dirname+" as "+this.path); //node.log("Serving "+__dirname+" as "+node.path);
this.log("started at "+this.path); node.log("started at "+node.path);
var node = this;
var clients = {}; var clients = {};
RED.httpNode.use(compression()); RED.httpNode.use(compression());
RED.httpNode.use(node.path, express.static(__dirname + '/worldmap')); RED.httpNode.use(node.path, express.static(__dirname + '/worldmap'));
@ -108,7 +107,7 @@ module.exports = function(RED) {
} }
} }
clients = {}; clients = {};
sockets[this.path].removeListener('connection', callback); sockets[node.path].removeListener('connection', callback);
for (var i=0; i < RED.httpNode._router.stack.length; i++) { for (var i=0; i < RED.httpNode._router.stack.length; i++) {
var r = RED.httpNode._router.stack[i]; var r = RED.httpNode._router.stack[i];
if ((r.name === "serveStatic") && (r.regexp.test(node.path))) { if ((r.name === "serveStatic") && (r.regexp.test(node.path))) {
@ -117,11 +116,95 @@ module.exports = function(RED) {
} }
node.status({}); node.status({});
}); });
sockets[this.path].on('connection', callback); sockets[node.path].on('connection', callback);
}
var WorldMap = function(n) {
worldMap(this, n);
} }
RED.nodes.registerType("worldmap",WorldMap); RED.nodes.registerType("worldmap",WorldMap);
function HTML(ui, config) {
var width = config.width;
if (width == 0) {
var group = RED.nodes.getNode(config.group);
if (group) {
width = group.config.width;
}
}
var height = config.height;
if (height == 0) {
height = 10;
}
var size = ui.getSizes();
var frameWidth = (size.sx +size.cx) *width -size.cx -10;
var frameHeight = (size.sy +size.cy) *height -size.cy -10;
var url = encodeURI(config.path);
var html = `
<div>
<iframe src="${url}" width="${frameWidth}px" height="${frameHeight}px" style="border: none;"></iframe>
</div>
`;
return html;
}
function checkConfig(node, conf) {
if (!conf || !conf.hasOwnProperty("group")) {
node.error("no group");
return false;
}
return true;
}
var ui = undefined;
function UIWorldMap(config) {
try {
var node = this;
if(ui === undefined) {
ui = RED.require("node-red-dashboard")(RED);
}
worldMap(node, config);
var done = null;
if (checkConfig(node, config)) {
var html = HTML(ui, config);
done = ui.addWidget({
node: node,
order: config.order,
group: config.group,
width: config.width,
height: config.height,
format: html,
templateScope: "local",
emitOnlyNewValues: false,
forwardInputMessages: false,
storeFrontEndInputAsState: false,
convertBack: function (value) {
return value;
},
beforeEmit: function(msg, value) {
return { msg: { items: value } };
},
beforeSend: function (msg, orig) {
if (orig) { return orig.msg; }
},
initController: function($scope, events) {
}
});
}
}
catch (e) {
console.log(e);
}
node.on("close", function() {
if (done) {
done();
}
});
}
RED.nodes.registerType("ui_worldmap", UIWorldMap);
var WorldMapIn = function(n) { var WorldMapIn = function(n) {
RED.nodes.createNode(this,n); RED.nodes.createNode(this,n);
this.path = n.path || "/worldmap"; this.path = n.path || "/worldmap";
@ -164,7 +247,6 @@ module.exports = function(RED) {
} }
RED.nodes.registerType("worldmap in",WorldMapIn); RED.nodes.registerType("worldmap in",WorldMapIn);
var WorldMapTracks = function(n) { var WorldMapTracks = function(n) {
RED.nodes.createNode(this,n); RED.nodes.createNode(this,n);
this.depth = parseInt(Number(n.depth) || 20); this.depth = parseInt(Number(n.depth) || 20);