From f52890e382a0b8fee06b4b3587cb60264aece4ce Mon Sep 17 00:00:00 2001 From: Sami Mokaddem Date: Fri, 27 Oct 2017 09:36:39 +0200 Subject: [PATCH] GEO: Moved options in config + Moved javascript in its own file --- config.cfg | 5 + server.py | 5 +- static/js/geo.js | 215 +++++++++++++++++++++++++++++++++++++ static/pics/calendar.gif | Bin 0 -> 258 bytes templates/geo.html | 225 +++------------------------------------ 5 files changed, 240 insertions(+), 210 deletions(-) create mode 100644 static/js/geo.js create mode 100644 static/pics/calendar.gif diff --git a/config.cfg b/config.cfg index bdfbc10..22302d1 100644 --- a/config.cfg +++ b/config.cfg @@ -11,6 +11,11 @@ size_dashboard_left_width = 5 size_openStreet_pannel_perc = 55 size_world_pannel_perc = 35 +[GEO] +#min +updateFrequency = 60 +zoomlevel = 11 + [Log] fieldname_order=["id", "category", "type", ["value", "comment"]] char_separator=|| diff --git a/server.py b/server.py index 174b393..6913a3d 100755 --- a/server.py +++ b/server.py @@ -125,7 +125,10 @@ def index(): @app.route("/geo") def geo(): - return render_template('geo.html') + return render_template('geo.html', + zoomlevel=cfg.getint('GEO' ,'zoomlevel'), + default_updateFrequency=cfg.getint('GEO' ,'updateFrequency') + ) @app.route("/_getTopCoord") def getTopCoord(): diff --git a/static/js/geo.js b/static/js/geo.js new file mode 100644 index 0000000..c44090c --- /dev/null +++ b/static/js/geo.js @@ -0,0 +1,215 @@ +const OSMURL='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'; +const OSMATTRIB='Map data © OpenStreetMap contributors'; +var ZOOMLEVEL = default_zoom_level; +var updateFrequency = 1000*60*default_updateFrequency //min + +var regionhitsMax = 10; +var regionhits = {}; +var allOpenStreetMap = {}; +var savedMarker = {}; +var savedMarkerRadius = []; +var datePickerWidget; +var datePickersRadiusWidget; +var radiusOpenStreetMap; +var circleRadius; + +/* CONFIG */ +var vectorMapConfig = { + map: 'world_mill', + markers: [], + series: { + regions: [{ + values: [], + min: 0, + max: 10, + scale: ['#003FBF','#0063BF','#0087BF','#00ACBF','#00BFAD','#00BF89','#00BF64','#00BF40','#00BF1C','#08BF00','#2CBF00','#51BF00','#75BF00','#99BF00','#BEBF00','#BF9B00','#BF7700','#BF5200','#BF2E00','#BF0900'], + normalizeFunction: 'linear', + legend: { + horizontal: true + } + }] + }, + onRegionTipShow: function(e, el, code){ + el.html(el.html()+' ('+regionhits[code]+')'); + } +} +var datePickerOptions = { + showOn: "button", + minDate: -31, + maxDate: 0, + buttonImage: urlIconCalendar, + buttonImageOnly: true, + buttonText: "Select date", + showAnim: "slideDown", + onSelect: updateAll +}; +var datePickerRadiusOptions = { + showOn: "button", + minDate: -31, + maxDate: 0, + buttonImage: urlIconCalendar, + buttonImageOnly: true, + buttonText: "Select date", + showAnim: "slideDown", +}; +var circleRadiusOptions = { + color: 'red', + weight: 1, + fillColor: '#f03', + fillOpacity: 0.4, +} + + + +/* START SCRIPTS */ +$(document).ready(function () { + // Page header + $( "#zoom_selector" ).attr("selected", "selected"); + $( "#zoom_selector" ).change(function() { + var sel = parseInt($( this ).val()); + ZOOMLEVEL = sel; + updateAll(); + }); + datePickerWidget = $( "#datepicker" ) + datePickerWidget.datepicker(datePickerOptions); + datePickerWidget.datepicker("setDate", new Date()); + + /* Top location */ + for(var i=1; i<7; i++) { + allOpenStreetMap[i] = L.map('topMap'+i).setView([0, 0], 0); + new L.TileLayer(OSMURL, {minZoom: 0, maxZoom: 18}).addTo(allOpenStreetMap[i]); + } + + // World map + $('#worldMap').vectorMap(vectorMapConfig); + worldMapObj = $("#worldMap").vectorMap('get','mapObject'); + + // Radius + radiusOpenStreetMap = L.map('radiusMap').setView([30, 0], 2); + new L.TileLayer(OSMURL, {minZoom: 0, maxZoom: 18}).addTo(radiusOpenStreetMap); + datePickersRadiusWidgetFrom = $( "#datepickerRadiusFrom" ) + datePickersRadiusWidgetFrom.datepicker(datePickerRadiusOptions); + datePickersRadiusWidgetFrom.datepicker("setDate", new Date()); + datePickersRadiusWidgetTo = $( "#datepickerRadiusTo" ) + datePickersRadiusWidgetTo.datepicker(datePickerRadiusOptions); + datePickersRadiusWidgetTo.datepicker("setDate", new Date()); + + circleRadiusOptions['radius'] = getScale(radiusOpenStreetMap.getZoom()); + circleRadius = L.circle(radiusOpenStreetMap.getCenter(), circleRadiusOptions).addTo(radiusOpenStreetMap); + radiusOpenStreetMap.on('move', updateRadius); + + // Start + updateAll(); + setInterval(function(){ + updateAll(); + $("#alertUpdate").fadeIn(2200).fadeOut(2200); + }, updateFrequency); + +}); + + +/* TOP LOCATION */ + +function updateTopMaps(dayNum) { + $.getJSON(urlTopCoord+"?dayNum="+dayNum, function(list){ + for(var i=0; i<6 && i'+list[i][1]+')').openPopup(); + } + } + }); +} + + +/* WORLD MAP */ + +function updateWorldMap(dayNum) { + $.getJSON(urlHitMap+"?dayNum="+dayNum, function(list){ + for(var i=0; i= regionhits[regionCode] ? regionhitsMax : regionhits[regionCode]; + worldMapObj.series.regions[0].params.max = regionhitsMax; + worldMapObj.series.regions[0].legend.render(); + // Update data + worldMapObj.series.regions[0].setValues(regionhits); +} + + +/* RADIUS MAP */ + +function updateRadius(e) { + var curObj = e.target; + var curCoord = curObj.getCenter(); + var zoom = curObj.zoom; + var scale = getScale(radiusOpenStreetMap.getZoom()); + circleRadius.setRadius(scale); + circleRadius.setLatLng(curCoord); +} + +function getScale(zoom) { + return 64 * Math.pow(2, (18-zoom)); +} + +function queryAndAddMarkers() { + var radius_km = circleRadius.getRadius() / 1000; + var coord = circleRadius._latlng; + var dateStart = datePickersRadiusWidgetFrom.datepicker("getDate").getTime() / 1000; + var dateEnd = datePickersRadiusWidgetTo.datepicker("getDate").getTime() / 1000; + $.getJSON(urlCoordsByRadius+"?dateStart="+dateStart+"&dateEnd="+dateEnd+"¢erLat="+coord.lat+"¢erLon="+coord.lng+"&radius="+radius_km, function(allList){ + // remove old markers + for (var i in savedMarkerRadius) { + savedMarkerRadius[i].remove(); // remove marker + } + + for (var listIndex in allList) { + var curMarker = allList[listIndex]; + var dataText = ""; + var coordJson = curMarker[1]; + for (var dataI in curMarker[0]) { + var jsonData = JSON.parse(curMarker[0][dataI]) + dataText += ''+jsonData.categ+': '+jsonData.value + "
" + } + var marker = L.marker([coordJson[1], coordJson[0]]).addTo(radiusOpenStreetMap); + savedMarkerRadius.push(marker); + marker.bindPopup(dataText, {autoClose:false}).openPopup(); + } + }); +} + + +/* UTIL */ + +function days_between(date1, date2) { + var ONEDAY = 60*60*24*1000; + var diff_ms = Math.abs(date1.getTime() - date2.getTime()); + return Math.round(diff_ms/ONEDAY); +} + +function updateAll() { + var currentDate = datePickerWidget.datepicker( "getDate" ); + var now = new Date(); + var numDay = days_between(now, currentDate); + updateTopMaps(numDay); + updateWorldMap(numDay); +} diff --git a/static/pics/calendar.gif b/static/pics/calendar.gif new file mode 100644 index 0000000000000000000000000000000000000000..52f2863c90764cabb11ac926b3f7e02b9b9e5e49 GIT binary patch literal 258 zcmZ?wbh9u|6kyTUl#W73z|)4nX4`*rp5ZyQ#B-@379)%)KM@Be-M>hGtI|Gs_w|L4#D z|Nj|~fDVWavWtPW{Q*md3PbOU5QXTA``&Hf+-&MQNyN4Pv4TT$qr;4tz7x@TlA2nj z{VVh>rsSCQXN#@AXk#?9q4e^OX(ylcxawre$mLbEZVWhZ^wyuYi=i=Ui~?zCvD{J; zob`>l`Gve(T%4S?jg@f;{OB2!bOQWALGdFOQVvkR?QwQ_|pZzJQT&0DrAGFSru Doau8X literal 0 HcmV?d00001 diff --git a/templates/geo.html b/templates/geo.html index 30c69df..3410322 100644 --- a/templates/geo.html +++ b/templates/geo.html @@ -77,16 +77,13 @@ small {
Zoom level:
@@ -226,208 +223,18 @@ small { +