Visualizer #3
|
@ -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);
|
||||
|
|
Loading…
Reference in a new issue