292 lines
9.6 KiB
JavaScript
292 lines
9.6 KiB
JavaScript
/********************************************************************
|
|
* GPS Status for Radarcape and Air!Squitter
|
|
********************************************************************
|
|
* 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
|
|
********************************************************************/
|
|
|
|
var myChartNofGnssSv;
|
|
var myChartNofFpgaClockCarryover;
|
|
var refresh_time = 1;
|
|
|
|
Array.prototype.max = function() {
|
|
return Math.max.apply(null, this);
|
|
};
|
|
|
|
Array.prototype.min = function() {
|
|
return Math.min.apply(null, this);
|
|
};
|
|
|
|
|
|
function get_time_string (unix_timestamp, nanoseconds) {
|
|
dateObj = new Date(unix_timestamp * 1000);
|
|
hours = dateObj.getUTCHours();
|
|
minutes = dateObj.getUTCMinutes();
|
|
seconds = dateObj.getUTCSeconds();
|
|
|
|
formattedTime = hours.toString().padStart(2, '0') + ':' +
|
|
minutes.toString().padStart(2, '0') + ':' +
|
|
seconds.toString().padStart(2, '0');
|
|
|
|
return formattedTime;
|
|
}
|
|
|
|
// https://google.com/maps/search/?api=1&query=47.5951518,-122.3316393
|
|
// https://google.com/maps/?q=47.5951518,-122.3316393
|
|
|
|
function updateTable() {
|
|
getJSON( "./gps.json", function(data) {
|
|
|
|
refresh_time = ( typeof data["refreshstatus"]!=='undefined' ) ? data["refreshstatus"] : refresh_time;
|
|
|
|
var table_body = document.getElementById("receiver_status").tBodies[0];
|
|
|
|
var receiver_status = data['ReceiverStatus'];
|
|
var keys = Object.keys(receiver_status);
|
|
keys.forEach( function ( key, i) {
|
|
|
|
var rows_len = table_body.rows.length; //first is row to clone
|
|
if( rows_len-1<i ) {
|
|
var row = table_body.insertRow(i);
|
|
var cell1 = row.insertCell(0);
|
|
cell1.innerHTML="<b>"+keys[i]+"</b>";
|
|
var cell2 = row.insertCell(1);
|
|
}
|
|
else
|
|
{
|
|
var cell2 = table_body.rows[i].cells[1];
|
|
}
|
|
cell2.innerHTML=receiver_status[keys[i]];
|
|
if( key=='Longitude' ) {
|
|
cell2.innerHTML += ' <a target="_blank" rel="noopener noreferrer" href="https://google.com/maps/?q=' + receiver_status['Latitude'] +',' + receiver_status['Longitude'] + '"><span class="glyphicon glyphicon-map-marker"></span></a>'
|
|
}
|
|
});
|
|
|
|
if( receiver_status['Product Name'] ) {
|
|
if( receiver_status['Product Name'].includes('SMT')) {
|
|
var restart_button = document.getElementById('restartgpsbutton');
|
|
if( restart_button ) { restart_button.style.display = ""; }
|
|
}
|
|
}
|
|
|
|
// Satellite Table ----------------------
|
|
|
|
var sat_table = document.getElementById("sat_table");
|
|
|
|
var sat_table_header = sat_table.tHead;
|
|
if ( sat_table_header==null ) {
|
|
|
|
sat_table_header = sat_table.createTHead();
|
|
var row = sat_table_header.insertRow(0);
|
|
|
|
var SatTableHeader = data["SatTable"]["Header"]
|
|
for( var i=0; i<SatTableHeader.length; i++ ) {
|
|
row.insertCell(i).outerHTML = "<th>"+SatTableHeader[i]+"</th>";
|
|
}
|
|
}
|
|
|
|
var sat_table_body = sat_table.tBodies[0];
|
|
var sat_table_values = data["SatTable"]["Values"]
|
|
|
|
while ( sat_table_body.rows.length > sat_table_values.length ) {
|
|
sat_table_body.deleteRow(-1);
|
|
}
|
|
|
|
for( var i=0; i<sat_table_values.length; i++ ) {
|
|
|
|
var rows_len = sat_table_body.rows.length;
|
|
if( rows_len-1<i ) {
|
|
rows_len++;
|
|
var row = sat_table_body.insertRow(i);
|
|
for( var j=0; j<sat_table_values[i].length; j++ ) {
|
|
cell = row.insertCell(j);
|
|
cell.style.textAlign = 'center';
|
|
}
|
|
}
|
|
|
|
for( var j=0; j<sat_table_values[i].length; j++ ) {
|
|
var cell = sat_table_body.rows[i].cells[j];
|
|
cell.innerHTML=sat_table_values[i][j];
|
|
}
|
|
}
|
|
|
|
// Graph for visible satellites ---------
|
|
|
|
{
|
|
var sat_visibility = data["SatVisibility"]
|
|
var graphs = sat_visibility.graphs;
|
|
|
|
var xAxis_labels = [];
|
|
for (var i = 0; i < graphs[0].values.length; i++) {
|
|
xAxis_labels.unshift(get_time_string(sat_visibility["time"]-i*sat_visibility["resolution"]))
|
|
}
|
|
|
|
var max = -1; // minimum value in order to draw a line at 4
|
|
myChartNofGnssSv.data.labels = xAxis_labels;
|
|
for (var i=0; i<graphs.length; i++) {
|
|
max = Math.max (max, graphs[i].values.max());
|
|
myChartNofGnssSv.data.datasets[i].data = graphs[i].values;
|
|
myChartNofGnssSv.data.datasets[i].showLine = true;
|
|
myChartNofGnssSv.data.datasets[i].label = graphs[i].title;
|
|
}
|
|
myChartNofGnssSv.options.scales.yAxes[0].ticks.max = max+1;
|
|
myChartNofGnssSv.update();
|
|
}
|
|
|
|
// Graph for FPGA clock Carryover -------
|
|
|
|
{
|
|
var fpga_carryover = data["FpgaClockCarryover"]
|
|
var graphs = fpga_carryover.graphs;
|
|
|
|
var line_min = [];
|
|
var line_max = [];
|
|
var xAxis_labels = [];
|
|
for (var i = 0; i < graphs[0].values.length; i++) {
|
|
xAxis_labels.unshift(get_time_string(sat_visibility["time"]-i*sat_visibility["resolution"]))
|
|
line_min.push(-10);
|
|
line_max.push(10);
|
|
}
|
|
|
|
var max = 10; // required to draw line at 10
|
|
myChartNofFpgaClockCarryover.data.labels = xAxis_labels;
|
|
for (var i=0; i<graphs.length; i++) {
|
|
var a_min = graphs[i].values.min();
|
|
var a_max = graphs[i].values.max();
|
|
max = Math.max (max, Math.abs(a_min), Math.abs(a_max) );
|
|
myChartNofFpgaClockCarryover.data.datasets[i].data = graphs[i].values;
|
|
myChartNofFpgaClockCarryover.data.datasets[i].showLine = true;
|
|
myChartNofFpgaClockCarryover.data.datasets[i].label = graphs[i].title;
|
|
}
|
|
myChartNofFpgaClockCarryover.data.datasets[2].data = line_min;
|
|
myChartNofFpgaClockCarryover.data.datasets[2].showLine = true;
|
|
myChartNofFpgaClockCarryover.data.datasets[3].data = line_max;
|
|
myChartNofFpgaClockCarryover.data.datasets[3].showLine = true;
|
|
|
|
max += 1;
|
|
max = Math.min(25,max);
|
|
myChartNofFpgaClockCarryover.options.scales.yAxes[0].ticks.max = max;
|
|
myChartNofFpgaClockCarryover.options.scales.yAxes[0].ticks.min = -max;
|
|
|
|
myChartNofFpgaClockCarryover.update();
|
|
}
|
|
|
|
// Error log ----------------------------
|
|
|
|
var err_log = document.getElementById("error_log");
|
|
error_log.innerHTML=data["ErrorLog"];
|
|
|
|
});
|
|
}
|
|
|
|
|
|
function init_data(props) {
|
|
|
|
var data = {
|
|
labels: [],
|
|
datasets : []
|
|
};
|
|
|
|
props.forEach(function(element)
|
|
{
|
|
var common_props = {
|
|
steppedLine: 'before',
|
|
label: null,
|
|
fill: false,
|
|
lineTension: 0,
|
|
backgroundColor: element.color,
|
|
borderColor: element.color,
|
|
borderDash: [],
|
|
borderDashOffset: 0.0,
|
|
borderCapStyle : "round",
|
|
borderWidth : 1,
|
|
pointBorderColor: element.color,
|
|
pointBackgroundColor: "#00000000",
|
|
pointBorderWidth: 1,
|
|
pointHoverRadius: 1,
|
|
pointHoverBackgroundColor: "#00000000",
|
|
pointHoverBorderColor: element.color,
|
|
pointHoverBorderWidth: 5,
|
|
pointRadius: 0,
|
|
data: []
|
|
}
|
|
var props = $.extend( {}, common_props ) // makes a copy of current common props
|
|
data.datasets.push(props)
|
|
});
|
|
|
|
return data;
|
|
}
|
|
|
|
|
|
$(document).ready(function() {
|
|
|
|
var chart1 = document.getElementById('ChartNofGnssSv');
|
|
|
|
var options = {
|
|
responsive: true,
|
|
animation: false,
|
|
scales: {
|
|
xAxes: [{
|
|
scaleLabel: { display: true, labelString: 'UTC' }
|
|
}],
|
|
yAxes: [{
|
|
ticks: { min: 0 }
|
|
}]
|
|
},
|
|
legend: {
|
|
labels: {
|
|
filter: function(item, chart) {
|
|
// Logic to remove a particular legend item goes here
|
|
return item.text!=null;
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
// Chart options
|
|
Chart.defaults.global.tooltips.enabled = false;
|
|
|
|
var data1 = init_data ( [{ color: "#000000ff" },
|
|
{ color: "#ff0000ff" },
|
|
{ color: "#4aa835ff" }
|
|
]);
|
|
|
|
myChartNofGnssSv = Chart.Line(chart1,{
|
|
data:data1,
|
|
options:options
|
|
});
|
|
|
|
|
|
var chart2 = document.getElementById('ChartNofFpgaClockCarryover');
|
|
|
|
var data2 = init_data ( [{ color: "#00ff00ff" },
|
|
{ color: "#ff00ffff" },
|
|
{ color: "#ff0000ff" },
|
|
{ color: "#ff0000ff" }
|
|
]);
|
|
|
|
myChartNofFpgaClockCarryover = Chart.Line(chart2,{
|
|
data:data2,
|
|
options:options
|
|
});
|
|
|
|
|
|
function loop() {
|
|
var delay = Math.max(1000, refresh_time*1000);
|
|
setTimeout( loop, delay );
|
|
updateTable();
|
|
}
|
|
|
|
loop();
|
|
|
|
});
|