From dece969c8fade4ea5473c1f5fe29ccb2bc03a67b Mon Sep 17 00:00:00 2001 From: Chris Sita Date: Wed, 14 Aug 2013 00:08:38 -0700 Subject: [PATCH] Bug fixes, synthetic click, pinch / zoom, synthetic scroll --- README.md | 1 + app.js | 1 - chromeExt/backgroundApp/background.js | 35 +++----- chromeExt/browseraction/qrinit.js | 0 chromeExt/pointer_chromeConnect.css | 2 +- chromeExt/script.js | 111 +++++++++----------------- package.json | 2 +- public/javascripts/chromeConnect.js | 30 ++++--- public/lib/inobounce.min.js | 1 - routes/index.js | 8 -- routes/user.js | 8 -- views/index.jade | 5 -- views/layout.jade | 7 -- 13 files changed, 71 insertions(+), 140 deletions(-) delete mode 100644 chromeExt/browseraction/qrinit.js delete mode 100755 public/lib/inobounce.min.js delete mode 100644 routes/index.js delete mode 100644 routes/user.js delete mode 100644 views/index.jade delete mode 100644 views/layout.jade diff --git a/README.md b/README.md index 533a921..65da17f 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,3 @@ chromeConnect ============= +TODO diff --git a/app.js b/app.js index 1c22da8..5731544 100644 --- a/app.js +++ b/app.js @@ -53,7 +53,6 @@ io.sockets.on('connection', function(socket){ socket.on('initiateController', function(data){ var isValidSession = data.sessionHash; - //console.log("isValidSession ___________ ", isValidSession); // Cycle through all the desktop clients and find the browser with the same token as the mobile device if (isValidSession in socketCodes){ // emit to Desktop Pair diff --git a/chromeExt/backgroundApp/background.js b/chromeExt/backgroundApp/background.js index 109e0a9..e08d3b6 100644 --- a/chromeExt/backgroundApp/background.js +++ b/chromeExt/backgroundApp/background.js @@ -73,13 +73,11 @@ var socketConnection = function(type, tabID, windowID) { console.log('error'); }); socket.on('connect', function(){ - console.log('Socket Connected', socket); socket.emit('initiateDesktop', {"sessionTab": tabID, "sessionWindow": windowID}); }); socket.on('desktopAccessToken', function(data){ chrome.tabs.query({active:true, currentWindow:true}, function(tabs){ - console.log(tabs); var current = tabs[0]; chrome.extension.sendMessage({ @@ -87,8 +85,6 @@ var socketConnection = function(type, tabID, windowID) { "token": data }); }); - - console.log("Go to www.chromeconnect.nodejitsu.com/" + data); }); socket.on('linkMobileDevice', function(data){ @@ -102,17 +98,17 @@ var socketConnection = function(type, tabID, windowID) { } chrome.browserAction.setBadgeBackgroundColor({color: "#FF0000"}); chrome.browserAction.setBadgeText({text: "Live"}); - console.log("Verify: ", data); + // console.log("Verify: ", data); }); socket.on('swipe', function(data){ var notificationType = {"type": "swipe", "swipeDirection":data.direction, "fingerCount":data.fingerCount, "swipeDuration": data.duration, "swipDistance":data.distance}; - console.log("Swipe direction is " + data.direction + " using " + data.fingerCount + " fingers" + " the distance is " + data.distance + " the duration is " + data.duration); + // console.log("Swipe direction is " + data.direction + " using " + data.fingerCount + " fingers" + " the distance is " + data.distance + " the duration is " + data.duration); chrome.tabs.sendMessage(activeTab, notificationType); }); socket.on('move', function(data){ - console.log("Move Data", data); + // console.log("Move Data", data); var notificationType = {"type": "navigation", "xVal" : data.dx, "yVal" : data.dy}; chrome.tabs.sendMessage(activeTab, notificationType); @@ -121,51 +117,42 @@ var socketConnection = function(type, tabID, windowID) { socket.on('pinchIn', function(data){ var notificationType = {"type": "pinchIn", "zoomScale" : data.zoomScale}; chrome.tabs.sendMessage(activeTab, notificationType); - console.log("You pinched " + data.direction + " by " + data.distance + "px, zoom scale is "+ data.zoomScale); + // console.log("You pinched " + data.direction + " by " + data.distance + "px, zoom scale is "+ data.zoomScale); }); socket.on('pinchOut', function(data){ var notificationType = {"type": "pinchOut", "zoomScale" : data.zoomScale}; chrome.tabs.sendMessage(activeTab, notificationType); - console.log("You pinched " + data.direction + " by " + data.distance + "px, zoom scale is "+ data.zoomScale); + // console.log("You pinched " + data.direction + " by " + data.distance + "px, zoom scale is "+ data.zoomScale); }); socket.on('zoomTapUndo', function(data){ - console.log('zoomTapUndo'); + // console.log('zoomTapUndo'); var notificationType = {"type": "zoomTapUndo"}; chrome.tabs.sendMessage(activeTab, notificationType); }); socket.on('zoomTap', function(data){ - console.log('zoomTap'); + // console.log('zoomTap'); var notificationType = {"type": "zoomTap"}; chrome.tabs.sendMessage(activeTab, notificationType); }); socket.on('click', function(data){ - console.log('click'); + // console.log('click'); var notificationType = {"type": "click"}; chrome.tabs.sendMessage(activeTab, notificationType); }); - } + } if(type === 'disconnectSocketConnection'){ socket.disconnect(); - console.log('You Have Been Disconnected'); + // console.log('You Have Been Disconnected'); } if(type === 'enableMouseControl'){ var notificationType = {"type": "fixedPointerOn"}; chrome.tabs.sendMessage(activeTab, notificationType); } -};// End socketConnection - - -// // send a message to the content script -// var loadSocketsLibary = function() { -// chrome.tabs.query({active: true, currentWindow: true}, function(tabs) { -// chrome.tabs.sendMessage(tabs[0].id, {type: "loadSocketIO"}); -// chrome.browserAction.setBadgeText({text: "connected!"}); -// }); -// }; \ No newline at end of file +}; // End socketConnection diff --git a/chromeExt/browseraction/qrinit.js b/chromeExt/browseraction/qrinit.js deleted file mode 100644 index e69de29..0000000 diff --git a/chromeExt/pointer_chromeConnect.css b/chromeExt/pointer_chromeConnect.css index bfe0ff6..a0bac5c 100644 --- a/chromeExt/pointer_chromeConnect.css +++ b/chromeExt/pointer_chromeConnect.css @@ -16,7 +16,7 @@ width: 100%; height: 100%; background: rgba(0,0,0,0.8); - opacity: 0; + opacity: 1; -webkit-transition: opacity 400ms ease-in; } diff --git a/chromeExt/script.js b/chromeExt/script.js index fd2379c..2295e92 100644 --- a/chromeExt/script.js +++ b/chromeExt/script.js @@ -13,10 +13,9 @@ var lastPinchOutTotal = 0; var lastPinchInTotal = 0; // Listener for calculating Mouse X and Y position. -element.addEventListener("mousemove", function(event){ - tempClientX = event.clientX; - tempClientY = event.clientY; - +element.addEventListener("mousemove", function(e){ + tempClientX = (window.Event) ? e.pageX : event.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft); + tempClientY = (window.Event) ? e.pageY : event.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop); }); chrome.extension.onMessage.addListener(function(request, sender, sendResponse) { @@ -37,23 +36,17 @@ chrome.extension.onMessage.addListener(function(request, sender, sendResponse) { } else if (request.type === "pinchOutTotal"){ lastPinchOutTotal = request.zoomScale; } else if (request.type === "zoomTapUndo"){ - console.log('zoomTapUndo'); zoom.out(); } else if (request.type === "zoomTap"){ - console.log('zoomTap'); zoom.to({x: tempClientX,y: tempClientY,scale: 3}); } else if (request.type === "click"){ - console.log('Firing Click'); createClick(); } }); var pinchPageIn = function (zoomScale){ - console.log('Increasing Zoom'); - console.log('lastPinchInTotal', lastPinchInTotal); - var pinchAmount = zoomScale * .2; - var scaleIn = (pinchAmount + (lastPinchInTotal * .2)).toFixed(2); - console.log('scaleIn', scaleIn); + var pinchAmount = zoomScale * .5; + var scaleIn = (pinchAmount + (lastPinchInTotal * .5)).toFixed(2); if (scaleIn >= 1.0 && scaleIn <= 3.0) { setOrigin(tempClientX,tempClientY); document.body.style.setProperty("-webkit-transform", "scale(" + scaleIn + "," + scaleIn + ")", null); @@ -72,10 +65,10 @@ var setOrigin = function(x, y){ var pinchPageOut = function (zoomScale){ - var pinchAmount = zoomScale * .7 ; - var scaleOut = (pinchAmount - (lastPinchOutTotal * .7)).toFixed(2); - console.log('scaleOut', scaleOut); + var pinchAmount = zoomScale; + var scaleOut = (pinchAmount - (lastPinchOutTotal)).toFixed(2); if(scaleOut <= 1.0){ + zoom.out(); return false; } else { document.body.style.setProperty("-webkit-transform", "scale(" + scaleOut + "," + scaleOut + ")", null); @@ -100,7 +93,6 @@ var pageScroll = function(direction,distance,duration){ }; var smoothScroll = function (distance, direction) { - var startPosition; if(direction === "vertical"){ startPosition = self.pageYOffset; @@ -179,7 +171,6 @@ var pageToporBottom = function(direction, duration){ var fixedPointerOn = function(){ - console.log('Creating Splah'); var newDiv = document.createElement('image'); newDiv.id = 'testSpash'; document.body.appendChild(newDiv); @@ -189,7 +180,7 @@ var fixedPointerOn = function(){ // Pointer Control element.addEventListener("click", function (e) { if (e.target.id === "testSpash"){ - console.log('I clicked on test splash'); + //Check whether browser supports locking or not var havePointerLock = 'webkitPointerLockElement' in document; if (havePointerLock) { @@ -213,7 +204,7 @@ element.addEventListener("click", function (e) { } else { alert("Your browser does not support Pointer Lock, Please Upgrade it"); } - } + } }); @@ -227,60 +218,36 @@ var makePointer = function() { var movePointer = function(xPos, yPos, type) { - console.log(type); var pointer = document.getElementById("newPointer_chromeConnect"); if (type === "nativeDirection"){ pointer.style.left = xPos+'px'; pointer.style.top = yPos+'px'; } else { - console.log("Syn tempX before", tempX); - console.log("Syn tempY before", tempY); - tempX += xPos; - tempY += yPos; - console.log("Syn tempX after", tempX); - console.log("Syn tempY after", tempY); - currentX = tempX / 10; - currentY = tempY / 10; - console.log("Syn currentX", currentX); - console.log("Syn currentY", currentY); - pointer.style.left = currentX +'px'; - pointer.style.top = currentY +'px'; + tempX += xPos; + tempY += yPos; + currentX = tempX + tempClientX; + currentY = tempY + tempClientY; + if(currentX <= 0 || currentX >= windowWidth || currentY <= 0 || currentY >= windowHeight){ + document.webkitExitPointerLock(); + } else { + pointer.style.left = currentX +'px'; + pointer.style.top = currentY +'px'; + } } }; var moveCallback = function (e) { - console.log("Navtive tempX before", tempX); - console.log("Navtive tempY before", tempY); - console.log("Navtive e.webkitMovementX", e.webkitMovementX); - console.log("Navtive e.webkitMovementY", e.webkitMovementY); tempX += e.webkitMovementX; tempY += e.webkitMovementY; - console.log("Navtive tempX after", tempX); - console.log("Navtive tempY after", tempY); - console.log("Navtive tempClientX", tempClientX); - console.log("Navtive tempClientY", tempClientY); - console.log("Navtive currerntX before", currentX); - console.log("Navtive currentY before", currentY); currentX = tempX + tempClientX; currentY = tempY + tempClientY; - console.log("Navtive currerntX after", currentX); - console.log("Navtive currentY after", currentY); - if(currentX <= 0 || currentX >= windowWidth || currentY <= 0 || currentY >= windowHeight){ - // Creates a mouse move event that puts the native mouse in the last position of the synthetic mouse. - // console.log('Off screen'); - // var ee = document.createEvent("MouseEvents"); - // x = currentX; - // y = currentY; - // ee.initMouseEvent("mousemove", true, true, null, 1,x,y,x,y); - // //var target = document.elementFromPoint(x, y); - // document.dispatchEvent(ee); - document.webkitExitPointerLock(); - - return; + if(currentX <= 0 || currentX >= windowWidth || currentY <= 0 || currentY >= windowHeight){ + document.webkitExitPointerLock(); + return; } else{ movePointer(currentX,currentY,"nativeDirection"); } @@ -289,14 +256,12 @@ var moveCallback = function (e) { var logClick = function (e){ - console.log('Clicking'); - console.log(e._isSynthetic); if (e._isSynthetic){ return; } var ee = document.createEvent("MouseEvents"); ee._isSynthetic = true; - x = currentX; + x = currentX ; y = currentY; ee.initMouseEvent("click", true, true, null, 1, x + e.screenX - e.clientX, @@ -304,7 +269,6 @@ var logClick = function (e){ x,y,e.ctrlKey, e.altKey, e.shiftKey, e.metaKey, 0, null); var target = document.elementFromPoint(x, y); - console.log("Target", target); if (target){ target.dispatchEvent(ee); } else{ @@ -313,18 +277,21 @@ var logClick = function (e){ } }; -// var createClick = function(){ -// var ee = document.createEvent("MouseEvents"); -// x = currentX; -// y = currentY; -// ee.initMouseEvent("click", true, true, null, 1, -// x + e.screenX - e.clientX, -// y + e.screenY - e.clientY, -// x,y,e.ctrlKey, e.altKey, -// e.shiftKey, e.metaKey, 0, null); -// var target = document.elementFromPoint(x, y); -// target.dispatchEvent(ee); -// }; +var createClick = function(){ + var ee = document.createEvent("MouseEvents"); + x = currentX; + y = currentY; + ee.initMouseEvent("click", true, true, null, 1, + x,y,x,y,false, false, + false, false, 0, null); + var target = document.elementFromPoint(x, y); + if (target){ + target.dispatchEvent(ee); + } else{ + e.preventDefault(); + e.stopPropagation(); + } +}; function changeCallback() { //Check for element whether locked is expected element or not diff --git a/package.json b/package.json index 93fc21d..f4a4deb 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "chromeConnect", - "version": "0.0.1-65", + "version": "0.0.1-79", "private": true, "scripts": { "start": "node app.js" diff --git a/public/javascripts/chromeConnect.js b/public/javascripts/chromeConnect.js index 8f4b9ca..07dd17f 100755 --- a/public/javascripts/chromeConnect.js +++ b/public/javascripts/chromeConnect.js @@ -13,7 +13,6 @@ var socketUrl = 'http://' + location.hostname + ':80'; // Check Device Type socket.on('checkDevice', function () { - console.log("connecting!!"); // Using modernizr feature detection for mobile touch events if(isMobileDevice){ isTouchable(); @@ -40,12 +39,6 @@ var socketUrl = 'http://' + location.hostname + ':80'; tap:function(event, target) { socket.emit('click', {"sessionHash": sessionHash}); }, - doubleTap:function(event, target) { - socket.emit('zoomTapUndo', {"sessionHash": sessionHash}); - }, - longTap:function(event, target){ - socket.emit('zoomTap', {"sessionHash": sessionHash}); - }, fingers:$.fn.swipe.fingers.ALL, threshold: 20 }); @@ -56,6 +49,8 @@ var socketUrl = 'http://' + location.hostname + ':80'; var startX; var startY; + var lastXVal = 0; + var lastYVal = 0; $("#controllerPad").on("touchstart", function(event){ var targetEvent = event.touches.item(0); @@ -66,17 +61,21 @@ var socketUrl = 'http://' + location.hostname + ':80'; }); $("#controllerPad").on("touchmove", function(event){ - // if (event.targetTouches.length == 1) {} var targetEvent = event.touches.item(0); - socket.emit('move', {"dx" : targetEvent.clientX - startX , "dy": targetEvent.clientY - startY, "sessionHash": sessionHash}); + lastXVal = lastXVal - (startX - targetEvent.clientX); + lastYVal = lastYVal - (startY - targetEvent.clientY); + if (Math.abs(lastXVal) < 30 && Math.abs(lastYVal) < 30){ + socket.emit('move', {"dx" : lastXVal , "dy": lastYVal, "sessionHash": sessionHash}); + } event.preventDefault(); - + lastXVal = startX - targetEvent.clientX; + lastYVal = startY - targetEvent.clientY; }); }); // Touchable jQuery $(function() { $("#controllerPinch").swipe( { pinchStatus:function(event, phase, direction, distance , duration , fingerCount, pinchZoom) { - if (direction === "in"){ + if (direction === "in" && distance < 380){ socket.emit('pinchIn', {"direction" : direction, "distance": distance, "zoomScale": pinchZoom, "sessionHash": sessionHash}); } else if (direction === "out"){ socket.emit('pinchOut', {"direction" : direction, "distance": distance, "zoomScale": pinchZoom, "sessionHash": sessionHash}); @@ -90,6 +89,12 @@ var socketUrl = 'http://' + location.hostname + ':80'; pinchOut: function(event, direction, distance, duration, fingerCount, pinchZoom) { socket.emit('pinchOutTotal', {"zoomScale": pinchZoom, "sessionHash": sessionHash}); }, + tap:function(event, target) { + socket.emit('zoomTap', {"sessionHash": sessionHash}); + }, + doubleTap:function(event, target){ + socket.emit('zoomTapUndo', {"sessionHash": sessionHash}); + }, fingers: 2, allowPageScroll:"none", pinchThreshold:5 @@ -102,6 +107,7 @@ var socketUrl = 'http://' + location.hostname + ':80'; }); }; // is Mobile + var isNotTouchable = function() { - console.log('DESKTOP'); + alert("Use a device with a touchable interface") }; // is Desktop \ No newline at end of file diff --git a/public/lib/inobounce.min.js b/public/lib/inobounce.min.js deleted file mode 100755 index e660688..0000000 --- a/public/lib/inobounce.min.js +++ /dev/null @@ -1 +0,0 @@ -!function(global){var startY=0;var enabled=false;var handleTouchmove=function(evt){var el=evt.target;while(el!==document.body){var style=window.getComputedStyle(el);var scrolling=style.getPropertyValue("-webkit-overflow-scrolling");var overflow=style.getPropertyValue("overflow");var height=parseInt(style.getPropertyValue("height"),10);var isScrollable=scrolling==="touch"&&overflow==="auto";var canScroll=el.scrollHeight>el.offsetHeight;if(isScrollable&&canScroll){var curY=evt.touches?evt.touches[0].screenY:evt.screenY;var isAtTop=startY<=curY&&el.scrollTop===0;var isAtBottom=startY>=curY&&el.scrollHeight-el.scrollTop===height;if(isAtTop||isAtBottom){evt.preventDefault()}return}el=el.parentNode}evt.preventDefault()};var handleTouchstart=function(evt){startY=evt.touches?evt.touches[0].screenY:evt.screenY};var enable=function(){window.addEventListener("touchstart",handleTouchstart,false);window.addEventListener("touchmove",handleTouchmove,false);enabled=true};var disable=function(){window.removeEventListener("touchstart",handleTouchstart,false);window.removeEventListener("touchmove",handleTouchmove,false);enabled=false};var isEnabled=function(){return enabled};var scrollSupport=window.getComputedStyle(document.createElement("div"))["-webkit-overflow-scrolling"];if(typeof scrollSupport!=="undefined"){enable()}var iNoBounce={enable:enable,disable:disable,isEnabled:isEnabled};if(typeof global.define==="function"){!function(define){define(function(){return iNoBounce})}(global.define)}else{global.iNoBounce=iNoBounce}}(this); \ No newline at end of file diff --git a/routes/index.js b/routes/index.js deleted file mode 100644 index f296005..0000000 --- a/routes/index.js +++ /dev/null @@ -1,8 +0,0 @@ - -/* - * GET home page. - */ - -exports.index = function(req, res){ - res.render('index', { title: 'Express' }); -}; \ No newline at end of file diff --git a/routes/user.js b/routes/user.js deleted file mode 100644 index d5b34aa..0000000 --- a/routes/user.js +++ /dev/null @@ -1,8 +0,0 @@ - -/* - * GET users listing. - */ - -exports.list = function(req, res){ - res.send("respond with a resource"); -}; \ No newline at end of file diff --git a/views/index.jade b/views/index.jade deleted file mode 100644 index ef7b09f..0000000 --- a/views/index.jade +++ /dev/null @@ -1,5 +0,0 @@ -extends layout - -block content - h1= title - p Welcome to #{title} \ No newline at end of file diff --git a/views/layout.jade b/views/layout.jade deleted file mode 100644 index 1b7b305..0000000 --- a/views/layout.jade +++ /dev/null @@ -1,7 +0,0 @@ -doctype 5 -html - head - title= title - link(rel='stylesheet', href='/stylesheets/style.css') - body - block content \ No newline at end of file