diff --git a/impl/utils/visualizer/static/index.js b/impl/utils/visualizer/static/index.js index d26e959..747104b 100644 --- a/impl/utils/visualizer/static/index.js +++ b/impl/utils/visualizer/static/index.js @@ -56,6 +56,8 @@ function addTrace(type, data) { updatePause(true); updateChart(data.packet); updateData(data.packet); + // Redraw + chartConstellation.update(); }; span.style.cursor = 'pointer'; } @@ -114,7 +116,7 @@ function updateChart(packet) { chartConstellation.data.datasets[0].data = packet['preamble_symbols']; chartConstellation.data.datasets[1].data = packet['header_symbols']; chartConstellation.data.datasets[2].data = packet['data_symbols']; - chartConstellation.update(); + // .update() is deferred, see redrawPlots() } function updateData(packet) { @@ -169,7 +171,25 @@ function addHistory(packet) { i++; } chartHistory.data.labels.push((new Date() - state.start)/1000); - chartHistory.update(); + // .update() is deferred, see redrawPlots() +} + +let redrawPending = false; + +function redrawPlots() { + // Updating the plots is too slow for live updates for all received + // messages. Instead of falling behind, skip redraws when the messages + // arrive too quickly. + if (redrawPending) { + return; + } + + redrawPending = true; + window.setTimeout(() => { + chartHistory.update(); + chartConstellation.update(); + redrawPending = false; + }, 10 /* ms */); } @@ -225,6 +245,7 @@ ws.onmessage = (evt) => { updateChart(msg); updateData(msg); addHistory(msg); + redrawPlots(); addTrace(tracePacket, { string: 'P',