256 lines
8.5 KiB
JavaScript
256 lines
8.5 KiB
JavaScript
/********************************************************************
|
|
* Dynamic Receiver Statistic for Radarcape
|
|
********************************************************************
|
|
* Guenter Koellner Embedded Development GmbH
|
|
*
|
|
* Am Rain 24
|
|
* 85256 Vierkirchen
|
|
* Geschaeftsfuehrer Guenter Koellner
|
|
*
|
|
* References:
|
|
* https://www.w3schools.com/jsref/default.asp
|
|
* http://www.chartjs.org/docs/latest/
|
|
*
|
|
* http://www.modesbeast.com
|
|
********************************************************************/
|
|
|
|
function get_date_time_string (unix_timestamp, nanoseconds) {
|
|
// Create a new JavaScript Date object based on the timestamp
|
|
// multiplied by 1000 so that the argument is in milliseconds, not seconds.
|
|
var date = new Date(unix_timestamp*1000);
|
|
// Hours part from the timestamp
|
|
var hours = date.getHours();
|
|
var minutes = "0" + date.getMinutes();
|
|
var seconds = "0" + date.getSeconds();
|
|
var formattedTime = date.toISOString();
|
|
formattedTime = formattedTime.replace("T"," ");
|
|
formattedTime = formattedTime.substr(0, 19);
|
|
|
|
return formattedTime;
|
|
}
|
|
|
|
var timeSelect = "";
|
|
var refresh_time = 1;
|
|
var PRODUCT_NAME = "";
|
|
|
|
var COL_RED = "#ff0000ff"
|
|
var COL_BLUE = "#0000ffff"
|
|
var COL_BLACK = "#000000ff"
|
|
var COL_ADSB = "#00000070"
|
|
var COL_MLAT = "rgba(200,0,0,1)"
|
|
var COL_FLAWA = "#006400ff"
|
|
var COL_FLARM = "#ff40ffff"
|
|
var COL_OGN = "#ff00ffff"
|
|
var COL_TRANSPARENT = "#00000000"
|
|
|
|
|
|
function init_graphs(props, graph_props) {
|
|
props.forEach(function(element)
|
|
{
|
|
var basic_props = {
|
|
label: element.label,
|
|
fill: false,
|
|
lineTension: 0,
|
|
backgroundColor: element.color,
|
|
borderColor: element.color,
|
|
borderDash: [],
|
|
borderDashOffset: 0.0,
|
|
borderCapStyle : "round",
|
|
pointBorderColor: element.color,
|
|
pointBackgroundColor: "#00000000",
|
|
pointBorderWidth: 1,
|
|
pointHoverRadius: 5,
|
|
pointHoverBackgroundColor: "#00000000",
|
|
pointHoverBorderColor: element.color,
|
|
pointHoverBorderWidth: 2,
|
|
pointRadius: 0,
|
|
data: []
|
|
}
|
|
var props = $.extend( {}, basic_props )
|
|
graph_props.datasets.push(props)
|
|
})
|
|
}
|
|
|
|
|
|
function swapduration(T){
|
|
if (T=="sec") {
|
|
timeSelect="";
|
|
myChartNofFrames.data.datasets[1].showLine = true;
|
|
myChartNofFrames.data.datasets[1].label = "Frames per second (avg)";
|
|
}
|
|
else if (T=="10sec") {
|
|
timeSelect="?select=10seconds";
|
|
myChartNofFrames.data.datasets[1].showLine = false;
|
|
myChartNofFrames.data.datasets[1].label = null;
|
|
}
|
|
else if (T=="min") {
|
|
timeSelect="?select=minutes";
|
|
myChartNofFrames.data.datasets[1].showLine = false;
|
|
myChartNofFrames.data.datasets[1].label = null;
|
|
}
|
|
else if (T=="hour") {
|
|
timeSelect="?select=hours";
|
|
myChartNofFrames.data.datasets[1].showLine = false;
|
|
myChartNofFrames.data.datasets[1].label = null;
|
|
}
|
|
updateTable();
|
|
}
|
|
|
|
|
|
function updateTable() {
|
|
getJSON( rcd_globals.fcgipath+"statistic.json"+timeSelect, function(stat_data) {
|
|
|
|
refresh_time = ( typeof stat_data["refreshstatus"]!=='undefined' ) ? stat_data["refreshstatus"] : refresh_time;
|
|
|
|
var table = document.getElementById("mapinfo_table").tBodies[0];
|
|
|
|
var cells = table.rows.namedItem("time" ).cells[1].innerHTML = get_date_time_string(stat_data["time"]);
|
|
cells = table.rows.namedItem("resolution" ).cells[1].innerHTML = stat_data["resolution" ] + " sec";
|
|
cells = table.rows.namedItem("allframespersecond").cells[1].innerHTML = stat_data["allframespersecond"].slice(-1);
|
|
cells = table.rows.namedItem("aclist_size" ).cells[1].innerHTML = stat_data["aclist_size" ].slice(-1);
|
|
cells = table.rows.namedItem("aclist_listed" ).cells[1].innerHTML = stat_data["aclist_listed" ].slice(-1);
|
|
cells = table.rows.namedItem("aclist_nof_adsb" ).cells[1].innerHTML = stat_data["aclist_active_adsb" ].slice(-1);
|
|
cells = table.rows.namedItem("aclist_nof_mlat" ).cells[1].innerHTML = stat_data["aclist_active_mlat" ].slice(-1);
|
|
cells = table.rows.namedItem("aclist_nof_flarm" ).cells[1].innerHTML = stat_data["aclist_active_flarm" ].slice(-1);
|
|
|
|
var labels = [];
|
|
for (var i = 0; i < stat_data["allframespersecond"].length; i++) {
|
|
labels.unshift(get_date_time_string(stat_data["time"]-i*stat_data["resolution"]))
|
|
}
|
|
|
|
myChartNofFrames.data.labels = labels;
|
|
myChartNofFrames.data.datasets[0].data = stat_data["allframespersecond"];
|
|
|
|
if( timeSelect=="" ) {
|
|
var avg_num = 10;
|
|
var avg_data = [];
|
|
for (var i = 0; i < stat_data["allframespersecond"].length-avg_num; i++) {
|
|
var arr = stat_data["allframespersecond"].slice(i, i+avg_num);
|
|
var sum = arr.reduce(function(a, b) { return a + b; });
|
|
avg = sum / avg_num;
|
|
avg_data.push(avg);
|
|
}
|
|
myChartNofFrames.data.datasets[1].data = avg_data;
|
|
}
|
|
myChartNofAircraft.update();
|
|
|
|
myChartNofAircraft.data.labels = labels;
|
|
myChartNofAircraft.data.datasets[0].data = stat_data["aclist_listed"];
|
|
myChartNofAircraft.data.datasets[1].data = stat_data["aclist_active_adsb"];
|
|
myChartNofAircraft.data.datasets[2].data = stat_data["aclist_active_mlat"];
|
|
myChartNofAircraft.data.datasets[3].data = stat_data["aclist_active_flarm"];
|
|
myChartNofFrames.update();
|
|
|
|
if( PRODUCT_NAME==="MLAT_SERVER" ) {
|
|
myChartNofMlat.data.labels = labels;
|
|
myChartNofMlat.data.datasets[0].data = stat_data["mlat_nof_keypairs"];
|
|
myChartNofMlat.data.datasets[1].data = stat_data["mlat_nof_estimations"];
|
|
myChartNofMlat.data.datasets[2].data = stat_data["mlat_nof_solutions"];
|
|
myChartNofMlat.update();
|
|
}
|
|
});
|
|
}
|
|
|
|
|
|
$(document).ready(function() {
|
|
|
|
getJSON( rcd_globals.fcgipath+"param.json?param=productname", function(params) {
|
|
PRODUCT_NAME = params.productname;
|
|
if( PRODUCT_NAME==='MLAT_SERVER' ) {
|
|
document.getElementById("ChartNofMlat").style.display = "";
|
|
document.title = "Network Performance";
|
|
} else {
|
|
document.title = "Receiver Performance";
|
|
}
|
|
document.getElementById("page_title").innerHTML = document.title;
|
|
});
|
|
|
|
var options = {
|
|
showLines: true,
|
|
animation: false,
|
|
scales: {
|
|
yAxes: [{
|
|
ticks: {
|
|
min: 0
|
|
}
|
|
}]
|
|
},
|
|
legend: {
|
|
labels: {
|
|
//fontColor: 'rgb(255, 99, 132)',
|
|
filter: function(item, chart) {
|
|
// Logic to remove a particular legend item goes here
|
|
return item.text!=null;
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
var data1 = {
|
|
labels: [],
|
|
datasets : []
|
|
};
|
|
|
|
init_graphs(
|
|
[{label:"Frames per second", color: COL_BLUE},
|
|
{label:"Frames per second (avg)", color: COL_RED }],
|
|
data1
|
|
);
|
|
|
|
var chartNofFrames = document.getElementById('ChartNofFrames');
|
|
myChartNofFrames = new Chart.Line(chartNofFrames,{
|
|
data:data1,
|
|
options:options
|
|
});
|
|
|
|
var data2 = {
|
|
labels: [],
|
|
datasets : []
|
|
};
|
|
|
|
init_graphs(
|
|
[{label: "Aircraft currently active", color: COL_BLACK},
|
|
{label: "ADS-B locations", color: COL_ADSB },
|
|
{label: "MLAT locations", color: COL_MLAT },
|
|
{label: "FLARM locations", color: COL_FLARM}
|
|
],
|
|
data2
|
|
);
|
|
|
|
var chartNofAircraft = document.getElementById('ChartNofAircraft');
|
|
myChartNofAircraft = new Chart.Line(chartNofAircraft,{
|
|
data:data2,
|
|
options:options
|
|
});
|
|
|
|
var data3 = {
|
|
labels: [],
|
|
datasets : []
|
|
};
|
|
|
|
init_graphs(
|
|
[{label: "Keypairs", color: COL_BLACK},
|
|
{label: "Position Estimations", color: COL_ADSB },
|
|
{label: "Position Solutions", color: COL_MLAT }
|
|
],
|
|
data3
|
|
);
|
|
|
|
var chartNofMlat = document.getElementById('ChartNofMlat');
|
|
myChartNofMlat = new Chart.Line(chartNofMlat,{
|
|
data:data3,
|
|
options:options
|
|
});
|
|
|
|
function loop() {
|
|
if( rcd_globals.initialized ) {
|
|
updateTable();
|
|
}
|
|
var delay = Math.max(1000, refresh_time*1000);
|
|
setTimeout( loop, delay );
|
|
}
|
|
|
|
loop();
|
|
|
|
});
|