Feature/#117 distribute button

Apps/frontend/src/components/DistributeOffsetButton.svelte

@@ -1,19 +1,26 @@
 <script>
-  import { createEventDispatcher } from "svelte";
-  import { NUM_CHANNELS } from "../const.js";
-  export let activeChannelCount;
+  import { NUM_CHANNELS } from "../const";
+  import { channelActivated, offsetAdjustment } from "../stores";
 
-  const dispatch = createEventDispatcher();
-  const handleClick = async () => {
-    dispatch("distributeOffset", { offset: calculateOffset() });
-  };
   function calculateOffset() {
     // offset is calculated based on the number of channels between -1 and 1
-    return 2 / (activeChannelCount + 1);
+    return 2 / ($channelActivated.filter(Boolean).length + 1);
   }
 </script>
 
-<button id="distribute-button" on:click={handleClick}>Distribute waves</button>
+<button
+  id="distribute-button"
+  on:click={() => {
+    let baseOffset = calculateOffset();
+    let offsetY = 1 - baseOffset;
+    for (let index = 0; index < NUM_CHANNELS; index++) {
+      if ($channelActivated[index]) {
+        $offsetAdjustment[index] = offsetY;
+        offsetY -= baseOffset;
+      }
+    }
+  }}>Distribute waves</button
+>
 
 <style>
   #distribute-button {

Apps/frontend/src/components/ThicknessSwitch.svelte

@@ -3,25 +3,13 @@
   import { LINE_COLORS_RGBA } from "../const.js";
   import { thicknessAdjustment } from "../stores.js";
 
-  export let onClick = (isThick) => {
-    console.error(
-      `Missing implementation of ThicknessSwitch.onClick(${isThick})!`
-    );
-    return;
-  };
-
   export let channel;
-  let isThick = false;
 </script>
 
 <div class="switch-wrapper" data-cy="thicknessSwitch-{channel}">
   <Switch
     hideLabel
-    bind:toggled={isThick}
-    on:click={() => {
-      $thicknessAdjustment[channel] = isThick;
-      onClick(isThick);
-    }}
+    bind:toggled={$thicknessAdjustment[channel]}
     toggledColor={LINE_COLORS_RGBA[channel]}
   />
 </div>

Apps/frontend/src/components/WaveControls.svelte

@@ -4,7 +4,12 @@
   import OnOffButton from "./OnOffButton.svelte";
   import ResetButton from "../views/ResetButton.svelte";
   import Slider from "./Slider.svelte";
-  import { timeSweep } from "../stores.js";
+  import {
+    amplitudeAdjustment,
+    offsetAdjustment,
+    thicknessAdjustment,
+    timeSweep,
+  } from "../stores.js";
   import TimeSweepSlider from "./TimeSweepSlider.svelte";
   import ThicknessSwitch from "./ThicknessSwitch.svelte";
   import DistributeOffsetButton from "./DistributeOffsetButton.svelte";
