Visualizer #3
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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>
|
||||||
|
|
||||||
|
|
|
@ -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 */);
|
||||||
|
|
Loading…
Reference in a new issue