Merge pull request #113 from amosproj/feature/#79-signal-line-thickness

Feature/#79 signal line thickness

Apps/frontend/cypress/e2e/2-control-panel/thickness-switch.cy.js

@@ -0,0 +1,22 @@
+/// <reference types="cypress" />
+
+describe("thicknessSwitch", () => {
+  beforeEach(() => {
+    cy.visit("http://localhost:5173/");
+  });
+
+  it("is visible", () => {
+    Cypress._.times(10, (i) => {
+      cy.get(`[data-cy="thicknessSwitch-${i}"]`).should("be.visible");
+    });
+  });
+
+  it("toggle switch", () => {
+    cy.get(`[data-cy="thicknessSwitch-0"]`).within(() => {
+      cy.get('[role="switch"]').should("have.attr", "aria-checked", "false");
+      cy.get('[role="switch"]')
+        .click()
+        .should("have.attr", "aria-checked", "true");
+    });
+  });
+});

Apps/frontend/package.json

@@ -28,6 +28,7 @@
     "prettier": "2.8.0",
     "prettier-plugin-svelte": "^2.8.1",
     "svelte": "^3.52.0",
+    "svelte-toggle": "^3.1.0",
     "vite": "^3.2.0"
   },
   "dependencies": {

Apps/frontend/src/components/ThicknessSwitch.svelte

@@ -0,0 +1,35 @@
+<script>
+  import Switch from "svelte-toggle";
+  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);
+    }}
+    toggledColor={LINE_COLORS_RGBA[channel]}
+  />
+</div>
+
+<style>
+  .switch-wrapper {
+    display: flex;
+    justify-content: center;
+    margin: 0.25rem;
+  }
+</style>

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, WebglPlot, WebglThickLine } from "webgl-plot";
   import {
     CANVAS_HEIGHT,
     CANVAS_WIDTH,
@@ -9,6 +9,8 @@
     MIN_SWEEP,
     MAX_SWEEP,
     LINE_COLORS,
+    LINE_THICKNESS_SMALL,
+    LINE_THICKNESS_BIG,
   } from "../const";
   import { timeSweep } from "../stores";
 
@@ -95,6 +97,11 @@
     setScaling(channelIndex, scaling);
   };
 
+  export const updateChannelThickness = (channelIndex, isThick) => {
+    const thickness = isThick ? LINE_THICKNESS_BIG : LINE_THICKNESS_SMALL;
+    lines[channelIndex].setThickness(thickness);
+  };
+
   export const startStopChannelI = (channelIndex, hasStarted) => {
     startStopLine[channelIndex] = hasStarted;
     /*if(hasStarted) console.log("start Channel " + channelIndex + ", hasStarted:" + startStopLine[channelIndex]);
@@ -128,10 +135,11 @@
         LINE_COLORS[i][2] / 255,
         1
       );
-      let line = new WebglLine(color, CANVAS_WIDTH);
-      line.arrangeX();
+      let line = new WebglThickLine(color, CANVAS_WIDTH, LINE_THICKNESS_SMALL);
+      // same thing arrangeX does, but WebglThickLine does not provide it
+      line.lineSpaceX(-1, 2 / CANVAS_WIDTH);
       line.scaleY = computeScaling(scalesY[i]);
-      webGLPlot.addLine(line);
+      webGLPlot.addThickLine(line);
       lines.push(line);
       startStopLine[i] = true;
     }

Apps/frontend/src/const.js

@@ -28,6 +28,8 @@ export const LINE_COLORS = [
 ];
 
 export const LINE_COLORS_RGBA = LINE_COLORS.map(rgbArrayToRGBAString);
+export const LINE_THICKNESS_SMALL = 0.002;
+export const LINE_THICKNESS_BIG = 0.008;
 
 export const NUM_CHANNELS = 10;
 export const MIN_SWEEP = 0.5; // <= 1

Apps/frontend/src/stores.js

@@ -7,3 +7,7 @@ export const timeSweep = writable(new Array(NUM_CHANNELS).fill(5));
 
 // store for the amplification factors of each channel
 export const amplitudeAdjustment = writable(new Array(NUM_CHANNELS).fill(1));
+
+export const thicknessAdjustment = writable(
+  new Array(NUM_CHANNELS).fill(false)
+);

Apps/frontend/src/views/Oscilloscope.svelte

@@ -16,6 +16,7 @@
   import ResetButton from "./ResetButton.svelte";
   import AmplitudeSlider from "./AmplitudeSlider.svelte";
   import { logSocketCloseCode } from "../helper";
+  import ThicknessSwitch from "../components/ThicknessSwitch.svelte";
 
   let waveElement;
   let btnOnOff;
@@ -95,7 +96,7 @@
       <div class="slider-wrapper">
         <div class="sliders">
           Start/Stop
-          <br>
+          <br />
           {#each { length: NUM_CHANNELS } as _, index}
             <StartStopButton
               channel_id={index}
@@ -106,6 +107,17 @@
             />
           {/each}
         </div>
+        <div class="sliders">
+          Thickness
+          {#each { length: NUM_CHANNELS } as _, index}
+            <ThicknessSwitch
+              channel={index}
+              onClick={(isThick) => {
+                waveElement.updateChannelThickness(index, !isThick);
+              }}
+            />
+          {/each}
+        </div>
         <div class="sliders">
           Offset
           {#each { length: NUM_CHANNELS } as _, index}
@@ -137,6 +149,7 @@
     </div>
   </div>
 </div>
+
 <style>
   .wrapper {
     display: flex;