Merge pull request #114 from amosproj/feature/62-cursor

Implemented feature #62-cursor
amosproj · Dec 7, 2022 · eb506eb · eb506eb
2 parents 2c4b474 + 8cec827
commit eb506eb
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 14 deletions.
diff --git a/Apps/frontend/src/components/Waves.svelte b/Apps/frontend/src/components/Waves.svelte
@@ -1,6 +1,11 @@
 <script>
   import { beforeUpdate, onMount } from "svelte";
-  import { ColorRGBA, WebglPlot, WebglSquare, WebglThickLine } from "webgl-plot";
+  import {
+    ColorRGBA,
+    WebglPlot,
+    WebglSquare,
+    WebglThickLine,
+  } from "webgl-plot";
   import {
     CANVAS_HEIGHT,
     CANVAS_WIDTH,
@@ -9,6 +14,7 @@
     MIN_SWEEP,
     MAX_SWEEP,
     LINE_COLORS,
+    WAVE_CURSOR_SIZE,
     LINE_THICKNESS_SMALL,
     LINE_THICKNESS_BIG,
   } from "../const";
@@ -18,7 +24,10 @@
 
   let canvasElement;
   let webGLPlot;
-  let channel_samples;
+  /**
+   * @type {Number[][]}
+   */
+  let channelSamples;
   let lines = [];
   let heads = [];
   let startStopLine = [];
@@ -39,22 +48,22 @@
   // ----- business logic -----
 
   const initChannelSamples = () => {
-    channel_samples = Array.from(Array(NUM_CHANNELS), () =>
-      new Array(CANVAS_WIDTH).fill(0.0)
+    channelSamples = Array.from(Array(NUM_CHANNELS), () =>
+      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();
   };
 
   export const updateBuffer = (samples) => {
     for (
       let channelIndex = 0;
-      channelIndex < channel_samples.length;
+      channelIndex < channelSamples.length;
       channelIndex++
     ) {
       if (!startStopLine[channelIndex]) {
@@ -63,7 +72,10 @@
       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];
+        channelSamples[channelIndex][
+          (x + WAVE_CURSOR_SIZE) % canvasElement.width
+        ] = undefined;
       }
       xLast[channelIndex] = xNew;
 
@@ -105,22 +117,19 @@
 
   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 < channel_samples.length; i++) {
+    for (let i = 0; i < channelSamples.length; i++) {
       for (let x = 0; x < CANVAS_WIDTH; ++x) {
-        lines[i].setY(x, channel_samples[i][x]);
+        lines[i].setY(x, channelSamples[i][x]);
       }
 
       const size = 0.01;
       let x = (xArr[i] * 2) / CANVAS_WIDTH - 1;
       let scale = lines[i].scaleY * 5;
-      let y = channel_samples[i][xLast[i]-1] * 100 * scale / CANVAS_HEIGHT;
-      heads[i].setSquare(x - (size/2), y - size, x + (size/2), y + size);
+      let y = (channelSamples[i][xLast[i] - 1] * 100 * scale) / CANVAS_HEIGHT;
+      heads[i].setSquare(x - size / 2, y - size, x + size / 2, y + size);
     }
   };
 

diff --git a/Apps/frontend/src/const.js b/Apps/frontend/src/const.js
@@ -36,3 +36,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;