Tidy up of API and add detection front end

This commit is contained in:
30hours 2023-12-05 13:14:00 +00:00
parent f6b1970a60
commit e9897e16fa
10 changed files with 339 additions and 196 deletions

78
api/detection.js Normal file
View file

@ -0,0 +1,78 @@
const http = require('http');
var nCpi = 100;
var map = [];
var timestamp = [];
var delay = [];
var doppler = [];
var detection = '';
var ts = '';
var output = [];
const options_timestamp = {
host: '127.0.0.1',
path: '/api/timestamp',
port: 3000
};
const options_detection = {
host: '127.0.0.1',
path: '/api/detection',
port: 3000
};
function update_data() {
// check if timestamp is updated
http.get(options_timestamp, function(res) {
res.setEncoding('utf8');
res.on('data', function (body) {
if (ts != body)
{
ts = body;
http.get(options_detection, function(res) {
let body_map = '';
res.setEncoding('utf8');
res.on('data', (chunk) => {
body_map += chunk;
});
res.on('end', () => {
try {
detection = JSON.parse(body_map);
map.push(detection);
if (map.length > nCpi) {
map.shift();
}
delay = [];
doppler = [];
timestamp = [];
for (var i = 0; i < map.length; i++)
{
for (var j = 0; j < map[i].delay.length; j++)
{
delay.push(map[i].delay[j]);
doppler.push(map[i].delay[j]);
timestamp.push(map[i].timestamp);
}
}
output = {
timestamp: timestamp,
delay: delay,
doppler: doppler
};
} catch (e) {
console.error(e.message);
}
});
});
}
});
});
};
setInterval(update_data, 100);
function get_data() {
return output;
};
module.exports.get_data_detection = get_data;

View file

@ -6,12 +6,12 @@ var maxhold = '';
var timestamp = ''; var timestamp = '';
const options_timestamp = { const options_timestamp = {
host: '127.0.0.1', host: '127.0.0.1',
path: '/timestamp', path: '/api/timestamp',
port: 3000 port: 3000
}; };
const options_map = { const options_map = {
host: '127.0.0.1', host: '127.0.0.1',
path: '/map', path: '/api/map',
port: 3000 port: 3000
}; };
@ -74,4 +74,4 @@ function get_data() {
return maxhold; return maxhold;
}; };
module.exports.get_data = get_data; module.exports.get_data_map = get_data;

View file

