From a633838a7f61e688b873e5ab9ecf0f968795d7be Mon Sep 17 00:00:00 2001 From: Simon Ruderich Date: Sat, 11 May 2024 15:17:38 +0200 Subject: [PATCH] visualizer: assign id to identify packets The id is displayed in the graph, the packet information and in the trace (on mouse over). --- impl/utils/visualizer/static/index.js | 23 ++++++++++++++++++----- 1 file changed, 18 insertions(+), 5 deletions(-) diff --git a/impl/utils/visualizer/static/index.js b/impl/utils/visualizer/static/index.js index 747104b..fa76e17 100644 --- a/impl/utils/visualizer/static/index.js +++ b/impl/utils/visualizer/static/index.js @@ -6,7 +6,6 @@ const traceMaxEvents = 200; const state = { - start: new Date(), paused: false, global: { preambles_found: 0, @@ -48,7 +47,11 @@ function addTrace(type, data) { span.style.color = data.color; span.style.cursor = 'default'; if (type !== tracePlaceholder) { - span.title = getTime(); + let title = getTime(); + if (data.packet !== undefined) { + title = `${data.packet._id} (${title})`; + } + span.title = title; } if (type === tracePacket) { @@ -122,7 +125,8 @@ function updateChart(packet) { function updateData(packet) { const keys = []; for (const x in packet) { - if (x === 'preamble_symbols' + if (x === '_id' + || x === 'preamble_symbols' || x === 'header_symbols' || x === 'data_symbols') { continue @@ -132,6 +136,11 @@ function updateData(packet) { keys.sort(); const divs = []; + { + const div = document.createElement('div'); + div.textContent = `Packet: ${packet._id}`; + divs.push(div); + } for (const x of keys) { const div = document.createElement('div'); div.textContent = `${x}: ${packet[x]}`; @@ -143,7 +152,8 @@ function updateData(packet) { function addHistory(packet) { const keys = []; for (const x in packet) { - if (x === 'preamble_symbols' + if (x === '_id' + || x === 'preamble_symbols' || x === 'header_symbols' || x === 'data_symbols') { continue; @@ -170,7 +180,7 @@ function addHistory(packet) { chartHistory.data.datasets[i].data.push(data); i++; } - chartHistory.data.labels.push((new Date() - state.start)/1000); + chartHistory.data.labels.push(packet._id); // .update() is deferred, see redrawPlots() } @@ -193,6 +203,8 @@ function redrawPlots() { } +let packet_id = 0; + const ws = new WebSocket(location.origin.replace(/^http/, 'ws') + '/events'); ws.onmessage = (evt) => { if (state.paused) { @@ -242,6 +254,7 @@ ws.onmessage = (evt) => { } } else if ('data_symbols' in msg) { + msg._id = packet_id++; updateChart(msg); updateData(msg); addHistory(msg);