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

visualizer: assign id to identify packets

Browse source 
The id is displayed in the graph, the packet information and in the
trace (on mouse over).
This commit is contained in:
Simon Ruderich 2024-05-11 15:17:38 +02:00
parent c5024a0b30
commit bc2f5ca76c
1 changed files with 18 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -6,7 +6,6 @@ const traceMaxEvents = 200;
const state = { const state = {
start: new Date(),
paused: false, paused: false,
global: { global: {
preambles_found: 0, preambles_found: 0,
@ -48,7 +47,11 @@ function addTrace(type, data) {
span.style.color = data.color; span.style.color = data.color;
span.style.cursor = 'default'; span.style.cursor = 'default';
if (type !== tracePlaceholder) { if (type !== tracePlaceholder) {
span.title = getTime(); let title = getTime();
if (data.packet !== undefined) {
title = `${data.packet._id} (${title})`;
}
span.title = title;
} }
if (type === tracePacket) { if (type === tracePacket) {
@ -122,7 +125,8 @@ function updateChart(packet) {
function updateData(packet) { function updateData(packet) {
const keys = []; const keys = [];
for (const x in packet) { for (const x in packet) {
if (x === 'preamble_symbols' if (x === '_id'
|| x === 'preamble_symbols'
|| x === 'header_symbols' || x === 'header_symbols'
|| x === 'data_symbols') { || x === 'data_symbols') {
continue continue
@ -132,6 +136,11 @@ function updateData(packet) {
keys.sort(); keys.sort();
const divs = []; const divs = [];
{
const div = document.createElement('div');
div.textContent = `Packet: ${packet._id}`;
divs.push(div);
}
for (const x of keys) { for (const x of keys) {
const div = document.createElement('div'); const div = document.createElement('div');
div.textContent = `${x}: ${packet[x]}`; div.textContent = `${x}: ${packet[x]}`;
@ -143,7 +152,8 @@ function updateData(packet) {
function addHistory(packet) { function addHistory(packet) {
const keys = []; const keys = [];
for (const x in packet) { for (const x in packet) {
if (x === 'preamble_symbols' if (x === '_id'
|| x === 'preamble_symbols'
|| x === 'header_symbols' || x === 'header_symbols'
|| x === 'data_symbols') { || x === 'data_symbols') {
continue; continue;
@ -170,7 +180,7 @@ function addHistory(packet) {
chartHistory.data.datasets[i].data.push(data); chartHistory.data.datasets[i].data.push(data);
i++; i++;
} }
chartHistory.data.labels.push((new Date() - state.start)/1000); chartHistory.data.labels.push(packet._id);
// .update() is deferred, see redrawPlots() // .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'); const ws = new WebSocket(location.origin.replace(/^http/, 'ws') + '/events');
ws.onmessage = (evt) => { ws.onmessage = (evt) => {
if (state.paused) { if (state.paused) {
@ -242,6 +254,7 @@ ws.onmessage = (evt) => {
} }
} else if ('data_symbols' in msg) { } else if ('data_symbols' in msg) {
msg._id = packet_id++;
updateChart(msg); updateChart(msg);
updateData(msg); updateData(msg);
addHistory(msg); addHistory(msg);