From 1f9fe96a1ea92720a28bfb078e442fa312acca6b Mon Sep 17 00:00:00 2001 From: 30hours Date: Sun, 17 Dec 2023 03:47:40 +0000 Subject: [PATCH] Add timing stash and display --- api/server.js | 10 +- api/{ => stash}/detection.js | 0 api/{ => stash}/iqdata.js | 0 api/{ => stash}/maxhold.js | 2 +- api/stash/timing.js | 61 ++++++++++++ html/display/timing/index.html | 104 +++++++++++++++++++++ html/js/plot_timing.js | 163 +++++++++++++++++++++++++++++++++ 7 files changed, 336 insertions(+), 4 deletions(-) rename api/{ => stash}/detection.js (100%) rename api/{ => stash}/iqdata.js (100%) rename api/{ => stash}/maxhold.js (96%) create mode 100644 api/stash/timing.js create mode 100644 html/display/timing/index.html create mode 100644 html/js/plot_timing.js diff --git a/api/server.js b/api/server.js index 0405c9f..5cba978 100644 --- a/api/server.js +++ b/api/server.js @@ -2,9 +2,10 @@ const express = require('express'); const dgram = require('dgram'); const net = require("net"); -var data_map = require('./maxhold.js'); -var data_detection = require('./detection.js'); -var data_iqdata = require('./iqdata.js'); +var data_map = require('./stash/maxhold.js'); +var data_detection = require('./stash/detection.js'); +var data_iqdata = require('./stash/iqdata.js'); +var data_timing = require('./stash/timing.js'); // constants const PORT = 3000; @@ -56,6 +57,9 @@ app.get('/stash/detection', (req, res) => { app.get('/stash/iqdata', (req, res) => { res.send(data_iqdata.get_data_iqdata()); }); +app.get('/stash/timing', (req, res) => { + res.send(data_timing.get_data_timing()); +}); // read state of capture app.get('/capture', (req, res) => { diff --git a/api/detection.js b/api/stash/detection.js similarity index 100% rename from api/detection.js rename to api/stash/detection.js diff --git a/api/iqdata.js b/api/stash/iqdata.js similarity index 100% rename from api/iqdata.js rename to api/stash/iqdata.js diff --git a/api/maxhold.js b/api/stash/maxhold.js similarity index 96% rename from api/maxhold.js rename to api/stash/maxhold.js index 5ec303e..89c2984 100644 --- a/api/maxhold.js +++ b/api/stash/maxhold.js @@ -1,6 +1,6 @@ const http = require('http'); -var nCpi = 10; +var nCpi = 20; var map = []; var maxhold = ''; var timestamp = ''; diff --git a/api/stash/timing.js b/api/stash/timing.js new file mode 100644 index 0000000..16af199 --- /dev/null +++ b/api/stash/timing.js @@ -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; diff --git a/html/display/timing/index.html b/html/display/timing/index.html new file mode 100644 index 0000000..1f84911 --- /dev/null +++ b/html/display/timing/index.html @@ -0,0 +1,104 @@ + + + + + + + + + + + + + + blah2 + + + + + + + + + + + + + + + +
+ +
+ +
+ +
+ + + + + + + + diff --git a/html/js/plot_timing.js b/html/js/plot_timing.js new file mode 100644 index 0000000..a77462b --- /dev/null +++ b/html/js/plot_timing.js @@ -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);