Add website

Signed-off-by: Severin Kaderli <severin@kaderli.dev>
2022-11-21 19:29:55 +01:00 · 2022-11-21 19:29:55 +01:00 · f38c4239b2
commit f38c4239b2
parent db99961a62
8 changed files with 433 additions and 0 deletions
--- a/src/website/index.html
+++ b/src/website/index.html
@ -0,0 +1,153 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+    <link href="./styles/main.css" rel="stylesheet" />
+  </head>
+
+  <body>
+    <main>
+      <input required minlength="1" maxlength="16" id="textInput" type="text" placeholder="Enter text..." />
+      <p id="message"></p>
+      <div class="buttons">
+        <button id="start-sending-button" id="start-sending-button">Start Sending</button>
+        <button class="hide" id="stop-sending-button">Stop Sending</button>
+        <button id="start-calibration-button">Start Calibration</button>
+        <button class="hide" id="stop-calibration-button">Stop Calibration</button>
+      </div>
+      <p id="log"></p>
+    </main>
+    <script src="./scripts/Constants.js"></script>
+    <script src="./scripts/Utility.js"></script>
+    <script src="./scripts/Packet.js"></script>
+    <script>
+      const hideClass = "hide";
+      let isSending = false;
+      let workers = [];
+
+      const textInput = document.getElementById("textInput");
+      const startSendingButton = document.getElementById("start-sending-button");
+      const stopSendingButton = document.getElementById("stop-sending-button");
+      const startCalibrationButton = document.getElementById("start-calibration-button");
+      const stopCalibrationButton = document.getElementById("stop-calibration-button");
+      const message = document.getElementById("message");
+      startCalibrationButton.addEventListener("click", startCalibration);
+      stopCalibrationButton.addEventListener("click", stopCalibration);
+      startSendingButton.addEventListener("click", startSending);
+      stopSendingButton.addEventListener("click", stopSending);
+
+      function getWebWorker() {
+        return new Worker("./scripts/Worker.js");
+      }
+
+      function setMessage(text) {
+        message.textContent = text;
+      }
+
+      function startWorkers() {
+        for (let i = 0; i < 8; i++) {
+          workers.push(getWebWorker());
+        }
+      }
+
+      function stopWorkers() {
+        for (const worker of workers) {
+          worker.terminate();
+        }
+
+        workers = [];
+      }
+
+      function startCalibration() {
+        Utility.log("Starting calibration");
+
+        startCalibrationButton.classList.add(hideClass);
+        stopCalibrationButton.classList.remove(hideClass);
+        setMessage("Calibration currently ongoing.");
+
+        startWorkers();
+      }
+
+      function stopCalibration() {
+        Utility.log("Stopping calibration");
+
+        stopCalibrationButton.classList.add(hideClass);
+        startCalibrationButton.classList.remove(hideClass);
+        setMessage("");
+
+        stopWorkers();
+      }
+
+      function startSending() {
+        startSendingButton.classList.add(hideClass);
+        stopSendingButton.classList.remove(hideClass);
+        setMessage(`Sending message: ${textInput.value}`);
+        Utility.log(`Start sending message: ${textInput.value}`);
+
+        const packet = new Packet(textInput.value);
+        const signal = Utility.manchesterEncode(packet.getData());
+
+        isSending = true;
+        transmitSignal(signal);
+      }
+
+      function stopSending() {
+        Utility.log("Stop Sending");
+        setMessage("");
+
+        stopSendingButton.classList.add(hideClass);
+        startSendingButton.classList.remove(hideClass);
+        isSending = false;
+      }
+
+      /**
+       * Transmit the given bit array until the sending is stopped.
+       *
+       * @param {Number[]} signal
+       */
+      async function transmitSignal(signal) {
+        while (isSending) {
+          // Send the preamble
+          for (const bit of PREAMBLE) {
+            if (!isSending) {
+              stopWorkers();
+              return;
+            }
+
+            Utility.log(`Sending preamble: ${bit}`);
+            await transmitBit(bit);
+          }
+
+          for (let i = 0; i < signal.length; i++) {
+            if (!isSending) {
+              stopWorkers();
+              return;
+            }
+
+            Utility.log(`Sending bit ${i + 1} of ${signal.length} of packet: ${signal[i]}`);
+            await transmitBit(signal[i]);
+          }
+        }
+      }
+
+      /**
+       * This either starts or stops the web workers depending on the bit value
+       * and then waits for a duration of CLOCK_TIME.
+       *
+       * @param {Number} bit
+       */
+      function transmitBit(bit) {
+        if (bit === 1) {
+          startWorkers();
+          return new Promise((resolve) => setTimeout(resolve, CLOCK_TIME));
+        }
+
+        stopWorkers();
+        return new Promise((resolve) => setTimeout(resolve, CLOCK_TIME));
+      }
+    </script>
+  </body>
+</html>