configuration-eztunes-home.json

+{
+    "eztuneshomepad1": [
+        "On/Off",
+        "40",
+        "0",
+        "t"
+    ],
+    "eztuneshomepad2": [
+        "1",
+        "20",
+        "0",
+        "1"
+    ],
+    "eztuneshomepad3": [
+        "2",
+        "20",
+        "20",
+        "2"
+    ],
+    "eztuneshomepad4": [
+        "3",
+        "20",
+        "40",
+        "3"
+    ],
+    "eztuneshomepad5": [
+        "0",
+        "20",
+        "60",
+        "0"
+    ],
+    "eztuneshomepad6": [
+        "->",
+        "30",
+        "60",
+        "r"
+    ],
+    "eztuneshomepad7": [
+        "<-",
+        "10",
+        "60",
+        "l"
+    ]
+}
\ No newline at end of file

public/client.html

@@ -22,9 +22,11 @@
         <div class="touchpad" id="mousepad"> </div> 
       </div>
       
+
       <div class="swiper-container">
+
         <div class="swiper-wrapper"> 
-          <div class = "keyboard swiper-slide swiper-slide-outer" id="keyboard"> </div>
+         <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>
@@ -34,12 +36,13 @@
             <select id="customSelect">
             </select>
             <div class="swiper-container-inner">
-              <div class="swiper-wrapper" id="custom-container">
-              </div>
             </div>
+
           </div>
         </div>
+
         <div class = "loading" id="loading">Loading...</div>
+
         <div class = "static-bar">
           <div class = "shift-toggle static-key static-key-default" id = "shift-toggle"> shift </div> 
           <div class = "ctrl-toggle static-key static-key-default" id = "ctrl-toggle"> ctrl </div> 
@@ -47,6 +50,7 @@
           <div class = "go-toggle static-key static-key-default" id = "go-toggle"> Go </div>  
           <div class = "backspace static-key static-key-default" id = "backspace"> del </div> 
         </div>
+
       </div>
 
       <div class = "navbar" id="navbar">
@@ -71,6 +75,9 @@
         <div class = "icon-selection" id= "settings-select">
           <i class="material-icons">settings</i>
         </div>
+        <div class = "icon-selection" id= "eztunes-home">
+          <i class="material-icons">settings</i>
+        </div>
       </div>
 
     </div>
@@ -130,6 +137,15 @@
           <button type="button" class="btn btn-default" data-dismiss="modal">Save</button>
         </div>
      </div>
+
+
+          <!-- EzTunes Home Modal -->
+    <div id="eztunesHomeModal" class="modal">
+      <div id="modal-content" class="modal-content">
+         <div class = "eztunesHomeKeyboard" id="eztunesHomeKeyboard"> </div>
+         <button type="button" class="close" data-dismiss="modal">&times;</button>
+      </div>
+    </div>
        
 
     <script defer src="/public/vendor/jquery/dist/jquery.min.js"></script>

public/js/client.js

@@ -8,6 +8,7 @@ var socket = io();
 var move = false; //Toggles moving functionality
 var updateKey; // Modal overlay
 var settingsModal = document.getElementById('myModal');// Modal textbox
+var eztunesHomeModal = document.getElementById('eztunesHomeModal')
 var editModal = document.getElementById('edit-modal');// Modal textbox
 var inputModal = document.getElementById('inputText');
 var altText = document.getElementById('altText');
