From f2d88329cdb85de54876139e7dfd6873c9d652c7 Mon Sep 17 00:00:00 2001
From: Simo Kinnunen <simo@shoqolate.com>
Date: Thu, 6 Feb 2014 23:14:35 +0900
Subject: [PATCH] Add a finger trail to the device screen.

---
 res/app/scripts/controllers/DeviceScreenCtrl.js |  9 +++++++--
 res/app/views/partials/devices/control.jade     | 14 ++++++++++++++
 res/app/views/partials/devices/screen.jade      |  1 +
 3 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/res/app/scripts/controllers/DeviceScreenCtrl.js b/res/app/scripts/controllers/DeviceScreenCtrl.js
index 4ee43991..bea4f8ce 100644
--- a/res/app/scripts/controllers/DeviceScreenCtrl.js
+++ b/res/app/scripts/controllers/DeviceScreenCtrl.js
@@ -17,6 +17,7 @@ define(['./_module'], function(app) {
         $scope.promiseOfDevice.then(function(device) {
           var loader = new Image()
             , canvas = element.find('canvas')[0]
+            , finger = element.find('span')
             , g = canvas.getContext('2d')
             , displayWidth = 0
             , displayHeight = 0
@@ -84,6 +85,9 @@ define(['./_module'], function(app) {
             , e.offsetY
             )
 
+            finger[0].style.webkitTransform =
+              'translate3d(' + e.offsetX + 'px,' + e.offsetY + 'px,0)'
+
             $scope.control[type](
               scaled.xP * device.display.width
             , scaled.yP * device.display.height
@@ -92,6 +96,7 @@ define(['./_module'], function(app) {
 
           function downListener(e) {
             e.preventDefault()
+            element.addClass('fingering')
             sendTouch('touchDown', e)
             element.bind('mousemove', moveListener)
             $document.bind('mouseup', upListener)
@@ -108,6 +113,7 @@ define(['./_module'], function(app) {
           }
 
           function stop() {
+            element.removeClass('fingering')
             element.unbind('mousemove', moveListener)
             $document.unbind('mouseup', upListener)
             $document.unbind('mouseleave', upListener)
@@ -115,8 +121,7 @@ define(['./_module'], function(app) {
 
           $scope.$on('$destroy', function() {
             loader.onload = loader.onerror = null
-            $document.unbind('mouseup', upListener)
-            $document.unbind('mouseleave', upListener)
+            stop()
           })
 
           element.bind('mousedown', downListener)
diff --git a/res/app/views/partials/devices/control.jade b/res/app/views/partials/devices/control.jade
index 8f403bcb..2b8bb222 100644
--- a/res/app/views/partials/devices/control.jade
+++ b/res/app/views/partials/devices/control.jade
@@ -14,6 +14,20 @@ style.
     left: 0;
     pointer-events: none; /* MUST HAVE */
   }
+  device-screen .finger {
+    position: absolute;
+    border-radius: 50%;
+    border: 1mm solid lime;
+    width: 4mm;
+    height: 4mm;
+    top: -3mm;
+    left: -3mm;
+    pointer-events: none;
+    display: none;
+  }
+  device-screen.fingering .finger {
+    display: block;
+  }
 
 div(ng-controller='DeviceScreenCtrl')
   device-screen(style='width: 400px; height: 600px; background: gray')
diff --git a/res/app/views/partials/devices/screen.jade b/res/app/views/partials/devices/screen.jade
index ba2b16b6..4285ba75 100644
--- a/res/app/views/partials/devices/screen.jade
+++ b/res/app/views/partials/devices/screen.jade
@@ -1,2 +1,3 @@
 canvas(ng-show='ready')
 div(ng-if='displayError') Screen error
+span.finger