Skip to content

Commit 78c85a7

Browse files
jenswaechtlerjenswaechtler
authored
Merge pull request #225 from amosproj/int
sprint-14-release
2 parents 0a8c86d + 08119e9 commit 78c85a7

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

45 files changed

+414
-66
lines changed

‎.gitignore‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,4 +36,6 @@ bin/
3636
.DS_Store
3737

3838

39-
Apps/backend/target
39+
Apps/backend/target
40+
*.bkp
41+
*.dtmp

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ describe("everything visible on front page", () => {
2525

2626
it("closes popup on click outside", () => {
2727
cy.get('[data-cy="settings-button"]').click();
28+
cy.get('[data-cy="preset-config-open-popup"]').should("be.visible");
2829
cy.get('[data-cy="oscilloscope"]').click();
2930
cy.get('[data-cy="preset-config-open-popup"]').should("not.be.visible");
3031
});

‎Apps/frontend/package-lock.json‎

Lines changed: 7 additions & 18 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎Apps/frontend/package.json‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,6 @@
3737
},
3838
"dependencies": {
3939
"axios": "^1.2.1",
40-
"sveltestrap": "^5.10.0",
41-
"webgl-plot": "^0.7.0"
40+
"sveltestrap": "^5.10.0"
4241
}
4342
}

‎Apps/frontend/src/OscilloscopeWebGl.ts‎

