virtual-keypad 5.11.3 → 5.12.0

package/dist/receiver.html

@@ -75,7 +75,7 @@
       let keypad_options = {
         // Specify a 'keypadUrl' field to redirect to a keypad hosted elsewhere
         // FUTURE should be able to have a visual keypress or not from here
-        alphabet: [..."CDHKNORSVZ".split(""), "RETURN", "SPACE"], // Set of symbols to display; array perfered
+        alphabet: [..."ABCDEFGHIJKLMNOPQRSTUVWXYZ123456789".split(""), "RETURN", "SPACE"], // Set of symbols to display; array perfered
         font: "Arial", // Supported font, in which to display letters
         targetElementId: "display", // id of the the div where messages should be displayed
         visualResponseFeedback: false,

package/package.json

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

package/src/keypad.css

@@ -17,7 +17,6 @@
 }
 #keypad-header {
   height: 100%;
-  /* min-height: 5vh; */
   font-size: 1.5rem;
   font-weight: 700;
   text-align: center;
@@ -25,11 +24,6 @@
   grid-row: 1;
   overflow-y: auto;
 
-  /* padding: 0.5em;
-  margin-top: 0.5em;
-  margin-left: 0.5em;
-  margin-right: 0.5em; */
-
   border-radius: 0.5em;
 
   box-shadow: inset 2px 2px 4px #888888,
@@ -47,31 +41,6 @@
 #keypad-keys {
   /* Second row, within the keypad grid (ie whole page) */
   grid-row: 2;
-
-  padding: 10px;
-
-  margin: 15px;
-
-  /* overflow-y: auto;
-  overflow-x: visible; */
-
-  /* width: 100%;
-  height: 100%;
-  display: flex;
-  flex-wrap: wrap-reverse;
-  flex-direction: row;
-  column-gap: 5px;
-  row-gap: 5px; */
-
-  /* Horizontal shift of buttons */
-  /* justify-content: center; */
-
-  /* Vertical shift of buttons */
-  /* align-items: center; */
-
-  /* Hide scrollbar */
-  /* -ms-overflow-style: none;
-  scrollbar-width: none; */
 }
 /* Hide scrollbar */
 /* #keypad-keys::-webkit-scrollbar {
@@ -79,14 +48,7 @@
 } */
 
 .response-button {
-  cursor: pointer;
-
-  /* width: 100%;
-  height: 100%;
-  max-width: min(25vw, 25vh, 150px);
-  max-height: min(25vw, 25vh, 150px);
-  min-width: 32px;
-  min-height: 32px;
+  /* border: 1px solid red; */
   cursor: pointer;
 
   /* Center text within button */
@@ -97,13 +59,13 @@
   /* Curve corners of buttons */
   border-radius: min(25px, 15%);
 
-  /* Make buttons square */
-  aspect-ratio: 1;
-
   /* Style button text */
-  font-size: 3rem;
+  /* font-size: 3rem; */
+  font-size: xx-large;
   font-weight: 700;
 
+  padding: 0;
+  margin: 0;
 
   box-shadow: 1px 1px 2px #888888,
               -1px -1px 2px #fff;
@@ -111,7 +73,6 @@
 .response-button:active {
   box-shadow: 1px 2px 2px 1px #999;
   background-color: #aaa;
-  font-size: large;
 }
 
 /* Only do on a hover-enabled device, ie not a phone/tablet */
@@ -122,10 +83,6 @@
   }
 }
 
