Visualizer #3
|
@ -8,18 +8,21 @@
|
|||
|
||||
#main {
|
||||
display: flex;
|
||||
height: 90vh;
|
||||
}
|
||||
|
||||
#constellation {
|
||||
height: 85vh;
|
||||
width: 30vw;
|
||||
}
|
||||
#data {
|
||||
padding-top: 1em;
|
||||
padding-right: 1em;
|
||||
text-wrap: nowrap;
|
||||
width: 20vw;
|
||||
}
|
||||
#history {
|
||||
max-height: 80vh;
|
||||
flex-grow: 1;
|
||||
width: 50vw;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
#history-hz, #history-db, #history-misc {
|
||||
height: 30vh;
|
||||
}
|
||||
|
|
|
@ -32,7 +32,15 @@
|
|||
</div>
|
||||
<div id="data"></div>
|
||||
<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>
|
||||
|
||||
|
|
|
@ -104,8 +104,8 @@ const chartConstellation = new Chart(
|
|||
},
|
||||
});
|
||||
|
||||
const chartHistory = new Chart(
|
||||
document.querySelector('#history-canvas'), {
|
||||
const chartHistoryHz = new Chart(
|
||||
document.querySelector('#history-hz-canvas'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [],
|
||||
|
@ -113,6 +113,31 @@ const chartHistory = new Chart(
|
|||
},
|
||||
options: {
|
||||
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) {
|
||||
const keys = [];
|
||||
const keysHz = [], keysDb = [], keysMisc = [];
|
||||
for (const x in packet) {
|
||||
if (x === '_id'
|
||||
|| x === 'preamble_symbols'
|
||||
|
@ -159,39 +184,59 @@ function addHistory(packet) {
|
|||
|| x === 'data_symbols') {
|
||||
continue;
|
||||
}
|
||||
keys.push(x);
|
||||
}
|
||||
keys.sort();
|
||||
|
||||
if (chartHistory.data.datasets.length === 0) {
|
||||
for (const x of keys) {
|
||||
chartHistory.data.datasets.push({
|
||||
label: x,
|
||||
data: [],
|
||||
})
|
||||
if (x.endsWith('Hz')) {
|
||||
keysHz.push(x);
|
||||
} else if (x.endsWith('dB')) {
|
||||
keysDb.push(x);
|
||||
} else {
|
||||
keysMisc.push(x);
|
||||
}
|
||||
}
|
||||
keysHz.sort();
|
||||
keysDb.sort();
|
||||
keysMisc.sort();
|
||||
|
||||
if (chartHistoryHz.data.datasets.length === 0) {
|
||||
const run = (chart, keys) => {
|
||||
for (const x of keys) {
|
||||
chart.data.datasets.push({
|
||||
label: x,
|
||||
data: [],
|
||||
})
|
||||
}
|
||||
};
|
||||
run(chartHistoryHz, keysHz);
|
||||
run(chartHistoryDb, keysDb);
|
||||
run(chartHistoryMisc, keysMisc);
|
||||
}
|
||||
|
||||
// Limit to historyMaxPackets items
|
||||
const shift = chartHistoryHz.data.labels.length == historyMaxPackets;
|
||||
if (shift) {
|
||||
chartHistory.data.labels.shift();
|
||||
chartHistoryHz.data.labels.shift();
|
||||
chartHistoryDb.data.labels.shift();
|
||||
chartHistoryMisc.data.labels.shift();
|
||||
}
|
||||
|
||||
let i = 0;
|
||||
for (const x of keys) {
|
||||
let data = packet[x];
|
||||
if (data == -1e38 /* "NaN" */) {
|
||||
data = undefined;
|
||||
const run = (chart, keys) => {
|
||||
let i = 0;
|
||||
for (const x of keys) {
|
||||
let data = packet[x];
|
||||
if (data == -1e38 /* "NaN" */) {
|
||||
data = undefined;
|
||||
}
|
||||
if (shift) {
|
||||
chart.data.datasets[i].data.shift();
|
||||
}
|
||||
chart.data.datasets[i].data.push(data);
|
||||
i++;
|
||||
}
|
||||
if (shift) {
|
||||
chartHistory.data.datasets[i].data.shift();
|
||||
}
|
||||
chartHistory.data.datasets[i].data.push(data);
|
||||
i++;
|
||||
}
|
||||
chartHistory.data.labels.push(packet._id);
|
||||
// .update() is deferred, see redrawPlots()
|
||||
chart.data.labels.push(packet._id);
|
||||
// .update() is deferred, see redrawPlots()
|
||||
};
|
||||
run(chartHistoryHz, keysHz);
|
||||
run(chartHistoryDb, keysDb);
|
||||
run(chartHistoryMisc, keysMisc);
|
||||
}
|
||||
|
||||
let redrawPending = false;
|
||||
|
@ -206,7 +251,9 @@ function redrawPlots() {
|
|||
|
||||
redrawPending = true;
|
||||
window.setTimeout(() => {
|
||||
chartHistory.update();
|
||||
chartHistoryHz.update();
|
||||
chartHistoryDb.update();
|
||||
chartHistoryMisc.update();
|
||||
chartConstellation.update();
|
||||
redrawPending = false;
|
||||
}, 10 /* ms */);
|
||||
|
|
Loading…
Reference in a new issue