mirror of https://github.com/MISP/misp-dashboard
Added pinging + map rotation
Sami Mokaddem
parent
7f9ded5262
commit
b4d8699e6a
|
|
@ -2,8 +2,12 @@
|
|||
var updateInterval = 1000*graph_log_refresh_rate; // 1s
|
||||
var maxNumPoint = 60;
|
||||
var maxNumCoord = 100;
|
||||
var max_img_rotation = 10;
|
||||
var rotation_time = 1000*10; //10s
|
||||
|
||||
var img_to_change = 1;
|
||||
var img_to_change = 0;
|
||||
var img_array = [];
|
||||
var first_map = true;
|
||||
var emptyArray = [];
|
||||
var mapCoord = [];
|
||||
var mapVal = [];
|
||||
|
|
@ -140,6 +144,40 @@ var optionsPieChart = {
|
|||
}
|
||||
};
|
||||
|
||||
function ping() {
|
||||
pnts = mapObj.latLngToPoint(map_lat, map_lon);
|
||||
console.log(pnts);
|
||||
if (pnts != false) { //sometimes latLngToPoint return false
|
||||
$("#feedDiv2").append(
|
||||
$('<div class="marker_animation"></div>')
|
||||
.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);
|
||||
}
|
||||
|
||||
var map_lat, map_lon;
|
||||
function rotate_map() {
|
||||
var to_switch = img_array[img_to_change];
|
||||
var pic = to_switch[0];
|
||||
var txt = to_switch[1];
|
||||
var coord = to_switch[2];
|
||||
map_lat = coord.lat;
|
||||
map_lon = coord.lon;
|
||||
console.log(to_switch);
|
||||
|
||||
$("#img1").fadeOut(400, function(){ $(this).attr('src', pic); }).fadeIn(400);
|
||||
$("#textMap1").fadeOut(400, function(){ $(this).text(txt); }).fadeIn(400);
|
||||
img_to_change = img_to_change == img_array.length-1 ? 0 : img_to_change+1;
|
||||
console.log(img_array);
|
||||
console.log(img_to_change);
|
||||
|
||||
setTimeout(function(){ rotate_map(); }, rotation_time);
|
||||
}
|
||||
|
||||
$(document).ready(function () {
|
||||
createHead(function() {
|
||||
if (!!window.EventSource) {
|
||||
|
|
@ -168,9 +206,18 @@ $(document).ready(function () {
|
|||
var json = jQuery.parseJSON( event.data );
|
||||
popupCoord(json.coord);
|
||||
var img2 = linkForDefaultMap.replace(/\/[^\/]+$/, "/"+json.path);
|
||||
$("#img"+img_to_change).fadeOut(400, function(){ $(this).attr('src', img2); }).fadeIn(400);
|
||||
$("#textMap"+img_to_change).fadeOut(400, function(){ $(this).text(json.path); }).fadeIn(400);
|
||||
img_to_change = img_to_change == 4 ? 0 : img_to_change+1;
|
||||
|
||||
if (img_array.len >= max_img_rotation) {
|
||||
img_array.slice(1)
|
||||
}
|
||||
img_array.push([img2, json.path, json.coord]);
|
||||
|
||||
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);
|
||||
|
|
|
|||
|
|
@ -38,9 +38,10 @@ table {
|
|||
-webkit-transform: translateZ(0); /* little trick to force GPU acceleration */
|
||||
}
|
||||
|
||||
img {
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
.center {
|
||||
display:block;
|
||||
margin-left:auto;
|
||||
margin-right:auto;
|
||||
}
|
||||
|
||||
small {
|
||||
|
|
@ -70,36 +71,26 @@ small {
|
|||
<div class="col-lg-12">
|
||||
<div class="col-lg-5">
|
||||
|
||||
<div class="panel panel-default" style="margin-top: 15px; height: 59vh;">
|
||||
<div class="panel panel-default" style="margin-top: 15px; height: 68vh;">
|
||||
<!--<div class="panel-heading">
|
||||
<i class="fa fa-bar-chart-o fa-fw"></i> Statistics
|
||||
</div>-->
|
||||
<!--<div id="panelbody" class="panel-body" style="height: 37vh; width:100%;">
|
||||
<div id="feedDiv1A" style="width:50%; height: calc(100% - 30px); position: relative; float: left;"></div>
|
||||
<div id="feedDiv1B" style="width:50%; height: calc(100% - 30px); position: relative; float: left;"></div>-->
|
||||
<div id="textMap1" class="panel-heading"> No map
|
||||
<i class="fa fa-bar-chart-o fa-fw"></i>
|
||||
</div>
|
||||
<div id="panelbody" class="panel-body" style="height: 100%; padding: 5px">
|
||||
<div id="feedDivMap1" style="width:50%; height: 50%; position: relative; float: left;">
|
||||
<small id="textMap1">text1</small>
|
||||
<img id="img1" src="{{ url_for('static', filename='maps/default.png') }}" style="width:98%;height:97%;">
|
||||
</div>
|
||||
<div id="feedDivMap2" style="width:50%; height: 50%; position: relative; float: left;">
|
||||
<small id="textMap2">text2</small>
|
||||
<img id="img2" src="{{ url_for('static', filename='maps/default.png') }}" style="width:98%;height:97%;">
|
||||
</div>
|
||||
<div id="feedDivMap3" style="width:50%; height: 50%; position: relative; float: left; margin-top: 13px;">
|
||||
<small style="height:10%;" id="textMap3">text3</small>
|
||||
<img id="img3" src="{{ url_for('static', filename='maps/default.png') }}" style="width:98%;height:87%;">
|
||||
</div>
|
||||
<div id="feedDivMap4" style="width:50%; height: 50%; position: relative; float: left; margin-top: 13px;">
|
||||
<small style="height:10%;" id="textMap4">text4</small>
|
||||
<img id="img4" src="{{ url_for('static', filename='maps/default.png') }}" style="width:98%;height:87%;">
|
||||
<div id="feedDivMap1" style="width:100%; height: 100%">
|
||||
<img id="img1" src="{{ url_for('static', filename='maps/default.png') }}" class="center" style="max-height: 93%;">
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.panel-body -->
|
||||
|
||||
</div>
|
||||
<!-- /.panel -->
|
||||
<div class="panel panel-default" style="margin-top: 15px; height: 29vh;">
|
||||
<div class="panel panel-default" style="margin-top: 15px; height: 20vh;">
|
||||
<div class="panel-heading">
|
||||
<i class="fa fa-bar-chart-o fa-fw"></i> Log feed
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue