mirror of https://github.com/MISP/misp-dashboard
Splitted index script into sub_scripts
Sami Mokaddem
parent
801a9111ce
commit
00e2e7bd6a
|
|
@ -1,412 +0,0 @@
|
|||
//color: #5f6062
|
||||
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 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 © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors';
|
||||
var osm = new L.TileLayer(osmUrl, {minZoom: 3, maxZoom: 17, attribution: osmAttrib}).addTo(mymap);
|
||||
|
||||
var coord_to_change = 0;
|
||||
var coord_array = [];
|
||||
var img_to_change = 0;
|
||||
var img_array = [];
|
||||
var first_map = true;
|
||||
var emptyArray = [];
|
||||
var mapCoord = [];
|
||||
var mapVal = [];
|
||||
for(i=0; i<maxNumPoint; i++) {
|
||||
emptyArray.push([i, 0]);
|
||||
if (i<20) {
|
||||
mapCoord.push([]);
|
||||
mapVal.push(0);
|
||||
}
|
||||
}
|
||||
|
||||
class Sources {
|
||||
constructor() {
|
||||
this._sourcesArray = {};
|
||||
this._sourcesCount = {};
|
||||
this._sourcesCountMax = {};
|
||||
this._globalMax = 0;
|
||||
this._sourceNames = [];
|
||||
}
|
||||
|
||||
addSource(sourceName) {
|
||||
this._sourcesArray[sourceName] = emptyArray;
|
||||
this._sourcesCount[sourceName] = 0;
|
||||
this._sourcesCountMax[sourceName] = 0;
|
||||
this._sourceNames.push(sourceName);
|
||||
}
|
||||
|
||||
addIfNotPresent(sourceName) {
|
||||
if (this._sourceNames.indexOf(sourceName) == -1) {
|
||||
this.addSource(sourceName);
|
||||
}
|
||||
}
|
||||
|
||||
incCountOnSource(sourceName) {
|
||||
this._sourcesCount[sourceName] += 1;
|
||||
}
|
||||
|
||||
resetCountOnSource() {
|
||||
for (var src of this._sourceNames) {
|
||||
this._sourcesCount[src] = 0;
|
||||
}
|
||||
}
|
||||
|
||||
slideSource() {
|
||||
var globMax = 0;
|
||||
for (var src of this._sourceNames) {
|
||||
// res[0] = max, res[1] = slidedArray
|
||||
var res = slideAndMax(this._sourcesArray[src], this._sourcesCount[src]);
|
||||
// max
|
||||
this._sourcesCountMax[src] = res[0];
|
||||
globMax = globMax > res[0] ? globMax : res[0];
|
||||
// data
|
||||
this._sourcesArray[src] = res[1];
|
||||
}
|
||||
this._globalMax = globMax;
|
||||
}
|
||||
|
||||
toArray() {
|
||||
var to_return = [];
|
||||
for (var src of this._sourceNames) {
|
||||
to_return.push({
|
||||
label: src,
|
||||
data: this._sourcesArray[src]
|
||||
});
|
||||
}
|
||||
return to_return;
|
||||
}
|
||||
|
||||
getGlobalMax() {
|
||||
return this._globalMax;
|
||||
}
|
||||
|
||||
getSingleSource(sourceName) {
|
||||
return this._sourcesArray[sourceName];
|
||||
}
|
||||
|
||||
getEmptyData() {
|
||||
return [{label: 'no data', data: emptyArray}];
|
||||
}
|
||||
}
|
||||
|
||||
var sources = new Sources();
|
||||
sources.addSource('global');
|
||||
|
||||
var curNumLog = 0;
|
||||
var curMaxDataNumLog = 0;
|
||||
|
||||
var optionsLineChart = {
|
||||
series: {
|
||||
shadowSize: 0 ,
|
||||
lines: {
|
||||
fill: true,
|
||||
fillColor: {
|
||||
colors: [ { opacity: 1 }, { opacity: 0.1 } ]
|
||||
}
|
||||
}
|
||||
},
|
||||
//colors: ["#2fa1db"],
|
||||
yaxis: { min: 0, max: 20 },
|
||||
xaxis: { min: 0, max: maxNumPoint-1 },
|
||||
ticks: maxNumPoint,
|
||||
grid: {
|
||||
tickColor: "#dddddd",
|
||||
borderWidth: 0
|
||||
},
|
||||
legend: {
|
||||
show: true,
|
||||
position: "nw"
|
||||
}
|
||||
};
|
||||
|
||||
function labelFormatter(label, series) {
|
||||
return "<div style='font-size:8pt; text-align:center; padding:2px; color:white;'>"
|
||||
+ label + "<br/>" + Math.round(series.percent) + "%</div>";
|
||||
}
|
||||
var optionsPieChart = {
|
||||
series: {
|
||||
pie: {
|
||||
innerRadius: 0.5,
|
||||
show: true,
|
||||
label: {
|
||||
show: true,
|
||||
radius: 1,
|
||||
formatter: labelFormatter,
|
||||
background: {
|
||||
opacity: 0.7,
|
||||
color: '#000'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
}
|
||||
};
|
||||
|
||||
function ping() {
|
||||
pnts = mapObj.latLngToPoint(map_lat, map_lon);
|
||||
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 = 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);
|
||||
}
|
||||
|
||||
$(document).ready(function () {
|
||||
createHead(function() {
|
||||
if (!!window.EventSource) {
|
||||
var source_log = new EventSource(urlForLogs);
|
||||
|
||||
source_log.onopen = function(){
|
||||
//console.log('connection is opened. '+source_log.readyState);
|
||||
};
|
||||
|
||||
source_log.onerror = function(){
|
||||
//console.log('error: '+source_log.readyState);
|
||||
};
|
||||
|
||||
source_log.onmessage = function(event) {
|
||||
var json = jQuery.parseJSON( event.data );
|
||||
updateLogTable(json.feedName, json.log);
|
||||
};
|
||||
|
||||
} else {
|
||||
console.log("No event source_log");
|
||||
}
|
||||
});
|
||||
|
||||
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]);
|
||||
|
||||
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);
|
||||
};
|
||||
source_map.onerror = function(){
|
||||
console.log('error: '+source_map.readyState);
|
||||
};
|
||||
|
||||
});
|
||||
|
||||
var rData = [
|
||||
{ label: "Series1", data: 10},
|
||||
{ label: "Series2", data: 30},
|
||||
{ label: "Series3", data: 60}
|
||||
];
|
||||
var plotLineChart = $.plot("#feedDiv3", sources.getEmptyData(), optionsLineChart);
|
||||
//var plotPieChartA = $.plot("#feedDiv1A", rData, optionsPieChart);
|
||||
//var plotPieChartB = $.plot("#feedDiv1B", rData, optionsPieChart);
|
||||
updateChart()
|
||||
|
||||
function updateChart() {
|
||||
updateChart1();
|
||||
updateChart2();
|
||||
setTimeout(updateChart, updateInterval);
|
||||
}
|
||||
|
||||
function updateChart1() {
|
||||
sources.slideSource();
|
||||
sources.resetCountOnSource();
|
||||
plotLineChart.setData(sources.toArray());
|
||||
plotLineChart.getOptions().yaxes[0].max = sources.getGlobalMax();
|
||||
plotLineChart.setupGrid();
|
||||
plotLineChart.draw();
|
||||
}
|
||||
|
||||
function updateChart2() {
|
||||
|
||||
}
|
||||
|
||||
function updateLogTable(feedName, log) {
|
||||
if (log.length == 0)
|
||||
return;
|
||||
|
||||
// Create new row
|
||||
tableBody = document.getElementById('table_log_body');
|
||||
//curNumLog++;
|
||||
sources.addIfNotPresent(feedName);
|
||||
sources.incCountOnSource(feedName);
|
||||
sources.incCountOnSource('global');
|
||||
|
||||
// only add row for attribute
|
||||
if (feedName == "Attribute" ) {
|
||||
createRow(tableBody, log);
|
||||
|
||||
// Remove old row
|
||||
var logSel = document.getElementById("log_select");
|
||||
//get height of pannel, find max num of item
|
||||
var maxNumLogItem = document.getElementById('divLogTable').clientHeight/37;
|
||||
maxNumLogItem -= 2; //take heading/padding/... into account
|
||||
if (maxNumLogItem - parseInt(maxNumLogItem) < 0.5) { //beautifier
|
||||
maxNumLogItem -= 1;
|
||||
}
|
||||
if (tableBody.rows.length > maxNumLogItem) {
|
||||
while (tableBody.rows.length >= maxNumLogItem){
|
||||
tableBody.deleteRow(0);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// do nothing
|
||||
return;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function slideAndMax(orig, newData) {
|
||||
var slided = [];
|
||||
var max = newData;
|
||||
for (i=1; i<orig.length; i++) {
|
||||
y = orig[i][1];
|
||||
slided.push([i-1, y]);
|
||||
max = y > max ? y : max;
|
||||
}
|
||||
slided.push([orig.length-1, newData]);
|
||||
curMaxDataNumLog = max;
|
||||
return [curMaxDataNumLog, slided];
|
||||
}
|
||||
|
||||
function createRow(tableBody, log) {
|
||||
var tr = document.createElement('TR');
|
||||
//var action = document.createElement('TD');
|
||||
|
||||
for (var key in log) {
|
||||
if (log.hasOwnProperty(key)) {
|
||||
var td = document.createElement('TD');
|
||||
td.appendChild(document.createTextNode(log[key]));
|
||||
tr.appendChild(td);
|
||||
}
|
||||
}
|
||||
|
||||
// level
|
||||
if( log.level == "INFO" ){
|
||||
tr.className = "info";
|
||||
}
|
||||
else if ( log.level == "WARNING" ){
|
||||
tr.className = "warning";
|
||||
}
|
||||
else if ( log.level == "CRITICAL"){
|
||||
tr.className = "danger"
|
||||
}
|
||||
|
||||
// action
|
||||
//action.appendChild(document.createTextNode("ACTION"));
|
||||
//tr.appendChild(action);
|
||||
|
||||
tableBody.appendChild(tr);
|
||||
|
||||
}
|
||||
|
||||
function createHead(callback) {
|
||||
if (document.getElementById('table_log_head').childNodes.length > 1)
|
||||
return
|
||||
$.getJSON( urlForHead, function( data ) {
|
||||
var tr = document.createElement('TR');
|
||||
for (head of data) {
|
||||
var th = document.createElement('TH');
|
||||
th.appendChild(document.createTextNode(head));
|
||||
tr.appendChild(th);
|
||||
}
|
||||
//var action = document.createElement('TH');
|
||||
//action.appendChild(document.createTextNode("Actions"));
|
||||
//tr.appendChild(action);
|
||||
document.getElementById('table_log_head').appendChild(tr);
|
||||
callback();
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
/* MAP */
|
||||
var mapObj;
|
||||
var curNumMarker = 0;
|
||||
var allMarker = [];
|
||||
|
||||
function marker_animation(x, y, curNumMarker) {
|
||||
var markerColor = mapObj.markers[curNumMarker].element.config.style.current.fill;
|
||||
$("#feedDiv2").append(
|
||||
$('<div class="marker_animation"></div>')
|
||||
.css({'left': x-15 + 'px'}) /* HACK to center the effect */
|
||||
.css({'top': y-15 + 'px'})
|
||||
.css({ 'background-color': markerColor })
|
||||
.animate({ opacity: 0, scale: 1, height: '80px', width:'80px', margin: '-25px' }, 700, 'linear', function(){$(this).remove(); })
|
||||
);
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
$(function(){
|
||||
$('#feedDiv2').vectorMap({
|
||||
map: 'world_mill',
|
||||
markers: [],
|
||||
series: {
|
||||
markers: [{
|
||||
attribute: 'fill',
|
||||
scale: ['#1A0DAB', '#e50000', '#62ff41'],
|
||||
values: [],
|
||||
min: 0,
|
||||
max: 180
|
||||
}],
|
||||
},
|
||||
})
|
||||
mapObj = $("#feedDiv2").vectorMap('get','mapObject');
|
||||
});
|
||||
|
|
@ -0,0 +1,199 @@
|
|||
class Sources {
|
||||
constructor() {
|
||||
this._sourcesArray = {};
|
||||
this._sourcesCount = {};
|
||||
this._sourcesCountMax = {};
|
||||
this._globalMax = 0;
|
||||
this._sourceNames = [];
|
||||
}
|
||||
|
||||
addSource(sourceName) {
|
||||
this._sourcesArray[sourceName] = [];
|
||||
this._sourcesCount[sourceName] = 0;
|
||||
this._sourcesCountMax[sourceName] = 0;
|
||||
this._sourceNames.push(sourceName);
|
||||
}
|
||||
|
||||
addIfNotPresent(sourceName) {
|
||||
if (this._sourceNames.indexOf(sourceName) == -1) {
|
||||
this.addSource(sourceName);
|
||||
}
|
||||
}
|
||||
|
||||
incCountOnSource(sourceName) {
|
||||
this._sourcesCount[sourceName] += 1;
|
||||
}
|
||||
|
||||
resetCountOnSource() {
|
||||
for (var src of this._sourceNames) {
|
||||
this._sourcesCount[src] = 0;
|
||||
}
|
||||
}
|
||||
|
||||
slideSource() {
|
||||
var globMax = 0;
|
||||
for (var src of this._sourceNames) {
|
||||
// res[0] = max, res[1] = slidedArray
|
||||
var res = slideAndMax(this._sourcesArray[src], this._sourcesCount[src]);
|
||||
// max
|
||||
this._sourcesCountMax[src] = res[0];
|
||||
globMax = globMax > res[0] ? globMax : res[0];
|
||||
// data
|
||||
this._sourcesArray[src] = res[1];
|
||||
}
|
||||
this._globalMax = globMax;
|
||||
}
|
||||
|
||||
toArray() {
|
||||
var to_return = [];
|
||||
for (var src of this._sourceNames) {
|
||||
to_return.push({
|
||||
label: src,
|
||||
data: this._sourcesArray[src]
|
||||
});
|
||||
}
|
||||
return to_return;
|
||||
}
|
||||
|
||||
getGlobalMax() {
|
||||
return this._globalMax;
|
||||
}
|
||||
|
||||
getSingleSource(sourceName) {
|
||||
return this._sourcesArray[sourceName];
|
||||
}
|
||||
|
||||
getEmptyData() {
|
||||
return [{label: 'no data', data: []}];
|
||||
}
|
||||
}
|
||||
|
||||
/* END CLASS SOURCE */
|
||||
|
||||
var sources = new Sources();
|
||||
sources.addSource('global');
|
||||
|
||||
var curNumLog = 0;
|
||||
var curMaxDataNumLog = 0;
|
||||
|
||||
$(document).ready(function () {
|
||||
createHead(function() {
|
||||
if (!!window.EventSource) {
|
||||
var source_log = new EventSource(urlForLogs);
|
||||
|
||||
source_log.onopen = function(){
|
||||
//console.log('connection is opened. '+source_log.readyState);
|
||||
};
|
||||
|
||||
source_log.onerror = function(){
|
||||
//console.log('error: '+source_log.readyState);
|
||||
};
|
||||
|
||||
source_log.onmessage = function(event) {
|
||||
var json = jQuery.parseJSON( event.data );
|
||||
updateLogTable(json.feedName, json.log);
|
||||
};
|
||||
|
||||
} else {
|
||||
console.log("No event source_log");
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
// LOG TABLE
|
||||
function updateLogTable(feedName, log) {
|
||||
if (log.length == 0)
|
||||
return;
|
||||
|
||||
// Create new row
|
||||
tableBody = document.getElementById('table_log_body');
|
||||
//curNumLog++;
|
||||
sources.addIfNotPresent(feedName);
|
||||
sources.incCountOnSource(feedName);
|
||||
sources.incCountOnSource('global');
|
||||
|
||||
// only add row for attribute
|
||||
if (feedName == "Attribute" ) {
|
||||
createRow(tableBody, log);
|
||||
|
||||
// Remove old row
|
||||
var logSel = document.getElementById("log_select");
|
||||
//get height of pannel, find max num of item
|
||||
var maxNumLogItem = document.getElementById('divLogTable').clientHeight/37;
|
||||
maxNumLogItem -= 2; //take heading/padding/... into account
|
||||
if (maxNumLogItem - parseInt(maxNumLogItem) < 0.5) { //beautifier
|
||||
maxNumLogItem -= 1;
|
||||
}
|
||||
if (tableBody.rows.length > maxNumLogItem) {
|
||||
while (tableBody.rows.length >= maxNumLogItem){
|
||||
tableBody.deleteRow(0);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// do nothing
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
function slideAndMax(orig, newData) {
|
||||
var slided = [];
|
||||
var max = newData;
|
||||
for (i=1; i<orig.length; i++) {
|
||||
y = orig[i][1];
|
||||
slided.push([i-1, y]);
|
||||
max = y > max ? y : max;
|
||||
}
|
||||
slided.push([orig.length-1, newData]);
|
||||
curMaxDataNumLog = max;
|
||||
return [curMaxDataNumLog, slided];
|
||||
}
|
||||
|
||||
function createRow(tableBody, log) {
|
||||
var tr = document.createElement('TR');
|
||||
//var action = document.createElement('TD');
|
||||
|
||||
for (var key in log) {
|
||||
if (log.hasOwnProperty(key)) {
|
||||
var td = document.createElement('TD');
|
||||
td.appendChild(document.createTextNode(log[key]));
|
||||
tr.appendChild(td);
|
||||
}
|
||||
}
|
||||
|
||||
// level
|
||||
if( log.level == "INFO" ){
|
||||
tr.className = "info";
|
||||
}
|
||||
else if ( log.level == "WARNING" ){
|
||||
tr.className = "warning";
|
||||
}
|
||||
else if ( log.level == "CRITICAL"){
|
||||
tr.className = "danger"
|
||||
}
|
||||
|
||||
// action
|
||||
//action.appendChild(document.createTextNode("ACTION"));
|
||||
//tr.appendChild(action);
|
||||
|
||||
tableBody.appendChild(tr);
|
||||
|
||||
}
|
||||
|
||||
function createHead(callback) {
|
||||
if (document.getElementById('table_log_head').childNodes.length > 1)
|
||||
return
|
||||
$.getJSON( urlForHead, function( data ) {
|
||||
var tr = document.createElement('TR');
|
||||
for (head of data) {
|
||||
var th = document.createElement('TH');
|
||||
th.appendChild(document.createTextNode(head));
|
||||
tr.appendChild(th);
|
||||
}
|
||||
//var action = document.createElement('TH');
|
||||
//action.appendChild(document.createTextNode("Actions"));
|
||||
//tr.appendChild(action);
|
||||
document.getElementById('table_log_head').appendChild(tr);
|
||||
callback();
|
||||
});
|
||||
}
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
var updateInterval = 1000*graph_log_refresh_rate; // 1s
|
||||
var maxNumPoint = 60;
|
||||
|
||||
var optionsLineChart = {
|
||||
series: {
|
||||
shadowSize: 0 ,
|
||||
lines: {
|
||||
fill: true,
|
||||
fillColor: {
|
||||
colors: [ { opacity: 1 }, { opacity: 0.1 } ]
|
||||
}
|
||||
}
|
||||
},
|
||||
//colors: ["#2fa1db"],
|
||||
yaxis: { min: 0, max: 20 },
|
||||
xaxis: { min: 0, max: maxNumPoint-1 },
|
||||
ticks: maxNumPoint,
|
||||
grid: {
|
||||
tickColor: "#dddddd",
|
||||
borderWidth: 0
|
||||
},
|
||||
legend: {
|
||||
show: true,
|
||||
position: "nw"
|
||||
}
|
||||
};
|
||||
|
||||
var rData = [
|
||||
{ label: "Series1", data: 10},
|
||||
{ label: "Series2", data: 30},
|
||||
{ label: "Series3", data: 60}
|
||||
];
|
||||
var plotLineChart = $.plot("#feedDiv3", sources.getEmptyData(), optionsLineChart);
|
||||
|
||||
function updateChart() {
|
||||
sources.slideSource();
|
||||
sources.resetCountOnSource();
|
||||
plotLineChart.setData(sources.toArray());
|
||||
plotLineChart.getOptions().yaxes[0].max = sources.getGlobalMax();
|
||||
plotLineChart.setupGrid();
|
||||
plotLineChart.draw();
|
||||
setTimeout(updateChart, updateInterval);
|
||||
}
|
||||
updateChart()
|
||||
|
|
@ -0,0 +1,124 @@
|
|||
var maxNumCoord = 100;
|
||||
var max_img_rotation = 10;
|
||||
var rotation_time = 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 © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors';
|
||||
var osm = new L.TileLayer(osmUrl, {minZoom: 3, maxZoom: 17, attribution: osmAttrib}).addTo(mymap);
|
||||
|
||||
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
|
||||
|
||||
/* MAP */
|
||||
var mapObj;
|
||||
var curNumMarker = 0;
|
||||
var allMarker = [];
|
||||
|
||||
function marker_animation(x, y, curNumMarker) {
|
||||
var markerColor = mapObj.markers[curNumMarker].element.config.style.current.fill;
|
||||
$("#feedDiv2").append(
|
||||
$('<div class="marker_animation"></div>')
|
||||
.css({'left': x-15 + 'px'}) /* HACK to center the effect */
|
||||
.css({'top': y-15 + 'px'})
|
||||
.css({ 'background-color': markerColor })
|
||||
.animate({ opacity: 0, scale: 1, height: '80px', width:'80px', margin: '-25px' }, 700, 'linear', function(){$(this).remove(); })
|
||||
);
|
||||
}
|
||||
|
||||
// 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(
|
||||
$('<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);
|
||||
}
|
||||
|
||||
// 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);
|
||||
}
|
||||
|
||||
|
||||
|
||||
$(function(){
|
||||
$('#feedDiv2').vectorMap({
|
||||
map: 'world_mill',
|
||||
markers: [],
|
||||
series: {
|
||||
markers: [{
|
||||
attribute: 'fill',
|
||||
scale: ['#1A0DAB', '#e50000', '#62ff41'],
|
||||
values: [],
|
||||
min: 0,
|
||||
max: 180
|
||||
}],
|
||||
},
|
||||
});
|
||||
mapObj = $("#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]);
|
||||
|
||||
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);
|
||||
};
|
||||
source_map.onerror = function(){
|
||||
console.log('error: '+source_map.readyState);
|
||||
};
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
function labelFormatter(label, series) {
|
||||
return "<div style='font-size:8pt; text-align:center; padding:2px; color:white;'>"
|
||||
+ label + "<br/>" + Math.round(series.percent) + "%</div>";
|
||||
}
|
||||
var optionsPieChart = {
|
||||
series: {
|
||||
pie: {
|
||||
innerRadius: 0.5,
|
||||
show: true,
|
||||
label: {
|
||||
show: true,
|
||||
radius: 1,
|
||||
formatter: labelFormatter,
|
||||
background: {
|
||||
opacity: 0.7,
|
||||
color: '#000'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
}
|
||||
};
|
||||
|
||||
var plotPieChartA = $.plot("#feedDiv1A", rData, optionsPieChart);
|
||||
var plotPieChartB = $.plot("#feedDiv1B", rData, optionsPieChart);
|
||||
|
|
@ -49,6 +49,20 @@ table {
|
|||
margin-right:auto;
|
||||
}
|
||||
|
||||
.panel-body {
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
/*
|
||||
.panel-default {
|
||||
border-color: #ddd;
|
||||
border-top-color: rgb(221, 221, 221);
|
||||
border-right-color: rgb(221, 221, 221);
|
||||
border-bottom-color: #fff0;
|
||||
border-left-color: rgb(221, 221, 221);
|
||||
}
|
||||
*/
|
||||
|
||||
small {
|
||||
font-size: 100%;
|
||||
font-weight: bold;
|
||||
|
|
@ -186,7 +200,10 @@ small {
|
|||
setTimeout(function(){
|
||||
}, 3000);
|
||||
</script>
|
||||
<script src="{{ url_for('static', filename='js/index.js') }}"></script>
|
||||
<script src="{{ url_for('static', filename='js/index/index.js') }}"></script>
|
||||
<script src="{{ url_for('static', filename='js/index/index_lineChart.js') }}"></script>
|
||||
<script src="{{ url_for('static', filename='js/index/index_map.js') }}"></script>
|
||||
<script src="{{ url_for('static', filename='js/index/index_pie.js') }}"></script>
|
||||
|
||||
|
||||
<link href="{{ url_for('static', filename='css/font-awesome.min.css') }}" rel="text/css">
|
||||
|
|
|
|||
Loading…
Reference in New Issue