From 89fd7268db21c4aebdd0395c63731682df1a2d14 Mon Sep 17 00:00:00 2001 From: Sami Mokaddem Date: Mon, 23 Oct 2017 12:01:48 +0200 Subject: [PATCH] Manage map from classes + Added more event info in zmq feed --- server.py | 2 +- static/js/index/index_map.js | 198 ++++++++++++++++++++--------------- templates/index.html | 2 +- zmq_subscriber.py | 16 +-- 4 files changed, 128 insertions(+), 90 deletions(-) diff --git a/server.py b/server.py index 8a7eaaf..e22c798 100755 --- a/server.py +++ b/server.py @@ -105,7 +105,7 @@ def event_stream_log(): def event_stream_maps(): for msg in subscriber_map.listen(): content = msg['data'].decode('utf8') - print('sending map', content) + print(content) yield 'data: {}\n\n'.format(content) if __name__ == '__main__': diff --git a/static/js/index/index_map.js b/static/js/index/index_map.js index b2807f4..8ce0fc0 100644 --- a/static/js/index/index_map.js +++ b/static/js/index/index_map.js @@ -1,24 +1,117 @@ -var maxNumCoord = 100; -var max_img_rotation = 10; -var rotation_time = 1000*10; //10s +const MAXNUMCOORD = 100; +const MAXIMGROTATION = 10; +const ROTATIONWAITTIME = 1000*10; //10s -var mymap = L.map('feedDivMap1').setView([51.505, -0.09], 13);; -var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'; -var osmAttrib='Map data © OpenStreetMap contributors'; -var osm = new L.TileLayer(osmUrl, {minZoom: 3, maxZoom: 17, attribution: osmAttrib}).addTo(mymap); +const OSMURL='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'; +const OSMATTRIB='Map data © OpenStreetMap contributors'; -var coord_to_change = 0; -var coord_array = []; -var first_map = true; -var map_lat, map_lon; //current lat and lon shown in openStreetMap pannel +var myOpenStreetMap = L.map('feedDivMap1').setView([0, 0], 1); +var osm = new L.TileLayer(OSMURL, {minZoom: 0, maxZoom: 17, attribution: OSMATTRIB}).addTo(myOpenStreetMap); -/* MAP */ -var mapObj; -var curNumMarker = 0; -var allMarker = []; +class MapEvent { + constructor(json, marker) { + this.coord = json.coord; + this.marker = marker; + this.categ = json.categ; + this.value = json.value; + this.text = this.categ + ": " + this.value; + } +} -function marker_animation(x, y, curNumMarker) { - var markerColor = mapObj.markers[curNumMarker].element.config.style.current.fill; +class MapEventManager { + constructor() { + this._mapEventArray = []; + this._nextEventToShow = 0; + this._first_map = true; + this._coordSet = new Set(); + //current lat and lon shown in worldMap + this._latToPing; + this._lonToPing; + //Markers on the worldMap + this._allMarkers = []; + this._curMarkerNum = 0; + } + + addMapEvent(mapevent) { + if(this._mapEventArray.length >= MAXIMGROTATION) { + var toDel = this._mapEventArray[0]; + toDel._marker.remove(); // remove marker + this._coordSet.delete(toDel.text); + this._mapEventArray.slice(1); + } + + if(!this._coordSet.has(mapevent.text)) { // avoid duplicate map + this._mapEventArray.push(mapevent); + this._coordSet.add(mapevent.text); + this.popupCoord(mapevent.coord); + } else { + console.log('Duplicate coordinates'); + } + + if(this._first_map) { // remove no_map pic + this.rotateMap(); + this.ping(); + this._first_map = false; + } + } + + getNumberOfEvent() { + return this._mapEventArray.length + } + + getNextEventToShow() { + var toShow = this._mapEventArray[this._nextEventToShow]; + this._nextEventToShow = this._nextEventToShow == this._mapEventArray.length-1 ? 0 : this._nextEventToShow+1; + return toShow; + } + + // Perform the roration of the map in the openStreetMap pannel + rotateMap() { + var mapEvent = this.getNextEventToShow(); + this._latToPing = mapEvent.coord.lat; + this._lonToPing = mapEvent.coord.lon; + var marker = mapEvent.marker; + myOpenStreetMap.flyTo([mapEvent.coord.lat, mapEvent.coord.lon], 17); + + $("#textMap1").fadeOut(400, function(){ $(this).text(mapEvent.text); }).fadeIn(400); + setTimeout(function(){ mapEventManager.rotateMap(); }, ROTATIONWAITTIME); + } + + ping() { + var pnts = openStreetMapObj.latLngToPoint(this._latToPing, this._lonToPing); + if (pnts != false) { //sometimes latLngToPoint return false + $("#feedDiv2").append( + $('
') + .css({'left': pnts.x-15 + 'px'}) /* HACK to center the effect */ + .css({'top': pnts.y-15 + 'px'}) + .css({ 'background-color': 'orange' }) + .animate({ opacity: 0, scale: 1, height: '80px', width:'80px', margin: '-25px' }, 400, 'linear', function(){$(this).remove(); }) + ); + } + setTimeout(function(){ mapEventManager.ping(); }, ROTATIONWAITTIME/5); + } + + // Add and Manage markers on the map + make Animation + popupCoord(coord) { + var coord = [coord.lat, coord.lon]; + var value = Math.random()*180; + var pnts = openStreetMapObj.latLngToPoint(coord[0], coord[1]) + if (pnts != false) { //sometimes latLngToPoint return false + openStreetMapObj.addMarker(this._curMarkerNum, coord, [value]); + this._allMarkers.push(this._curMarkerNum) + marker_animation(pnts.x, pnts.y, this._curMarkerNum); + this._curMarkerNum = this._curMarkerNum >= MAXNUMCOORD ? 0 : this._curMarkerNum+1; + if (this._allMarkers.length >= MAXNUMCOORD) { + to_remove = this._allMarkers[0]; + openStreetMapObj.removeMarkers([to_remove]); + this._allMarkers = this._allMarkers.slice(1); + } + } + } +} + +function marker_animation(x, y, markerNum) { + var markerColor = openStreetMapObj.markers[markerNum].element.config.style.current.fill; $("#feedDiv2").append( $('
') .css({'left': x-15 + 'px'}) /* HACK to center the effect */ @@ -28,56 +121,8 @@ function marker_animation(x, y, curNumMarker) { ); } -// Add makers on the map -function popupCoord(coord) { - var coord = [coord['lat'], coord['lon']]; - var value = Math.random()*180; - pnts = mapObj.latLngToPoint(coord[0], coord[1]) - if (pnts != false) { //sometimes latLngToPoint return false - mapObj.addMarker(curNumMarker, coord, [value]); - allMarker.push(curNumMarker) - marker_animation(pnts.x, pnts.y, curNumMarker); - curNumMarker = curNumMarker>=maxNumCoord ? 0 : curNumMarker+1; - if (allMarker.length >= maxNumCoord) { - to_remove = allMarker[0]; - mapObj.removeMarkers([to_remove]); - allMarker = allMarker.slice(1); - } - } -} - -// Makes an animation on the marker concerned by the map shown in the openStreetMap pannel -function ping() { - pnts = mapObj.latLngToPoint(map_lat, map_lon); - if (pnts != false) { //sometimes latLngToPoint return false - $("#feedDiv2").append( - $('
') - .css({'left': pnts.x-15 + 'px'}) /* HACK to center the effect */ - .css({'top': pnts.y-15 + 'px'}) - .css({ 'background-color': 'orange' }) - .animate({ opacity: 0, scale: 1, height: '80px', width:'80px', margin: '-25px' }, 400, 'linear', function(){$(this).remove(); }) - ); - } - setTimeout(function(){ ping(); }, rotation_time/4); -} - -// Perform the roration of the map in the openStreetMap pannel -function rotate_map() { - var to_switch = coord_array[coord_to_change]; - var coord = to_switch[0]; - map_lat = coord.lat; - map_lon = coord.lon; - var marker = to_switch[1]; - var headerTxt = to_switch[2]; - mymap.setView([coord.lat, coord.lon], 17); - - $("#textMap1").fadeOut(400, function(){ $(this).text(headerTxt); }).fadeIn(400); - coord_to_change = coord_to_change == coord_array.length-1 ? 0 : coord_to_change+1; - - setTimeout(function(){ rotate_map(); }, rotation_time); -} - - +var mapEventManager = new MapEventManager(); +var openStreetMapObj; $(function(){ $('#feedDiv2').vectorMap({ @@ -93,28 +138,17 @@ $(function(){ }], }, }); - mapObj = $("#feedDiv2").vectorMap('get','mapObject'); + openStreetMapObj = $("#feedDiv2").vectorMap('get','mapObject'); }); // Subscribe to the flask eventStream var source_map = new EventSource(urlForMaps); source_map.onmessage = function(event) { var json = jQuery.parseJSON( event.data ); - popupCoord(json.coord); - var img2 = linkForDefaultMap.replace(/\/[^\/]+$/, "/"+json.path); - - if (coord_array.len >= max_img_rotation) { - coord_array[0][1].remove() // remove marker - coord_array.slice(1) - } - var marker = L.marker([json.coord.lat, json.coord.lon]).addTo(mymap); - coord_array.push([json.coord, marker, ""+json.coord.lat+", "+json.coord.lon]); + var marker = L.marker([json.coord.lat, json.coord.lon]).addTo(myOpenStreetMap); + var mapEvent = new MapEvent(json, marker); + mapEventManager.addMapEvent(mapEvent); - if (first_map) { // remove no_map pic - rotate_map(); - ping(); - first_map = false; - } }; source_map.onopen = function(){ console.log('connection is opened. '+source_map.readyState); diff --git a/templates/index.html b/templates/index.html index fac1f53..141bde1 100644 --- a/templates/index.html +++ b/templates/index.html @@ -99,7 +99,7 @@ small { -
No map +
No map
diff --git a/zmq_subscriber.py b/zmq_subscriber.py index 679ae86..60c899e 100755 --- a/zmq_subscriber.py +++ b/zmq_subscriber.py @@ -88,23 +88,27 @@ def default_attribute(jsonattr): #try to get coord if jsonattr['category'] == "Network activity": - handleCoord(jsonattr['value']) + handleCoord(jsonattr['value'], jsonattr['category']) to_send = { 'name': 'Attribute', 'log': json.dumps(to_push) } redis_server.publish(channel, json.dumps(to_send)) -def handleCoord(value): +def handleCoord(supposed_ip, categ): try: - coord = ip_to_coord(value) + coord = ip_to_coord(supposed_ip) coord_dic = {'lat': coord['lat'], 'lon': coord['lon']} coord_list = [coord['lat'], coord['lon']] print(coord_list) now = datetime.datetime.now() today_str = str(now.year)+str(now.month)+str(now.day) keyname = 'GEO_' + today_str - #serv_coord.zincrby(keyname, coord_list) - serv_coord.publish(channel_disp, json.dumps({ "coord": coord })) - print('coord sent') + serv_coord.zincrby(keyname, coord_list) + to_send = { + "coord": coord, + "categ": categ, + "value": supposed_ip + } + serv_coord.publish(channel_disp, json.dumps(to_send)) except ValueError: print("can't resolve ip")