Merge pull request #224 from amosproj/dev

sprint-14-release-candidate

.gitignore

@@ -36,4 +36,6 @@ bin/
 .DS_Store
 
 
-Apps/backend/target
+Apps/backend/target
+*.bkp
+*.dtmp

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/package.json

@@ -37,7 +37,6 @@
   },
   "dependencies": {
     "axios": "^1.2.1",
-    "sveltestrap": "^5.10.0",
-    "webgl-plot": "^0.7.0"
+    "sveltestrap": "^5.10.0"
   }
 }

Apps/frontend/src/OscilloscopeWebGl.ts

@@ -2,14 +2,26 @@ import {
   channelFragmentShader,
   channelVertexShader,
 } from "./shader/channelShader";
+import { headFragmentShader, headVertexShader } from "./shader/headShader";
 import { createShaderProgram } from "./shader/shaderHelper";
 import { get } from "svelte/store";
-import { LINE_COLORS_WEBGL } from "./const";
-import { amplitudeAdjustment, offsetAdjustment } from "./stores";
+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;
-  private webgl: WebGL2RenderingContext;
+  private headProgram: WebGLProgram;
   private channelVertexBuffer: WebGLBuffer;
+  private headVertexBuffer: WebGLBuffer;
+  private webgl: WebGL2RenderingContext;
 
   constructor(webgl: WebGL2RenderingContext) {
     this.webgl = webgl;
@@ -31,7 +43,13 @@ export class OscilloscopeWebGl {
       channelVertexShader,
       channelFragmentShader
     );
+    this.headProgram = createShaderProgram(
+      this.webgl,
+      headVertexShader,
+      headFragmentShader
+    );
     this.channelVertexBuffer = this.webgl.createBuffer() as WebGLBuffer;
+    this.headVertexBuffer = this.webgl.createBuffer() as WebGLBuffer;
   }
 
   clear() {
@@ -64,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,
@@ -72,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"
@@ -87,6 +108,110 @@ 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);
+      }
+    }
+  }
+
+  drawHeads(xArr: number[], channelSamples: number[][]) {
+    this.webgl.useProgram(this.headProgram);
+
+    let headVertices = new Float32Array([
+      1.0, 1.0, -1.0, 1.0, 1.0, -1.0, -1.0, -1.0,
+    ]);
+    this.webgl.bindBuffer(this.webgl.ARRAY_BUFFER, this.headVertexBuffer);
+    this.webgl.bufferData(
+      this.webgl.ARRAY_BUFFER,
+      headVertices,
+      this.webgl.STATIC_DRAW
+    );
+    let vertexAttribute = this.webgl.getAttribLocation(
+      this.headProgram,
+      "aVertex"
+    );
+
+    this.webgl.vertexAttribPointer(
+      vertexAttribute,
+      2,
+      this.webgl.FLOAT,
+      false,
+      0,
+      0
+    );
+    this.webgl.enableVertexAttribArray(vertexAttribute);
+
+    for (let i = 0; i < channelSamples.length; i++) {
+      let activated = get(channelActivated)[i];
+
+      if (!activated) continue;
+
+      let xCurr = xArr[i];
+      let xCurrUniform = this.webgl.getUniformLocation(
+        this.headProgram,
+        "u_xCurr"
+      );
+      this.webgl.uniform1f(xCurrUniform, xCurr);
+
+      let sampleCurr = channelSamples[i][xCurr];
+
+      let sampleUniform = this.webgl.getUniformLocation(
+        this.headProgram,
+        "u_sample"
+      );
+      this.webgl.uniform1f(sampleUniform, sampleCurr);
+
+      let color = new Float32Array(LINE_COLORS_WEBGL[i]);
+      let colorUniform = this.webgl.getUniformLocation(
+        this.headProgram,
+        "u_colour"
+      );
+
+      this.webgl.uniform4fv(colorUniform, color);
+
+      let offsetUniform = this.webgl.getUniformLocation(
+        this.headProgram,
+        "u_offset"
+      );
+      let channelOffset = get(offsetAdjustment)[i];
+      this.webgl.uniform1f(offsetUniform, channelOffset);
+
+      let amplitudeUniform = this.webgl.getUniformLocation(
+        this.headProgram,
+        "u_amplitude"
+      );
+      let channelAmplitude = get(amplitudeAdjustment)[i];
+      this.webgl.uniform1f(amplitudeUniform, channelAmplitude);
+
+      this.webgl.drawArrays(
+        this.webgl.TRIANGLE_STRIP,
+        0,
+        headVertices.length / 2
+      );
     }
   }
 }

Apps/frontend/src/app.scss

