visualizer: use multiple plots for history

This commit is contained in:
Simon Ruderich 2024-05-11 17:11:52 +02:00
parent a2e23fceff
commit 7024964cae
3 changed files with 93 additions and 35 deletions

View file

@ -8,18 +8,21 @@
#main { #main {
display: flex; display: flex;
height: 90vh;
} }
#constellation { #constellation {
height: 85vh;
width: 30vw; width: 30vw;
} }
#data { #data {
padding-top: 1em; width: 20vw;
padding-right: 1em;
text-wrap: nowrap;
} }
#history { #history {
max-height: 80vh; width: 50vw;
flex-grow: 1;
display: flex;
flex-direction: column;
}
#history-hz, #history-db, #history-misc {
height: 30vh;
} }

View file

@ -32,7 +32,15 @@
</div> </div>
<div id="data"></div> <div id="data"></div>
<div id="history"> <div id="history">
<canvas id="history-canvas"></canvas> <div id="history-hz">
<canvas id="history-hz-canvas"></canvas>
</div>
<div id="history-db">
<canvas id="history-db-canvas"></canvas>
</div>
<div id="history-misc">
<canvas id="history-misc-canvas"></canvas>
</div>
</div> </div>
</div> </div>

View file

@ -104,8 +104,8 @@ const chartConstellation = new Chart(
}, },
}); });
const chartHistory = new Chart( const chartHistoryHz = new Chart(
document.querySelector('#history-canvas'), { document.querySelector('#history-hz-canvas'), {
type: 'line', type: 'line',
data: { data: {
labels: [], labels: [],
@ -113,6 +113,31 @@ const chartHistory = new Chart(
}, },
options: { options: {
animation: false, animation: false,
maintainAspectRatio: false, // use full width
},
});
const chartHistoryDb = new Chart(
document.querySelector('#history-db-canvas'), {
type: 'line',
data: {
labels: [],
datasets: [],
},
options: {
animation: false,
maintainAspectRatio: false, // use full width
},
});
const chartHistoryMisc = new Chart(
document.querySelector('#history-misc-canvas'), {
type: 'line',
data: {
labels: [],
datasets: [],
},
options: {
animation: false,
maintainAspectRatio: false, // use full width
}, },
}); });
@ -151,7 +176,7 @@ function updateData(packet) {
} }
function addHistory(packet) { function addHistory(packet) {
const keys = []; const keysHz = [], keysDb = [], keysMisc = [];
for (const x in packet) { for (const x in packet) {
if (x === '_id' if (x === '_id'
|| x === 'preamble_symbols' || x === 'preamble_symbols'
@ -159,25 +184,41 @@ function addHistory(packet) {
|| x === 'data_symbols') { || x === 'data_symbols') {
continue; continue;
} }
keys.push(x); if (x.endsWith('Hz')) {
keysHz.push(x);
} else if (x.endsWith('dB')) {
keysDb.push(x);
} else {
keysMisc.push(x);
} }
keys.sort(); }
keysHz.sort();
keysDb.sort();
keysMisc.sort();
if (chartHistory.data.datasets.length === 0) { if (chartHistoryHz.data.datasets.length === 0) {
const run = (chart, keys) => {
for (const x of keys) { for (const x of keys) {
chartHistory.data.datasets.push({ chart.data.datasets.push({
label: x, label: x,
data: [], data: [],
}) })
} }
};
run(chartHistoryHz, keysHz);
run(chartHistoryDb, keysDb);
run(chartHistoryMisc, keysMisc);
} }
// Limit to historyMaxPackets items // Limit to historyMaxPackets items
const shift = chartHistoryHz.data.labels.length == historyMaxPackets; const shift = chartHistoryHz.data.labels.length == historyMaxPackets;
if (shift) { if (shift) {
chartHistory.data.labels.shift(); chartHistoryHz.data.labels.shift();
chartHistoryDb.data.labels.shift();
chartHistoryMisc.data.labels.shift();
} }
const run = (chart, keys) => {
let i = 0; let i = 0;
for (const x of keys) { for (const x of keys) {
let data = packet[x]; let data = packet[x];
@ -185,13 +226,17 @@ function addHistory(packet) {
data = undefined; data = undefined;
} }
if (shift) { if (shift) {
chartHistory.data.datasets[i].data.shift(); chart.data.datasets[i].data.shift();
} }
chartHistory.data.datasets[i].data.push(data); chart.data.datasets[i].data.push(data);
i++; i++;
} }
chartHistory.data.labels.push(packet._id); chart.data.labels.push(packet._id);
// .update() is deferred, see redrawPlots() // .update() is deferred, see redrawPlots()
};
run(chartHistoryHz, keysHz);
run(chartHistoryDb, keysDb);
run(chartHistoryMisc, keysMisc);
} }
let redrawPending = false; let redrawPending = false;
@ -206,7 +251,9 @@ function redrawPlots() {
redrawPending = true; redrawPending = true;
window.setTimeout(() => { window.setTimeout(() => {
chartHistory.update(); chartHistoryHz.update();
chartHistoryDb.update();
chartHistoryMisc.update();
chartConstellation.update(); chartConstellation.update();
redrawPending = false; redrawPending = false;
}, 10 /* ms */); }, 10 /* ms */);