configuration-eztunes-drum.json

+{
+}
\ No newline at end of file

configuration-eztunes-home.json

+{
+    "eztuneshomepad1": [
+        "On/Off",
+        "0",
+        "0",
+        "c"
+    ],
+    "eztuneshomepad2": [
+        "1",
+        "25",
+        "15",
+        "1"
+    ],
+    "eztuneshomepad3": [
+        "2",
+        "25",
+        "30",
+        "2"
+    ],
+    "eztuneshomepad4": [
+        "3",
+        "25",
+        "45",
+        "3"
+    ],
+    "eztuneshomepad5": [
+        "0",
+        "25",
+        "60",
+        "0"
+    ],
+    "eztuneshomepad6": [
+        "->",
+        "40",
+        "77.5",
+        "r"
+    ],
+    "eztuneshomepad7": [
+        "<-",
+        "10",
+        "77.5",
+        "v"
+    ]
+    ,
+    "eztuneshomepad8": [
+        "E1",
+        "75",
+        "10",
+        "q"
+    ]
+    ,
+    "eztuneshomepad9": [
+        "E2",
+        "75",
+        "25",
+        "b"
+    ]
+    ,
+    "eztuneshomepad10": [
+        "E3",
+        "75",
+        "40",
+        "n"
+    ]
+    ,
+    "eztuneshomepad11": [
+        "E4",
+        "75",
+        "55",
+        "m"
+    ]
+    ,
+    "eztuneshomepad12": [
+        "E5",
+        "75",
+        "70",
+        "z"
+    ]
+    ,
+    "eztuneshomepad13": [
+        "E6",
+        "75",
+        "85",
+        "x"
+    ]
+}
\ No newline at end of file

configuration-eztunes-piano.json

+{
+    "eztunespianopad1": [
+        "C#",
+        "5",
+        "20",
+        "w"
+    ],
+    "eztunespianopad2": [
+        "E♭",
+        "15",
+        "20",
+        "e"
+    ],
+    "eztunespianopad3": [
+        "F#",
+        "35",
+        "20",
+        "t"
+    ],
+    "eztunespianopad4": [
+        "A♭",
+        "45",
+        "20",
+        "y"
+    ],
+    "eztunespianopad5": [
+        "B♭",
+        "55",
+        "20",
+        "u"
+    ],
+    "eztunespianopad6": [
+        "C#",
+        "75",
+        "20",
+        "o"
+    ],
+    "eztunespianopad7": [
+        "E♭",
+        "85",
+        "20",
+        "p"
+    ],
+    "eztunespianopad8": [
+        "C",
+        "0",
+        "50",
+        "a"
+    ],
+    "eztunespianopad9": [
+        "D",
+        "10",
+        "50",
+        "s"
+    ],
+    "eztunespianopad10": [
+        "E",
+        "20",
+        "50",
+        "d"
+    ],
+    "eztunespianopad11": [
+        "F",
+        "30",
+        "50",
+        "f"
+    ],
+    "eztunespianopad12": [
+        "G",
+        "40",
+        "50",
+        "g"
+    ],
+    "eztunespianopad13": [
+        "A",
+        "50",
+        "50",
+        "h"
+    ],
+    "eztunespianopad14": [
+        "B",
+        "60",
+        "50",
+        "j"
+    ],
+    "eztunespianopad15": [
+        "C",
+        "70",
+        "50",
+        "k"
+    ],
+    "eztunespianopad16": [
+        "D",
+        "80",
+        "50",
+        "l"
+    ],
+    "eztunespianopad17": [
+        "E",
+        "90",
+        "50",
+        ";"
+    ]
+}
\ No newline at end of file

public/client.html

@@ -22,9 +22,10 @@
         <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 +35,13 @@
             <select id="customSelect">
             </select>
             <div class="swiper-container-inner">
-              <div class="swiper-wrapper" id="custom-container">
-              </div>
+              <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 +49,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 +74,15 @@
         <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">music_note</i>
+        </div>
+         <div class = "icon-selection" id= "eztunes-piano">
+          <i class="material-icons">straighten</i>
+        </div>
+         <div class = "icon-selection" id= "eztunes-drum">
+          <i class="material-icons">color_lense</i>
+        </div>
       </div>
 
     </div>
@@ -130,7 +142,36 @@
           <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>
+
+
+          <!-- EzTunes Piano Modal -->
+    <div id="eztunesPianoModal" class="modal">
+      <div id="modal-content" class="modal-content">
+         <div class = "eztunesPianoKeyboard" id="eztunesPianoKeyboard"> </div>
+         <button type="button" class="close" data-dismiss="modal">&times;</button>
+         <div>Turn Phone Horizontal For Best Experience!</div>
+      </div>
+    </div>
+
+
+          <!-- EzTunes Drum Modal -->
+    <div id="eztunesDrumModal" class="modal">
+      <div id="modal-content" class="modal-content">
+         <div class = "eztunesDrumKeyboard" id="eztunesDrumKeyboard"> </div>
+         <button type="button" class="close" data-dismiss="modal">&times;</button>
+         <div> Under Construction! </div>
+      </div>
+    </div>
+
 
     <script defer src="/public/vendor/jquery/dist/jquery.min.js"></script>
     <script defer src="/public/vendor/bootstrap/dist/js/bootstrap.min.js"></script>

public/js/client.js

@@ -8,6 +8,9 @@ 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 eztunesPianoModal = document.getElementById('eztunesPianoModal')
+var eztunesDrumModal = document.getElementById('eztunesDrumModal')
 var editModal = document.getElementById('edit-modal');// Modal textbox
 var inputModal = document.getElementById('inputText');
 var altText = document.getElementById('altText');
