Merge pull request #143 from amosproj/int

sprint-08-release

.github/workflows/push-backend-automation.yml

@@ -66,22 +66,22 @@ jobs:
         name: Invoke deployment hook
         uses: distributhor/workflow-webhook@v2
         env:
-          webhook_url: ${{ secrets.WEBHOOK_URL_DEV }}?SERVICE_TAG=nightly
+          webhook_url: ${{ secrets.WEBHOOK_URL_DEV }}?VERSION_TAG=nightly
           webhook_secret: "none"
           verbose: true
       - 
         if: github.event.pull_request.base.ref == 'int'
         name: Invoke deployment hook
         uses: distributhor/workflow-webhook@v2
         env:
-          webhook_url: ${{ secrets.WEBHOOK_URL_INT }}?SERVICE_TAG=${{ github.event.pull_request.title }}
+          webhook_url: ${{ secrets.WEBHOOK_URL_INT }}?VERSION_TAG=${{ github.event.pull_request.title }}
           webhook_secret: "none"
           verbose: true
       - 
         if: github.event.pull_request.base.ref == 'main'
         name: Invoke deployment hook
         uses: distributhor/workflow-webhook@v2
         env:
-          webhook_url: ${{ secrets.WEBHOOK_URL_PROD }}?SERVICE_TAG=${{ github.event.pull_request.title }}
+          webhook_url: ${{ secrets.WEBHOOK_URL_PROD }}?VERSION_TAG=${{ github.event.pull_request.title }}
           webhook_secret: "none"
           verbose: true

.github/workflows/push-frontend-automation.yml

@@ -72,22 +72,22 @@ jobs:
         name: Invoke deployment hook
         uses: distributhor/workflow-webhook@v2
         env:
-          webhook_url: ${{ secrets.WEBHOOK_URL_DEV }}?SERVICE_TAG=nightly
+          webhook_url: ${{ secrets.WEBHOOK_URL_DEV }}?VERSION_TAG=nightly
           webhook_secret: "none"
           verbose: true
       - 
         if: github.event.pull_request.base.ref == 'int'
         name: Invoke deployment hook
         uses: distributhor/workflow-webhook@v2
         env:
-          webhook_url: ${{ secrets.WEBHOOK_URL_INT }}?SERVICE_TAG=${{ github.event.pull_request.title }}
+          webhook_url: ${{ secrets.WEBHOOK_URL_INT }}?VERSION_TAG=${{ github.event.pull_request.title }}
           webhook_secret: "none"
           verbose: true
       - 
         if: github.event.pull_request.base.ref == 'main'
         name: Invoke deployment hook
         uses: distributhor/workflow-webhook@v2
         env:
-          webhook_url: ${{ secrets.WEBHOOK_URL_PROD }}?SERVICE_TAG=${{ github.event.pull_request.title }}
+          webhook_url: ${{ secrets.WEBHOOK_URL_PROD }}?VERSION_TAG=${{ github.event.pull_request.title }}
           webhook_secret: "none"
           verbose: true

.github/workflows/push-generator-automation.yml

@@ -66,22 +66,22 @@ jobs:
         name: Invoke deployment hook
         uses: distributhor/workflow-webhook@v2
         env:
-          webhook_url: ${{ secrets.WEBHOOK_URL_DEV }}?SERVICE_TAG=nightly
+          webhook_url: ${{ secrets.WEBHOOK_URL_DEV }}?VERSION_TAG=nightly
           webhook_secret: "none"
           verbose: true
       - 
         if: github.event.pull_request.base.ref == 'int'
         name: Invoke deployment hook
         uses: distributhor/workflow-webhook@v2
         env:
-          webhook_url: ${{ secrets.WEBHOOK_URL_INT }}?SERVICE_TAG=${{ github.event.pull_request.title }}
+          webhook_url: ${{ secrets.WEBHOOK_URL_INT }}?VERSION_TAG=${{ github.event.pull_request.title }}
           webhook_secret: "none"
           verbose: true
       - 
         if: github.event.pull_request.base.ref == 'main'
         name: Invoke deployment hook
         uses: distributhor/workflow-webhook@v2
         env:
-          webhook_url: ${{ secrets.WEBHOOK_URL_PROD }}?SERVICE_TAG=${{ github.event.pull_request.title }}
+          webhook_url: ${{ secrets.WEBHOOK_URL_PROD }}?VERSION_TAG=${{ github.event.pull_request.title }}
           webhook_secret: "none"
           verbose: true

Apps/backend/src/main.js

@@ -1,5 +1,5 @@
 import dgram from "node:dgram";
