lili/data-over-audio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix disappearing segment indexes on graph

Browse Source
This commit is contained in:
Lewis Moten
2024-05-05 21:51:50 -04:00
parent 374093d861
commit fbf91d0529
1 changed files with 42 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
index.js
View File

@@ -792,57 +792,57 @@ function avgLabel(array) {
if(values.length === 0) return 'N/A'; if(values.length === 0) return 'N/A';
return (values.reduce((t, v) => t + v, 0) / values.length).toFixed(2) return (values.reduce((t, v) => t + v, 0) / values.length).toFixed(2)
} }
function drawSegmentIndexes(ctx) { function drawSegmentIndexes(ctx, width, height) {
const now = performance.now();
// Do/did we have a stream?
if(!LAST_STREAM_STARTED) return; if(!LAST_STREAM_STARTED) return;
const { width, height } = receivedGraph;
const fot = frequencyOverTime.find(fot => fot.streamStarted === LAST_STREAM_STARTED);
const newest = frequencyOverTime[0].time;
const channelCount = frequencyOverTime[0].pairs.length;
let {
streamStarted,
streamEnded = newest
} = fot ?? {
streamStarted: LAST_STREAM_STARTED,
streamEnded: newest
};
if(streamEnded === -1) streamEnded = newest;
let segmentIndex = 0;
// determine max segments to prevent infinite loop later // will any of the stream appear?
let maxBits = ((1 << PACKET_SIZE_BITS) * 8) + PACKET_SIZE_BITS; const packetDuration = getPacketDurationMilliseconds();
if(HAMMING_ERROR_CORRECTION) maxBits *= 7/4; const lastStreamEnded = LAST_STREAM_STARTED + packetDuration;
let maxSegments = Math.ceil(maxBits / channelCount); const graphDuration = SEGMENT_DURATION * MAX_BITS_DISPLAYED_ON_GRAPH;
const graphEarliest = now - graphDuration;
// ended too long ago?
if(lastStreamEnded < graphEarliest) return;
// loop through each index const segmentWidth = width / MAX_BITS_DISPLAYED_ON_GRAPH;
while(true) {
let segmentStart = streamStarted + (segmentIndex * SEGMENT_DURATION);
// if(segmentStart > streamEnded) break; // stream ended
let segmentEnd = segmentStart + SEGMENT_DURATION; const latestSegmentEnded = Math.min(now, lastStreamEnded);
// find where the index is on the graph
const rightX = getTimeX(segmentStart, newest); for(let time = latestSegmentEnded; time > graphEarliest; time -= SEGMENT_DURATION) {
const leftX = getTimeX(segmentEnd, newest); // too far back?
const segmentWidth = rightX - leftX; if(time < LAST_STREAM_STARTED) break;
if(leftX > width) continue; // too far in past
if(rightX < 0) break; // in the future // which segment are we looking at?
const segmentIndex = Math.floor(((time - LAST_STREAM_STARTED) / SEGMENT_DURATION));
// when did the segment begin/end
const segmentStart = LAST_STREAM_STARTED + (segmentIndex * SEGMENT_DURATION);
const segmentEnd = segmentStart + SEGMENT_DURATION;
// where is the segments left x coordinate?
const leftX = ((now - segmentEnd) / graphDuration) * width;
// Draw segment index // Draw segment index
ctx.fontSize = '24px'; ctx.fontSize = '24px';
let text = segmentIndex.toString(); if(segmentStart < lastStreamEnded) {
let size = ctx.measureText(text); let text = segmentIndex.toString();
let textX = leftX + (segmentWidth / 2) - (size.width / 2); let size = ctx.measureText(text);
ctx.strokeStyle = 'black'; let textX = leftX + (segmentWidth / 2) - (size.width / 2);
ctx.lineWidth = 2; ctx.strokeStyle = 'black';
ctx.textBaseline = 'bottom'; ctx.lineWidth = 2;
let textY = segmentIndex % 2 === 0 ? height : height - 12; ctx.textBaseline = 'bottom';
ctx.strokeText(text, textX, textY); let textY = segmentIndex % 2 === 0 ? height : height - 12;
ctx.fillStyle = segmentStart > streamEnded ? 'grey' : 'white'; ctx.strokeText(text, textX, textY);
ctx.fillText(text, textX, textY); ctx.fillStyle = 'white';
ctx.fillText(text, textX, textY);
}
// draw sample count // draw sample count
const sampleCount = frequencyOverTime const sampleCount = frequencyOverTime
.filter(fot => .filter(fot =>
fot.streamStarted === streamStarted && fot.streamStarted === LAST_STREAM_STARTED &&
fot.segmentIndex === segmentIndex fot.segmentIndex === segmentIndex
) )
.length; .length;
@@ -859,10 +859,6 @@ function drawSegmentIndexes(ctx) {
else if(sampleCount < 3) ctx.fillStyle = 'yellow'; else if(sampleCount < 3) ctx.fillStyle = 'yellow';
else ctx.fillStyle = 'white'; else ctx.fillStyle = 'white';
ctx.fillText(text, textX, textY); ctx.fillText(text, textX, textY);
segmentIndex++;
// break out of potential infinite loop
if(segmentIndex >= maxSegments) break;
} }
} }
function drawBitDurationLines(ctx, color) { function drawBitDurationLines(ctx, color) {
@@ -1035,7 +1031,7 @@ function drawChannelData() {
const {height, width} = canvas; const {height, width} = canvas;
// Loop through visible segments // Loop through visible segments
const latestSegmentEnded = Math.min(now, lastStreamEnded); const latestSegmentEnded = Math.min(now, lastStreamEnded);//yyy
for(let time = latestSegmentEnded; time > graphEarliest; time -= SEGMENT_DURATION) { for(let time = latestSegmentEnded; time > graphEarliest; time -= SEGMENT_DURATION) {
// too far back? // too far back?
if(time < LAST_STREAM_STARTED) break; if(time < LAST_STREAM_STARTED) break;
@@ -1232,7 +1228,7 @@ function drawFrequencyData() {
drawFrequencyLineGraph(ctx, channel, high, `hsl(${hue}, 100%, 50%)`, 2, false); drawFrequencyLineGraph(ctx, channel, high, `hsl(${hue}, 100%, 50%)`, 2, false);
drawFrequencyLineGraph(ctx, channel, low, `hsl(${hue}, 100%, 25%)`, 1, true); drawFrequencyLineGraph(ctx, channel, low, `hsl(${hue}, 100%, 25%)`, 1, true);
}); });
drawSegmentIndexes(ctx); drawSegmentIndexes(ctx, width, height);
requestAnimationFrame(drawFrequencyData); requestAnimationFrame(drawFrequencyData);
} }