@@ -170,6 +173,9 @@ $('#edit-toggle').change(function(event) {
 $('.close').click(function() {
     settingsModal.style.display = "none";
     newBoardModal.style.display = "none";
+    eztunesHomeModal.style.display = "none";
+    eztunesPianoModal.style.display = "none";
+    eztunesDrumModal.style.display = "none";
 });
 
 $('#modal-close').click(function() {
@@ -231,6 +237,27 @@ $('.icon-selection').click(function() {
     }
     return;
   }
+
+  if (this.id == 'eztunes-home') {
+    // Bring up setting menu
+    eztunesHomeModal.style.display = "block";
+    return;
+  }
+
+  if (this.id == 'eztunes-piano') {
+    // Bring up setting menu
+    eztunesPianoModal.style.display = "block";
+    return;
+  }
+
+
+  if (this.id == 'eztunes-drum') {
+    // Bring up setting menu
+    eztunesDrumModal.style.display = "block";
+    return;
+  }
+
+
   if(!move){
 
     var newId = parseInt(this.id[1])
@@ -297,6 +324,48 @@ 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('updateEzTunesPiano', function(newVals) {
+  console.log(newVals);
+    for (var i = 0; i < newVals.x.length; i++){
+      $('#eztunesPianoKeyboard').append('<button class = "eztunesPianoButton activestyle key-button" name="' + newVals.altText[i] + '"id="eztunespianopad' + (i+1).toString() + '">' + newVals.k[i] + '</button>');
+      var ele = $('#eztunespianopad' + (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('updateEzTunesDrum', function(newVals) {
+  console.log(newVals);
+    for (var i = 0; i < newVals.x.length; i++){
+      $('#eztunesDrumKeyboard').append('<button class = "eztunesDrumButton activestyle key-button" name="' + newVals.altText[i] + '"id="eztunesdrumpad' + (i+1).toString() + '">' + newVals.k[i] + '</button>');
+      var ele = $('#eztunesdrumpad' + (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,10 +429,8 @@ var moddifier = "None"
 //Purpose: Emits the key of keyboard upon click
 var emitKey = function(str) {
    pos = {'str':str,'pw':passcode}
-
     if (move === false){
       socket.emit('string',pos);
-      console.log(pos);
     }
 };
 
@@ -507,12 +574,19 @@ interact('.custom-key').on('doubletap', function (event) {
 });
 
 interact('.key-button').on('tap', function (event) {
-
     if (event.target.id.indexOf("url-icon") != -1){
         emitKey({text: $("#" + event.target.id).parent().clone().children().remove().end().text().trim(), moddifier: moddifier})
     }
     else if(event.target.hasChildNodes()){
-        emitKey({text: $("#" + event.target.id).clone().children().remove().end().text().trim(), moddifier: moddifier})
+        if((event.target.className == "eztunesHomeButton activestyle key-button")
+          || (event.target.className == "eztunesPianoButton activestyle key-button")
+          || (event.target.className == "eztunesDrumButton activestyle key-button") )
+        {
+          emitKey({text:event.target.name, moddifier: moddifier})
+        }
+        else{
+          emitKey({text: $("#" + event.target.id).clone().children().remove().end().text().trim(), moddifier: moddifier})
+        }
     }
     else{
       emitKey({text: event.target.innerText, moddifier: moddifier});
@@ -766,4 +840,3 @@ $('#about').click(function() {
     open('https://github.com/jjlustig/EECS498_uBoard');
   }
 });
-

public/style/main.css

@@ -60,6 +60,129 @@ icon {
           transform: translate(0px, 0px);
 }
 
+.eztunesHomeButton {
+
+  /*Button Positioning and Size*/
+  width: 25%;
+  height: 15%;
+  /* 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%);
+  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);
+}
+
+.eztunesPianoButton {
+
+  /*Button Positioning and Size*/
+  width: 10%;
+  height: 30%;
+  /* 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%);
+  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);
+}
+
+.eztunesDrumButton {
+
+  /*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%);
+  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);
+}
+
 .activestyle:active:hover {
   -ms-transform: translate(0px, -40%); /* IE 9 */
   -webkit-transform: translate(0px, -40%); /* Safari */
@@ -274,6 +397,23 @@ icon {
   background-color: grey
 }
 
+#eztunes-home{
+  min-width: 15%;
+  background-color: grey
+}
+
+#eztunes-piano{
+  min-width: 15%;
+  background-color: grey
+}
+
+
+#eztunes-drum{
+  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,66 @@ 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 = []
+  var keyStyle = []
+
+  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]);
+    keyStyle.push(content[key][4]);
+  }
+  socket.emit('updateEzTunesHome', {k: keys, x: xpos, y: ypos, altText:altText, keyStyle:keyStyle});
+  content = []
+
+  //Load eztunes piano keyboard
+  var file = fs.readFileSync("configuration-eztunes-piano.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('updateEzTunesPiano', {k: keys, x: xpos, y: ypos, altText:altText});
+  content = []
+
+  //Load eztunes drum keyboard
+  var file = fs.readFileSync("configuration-eztunes-drum.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('updateEzTunesDrum', {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 +151,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 +168,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 +193,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)
@@ -142,8 +203,6 @@ io.on('connection', function(socket) {
       }
     }
 
-    console.log("Trying to type")
-    console.log(pos.str.text);
     if(pos.str.text.length === 1 && pos.str.moddifier != "None"){
       robot.keyTap(pos.str.text, pos.str.moddifier)
     }