amateurfunk/hamnet70
2
0
Fork 0
Code Issues Pull requests 1 Actions Packages Projects Releases Wiki Activity

visualizer: draw marker in history plot after selecting a packet

Browse source
This commit is contained in:
Simon Ruderich 2024-05-11 18:04:39 +02:00
parent 7024964cae
commit 21220deed7
1 changed files with 54 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

54
impl/utils/visualizer/static/index.js
View file

@ -22,6 +22,10 @@ function updatePause(pause) {
button.value = 'Continue';
} else {
button.value = 'Pause';
// Hide line markers
chartHistoryHz.options.plugins.lineMarker.index = undefined;
chartHistoryDb.options.plugins.lineMarker.index = undefined;
chartHistoryMisc.options.plugins.lineMarker.index = undefined;
}
state.paused = pause;
}
@ -60,8 +64,16 @@ function addTrace(type, data) {
updatePause(true);
updateChart(data.packet);
updateData(data.packet);
// Mark current packet in history plot
const index = data.packet._id - chartHistoryHz.data.labels[0];
chartHistoryHz.options.plugins.lineMarker.index = index;
chartHistoryDb.options.plugins.lineMarker.index = index;
chartHistoryMisc.options.plugins.lineMarker.index = index;
// Redraw
chartConstellation.update();
chartHistoryHz.update();
chartHistoryDb.update();
chartHistoryMisc.update();
};
span.style.cursor = 'pointer';
}
@ -74,6 +86,30 @@ function addTrace(type, data) {
}
const lineMarkerPlugin = {
id: 'lineMarker',
beforeDatasetsDraw: (chart, args, plugins) => {
// Nothing drawn yet
if (chart.scales.x === undefined) {
return;
}
// Not yet configured to show a line
if (plugins.index === undefined) {
return;
}
const x = chart.scales.x.getPixelForValue(plugins.index);
const ctx = chart.ctx;
ctx.save();
ctx.beginPath();
ctx.strokeStyle = 'black';
ctx.lineWidth = 3;
ctx.moveTo(x, chart.chartArea.top);
ctx.lineTo(x, chart.chartArea.bottom);
ctx.stroke();
},
};
const chartConstellation = new Chart(
document.querySelector('#constellation-canvas'), {
type: 'scatter',
@ -114,7 +150,13 @@ const chartHistoryHz = new Chart(
options: {
animation: false,
maintainAspectRatio: false, // use full width
plugins: {
lineMarker: {},
},
},
plugins: [
lineMarkerPlugin,
],
});
const chartHistoryDb = new Chart(
document.querySelector('#history-db-canvas'), {
@ -126,7 +168,13 @@ const chartHistoryDb = new Chart(
options: {
animation: false,
maintainAspectRatio: false, // use full width
plugins: {
lineMarker: {},
},
},
plugins: [
lineMarkerPlugin,
],
});
const chartHistoryMisc = new Chart(
document.querySelector('#history-misc-canvas'), {
@ -138,7 +186,13 @@ const chartHistoryMisc = new Chart(
options: {
animation: false,
maintainAspectRatio: false, // use full width
plugins: {
lineMarker: {},
},
},
plugins: [
lineMarkerPlugin,
],
});
function updateChart(packet) {