Move StartStopButtons to ControlPanelBottom + improve scaling for bot…

…h mobile and laptop screens Signed-off-by: Philipp Kramer <philipp.p.kramer@gmail.com>
amosproj · Jan 11, 2023 · 55f1690 · 55f1690
1 parent 2e70fb5
commit 55f1690
Show file tree

Hide file tree

Showing 14 changed files with 85 additions and 103 deletions.
diff --git a/Apps/frontend/cypress/e2e/1-everything-visible/visible.cy.js b/Apps/frontend/cypress/e2e/1-everything-visible/visible.cy.js
@@ -7,7 +7,7 @@ describe("everything visible on front page", () => {
   });
 
   it("layout visible", () => {
-    cy.get('[data-cy="layout"]').should("be.visible");
+    cy.get('[data-cy="oscilloscope"]').should("be.visible");
   });
 
   it("screen not landscaoe", () => {

diff --git a/Apps/frontend/cypress/e2e/4-control-panel-bottom/amplitude-slider.cy.js b/Apps/frontend/cypress/e2e/4-control-panel-bottom/amplitude-slider.cy.js
@@ -9,14 +9,14 @@ describe("amplitudeSlider", () => {
     });
   });
 
-  it("changes value", () => {
+  it(`has label that displays reciprocal value "Infinity"`, () => {
     cy.get(`[data-cy="amplitudeSlider-0"]`).within(() => {
       cy.get('[type="range"]').invoke("val", 2).trigger("change");
       cy.get("span").should("have.text", "0.50");
     });
   });
 
-  it("changes value to 0", () => {
+  it(`has label that displays reciprocal value "Infinity" for value 0`, () => {
     cy.get(`[data-cy="amplitudeSlider-1"]`).within(() => {
       cy.get('[type="range"]').invoke("val", 0).trigger("change");
       cy.get("span").should("have.text", "Infinity");

diff --git a/...control-panel-top/start-stop-switch.cy.js → ...trol-panel-bottom/start-stop-switch.cy.js b/...control-panel-top/start-stop-switch.cy.js → ...trol-panel-bottom/start-stop-switch.cy.js
@@ -11,14 +11,6 @@ describe("startStopSwitch", () => {
     });
   });
 
-  it("has labels", () => {
-    Cypress._.times(10, (i) => {
-      cy.get(`[data-cy="startStopSwitch-${i}"]`).within(() => {
-        cy.get("small").should("have.text", `Ch. ${i}`);
-      });
-    });
-  });
-
   it("is toggleable", () => {
     cy.get(`[data-cy="startStopSwitch-0"]`).within(() => {
       cy.get('[role="switch"]').should("have.attr", "aria-checked", "true");

diff --git a/Apps/frontend/src/App.svelte b/Apps/frontend/src/App.svelte
@@ -1,15 +1,14 @@
 <script>
-  import Layout from "./views/Layout.svelte";
+  import Layout from "./views/Oscilloscope.svelte";
 </script>
 
-
 <svelte:head>
   <link
     rel="stylesheet"
     href="https://fonts.googleapis.com/icon?family=Material+Icons"
   />
   <link rel="stylesheet" href="node_modules/svelte-material-ui/bare.css" />
 </svelte:head>
-<main data-cy="layout">
+<main data-cy="oscilloscope">
   <Layout />
 </main>
diff --git a/Apps/frontend/src/app.scss b/Apps/frontend/src/app.scss
@@ -1,7 +1,7 @@
 :root {
   font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
-  font-size: 16px;
-  line-height: 24px;
+  font-size: min(1em, 2vw);
+  line-height: min(1.6em, 2vw);
   font-weight: 400;
 
   color-scheme: light dark;
@@ -19,6 +19,7 @@ body {
   margin: 0;
   min-width: 320px;
   min-height: 100vh;
+  overflow: hidden;
 }
 
 #app {
@@ -35,24 +36,30 @@ canvas {
 img {
   width: 92%;
   height: 92%;
-  padding: 1em;
-  max-height: 3.6em;
 }
 
 input[type="range"] {
   width: 40%;
   appearance: none;
   -webkit-appearance: none;
-  height: .4em;
+  height: 0.2em;
+
+  &::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    height: calc(0.5vmax + 0.5em);
+    width: calc(0.5vmax + 0.5em);
+    border-radius: 100%;
+    background: #efefef;
+    cursor: pointer;
+  }
 }
 
 nav {
   position: fixed;
   bottom: 0;
   right: 0;
-  padding: 0 1%;
   width: 100%;
-  height: 20em;
+  height: calc(14vmax + 8em);
   box-shadow: 0 0 2em rgba(80, 80, 80, 1);
   background-color: #242424;
   z-index: 3;
@@ -75,17 +82,24 @@ nav {
 
 .wrapper {
   display: grid;
-  grid-template-columns: 8% 14% 56vw 14% 8%;
-  grid-template-rows: 4em 28vw 1fr;
-  height: 100vh;
+  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%;
-  overflow: hidden;
+  height: 100%;
+  overflow: auto;
 }
 
 .logo {
   grid-column: 1;
   grid-row: 1;
-  align-self: center;
 }
 
 .indicators {
@@ -102,6 +116,11 @@ nav {
   &--coordinate-system {
     position: absolute;
     inset: 0;
+
+    & > canvas {
+      border: 0.1vw solid #efefef;
+      background-color: black;
+    }
   }
 
   &--waves {
@@ -118,15 +137,6 @@ nav {
       display: flex;
       align-self: center;
       justify-content: space-evenly;
-      font-size: small;
-    }
-
-    &_waves {
-      grid-column: 3/6;
-      grid-row: 1;
-      align-self: center;
-      justify-content: space-around;
-      display: flex;
     }
   }
 
@@ -138,16 +148,20 @@ nav {
   &--bottom {
     grid-column: 1/6;
     grid-row: 3;
-    padding: .5% 0;
+    padding: 0.5% 0;
 
-    &_thickness {
+    &_switch {
       width: 28px;
+      height: 16px;
       margin: 0 auto;
     }
 
     &_expand-accordion {
       width: 100%;
       padding: 1vh 0;
+      display: flex;
+      justify-content: center;
+      align-content: center;
       background: none;
       border: none;
 
@@ -158,26 +172,26 @@ nav {
 
       & > button {
         &:hover {
-          background-color: rgba(0, 0, 0, 0.0) !important;
+          background-color: rgba(0, 0, 0, 0) !important;
         }
       }
     }
 
     & > table {
       width: 100%;
       text-align: center;
-      font-size: small;
       border-collapse: collapse;
+      table-layout: fixed;
 
       & > th {
         vertical-align: middle;
         font-weight: normal;
-        border-bottom: 0.2em solid rgba(127, 127, 127, 0.1);
       }
 
       & > * {
         padding: 0;
         margin: 0;
+        width: auto;
 
         & > * {
           padding: 0;
@@ -197,19 +211,16 @@ nav {
 .icon-button {
   border-radius: 100%;
   border: 0;
-  padding: 1em;
+  padding: 1.6vmax;
   cursor: pointer;
   filter: invert(1);
-  min-width: 40px;
-  min-height: 40px;
   background-color: transparent;
   background-position: center;
   background-repeat: no-repeat;
   background-size: 64%;
 
   &--small {
-    min-width: 32px;
-    min-height: 32px;
+    padding: 2vmax !important;
   }
 
   &:hover {

diff --git a/Apps/frontend/src/components/ResetButton.svelte b/Apps/frontend/src/components/ResetButton.svelte
@@ -9,4 +9,8 @@
   };
 </script>
 
-<button class="icon-button mui-icon--reset" on:click={handleClick} data-cy="reset-button" />
+<button
+  class="icon-button mui-icon--reset"
+  on:click={handleClick}
+  data-cy="reset-button"
+/>
diff --git a/Apps/frontend/src/components/StartStopButton.svelte b/Apps/frontend/src/components/StartStopButton.svelte
@@ -8,16 +8,14 @@
 
   let hasStarted = true;
   let color = LINE_COLORS_RGBA[channel];
-  let channelLabel = `Ch. ${channel}`;
 
   const handleStartStop = async () => {
     hasStarted = !hasStarted;
     dispatch("startStop", { buttonValue: hasStarted });
   };
 </script>
 
-<div data-cy="startStopSwitch-{channel}">
-  <small>{channelLabel}</small>
+<div class="control-panel--bottom_switch" data-cy="startStopSwitch-{channel}">
   <Switch
     hideLabel
     small

diff --git a/Apps/frontend/src/components/ThicknessSwitch.svelte b/Apps/frontend/src/components/ThicknessSwitch.svelte
@@ -14,10 +14,7 @@
   let isThick = false;
 </script>
 
-<div
-  class="control-panel--bottom_thickness"
-  data-cy="thicknessSwitch-{channel}"
->
+<div class="control-panel--bottom_switch" data-cy="thicknessSwitch-{channel}">
   <Switch
     hideLabel
     small

diff --git a/Apps/frontend/src/components/Waves.svelte b/Apps/frontend/src/components/Waves.svelte
@@ -93,8 +93,10 @@
       xLast[channelIndex] = xNew;
 
       // time sweep (https://github.com/amosproj/amos2022ws03-software-oscilloscope/wiki/Development-Documentation#time-sweep-calculation)
-      let sweep = $timeSweep[channelIndex] / 5.0 - 1.0;// in [-1,1]
-      let delta = DEFAULT_STEP_SIZE * (1.0 + sweep * (sweep >= 0.0 ? MAX_SWEEP - 1.0 : 1.0 - MIN_SWEEP));
+      let sweep = $timeSweep[channelIndex] / 5.0 - 1.0; // in [-1,1]
+      let delta =
+        DEFAULT_STEP_SIZE *
+        (1.0 + sweep * (sweep >= 0.0 ? MAX_SWEEP - 1.0 : 1.0 - MIN_SWEEP));
 
       xArr[channelIndex] = xCurr + delta;
       while (xArr[channelIndex] >= CANVAS_WIDTH) {

diff --git a/Apps/frontend/src/const.js b/Apps/frontend/src/const.js
@@ -9,7 +9,7 @@ export const INDICATOR_MARGIN = 4;
 export const INDICATOR_WIDTH = 8;
 export const INDICATOR_FONT_SIZE = 11;
 export const INDICATOR_DECIMAL_PLACES = 3;
-export const INDICATOR_SECTION_WIDTH = 200;
+export const INDICATOR_SECTION_WIDTH = 240;
 export const INDICATOR_ZERO_LINE_COLOR = "#000000";
 
 export const COORDINATE_LINE_COLOR = "#FFFFFF80";
@@ -40,3 +40,5 @@ 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 MIN_CONTROL_PANEL_BOTTOM_HEIGHT = 280; //px
diff --git a/Apps/frontend/src/views/ControlPanelBottom.svelte b/Apps/frontend/src/views/ControlPanelBottom.svelte
@@ -1,30 +1,34 @@
 <script>
   import Slider from "../components/Slider.svelte";
+  import StartStopButton from "../components/StartStopButton.svelte";
   import ThicknessSwitch from "../components/ThicknessSwitch.svelte";
   import TimeSweepSlider from "../components/TimeSweepSlider.svelte";
   import {
     MAX_AMPLITUDE,
     MAX_SWEEP_SLIDER_VALUE,
     MIN_AMPLITUDE,
+    MIN_CONTROL_PANEL_BOTTOM_HEIGHT,
     MIN_SWEEP_SLIDER_VALUE,
     NUM_CHANNELS,
   } from "../const";
   import { expandedPanelOpen, timeSweep } from "../stores";
 
   export let waveElement;
   export let indicatorElement;
+  export let controlPanelBottomHeight = 0;
 </script>
 
 <table>
   <th>
-    {#if $expandedPanelOpen}
+    {#if $expandedPanelOpen && controlPanelBottomHeight <= MIN_CONTROL_PANEL_BOTTOM_HEIGHT}
       <button
         class="icon-button icon-button--small mui-icon--close"
         on:click={() => ($expandedPanelOpen = false)}
         data-cy="expanded-control-panel-close-button"
       />
     {/if}
   </th>
+  <th>Start/Stop</th>
   <th>Thickness</th>
   <th>Offset</th>
   <th>Time Sweep</th>
@@ -33,6 +37,7 @@
     <td> Common </td>
     <td><!--Placeholder--></td>
     <td><!--Placeholder--></td>
+    <td><!--Placeholder--></td>
     <td>
       <TimeSweepSlider channel={NUM_CHANNELS + 1} isCommon={true} />
     </td>
@@ -41,6 +46,16 @@
   {#each { length: NUM_CHANNELS } as _, index}
     <tr>
       <td>Ch. {index}</td>
+      <td>
+        <StartStopButton
+          channel={index}
+          on:startStop={async (event) => {
+            let hasStarted = event.detail.buttonValue;
+            waveElement.startStopChannelI(index, hasStarted);
+            indicatorElement.startStopChannelI(index, hasStarted);
+          }}
+        />
+      </td>
       <td>
         <ThicknessSwitch
           channel={index}

diff --git a/Apps/frontend/src/views/CoordinateSystem.svelte b/Apps/frontend/src/views/CoordinateSystem.svelte
@@ -58,10 +58,3 @@
 </script>
 
 <canvas bind:this={canvasElement} />
-
-<style>
-  canvas {
-    border: 1px solid white;
-    background-color: black;
-  }
-</style>