Splitted index script into sub_scripts

pull/18/head
Sami Mokaddem 2017-10-20 15:09:53 +02:00
parent 801a9111ce
commit 00e2e7bd6a
6 changed files with 412 additions and 413 deletions

View File

@ -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');
});

199
static/js/index/index.js Normal file
View File

@ -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();
});
}

View File

@ -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()

View File

@ -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);
};

View File

@ -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);

View File

@ -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">