heatmap config

public/app/map/edit.js

@@ -0,0 +1,84 @@
+'use strict';
+
+angular.module('ffhb')
+	.controller('MapEditCtrl',function($state,$scope,store,config,leafletData){
+		var layerControl,geoLayer,nodeLayer;
+		leafletData.getMap('globalmap').then(function(map) {
+			layerControl = L.control.layers().addTo(map);
+			map.setView([config.map.view.lat, config.map.view.lng],16);
+		});
+		store.getGeojson.then(function(data){
+			leafletData.getMap('globalmap').then(function(map) {
+				geoLayer = L.geoJson(data,config.map.geojson);
+				layerControl.addOverlay(geoLayer,'GEOJSON');
+				geoLayer.addTo(map);
+			});
+		});
+		function render(prom){
+			prom.then(function(data){
+				leafletData.getMap('globalmap').then(function(map) {
+					if(nodeLayer!==undefined){
+						layerControl.removeLayer(nodeLayer);
+						nodeLayer.clearLayers();
+					}
+					nodeLayer = L.layerGroup({maxClusterRadius:20});
+					Object.keys(data.merged).map(function(nodeid){
+						var node = data.merged[nodeid];
+						if(node.nodeinfo.location !== undefined && node.nodeinfo.location.latitude !== undefined && node.nodeinfo.location.longitude !== undefined){
+							var className = 'node';
+							if(node.flags && !node.flags.online){
+								className += ' offline';
+							}
+							var wifi24='-',wifi5='-',ch24='-',ch5='-',tx24='-',tx5='-';
+							if(node.statistics && node.statistics.clients){
+								wifi24 = node.statistics.clients.wifi24;
+
+								if(wifi24 < config.map.icon.warn.wifi24 && wifi24 > 0){
+									className += ' client24';
+								} else if(wifi24 < config.map.icon.crit.wifi24 && wifi24 >= config.map.icon.warn.wifi24){
+									className += ' client24-warn';
+								} else if(wifi24 >= config.map.icon.crit.wifi24){
+									className += ' client24-crit';
+								}
+
+								wifi5 = node.statistics.clients.wifi5;
+								if(config.map.icon.warn.wifi5 < 20 && wifi5 > 0){
+									className += ' client5';
+								} else if(wifi5 < config.map.icon.crit.wifi5 && wifi5 >= config.map.icon.warn.wifi5){
+									className += ' client5-warn';
+								} else if(wifi5 >= config.map.icon.crit.wifi5){
+									className += ' client5-crit';
+								}
+							}
+							var nodemarker = L.marker([node.nodeinfo.location.latitude, node.nodeinfo.location.longitude],{
+								icon: L.divIcon({className: className}),
+								draggable: true
+							});
+							nodemarker.bindLabel(node.nodeinfo.hostname+' <div class=\'nodeicon-label\'>('+nodeid+')'+
+								'<table><tr><th></th><th>Cl</th><th>Ch</th><th>Tx</th></tr>'+
+								'<tr><td>2.4G</td><td>'+wifi24+'</td><td>'+ch24+'</td><td>'+tx24+'</td></tr>'+
+								'<tr><td>5G</td><td>'+wifi5+'</td><td>'+ch5+'</td><td>'+tx5+'</td></tr>'+
+								'</table>'+
+								'</div>'
+							);
+							nodemarker.on('dragend',function(){
+								var pos = nodemarker.getLatLng();
+								node.nodeinfo.location = {
+									'latitude': pos.lat,
+									'longitude': pos.lng
+								};
+								store.saveNode(nodeid);
+							});
+							nodeLayer.addLayer(nodemarker).addTo(map);
+						}
+					});
+					layerControl.addOverlay(nodeLayer,'Nodes');
+					nodeLayer.addTo(map);
+				});
+			});
+		}
+		render(store.getData);
+		$scope.$on('store', function(ev, prom) {
+			render(prom);
+		});
+	});

public/app/map/index.js