Lines changed: 128 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,26 @@ import {
22
channelFragmentShader,
33
channelVertexShader,
44
} from "./shader/channelShader";
5+
import { headFragmentShader, headVertexShader } from "./shader/headShader";
56
import { createShaderProgram } from "./shader/shaderHelper";
67
import { get } from "svelte/store";
7-
import { LINE_COLORS_WEBGL } from "./const";
8-
import { amplitudeAdjustment, offsetAdjustment } from "./stores";
8+
import {
9+
LINE_COLORS_WEBGL,
10+
LINE_THICKNESS_DELTA,
11+
LINE_THICKNESS_DUPLICATES,
12+
} from "./const";
13+
import {
14+
amplitudeAdjustment,
15+
offsetAdjustment,
16+
channelActivated,
17+
thicknessAdjustment,
18+
} from "./stores";
919
export class OscilloscopeWebGl {
1020
private channelProgram: WebGLProgram;
11-
private webgl: WebGL2RenderingContext;
21+
private headProgram: WebGLProgram;
1222
private channelVertexBuffer: WebGLBuffer;
23+
private headVertexBuffer: WebGLBuffer;
24+
private webgl: WebGL2RenderingContext;
1325

1426
constructor(webgl: WebGL2RenderingContext) {
1527
this.webgl = webgl;
@@ -31,7 +43,13 @@ export class OscilloscopeWebGl {
3143
channelVertexShader,
3244
channelFragmentShader
3345
);
46+
this.headProgram = createShaderProgram(
47+
this.webgl,
48+
headVertexShader,
49+
headFragmentShader
50+
);
3451
this.channelVertexBuffer = this.webgl.createBuffer() as WebGLBuffer;
52+
this.headVertexBuffer = this.webgl.createBuffer() as WebGLBuffer;
3553
}
3654

3755
clear() {
@@ -64,6 +82,7 @@ export class OscilloscopeWebGl {
6482
);
6583
this.webgl.enableVertexAttribArray(sampleAttribute);
6684

85+
// Colour
6786
let colors = new Float32Array(LINE_COLORS_WEBGL[i]);
6887
let colorUniform = this.webgl.getUniformLocation(
6988
this.channelProgram,
@@ -72,13 +91,15 @@ export class OscilloscopeWebGl {
7291

7392
this.webgl.uniform4fv(colorUniform, colors);
7493

94+
// Offset
7595
let offsetUniform = this.webgl.getUniformLocation(
7696
this.channelProgram,
7797
"u_offset"
7898
);
7999
let channelOffset = get(offsetAdjustment)[i];
80100
this.webgl.uniform1f(offsetUniform, channelOffset);
81101

102+
// Amplitude
82103
let amplitudeUniform = this.webgl.getUniformLocation(
83104
this.channelProgram,
84105
"u_amplitude"
@@ -87,6 +108,110 @@ export class OscilloscopeWebGl {
87108
this.webgl.uniform1f(amplitudeUniform, channelAmplitude);
88109

89110
this.webgl.drawArrays(this.webgl.LINE_STRIP, 0, samples.length);
111+
112+
// draw three lines to make thicker line -> Thickness
113+
if (get(thicknessAdjustment)[i]) {
114+
// First line
115+
let thicknessUniform = this.webgl.getUniformLocation(
116+
this.channelProgram,
117+
"u_thick_line_id"
118+
);
119+
this.webgl.uniform1i(thicknessUniform, 1);
120+
this.webgl.drawArrays(this.webgl.LINE_STRIP, 0, samples.length);
121+
122+
// Second line
123+
thicknessUniform = this.webgl.getUniformLocation(
124+
this.channelProgram,
125+
"u_thick_line_id"
126+
);
127+
this.webgl.uniform1i(thicknessUniform, 2);
128+
this.webgl.drawArrays(this.webgl.LINE_STRIP, 0, samples.length);
129+
130+
// Third line -> "original" line
131+
thicknessUniform = this.webgl.getUniformLocation(
132+
this.channelProgram,
133+
"u_thick_line_id"
134+
);
135+
this.webgl.uniform1i(thicknessUniform, 0);
136+
this.webgl.drawArrays(this.webgl.LINE_STRIP, 0, samples.length);
137+
}
138+
}
139+
}
140+
141+
drawHeads(xArr: number[], channelSamples: number[][]) {
142+
this.webgl.useProgram(this.headProgram);
143+
144+
let headVertices = new Float32Array([
145+
1.0, 1.0, -1.0, 1.0, 1.0, -1.0, -1.0, -1.0,
146+
]);
147+
this.webgl.bindBuffer(this.webgl.ARRAY_BUFFER, this.headVertexBuffer);
148+
this.webgl.bufferData(
149+
this.webgl.ARRAY_BUFFER,
150+
headVertices,
151+
this.webgl.STATIC_DRAW
152+
);
153+
let vertexAttribute = this.webgl.getAttribLocation(
154+
this.headProgram,
155+
"aVertex"
156+
);
157+
158+
this.webgl.vertexAttribPointer(
159+
vertexAttribute,
160+
2,
161+
this.webgl.FLOAT,
162+
false,
163+
0,
164+
0
165+
);
166+
this.webgl.enableVertexAttribArray(vertexAttribute);
167+
168+
for (let i = 0; i < channelSamples.length; i++) {
169+
let activated = get(channelActivated)[i];
170+
171+
if (!activated) continue;
172+
173+
let xCurr = xArr[i];
174+
let xCurrUniform = this.webgl.getUniformLocation(
175+
this.headProgram,
176+
"u_xCurr"
177+
);
178+
this.webgl.uniform1f(xCurrUniform, xCurr);
179+
180+
let sampleCurr = channelSamples[i][xCurr];
181+
182+
let sampleUniform = this.webgl.getUniformLocation(
183+
this.headProgram,
184+
"u_sample"
185+
);
186+
this.webgl.uniform1f(sampleUniform, sampleCurr);
187+
188+
let color = new Float32Array(LINE_COLORS_WEBGL[i]);
189+
let colorUniform = this.webgl.getUniformLocation(
190+
this.headProgram,
191+
"u_colour"
192+
);
193+
194+
this.webgl.uniform4fv(colorUniform, color);
195+
196+
let offsetUniform = this.webgl.getUniformLocation(
197+
this.headProgram,
198+
"u_offset"
199+
);
200+
let channelOffset = get(offsetAdjustment)[i];
201+
this.webgl.uniform1f(offsetUniform, channelOffset);
202+
203+
let amplitudeUniform = this.webgl.getUniformLocation(
204+
this.headProgram,
205+
"u_amplitude"
206+
);
207+
let channelAmplitude = get(amplitudeAdjustment)[i];
208+
this.webgl.uniform1f(amplitudeUniform, channelAmplitude);
209+
210+
this.webgl.drawArrays(
211+
this.webgl.TRIANGLE_STRIP,
212+
0,
213+
headVertices.length / 2
214+
);
90215
}
91216
}
92217
}

‎Apps/frontend/src/app.scss‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -160,12 +160,12 @@ nav {
160160

161161
.wrapper {
162162
display: grid;
163-
grid-template-columns: 8vmax calc(16vw - 2em) calc(
164-
100vw - 2 * (8vmax + 16vw - 2em)
165-
) calc(16vw - 2em) 8vmax;
166-
grid-template-rows: calc(1 / 2 * (8vmax)) calc(
167-
1 / 2 * (100vw - 2 * (8vmax + 16vw - 2em))
168-
) calc(100vh - 1 / 2 * (8vmax + 100vw - 2 * (8vmax + 16vw - 2em)));
163+
grid-template-columns:
164+
8vmax calc(16vw - 2em) calc(100vw - 2 * (8vmax + 16vw - 2em))
165+
calc(16vw - 2em) 8vmax;
166+
grid-template-rows:
167+
calc(1 / 2 * (8vmax)) calc(1 / 2 * (100vw - 2 * (8vmax + 16vw - 2em)))
168+
calc(100vh - 1 / 2 * (8vmax + 100vw - 2 * (8vmax + 16vw - 2em)));
169169
width: 100%;
170170
height: 100%;
171171
}
@@ -224,7 +224,6 @@ nav {
224224

225225
&--waves {
226226
position: absolute;
227-
margin-top: 0.1vw;
228227
margin-left: 0.1vw;
229228
inset: 0;
230229
}

‎Apps/frontend/src/components/GNDButton.svelte‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,4 +22,6 @@
2222
}}
2323
data-cy="gnd-button"
2424
/>
25-
<Tooltip target={button} placement="bottom" data-cy="gnd-button-tooltip">{TOOLTIP_BUTTON_GND}</Tooltip>
25+
<Tooltip target={button} placement="bottom" data-cy="gnd-button-tooltip"
26+
>{TOOLTIP_BUTTON_GND}</Tooltip
27+
>

‎Apps/frontend/src/components/Waves.svelte‎

Lines changed: 8 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -6,18 +6,9 @@
66
NUM_CHANNELS,
77
WAVE_CURSOR_SIZE,
88
} from "../const";
9-
import {
10-
channelActivated,
11-
thicknessAdjustment,
12-
timeSweep,
13-
} from "../stores";
14-
import {
15-
OscilloscopeWebGl
16-
} from "../OscilloscopeWebGl"
9+
import { channelActivated, timeSweep } from "../stores";
10+
import { OscilloscopeWebGl } from "../OscilloscopeWebGl";
1711
import { computeDisplayDeltaFromTimeSweep } from "../helper";
18-
19-
export let scalesY;
20-
2112
let canvasElement;
2213
let oscilloscopeWebGl;
2314
/**
@@ -81,12 +72,9 @@
8172
}
8273
};
8374
84-
thicknessAdjustment.subscribe((isThick) => {
85-
// thick lines not implemented
86-
});
87-
8875
const update = () => {
8976
oscilloscopeWebGl.drawChannels(channelSamples);
77+
oscilloscopeWebGl.drawHeads(xLast, channelSamples);
9078
};
9179
9280
const resizeCanvas = () => {
@@ -98,11 +86,11 @@
9886
let webgl = canvasElement.getContext("webgl2");
9987
10088
if (webgl === null) {
101-
alert(
102-
"Unable to initialize WebGL. Your browser or machine may not support it."
103-
);
104-
return;
105-
}
89+
alert(
90+
"Unable to initialize WebGL. Your browser or machine may not support it."
91+
);
92+
return;
93+
}
10694
10795
oscilloscopeWebGl = new OscilloscopeWebGl(webgl);
10896
};

‎Apps/frontend/src/const.js‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -27,9 +27,6 @@ export const LINE_COLORS_RGBA = LINE_COLORS.map(rgbArrayToRGBAString);
2727
export const LINE_COLORS_WEBGL = LINE_COLORS.map((color) =>
2828
color.map((num) => num / 255).concat([1])
2929
);
30-
export const LINE_THICKNESS_SMALL = 0.002;
31-
export const LINE_THICKNESS_BIG = 0.008;
32-
3330
export const NUM_CHANNELS = 10;
3431
export const MIN_SWEEP = 0.1; // <= 1
3532
export const MAX_SWEEP = 2.0; // >= 1
@@ -39,6 +36,7 @@ export const DEFAULT_STEP_SIZE = 1.0;
3936
export const MIN_AMPLITUDE = 0.0;
4037
export const MAX_AMPLITUDE = NUM_INTERVALS_HORIZONTAL / 2;
4138
export const WAVE_CURSOR_SIZE = 50;
39+
export const HEAD_WIDTH_PIXEL = 3;
4240

4341
export const MIN_CONTROL_PANEL_BOTTOM_HEIGHT = 304; //px
4442

@@ -54,7 +52,8 @@ export const REST_ENDPOINT_CONFIG = `${BACKEND_API_URL}/config`;
5452

5553
/* DISPLAY SPEED */
5654
const EXPECTED_UPDATES_PER_SECOND = 10_000;
57-
const TIME_PER_UPDATE = 1 / EXPECTED_UPDATES_PER_SECOND;
58-
const PIXELS_PER_DIV = CANVAS_WIDTH / NUM_INTERVALS_VERTICAL;
59-
export const TIME_PER_DIV = PIXELS_PER_DIV * TIME_PER_UPDATE;
55+
// Change this after functionality for measuring actual updates per second is implemented
56+
const REAL_UPDATES_PER_SECOND = EXPECTED_UPDATES_PER_SECOND;
57+
export const TIME_PER_DIV =
58+
EXPECTED_UPDATES_PER_SECOND / REAL_UPDATES_PER_SECOND;
6059
/* END DISPLAY SPEED */

‎Apps/frontend/src/helper.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import {
2-
TEXT_INDICATORS_DECIMAL_PLACES, DEFAULT_STEP_SIZE,
2+
TEXT_INDICATORS_DECIMAL_PLACES,
3+
DEFAULT_STEP_SIZE,
34
MIN_SWEEP,
45
MAX_SWEEP,
56
} from "./const";
@@ -107,4 +108,4 @@ export function computeDisplayDeltaFromTimeSweep(sliderValue) {
107108
DEFAULT_STEP_SIZE *
108109
(1.0 + timeSweep * (timeSweep >= 0.0 ? MAX_SWEEP - 1.0 : 1.0 - MIN_SWEEP));
109110
return delta;
110-
}
111+
}

0 commit comments

Comments
 (0)