diff --git a/configuration-eztunes-drum.json b/configuration-eztunes-drum.json
new file mode 100755
index 0000000000000000000000000000000000000000..7a73a41bfdf76d6f793007240d80983a52f15f97
--- /dev/null
+++ b/configuration-eztunes-drum.json
@@ -0,0 +1,2 @@
+{
+}
\ No newline at end of file
diff --git a/configuration-eztunes-home.json b/configuration-eztunes-home.json
index f2fd53edb17a0fabd7ff5ee444d5ab633e0902e1..4ae6909c86e6d0a6c3e47c465c09c429d521becb 100755
--- a/configuration-eztunes-home.json
+++ b/configuration-eztunes-home.json
@@ -1,44 +1,86 @@
{
"eztuneshomepad1": [
"On/Off",
- "40",
+ "0",
"0",
"t"
],
"eztuneshomepad2": [
"1",
- "20",
- "0",
+ "25",
+ "15",
"1"
],
"eztuneshomepad3": [
"2",
- "20",
- "20",
+ "25",
+ "30",
"2"
],
"eztuneshomepad4": [
"3",
- "20",
- "40",
+ "25",
+ "45",
"3"
],
"eztuneshomepad5": [
"0",
- "20",
+ "25",
"60",
"0"
],
"eztuneshomepad6": [
"->",
- "30",
- "60",
+ "40",
+ "77.5",
"r"
],
"eztuneshomepad7": [
"<-",
"10",
- "60",
+ "77.5",
"l"
]
+ ,
+ "eztuneshomepad8": [
+ "E1",
+ "75",
+ "10",
+ "q"
+ ]
+ ,
+ "eztuneshomepad9": [
+ "E2",
+ "75",
+ "25",
+ "w"
+ ]
+ ,
+ "eztuneshomepad10": [
+ "E3",
+ "75",
+ "40",
+ "a"
+ ]
+ ,
+ "eztuneshomepad11": [
+ "E4",
+ "75",
+ "55",
+ "s"
+ ]
+ ,
+ "eztuneshomepad12": [
+ "E5",
+ "75",
+ "70",
+ "z"
+ ]
+ ,
+ "eztuneshomepad13": [
+ "E6",
+ "75",
+ "85",
+ "x"
+ ]
}
\ No newline at end of file
diff --git a/configuration-eztunes-piano.json b/configuration-eztunes-piano.json
new file mode 100755
index 0000000000000000000000000000000000000000..8eef08f365dde0fa0acb6a5ded932377ed0ebc54
--- /dev/null
+++ b/configuration-eztunes-piano.json
@@ -0,0 +1,104 @@
+{
+ "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
diff --git a/public/client.html b/public/client.html
index 03fb48d9edc488f3cb14fa576ce4097ff09c690c..0c2c034cc5554405fe4e17f0d7aa4758d38cf6c2 100755
--- a/public/client.html
+++ b/public/client.html
@@ -24,7 +24,6 @@
<div class="swiper-container">
-
<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>
@@ -36,8 +35,8 @@
<select id="customSelect">
</select>
<div class="swiper-container-inner">
+ <div class="swiper-wrapper" id="custom-container"> </div>
</div>
-
</div>
</div>
@@ -76,7 +75,13 @@
<i class="material-icons">settings</i>
</div>
<div class = "icon-selection" id= "eztunes-home">
- <i class="material-icons">settings</i>
+ <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>
@@ -146,7 +151,26 @@
<button type="button" class="close" data-dismiss="modal">×</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">×</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">×</button>
+ </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>
diff --git a/public/js/client.js b/public/js/client.js
index 24cefbfe6b8bef6b3e41ad53ad584a164504bd2f..86e007a67c4486379dbdeaf2fc9b029616e10003 100755
--- a/public/js/client.js
+++ b/public/js/client.js
@@ -9,6 +9,8 @@ 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');
@@ -172,6 +174,8 @@ $('.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() {
@@ -237,10 +241,23 @@ $('.icon-selection').click(function() {
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])
@@ -299,7 +316,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" alt="5" id="button' + (i+1).toString() + '">' + newVals.k[i] + '</button>');
+ $('#keyboard').append('<button class = "draggable activestyle key-button" 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"});
@@ -321,6 +338,34 @@ socket.on('updateEzTunesHome', function(newVals) {
}
});
+//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);
@@ -545,7 +590,9 @@ interact('.key-button').on('tap', function (event) {
console.log("My event2")
console.log(event.target.className)
console.log(event.target.name)
- if(event.target.className == "eztunesHomeButton activestyle key-button")
+ 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})
}
@@ -810,4 +857,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
+});
diff --git a/public/style/main.css b/public/style/main.css
index 7a2e37ec0d7e996189d28efc6e11f10039393521..6aee9cfe5f01f3d0894332e02ed9c3a6be2fe011 100755
--- a/public/style/main.css
+++ b/public/style/main.css
@@ -62,9 +62,50 @@ icon {
.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: 20%;
+ height: 30%;
/* margin: 1%; */
/* margin-top: 3%; */
border-radius: 1.5em;
@@ -83,8 +124,47 @@ icon {
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%);
@@ -322,6 +402,18 @@ icon {
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
diff --git a/server.js b/server.js
index 378ba4488c92869304e4721cd134e8f5d19f0ab0..b696d5e8b1872a4228d46a4236a56a330da6bfc1 100755
--- a/server.js
+++ b/server.js
@@ -88,14 +88,52 @@ io.on('connection', function(socket) {
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});
+ 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 = []