@@ -33,8 +33,8 @@ angular.module('ffhb')
 						client5Layer.clearLayers();
 					}
 					nodeLayer = L.markerClusterGroup({maxClusterRadius:20});
-					client24Layer = L.heatLayer([],{max:30});
+					client24Layer = L.heatLayer([],{max: config.map.heatMax.wifi24});
-					client5Layer = L.heatLayer([],{max:30});
+					client5Layer = L.heatLayer([],{max: config.map.heatMax.wifi5});
 					Object.keys(data.merged).map(function(nodeid){
 						var node = data.merged[nodeid];
 						if(node.nodeinfo.location !== undefined && node.nodeinfo.location.latitude !== undefined && node.nodeinfo.location.longitude !== undefined){

public/components/config.js

@@ -5,6 +5,10 @@ angular.module('config', [])
 			api: 'https://mgmt.ffhb.de/api',
 			map: {
 				view: {lat: 53.0702, lng: 8.815, zoom: 16},
+				heatMax: {
+					wifi24: 30,
+					wifi5: 100
+				},
 				icon:{
 					warn:{wifi24:20,wifi5:20},
 					crit:{wifi24:30,wifi5:30}

public/leaflet-heatmap.js

@@ -0,0 +1,11 @@
+/*
+ (c) 2014, Vladimir Agafonkin
+ simpleheat, a tiny JavaScript library for drawing heatmaps with Canvas
+ https://github.com/mourner/simpleheat
+*/
+!function(){"use strict";function t(i){return this instanceof t?(this._canvas=i="string"==typeof i?document.getElementById(i):i,this._ctx=i.getContext("2d"),this._width=i.width,this._height=i.height,this._max=1,void this.clear()):new t(i)}t.prototype={defaultRadius:25,defaultGradient:{.4:"blue",.6:"cyan",.7:"lime",.8:"yellow",1:"red"},data:function(t,i){return this._data=t,this},max:function(t){return this._max=t,this},add:function(t){return this._data.push(t),this},clear:function(){return this._data=[],this},radius:function(t,i){i=i||15;var a=this._circle=document.createElement("canvas"),s=a.getContext("2d"),e=this._r=t+i;return a.width=a.height=2*e,s.shadowOffsetX=s.shadowOffsetY=200,s.shadowBlur=i,s.shadowColor="black",s.beginPath(),s.arc(e-200,e-200,t,0,2*Math.PI,!0),s.closePath(),s.fill(),this},gradient:function(t){var i=document.createElement("canvas"),a=i.getContext("2d"),s=a.createLinearGradient(0,0,0,256);i.width=1,i.height=256;for(var e in t)s.addColorStop(e,t[e]);return a.fillStyle=s,a.fillRect(0,0,1,256),this._grad=a.getImageData(0,0,1,256).data,this},draw:function(t){this._circle||this.radius(this.defaultRadius),this._grad||this.gradient(this.defaultGradient);var i=this._ctx;i.clearRect(0,0,this._width,this._height);for(var a,s=0,e=this._data.length;e>s;s++)a=this._data[s],i.globalAlpha=Math.max(a[2]/this._max,t||.05),i.drawImage(this._circle,a[0]-this._r,a[1]-this._r);var n=i.getImageData(0,0,this._width,this._height);return this._colorize(n.data,this._grad),i.putImageData(n,0,0),this},_colorize:function(t,i){for(var a,s=3,e=t.length;e>s;s+=4)a=4*t[s],a&&(t[s-3]=i[a],t[s-2]=i[a+1],t[s-1]=i[a+2])}},window.simpleheat=t}(),/*
+ (c) 2014, Vladimir Agafonkin
+ Leaflet.heat, a tiny and fast heatmap plugin for Leaflet.
+ https://github.com/Leaflet/Leaflet.heat
+*/
+L.HeatLayer=(L.Layer?L.Layer:L.Class).extend({initialize:function(t,i){this._latlngs=t,L.setOptions(this,i)},setLatLngs:function(t){return this._latlngs=t,this.redraw()},addLatLng:function(t){return this._latlngs.push(t),this.redraw()},setOptions:function(t){return L.setOptions(this,t),this._heat&&this._updateOptions(),this.redraw()},redraw:function(){return!this._heat||this._frame||this._map._animating||(this._frame=L.Util.requestAnimFrame(this._redraw,this)),this},onAdd:function(t){this._map=t,this._canvas||this._initCanvas(),t._panes.overlayPane.appendChild(this._canvas),t.on("moveend",this._reset,this),t.options.zoomAnimation&&L.Browser.any3d&&t.on("zoomanim",this._animateZoom,this),this._reset()},onRemove:function(t){t.getPanes().overlayPane.removeChild(this._canvas),t.off("moveend",this._reset,this),t.options.zoomAnimation&&t.off("zoomanim",this._animateZoom,this)},addTo:function(t){return t.addLayer(this),this},_initCanvas:function(){var t=this._canvas=L.DomUtil.create("canvas","leaflet-heatmap-layer leaflet-layer"),i=L.DomUtil.testProp(["transformOrigin","WebkitTransformOrigin","msTransformOrigin"]);t.style[i]="50% 50%";var a=this._map.getSize();t.width=a.x,t.height=a.y;var s=this._map.options.zoomAnimation&&L.Browser.any3d;L.DomUtil.addClass(t,"leaflet-zoom-"+(s?"animated":"hide")),this._heat=simpleheat(t),this._updateOptions()},_updateOptions:function(){this._heat.radius(this.options.radius||this._heat.defaultRadius,this.options.blur),this.options.gradient&&this._heat.gradient(this.options.gradient),this.options.max&&this._heat.max(this.options.max)},_reset:function(){var t=this._map.containerPointToLayerPoint([0,0]);L.DomUtil.setPosition(this._canvas,t);var i=this._map.getSize();this._heat._width!==i.x&&(this._canvas.width=this._heat._width=i.x),this._heat._height!==i.y&&(this._canvas.height=this._heat._height=i.y),this._redraw()},_redraw:function(){var t,i,a,s,e,n,h,o,r,d=[],_=this._heat._r,l=this._map.getSize(),m=new L.Bounds(L.point([-_,-_]),l.add([_,_])),c=void 0===this.options.max?1:this.options.max,u=void 0===this.options.maxZoom?this._map.getMaxZoom():this.options.maxZoom,f=1/Math.pow(2,Math.max(0,Math.min(u-this._map.getZoom(),12))),g=_/2,p=[],v=this._map._getMapPanePos(),w=v.x%g,y=v.y%g;for(t=0,i=this._latlngs.length;i>t;t++)if(a=this._map.latLngToContainerPoint(this._latlngs[t]),m.contains(a)){e=Math.floor((a.x-w)/g)+2,n=Math.floor((a.y-y)/g)+2;var x=void 0!==this._latlngs[t].alt?this._latlngs[t].alt:void 0!==this._latlngs[t][2]?+this._latlngs[t][2]:1;r=x*f,p[n]=p[n]||[],s=p[n][e],s?(s[0]=(s[0]*s[2]+a.x*r)/(s[2]+r),s[1]=(s[1]*s[2]+a.y*r)/(s[2]+r),s[2]+=r):p[n][e]=[a.x,a.y,r]}for(t=0,i=p.length;i>t;t++)if(p[t])for(h=0,o=p[t].length;o>h;h++)s=p[t][h],s&&d.push([Math.round(s[0]),Math.round(s[1]),Math.min(s[2],c)]);this._heat.data(d).draw(this.options.minOpacity),this._frame=null},_animateZoom:function(t){var i=this._map.getZoomScale(t.zoom),a=this._map._getCenterOffset(t.center)._multiplyBy(-i).subtract(this._map._getMapPanePos());L.DomUtil.setTransform?L.DomUtil.setTransform(this._canvas,a,i):this._canvas.style[L.DomUtil.TRANSFORM]=L.DomUtil.getTranslateString(a)+" scale("+i+")"}}),L.heatLayer=function(t,i){return new L.HeatLayer(t,i)};