@@ -160,12 +160,12 @@ nav {
 
 .wrapper {
   display: grid;
-  grid-template-columns: 8vmax calc(16vw - 2em) calc(
-      100vw - 2 * (8vmax + 16vw - 2em)
-    ) calc(16vw - 2em) 8vmax;
-  grid-template-rows: calc(1 / 2 * (8vmax)) calc(
-      1 / 2 * (100vw - 2 * (8vmax + 16vw - 2em))
-    ) calc(100vh - 1 / 2 * (8vmax + 100vw - 2 * (8vmax + 16vw - 2em)));
+  grid-template-columns:
+    8vmax calc(16vw - 2em) calc(100vw - 2 * (8vmax + 16vw - 2em))
+    calc(16vw - 2em) 8vmax;
+  grid-template-rows:
+    calc(1 / 2 * (8vmax)) calc(1 / 2 * (100vw - 2 * (8vmax + 16vw - 2em)))
+    calc(100vh - 1 / 2 * (8vmax + 100vw - 2 * (8vmax + 16vw - 2em)));
   width: 100%;
   height: 100%;
 }
@@ -224,7 +224,6 @@ nav {
 
   &--waves {
     position: absolute;
-    margin-top: 0.1vw;
     margin-left: 0.1vw;
     inset: 0;
   }

Apps/frontend/src/components/GNDButton.svelte

@@ -22,4 +22,6 @@
   }}
   data-cy="gnd-button"
 />
-<Tooltip target={button} placement="bottom" data-cy="gnd-button-tooltip">{TOOLTIP_BUTTON_GND}</Tooltip>
+<Tooltip target={button} placement="bottom" data-cy="gnd-button-tooltip"
+  >{TOOLTIP_BUTTON_GND}</Tooltip
+>

Apps/frontend/src/components/Waves.svelte

@@ -6,18 +6,9 @@
     NUM_CHANNELS,
     WAVE_CURSOR_SIZE,
   } from "../const";
-  import {
-    channelActivated,
-    thicknessAdjustment,
-    timeSweep,
-  } from "../stores";
-  import {
-    OscilloscopeWebGl
-  } from "../OscilloscopeWebGl"
+  import { channelActivated, timeSweep } from "../stores";
+  import { OscilloscopeWebGl } from "../OscilloscopeWebGl";
   import { computeDisplayDeltaFromTimeSweep } from "../helper";
-
-  export let scalesY;
-
   let canvasElement;
   let oscilloscopeWebGl;
   /**
@@ -81,12 +72,9 @@
     }
   };
 
-  thicknessAdjustment.subscribe((isThick) => {
-    // thick lines not implemented
-  });
-
   const update = () => {
     oscilloscopeWebGl.drawChannels(channelSamples);
+    oscilloscopeWebGl.drawHeads(xLast, channelSamples);
   };
 
   const resizeCanvas = () => {
@@ -98,11 +86,11 @@
     let webgl = canvasElement.getContext("webgl2");
 
     if (webgl === null) {
-        alert(
-          "Unable to initialize WebGL. Your browser or machine may not support it."
-        );
-        return;
-      }
+      alert(
+        "Unable to initialize WebGL. Your browser or machine may not support it."
+      );
+      return;
+    }
 
     oscilloscopeWebGl = new OscilloscopeWebGl(webgl);
   };

Apps/frontend/src/const.js

@@ -27,9 +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
@@ -39,6 +36,7 @@ export const DEFAULT_STEP_SIZE = 1.0;
 export const MIN_AMPLITUDE = 0.0;
 export const MAX_AMPLITUDE = NUM_INTERVALS_HORIZONTAL / 2;
 export const WAVE_CURSOR_SIZE = 50;
+export const HEAD_WIDTH_PIXEL = 3;
 
 export const MIN_CONTROL_PANEL_BOTTOM_HEIGHT = 304; //px
 
@@ -54,7 +52,8 @@ 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;
-export const TIME_PER_DIV = PIXELS_PER_DIV * TIME_PER_UPDATE;
+// 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 =
+  EXPECTED_UPDATES_PER_SECOND / REAL_UPDATES_PER_SECOND;
 /* END DISPLAY SPEED */

Apps/frontend/src/helper.js

@@ -1,5 +1,6 @@
 import {
-  TEXT_INDICATORS_DECIMAL_PLACES, DEFAULT_STEP_SIZE,
+  TEXT_INDICATORS_DECIMAL_PLACES,
+  DEFAULT_STEP_SIZE,
   MIN_SWEEP,
   MAX_SWEEP,
 } from "./const";
@@ -107,4 +108,4 @@ export function computeDisplayDeltaFromTimeSweep(sliderValue) {
     DEFAULT_STEP_SIZE *
     (1.0 + timeSweep * (timeSweep >= 0.0 ? MAX_SWEEP - 1.0 : 1.0 - MIN_SWEEP));
   return delta;
-}
+}