@@ -170,6 +171,7 @@ $('#edit-toggle').change(function(event) {
 $('.close').click(function() {
     settingsModal.style.display = "none";
     newBoardModal.style.display = "none";
+    eztunesHomeModal.style.display = "none";
 });
 
 $('#modal-close').click(function() {
@@ -231,6 +233,14 @@ $('.icon-selection').click(function() {
     }
     return;
   }
+
+  if (this.id == 'eztunes-home') {
+    // Bring up setting menu
+    eztunesHomeModal.style.display = "block";
+
+    return;
+  }
+
   if(!move){
 
     var newId = parseInt(this.id[1])
@@ -289,7 +299,7 @@ socket.on('updateKeys', function(newVals) {
   console.log(newVals);
     for (var i = 0; i < newVals.x.length; i++){
       //special case 
-      $('#keyboard').append('<button class = "draggable activestyle key-button" id="button' + (i+1).toString() + '">' + newVals.k[i] + '</button>');
+      $('#keyboard').append('<button class = "draggable activestyle key-button" alt="5" id="button' + (i+1).toString() + '">' + newVals.k[i] + '</button>');
       var ele = $('#button' + (i+1).toString())
       ele.text(newVals.k[i])
       ele.css({position:'absolute', left:newVals.x[i] + '%', top:(newVals.y[i]) + '%', minHeight: (keyboardWidth*.02).toString() + "px"});
@@ -297,6 +307,20 @@ socket.on('updateKeys', function(newVals) {
     $('#loading').hide();
   });
 
+
+//Purpose: Receives information from the server to update the presentation of the keys on the client
+socket.on('updateEzTunesHome', function(newVals) {
+  console.log(newVals);
+    for (var i = 0; i < newVals.x.length; i++){
+      $('#eztunesHomeKeyboard').append('<button class = "eztunesHomeButton activestyle key-button" name="' + newVals.altText[i] + '"id="eztuneshomepad' + (i+1).toString() + '">' + newVals.k[i] + '</button>');
+      var ele = $('#eztuneshomepad' + (i+1).toString())
+      //ele.my_test(newVals.k[i])
+      ele.text(newVals.k[i])
+      console.log(newVals.k[i])
+      ele.css({position:'absolute', left:newVals.x[i] + '%', top:(newVals.y[i]) + '%', minHeight: (keyboardWidth*.02).toString() + "px"});
+    }
+  });
+
 //Purpose: Receives information from the server to update the presentation of the keys on the client
 socket.on('updateUrls', function(newVals) {
   console.log(newVals);
@@ -360,7 +384,8 @@ var moddifier = "None"
 //Purpose: Emits the key of keyboard upon click
 var emitKey = function(str) {
    pos = {'str':str,'pw':passcode}
-
+    console.log("emit key")
+    console.log(str)
     if (move === false){
       socket.emit('string',pos);
       console.log(pos);
@@ -507,15 +532,35 @@ interact('.custom-key').on('doubletap', function (event) {
 });
 
 interact('.key-button').on('tap', function (event) {
-
+    console.log("Key")
+    console.log(event)
     if (event.target.id.indexOf("url-icon") != -1){
+        console.log("My event1")
+        console.log(event)
         emitKey({text: $("#" + event.target.id).parent().clone().children().remove().end().text().trim(), moddifier: moddifier})
+        console.log("Key")
+        console.log(event.target.id)
     }
     else if(event.target.hasChildNodes()){
-        emitKey({text: $("#" + event.target.id).clone().children().remove().end().text().trim(), moddifier: moddifier})
+        console.log("My event2")
+        console.log(event.target.className)
+        console.log(event.target.name)
+        if(event.target.className == "eztunesHomeButton activestyle key-button")
+        {
+          emitKey({text:event.target.name, moddifier: moddifier})
+        }
+        else{
+          emitKey({text: $("#" + event.target.id).clone().children().remove().end().text().trim(), moddifier: moddifier})
+        }
+        console.log("Key")
+        console.log(event.target.id)
     }
     else{
+      console.log("My event3")
+      console.log(event)
       emitKey({text: event.target.innerText, moddifier: moddifier});
+      console.log("Key")
+        console.log(event.target.id)
     }
   });
 
@@ -765,5 +810,4 @@ $('#about').click(function() {
   if (confirm('UBoard: A mobile mouse for Brad')) {
     open('https://github.com/jjlustig/EECS498_uBoard');
   }
-});
-
+});
\ No newline at end of file

public/style/main.css

@@ -42,6 +42,49 @@ icon {
 
 
   
+  /*Button Coloring*/
+  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0F0FFF), color-stop(1, #0000A8));
+  background-image: -webkit-linear-gradient(top, #0F0FFF 0%, #0000A8 100%);
+  background-image: linear-gradient(to bottom, #0F0FFF 0%, #0000A8 100%);
+  background-image: -webkit-linear-gradient(93deg, #0000A8 0%, #0F0FFF 100%);
+  color: #fff;
+
+  /*Text display options*/
+  display:table-cell;
+  vertical-align:middle;
+
+  /*Stops Browser Action for Chrome and Safari*/ 
+  touch-action: none;
+  -webkit-user-select: none;
+  -webkit-transform: translate(0px, 0px);
+          transform: translate(0px, 0px);
+}
+
+.eztunesHomeButton {
+
+  /*Button Positioning and Size*/
+  width: 10%;
+  height: 20%;
+  /* margin: 1%; */
+  /* margin-top: 3%; */
+  border-radius: 1.5em;
+  /* padding: 4%; */
+  font-size: 16px;
+  font-weight: 800;
+  text-align: center;
+  position: absolute;  
+/*  width: 6%;
+  height: 18%;
+  margin: 2%;
+  margin-top: 3%;
+  border-radius: 2em;
+  padding: 1%;
+  font-size: 15px;
+  text-align: center;
+  line-height: 100%;*/
+
+
+  
   /*Button Coloring*/
   background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0F0FFF), color-stop(1, #0000A8));
   background-image: -webkit-linear-gradient(top, #0F0FFF 0%, #0000A8 100%);
@@ -274,6 +317,11 @@ icon {
   background-color: grey
 }
 
+#eztunes-home{
+  min-width: 15%;
+  background-color: grey
+}
+
 #swap{
   min-width: 15%;
   background-color: grey

server.js

@@ -63,10 +63,10 @@ io.on('connection', function(socket) {
     console.log('user disconnected');
   });
 
+
   var keys = []
   var xpos = []
   var ypos = []
-
   //Load default keyboard
   var file = fs.readFileSync("configuration.json")  
   var content = JSON.parse(file)
@@ -77,8 +77,28 @@ io.on('connection', function(socket) {
     ypos.push(content[key][2]);
   }
   socket.emit('updateKeys', {k: keys, x: xpos, y: ypos});
+  content = []
+
+
+ //Load eztunes keyboard
+  var file = fs.readFileSync("configuration-eztunes-home.json")  
+  var content = JSON.parse(file)
+
+  var keys = []
+  var xpos = []
+  var ypos = []
+  var altText = []
+
+  for (var key in content) {
+    keys.push(content[key][0]);
+    xpos.push(content[key][1]);
+    ypos.push(content[key][2]);
+    altText.push(content[key][3]);
+  }
+  socket.emit('updateEzTunesHome', {k: keys, x: xpos, y: ypos, altText:altText});
+  content = []
+
 
-   content = []
   //Load default numpad
   var file = fs.readFileSync("numpad.json")  
   var content = JSON.parse(file)
@@ -93,8 +113,9 @@ io.on('connection', function(socket) {
     ypos.push(content[key][2]);
   }
   socket.emit('updateNumPad', {k: keys, x: xpos, y: ypos});
-   
   content = []
+
+
   //Load default urls
   var file = fs.readFileSync("url.json")  
   content = JSON.parse(file)
@@ -109,6 +130,7 @@ io.on('connection', function(socket) {
     ypos.push(content[key][2]);
   }
   socket.emit('updateUrls', {k: keys, x: xpos, y: ypos});
+  content = []
 
   //Load custom keyboards
   var lineReader = require('readline').createInterface({
@@ -133,6 +155,7 @@ io.on('connection', function(socket) {
       socket.emit('updateCustom', {fname: line.slice(6,-5), k: keys, x: xpos, y: ypos, altText:altText});
     });
 
+
   //Keyboard Functionality
   socket.on('string', function(pos) {
     console.log(config.passcode)
@@ -144,6 +167,7 @@ io.on('connection', function(socket) {
 
     console.log("Trying to type")
     console.log(pos.str.text);
+    console.log(pos)
     if(pos.str.text.length === 1 && pos.str.moddifier != "None"){
       robot.keyTap(pos.str.text, pos.str.moddifier)
     }