-import WebSocket, {WebSocketServer} from 'ws';
+import { WebSocketServer } from 'ws';
 
 const server = dgram.createSocket("udp4");
 const socket = new WebSocketServer({
@@ -8,37 +8,97 @@ const socket = new WebSocketServer({
 }, () => {
   console.log("WebSocket Server started on 0.0.0.0:9000")
 });
+/** Frontend client (WebSocket Connection) */
 let client = undefined;
+/** Received packages from generator */
+let packageCounter = 0
+/** Sent packages to frontend */
+let packageCounterWS = 0
+
+let chunkCounter = 0
+/** Array which will be send to frontend */
+let sendArray = []
 
 socket.on('connection', (clientSocket) => {
   client = clientSocket
   client.send("connection established")
+  console.log(`Connection established remote=`)
 });
 
 server.on("error", (err) => {
   console.log(`Server error:\n${err.stack}`);
   server.close(package_recieved);
 });
 
+/**
+ * Receive incoming UDP packages and handle them
+ * @param {Float64Array} msg.bufffer
+ */
 server.on("message", (msg, rinfo) => {
   let samples = new Float64Array(msg.buffer);
+  packageCounter += 1
 
-  if (client !== undefined && client !== null) {
-    client.send(samples)
-  }
+  handle(samples, 200)
 });
 
 server.on("listening", () => {
   const address = server.address();
   console.log(`Server listening on ${address.address}:${address.port}`);
+  setupPpsCalculator()
 });
 
 server.bind(
   process.env.HOST_PORT || "34255",
   process.env.HOST_ADDRESS || "0.0.0.0"
 );
 
-socket.onopen = function(e) {
-  alert("[open] Connection established");
-  alert("Sending to server");
-};
+/**
+ * Set the interval for tracking the received PPS
+ */
+function setupPpsCalculator() {
+  setInterval(function () { calculatePackagesPerSecond() }, 1000);
+}
+
+socket.onopen = function (e) {
+  console.log("[open] Connection established");
+  console.log("Sending to server");
+};
+
+/**
+ * Calculates the packages per second received on the UDP socket
+ */
+function calculatePackagesPerSecond() {
+  console.log("Current rcv PPS: " + packageCounter + " | Current sending PPS: " + packageCounterWS)
+  packageCounter = 0;
+  packageCounterWS = 0;
+}
+
+/**
+ * Handle incoming UDP datagrams.
+ * 
+ * 1000 packages * 10 channel * 64 bit/value = 79 kB
+ * PPS of 10 = 790 kB/s network traffic towards frontend
+ * 
+ * UDP datagrams are packaged to a size of <maxNumberOfChunks> and sent to the connected clients on the web socket
+ * We use a normal JS array as temporary buffer to support push operations and a Float64Buffer for sending
+ * @param {Float64Array} data
+ * @param {number} maxNumberOfChunks 
+ */
+function handle(data, maxNumberOfChunks) {
+  if (chunkCounter === maxNumberOfChunks) {
+    packageCounterWS += 1
+
+    let pkg = new Float64Array(sendArray)
+
+    if (client !== undefined && client !== null) {
+      client.send(pkg)
+    }
+    // Reset chunk stats
+    sendArray = []
+    chunkCounter = 0
+  }
+  else {
+    sendArray.push(...data)
+    chunkCounter += 1
+  }
+}

Apps/docker-compose.yml

@@ -11,7 +11,7 @@ services:
     environment:
       - HOST=0.0.0.0:34254
       - TARGET=backend:34255
-      - PPS=100.0
+      - PPS=100000.0
       - SIG_FREQ=1.0
     ports:
       - 34254:34254
@@ -31,7 +31,6 @@ services:
     restart: unless-stopped
     ports:
       - 5000:80
-      - 9001:9000
     networks:
       - internal
       - web

Apps/frontend/Dockerfile

@@ -16,7 +16,7 @@ RUN npm install
 COPY . ./
 
 # Expose vite port to host machine
-RUN npm run build --
+RUN npm run build -- --mode ${MODE}
 
 # Use nginx for serving build
 FROM nginx:1.19-alpine

Apps/frontend/cypress/e2e/3-slider/amplitude.cy.js

@@ -10,11 +10,16 @@ describe("amplitudeSlider", () => {
   });
 
   it("change value", () => {
-    cy.get(":nth-child(1) > #btn-on-off").click();
-    cy.wait(2000);
-    cy.get('[data-cy="amplitudeSlider-0"]').invoke("val", 2).trigger("change");
-    cy.get('[data-cy="amplitudeSlider-1"]')
-      .invoke("val", 0.5)
-      .trigger("change");
+    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("change value to 0", () => {
+    cy.get(`[data-cy="amplitudeSlider-1"]`).within(() => {
+      cy.get('[type="range"]').invoke("val", 0).trigger("change");
+      cy.get("span").should("have.text", "Infinity");
+    });
   });
 });

Apps/frontend/cypress/e2e/3-slider/timesweep.cy.js

@@ -0,0 +1,20 @@
+describe("timesweepSlider", () => {
+  beforeEach(() => {
+    cy.visit("http://localhost:5173/");
+  });
+
+  it("is visible", () => {
+    Cypress._.times(10, (i) => {
+      cy.get('[data-cy="timesweepSlider-' + i + '"]').should("be.visible");
+    });
+  });
+
+  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");
+  });
+});