-/* .response-button:active {
-    background-color: steelblue;
-    box-shadow: 1px 5px 5px 1px lightslategray;
-} */
 
 .response-button-label {
   text-align: center;

package/src/keypad.js

@@ -252,9 +252,9 @@ class Keypad extends KeypadPeer {
           e.changedTouches[0].clientX,
           e.changedTouches[0].clientY
         );
-        switch (elementEndedOn.className) {
+        switch (elementEndedOn?.className) {
           case "response-button-label noselect":
-            buttonResponseFn(elementEndedOn.parentElement); // e.target.click();
+            buttonResponseFn(elementEndedOn?.parentElement); // e.target.click();
             break;
           case "response-button":
             buttonResponseFn(elementEndedOn); // e.target.click();

package/src/maxKeySize.js

@@ -1,4 +1,3 @@
-
 const getKeysDimensions = (elem, n, aspect=0.5) => {
     /**** translation of maxKeySize.m, original provided courtesy of Prof Denis Pelli ****/
     let keyHeightPx;
@@ -8,7 +7,7 @@ const getKeysDimensions = (elem, n, aspect=0.5) => {
     const heightPx = elem.clientHeight;
     let screenArea=widthPx*heightPx
 
-    keyHeightPx= (-1+Math.sqrt(1+4*n*heightPx/widthPx))/(2*n/widthPx);
+    keyHeightPx = (-1+Math.sqrt(1+4*n*heightPx/widthPx))/(2*n/widthPx);
     keyHeightPx = (-1+Math.sqrt(1+4*n*heightPx*aspect/widthPx))/(2*aspect*n/widthPx);
 
     while (n > (Math.floor(heightPx/keyHeightPx - 1)*Math.floor(widthPx/(aspect*keyHeightPx)))){
@@ -37,6 +36,7 @@ const getKeysDimensions = (elem, n, aspect=0.5) => {
 
 export const applyMaxKeySize = (numberOfKeys) => {
     const aspect = 1;
+    let margin = 5;
     const keysElem =  document.getElementById("keypad");
     const {keyHeightPx, cols, rows, widthPx, heightPx} = getKeysDimensions(keysElem, numberOfKeys, aspect);
     const keyElems = [...keysElem.getElementsByClassName("response-button")];
@@ -49,41 +49,57 @@ export const applyMaxKeySize = (numberOfKeys) => {
     const verticalMarginOffset = Math.floor(freeHeight/2);
     const horizontalMarginOffset = Math.floor(freeWidth/2);
 
+    let keyFontSize;
     let j=0;
     keyElems.forEach((k,i) => {
         k.style.position = "fixed";
         const controlKey = controlKeyElemsMask[i];
         let top, left, width;
         if (controlKey) {
-            top = (heightPx-keyHeightPx) - verticalMarginOffset;
-            left = (k.id.toLowerCase().includes("space") ? 0 : widthPx/2 - horizontalMarginOffset) + horizontalMarginOffset;
-            width = (widthPx - horizontalMarginOffset*2)/2;
+            top = heightPx-keyHeightPx;
+            width = widthPx/2 - horizontalMarginOffset - margin;
+            const m = horizontalMarginOffset + margin*0.5;
+            left = (k.id.toLowerCase().includes("space") ? m : m + width + margin);
 
-            k.style.height = "auto";
-            k.style.width = "auto";
-            k.style.whiteSpace = "nowrap";
-            // Set to a nominal font size, s
-            const s = 20;
-            let w = k.getBoundingClientRect().width;
-            console.log("!. ~ file: maxKeySize.js:70 ~ keyElems.forEach ~ w:", w)
-            k.style.fontSize = s + "px";
-            // Measure width of elem, w
-            w = k.getBoundingClientRect().width;
-            const r = 1/(w/width)
-            // Set font size to s*r
-            const f = Math.floor(s*r);
+            const f = getLargeFontSize(k, width, keyHeightPx-margin);
             k.style.fontSize = f + "px";
+            k.style.borderRadius = "25px";
+            k.style.height = (keyHeightPx - margin)+ "px";
         } else {
-            width = keyHeightPx*aspect;
+            const height = keyHeightPx - margin;
+            width = height*aspect;
             const [y,x] = gridCoords[j];
             j += 1;
-            top = y*keyHeightPx + verticalMarginOffset ;
-            left = x*width+horizontalMarginOffset;
+            top = y*height + ((y+1)*margin) + verticalMarginOffset - margin/2;
+            left = x*width + ((x+1)*margin) + horizontalMarginOffset - margin/2;
+            if (!keyFontSize) {
+                keyFontSize = getLargeFontSize(k, width, height);
+            }
+            k.style.height = height + "px";
+            k.style.fontSize = height/2 + "px";
         }
         k.style.width = width + "px";
-        k.style.height = keyHeightPx + "px";
         k.style.top = top + "px";
         k.style.left = left + "px";
         k.style.visibility = "visible";
     });
+};
+
+const getLargeFontSize = (k, width, height) => {
+    k.style.height = "auto";
+    k.style.width = "auto";
+    k.style.whiteSpace = "nowrap";
+
+    // Set to a nominal font size, s
+    const s = 20;
+    k.style.fontSize = s + "px";
+    // Measure width of elem, w
+    const w = k.getBoundingClientRect().width;
+    const h = k.getBoundingClientRect().height
+    const rW = 1/(w/width)
+    const rH = 1/(h/height)
+    const r = Math.min(rW, rH)
+    // Set font size to s*r
+    const f = Math.floor(s*r);
+    return f;
 };

package/src/receiver.js

@@ -141,7 +141,8 @@ class Receiver extends KeypadPeer {
 
     let queryString = this.queryStringFromObject(params);
     const uri = this.keypadUrl + queryString;
-    this.keypadURL = uri;
+    this.qrURL = uri;
+    console.log(this.qrURL);
 
     // Display QR code for the participant to scan
     const qrCanvas = document.createElement("canvas");