Merge pull request #142 from amosproj/dev

sprint-08-release-candidate

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 -- --mode  ${MODE}
+RUN npm run build -- --mode ${MODE}
 
 # Use nginx for serving build
 FROM nginx:1.19-alpine

Apps/frontend/src/components/TimeSweepSlider.svelte

@@ -2,17 +2,24 @@
   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++) {
+      for (let index = 0; index < NUM_CHANNELS; index++) {
         $timeSweep[index] = $timeSweep[channel];
       }
     }
-  }
+  };
 </script>
 
 <div class="control-panel-items">
-  <input type="range" min="0" max="10" bind:value={$timeSweep[channel]} on:change={handleChange} data-cy="timesweepSlider-{channel}"/>
+  <input
+    type="range"
+    min="0"
+    max="10"
+    bind:value={$timeSweep[channel]}
+    on:change={handleChange}
+    data-cy="timesweepSlider-{channel}"
+  />
 </div>

Apps/frontend/src/components/Waves.svelte

@@ -72,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]) {
@@ -103,7 +103,13 @@
 
     bufferCounter++;
     if (bufferCounter >= LOG_AFTER) {
-      console.log('Updated ' + LOG_AFTER + ' times in ' + (currentTime() - startTime) + ' ms.');
+      console.log(
+        "Updated " +
+          LOG_AFTER +
+          " times in " +
+          (currentTime() - startTime) +
+          " ms."
+      );
       resetLogVars();
     }
   };

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/views/Indicators.svelte

@@ -9,7 +9,7 @@
     INDICATOR_ZERO_LINE_COLOR,
     LINE_COLORS_RGBA,
     NUM_CHANNELS,
-    NUM_INTERVALS_HORIZONTAL
+    NUM_INTERVALS_HORIZONTAL,
   } from "../const";
   import { roundVoltage } from "../helper";
 
@@ -29,19 +29,42 @@
    *
    * @param {number[]} samples
    */
-  export const update = (samples) => {
+  export const update = (samples, startIndex) => {
     clearCanvas();
     drawGlobalZeroLine();
-    for (let channel = 0; channel < samples.length; channel++) {
+
+    for (let channel = 0; channel < NUM_CHANNELS; channel++) {
       if (startStopLine[channel]) {
-        updateCurrentMinMax(samples[channel], channel);
+        updateCurrentMinMax(samples[startIndex + channel], channel);
       }
-      const transformedCurrent = transformSampleToYCoord(current[channel], offsets[channel], scalings[channel]);
-      const transformedMin = transformSampleToYCoord(min[channel], offsets[channel], scalings[channel]);
-      const transformedMax = transformSampleToYCoord(max[channel], offsets[channel], scalings[channel]);
-      const transformedZero = transformSampleToYCoord(0, offsets[channel], scalings[channel]);
-      drawIndicator(channel, transformedCurrent, LINE_COLORS_RGBA[channel]);
-      drawMinMaxZeroLines(channel, transformedMin, transformedMax, transformedZero, LINE_COLORS_RGBA[channel]);
+      const transformedCurrent = transformSampleToYCoord(
+        current[channel],
+        offsets[channel],
+        scalings[channel]
+      );
+      const transformedMin = transformSampleToYCoord(
+        min[channel],
+        offsets[channel],
+        scalings[channel]
+      );
+      const transformedMax = transformSampleToYCoord(
+        max[channel],
+        offsets[channel],
+        scalings[channel]
+      );
+      const transformedZero = transformSampleToYCoord(
+        0,
+        offsets[channel],
+        scalings[channel]
+      );
+      //drawIndicator(channel, transformedCurrent, LINE_COLORS_RGBA[channel]);
+      drawMinMaxZeroLines(
+        channel,
+        transformedMin,
+        transformedMax,
+        transformedZero,
+        LINE_COLORS_RGBA[channel]
+      );
       writeText(channel, min[channel], max[channel]);
     }
   };