virtual-keypad 5.14.3 → 5.15.0

package/dist/receiver.html

@@ -95,7 +95,7 @@
       let starting_alphabet = [
         ..."ABCDEFGHIJKLMNOPQRSTUVWXYZ123456789".split(""),
       ];
-      const ctrl = ["RETURN", "SPACE"];
+      const ctrl = ["RETURN", "SPACE", "SKIP BLOCK"];
       let alphabet = [...starting_alphabet, ...ctrl];
 
       let keypad_options = {
@@ -106,6 +106,7 @@
         targetElementId: "display", // id of the the div where messages should be displayed
         visualResponseFeedback: false,
         onErrorReconnectMessage: "Custom error message",
+        controlButtons: ctrl,
       };
       let ondata_callback = (data) => {
         receiver.displayUpdate(`[data] ${data.response}`, true);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "virtual-keypad",
-  "version": "5.14.3",
+  "version": "5.15.0",
   "description": "User response at a distance. Simple utility to summon forth a virtual keypad webapp.",
   "main": "dist/main.js",
   "directories": {

package/src/keypad.js

@@ -16,6 +16,7 @@ class Keypad extends KeypadPeer {
     });
     this.startTime = Date.now();
     this.receiverPeerId = null;
+    this.controlButtons = keypadParameters.controlButtons ?? ["SPACE", "RETURN"];
 
     const parametersFromURL = this.parseParams(
       new URLSearchParams(window.location.search),
@@ -64,6 +65,7 @@ class Keypad extends KeypadPeer {
       case "KeypadParameters":
         this.alphabet = data.alphabet;
         this.font = data.font;
+        this.controlButtons = data.controlButtons;
         this.onErrorReconnectMessage = data.onErrorReconnectMessage;
         this.#populateKeypad();
         break;
@@ -81,13 +83,14 @@ class Keypad extends KeypadPeer {
         break;
       case "Update":
         // Keypad has received data to update the keypad
-        if (!data.hasOwnProperty("alphabet") && !data.hasOwnProperty("font")) {
+        if (!data.hasOwnProperty("alphabet") && !data.hasOwnProperty("font") && !data.hasOwnProperty("controlButtons")) {
           console.error(
             'Error in parsing data received! Must set "alphabet" or "font" properties',
           );
         } else {
           this.alphabet = data.alphabet ?? this.alphabet;
           this.font = data.font ?? this.font;
+          this.controlButtons = data.controlButtons ?? this.controlButtons;
         }
         this.#populateKeypad();
         break;
@@ -250,12 +253,12 @@ class Keypad extends KeypadPeer {
       button.addEventListener("mouseup", (e) => {
         e.preventDefault();
         console.log("mouseup event: ", e);
-        switch (e.toElement.className) {
+        switch (e.target.className) {
           case "response-button-label noselect":
-            buttonResponseFn(e.toElement.parentElement); // e.target.click();
+            buttonResponseFn(e.target.parentElement);
             break;
           case "response-button":
-            buttonResponseFn(e.toElement); // e.target.click();
+            buttonResponseFn(e.target);
             break;
         }
       });
@@ -290,7 +293,7 @@ class Keypad extends KeypadPeer {
       // Add the label to the button
       button.appendChild(buttonLabel);
       // Add the labeled-button to the HTML
-      if (["SPACE", "RETURN"].includes(symbol.toUpperCase())) {
+      if (this.controlButtons.includes(symbol.toUpperCase())) {
         document.querySelector("#keypad-control-keys").appendChild(button);
       } else {
         document.querySelector("#keypad-keys").appendChild(button);

package/src/keypadPeer.js

@@ -30,11 +30,11 @@ export class KeypadPeer {
     // TODO add support for ttd (ms)
     this.ttd = parameters.hasOwnProperty("ttd")
       ? parameters.hasOwnProperty("ttd")
-      : 8000;
+      : 60000;
     // TODO add support for heartRate (ms)
     this.heartbeatIntervalMs = parameters.hasOwnProperty("heartRate")
       ? parameters.hasOwnProperty("heartRate")
-      : 2000;
+      : 10000;
     this.lastHeartbeat = performance.now();
     this.heartBeatInterval = undefined;
     this.heartCheckInterval = undefined;

package/src/maxKeySize.js

@@ -79,15 +79,19 @@ export const applyMaxKeySize = (numberOfKeys) => {
   let controlKeyFontSize = Infinity;
   let keyFontSize;
   let j = 0;
+  
+  const numControlKeys = controlKeyElemsMask.filter(x => x).length;
+
   keyElems.forEach((k, i) => {
     k.style.position = "fixed";
     const controlKey = controlKeyElemsMask[i];
     let top, left, width;
     if (controlKey) {
       top = heightPx - keyHeightPx;
-      width = widthPx / 2 - margin;
+      width = (widthPx / numControlKeys) - margin;
       const m = margin * 0.5;
-      left = k.id.toLowerCase().includes("space") ? m : m + width + margin;
+      const controlKeyIndex = controlKeys.length;
+      left = m + controlKeyIndex * (width + margin);
 
       const f = getLargeFontSize(k, width, keyHeightPx - margin);
       controlKeyFontSize = Math.min(f, controlKeyFontSize);

package/src/receiver.js

@@ -30,6 +30,7 @@ class Receiver extends KeypadPeer {
 
     this.alphabet = this.checkAlphabet(keypadParameters["alphabet"]); // What symbols to display on the keys
     this.font = keypadParameters["font"]; // What fontface to display the symbols in
+    this.controlButtons = keypadParameters["controlButtons"];
     this.onErrorReconnectMessage =
       keypadParameters.onErrorReconnectMessage ??
       "Connection lost. Please reconnect...";
@@ -226,6 +227,7 @@ class Receiver extends KeypadPeer {
           this.conn.send({
             message: "KeypadParameters",
             alphabet: this.alphabet,
+            controlButtons: this.controlButtons,
             font: this.font,
             onErrorReconnectMessage: this.onErrorReconnectMessage,
           });