@ -2,8 +2,8 @@ const express = require('express');
const dgram = require('dgram'); const dgram = require('dgram');
const net = require("net"); const net = require("net");
var maxhold = require('./maxhold.js'); var data_map = require('./maxhold.js');
module.exports = Object.assign({}, maxhold) var data_detection = require('./detection.js');
// constants // constants
const PORT = 3000; const PORT = 3000;
@ -28,20 +28,23 @@ app.use(function(req, res, next) {
app.get('/', (req, res) => { app.get('/', (req, res) => {
res.send('Hello World'); res.send('Hello World');
}); });
app.get('/map', (req, res) => { app.get('/api/map', (req, res) => {
res.send(map); res.send(map);
}); });
app.get('/detection', (req, res) => { app.get('/api/detection', (req, res) => {
res.send(detection); res.send(detection);
}); });
app.get('/timestamp', (req, res) => { app.get('/api/timestamp', (req, res) => {
res.send(timestamp); res.send(timestamp);
}); });
app.get('/timing', (req, res) => { app.get('/api/timing', (req, res) => {
res.send(timing); res.send(timing);
}); });
app.get('/maxhold', (req, res) => { app.get('/stash/map', (req, res) => {
res.send(maxhold.get_data()); res.send(data_map.get_data_map());
});
app.get('/stash/detection', (req, res) => {
res.send(data_detection.get_data_detection());
}); });
// read state of capture // read state of capture
app.get('/capture', (req, res) => { app.get('/capture', (req, res) => {

View file

@ -0,0 +1,99 @@
<!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 src="../../js/plot_detection.js"></script>
</html>

View file

@ -14,12 +14,12 @@
<title>blah2</title> <title>blah2</title>
<!-- load lib js --> <!-- load lib js -->
<script src="../lib/bootstrap-5.2.3.min.js"></script> <script src="../../lib/bootstrap-5.2.3.min.js"></script>
<script src="../lib/plotly-2.20.0.min.js"></script> <script src="../../lib/plotly-2.20.0.min.js"></script>
<script src="../lib/jquery-3.6.4.min.js"></script> <script src="../../lib/jquery-3.6.4.min.js"></script>
<!-- load lib css --> <!-- load lib css -->
<link rel="stylesheet" href="../lib/bootstrap-5.2.3.min.css"> <link rel="stylesheet" href="../../lib/bootstrap-5.2.3.min.css">
<style> <style>
h1 { h1 {
@ -88,7 +88,7 @@
<div style="height: 100vh; width: 95vw" class="row d-flex"> <div style="height: 100vh; width: 95vw" class="row d-flex">
<div class="justify-content-center" id="ddmap"></div> <div class="justify-content-center" id="data"></div>
</div> </div>
@ -99,11 +99,11 @@
var isLocalHost = (host === "localhost" || host === "127.0.0.1" || host === "192.168.0.112"); var isLocalHost = (host === "localhost" || host === "127.0.0.1" || host === "192.168.0.112");
var urlMap = '' var urlMap = ''
if (isLocalHost) { if (isLocalHost) {
urlMap = '//' + host + ':3000/maxhold?timestamp=' + Date.now(); urlMap = '//' + host + ':3000/stash/map?timestamp=' + Date.now();
} else { } else {
urlMap = '//' + host + '/api/maxhold?timestamp=' + Date.now(); urlMap = '//' + host + '/stash/map?timestamp=' + Date.now();
} }
</script> </script>
<script src="../js/plot_map.js"></script> <script src="../../js/plot_map.js"></script>
</html> </html>

View file

@ -88,7 +88,7 @@
<div style="height: 100vh; width: 95vw" class="row d-flex"> <div style="height: 100vh; width: 95vw" class="row d-flex">
<div class="justify-content-center" id="ddmap"></div> <div class="justify-content-center" id="data"></div>
</div> </div>
@ -99,7 +99,7 @@
var isLocalHost = (host === "localhost" || host === "127.0.0.1" || host === "192.168.0.112"); var isLocalHost = (host === "localhost" || host === "127.0.0.1" || host === "192.168.0.112");
var urlMap = '' var urlMap = ''
if (isLocalHost) { if (isLocalHost) {
urlMap = '//' + host + ':3000/map?timestamp=' + Date.now(); urlMap = '//' + host + ':3000/api/map?timestamp=' + Date.now();
} else { } else {
urlMap = '//' + host + '/api/map?timestamp=' + Date.now(); urlMap = '//' + host + '/api/map?timestamp=' + Date.now();
} }

130
html/js/plot_detection.js Normal file
View file

@ -0,0 +1,130 @@
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");
var range_x = [];
var range_y = [];
// 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/detection?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: 'Timestamp',
font: {
size: 24
}
},
showgrid: false,
ticks: '',
side: 'bottom'
},
yaxis: {
title: {
text: 'Bistatic Range (km)',
font: {
size: 24
}
},
showgrid: false,
ticks: '',
ticksuffix: ' ',
autosize: false,
categoryorder: "total descending"
}
};
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;
var trace1 = {
x: data.timestamp,
y: data.delay,
mode: 'markers',
type: 'scatter'
};
var data_trace = [trace1];
Plotly.newPlot('data', data_trace, layout, config);
}
// case update plot
else {
var trace_update = {
x: [data.timestamp],
y: [data.delay]
};
Plotly.update('data', trace_update);
}
})
.fail(function () {
})
.always(function () {
});
}
})
.fail(function () {
})
.always(function () {
});
}, 100);

View file

@ -8,13 +8,13 @@ var range_y = [];
// setup API // setup API
var urlTimestamp = ''; var urlTimestamp = '';
if (isLocalHost) { if (isLocalHost) {
urlTimestamp = '//' + host + ':3000/timestamp?timestamp=' + Date.now(); urlTimestamp = '//' + host + ':3000/api/timestamp?timestamp=' + Date.now();
} else { } else {
urlTimestamp = '//' + host + '/api/timestamp?timestamp=' + Date.now(); urlTimestamp = '//' + host + '/api/timestamp?timestamp=' + Date.now();
} }
var urlDetection = ''; var urlDetection = '';
if (isLocalHost) { if (isLocalHost) {
urlDetection = '//' + host + ':3000/detection?timestamp=' + Date.now(); urlDetection = '//' + host + ':3000/api/detection?timestamp=' + Date.now();
} else { } else {
urlDetection = '//' + host + '/api/detection?timestamp=' + Date.now(); urlDetection = '//' + host + '/api/detection?timestamp=' + Date.now();
} }
@ -32,8 +32,8 @@ var layout = {
hoverlabel: { hoverlabel: {
namelength: 0 namelength: 0
}, },
width: document.getElementById('ddmap').offsetWidth, width: document.getElementById('data').offsetWidth,
height: document.getElementById('ddmap').offsetHeight, height: document.getElementById('data').offsetHeight,
plot_bgcolor: "rgba(0,0,0,0)", plot_bgcolor: "rgba(0,0,0,0)",
paper_bgcolor: "rgba(0,0,0,0)", paper_bgcolor: "rgba(0,0,0,0)",
annotations: [], annotations: [],
@ -76,7 +76,7 @@ var data = [
]; ];
var detection = []; var detection = [];
Plotly.newPlot('ddmap', data, layout, config); Plotly.newPlot('data', data, layout, config);
// callback function // callback function
var intervalId = window.setInterval(function () { var intervalId = window.setInterval(function () {
@ -107,7 +107,7 @@ var intervalId = window.setInterval(function () {
'xaxis.range': [data.delay[0], data.delay.slice(-1)[0]], 'xaxis.range': [data.delay[0], data.delay.slice(-1)[0]],
'yaxis.range': [data.doppler[0], data.doppler.slice(-1)[0]] 'yaxis.range': [data.doppler[0], data.doppler.slice(-1)[0]]
}; };
Plotly.relayout('ddmap', layout_update); Plotly.relayout('data', layout_update);
var trace1 = { var trace1 = {
z: data.data, z: data.data,
@ -131,7 +131,7 @@ var intervalId = window.setInterval(function () {
}; };
var data_trace = [trace1, trace2]; var data_trace = [trace1, trace2];
Plotly.newPlot('ddmap', data_trace, layout, config); Plotly.newPlot('data', data_trace, layout, config);
} }
// case update plot // case update plot
else { else {
@ -141,7 +141,7 @@ var intervalId = window.setInterval(function () {
z: [data.data, []], z: [data.data, []],
zmax: [Math.max(13, data.maxPower), []] zmax: [Math.max(13, data.maxPower), []]
}; };
Plotly.update('ddmap', trace_update); Plotly.update('data', trace_update);
} }
}) })

