From b7019a7ed1f1c3699164cfb83a7fe564c55bbaac Mon Sep 17 00:00:00 2001
From: hoppesyd <hoppesyd@umich.edu>
Date: Sun, 18 Nov 2018 20:46:17 -0500
Subject: [PATCH] added keyboard for ez tunes home page
---
configuration-eztunes-home.json | 44 ++++++++++++++++++++++++++
public/client.html | 22 +++++++++++--
public/js/client.js | 56 +++++++++++++++++++++++++++++----
public/style/main.css | 48 ++++++++++++++++++++++++++++
server.js | 30 ++++++++++++++++--
5 files changed, 188 insertions(+), 12 deletions(-)
create mode 100755 configuration-eztunes-home.json
diff --git a/configuration-eztunes-home.json b/configuration-eztunes-home.json
new file mode 100755
index 0000000..f2fd53e
--- /dev/null
+++ b/configuration-eztunes-home.json
@@ -0,0 +1,44 @@
+{
+ "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
diff --git a/public/client.html b/public/client.html
index 574ec68..03fb48d 100755
--- a/public/client.html
+++ b/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">×</button>
+ </div>
+ </div>
<script defer src="/public/vendor/jquery/dist/jquery.min.js"></script>
diff --git a/public/js/client.js b/public/js/client.js
index edd5ec2..24cefbf 100755
--- a/public/js/client.js
+++ b/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
diff --git a/public/style/main.css b/public/style/main.css
index a00735f..7a2e37e 100755
--- a/public/style/main.css
+++ b/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
diff --git a/server.js b/server.js
index d588dc4..378ba44 100755
--- a/server.js
+++ b/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)
}
--
GitLab