Merge add keys and smartphone tab

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>

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);

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%;

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())