Apps/frontend/src/app.css

@@ -77,3 +77,12 @@ button:focus-visible {
   max-width: 80vw;
   max-height: 80vh;
 }
+
+.control-panel-items {
+  display: flex;
+  align-content: space-around;
+}
+
+.control-panel-items > input {
+  height: 1.6rem;
+}

Apps/frontend/src/components/OffsetSlider.svelte

@@ -7,7 +7,7 @@
   let offsetY;
 </script>
 
-<div>
+<div class="control-panel-items">
   <input
     type="range"
     bind:value={offsetY}

Apps/frontend/src/components/ThicknessSwitch.svelte

@@ -29,7 +29,7 @@
 <style>
   .switch-wrapper {
     display: flex;
-    justify-content: center;
-    margin: 0.25rem;
+    justify-content: start;
+    margin: 0.56rem;
   }
 </style>

Apps/frontend/src/components/TimeSweepSlider.svelte

@@ -1,14 +1,25 @@
 <script>
   import { timeSweep } from "../stores";
+  import { NUM_CHANNELS } from "../const";
   export let channel;
+
+  export let isCommon = false;
+  const handleChange = () => {
+    if (isCommon) {
+      for (let index = 0; index < NUM_CHANNELS; index++) {
+        $timeSweep[index] = $timeSweep[channel];
+      }
+    }
+  };
 </script>
 
-<div>
+<div class="control-panel-items">
   <input
     type="range"
     min="0"
     max="10"
-    class="slider"
     bind:value={$timeSweep[channel]}
+    on:change={handleChange}
+    data-cy="timesweepSlider-{channel}"
   />
 </div>

Apps/frontend/src/components/Waves.svelte

@@ -34,6 +34,18 @@
   let xArr;
   let xLast;
 
+  const LOG_AFTER = 10000;
+  let bufferCounter;
+  let startTime;
+  const currentTime = () => {
+    return window.performance.now();
+  };
+  const resetLogVars = () => {
+    bufferCounter = 0;
+    startTime = currentTime();
+  };
+  resetLogVars();
+
   // ----- Svelte lifecycle hooks -----
   onMount(() => {
     resizeCanvas();
@@ -60,10 +72,10 @@
     webGLPlot.clear();
   };
 
-  export const updateBuffer = (samples) => {
+  export const updateBuffer = (samples, startIndex, endIndex) => {
     for (
-      let channelIndex = 0;
-      channelIndex < channelSamples.length;
+      let channelIndex = startIndex;
+      channelIndex < endIndex;
       channelIndex++
     ) {
       if (!startStopLine[channelIndex]) {
@@ -88,6 +100,18 @@
         xArr[channelIndex] -= CANVAS_WIDTH;
       }
     }
+
+    bufferCounter++;
+    if (bufferCounter >= LOG_AFTER) {
+      console.log(
+        "Updated " +
+          LOG_AFTER +
+          " times in " +
+          (currentTime() - startTime) +
+          " ms."
+      );
+      resetLogVars();
+    }
   };
 
   // Sets the scaling of a individual wave according to the voltage intervals

Apps/frontend/src/const.js

@@ -32,7 +32,7 @@ export const LINE_THICKNESS_SMALL = 0.002;
 export const LINE_THICKNESS_BIG = 0.008;
 
 export const NUM_CHANNELS = 10;
-export const MIN_SWEEP = 0.5; // <= 1
+export const MIN_SWEEP = 0.1; // <= 1
 export const MAX_SWEEP = 2.0; // >= 1
 export const MIN_AMPLITUDE = 0.0;
 export const MAX_AMPLITUDE = NUM_INTERVALS_HORIZONTAL / 2;

Apps/frontend/src/stores.js

@@ -3,7 +3,7 @@ import { NUM_CHANNELS } from "./const";
 
 export const osciData = writable([]);
 
-export const timeSweep = writable(new Array(NUM_CHANNELS).fill(5));
+export const timeSweep = writable(new Array(NUM_CHANNELS + 1).fill(5));
 
 // store for the amplification factors of each channel
 export const amplitudeAdjustment = writable(new Array(NUM_CHANNELS).fill(1));