virtual-keypad 5.15.2 → 5.17.0

package/dist/receiver.html

@@ -64,6 +64,7 @@
         flex-direction: column;
         width: 30%;
         padding: 2rem;
+        overflow-y: auto;
       }
     </style>
   </head>
@@ -152,6 +153,7 @@
           changeAlphabetButton.style.display = "block";
           changeAlphabetButton.onclick = changeAlphabet;
 
+
           console.log("RECEIV Handshake complete");
         },
         () => console.log("RECEIV Connection connected"),

package/dist/server.js

@@ -2,22 +2,23 @@ const express = require("express");
 const path = require("path");
 const { v4: uuidv4 } = require("uuid");
 
-var app = (module.exports = express());
+var app = express();
 var server = "http://localhost:3000";
+const PORT = process.env.PORT || 3000;
 
 // I got an error with line below if I didnt' add the extended property
 // Don't actually know if this should be set to true or false.
 // app.use(express.urlencoded({ extended: true }));
 // app.use(express.json());
 
-// app.use(express.static(path.join(__dirname, 'dist')));
+app.use(express.static(__dirname));
 
 // Middleware to check we have all the params we need
 const checkParams = (req, res, next) => {
-  let noID = !req.query.hasOwnProperty('peerID');
-  if (noID) { 
-    console.log('No peerID given.');  // TODO Breaking! Serve error
-    throw "No peerID given -- unable to connect to peer."
+  let noID = !req.query.hasOwnProperty("peerID");
+  if (noID) {
+    console.log("No peerID given."); // TODO Breaking! Serve error
+    throw "No peerID given -- unable to connect to peer.";
     // req.query.peerID = uuidv4(); // TEMPorary and only usable to test keypadClient
   }
 
@@ -39,28 +40,29 @@ const checkParams = (req, res, next) => {
 
 // Link to the actual keypad
 // ie this is where the user will be sent (from the QR code) on their phone
-app.get('/keypad', checkParams, function (req, res) {
-  res.render(path.join(__dirname, 'keypad.html'));
+app.get("/keypad", checkParams, function (req, res) {
+  res.render(path.join(__dirname, "keypad.html"));
 });
-app.get('/receiver', function (req, res) {
-  res.render(path.join(__dirname, 'receiver.html'));
+app.get("/receiver", function (req, res) {
+  res.render(path.join(__dirname, "receiver.html"));
 });
 
 app.use(function (err, req, res, next) {
   res.status(err.status || 500);
   res.send({
-    error: err.message
+    error: err.message,
   });
 });
 
 app.use(function (req, res) {
   res.status(404);
   res.send({
-    error: "404 not found"
+    error: "404 not found",
   });
 });
 
 if (!module.parent) {
-  app.listen(3000);
-  console.log('Express started on port 3000');
+  app.listen(PORT, () => {
+    console.log(`Express started on port ${PORT}`);
+  });
 }

package/package.json

@@ -1,15 +1,16 @@
 {
   "name": "virtual-keypad",
-  "version": "5.15.2",
+  "version": "5.17.0",
   "description": "User response at a distance. Simple utility to summon forth a virtual keypad webapp.",
-  "main": "dist/main.js",
+  "main": "dist/server.js",
   "directories": {
     "example": "example",
     "bin": "dist"
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "start": "webpack serve --open --config webpack.dev.js",
+    "start": "node dist/server.js",
+    "dev": "webpack serve --open --config webpack.dev.js",
     "build": "webpack --config webpack.prod.js"
   },
   "keywords": [],
@@ -20,14 +21,21 @@
     "url": "https://github.com/EasyEyes/virtual-keypad"
   },
   "dependencies": {
+    "express": "^4.18.2",
     "peerjs": "^1.5.2",
     "qrcode": "^1.4.4",
     "uuid": "^8.3.2"
   },
   "devDependencies": {
+    "@babel/core": "^7.26.10",
+    "@babel/preset-env": "^7.26.9",
+    "babel-loader": "^10.0.0",
+    "core-js": "^3.41.0",
     "css-loader": "^5.2.6",
     "file-loader": "^6.2.0",
+    "jsdom": "^28.1.0",
     "style-loader": "^2.0.0",
+    "vitest": "^4.0.18",
     "webpack": "^5.40.0",
     "webpack-cli": "^4.7.2",
     "webpack-dev-server": "^4.13.2",

package/src/ExperimentPeer.js

@@ -0,0 +1,270 @@
+const doNothing = () => undefined;
+export class ExperimentPeer {
+  constructor(
+    keypadParameters,
+    onDataCallback = doNothing,
+    handshakeCallback = doNothing,
+    customConnectionCallback = doNothing,
+    customCloseCallback = doNothing,
+    customErrorCallback = doNothing,
+    connectionManager = null
+  ) {
+    keypadParameters = this.verifyKeypadParameters(keypadParameters);
+    this.alphabet = this.checkAlphabet(keypadParameters.alphabet);
+    this.font = keypadParameters.font;
+    this.controlButtons = keypadParameters.controlButtons;
+    this.onErrorReconnectMessage =
+      keypadParameters.onErrorReconnectMessage ??
+      "Connection lost. Please reconnect...";
+    this.targetElementId = keypadParameters.targetElementId;
+    this.onData = onDataCallback;
+    this.onHandshake = () => {
+      handshakeCallback();
+      //   this._setupHeartBeatIntervals();
+    };
+    this.connectionManager = connectionManager;
+    this.name = "keypad";
+    this.lastHeartbeat = performance.now();
+    this.heartBeatInterval = undefined;
+    this.heartCheckInterval = undefined;
+  }
+
+  verifyKeypadParameters(keypadParameters) {
+    if (!keypadParameters.hasOwnProperty("alphabet")) {
+      console.error(
+        "Must provide 'alphabet' parameter to Receiver object. Defaulting to 'CDHKNORSVZ'"
+      );
+      keypadParameters["alphabet"] = "CDHKNORSVZ".split("");
+    } else {
+      keypadParameters["alphabet"] = this.checkAlphabet(
+        keypadParameters.alphabet
+      );
+    }
+    if (!keypadParameters.hasOwnProperty("font")) {
+      console.error(
+        "Must provide 'font' parameter to Receiver object. Defaulting to 'Arial'"
+      );
+      keypadParameters["alphabet"] = "Arial";
+    } else {
+      // FUTURE verify that the selected font is available
+      // TODO necessary to check control buttons?
+    }
+    return keypadParameters;
+  }
+  checkAlphabet = (proposedAlphabet) => {
+    let validAlphabet;
+    if (Array.isArray(proposedAlphabet)) {
+      // ARRAY : good
+      // FUTURE verify that symbols are displayable in desired font
+      validAlphabet = proposedAlphabet;
+    } else if (typeof proposedAlphabet == "string") {
+      // STRING : ok
+      if (
+        proposedAlphabet.toUpperCase() === "SPACE" ||
+        proposedAlphabet.toUpperCase() == "RETURN"
+      ) {
+        validAlphabet = [proposedAlphabet];
+      } else {
+        validAlphabet = proposedAlphabet.split("");
+      }
+    } else {
+      // SOMETHING ELSE : bad
+      console.error(
+        "Error! Alphabet must be specified as an array of symbols, including 'RETURN', 'SPACE'"
+      );
+      validAlphabet = [];
+    }
+    // Return unique elements, see: https://stackoverflow.com/questions/11246758/how-to-get-unique-values-in-an-array
+    const uniqueValidAlphabet = [...new Set(validAlphabet)];
+
+    // Order alphabet so that if 'SPACE' and 'RETURN' are in the list, they are correctly positioned
+    if ("SPACE" in uniqueValidAlphabet) {
+      uniqueValidAlphabet = moveElementToEndOfArray(
+        uniqueValidAlphabet,
+        "SPACE"
+      );
+    }
+    if ("RETURN" in uniqueValidAlphabet) {
+      uniqueValidAlphabet = moveElementToEndOfArray(
+        uniqueValidAlphabet,
+        "RETURN"
+      );
+    }
+    return uniqueValidAlphabet;
+  };
+  _setupHeartBeatIntervals = () => {
+    this.heartBeatInterval = setInterval(
+      () =>
+        this.connectionManager?.send({ message: "Heartbeat", type: this.name }),
+      this.heartbeatIntervalMs
+    );
+
+    this.heartCheckInterval = setInterval(() => {
+      const timeSinceHeartbeatMs = performance.now() - this.lastHeartbeat;
+      if (timeSinceHeartbeatMs > this.ttd) {
+        console.log("Closing connection due to lack of heartbeat.");
+        this.connectionManager?.close();
+        this.connectionManager = undefined;
+        clearInterval(this.heartBeatInterval);
+        clearInterval(this.heartCheckInterval);
+        this.heartBeatInterval = undefined;
+        this.heartCheckInterval = undefined;
+      }
+    }, this.ttd);
+  };
+
+  update = (
+    alphabet = undefined,
+    font = undefined,
+    controlButtons = undefined
+  ) => {
+    // Update alphabet
+    if (typeof alphabet !== "undefined") {
+      const validAlphabet = this.checkAlphabet(alphabet);
+      if (String(this.alphabet) !== String(validAlphabet))
+        this.displayUpdate("New alphabet: " + String(validAlphabet), true); // DEBUG
+      this.alphabet = validAlphabet; // Store new alphabet
+    }
+
+    // Update font
+    // TODO check if the font is supported, somehow
+    this.font = font ?? this.font; // Store new font
+
+    this.controlButtons = controlButtons ?? this.controlButtons;
+
+    // Update keypad
+    try {
+      this.connectionManager?.send({
+        type: this.name,
+        message: "Update",
+        alphabet: this.alphabet,
+        font: this.font,
+        peerID: this.connectionManager?.peer.id,
+        controlButtons: this.controlButtons,
+      });
+    } catch (e) {
+      this.displayUpdate(
+        `Error updating! Alphabet: ${String(this.alphabet)}, font: ${
+          this.font
+        }`,
+        e
+      ); // DEBUG
+      console.error(e);
+    }
+  };
+
+  disableKeys = (whichKeys = undefined) => {
+    const message = {
+      message: "Disable",
+      type: this.name,
+    };
+    if (whichKeys) message.keys = whichKeys;
+    try {
+      this.connectionManager?.send(message);
+    } catch (e) {
+      this.displayUpdate(`Error disabling keys. Keys: ${whichKeys}`);
+      console.error(e);
+    }
+  };
+
+  enableKeys = (whichKeys = undefined) => {
+    const message = {
+      message: "Enable",
+      type: this.name,
+    };
+    if (whichKeys) message.keys = whichKeys;
+    try {
+      this.connectionManager?.send(message);
+    } catch (e) {
+      this.displayUpdate(`Error enabling keys. Keys: ${whichKeys}`);
+      console.error(e);
+    }
+  };
+
+  updateDisplayMessage = (message) => {
+    try {
+      this.connectionManager?.send({
+        type: this.name,
+        message: "UpdateHeader",
+        headerContent: message,
+      });
+    } catch (e) {
+      this.displayUpdate("Error in updating message!"); // DEBUG
+      console.error(e);
+    }
+  };
+  updateFooterMessage = (message) => {
+    try {
+      this.connectionManager?.send({
+        type: this.name,
+        message: "UpdateFooter",
+        headerContent: message,
+      });
+    } catch (e) {
+      this.displayUpdate("Error in updating footer message."); // Debug
+      console.error(e);
+    }
+  };
+
+  onMessage = (data) => {
+    if (!data || !data.message) return;
+    switch (data.message) {
+      case "Handshake":
+        this.connectionManager?.send({
+          type: this.name,
+          message: "KeypadParameters",
+          alphabet: this.alphabet,
+          controlButtons: this.controlButtons,
+          font: this.font,
+          onErrorReconnectMessage: this.onErrorReconnectMessage,
+        });
+        this.onHandshake();
+        break;
+      case "Keypress":
+        this.onData(data);
+        break;
+      // TODO factor out into keypadPeer
+      case "Heartbeat":
+        this.lastHeartbeat = performance.now();
+        break;
+      case "HeartRate":
+        this.heartbeatIntervalMs = data.heartbeatIntervalMs;
+        break;
+      default:
+        console.log("Message type: ", data.message);
+    }
+  };
+
+  displayUpdate = (message, append = false) => {
+    // If the specified elem exists, update that elem
+    if (!!document.getElementById(this.targetElement)) {
+      const displayElement = document.getElementById(this.targetElement);
+      if (append) {
+        const oldInnerText = displayElement.innerText;
+        displayElement.innerText = message + "\n" + oldInnerText;
+      } else {
+        displayElement.innerText = message;
+      }
+    } else {
+      console.log("MESSAGE: ", message);
+    }
+  };
+
+  initializeKeypad = () => {
+    console.log("Initializing keypad");
+    this._setupHeartBeatIntervals();
+    //send message to receiver to initialize keypad
+    this.connectionManager?.send({
+      message: "InitializeKeypad",
+      type: this.name,
+    });
+  };
+}
+
+const moveElementToEndOfArray = (array, element) => {
+  return [
+    ...array.slice(0, array.indexOf(element)),
+    ...array.slice(array.indexOf(element) + 1),
+    element,
+  ];
+};