Merge pull request #218 from amosproj/feature/#126-refactoring-line-t…

…hickness

Naive thickness by duplicating lines with slight offset

Apps/frontend/cypress/e2e/2-control-panel/preset-config.cy.js

@@ -25,6 +25,7 @@ describe("everything visible on front page", () => {
 
   it("closes popup on click outside", () => {
     cy.get('[data-cy="settings-button"]').click();
+    cy.get('[data-cy="preset-config-open-popup"]').should("be.visible");
     cy.get('[data-cy="oscilloscope"]').click();
     cy.get('[data-cy="preset-config-open-popup"]').should("not.be.visible");
   });

Apps/frontend/src/OscilloscopeWebGl.ts

@@ -5,11 +5,16 @@ import {
 import { headFragmentShader, headVertexShader } from "./shader/headShader";
 import { createShaderProgram } from "./shader/shaderHelper";
 import { get } from "svelte/store";
-import { LINE_COLORS_WEBGL } from "./const";
+import {
+  LINE_COLORS_WEBGL,
+  LINE_THICKNESS_DELTA,
+  LINE_THICKNESS_DUPLICATES,
+} from "./const";
 import {
   amplitudeAdjustment,
   offsetAdjustment,
   channelActivated,
+  thicknessAdjustment,
 } from "./stores";
 export class OscilloscopeWebGl {
   private channelProgram: WebGLProgram;
@@ -77,6 +82,7 @@ export class OscilloscopeWebGl {
       );
       this.webgl.enableVertexAttribArray(sampleAttribute);
 
+      // Colour
       let colors = new Float32Array(LINE_COLORS_WEBGL[i]);
       let colorUniform = this.webgl.getUniformLocation(
         this.channelProgram,
@@ -85,13 +91,15 @@ export class OscilloscopeWebGl {
 
       this.webgl.uniform4fv(colorUniform, colors);
 
+      // Offset
       let offsetUniform = this.webgl.getUniformLocation(
         this.channelProgram,
         "u_offset"
       );
       let channelOffset = get(offsetAdjustment)[i];
       this.webgl.uniform1f(offsetUniform, channelOffset);
 
+      // Amplitude
       let amplitudeUniform = this.webgl.getUniformLocation(
         this.channelProgram,
         "u_amplitude"
@@ -100,6 +108,33 @@ export class OscilloscopeWebGl {
       this.webgl.uniform1f(amplitudeUniform, channelAmplitude);
 
       this.webgl.drawArrays(this.webgl.LINE_STRIP, 0, samples.length);
+
+      // draw three lines to make thicker line -> Thickness
+      if (get(thicknessAdjustment)[i]) {
+        // First line
+        let thicknessUniform = this.webgl.getUniformLocation(
+          this.channelProgram,
+          "u_thick_line_id"
+        );
+        this.webgl.uniform1i(thicknessUniform, 1);
+        this.webgl.drawArrays(this.webgl.LINE_STRIP, 0, samples.length);
+
+        // Second line
+        thicknessUniform = this.webgl.getUniformLocation(
+          this.channelProgram,
+          "u_thick_line_id"
+        );
+        this.webgl.uniform1i(thicknessUniform, 2);
+        this.webgl.drawArrays(this.webgl.LINE_STRIP, 0, samples.length);
+
+        // Third line -> "original" line
+        thicknessUniform = this.webgl.getUniformLocation(
+          this.channelProgram,
+          "u_thick_line_id"
+        );
+        this.webgl.uniform1i(thicknessUniform, 0);
+        this.webgl.drawArrays(this.webgl.LINE_STRIP, 0, samples.length);
+      }
     }
   }
 

Apps/frontend/src/app.scss

@@ -224,7 +224,6 @@ nav {
 
   &--waves {
     position: absolute;
-    margin-top: 0.1vw;
     margin-left: 0.1vw;
     inset: 0;
   }

Apps/frontend/src/components/Waves.svelte

@@ -6,12 +6,9 @@
     NUM_CHANNELS,
     WAVE_CURSOR_SIZE,
   } from "../const";
-  import { channelActivated, thicknessAdjustment, timeSweep } from "../stores";
+  import { channelActivated, timeSweep } from "../stores";
   import { OscilloscopeWebGl } from "../OscilloscopeWebGl";
   import { computeDisplayDeltaFromTimeSweep } from "../helper";
-
-  export let scalesY;
-
   let canvasElement;
   let oscilloscopeWebGl;
   /**
@@ -75,10 +72,6 @@
     }
   };
 
-  thicknessAdjustment.subscribe((isThick) => {
-    // thick lines not implemented
-  });
-
   const update = () => {
     oscilloscopeWebGl.drawChannels(channelSamples);
     oscilloscopeWebGl.drawHeads(xLast, channelSamples);

Apps/frontend/src/const.js

@@ -27,8 +27,6 @@ export const LINE_COLORS_RGBA = LINE_COLORS.map(rgbArrayToRGBAString);
 export const LINE_COLORS_WEBGL = LINE_COLORS.map((color) =>
   color.map((num) => num / 255).concat([1])
 );
-export const LINE_THICKNESS_SMALL = 0.002;
-export const LINE_THICKNESS_BIG = 0.008;
 export const NUM_CHANNELS = 10;
 export const MIN_SWEEP = 0.1; // <= 1
 export const MAX_SWEEP = 2.0; // >= 1
@@ -54,8 +52,6 @@ export const REST_ENDPOINT_CONFIG = `${BACKEND_API_URL}/config`;
 
 /* DISPLAY SPEED */
 const EXPECTED_UPDATES_PER_SECOND = 10_000;
-const TIME_PER_UPDATE = 1 / EXPECTED_UPDATES_PER_SECOND;
-const PIXELS_PER_DIV = CANVAS_WIDTH / NUM_INTERVALS_VERTICAL;
 // Change this after functionality for measuring actual updates per second is implemented
 const REAL_UPDATES_PER_SECOND = EXPECTED_UPDATES_PER_SECOND;
 export const TIME_PER_DIV =

Apps/frontend/src/shader/channelShader.js

@@ -17,9 +17,11 @@ export const channelVertexShader = `#version 300 es
   #define X_TO_NDC ${2.0 / CANVAS_WIDTH}
   #define CANVAS_WIDTH ${CANVAS_WIDTH}
   #define SCALE_Y ${(NUM_INTERVALS_HORIZONTAL / 2).toFixed(1)}
+  #define THICKNESS_OFFSET 0.002
   uniform vec4 u_colour;
   uniform float u_offset;
   uniform float u_amplitude;
+  uniform int u_thick_line_id;
   in float aSample;
   out vec4 v_colour;
 
@@ -32,7 +34,14 @@ export const channelVertexShader = `#version 300 es
     float y = (aSample * u_amplitude + (SCALE_Y * u_offset));
     float xNDC = x_to_ndc(x);
     float yNDC = y * VOLTS_TO_NDC;
-    gl_Position = vec4(xNDC, yNDC, 0, 1);
+    float thicknessOffset = 0.0;
+    if (u_thick_line_id == 1) {
+      thicknessOffset = -THICKNESS_OFFSET;
+    }
+    if (u_thick_line_id == 2) {
+      thicknessOffset = THICKNESS_OFFSET;
+    }
+    gl_Position = vec4(xNDC + thicknessOffset, yNDC + thicknessOffset, 0, 1);
     v_colour = u_colour;
   }
 `;