virtual-keypad 5.12.0 → 5.12.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -21
- package/README.md +45 -45
- package/dist/404.html +14 -14
- package/dist/fonts/Pelli-EyeChart.svg +494 -494
- package/dist/fonts/Sloan.svg +138 -138
- package/dist/index.html +22 -22
- package/dist/keypad.html +58 -58
- package/dist/main.js +1 -1
- package/dist/main.js.LICENSE.txt +8 -8
- package/dist/main.js.map +1 -1
- package/dist/receiver.html +118 -118
- package/dist/server.js +66 -66
- package/package.json +36 -36
- package/src/keypad.css +108 -108
- package/src/keypad.js +383 -383
- package/src/keypadPeer.js +189 -149
- package/src/main.js +4 -4
- package/src/maxKeySize.js +104 -104
- package/src/receiver.css +11 -11
- package/src/receiver.js +223 -223
- package/webpack.common.js +30 -30
- package/webpack.dev.js +9 -9
- package/webpack.prod.js +6 -6
package/dist/receiver.html
CHANGED
|
@@ -1,118 +1,118 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html style="background-color: #eee">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="utf-8" />
|
|
5
|
-
<title>Receiver</title>
|
|
6
|
-
<meta name="description" content="" />
|
|
7
|
-
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
8
|
-
<!-- TODO include JS and css from webpack bundle -->
|
|
9
|
-
<!-- <script src="../dist/main.js"></script> -->
|
|
10
|
-
<script src="./main.js"></script>
|
|
11
|
-
<link
|
|
12
|
-
rel="stylesheet"
|
|
13
|
-
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
|
|
14
|
-
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
|
|
15
|
-
crossorigin="anonymous"
|
|
16
|
-
/>
|
|
17
|
-
<!-- <script src="https://unpkg.com/virtual-keypad"></script> -->
|
|
18
|
-
<style>
|
|
19
|
-
* {
|
|
20
|
-
outline: none;
|
|
21
|
-
vertical-align: baseline;
|
|
22
|
-
box-sizing: border-box;
|
|
23
|
-
text-rendering: optimizeLegibility;
|
|
24
|
-
-webkit-font-smoothing: auto;
|
|
25
|
-
-moz-osx-font-smoothing: grayscale;
|
|
26
|
-
font-kerning: normal;
|
|
27
|
-
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
|
|
28
|
-
Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
|
|
29
|
-
color: #333;
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
html,
|
|
33
|
-
body {
|
|
34
|
-
margin: 0;
|
|
35
|
-
padding: 0;
|
|
36
|
-
height: 100vh;
|
|
37
|
-
width: 100vw;
|
|
38
|
-
font-size: calc(1em + 1vw);
|
|
39
|
-
/* background-color: #eee; */
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
main {
|
|
43
|
-
margin: 0 auto;
|
|
44
|
-
padding-bottom: 5rem;
|
|
45
|
-
width: 80%;
|
|
46
|
-
max-width: 1440px;
|
|
47
|
-
/* background-color: #eee; */
|
|
48
|
-
}
|
|
49
|
-
#display {
|
|
50
|
-
overflow-x: wrap;
|
|
51
|
-
max-width: 75vw;
|
|
52
|
-
word-break: break-all;
|
|
53
|
-
}
|
|
54
|
-
/* -------------------------------------------------------------------------- */
|
|
55
|
-
/* color: #FF9A00; */
|
|
56
|
-
/* color: #666; */
|
|
57
|
-
</style>
|
|
58
|
-
</head>
|
|
59
|
-
<body>
|
|
60
|
-
<div id="info">
|
|
61
|
-
<h1>Set up keypad</h1>
|
|
62
|
-
<p>
|
|
63
|
-
Scan the QR code from the device you'd like to use as a keypad. This
|
|
64
|
-
receiver just echoes keypresses; provide a different on-data callback to
|
|
65
|
-
customize how the receiver handles keypresses.
|
|
66
|
-
</p>
|
|
67
|
-
</div>
|
|
68
|
-
<div id="display"></div>
|
|
69
|
-
<button id="toggle-disable" style="display: none;">Disable keys.</button>
|
|
70
|
-
<script>
|
|
71
|
-
if ( window.location !== window.parent.location ) {
|
|
72
|
-
// The page is in an iframe, per https://tommcfarlin.com/check-if-a-page-is-in-an-iframe/
|
|
73
|
-
document.getElementById("info").style.display = "none";
|
|
74
|
-
}
|
|
75
|
-
let keypad_options = {
|
|
76
|
-
// Specify a 'keypadUrl' field to redirect to a keypad hosted elsewhere
|
|
77
|
-
// FUTURE should be able to have a visual keypress or not from here
|
|
78
|
-
alphabet: [..."ABCDEFGHIJKLMNOPQRSTUVWXYZ123456789".split(""), "RETURN", "SPACE"], // Set of symbols to display; array perfered
|
|
79
|
-
font: "Arial", // Supported font, in which to display letters
|
|
80
|
-
targetElementId: "display", // id of the the div where messages should be displayed
|
|
81
|
-
visualResponseFeedback: false,
|
|
82
|
-
};
|
|
83
|
-
let ondata_callback = (data) => {
|
|
84
|
-
document.getElementById("display").innerText += data.response;
|
|
85
|
-
console.log(data);
|
|
86
|
-
};
|
|
87
|
-
const disableSomeKeys = (ev) => {
|
|
88
|
-
const allKeys = [...keypad_options.alphabet];
|
|
89
|
-
const numberOfKeysToDisable = Math.floor(Math.random()*allKeys.length);
|
|
90
|
-
const keysToDisable = [];
|
|
91
|
-
for (let i=0; i<numberOfKeysToDisable; i++){
|
|
92
|
-
keysToDisable.push(allKeys.splice(Math.floor(Math.random()*allKeys.length), 1)[0]);
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
if (ev.target.toggleAttribute("keys-disabled")) {
|
|
96
|
-
receiver.disableKeys(keysToDisable);
|
|
97
|
-
ev.target.innerText = "Enable keys.";
|
|
98
|
-
} else {
|
|
99
|
-
receiver.enableKeys();
|
|
100
|
-
ev.target.innerText = "Disable keys."
|
|
101
|
-
}
|
|
102
|
-
};
|
|
103
|
-
var receiver = new virtualKeypad.Receiver(
|
|
104
|
-
keypad_options,
|
|
105
|
-
ondata_callback,
|
|
106
|
-
()=>{
|
|
107
|
-
const disableButton = document.getElementById("toggle-disable");
|
|
108
|
-
disableButton.style.display = "block";
|
|
109
|
-
disableButton.onclick = disableSomeKeys;
|
|
110
|
-
console.log("RECEIV Handshake complete");
|
|
111
|
-
},
|
|
112
|
-
()=>console.log("RECEIV Connection connected"),
|
|
113
|
-
()=>console.log("RECEIV Connection closed"),
|
|
114
|
-
()=>console.log("RECEIV Connection error")
|
|
115
|
-
);
|
|
116
|
-
</script>
|
|
117
|
-
</body>
|
|
118
|
-
</html>
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html style="background-color: #eee">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8" />
|
|
5
|
+
<title>Receiver</title>
|
|
6
|
+
<meta name="description" content="" />
|
|
7
|
+
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
8
|
+
<!-- TODO include JS and css from webpack bundle -->
|
|
9
|
+
<!-- <script src="../dist/main.js"></script> -->
|
|
10
|
+
<script src="./main.js"></script>
|
|
11
|
+
<link
|
|
12
|
+
rel="stylesheet"
|
|
13
|
+
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
|
|
14
|
+
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
|
|
15
|
+
crossorigin="anonymous"
|
|
16
|
+
/>
|
|
17
|
+
<!-- <script src="https://unpkg.com/virtual-keypad"></script> -->
|
|
18
|
+
<style>
|
|
19
|
+
* {
|
|
20
|
+
outline: none;
|
|
21
|
+
vertical-align: baseline;
|
|
22
|
+
box-sizing: border-box;
|
|
23
|
+
text-rendering: optimizeLegibility;
|
|
24
|
+
-webkit-font-smoothing: auto;
|
|
25
|
+
-moz-osx-font-smoothing: grayscale;
|
|
26
|
+
font-kerning: normal;
|
|
27
|
+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
|
|
28
|
+
Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
|
|
29
|
+
color: #333;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
html,
|
|
33
|
+
body {
|
|
34
|
+
margin: 0;
|
|
35
|
+
padding: 0;
|
|
36
|
+
height: 100vh;
|
|
37
|
+
width: 100vw;
|
|
38
|
+
font-size: calc(1em + 1vw);
|
|
39
|
+
/* background-color: #eee; */
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
main {
|
|
43
|
+
margin: 0 auto;
|
|
44
|
+
padding-bottom: 5rem;
|
|
45
|
+
width: 80%;
|
|
46
|
+
max-width: 1440px;
|
|
47
|
+
/* background-color: #eee; */
|
|
48
|
+
}
|
|
49
|
+
#display {
|
|
50
|
+
overflow-x: wrap;
|
|
51
|
+
max-width: 75vw;
|
|
52
|
+
word-break: break-all;
|
|
53
|
+
}
|
|
54
|
+
/* -------------------------------------------------------------------------- */
|
|
55
|
+
/* color: #FF9A00; */
|
|
56
|
+
/* color: #666; */
|
|
57
|
+
</style>
|
|
58
|
+
</head>
|
|
59
|
+
<body>
|
|
60
|
+
<div id="info">
|
|
61
|
+
<h1>Set up keypad</h1>
|
|
62
|
+
<p>
|
|
63
|
+
Scan the QR code from the device you'd like to use as a keypad. This
|
|
64
|
+
receiver just echoes keypresses; provide a different on-data callback to
|
|
65
|
+
customize how the receiver handles keypresses.
|
|
66
|
+
</p>
|
|
67
|
+
</div>
|
|
68
|
+
<div id="display"></div>
|
|
69
|
+
<button id="toggle-disable" style="display: none;">Disable keys.</button>
|
|
70
|
+
<script>
|
|
71
|
+
if ( window.location !== window.parent.location ) {
|
|
72
|
+
// The page is in an iframe, per https://tommcfarlin.com/check-if-a-page-is-in-an-iframe/
|
|
73
|
+
document.getElementById("info").style.display = "none";
|
|
74
|
+
}
|
|
75
|
+
let keypad_options = {
|
|
76
|
+
// Specify a 'keypadUrl' field to redirect to a keypad hosted elsewhere
|
|
77
|
+
// FUTURE should be able to have a visual keypress or not from here
|
|
78
|
+
alphabet: [..."ABCDEFGHIJKLMNOPQRSTUVWXYZ123456789".split(""), "RETURN", "SPACE"], // Set of symbols to display; array perfered
|
|
79
|
+
font: "Arial", // Supported font, in which to display letters
|
|
80
|
+
targetElementId: "display", // id of the the div where messages should be displayed
|
|
81
|
+
visualResponseFeedback: false,
|
|
82
|
+
};
|
|
83
|
+
let ondata_callback = (data) => {
|
|
84
|
+
document.getElementById("display").innerText += data.response;
|
|
85
|
+
console.log(data);
|
|
86
|
+
};
|
|
87
|
+
const disableSomeKeys = (ev) => {
|
|
88
|
+
const allKeys = [...keypad_options.alphabet];
|
|
89
|
+
const numberOfKeysToDisable = Math.floor(Math.random()*allKeys.length);
|
|
90
|
+
const keysToDisable = [];
|
|
91
|
+
for (let i=0; i<numberOfKeysToDisable; i++){
|
|
92
|
+
keysToDisable.push(allKeys.splice(Math.floor(Math.random()*allKeys.length), 1)[0]);
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
if (ev.target.toggleAttribute("keys-disabled")) {
|
|
96
|
+
receiver.disableKeys(keysToDisable);
|
|
97
|
+
ev.target.innerText = "Enable keys.";
|
|
98
|
+
} else {
|
|
99
|
+
receiver.enableKeys();
|
|
100
|
+
ev.target.innerText = "Disable keys."
|
|
101
|
+
}
|
|
102
|
+
};
|
|
103
|
+
var receiver = new virtualKeypad.Receiver(
|
|
104
|
+
keypad_options,
|
|
105
|
+
ondata_callback,
|
|
106
|
+
()=>{
|
|
107
|
+
const disableButton = document.getElementById("toggle-disable");
|
|
108
|
+
disableButton.style.display = "block";
|
|
109
|
+
disableButton.onclick = disableSomeKeys;
|
|
110
|
+
console.log("RECEIV Handshake complete");
|
|
111
|
+
},
|
|
112
|
+
()=>console.log("RECEIV Connection connected"),
|
|
113
|
+
()=>console.log("RECEIV Connection closed"),
|
|
114
|
+
()=>console.log("RECEIV Connection error")
|
|
115
|
+
);
|
|
116
|
+
</script>
|
|
117
|
+
</body>
|
|
118
|
+
</html>
|
package/dist/server.js
CHANGED
|
@@ -1,66 +1,66 @@
|
|
|
1
|
-
const express = require("express");
|
|
2
|
-
const path = require("path");
|
|
3
|
-
const { v4: uuidv4 } = require("uuid");
|
|
4
|
-
|
|
5
|
-
var app = (module.exports = express());
|
|
6
|
-
var server = "http://localhost:3000";
|
|
7
|
-
|
|
8
|
-
// I got an error with line below if I didnt' add the extended property
|
|
9
|
-
// Don't actually know if this should be set to true or false.
|
|
10
|
-
// app.use(express.urlencoded({ extended: true }));
|
|
11
|
-
// app.use(express.json());
|
|
12
|
-
|
|
13
|
-
// app.use(express.static(path.join(__dirname, 'dist')));
|
|
14
|
-
|
|
15
|
-
// Middleware to check we have all the params we need
|
|
16
|
-
const checkParams = (req, res, next) => {
|
|
17
|
-
let noID = !req.query.hasOwnProperty('peerID');
|
|
18
|
-
if (noID) {
|
|
19
|
-
console.log('No peerID given.'); // TODO Breaking! Serve error
|
|
20
|
-
throw "No peerID given -- unable to connect to peer."
|
|
21
|
-
// req.query.peerID = uuidv4(); // TEMPorary and only usable to test keypadClient
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
// // TODO check that all characters can be input as query params
|
|
25
|
-
// const noAlphabet = !req.query.hasOwnProperty('alphabet');
|
|
26
|
-
// if (noAlphabet) {
|
|
27
|
-
// console.log('No alphabet given.');
|
|
28
|
-
// req.query.alphabet = 'ABCDEFG';
|
|
29
|
-
// }
|
|
30
|
-
|
|
31
|
-
// // TODO check for valid fonts here
|
|
32
|
-
// let noFont = !req.query.hasOwnProperty('font');
|
|
33
|
-
// if (noFont) {
|
|
34
|
-
// console.log('No alphabet given.');
|
|
35
|
-
// req.query.font = 'Sloan';
|
|
36
|
-
// }
|
|
37
|
-
next();
|
|
38
|
-
};
|
|
39
|
-
|
|
40
|
-
// Link to the actual keypad
|
|
41
|
-
// ie this is where the user will be sent (from the QR code) on their phone
|
|
42
|
-
app.get('/keypad', checkParams, function (req, res) {
|
|
43
|
-
res.render(path.join(__dirname, 'keypad.html'));
|
|
44
|
-
});
|
|
45
|
-
app.get('/receiver', function (req, res) {
|
|
46
|
-
res.render(path.join(__dirname, 'receiver.html'));
|
|
47
|
-
});
|
|
48
|
-
|
|
49
|
-
app.use(function (err, req, res, next) {
|
|
50
|
-
res.status(err.status || 500);
|
|
51
|
-
res.send({
|
|
52
|
-
error: err.message
|
|
53
|
-
});
|
|
54
|
-
});
|
|
55
|
-
|
|
56
|
-
app.use(function (req, res) {
|
|
57
|
-
res.status(404);
|
|
58
|
-
res.send({
|
|
59
|
-
error: "404 not found"
|
|
60
|
-
});
|
|
61
|
-
});
|
|
62
|
-
|
|
63
|
-
if (!module.parent) {
|
|
64
|
-
app.listen(3000);
|
|
65
|
-
console.log('Express started on port 3000');
|
|
66
|
-
}
|
|
1
|
+
const express = require("express");
|
|
2
|
+
const path = require("path");
|
|
3
|
+
const { v4: uuidv4 } = require("uuid");
|
|
4
|
+
|
|
5
|
+
var app = (module.exports = express());
|
|
6
|
+
var server = "http://localhost:3000";
|
|
7
|
+
|
|
8
|
+
// I got an error with line below if I didnt' add the extended property
|
|
9
|
+
// Don't actually know if this should be set to true or false.
|
|
10
|
+
// app.use(express.urlencoded({ extended: true }));
|
|
11
|
+
// app.use(express.json());
|
|
12
|
+
|
|
13
|
+
// app.use(express.static(path.join(__dirname, 'dist')));
|
|
14
|
+
|
|
15
|
+
// Middleware to check we have all the params we need
|
|
16
|
+
const checkParams = (req, res, next) => {
|
|
17
|
+
let noID = !req.query.hasOwnProperty('peerID');
|
|
18
|
+
if (noID) {
|
|
19
|
+
console.log('No peerID given.'); // TODO Breaking! Serve error
|
|
20
|
+
throw "No peerID given -- unable to connect to peer."
|
|
21
|
+
// req.query.peerID = uuidv4(); // TEMPorary and only usable to test keypadClient
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
// // TODO check that all characters can be input as query params
|
|
25
|
+
// const noAlphabet = !req.query.hasOwnProperty('alphabet');
|
|
26
|
+
// if (noAlphabet) {
|
|
27
|
+
// console.log('No alphabet given.');
|
|
28
|
+
// req.query.alphabet = 'ABCDEFG';
|
|
29
|
+
// }
|
|
30
|
+
|
|
31
|
+
// // TODO check for valid fonts here
|
|
32
|
+
// let noFont = !req.query.hasOwnProperty('font');
|
|
33
|
+
// if (noFont) {
|
|
34
|
+
// console.log('No alphabet given.');
|
|
35
|
+
// req.query.font = 'Sloan';
|
|
36
|
+
// }
|
|
37
|
+
next();
|
|
38
|
+
};
|
|
39
|
+
|
|
40
|
+
// Link to the actual keypad
|
|
41
|
+
// ie this is where the user will be sent (from the QR code) on their phone
|
|
42
|
+
app.get('/keypad', checkParams, function (req, res) {
|
|
43
|
+
res.render(path.join(__dirname, 'keypad.html'));
|
|
44
|
+
});
|
|
45
|
+
app.get('/receiver', function (req, res) {
|
|
46
|
+
res.render(path.join(__dirname, 'receiver.html'));
|
|
47
|
+
});
|
|
48
|
+
|
|
49
|
+
app.use(function (err, req, res, next) {
|
|
50
|
+
res.status(err.status || 500);
|
|
51
|
+
res.send({
|
|
52
|
+
error: err.message
|
|
53
|
+
});
|
|
54
|
+
});
|
|
55
|
+
|
|
56
|
+
app.use(function (req, res) {
|
|
57
|
+
res.status(404);
|
|
58
|
+
res.send({
|
|
59
|
+
error: "404 not found"
|
|
60
|
+
});
|
|
61
|
+
});
|
|
62
|
+
|
|
63
|
+
if (!module.parent) {
|
|
64
|
+
app.listen(3000);
|
|
65
|
+
console.log('Express started on port 3000');
|
|
66
|
+
}
|
package/package.json
CHANGED
|
@@ -1,36 +1,36 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "virtual-keypad",
|
|
3
|
-
"version": "5.12.
|
|
4
|
-
"description": "User response at a distance. Simple utility to summon forth a virtual keypad webapp.",
|
|
5
|
-
"main": "dist/main.js",
|
|
6
|
-
"directories": {
|
|
7
|
-
"example": "example",
|
|
8
|
-
"bin": "dist"
|
|
9
|
-
},
|
|
10
|
-
"scripts": {
|
|
11
|
-
"test": "echo \"Error: no test specified\" && exit 1",
|
|
12
|
-
"start": "webpack serve --open --config webpack.dev.js",
|
|
13
|
-
"build": "webpack --config webpack.prod.js"
|
|
14
|
-
},
|
|
15
|
-
"keywords": [],
|
|
16
|
-
"author": "Augustin Burchell <augustin.burchell@gmail.com> (https://aburchell.github.io/)",
|
|
17
|
-
"license": "ISC",
|
|
18
|
-
"repository": {
|
|
19
|
-
"type": "git",
|
|
20
|
-
"url": "https://github.com/EasyEyes/virtual-keypad"
|
|
21
|
-
},
|
|
22
|
-
"dependencies": {
|
|
23
|
-
"peerjs": "^1.
|
|
24
|
-
"qrcode": "^1.4.4",
|
|
25
|
-
"uuid": "^8.3.2"
|
|
26
|
-
},
|
|
27
|
-
"devDependencies": {
|
|
28
|
-
"css-loader": "^5.2.6",
|
|
29
|
-
"file-loader": "^6.2.0",
|
|
30
|
-
"style-loader": "^2.0.0",
|
|
31
|
-
"webpack": "^5.40.0",
|
|
32
|
-
"webpack-cli": "^4.7.2",
|
|
33
|
-
"webpack-dev-server": "^4.13.2",
|
|
34
|
-
"webpack-merge": "^5.8.0"
|
|
35
|
-
}
|
|
36
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "virtual-keypad",
|
|
3
|
+
"version": "5.12.2",
|
|
4
|
+
"description": "User response at a distance. Simple utility to summon forth a virtual keypad webapp.",
|
|
5
|
+
"main": "dist/main.js",
|
|
6
|
+
"directories": {
|
|
7
|
+
"example": "example",
|
|
8
|
+
"bin": "dist"
|
|
9
|
+
},
|
|
10
|
+
"scripts": {
|
|
11
|
+
"test": "echo \"Error: no test specified\" && exit 1",
|
|
12
|
+
"start": "webpack serve --open --config webpack.dev.js",
|
|
13
|
+
"build": "webpack --config webpack.prod.js"
|
|
14
|
+
},
|
|
15
|
+
"keywords": [],
|
|
16
|
+
"author": "Augustin Burchell <augustin.burchell@gmail.com> (https://aburchell.github.io/)",
|
|
17
|
+
"license": "ISC",
|
|
18
|
+
"repository": {
|
|
19
|
+
"type": "git",
|
|
20
|
+
"url": "https://github.com/EasyEyes/virtual-keypad"
|
|
21
|
+
},
|
|
22
|
+
"dependencies": {
|
|
23
|
+
"peerjs": "^1.5.2",
|
|
24
|
+
"qrcode": "^1.4.4",
|
|
25
|
+
"uuid": "^8.3.2"
|
|
26
|
+
},
|
|
27
|
+
"devDependencies": {
|
|
28
|
+
"css-loader": "^5.2.6",
|
|
29
|
+
"file-loader": "^6.2.0",
|
|
30
|
+
"style-loader": "^2.0.0",
|
|
31
|
+
"webpack": "^5.40.0",
|
|
32
|
+
"webpack-cli": "^4.7.2",
|
|
33
|
+
"webpack-dev-server": "^4.13.2",
|
|
34
|
+
"webpack-merge": "^5.8.0"
|
|
35
|
+
}
|
|
36
|
+
}
|
package/src/keypad.css
CHANGED
|
@@ -1,109 +1,109 @@
|
|
|
1
|
-
/* REMOTE KEYPAD STYLING */
|
|
2
|
-
#keypad {
|
|
3
|
-
position: absolute;
|
|
4
|
-
width: 100%;
|
|
5
|
-
height: 100vh;
|
|
6
|
-
height: 100dvh;
|
|
7
|
-
|
|
8
|
-
display: grid;
|
|
9
|
-
grid-template-columns: 1fr;
|
|
10
|
-
/* Make header text as big as the text, keys take up as much space as needed, and control keys take up bottom space */
|
|
11
|
-
grid-template-rows: max-content auto;
|
|
12
|
-
|
|
13
|
-
align-items: center;
|
|
14
|
-
justify-content: center;
|
|
15
|
-
|
|
16
|
-
font-family: sans-serif;
|
|
17
|
-
}
|
|
18
|
-
#keypad-header {
|
|
19
|
-
height: 100%;
|
|
20
|
-
font-size: 1.5rem;
|
|
21
|
-
font-weight: 700;
|
|
22
|
-
text-align: center;
|
|
23
|
-
|
|
24
|
-
grid-row: 1;
|
|
25
|
-
overflow-y: auto;
|
|
26
|
-
|
|
27
|
-
border-radius: 0.5em;
|
|
28
|
-
|
|
29
|
-
box-shadow: inset 2px 2px 4px #888888,
|
|
30
|
-
inset -2px -2px 4px #fff;
|
|
31
|
-
}
|
|
32
|
-
#keypad-footer {
|
|
33
|
-
position: absolute;
|
|
34
|
-
font-size: smaller;
|
|
35
|
-
width: 100%;
|
|
36
|
-
bottom: 0;
|
|
37
|
-
right: 0;
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
/* Grid of main keys themselves */
|
|
41
|
-
#keypad-keys {
|
|
42
|
-
/* Second row, within the keypad grid (ie whole page) */
|
|
43
|
-
grid-row: 2;
|
|
44
|
-
}
|
|
45
|
-
/* Hide scrollbar */
|
|
46
|
-
/* #keypad-keys::-webkit-scrollbar {
|
|
47
|
-
display: none;
|
|
48
|
-
} */
|
|
49
|
-
|
|
50
|
-
.response-button {
|
|
51
|
-
/* border: 1px solid red; */
|
|
52
|
-
cursor: pointer;
|
|
53
|
-
|
|
54
|
-
/* Center text within button */
|
|
55
|
-
display: flex;
|
|
56
|
-
align-items: center;
|
|
57
|
-
justify-content: center;
|
|
58
|
-
|
|
59
|
-
/* Curve corners of buttons */
|
|
60
|
-
border-radius: min(25px, 15%);
|
|
61
|
-
|
|
62
|
-
/* Style button text */
|
|
63
|
-
/* font-size: 3rem; */
|
|
64
|
-
font-size: xx-large;
|
|
65
|
-
font-weight: 700;
|
|
66
|
-
|
|
67
|
-
padding: 0;
|
|
68
|
-
margin: 0;
|
|
69
|
-
|
|
70
|
-
box-shadow: 1px 1px 2px #888888,
|
|
71
|
-
-1px -1px 2px #fff;
|
|
72
|
-
}
|
|
73
|
-
.response-button:active {
|
|
74
|
-
box-shadow: 1px 2px 2px 1px #999;
|
|
75
|
-
background-color: #aaa;
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
/* Only do on a hover-enabled device, ie not a phone/tablet */
|
|
79
|
-
@media (hover: hover) {
|
|
80
|
-
.response-button:hover {
|
|
81
|
-
box-shadow: inset 1px 1px 2px #888888,
|
|
82
|
-
inset -1px -1px 2px #fff;
|
|
83
|
-
}
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
.response-button-label {
|
|
88
|
-
text-align: center;
|
|
89
|
-
/* color: #eeeeee; */
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
.noselect {
|
|
93
|
-
-webkit-touch-callout: none; /* iOS Safari */
|
|
94
|
-
-webkit-user-select: none; /* Safari */
|
|
95
|
-
-khtml-user-select: none; /* Konqueror HTML */
|
|
96
|
-
-moz-user-select: none; /* Old versions of Firefox */
|
|
97
|
-
-ms-user-select: none; /* Internet Explorer/Edge */
|
|
98
|
-
user-select: none; /* Non-prefixed version, currently
|
|
99
|
-
supported by Chrome, Edge, Opera and Firefox */
|
|
100
|
-
touch-action: none;
|
|
101
|
-
}
|
|
102
|
-
|
|
103
|
-
.unpressable {
|
|
104
|
-
background-color: #aaaaaa;
|
|
105
|
-
box-shadow: inset 1px 1px 2px #888888,
|
|
106
|
-
inset -1px -1px 2px #fff;
|
|
107
|
-
pointer-events: none;
|
|
108
|
-
user-select: none;
|
|
1
|
+
/* REMOTE KEYPAD STYLING */
|
|
2
|
+
#keypad {
|
|
3
|
+
position: absolute;
|
|
4
|
+
width: 100%;
|
|
5
|
+
height: 100vh;
|
|
6
|
+
height: 100dvh;
|
|
7
|
+
|
|
8
|
+
display: grid;
|
|
9
|
+
grid-template-columns: 1fr;
|
|
10
|
+
/* Make header text as big as the text, keys take up as much space as needed, and control keys take up bottom space */
|
|
11
|
+
grid-template-rows: max-content auto;
|
|
12
|
+
|
|
13
|
+
align-items: center;
|
|
14
|
+
justify-content: center;
|
|
15
|
+
|
|
16
|
+
font-family: sans-serif;
|
|
17
|
+
}
|
|
18
|
+
#keypad-header {
|
|
19
|
+
height: 100%;
|
|
20
|
+
font-size: 1.5rem;
|
|
21
|
+
font-weight: 700;
|
|
22
|
+
text-align: center;
|
|
23
|
+
|
|
24
|
+
grid-row: 1;
|
|
25
|
+
overflow-y: auto;
|
|
26
|
+
|
|
27
|
+
border-radius: 0.5em;
|
|
28
|
+
|
|
29
|
+
box-shadow: inset 2px 2px 4px #888888,
|
|
30
|
+
inset -2px -2px 4px #fff;
|
|
31
|
+
}
|
|
32
|
+
#keypad-footer {
|
|
33
|
+
position: absolute;
|
|
34
|
+
font-size: smaller;
|
|
35
|
+
width: 100%;
|
|
36
|
+
bottom: 0;
|
|
37
|
+
right: 0;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
/* Grid of main keys themselves */
|
|
41
|
+
#keypad-keys {
|
|
42
|
+
/* Second row, within the keypad grid (ie whole page) */
|
|
43
|
+
grid-row: 2;
|
|
44
|
+
}
|
|
45
|
+
/* Hide scrollbar */
|
|
46
|
+
/* #keypad-keys::-webkit-scrollbar {
|
|
47
|
+
display: none;
|
|
48
|
+
} */
|
|
49
|
+
|
|
50
|
+
.response-button {
|
|
51
|
+
/* border: 1px solid red; */
|
|
52
|
+
cursor: pointer;
|
|
53
|
+
|
|
54
|
+
/* Center text within button */
|
|
55
|
+
display: flex;
|
|
56
|
+
align-items: center;
|
|
57
|
+
justify-content: center;
|
|
58
|
+
|
|
59
|
+
/* Curve corners of buttons */
|
|
60
|
+
border-radius: min(25px, 15%);
|
|
61
|
+
|
|
62
|
+
/* Style button text */
|
|
63
|
+
/* font-size: 3rem; */
|
|
64
|
+
font-size: xx-large;
|
|
65
|
+
font-weight: 700;
|
|
66
|
+
|
|
67
|
+
padding: 0;
|
|
68
|
+
margin: 0;
|
|
69
|
+
|
|
70
|
+
box-shadow: 1px 1px 2px #888888,
|
|
71
|
+
-1px -1px 2px #fff;
|
|
72
|
+
}
|
|
73
|
+
.response-button:active {
|
|
74
|
+
box-shadow: 1px 2px 2px 1px #999;
|
|
75
|
+
background-color: #aaa;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
/* Only do on a hover-enabled device, ie not a phone/tablet */
|
|
79
|
+
@media (hover: hover) {
|
|
80
|
+
.response-button:hover {
|
|
81
|
+
box-shadow: inset 1px 1px 2px #888888,
|
|
82
|
+
inset -1px -1px 2px #fff;
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
|
|
87
|
+
.response-button-label {
|
|
88
|
+
text-align: center;
|
|
89
|
+
/* color: #eeeeee; */
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.noselect {
|
|
93
|
+
-webkit-touch-callout: none; /* iOS Safari */
|
|
94
|
+
-webkit-user-select: none; /* Safari */
|
|
95
|
+
-khtml-user-select: none; /* Konqueror HTML */
|
|
96
|
+
-moz-user-select: none; /* Old versions of Firefox */
|
|
97
|
+
-ms-user-select: none; /* Internet Explorer/Edge */
|
|
98
|
+
user-select: none; /* Non-prefixed version, currently
|
|
99
|
+
supported by Chrome, Edge, Opera and Firefox */
|
|
100
|
+
touch-action: none;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
.unpressable {
|
|
104
|
+
background-color: #aaaaaa;
|
|
105
|
+
box-shadow: inset 1px 1px 2px #888888,
|
|
106
|
+
inset -1px -1px 2px #fff;
|
|
107
|
+
pointer-events: none;
|
|
108
|
+
user-select: none;
|
|
109
109
|
}
|