[TASK] add position editing of node

This commit is contained in:
Martin Geno 2017-05-16 00:22:15 +02:00
parent 7a4a6c66e9
commit e2774c3880
No known key found for this signature in database
GPG Key ID: F0D39A37E925E941
15 changed files with 1203 additions and 15 deletions

View File

@ -45,7 +45,7 @@ func (m *Manager) ConnectTo(addr net.TCPAddr) *ssh.Client {
m.clientsMUX.Lock() m.clientsMUX.Lock()
defer m.clientsMUX.Unlock() defer m.clientsMUX.Unlock()
if t, ok := m.clientsBlacklist[addr.IP.String()]; ok { if t, ok := m.clientsBlacklist[addr.IP.String()]; ok {
if time.Now().Add(-time.Hour * 24).After(t) { if time.Now().Add(-time.Hour * 24).Before(t) {
return nil return nil
} else { } else {
delete(m.clientsBlacklist, addr.IP.String()) delete(m.clientsBlacklist, addr.IP.String())

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 696 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 618 B

View File

@ -18,6 +18,12 @@ body {
.status.offline { .status.offline {
background: #dc0067; background: #dc0067;
} }
span.online {
color: #009ee0;
}
span.offline {
color: #dc0067;
}
h1 { h1 {
border-bottom: 4px solid #dc0067; border-bottom: 4px solid #dc0067;
} }

View File

@ -6,7 +6,7 @@
border-radius: 10px; border-radius: 10px;
} }
.leaflet-container .node.offline { .leaflet-container .node.offline {
background-color rgba(255,0,0,0.5) background-color: rgba(255,0,0,0.5);
} }
.leaflet-container .node.client24 { .leaflet-container .node.client24 {
border-left: 3px solid green; border-left: 3px solid green;

View File

@ -10,6 +10,8 @@
<script src="/js/moment.js"></script> <script src="/js/moment.js"></script>
<script src="/js/navigo.js"></script> <script src="/js/navigo.js"></script>
<script src="/js/leaflet.js"></script> <script src="/js/leaflet.js"></script>
<script src="/js/webgl-heatmap.js"></script>
<script src="/js/leaflet-webgl-heatmap.min.js"></script>
<script src="/js/config.js"></script> <script src="/js/config.js"></script>
<script src="/js/domlib.js"></script> <script src="/js/domlib.js"></script>
<script src="/js/store.js"></script> <script src="/js/store.js"></script>

View File

@ -5,9 +5,16 @@ var config = {
view: {bound: [53.07093, 8.79464], zoom: 17}, view: {bound: [53.07093, 8.79464], zoom: 17},
maxZoom: 20, maxZoom: 20,
tileLayer: '//tiles.bremen.freifunk.net/{z}/{x}/{y}.png', tileLayer: '//tiles.bremen.freifunk.net/{z}/{x}/{y}.png',
heatMax: { /* heatmap settings
wifi24: 15, size: in meters (default: 30km)
wifi5: 50 opacity: in percent/100 (default: 1)
gradientTexture: url-to-texture-image (default: false)
alphaRange: change transparency in heatmap (default: 1)
autoresize: resize heatmap when map size changes (default: false)
*/
heatmap: {
wifi24: {size: 230, opacity: 0.5, alphaRange: 1},
wifi5: {size: 230, opacity: 0.5, alphaRange: 1}
}, },
icon:{ icon:{
warn:{wifi24:20,wifi5:20}, warn:{wifi24:20,wifi5:20},

View File

@ -43,7 +43,7 @@ var router = new Navigo(null, true, '#');
'/n/:nodeID': { '/n/:nodeID': {
as: 'node', as: 'node',
uses: function (params) { uses: function (params) {
guiNode.current_node_id = params['nodeID'].toLowerCase(); guiNode.setNodeID(params['nodeID'].toLowerCase());
setView(guiNode); setView(guiNode);
} }
}, },
@ -68,5 +68,5 @@ var router = new Navigo(null, true, '#');
timeout = setTimeout(reset, 100); timeout = setTimeout(reset, 100);
} }
gui.render(); window.onload = gui.render;
})(); })();

View File

@ -4,9 +4,15 @@ var guiMap = {};
var view = guiMap; var view = guiMap;
var container, el; var container, el;
var nodeLayer; var nodeLayer, clientLayer24, clientLayer5;//, draggingNodeID;
function addNode (node){ function addNode (node){
/*
https://github.com/Leaflet/Leaflet/issues/4484
if(node.node_id === draggingNodeID){
return
}
*/
if(node.location === undefined || node.location.latitude === undefined || node.location.longitude === undefined) { if(node.location === undefined || node.location.latitude === undefined || node.location.longitude === undefined) {
return; return;
} }
@ -50,8 +56,13 @@ var guiMap = {};
'</table>'+ '</table>'+
'</div>' '</div>'
); );
/*
nodemarker.on('dragstart',function(){
draggingNodeID = node.node_id;
})
*/
nodemarker.on('dragend',function(){ nodemarker.on('dragend',function(){
// draggingNodeID = undefined;
var pos = nodemarker.getLatLng(); var pos = nodemarker.getLatLng();
node.location = { node.location = {
'latitude': pos.lat, 'latitude': pos.lat,
@ -69,6 +80,21 @@ var guiMap = {};
for(var i=0; i<nodes.length; i++){ for(var i=0; i<nodes.length; i++){
addNode(nodes[i]); addNode(nodes[i]);
} }
var clientData24 = nodes.map(function(node){
if(node.location === undefined || node.location.latitude === undefined || node.location.longitude === undefined) {
return;
}
return [node.location.latitude,node.location.longitude,node.statistics.clients.wifi24 * 2 || 0];
})
clientLayer24.setData(clientData24);
var clientData5 = nodes.map(function(node){
if(node.location === undefined || node.location.latitude === undefined || node.location.longitude === undefined) {
return;
}
return [node.location.latitude,node.location.longitude,node.statistics.clients.wifi5 || 0];
})
clientLayer5.setData(clientData5);
} }
view.bind = function(el) { view.bind = function(el) {
@ -97,8 +123,11 @@ var guiMap = {};
layerControl = L.control.layers().addTo(map); layerControl = L.control.layers().addTo(map);
nodeLayer = L.layerGroup(); nodeLayer = L.layerGroup();
clientLayer24 = new L.webGLHeatmap({size: 230, opacity: 0.5, alphaRange: 1});
clientLayer5 = new L.webGLHeatmap({size: 230, opacity: 0.5, alphaRange: 2});
layerControl.addOverlay(nodeLayer,'Nodes'); layerControl.addOverlay(nodeLayer,'Nodes');
layerControl.addOverlay(clientLayer24,'Clients 2.4 Ghz');
layerControl.addOverlay(clientLayer5,'Clients 5 Ghz');
nodeLayer.addTo(map); nodeLayer.addTo(map);
window.addEventListener("resize",function(){ window.addEventListener("resize",function(){

View File

@ -1,19 +1,55 @@
var guiNode = {current_node_id:"-"}; var guiNode = {};
(function(){ (function(){
var view = guiNode; var view = guiNode;
var container, el; var container, el;
var titleName,titleID; var titleName,titleID,ago;
var marker,map;
var btnGPS, editLocationGPS, storePosition;
var current_node_id, editing = false;
function updatePosition(lat, lng){
if(!lat || !lng) {
lat = storePosition.latitude || false;
lng = storePosition.longitude || false;
if(!lat || !lng)
return;
}
var node = store.getNode(current_node_id);
node.location = {latitude:lat,longitude:lng};
socket.sendnode(node);
}
function update(){ function update(){
titleID.innerHTML = view.current_node_id; titleID.innerHTML = current_node_id;
var node = store.getNode(view.current_node_id); var node = store.getNode(current_node_id);
if(node === undefined){ if(node === undefined){
console.log("node not found: "+view.current_node_id); console.log("node not found: "+current_node_id);
return;
}
var startdate = new Date();
startdate.setMinutes(startdate.getMinutes() - 1);
if(new Date(node.lastseen) < startdate){
ago.classList.add('offline')
ago.classList.remove('online');
}else{
ago.classList.remove('offline')
ago.classList.add('online');
}
ago.innerHTML = moment(node.lastseen).fromNow() + ' ('+node.lastseen+')';
if(editLocationGPS || editing || node.location === undefined || node.location.latitude === undefined || node.location.longitude === undefined) {
return; return;
} }
titleName.innerHTML = node.hostname; titleName.innerHTML = node.hostname;
var latlng = [node.location.latitude,node.location.longitude];
map.setView(latlng);
marker.setLatLng(latlng);
marker.setOpacity(1);
}
view.setNodeID = function (nodeID){
current_node_id = nodeID;
} }
view.bind = function(el) { view.bind = function(el) {
@ -35,6 +71,68 @@ var guiNode = {current_node_id:"-"};
title.appendChild(document.createTextNode(" - ")) title.appendChild(document.createTextNode(" - "))
titleID = domlib.newAt(title,'i'); titleID = domlib.newAt(title,'i');
var lastseen = domlib.newAt(el,'p');
domlib.newAt(lastseen,'span').innerHTML = "Lastseen: ";
ago = domlib.newAt(lastseen,'span');
var mapEl = domlib.newAt(el,'div');
mapEl.style.height = '500px';
map = L.map(mapEl).setView(config.map.view.bound, config.map.view.zoom);
L.tileLayer(config.map.tileLayer, {
maxZoom: config.map.maxZoom,
}).addTo(map);
marker = L.marker(config.map.view.bound,{draggable:true,opacity:0.5}).addTo(map);
marker.on('dragstart', function(e){
editing = true;
});
marker.on('dragend', function(e){
editing = false;
var pos = marker.getLatLng();
updatePosition(pos.lat,pos.lng);
});
btnGPS = domlib.newAt(el,'span');
btnGPS.classList.add('btn');
btnGPS.innerHTML = "Start follow position";
btnGPS.addEventListener('click',function(){
if(editLocationGPS){
if(btnGPS.innerHTML == "Stop following")
updatePosition();
btnGPS.innerHTML = "Start follow position";
navigator.geolocation.clearWatch(editLocationGPS);
editLocationGPS = false;
return;
}
btnGPS.innerHTML = 'Following position';
if (!!navigator.geolocation)
editLocationGPS = navigator.geolocation.watchPosition(
function geo_success(position) {
btnGPS.innerHTML = "Stop following";
storePosition = position.coords;
var latlng = [position.coords.latitude, position.coords.longitude];
marker.setLatLng(latlng);
map.setView(latlng);
},
function geo_error(error) {
switch (error.code) {
case error.TIMEOUT:
notify.send("error","Find Location timeout");
break;
};
},
{
enableHighAccuracy: true,
maximumAge: 30000,
timeout: 27000
});
else
notify.send("error","Browser did not support Location")
});
update(); update();
} }
})() })()

View File

@ -0,0 +1,6 @@
/*
* MIT Copyright 2016 Ursudio <info@ursudio.com>
* http://www.ursudio.com/
* Please attribute Ursudio in any production associated with this JavaScript plugin.
*/
L.WebGLHeatMap=L.Renderer.extend({version:"0.2.2",options:{size:3e4,units:"m",opacity:1,gradientTexture:!1,alphaRange:1,padding:0},_initContainer:function(){var t=this._container=L.DomUtil.create("canvas","leaflet-zoom-animated"),i=this.options;t.id="webgl-leaflet-"+L.Util.stamp(this),t.style.opacity=i.opacity,t.style.position="absolute";try{this.gl=window.createWebGLHeatmap({canvas:t,gradientTexture:i.gradientTexture,alphaRange:[0,i.alphaRange]})}catch(t){console.error(t),this.gl={clear:function(){},update:function(){},multiply:function(){},addPoint:function(){},display:function(){},adjustSize:function(){}}}this._container=t},onAdd:function(){this.size=this.options.size,L.Renderer.prototype.onAdd.call(this),this.resize()},getEvents:function(){var t=L.Renderer.prototype.getEvents.call(this);return L.Util.extend(t,{resize:this.resize,move:L.Util.throttle(this._update,49,this)}),t},resize:function(){var t=this._container,i=this._map.getSize();t.width=i.x,t.height=i.y,this.gl.adjustSize(),this.draw()},reposition:function(){var t=this._map._getMapPanePos().multiplyBy(-1);L.DomUtil.setPosition(this._container,t)},_update:function(){L.Renderer.prototype._update.call(this),this.draw()},draw:function(){var t=this._map,i=this.gl,e=this.data,a=e.length,n=Math.floor,s=this["_scale"+this.options.units].bind(this),o=this._multiply;if(t){if(i.clear(),this.reposition(),a){for(var r=0;r<a;r++){var l=e[r],h=L.latLng(l),u=t.latLngToContainerPoint(h);i.addPoint(n(u.x),n(u.y),s(h),l[2])}i.update(),o&&(i.multiply(o),i.update())}i.display()}},_scalem:function(t){var i=this._map,e=this.size/40075017*360/Math.cos(Math.PI/180*t.lat),a=new L.LatLng(t.lat,t.lng-e),n=i.latLngToLayerPoint(t),s=i.latLngToLayerPoint(a);return Math.max(Math.round(n.x-s.x),1)},_scalepx:function(){return this.size},data:[],addDataPoint:function(t,i,e){this.data.push([t,i,e/100])},setData:function(t){this.data=t,this._multiply=null,this.draw()},clear:function(){this.setData([])},multiply:function(t){this._multiply=t,this.draw()}}),L.webGLHeatmap=function(t){return new L.WebGLHeatMap(t)};

1040
webroot/js/webgl-heatmap.js Normal file

File diff suppressed because it is too large Load Diff