- Controlling devices from control-panes.

res/app/control-panes/device-control/device-control-controller.js

@@ -0,0 +1,42 @@
+//module.exports = function DeviceControlCtrl(
+//  $scope
+//, $routeParams
+//, $location
+//, DeviceService
+//, GroupService
+//, ControlService
+//) {
+//  $scope.device = null
+//  $scope.control = null
+//  $scope.installation = null
+//
+//  $scope.install = function($files) {
+//    return $scope.control.install($files)
+//      .then(function(tx) {
+//        return tx.promise
+//          .progressed(function(result) {
+//            $scope.$apply(function() {
+//              $scope.installation = result
+//            })
+//          })
+//          .then(function(result) {
+//            $scope.$apply(function() {
+//              $scope.installation = result
+//            })
+//          })
+//      })
+//  }
+//
+//  DeviceService.get($routeParams.serial, $scope)
+//    .then(function(device) {
+//      return GroupService.invite(device)
+//    })
+//    .then(function(device) {
+//      $scope.device = device
+//      $scope.control = ControlService.create(device, device.channel)
+//      return device
+//    })
+//    .catch(function() {
+//      $location.path('/')
+//    })
+//}

res/app/control-panes/device-control/device-control.css

@@ -0,0 +1,39 @@
+device-screen {
+    position: relative;
+    display: block;
+}
+
+device-screen canvas {
+    position: absolute;
+    margin: auto;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    pointer-events: none; /* MUST HAVE */
+}
+
+device-screen .finger {
+    position: absolute;
+    border-radius: 50%;
+    background: lime;
+    opacity: 0.5;
+    width: 6mm;
+    height: 6mm;
+    top: -3mm;
+    left: -3mm;
+    pointer-events: none;
+    display: none;
+}
+
+device-screen.fingering .finger {
+    display: block;
+}
+
+device-screen textarea {
+    position: absolute;
+    z-index: 10;
+    outline: none;
+    pointer-events: none;
+    opacity: 0;
+}

res/app/control-panes/device-control/device-control.jade

@@ -0,0 +1,14 @@
+h1 {{ device.serial }} {{ device.present ? 'present' : 'absent' }}
+
+button(ng-click='showScreen = !showScreen') Show/Hide
+button(ng-click='control.identify()') Identify
+
+div(ng-if='installation')
+  strong Installation status: {{ installation.progress}}% ({{ installation.lastData }})
+
+div(ng-controller='DeviceScreenCtrl', ng-file-drop='install($files)')
+  device-screen(style='width: 400px; height: 600px; background: gray')
+
+button(ng-click='control.menu()') Menu
+button(ng-click='control.home()') Home
+button(ng-click='control.back()') Back

res/app/control-panes/device-control/index.js

@@ -0,0 +1,13 @@
+require('./device-control.css')
+
+module.exports = angular.module('device-control', [
+  require('stf/device').name,
+  require('stf/control').name,
+  require('stf/screen').name
+])
+  .run(["$templateCache", function ($templateCache) {
+    $templateCache.put('control-panes/device-control/device-control.jade',
+      require('./device-control.jade')
+    )
+  }])
+//  .controller('DeviceControlCtrl', require('./device-control-controller'))