Fixed mouse movement on remote device

tooseata · Aug 13, 2013 · fd335c9 · fd335c9
1 parent 4bdb70c
commit fd335c9
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 22 deletions.
diff --git a/chromeExt/pointer_chromeConnect.css b/chromeExt/pointer_chromeConnect.css
@@ -11,10 +11,12 @@
 #testSpash{
   z-index: 1000000000;
   position: absolute;
-  width: 200px;
-  height:200px;
   top:0;
   left:0;
-  fill: #3080d0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0,0,0,0.8);
+  opacity: 0;
+-webkit-transition: opacity 400ms ease-in;
 
 }
diff --git a/chromeExt/script.js b/chromeExt/script.js
@@ -189,6 +189,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) {
@@ -204,6 +205,8 @@ element.addEventListener("click", function (e) {
           tempX = 0;
           tempY = 0;
           //Register lock change callback
+          var removeSplash = document.getElementById("testSpash");
+          removeSplash.parentNode.removeChild(removeSplash);
           document.addEventListener('webkitpointerlockchange', changeCallback, false);
           //Register callback for all errors
           document.addEventListener('webkitpointerlockerror', errorCallback, false);
@@ -230,16 +233,14 @@ var movePointer = function(xPos, yPos, type) {
     pointer.style.left = xPos+'px';
     pointer.style.top = yPos+'px';
   } else {
-    console.log("Syn xPos (Passed in X)", xPos);
-    console.log("Syn yPos (Passed in Y)", yPos);
     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 + tempClientX;
-    currentY = tempY + tempClientY;
+    currentX = tempX / 10;
+    currentY = tempY / 10;
     console.log("Syn currentX", currentX);
     console.log("Syn currentY", currentY);
     pointer.style.left = currentX +'px';
@@ -254,27 +255,29 @@ var moveCallback = function (e) {
   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;
+  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;
+  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){
-        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);
+
+      // 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;

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "chromeConnect",
-  "version": "0.0.1-64",
+  "version": "0.0.1-65",
   "private": true,
   "scripts": {
     "start": "node app.js"

diff --git a/public/splash.html b/public/splash.html
@@ -3,7 +3,7 @@
   <head>
     <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
     <meta charset="utf-8">
-    <title>Chrome Connect - Alpha</title>
+    <title>Chrome Connect - pre-Alpha</title>
     <meta name="description" content="">
     <meta name="keywords" content="">
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
@@ -285,8 +285,8 @@ <h2 class="featurette-heading">And lastly, this one. <span class="text-muted">Fl
 </div><!-- /.container -->
 <script>
 
-var width = 1340,
-    height = 780,
+var width = 960,
+    height = 500,
     centered;
 
 var projection = d3.geo.albersUsa()