first working draft of implementation for #80 signal head

Signed-off-by: nicolaskolbenschlag <[email protected]>

Apps/frontend/src/components/Waves.svelte

@@ -1,6 +1,6 @@
 <script>
   import { beforeUpdate, onMount } from "svelte";
-  import { ColorRGBA, WebglLine, WebglPlot } from "webgl-plot";
+  import { ColorRGBA, WebglLine, WebglPlot, WebglSquare } from "webgl-plot";
   import {
     CANVAS_HEIGHT,
     CANVAS_WIDTH,
@@ -18,6 +18,7 @@
   let webGLPlot;
   let channel_samples;
   let lines = [];
+  let heads = [];
   let startStopLine = [];
   let xArr;
   let xLast;
@@ -46,7 +47,6 @@
     xLast = new Array(NUM_CHANNELS).fill(0);
     initChannelSamples();
     webGLPlot.clear();
-    console.log("clear");
   };
 
   export const updateBuffer = (samples) => {
@@ -88,6 +88,7 @@
 
   export const updateChannelOffsetY = (channelIndex, offsetY) => {
     lines[channelIndex].offsetY = offsetY;
+    heads[channelIndex].offsetY = offsetY;
   };
 
   // Update the amplification of wave
@@ -107,6 +108,12 @@
       for (let x = 0; x < CANVAS_WIDTH; ++x) {
         lines[i].setY(x, channel_samples[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);
     }
   };
 
@@ -134,6 +141,10 @@
       webGLPlot.addLine(line);
       lines.push(line);
       startStopLine[i] = true;
+
+      let head = new WebglSquare(color);
+      heads.push(head);
+      webGLPlot.addSurface(head);
     }
   };
 

Apps/frontend/src/views/Oscilloscope.svelte

@@ -95,7 +95,7 @@
       <div class="slider-wrapper">
         <div class="sliders">
           Start/Stop
-          <br>
+          <br />
           {#each { length: NUM_CHANNELS } as _, index}
             <StartStopButton
               channel_id={index}
@@ -137,6 +137,7 @@
     </div>
   </div>
 </div>
+
 <style>
   .wrapper {
     display: flex;

Apps/frontend/src/views/StartStopButton.svelte

@@ -1,34 +1,29 @@
 <script>
-	import { createEventDispatcher } from 'svelte'
-	export let channel_id;
-
-
-	const dispatch = createEventDispatcher()
-
-	let play = "Start ▶";
-	let stop = "Stop ■";
-	let symbol = channel_id + " " + stop;
-	let hasStarted = true;
-
-	const handleStartStop = async () => {
-		hasStarted = !hasStarted;
-		hasStarted ? symbol = stop : symbol = play;
-		symbol = channel_id + " " + symbol;
-		dispatch('startStop', {buttonValue: hasStarted})
-	}
-
-
+  import { createEventDispatcher } from "svelte";
+  export let channel_id;
+
+  const dispatch = createEventDispatcher();
+
+  let play = "Start ▶";
+  let stop = "Stop ■";
+  let symbol = channel_id + " " + stop;
+  let hasStarted = true;
+
+  const handleStartStop = async () => {
+    hasStarted = !hasStarted;
+    hasStarted ? (symbol = stop) : (symbol = play);
+    symbol = channel_id + " " + symbol;
+    dispatch("startStop", { buttonValue: hasStarted });
+  };
 </script>
 
 <button class="button-style" on:click={handleStartStop}>
-	{symbol}
+  {symbol}
 </button>
 
-
 <style>
-	.button-style {
-		border-style: solid;
-    	border-color: grey;
+  .button-style {
+    border-style: solid;
+    border-color: grey;
   }
-
-</style>
+</style>