Skip to content
Snippets Groups Projects
Commit b7019a7e authored by hoppesyd's avatar hoppesyd
Browse files

added keyboard for ez tunes home page

parent 6654365f
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
configuration-eztunes-home.json 0 → 100755
+ 44
− 0
View file @ b7019a7e
{
"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
+ 19
− 3
View file @ b7019a7e
......@@ -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
+ 50
− 6
View file @ b7019a7e
......@@ -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
+ 48
− 0
View file @ b7019a7e
......@@ -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
+ 27
− 3
View file @ b7019a7e
......@@ -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)
}
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment