Merge remote-tracking branch 'origin/feature/#117-distribute-button' …

…into feature/#118-preset-save-save-preset-button-and-text-box

Apps/frontend/cypress/e2e/2-control-panel/distribute-button.cy.js

@@ -0,0 +1,12 @@
+/// <reference types="cypress" />
+
+describe("everything visible on front page", () => {
+  beforeEach(() => {
+    cy.visit("http://localhost:5173/");
+  });
+
+  it("click distribute wave button", () => {
+    // We use the `cy.get()` to get the canvas element
+    cy.get("#distribute-button").click();
+  });
+});

Apps/frontend/src/components/DistributeOffsetButton.svelte

@@ -0,0 +1,23 @@
+<script>
+  import { createEventDispatcher } from "svelte";
+  import { NUM_CHANNELS } from "../const.js";
+  export let activeChannelCount;
+
+  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);
+  }
+</script>
+
+<button id="distribute-button" on:click={handleClick}>Distribute waves</button>
+
+<style>
+  #distribute-button {
+    border-style: solid;
+    border-color: grey;
+  }
+</style>

Apps/frontend/src/components/WaveControls.svelte

@@ -0,0 +1,200 @@
+<script>
+  import { MAX_AMPLITUDE, MIN_AMPLITUDE, NUM_CHANNELS } from "../const.js";
+  import StartStopButton from "../views/StartStopButton.svelte";
+  import OnOffButton from "./OnOffButton.svelte";
+  import ResetButton from "../views/ResetButton.svelte";
+  import Slider from "./Slider.svelte";
+  import { timeSweep } from "../stores.js";
+  import TimeSweepSlider from "./TimeSweepSlider.svelte";
+  import ThicknessSwitch from "./ThicknessSwitch.svelte";
+  import DistributeOffsetButton from "./DistributeOffsetButton.svelte";
+  import startStopLine from "./Waves.svelte";
+  export let waveElement;
+  export let isEnabled;
+  export let indicatorElement;
+  let btnOnOff;
+
+  let activeChannels = [];
+  let activeChannelCounter = NUM_CHANNELS;
+
+  let distributed = false;
+
+  const setActiveChannels = () => {
+    for (let i = 0; i < NUM_CHANNELS; i++) {
+      activeChannels[i] = false;
+    }
+  };
+
+  setActiveChannels();
+
+  const countActiveChannels = () => {
+    let count = 0;
+    for (let i = 0; i < NUM_CHANNELS; i++) {
+      if (activeChannels[i]) count++;
+    }
+    activeChannelCounter = count;
+  };
+
+  const distributeChannels = () => {
+    let offset = 2 / (activeChannelCounter + 1);
+    // loop over all channels and set offset
+    let offsetY = 1 - offset;
+    for (let index = 0; index < NUM_CHANNELS; index++) {
+      console.log(offsetY);
+      if (activeChannels[index]) {
+        waveElement.updateChannelOffsetY(index, offsetY);
+        indicatorElement.updateChannelOffsetY(index, offsetY);
+        document.getElementById(`offsetSlider-${index}`).value = offsetY;
+        offsetY -= offset;
+      }
+    }
+  };
+</script>
+
+<div class="controls">
+  <div class="button-wrapper">
+    <OnOffButton
+      on:switch-plot-enabled={(e) => {
+        isEnabled = e.detail.enabled;
+      }}
+      bind:this={btnOnOff}
+    />
+    <ResetButton
+      on:reset={() => {
+        // if oscilloscope is running, click stop button
+        if (isEnabled) {
+          btnOnOff.click();
+        }
+        // clear canvas and indicators
+        indicatorElement.clearCanvas();
+        waveElement.resetPlot();
+      }}
+    />
+    <DistributeOffsetButton
+      activeChannelCount={activeChannelCounter}
+      on:distributeOffset={(event) => {
+        let offset = event.detail.offset;
+        // loop over all channels and set offset
+        distributed = true;
+        distributeChannels();
+      }}
+    />
+  </div>
+  <div class="slider-wrapper">
+    <div class="sliders">
+      Start/Stop
+      <div class="placeholder" />
+      <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);
+          }}
+        />
+      {/each}
+    </div>
+    <div class="sliders">
+      Thickness
+      <div class="placeholder" />
+      <br />
+      <small>Channels</small>
+      {#each { length: NUM_CHANNELS } as _, index}
+        <ThicknessSwitch
+          channel={index}
+          onClick={(isThick) => {
+            waveElement.updateChannelThickness(index, !isThick);
+          }}
+        />
+      {/each}
+    </div>
+    <div class="sliders">
+      Offset
+      <div class="placeholder" />
+      <br />
+      <small>Channels</small>
+      {#each { length: NUM_CHANNELS } as _, index}
+        <Slider
+          id={`offsetSlider-${index}`}
+          onInput={(offsetY) => {
+            waveElement.updateChannelOffsetY(index, offsetY);
+            indicatorElement.updateChannelOffsetY(index, offsetY);
+          }}
+          value={0}
+          min={-1.0}
+          max={1.0}
+          step={0.01}
+        />
+      {/each}
+    </div>
+    <div class="sliders">
+      Time Sweep
+      <br />
+      <small>Common</small>
+      <TimeSweepSlider channel={NUM_CHANNELS + 1} isCommon={true} />
+      <small>Channels</small>
+      {#each { length: NUM_CHANNELS } as _, index}
+        <Slider
+          id={`timesweepSlider-${index}`}
+          bind:value={$timeSweep[index]}
+          onInput={() => {}}
+        />
+      {/each}
+    </div>
+    <div class="sliders">
+      Amplitude
+      <div class="placeholder" />
+      <br />
+      <small>Channels</small>
+      {#each { length: NUM_CHANNELS } as _, index}
+        <Slider
+          id={`amplitudeSlider-${index}`}
+          className="amplitude-slider"
+          onInput={(value) => {
+            waveElement.updateChannelScaling(index, value);
+            indicatorElement.updateChannelScaling(index, value);
+          }}
+          max={MAX_AMPLITUDE}
+          min={MIN_AMPLITUDE}
+          calcDisplayValue={(value) => (1 / value).toFixed(2)}
+        />
+      {/each}
+    </div>
+  </div>
+</div>
+
+<style>
+  .amplitude-slider {
+    display: grid;
+    grid-template-columns: 129px auto;
+    margin: 0 8%;
+  }
+
+  .controls {
+    grid-column: 2;
+    justify-content: center;
+  }
+  .slider-wrapper {
+    display: flex;
+  }
+
+  .sliders {
+    width: 50%;
+  }
+
+  .button-wrapper {
+    display: flex;
+    margin: 1rem;
+  }
+
+  .placeholder {
+    height: 32.4833px;
+  }
+</style>

Apps/frontend/src/components/Waves.svelte

@@ -120,6 +120,7 @@
 
   export const startStopChannelI = (channelIndex, hasStarted) => {
     startStopLine[channelIndex] = hasStarted;
+    lines[channelIndex].visible = hasStarted;
   };
 
   const update = () => {
@@ -160,7 +161,7 @@
       line.scaleY = computeScaling(scalesY[i]);
       webGLPlot.addThickLine(line);
       lines.push(line);
-      startStopLine[i] = true;
+      startStopLine[i] = false;
 
       let head = new WebglSquare(color);
       heads.push(head);

Apps/frontend/src/views/StartStopButton.svelte

@@ -0,0 +1,36 @@
+<script>
+  import { createEventDispatcher } from "svelte";
+  import Switch from "svelte-toggle";
+  import { LINE_COLORS_RGBA } from "../const.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}
+    toggledColor={color}
+  />
+</div>
+
+<style>
+  .switch-wrapper {
+    display: flex;
+    justify-content: start;
+    margin: 0.32rem;
+  }
+</style>