From 23813e3e04d5f445bcd8589cc9485913ac179d5c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marcel=20Sch=C3=B6ckel?= Date: Mon, 12 Dec 2022 19:50:52 +0100 Subject: [PATCH 1/5] Extract slider logic into seperate file Replace old sliders in Oscilloscope file with new Slider --- Apps/frontend/src/components/Slider.svelte | 27 ++++++++++++++ Apps/frontend/src/views/Oscilloscope.svelte | 39 ++++++++++++++++++--- 2 files changed, 62 insertions(+), 4 deletions(-) create mode 100644 Apps/frontend/src/components/Slider.svelte diff --git a/Apps/frontend/src/components/Slider.svelte b/Apps/frontend/src/components/Slider.svelte new file mode 100644 index 00000000..75c8b3fc --- /dev/null +++ b/Apps/frontend/src/components/Slider.svelte @@ -0,0 +1,27 @@ + + +
+ onInput(value)} + bind:value + {min} + {max} + {step} + /> +
diff --git a/Apps/frontend/src/views/Oscilloscope.svelte b/Apps/frontend/src/views/Oscilloscope.svelte index dfedc742..cce400b1 100644 --- a/Apps/frontend/src/views/Oscilloscope.svelte +++ b/Apps/frontend/src/views/Oscilloscope.svelte @@ -5,6 +5,8 @@ CANVAS_WIDTH, NUM_CHANNELS, INDICATOR_SECTION_WIDTH, + MAX_AMPLITUDE, + MIN_AMPLITUDE, } from "../const"; import CoordinateSystem from "../components/CoordinateSystem.svelte"; import Waves from "../components/Waves.svelte"; @@ -16,6 +18,9 @@ import ResetButton from "./ResetButton.svelte"; import AmplitudeSlider from "./AmplitudeSlider.svelte"; import { logSocketCloseCode } from "../helper"; + import ThicknessSwitch from "../components/ThicknessSwitch.svelte"; + import Slider from "../components/Slider.svelte"; + import { timeSweep } from "../stores"; let waveElement; let btnOnOff; @@ -95,7 +100,7 @@
Start/Stop -
+
{#each { length: NUM_CHANNELS } as _, index} Offset {#each { length: NUM_CHANNELS } as _, index} - { waveElement.updateChannelOffsetY(index, offsetY); }} + /> --> + { + waveElement.updateChannelOffsetY(index, offsetY); + indicatorElement.updateChannelOffsetY(index, offsetY); + }} + value={0} + min={-1.0} + max={1.0} + step={0.01} /> {/each}
Time Sweep {#each { length: NUM_CHANNELS } as _, index} - + + {}} + /> {/each}
Amplitude {#each { length: NUM_CHANNELS } as _, index} - { waveElement.updateChannelScaling(index, scaling); }} + /> --> + { + waveElement.updateChannelScaling(index, value); + indicatorElement.updateChannelScaling(index, value); + }} + max={MAX_AMPLITUDE} + min={MIN_AMPLITUDE} /> {/each}
@@ -137,6 +167,7 @@
+ diff --git a/Apps/frontend/src/views/Oscilloscope.svelte b/Apps/frontend/src/views/Oscilloscope.svelte index cce400b1..bf3babcf 100644 --- a/Apps/frontend/src/views/Oscilloscope.svelte +++ b/Apps/frontend/src/views/Oscilloscope.svelte @@ -5,25 +5,14 @@ CANVAS_WIDTH, NUM_CHANNELS, INDICATOR_SECTION_WIDTH, - MAX_AMPLITUDE, - MIN_AMPLITUDE, } from "../const"; import CoordinateSystem from "../components/CoordinateSystem.svelte"; import Waves from "../components/Waves.svelte"; - import OffsetSlider from "../components/OffsetSlider.svelte"; - import StartStopButton from "./StartStopButton.svelte"; import Indicators from "./Indicators.svelte"; - import OnOffButton from "../components/OnOffButton.svelte"; - import TimeSweepSlider from "../components/TimeSweepSlider.svelte"; - import ResetButton from "./ResetButton.svelte"; - import AmplitudeSlider from "./AmplitudeSlider.svelte"; import { logSocketCloseCode } from "../helper"; - import ThicknessSwitch from "../components/ThicknessSwitch.svelte"; - import Slider from "../components/Slider.svelte"; - import { timeSweep } from "../stores"; + import WaveControls from "../components/WaveControls.svelte"; let waveElement; - let btnOnOff; let scalesY = Array(NUM_CHANNELS).fill(1); // 1V per horizontal line let indicatorElement; let socket; @@ -77,94 +66,7 @@ -
-
- { - isEnabled = e.detail.enabled; - }} - bind:this={btnOnOff} - /> - { - // if oscilloscope is running, click stop button - if (isEnabled) { - btnOnOff.click(); - } - // clear canvas and indicators - indicatorElement.clearCanvas(); - waveElement.resetPlot(); - }} - /> -
-
-
- Start/Stop -
- {#each { length: NUM_CHANNELS } as _, index} - { - let hasStarted = event.detail.buttonValue; - waveElement.startStopChannelI(index, hasStarted); - }} - /> - {/each} -
-
- Offset - {#each { length: NUM_CHANNELS } as _, index} - - { - waveElement.updateChannelOffsetY(index, offsetY); - indicatorElement.updateChannelOffsetY(index, offsetY); - }} - value={0} - min={-1.0} - max={1.0} - step={0.01} - /> - {/each} -
-
- Time Sweep - {#each { length: NUM_CHANNELS } as _, index} - - {}} - /> - {/each} -
-
- Amplitude - {#each { length: NUM_CHANNELS } as _, index} - - { - waveElement.updateChannelScaling(index, value); - indicatorElement.updateChannelScaling(index, value); - }} - max={MAX_AMPLITUDE} - min={MIN_AMPLITUDE} - /> - {/each} -
-
-
+ @@ -192,21 +94,4 @@ position: absolute; inset: 0; } - .controls { - grid-column: 2; - justify-content: center; - } - - .slider-wrapper { - display: flex; - } - - .button-wrapper { - display: flex; - margin: 1rem; - } - - .sliders { - width: 50%; - } From 8d48d7c5a6be94c9856cfdacd970c8f6d0582139 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jens=20W=C3=A4chtler?= Date: Wed, 14 Dec 2022 09:51:29 +0100 Subject: [PATCH 3/5] Add indicatorElement to WaveControls MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Jens Wächtler --- Apps/frontend/src/views/Oscilloscope.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Apps/frontend/src/views/Oscilloscope.svelte b/Apps/frontend/src/views/Oscilloscope.svelte index bf3babcf..430f805b 100644 --- a/Apps/frontend/src/views/Oscilloscope.svelte +++ b/Apps/frontend/src/views/Oscilloscope.svelte @@ -66,7 +66,7 @@ - + From ced4ecf4757571cb641ae4246674f1b60415a978 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marcel=20Sch=C3=B6ckel?= Date: Mon, 19 Dec 2022 11:22:49 +0100 Subject: [PATCH 4/5] Correct slider naming, add tests for testing generic slider implementation MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Marcel Schöckel --- .../cypress/e2e/3-slider/amplitude.cy.js | 2 +- .../frontend/cypress/e2e/3-slider/offset.cy.js | 18 ++++++++++++++++++ .../cypress/e2e/3-slider/timesweep.cy.js | 6 ++---- Apps/frontend/src/components/Slider.svelte | 1 + .../src/components/WaveControls.svelte | 9 ++++----- 5 files changed, 26 insertions(+), 10 deletions(-) create mode 100644 Apps/frontend/cypress/e2e/3-slider/offset.cy.js diff --git a/Apps/frontend/cypress/e2e/3-slider/amplitude.cy.js b/Apps/frontend/cypress/e2e/3-slider/amplitude.cy.js index 05f82aa6..bc79bf77 100644 --- a/Apps/frontend/cypress/e2e/3-slider/amplitude.cy.js +++ b/Apps/frontend/cypress/e2e/3-slider/amplitude.cy.js @@ -5,7 +5,7 @@ describe("amplitudeSlider", () => { it("is visible", () => { Cypress._.times(10, (i) => { - cy.get('[data-cy="amplitudeSlider-' + i + '"]').should("be.visible"); + cy.get(`[data-cy="amplitudeSlider-${i}"]`).should("be.visible"); }); }); diff --git a/Apps/frontend/cypress/e2e/3-slider/offset.cy.js b/Apps/frontend/cypress/e2e/3-slider/offset.cy.js new file mode 100644 index 00000000..8f1c8c19 --- /dev/null +++ b/Apps/frontend/cypress/e2e/3-slider/offset.cy.js @@ -0,0 +1,18 @@ +describe("offsetSlider", () => { + beforeEach(() => { + cy.visit("http://localhost:5173/"); + }); + + it("is visible", () => { + Cypress._.times(10, (i) => { + cy.get(`[data-cy="offsetSlider-${i}"]`).should("be.visible"); + }); + }); + + it("change value", () => { + cy.get(":nth-child(1) > #btn-on-off").click(); + cy.wait(2000); + cy.get('[data-cy="offsetSlider-0"]').invoke("val", 2).trigger("change"); + cy.get('[data-cy="offsetSlider-1"]').invoke("val", 7).trigger("change"); + }); +}); diff --git a/Apps/frontend/cypress/e2e/3-slider/timesweep.cy.js b/Apps/frontend/cypress/e2e/3-slider/timesweep.cy.js index 5f7cc5e8..a6d2023e 100644 --- a/Apps/frontend/cypress/e2e/3-slider/timesweep.cy.js +++ b/Apps/frontend/cypress/e2e/3-slider/timesweep.cy.js @@ -5,7 +5,7 @@ describe("timesweepSlider", () => { it("is visible", () => { Cypress._.times(10, (i) => { - cy.get('[data-cy="timesweepSlider-' + i + '"]').should("be.visible"); + cy.get(`[data-cy="timesweepSlider-${i}"]`).should("be.visible"); }); }); @@ -13,8 +13,6 @@ describe("timesweepSlider", () => { cy.get(":nth-child(1) > #btn-on-off").click(); cy.wait(2000); cy.get('[data-cy="timesweepSlider-0"]').invoke("val", 2).trigger("change"); - cy.get('[data-cy="timesweepSlider-1"]') - .invoke("val", 7) - .trigger("change"); + cy.get('[data-cy="timesweepSlider-1"]').invoke("val", 7).trigger("change"); }); }); diff --git a/Apps/frontend/src/components/Slider.svelte b/Apps/frontend/src/components/Slider.svelte index 75c8b3fc..4ae3b9ad 100644 --- a/Apps/frontend/src/components/Slider.svelte +++ b/Apps/frontend/src/components/Slider.svelte @@ -23,5 +23,6 @@ {min} {max} {step} + data-cy={id} /> diff --git a/Apps/frontend/src/components/WaveControls.svelte b/Apps/frontend/src/components/WaveControls.svelte index e40db0c9..56aea5ba 100644 --- a/Apps/frontend/src/components/WaveControls.svelte +++ b/Apps/frontend/src/components/WaveControls.svelte @@ -5,9 +5,8 @@ import ResetButton from "../views/ResetButton.svelte"; import Slider from "./Slider.svelte"; import { timeSweep } from "../stores.js"; - import ThicknessSwitch from "./ThicknessSwitch.svelte"; import TimeSweepSlider from "./TimeSweepSlider.svelte"; - + import ThicknessSwitch from "./ThicknessSwitch.svelte"; export let waveElement; export let isEnabled; export let indicatorElement; @@ -72,7 +71,7 @@ Channels {#each { length: NUM_CHANNELS } as _, index} { waveElement.updateChannelOffsetY(index, offsetY); indicatorElement.updateChannelOffsetY(index, offsetY); @@ -92,7 +91,7 @@ Channels {#each { length: NUM_CHANNELS } as _, index} {}} /> @@ -105,7 +104,7 @@ Channels {#each { length: NUM_CHANNELS } as _, index} { waveElement.updateChannelScaling(index, value); indicatorElement.updateChannelScaling(index, value); From 30148f27ce48b2167a50c3721303fe76a95bc19d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marcel=20Sch=C3=B6ckel?= Date: Mon, 19 Dec 2022 12:09:45 +0100 Subject: [PATCH 5/5] Fix for testing MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Marcel Schöckel --- Apps/frontend/cypress/e2e/3-slider/offset.cy.js | 8 ++++---- Apps/frontend/cypress/e2e/3-slider/timesweep.cy.js | 8 ++++---- Apps/frontend/src/components/Slider.svelte | 13 +++++++++++-- Apps/frontend/src/components/WaveControls.svelte | 8 ++++++++ 4 files changed, 27 insertions(+), 10 deletions(-) diff --git a/Apps/frontend/cypress/e2e/3-slider/offset.cy.js b/Apps/frontend/cypress/e2e/3-slider/offset.cy.js index 8f1c8c19..3f945dc2 100644 --- a/Apps/frontend/cypress/e2e/3-slider/offset.cy.js +++ b/Apps/frontend/cypress/e2e/3-slider/offset.cy.js @@ -10,9 +10,9 @@ describe("offsetSlider", () => { }); it("change value", () => { - cy.get(":nth-child(1) > #btn-on-off").click(); - cy.wait(2000); - cy.get('[data-cy="offsetSlider-0"]').invoke("val", 2).trigger("change"); - cy.get('[data-cy="offsetSlider-1"]').invoke("val", 7).trigger("change"); + cy.get(`[data-cy="offsetSlider-0"]`).within(() => { + cy.get('[type="range"]').invoke("val", 2).trigger("change"); + cy.get('[type="range"]').invoke("val", 7).trigger("change"); + }); }); }); diff --git a/Apps/frontend/cypress/e2e/3-slider/timesweep.cy.js b/Apps/frontend/cypress/e2e/3-slider/timesweep.cy.js index a6d2023e..871a0e50 100644 --- a/Apps/frontend/cypress/e2e/3-slider/timesweep.cy.js +++ b/Apps/frontend/cypress/e2e/3-slider/timesweep.cy.js @@ -10,9 +10,9 @@ describe("timesweepSlider", () => { }); it("change value", () => { - cy.get(":nth-child(1) > #btn-on-off").click(); - cy.wait(2000); - cy.get('[data-cy="timesweepSlider-0"]').invoke("val", 2).trigger("change"); - cy.get('[data-cy="timesweepSlider-1"]').invoke("val", 7).trigger("change"); + cy.get(`[data-cy="timesweepSlider-0"]`).within(() => { + cy.get('[type="range"]').invoke("val", 2).trigger("change"); + cy.get('[type="range"]').invoke("val", 7).trigger("change"); + }); }); }); diff --git a/Apps/frontend/src/components/Slider.svelte b/Apps/frontend/src/components/Slider.svelte index 4ae3b9ad..3c884bad 100644 --- a/Apps/frontend/src/components/Slider.svelte +++ b/Apps/frontend/src/components/Slider.svelte @@ -9,11 +9,13 @@ export let max = 10; export let step = 0.1; export let id = undefined; + export let className = "slider"; + export let calcDisplayValue = undefined; if (id === undefined) console.error("Missing id for Slider!"); -
+
+ {#if calcDisplayValue !== undefined} + {calcDisplayValue(value)} + {/if}
+ + diff --git a/Apps/frontend/src/components/WaveControls.svelte b/Apps/frontend/src/components/WaveControls.svelte index 56aea5ba..db8972c7 100644 --- a/Apps/frontend/src/components/WaveControls.svelte +++ b/Apps/frontend/src/components/WaveControls.svelte @@ -105,12 +105,14 @@ {#each { length: NUM_CHANNELS } as _, index} { waveElement.updateChannelScaling(index, value); indicatorElement.updateChannelScaling(index, value); }} max={MAX_AMPLITUDE} min={MIN_AMPLITUDE} + calcDisplayValue={(value) => (1 / value).toFixed(2)} /> {/each}
@@ -118,6 +120,12 @@