Add timing stash and display

This commit is contained in:
30hours 2023-12-17 03:47:40 +00:00
parent 399943e175
commit 1f9fe96a1e
7 changed files with 336 additions and 4 deletions

View file

@ -2,9 +2,10 @@ const express = require('express');
const dgram = require('dgram'); const dgram = require('dgram');
const net = require("net"); const net = require("net");
var data_map = require('./maxhold.js'); var data_map = require('./stash/maxhold.js');
var data_detection = require('./detection.js'); var data_detection = require('./stash/detection.js');
var data_iqdata = require('./iqdata.js'); var data_iqdata = require('./stash/iqdata.js');
var data_timing = require('./stash/timing.js');
// constants // constants
const PORT = 3000; const PORT = 3000;
@ -56,6 +57,9 @@ app.get('/stash/detection', (req, res) => {
app.get('/stash/iqdata', (req, res) => { app.get('/stash/iqdata', (req, res) => {
res.send(data_iqdata.get_data_iqdata()); res.send(data_iqdata.get_data_iqdata());
}); });
app.get('/stash/timing', (req, res) => {
res.send(data_timing.get_data_timing());
});
// read state of capture // read state of capture
app.get('/capture', (req, res) => { app.get('/capture', (req, res) => {

View file

@ -1,6 +1,6 @@
const http = require('http'); const http = require('http');
var nCpi = 10; var nCpi = 20;
var map = []; var map = [];
var maxhold = ''; var maxhold = '';
var timestamp = ''; var timestamp = '';

61
api/stash/timing.js Normal file
View file

@ -0,0 +1,61 @@
const http = require('http');
var nCpi = 20;
var ts = '';
var cpi = [];
var output = {};
const options_timestamp = {
host: '127.0.0.1',
path: '/api/timestamp',
port: 3000
};
const options_iqdata = {
host: '127.0.0.1',
path: '/api/timing',
port: 3000
};
function update_data(callback) {
http.get(options_timestamp, function (res) {
res.setEncoding('utf8');
res.on('data', function (body) {
if (ts != body) {
ts = body;
http.get(options_iqdata, function (res) {
let body_map = '';
res.setEncoding('utf8');
res.on('data', (chunk) => {
body_map += chunk;
});
res.on('end', () => {
try {
cpi = JSON.parse(body_map);
keys = Object.keys(cpi);
keys = keys.filter(item => item !== "uptime");
keys = keys.filter(item => item !== "nCpi");
for (i = 0; i < keys.length; i++) {
if (!(keys[i] in output)) {
output[keys[i]] = [];
}
output[keys[i]].push(cpi[keys[i]]);
if (output[keys[i]].length > nCpi) {
output[keys[i]].shift();
}
}
} catch (e) {
console.error(e.message);
}
});
});
}
});
});
}
setInterval(update_data, 100);
function get_data() {
return output;
}
module.exports.get_data_timing = get_data;

View file

@ -0,0 +1,104 @@
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
<title>blah2</title>
<!-- load lib js -->
<script src="../../lib/bootstrap-5.2.3.min.js"></script>
<script src="../../lib/plotly-2.20.0.min.js"></script>
<script src="../../lib/jquery-3.6.4.min.js"></script>
<!-- load lib css -->
<link rel="stylesheet" href="../../lib/bootstrap-5.2.3.min.css">
<style>
h1 {
font-family: 'Helvetica', sans-serif !important;
font-weight: bold;
font-size: 3.5rem !important;
}
.menu {
font-family: 'Helvetica', sans-serif !important;
font-size: 1.5rem;
font-weight: bold;
}
.title {
font-family: 'Helvetica', sans-serif !important;
font-size: 1.5rem;
font-weight: bold;
text-decoration: underline;
}
.label {
font-family: 'Helvetica', sans-serif !important;
font-size: 1rem;
}
@media (min-width: 768px) {
h1 {
font-family: 'Helvetica', sans-serif !important;
font-weight: bold;
font-size: 5rem !important;
}
.menu {
font-family: 'Helvetica', sans-serif !important;
font-size: 2rem;
}
.title {
font-family: 'Helvetica', sans-serif !important;
font-size: 2.5rem;
font-weight: bold;
text-decoration: underline;
}
.label {
font-family: 'Helvetica', sans-serif !important;
font-size: 2rem;
}
}
.navbar-nav {
flex-wrap: wrap;
}
div.plotly-notifier {
visibility: hidden;
}
</style>
</head>
<body style="background-color:#f78c58;">
<div style="height: 100vh; width: 95vw" class="container-fluid">
<div style="height: 100vh; width: 95vw" class="row d-flex">
<div class="justify-content-center" id="data"></div>
</div>
</body>
<script>
xTitle = "Timestamp";
yTitle = "Time (ms)";
</script>
<script src="../../js/plot_timing.js"></script>
</html>

163
html/js/plot_timing.js Normal file
View file

@ -0,0 +1,163 @@
var timestamp = -1;
var nRows = 3;
var host = window.location.hostname;
var isLocalHost = (host === "localhost" || host === "127.0.0.1" || host === "192.168.0.112");
// setup API
var urlTimestamp = '';
if (isLocalHost) {
urlTimestamp = '//' + host + ':3000/api/timestamp?timestamp=' + Date.now();
} else {
urlTimestamp = '//' + host + '/api/timestamp?timestamp=' + Date.now();
}
var urlDetection = '';
if (isLocalHost) {
urlDetection = '//' + host + ':3000/stash/detection?timestamp=' + Date.now();
} else {
urlDetection = '//' + host + '/stash/timing?timestamp=' + Date.now();
}
// setup plotly
var layout = {
autosize: false,
margin: {
l: 50,
r: 50,
b: 50,
t: 10,
pad: 0
},
hoverlabel: {
namelength: 0
},
width: document.getElementById('data').offsetWidth,
height: document.getElementById('data').offsetHeight,
plot_bgcolor: "rgba(0,0,0,0)",
paper_bgcolor: "rgba(0,0,0,0)",
annotations: [],
displayModeBar: false,
xaxis: {
title: {
text: xTitle,
font: {
size: 24
}
},
showgrid: false,
ticks: '',
side: 'bottom'
},
yaxis: {
title: {
text: yTitle,
font: {
size: 24
}
},
showgrid: false,
ticks: '',
ticksuffix: ' ',
autosize: false,
categoryorder: "total descending"
},
legend: {
orientation: "h",
bgcolor: "#f78c58",
bordercolor: "#000000",
borderwidth: 2
}
};
var config = {
displayModeBar: false,
scrollZoom: true
}
// setup plotly data
var data = [
{
z: [[0, 0, 0], [0, 0, 0], [0, 0, 0]],
colorscale: 'Jet',
type: 'heatmap'
}
];
Plotly.newPlot('data', data, layout, config);
// callback function
var intervalId = window.setInterval(function () {
// check if timestamp is updated
var timestampData = $.get(urlTimestamp, function () { })
.done(function (data) {
if (timestamp != data) {
timestamp = data;
// get new data
var apiData = $.getJSON(urlDetection, function () { })
.done(function (data) {
// case draw new plot
if (data.nRows != nRows) {
nRows = data.nRows;
// timestamp posix to js
for (i = 0; i < data["timestamp"].length; i++)
{
data["timestamp"][i] = new Date(data["timestamp"][i]);
}
data_trace = [];
keys = Object.keys(data);
keys = keys.filter(item => item !== "timestamp");
for (i = 0; i < keys.length; i++) {
var trace = {
x: data["timestamp"],
y: data[keys[i]],
mode: 'lines+markers',
type: 'scatter',
name: keys[i],
line: {
width: 5
},
marker: {
size: 12
},
};
data_trace.push(trace);
}
Plotly.newPlot('data', data_trace, layout, config);
}
// case update plot
else {
// timestamp posix to js
for (i = 0; i < data["timestamp"].length; i++)
{
data["timestamp"][i] = new Date(data["timestamp"][i]);
}
var xVec = [];
var yVec = [];
for (i = 0; i < keys.length; i++) {
xVec.push(data["timestamp"]);
yVec.push(data[keys[i]]);
}
var trace_update = {
x: xVec,
y: yVec
};
Plotly.update('data', trace_update);
}
})
.fail(function () {
})
.always(function () {
});
}
})
.fail(function () {
})
.always(function () {
});
}, 100);