From f495592428361ce229fe12a2dc189f7c85d30e8e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marcel=20Sch=C3=B6ckel?= Date: Sat, 3 Dec 2022 17:59:00 +0100 Subject: [PATCH 1/4] Implemented feature #62-cursor MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Marcel Schöckel --- Apps/frontend/src/components/Waves.svelte | 29 ++++++++++++++++++----- Apps/frontend/src/const.js | 1 + 2 files changed, 24 insertions(+), 6 deletions(-) diff --git a/Apps/frontend/src/components/Waves.svelte b/Apps/frontend/src/components/Waves.svelte index 7f49c267..13009107 100644 --- a/Apps/frontend/src/components/Waves.svelte +++ b/Apps/frontend/src/components/Waves.svelte @@ -9,6 +9,7 @@ MIN_SWEEP, MAX_SWEEP, LINE_COLORS, + WAVE_CURSOR_SIZE, } from "../const"; import { timeSweep } from "../stores"; @@ -16,7 +17,14 @@ let canvasElement; let webGLPlot; - let channel_samples; + /** + * @type {Number[][]} + */ + let channelSamples; + /** + * @type {Number[][]} + */ + let channelSamplesInjectCursor; let lines = []; let startStopLine = []; let xArr; @@ -36,7 +44,10 @@ // ----- business logic ----- const initChannelSamples = () => { - channel_samples = Array.from(Array(NUM_CHANNELS), () => + channelSamples = Array.from(Array(NUM_CHANNELS), () => + new Array(CANVAS_WIDTH).fill(0.0) + ); + channelSamplesInjectCursor = Array.from(Array(NUM_CHANNELS), () => new Array(CANVAS_WIDTH).fill(0.0) ); }; @@ -52,7 +63,7 @@ export const updateBuffer = (samples) => { for ( let channelIndex = 0; - channelIndex < channel_samples.length; + channelIndex < channelSamples.length; channelIndex++ ) { if (!startStopLine[channelIndex]) { @@ -61,8 +72,14 @@ let xCurr = xArr[channelIndex]; let xNew = Math.round(xCurr); for (let x = xLast[channelIndex] + 1; x < xNew + 1; x++) { - channel_samples[channelIndex][x] = samples[channelIndex]; + channelSamples[channelIndex][x] = samples[channelIndex]; } + channelSamplesInjectCursor[channelIndex] = channelSamples[channelIndex]; + // inject cursor (undefined values are not rendered) before the newest data sample + for (let x = xNew + 1; x < xNew + WAVE_CURSOR_SIZE; x++) { + channelSamplesInjectCursor[channelIndex][x] = undefined; + } + xLast[channelIndex] = xNew; let sweep = $timeSweep[channelIndex] / 5.0 - 1.0; @@ -103,9 +120,9 @@ }; const update = () => { - for (let i = 0; i < channel_samples.length; i++) { + for (let i = 0; i < channelSamplesInjectCursor.length; i++) { for (let x = 0; x < CANVAS_WIDTH; ++x) { - lines[i].setY(x, channel_samples[i][x]); + lines[i].setY(x, channelSamplesInjectCursor[i][x]); } } }; diff --git a/Apps/frontend/src/const.js b/Apps/frontend/src/const.js index 3bbbc86b..6ef4aeb6 100644 --- a/Apps/frontend/src/const.js +++ b/Apps/frontend/src/const.js @@ -34,3 +34,4 @@ export const MIN_SWEEP = 0.5; // <= 1 export const MAX_SWEEP = 2.0; // >= 1 export const MIN_AMPLITUDE = 0.0; export const MAX_AMPLITUDE = NUM_INTERVALS_HORIZONTAL / 2; +export const WAVE_CURSOR_SIZE = 50; From 4593d5c76474c795c3ac6fdb3be79844298f0e5c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marcel=20Sch=C3=B6ckel?= Date: Sat, 3 Dec 2022 18:05:44 +0100 Subject: [PATCH 2/4] Added functionality to 'wrap around' at the end of the canvas MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Marcel Schöckel --- Apps/frontend/src/components/Waves.svelte | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/Apps/frontend/src/components/Waves.svelte b/Apps/frontend/src/components/Waves.svelte index 13009107..bd0b6b6a 100644 --- a/Apps/frontend/src/components/Waves.svelte +++ b/Apps/frontend/src/components/Waves.svelte @@ -77,7 +77,9 @@ channelSamplesInjectCursor[channelIndex] = channelSamples[channelIndex]; // inject cursor (undefined values are not rendered) before the newest data sample for (let x = xNew + 1; x < xNew + WAVE_CURSOR_SIZE; x++) { - channelSamplesInjectCursor[channelIndex][x] = undefined; + channelSamplesInjectCursor[channelIndex][ + x % channelSamplesInjectCursor[channelIndex].length + ] = undefined; } xLast[channelIndex] = xNew; From 7b53270996cb9d108b32dbba2cc23fea3603089a Mon Sep 17 00:00:00 2001 From: Philipp Kramer Date: Sun, 4 Dec 2022 15:29:45 +0100 Subject: [PATCH 3/4] Improved cursor Signed-off-by: Philipp Kramer --- Apps/frontend/src/components/Waves.svelte | 29 +++++------------------ 1 file changed, 6 insertions(+), 23 deletions(-) diff --git a/Apps/frontend/src/components/Waves.svelte b/Apps/frontend/src/components/Waves.svelte index bd0b6b6a..4338d591 100644 --- a/Apps/frontend/src/components/Waves.svelte +++ b/Apps/frontend/src/components/Waves.svelte @@ -21,10 +21,6 @@ * @type {Number[][]} */ let channelSamples; - /** - * @type {Number[][]} - */ - let channelSamplesInjectCursor; let lines = []; let startStopLine = []; let xArr; @@ -45,16 +41,13 @@ const initChannelSamples = () => { channelSamples = Array.from(Array(NUM_CHANNELS), () => - new Array(CANVAS_WIDTH).fill(0.0) - ); - channelSamplesInjectCursor = Array.from(Array(NUM_CHANNELS), () => - new Array(CANVAS_WIDTH).fill(0.0) + new Array(CANVAS_WIDTH).fill(undefined) ); }; export const resetPlot = () => { xArr = new Array(NUM_CHANNELS).fill(0.0); - xLast = new Array(NUM_CHANNELS).fill(0); + xLast = new Array(NUM_CHANNELS).fill(undefined); initChannelSamples(); webGLPlot.clear(); console.log("clear"); @@ -73,15 +66,8 @@ let xNew = Math.round(xCurr); for (let x = xLast[channelIndex] + 1; x < xNew + 1; x++) { channelSamples[channelIndex][x] = samples[channelIndex]; + channelSamples[channelIndex][(x+WAVE_CURSOR_SIZE) % canvasElement.width] = undefined; } - channelSamplesInjectCursor[channelIndex] = channelSamples[channelIndex]; - // inject cursor (undefined values are not rendered) before the newest data sample - for (let x = xNew + 1; x < xNew + WAVE_CURSOR_SIZE; x++) { - channelSamplesInjectCursor[channelIndex][ - x % channelSamplesInjectCursor[channelIndex].length - ] = undefined; - } - xLast[channelIndex] = xNew; let sweep = $timeSweep[channelIndex] / 5.0 - 1.0; @@ -116,15 +102,12 @@ export const startStopChannelI = (channelIndex, hasStarted) => { startStopLine[channelIndex] = hasStarted; - /*if(hasStarted) console.log("start Channel " + channelIndex + ", hasStarted:" + startStopLine[channelIndex]); - else console.log("stop Channel " + channelIndex + ", hasStarted:" + startStopLine[channelIndex]); - */ }; const update = () => { - for (let i = 0; i < channelSamplesInjectCursor.length; i++) { + for (let i = 0; i < channelSamples.length; i++) { for (let x = 0; x < CANVAS_WIDTH; ++x) { - lines[i].setY(x, channelSamplesInjectCursor[i][x]); + lines[i].setY(x, channelSamples[i][x]); } } }; @@ -152,7 +135,7 @@ line.scaleY = computeScaling(scalesY[i]); webGLPlot.addLine(line); lines.push(line); - startStopLine[i] = true; + startStopLine[i] = true; // can be moved out of here } }; From 8cec827b45fe0f8f4f9d7a35ff916c0062541e6e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jens=20W=C3=A4chtler?= Date: Wed, 7 Dec 2022 09:54:59 +0100 Subject: [PATCH 4/4] Resolve merge conflict MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Philipp Kramer Co-authored-by: Leander Tolksdorf Co-authored-by: Jan Degen Signed-off-by: Jens Wächtler --- Apps/frontend/src/components/Waves.svelte | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/Apps/frontend/src/components/Waves.svelte b/Apps/frontend/src/components/Waves.svelte index fb1ae4cf..c3135cd9 100644 --- a/Apps/frontend/src/components/Waves.svelte +++ b/Apps/frontend/src/components/Waves.svelte @@ -1,6 +1,11 @@