virtual-keypad 5.11.2 → 5.11.4

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.2",
+  "version": "5.11.4",
   "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,
@@ -51,27 +45,6 @@
   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 {
@@ -81,14 +54,6 @@
 .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;
-  cursor: pointer;
-
   /* Center text within button */
   display: flex;
   align-items: center;
@@ -97,11 +62,8 @@
   /* Curve corners of buttons */
   border-radius: min(25px, 15%);
 
-  /* Make buttons square */
-  aspect-ratio: 1;
-
   /* Style button text */
-  font-size: 3rem;
+  font-size: larger;
   font-weight: 700;
 
 
@@ -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/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)))){
@@ -55,9 +54,10 @@ export const applyMaxKeySize = (numberOfKeys) => {
         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);
+            const m = (widthPx*0.1)/4
+            left = (k.id.toLowerCase().includes("space") ? 0 : widthPx/2) + m;
+            width = (widthPx*0.9)/2;
 
             k.style.height = "auto";
             k.style.width = "auto";
@@ -73,15 +73,17 @@ export const applyMaxKeySize = (numberOfKeys) => {
             // Set font size to s*r
             const f = Math.floor(s*r);
             k.style.fontSize = f + "px";
+            k.style.borderRadius = "25px";
+            k.style.height = (keyHeightPx - 5)+ "px";
         } else {
             width = keyHeightPx*aspect;
             const [y,x] = gridCoords[j];
             j += 1;
             top = y*keyHeightPx + verticalMarginOffset ;
             left = x*width+horizontalMarginOffset;
+            k.style.height = keyHeightPx + "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";

package/src/receiver.js

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