diff --git a/public/client.html b/public/client.html
index dc37f1ee5c07c41729f49e6b4f1073880cf1ff7b..b3bacfad1a3ce2f733d1926d38189a01869cd427 100755
--- a/public/client.html
+++ b/public/client.html
@@ -26,8 +26,12 @@
<div class="swiper-wrapper">
<div class = "keyboard swiper-slide swiper-slide-outer" id="keyboard"> </div>
<div class = "numpad swiper-slide swiper-slide-outer" id="numpad"> </div>
+ <div class = "textfield swiper-slide swiper-slide-outer" id="textfieldcontainer">
+ <textarea class= "textfield" id="textfield" type="text" placeholder="Type here and press enter to send to desktop"></textarea>
+ </div>
<div class = "hotkeys swiper-slide swiper-slide-outer" id="hotkeys"> </div>
<div class="swiper-slide swiper-slide-outer">
+
<div class="swiper-container-inner">
<div class="swiper-wrapper" id="custom-container">
</div>
diff --git a/public/js/client.js b/public/js/client.js
index 1ac7778f641f71fc98ee6895917e033b658ff0cb..f0ec876a61f8ab34266346126e5055899d79833b 100755
--- a/public/js/client.js
+++ b/public/js/client.js
@@ -226,22 +226,71 @@ var emitUrl = function(str) {
interact('.custom-key').draggable(draggableSettings);
- function dragMoveListener (event) {
- if (move === true){
- var target = event.target,
- // keep the dragged position in the data-x/data-y attributes
- x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
- y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
- // translate the element
- target.style.webkitTransform =
- target.style.transform =
- 'translate(' + x + 'px, ' + y + 'px)';
- // update the posiion attributes
- target.setAttribute('data-x', x);
- target.setAttribute('data-y', y);
- }
+var emitText = function(text) {
+ if (move === false){
+ console.log(text);
+ socket.emit('text', text);
+ }
+};
+
+$( "#textfield" ).keydown(function(event) {
+ if (event.key === 'Enter') { // enter
+ emitText(document.getElementById('textfield').value);
+ event.preventDefault();
+ if (document.getElementById('textfield').value === '') {
+ socket.emit('functionality', 'enter');
}
+ document.getElementById('textfield').value = '';
+ }
+ else if (event.key === 'Backspace' && document.getElementById('textfield').value === "") { // backspace
+ socket.emit('functionality', 'backspace');
+ }
+ else if (event.key.startsWith('Arrow') && document.getElementById('textfield').value === "") { // arrow keys
+ socket.emit('functionality', event.key);
+ }
+ else if (event.keyCode === 32 && document.getElementById('textfield').value === '') { // space
+ socket.emit('functionality', 'Space');
+ document.getElementById('textfield').value = '';
+ }
+});
+
+//Purpose: Uses interact.js library to enable keys to move around
+interact('.draggable').draggable({
+ snap: {
+ targets: [
+ interact.createSnapGrid({ x: .05*keyboardWidth, y: .1*keyboardHeight })
+ ],
+ range: Infinity
+ },
+ inertia: true, // enable inertial throwing
+ restrict: {
+ restriction: "parent", // keep the element within the area of it's parent
+ endOnly: true,
+ elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
+ },
+ autoScroll: true, // enable autoScroll
+ onmove: dragMoveListener, // call this function on every dragmove event
+ onend: function (event) { // call this function on every dragend event
+ }
+ });
+
+function dragMoveListener (event) {
+ if (move === true){
+ var target = event.target,
+ // keep the dragged position in the data-x/data-y attributes
+ x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
+ y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
+ // translate the element
+ target.style.webkitTransform =
+ target.style.transform =
+ 'translate(' + x + 'px, ' + y + 'px)';
+ // update the posiion attributes
+ target.setAttribute('data-x', x);
+ target.setAttribute('data-y', y);
+ }
+}
+
//Purpose: Event listener on tapping the keys
interact('.key-button').on('tap', function (event) {
emitKey(event.target.innerText);
diff --git a/public/style/main.css b/public/style/main.css
index fdbc3a22d4c8278d05b09fd2145c7cf8d1ab7164..fb6c4d6dee31af7785f5b3e06abe2820fe5f2663 100755
--- a/public/style/main.css
+++ b/public/style/main.css
@@ -83,14 +83,12 @@ mark {
.swiper-wrapper{
height: 85%;
- width: 400%;
+ width: 500%;
position: relative;
}
.static-bar{
- min-height: 15%
- touch-action: none;
- -webkit-user-select: none;
+ height: 15%
}
.static-key{
@@ -114,6 +112,17 @@ mark {
transform: translate(0px, 0px);
}
+.static-key:active:hover {
+ -ms-transform: translate(0px, -40%); /* IE 9 */
+ -webkit-transform: translate(0px, -40%); /* Safari */
+ transform: translate(0px, -40%);
+ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #00bbd4), color-stop(1, #3f51b5));
+ background-image: -webkit-linear-gradient(top, #00bbd4 0%, #3f51b5 100%);
+ background-image: linear-gradient(to bottom, #00bbd4 0%, #3f51b5 100%);
+ background-image: -webkit-linear-gradient(273deg, #3f51b5 0%, #00bbd4 100%);
+ color: #fff;
+}
+
.shift-toggle{
min-width: 10%
}
@@ -164,10 +173,6 @@ mark {
position: relative;
}
-#numpad{
- background-color: purple;
-}
-
.touchpad{
text-align: center;
touch-action: none;
@@ -206,6 +211,11 @@ mark {
background-color: grey;
float: left;
}
+#textfield{
+ height: 100%;
+ width: 100%;
+ font-size: 30px;
+}
.wrapper{
height: 100%;
width: 100%;
diff --git a/server.js b/server.js
index cab84bd6bee243bacf84a495f490ed8e8dc4bc62..ec2435a9ba04eaecd9fa7db64fa98bf5b6e94a5e 100755
--- a/server.js
+++ b/server.js
@@ -140,9 +140,41 @@ io.on('connection', function(socket) {
robot.keyTap('backspace');
}
else{
- robot.typeString(str)
+ robot.typeString(str);
}
});
+
+ socket.on('functionality', function(type) {
+ console.log(type);
+ switch (type) {
+ case 'backspace':
+ robot.keyTap('backspace');
+ break;
+ case 'enter':
+ robot.keyTap('enter');
+ break;
+ case 'ArrowUp':
+ robot.keyTap('up');
+ break;
+ case 'ArrowDown':
+ robot.keyTap('down');
+ break;
+ case 'ArrowLeft':
+ robot.keyTap('left');
+ break;
+ case 'ArrowRight':
+ robot.keyTap('right');
+ break;
+ case 'Space':
+ robot.keyTap('space');
+ break;
+ }
+ });
+
+ socket.on('text', function(text) {
+ console.log('Typing ' + text);
+ robot.typeString(text);
+ });
socket.on('saveKey', function(key) {
console.log(key.index.toString())