@@ -87,18 +92,7 @@
       <br />
       <small>Channels</small>
       {#each { length: NUM_CHANNELS } as _, index}
-        <StartStopButton
-          channel_id={index}
-          on:startStop={async (event) => {
-            let hasStarted = event.detail.buttonValue;
-            waveElement.startStopChannelI(index, hasStarted);
-            indicatorElement.startStopChannelI(index, hasStarted);
-            activeChannels[index] = hasStarted;
-            console.log(hasStarted);
-            countActiveChannels();
-            console.log(activeChannelCounter);
-          }}
-        />
+        <StartStopButton channel_id={index} />
       {/each}
     </div>
     <div class="sliders">
@@ -107,12 +101,7 @@
       <br />
       <small>Channels</small>
       {#each { length: NUM_CHANNELS } as _, index}
-        <ThicknessSwitch
-          channel={index}
-          onClick={(isThick) => {
-            waveElement.updateChannelThickness(index, !isThick);
-          }}
-        />
+        <ThicknessSwitch channel={index} />
       {/each}
     </div>
     <div class="sliders">
@@ -123,11 +112,11 @@
       {#each { length: NUM_CHANNELS } as _, index}
         <Slider
           id={`offsetSlider-${index}`}
+          bind:value={$offsetAdjustment[index]}
           onInput={(offsetY) => {
             waveElement.updateChannelOffsetY(index, offsetY);
             indicatorElement.updateChannelOffsetY(index, offsetY);
           }}
-          value={0}
           min={-1.0}
           max={1.0}
           step={0.01}
@@ -157,10 +146,7 @@
         <Slider
           id={`amplitudeSlider-${index}`}
           className="amplitude-slider"
-          onInput={(value) => {
-            waveElement.updateChannelScaling(index, value);
-            indicatorElement.updateChannelScaling(index, value);
-          }}
+          bind:value={$amplitudeAdjustment[index]}
           max={MAX_AMPLITUDE}
           min={MIN_AMPLITUDE}
           calcDisplayValue={(value) => (1 / value).toFixed(2)}

Apps/frontend/src/components/Waves.svelte

@@ -19,7 +19,13 @@
     LINE_THICKNESS_SMALL,
     LINE_THICKNESS_BIG,
   } from "../const";
-  import { timeSweep } from "../stores";
+  import {
+    amplitudeAdjustment,
+    channelActivated,
+    offsetAdjustment,
+    thicknessAdjustment,
+    timeSweep,
+  } from "../stores";
 
   export let scalesY;
 
@@ -28,10 +34,12 @@
   /**
    * @type {Number[][]}
    */
-  let channelSamples;
+  let channelSamples = Array.from(Array(NUM_CHANNELS), () =>
+    new Array(CANVAS_WIDTH).fill(undefined)
+  );
   let lines = [];
   let heads = [];
-  let startStopLine = [];
+  //let startStopLine = [];
   let xArr;
   let xLast;
 
@@ -79,7 +87,7 @@
       channelIndex < endIndex;
       channelIndex++
     ) {
-      if (!startStopLine[channelIndex]) {
+      if (!$channelActivated[channelIndex]) {
         continue;
       }
       let xCurr = xArr[channelIndex];
@@ -93,8 +101,10 @@
       xLast[channelIndex] = xNew;
 
       // time sweep (https://github.com/amosproj/amos2022ws03-software-oscilloscope/wiki/Development-Documentation#time-sweep-calculation)
-      let sweep = $timeSweep[channelIndex] / 5.0 - 1.0;// in [-1,1]
-      let delta = DEFAULT_STEP_SIZE * (1.0 + sweep * (sweep >= 0.0 ? MAX_SWEEP - 1.0 : 1.0 - MIN_SWEEP));
+      let sweep = $timeSweep[channelIndex] / 5.0 - 1.0; // in [-1,1]
+      let delta =
+        DEFAULT_STEP_SIZE *
+        (1.0 + sweep * (sweep >= 0.0 ? MAX_SWEEP - 1.0 : 1.0 - MIN_SWEEP));
 
       xArr[channelIndex] = xCurr + delta;
       while (xArr[channelIndex] >= CANVAS_WIDTH) {
@@ -115,34 +125,44 @@
     }
   };
 
-  // Sets the scaling of a individual wave according to the voltage intervals
-  const setScaling = (index, scale) => {
-    lines[index].scaleY = computeScaling(scale);
-  };
-
-  // computes the Scaling of a wave according to the voltage intervals
-  const computeScaling = (scale) => {
-    return (1 / (NUM_INTERVALS_HORIZONTAL / 2)) * scale;
-  };
+  // Subscribe to the offsetAdjustment store
+  offsetAdjustment.subscribe((newOffsets) => {
+    for (let i = 0; i < NUM_CHANNELS; i++) {
+      let line = lines[i];
+      if (line !== undefined) line.offsetY = newOffsets[i];
+      let head = heads[i];
+      if (head !== undefined) head.offsetY = newOffsets[i];
+    }
+  });
 
-  export const updateChannelOffsetY = (channelIndex, offsetY) => {
-    lines[channelIndex].offsetY = offsetY;
-    heads[channelIndex].offsetY = offsetY;
-  };
+  // Subscribe to the channelActivation store
+  channelActivated.subscribe((isActive) => {
+    for (let i = 0; i < NUM_CHANNELS; i++) {
+      if (lines[i] !== undefined) lines[i].visible = isActive[i];
+    }
+  });
 
-  // Update the amplification of wave
-  export const updateChannelScaling = (channelIndex, scaling) => {
-    setScaling(channelIndex, scaling);
-  };
+  thicknessAdjustment.subscribe((isThick) => {
+    for (let i = 0; i < NUM_CHANNELS; i++) {
+      if (lines[i] !== undefined) {
+        const thickness = isThick[i]
+          ? LINE_THICKNESS_BIG
+          : LINE_THICKNESS_SMALL;
+        lines[i].setThickness(thickness);
+      }
+    }
+  });
 
-  export const updateChannelThickness = (channelIndex, isThick) => {
-    const thickness = isThick ? LINE_THICKNESS_BIG : LINE_THICKNESS_SMALL;
-    lines[channelIndex].setThickness(thickness);
-  };
+  amplitudeAdjustment.subscribe((amplitudes) => {
+    for (let i = 0; i < NUM_CHANNELS; i++) {
+      if (lines[i] !== undefined)
+        lines[i].scaleY = computeScaling(amplitudes[i]);
+    }
+  });
 
-  export const startStopChannelI = (channelIndex, hasStarted) => {
-    startStopLine[channelIndex] = hasStarted;
-    lines[channelIndex].visible = hasStarted;
+  // computes the Scaling of a wave according to the voltage intervals
+  const computeScaling = (amplitude) => {
+    return (1 / (NUM_INTERVALS_HORIZONTAL / 2)) * amplitude;
   };
 
   const update = () => {
@@ -183,7 +203,6 @@
       line.scaleY = computeScaling(scalesY[i]);
       webGLPlot.addThickLine(line);
       lines.push(line);
-      startStopLine[i] = false;
 
       let head = new WebglSquare(color);
       heads.push(head);

Apps/frontend/src/stores.js

@@ -3,11 +3,37 @@ import { NUM_CHANNELS } from "./const";
 
 export const osciData = writable([]);
 
+/** @type {import("svelte/store").Writable<Array<Number>>}
+ * store for the timeSweep of each channel
+ */
 export const timeSweep = writable(new Array(NUM_CHANNELS + 1).fill(5));
 
-// store for the amplification factors of each channel
-export const amplitudeAdjustment = writable(new Array(NUM_CHANNELS).fill(1));
+/**
+ * @type {import("svelte/store").Writable<Array<boolean>>}
+ * @description store for the activation of each channel
+ * @example true => channel active, false => channel disabled
+ */
+export const channelActivated = writable(new Array(NUM_CHANNELS).fill(false));
 
+/**
+ * @type {import("svelte/store").Writable<Array<boolean>>}
+ * @description store for thickness setting of each channel
+ * @example true => thick, false => thin
+ */
 export const thicknessAdjustment = writable(
   new Array(NUM_CHANNELS).fill(false)
 );
+
+/**
+ * @type {import("svelte/store").Writable<Array<number>>}
+ * @description store for the offset of each channel
+ * @example
+ */
+export const offsetAdjustment = writable(new Array(NUM_CHANNELS).fill(0));
+
+/**
+ * @type {import("svelte/store").Writable<Array<number>>}
+ * @description store for the amplification factor of each channel
+ * @example
+ */
+export const amplitudeAdjustment = writable(new Array(NUM_CHANNELS).fill(1));

Apps/frontend/src/views/Indicators.svelte

@@ -11,6 +11,7 @@
     NUM_CHANNELS,
     NUM_INTERVALS_HORIZONTAL,
   } from "../const";
+  import { amplitudeAdjustment } from "../stores";
   import { roundVoltage } from "../helper";
 
   let canvasElement;
@@ -19,7 +20,6 @@
   let min = Array(NUM_CHANNELS).fill(0.0);
   let max = Array(NUM_CHANNELS).fill(0.0);
   let offsets = Array(NUM_CHANNELS).fill(0.0);
-  let scalings = Array(NUM_CHANNELS).fill(1.0);
   let startStopLine = Array(NUM_CHANNELS).fill(true);
 
   export let scaleY;
@@ -40,22 +40,22 @@
       const transformedCurrent = transformSampleToYCoord(
         current[channel],
         offsets[channel],
-        scalings[channel]
+        $amplitudeAdjustment[channel]
       );
       const transformedMin = transformSampleToYCoord(
         min[channel],
         offsets[channel],
-        scalings[channel]
+        $amplitudeAdjustment[channel]
       );
       const transformedMax = transformSampleToYCoord(
         max[channel],
         offsets[channel],
-        scalings[channel]
+        $amplitudeAdjustment[channel]
       );
       const transformedZero = transformSampleToYCoord(
         0,
         offsets[channel],
-        scalings[channel]
+        $amplitudeAdjustment[channel]
       );
       //drawIndicator(channel, transformedCurrent, LINE_COLORS_RGBA[channel]);
       drawMinMaxZeroLines(
@@ -80,17 +80,6 @@
     update(current);
   };
 
-  /**
-   * Update the scaling/amplification of a channel by a factor.
-   *
-   * @param {number} channelIndex
-   * @param {number} scaling
-   */
-  export const updateChannelScaling = (channelIndex, scaling) => {
-    scalings[channelIndex] = scaling;
-    update(current);
-  };
-
   /**
    * Start or stop indicator updates of a channel.
    *

Apps/frontend/src/views/StartStopButton.svelte

@@ -1,28 +1,18 @@
 <script>
-  import { createEventDispatcher } from "svelte";
   import Switch from "svelte-toggle";
   import { LINE_COLORS_RGBA } from "../const.js";
+  import { channelActivated } from "../stores.js";
   export let channel_id;
 
-  const dispatch = createEventDispatcher();
-
-  let hasStarted = false;
   let color = LINE_COLORS_RGBA[channel_id];
   let channelLabel = `CH ${channel_id}`;
-
-  const handleStartStop = async () => {
-    console.log("erstes hasStarted " + hasStarted);
-    //hasStarted = !hasStarted;
-    dispatch("startStop", { buttonValue: !hasStarted });
-  };
 </script>
 
 <div class="switch-wrapper">
   <small style="margin-right: 0.5vw;">{channelLabel}</small>
   <Switch
     hideLabel
-    bind:toggled={hasStarted}
-    on:click={handleStartStop}
+    bind:toggled={$channelActivated[channel_id]}
     toggledColor={color}
   />
 </div>