diff --git a/Apps/frontend/cypress/e2e/2-control-panel/preset-config.cy.js b/Apps/frontend/cypress/e2e/2-control-panel/preset-config.cy.js index 046c3b9e..154db8ab 100644 --- a/Apps/frontend/cypress/e2e/2-control-panel/preset-config.cy.js +++ b/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"); }); diff --git a/Apps/frontend/src/OscilloscopeWebGl.ts b/Apps/frontend/src/OscilloscopeWebGl.ts index 220c0fbf..40cc8eaa 100644 --- a/Apps/frontend/src/OscilloscopeWebGl.ts +++ b/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,6 +91,7 @@ export class OscilloscopeWebGl { this.webgl.uniform4fv(colorUniform, colors); + // Offset let offsetUniform = this.webgl.getUniformLocation( this.channelProgram, "u_offset" @@ -92,6 +99,7 @@ export class OscilloscopeWebGl { 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); + } } } diff --git a/Apps/frontend/src/app.scss b/Apps/frontend/src/app.scss index 097b515d..712788e2 100644 --- a/Apps/frontend/src/app.scss +++ b/Apps/frontend/src/app.scss @@ -224,7 +224,6 @@ nav { &--waves { position: absolute; - margin-top: 0.1vw; margin-left: 0.1vw; inset: 0; } diff --git a/Apps/frontend/src/components/Waves.svelte b/Apps/frontend/src/components/Waves.svelte index b6a10138..1c8ed16d 100644 --- a/Apps/frontend/src/components/Waves.svelte +++ b/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); diff --git a/Apps/frontend/src/const.js b/Apps/frontend/src/const.js index e45101ed..6e315e07 100644 --- a/Apps/frontend/src/const.js +++ b/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 = diff --git a/Apps/frontend/src/shader/channelShader.js b/Apps/frontend/src/shader/channelShader.js index dd532cd2..261bc5bc 100644 --- a/Apps/frontend/src/shader/channelShader.js +++ b/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; } `;