#127 with new layout

Signed-off-by: nicolaskolbenschlag <[email protected]>

Apps/frontend/src/app.scss

@@ -260,4 +260,8 @@ nav {
   &--close {
     background-image: url("./assets/mui_close.svg");
   }
+
+  &--drop-down {
+    background-image: url("./assets/mui_drop-down.svg");
+  }
 }

Apps/frontend/src/components/GNDButton.svelte

@@ -0,0 +1,18 @@
+<script>
+  import { createEventDispatcher } from "svelte";
+  const dispatch = createEventDispatcher();
+  const handleClick = async (/** @type {boolean} */ down) => {
+    dispatch("set-gnd", { down: down });
+  };
+</script>
+
+<button
+  class="icon-button mui-icon--drop-down"
+  on:mousedown={async () => {
+    handleClick(true);
+  }}
+  on:mouseup={async () => {
+    handleClick(false);
+  }}
+  data-cy="gnd-button"
+/>

Apps/frontend/src/stores.js

@@ -16,3 +16,4 @@ export const thicknessAdjustment = writable(
 );
 
 export const expandedPanelOpen = writable(false);
+export const isGND = writable(false);

Apps/frontend/src/views/GeneralButtons.svelte

@@ -1,7 +1,8 @@
 <script>
-  import { osciEnabled } from "../stores";
+  import { osciEnabled, isGND } from "../stores";
   import OnOffButton from "../components/OnOffButton.svelte";
   import ResetButton from "../components/ResetButton.svelte";
+  import GNDButton from "../components/GNDButton.svelte";
 
   let onOffButton;
   export let indicatorElement;
@@ -25,3 +26,8 @@
     waveElement.resetPlot();
   }}
 />
+<GNDButton
+  on:set-gnd={(e) => {
+    $isGND = e.detail.down;
+  }}
+/>

Apps/frontend/src/views/Oscilloscope.svelte

@@ -8,7 +8,7 @@
   import Waves from "../components/Waves.svelte";
   import CoordinateSystem from "./CoordinateSystem.svelte";
   import { MIN_CONTROL_PANEL_BOTTOM_HEIGHT, NUM_CHANNELS } from "../const";
-  import { osciEnabled } from "../stores";
+  import { osciEnabled, isGND } from "../stores";
   import { logSocketCloseCode } from "../helper";
 
   $: innerWidth = 0;
@@ -22,6 +22,8 @@
 
   let socket;
 
+  let gndSample = null;
+
   // ----- Svelte lifecycle hooks -----
   onMount(() => {
     socket = createSocket();
@@ -51,6 +53,12 @@
   const socketOnMessage = (messageEvent) => {
     if (!$osciEnabled) return;
     let samples = new Float64Array(messageEvent.data);
+    if ($isGND) {
+      if (gndSample == null) {
+        gndSample = new Array(samples.length).fill(0.0);
+      }
+      samples = gndSample;
+    }
     for (let index = 0; index < samples.length; index += NUM_CHANNELS) {
       waveElement.updateBuffer(samples, index, index + NUM_CHANNELS);
       if (index % 1000 == 0) indicatorElement.update(samples, index);
@@ -84,9 +92,7 @@
         <Waves bind:this={waveElement} {scalesY} />
       </div>
     </div>
-    <div class="control-panel--right">
-      Overall Buttons
-    </div>
+    <div class="control-panel--right">Overall Buttons</div>
     <div
       class="control-panel--bottom"
       bind:clientHeight={controlPanelBottomHeight}