Amateurfunk
/
hamnet70
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

visualizer: assign id to identify packets 

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 = {
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);