All services and controllers are implemented.

2025-10-05 19:42:01 +02:00 · 2014-02-19 15:46:31 +09:00 · 2014-02-19 15:46:31 +09:00 · 3a284eca1f
commit 3a284eca1f
parent ffce3d5beb
12 changed files with 256 additions and 19 deletions
--- a/res/app/components/stf/screen/screen-directive.js
+++ b/res/app/components/stf/screen/screen-directive.js
@ -0,0 +1,122 @@
+module.exports = function DeviceScreenDirective($document, ScalingService) {
+  return {
+    restrict: 'E',
+    template: require('./screen.jade'),
+    link: function ($scope, element, attrs) {
+      $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
+          , scaler = ScalingService.coordinator(
+            device.display.width
+            , device.display.height
+          )
+
+        function updateDisplaySize() {
+          displayWidth = element[0].offsetWidth
+          displayHeight = element[0].offsetHeight
+
+          // Developer error, let's try to reduce debug time
+          if (!displayWidth || !displayHeight) {
+            throw new Error(
+              'Unable to update display size; container must have dimensions'
+            )
+          }
+        }
+
+        function loadScreen() {
+          loader.src = device.display.url +
+            '?width=' + displayWidth +
+            '&height=' + displayHeight +
+            '&time=' + Date.now()
+        }
+
+        loader.onload = function () {
+          var size = scaler.projectedSize(displayWidth, displayHeight)
+
+          // Make sure we're rendering pixels 1 to 1
+          canvas.width = this.width
+          canvas.height = this.height
+
+          // Perhaps we have a massive screen but not enough pixels. Let's
+          // scale up
+          canvas.style.width = size.width + 'px'
+          canvas.style.height = size.height + 'px'
+
+          // Draw the image
+          g.drawImage(this, 0, 0)
+
+          // Reset error, if any
+          if ($scope.displayError) {
+            $scope.$apply(function () {
+              $scope.displayError = false
+            })
+          }
+
+          // Next please
+          loadScreen()
+        }
+
+        loader.onerror = function () {
+          $scope.$apply(function () {
+            $scope.displayError = true
+          })
+        }
+
+        function sendTouch(type, e) {
+          var scaled = scaler.coords(
+            displayWidth
+            , displayHeight
+            , e.offsetX
+            , 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
+          )
+        }
+
+        function downListener(e) {
+          e.preventDefault()
+          element.addClass('fingering')
+          sendTouch('touchDown', e)
+          element.bind('mousemove', moveListener)
+          $document.bind('mouseup', upListener)
+          $document.bind('mouseleave', upListener)
+        }
+
+        function moveListener(e) {
+          sendTouch('touchMove', e)
+        }
+
+        function upListener(e) {
+          sendTouch('touchUp', e)
+          stop()
+        }
+
+        function stop() {
+          element.removeClass('fingering')
+          element.unbind('mousemove', moveListener)
+          $document.unbind('mouseup', upListener)
+          $document.unbind('mouseleave', upListener)
+        }
+
+        $scope.$on('$destroy', function () {
+          loader.onload = loader.onerror = null
+          stop()
+        })
+
+        element.bind('mousedown', downListener)
+        updateDisplaySize()
+        loadScreen()
+      })
+    }
+  }
+}