View file

@ -1,166 +0,0 @@
var nRows = 3;
var nCols = 3;
var host = window.location.hostname;
var timestamp = '';
var isLocalHost = (host === "localhost" || host === "127.0.0.1" || host === "192.168.0.112");
var urlMap = ''
if (isLocalHost) {
urlMap = '//' + host + ':3000/maxhold?timestamp=' + Date.now();
} else {
urlMap = '//' + host + '/api/maxhold?timestamp=' + Date.now();
}
var urlTimestamp = '';
if (isLocalHost) {
urlTimestamp = '//' + host + ':3000/timestamp?timestamp=' + Date.now();
} else {
urlTimestamp = '//' + host + '/api/timestamp?timestamp=' + Date.now();
}
var data = [
{
z: [[0, 0, 0], [0, 0, 0], [0, 0, 0]],
colorscale: 'Jet',
type: 'heatmap'
}
];
var layout = {
autosize: false,
margin: {
l: 50,
r: 50,
b: 50,
t: 50,
pad: 0
},
width: document.getElementById('ddmap').offsetWidth,
height: document.getElementById('ddmap').offsetHeight,
plot_bgcolor: "rgba(0,0,0,0)",
paper_bgcolor: "rgba(0,0,0,0)",
annotations: [],
coloraxis: {
cmin: 0,
cmax: 1
},
displayModeBar: false,
xaxis: {
ticks: '',
side: 'bottom'
},
yaxis: {
ticks: '',
ticksuffix: ' ',
autosize: false
}
};
var config = {
displayModeBar: false,
responsive: true
}
Plotly.newPlot('ddmap', data, layout, config);
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 map data
var apiData = $.getJSON(urlMap, function () { })
.done(function (data) {
// case draw new plot
if (data.nRows != nRows || data.nCols != nCols) {
nRows = data.nRows;
nCols = data.nCols;
data = [
{
z: data.data,
x: data.delay,
y: data.doppler,
colorscale: 'Jet',
zauto: false,
zmin: 0,
zmax: Math.max(13, data.maxPower),
type: 'heatmap'
}
];
layout = {
autosize: false,
margin: {
l: 50,
r: 50,
b: 50,
t: 50,
pad: 0
},
width: document.getElementById('ddmap').offsetWidth,
height: document.getElementById('ddmap').offsetHeight,
plot_bgcolor: "rgba(0,0,0,0)",
paper_bgcolor: "rgba(0,0,0,0)",
annotations: [],
displayModeBar: false,
xaxis: {
title: {
text: 'Bistatic Range (km)',
font: {
size: 24
}
},
ticks: '',
side: 'bottom'
},
yaxis: {
title: {
text: 'Bistatic Doppler (Hz)',
font: {
size: 24
}
},
ticks: '',
ticksuffix: ' ',
autosize: false,
categoryorder: "total descending"
}
};
Plotly.newPlot('ddmap', data, layout, { displayModeBar: false });
}
else {
data_update =
{
'z': [data.data],
'zmax': Math.max(13, data.maxPower)
};
layout_update = {
};
Plotly.update('ddmap', data_update, layout_update, { displayModeBar: false });
}
})
.fail(function () {
console.log('API Fail');
})
.always(function () {
});
}
})
.fail(function () {
console.log('API Fail');
})
.always(function () {
});
}, 100);

View file

@ -108,7 +108,6 @@ uint32_t Map<T>::doppler_hz_to_bin(double dopplerHz)
return (int) i; return (int) i;
} }
} }
std::cout << "HUGE FUCKUP GRR" << std::endl;
return 0; return 0;
} }