initial framework code for tv navigation

pliablepixels · May 14, 2018 · 56d4134 · 56d4134
1 parent c20ec31
commit 56d4134
Show file tree

Hide file tree

Showing 9 changed files with 186 additions and 45 deletions.
diff --git a/config.xml b/config.xml
@@ -146,7 +146,6 @@
     <plugin name="ionic-plugin-keyboard" spec="^2.2.1" />
     <plugin name="cordova-library-helper" spec="git+https://github.com/FlyingDonkeyDev/cordova-library-helper.git" />
     <plugin name="cordova-plugin-certificates" spec="git+https://github.com/hypery2k/cordova-certificate-plugin.git" />
-    <plugin name="cordova-plugin-android-tv" spec="https://github.com/pliablepixels/cordova-plugin-android-tv.git" />
     <engine name="ios" spec="^4.5.4" />
     <engine name="android" spec="6.4.0" />
 </widget>
diff --git a/package.json b/package.json
@@ -50,8 +50,7 @@
       "ionic-plugin-keyboard": {},
       "cordova-library-helper": {},
       "cordova-plugin-certificates": {},
-      "cordova.plugins.diagnostic": {},
-      "cordova-plugin-android-tv": {}
+      "cordova.plugins.diagnostic": {}
     }
   },
   "dependencies": {
@@ -67,7 +66,6 @@
     "cordova-plugin-add-swift-support": "^1.7.1",
     "cordova-plugin-android-fingerprint-auth": "^1.4.0",
     "cordova-plugin-android-permissions": "^1.0.0",
-    "cordova-plugin-android-tv": "git+https://github.com/pliablepixels/cordova-plugin-android-tv.git",
     "cordova-plugin-app-version": "^0.1.9",
     "cordova-plugin-canvas2image": "git+https://github.com/flache/Canvas2ImagePlugin.git",
     "cordova-plugin-certificates": "git+https://github.com/hypery2k/cordova-certificate-plugin.git",

diff --git a/www/css/style.css b/www/css/style.css
@@ -1036,10 +1036,17 @@ videogular div.event-time {
     border: 2px dotted #3498db;
 }
 
+
+
 .dragborder-selected {
     border: 4px solid #e74c3c;
 }
 
+.dpadSelected {
+   border: 4px solid #45AAF2 !important;
+
+}
+
 .grid-sizer {
     width: 5%;
 }

diff --git a/www/js/MenuController.js b/www/js/MenuController.js
@@ -2,7 +2,7 @@
 /* jslint browser: true*/
 /* global cordova,StatusBar,angular,console */
 
-angular.module('zmApp.controllers').controller('MenuController', ['$scope', '$ionicSideMenuDelegate', 'zm', '$stateParams', '$ionicHistory', '$state', 'NVRDataModel', '$rootScope', '$ionicPopup', '$translate', '$timeout', function ($scope, $ionicSideMenuDelegate, zm, $stateParams, $ionicHistory, $state, NVRDataModel, $rootScope, $ionicPopup, $translate, $timeout) {
+angular.module('zmApp.controllers').controller('MenuController', ['$scope', '$ionicSideMenuDelegate', 'zm', '$stateParams', '$ionicHistory', '$state', 'NVRDataModel', '$rootScope', '$ionicPopup', '$translate', '$timeout', '$location',function ($scope, $ionicSideMenuDelegate, zm, $stateParams, $ionicHistory, $state, NVRDataModel, $rootScope, $ionicPopup, $translate, $timeout, $location) {
   $scope.openMenu = function () {
     $ionicSideMenuDelegate.toggleLeft();
   };
@@ -13,6 +13,17 @@ angular.module('zmApp.controllers').controller('MenuController', ['$scope', '$io
   //----------------------------------------------------------------
 
 
+  $scope.go = function(p) {
+
+
+    $ionicHistory.nextViewOptions({
+      historyRoot: true,
+      disableAnimate: true,
+      expire: 300
+    });
+    $ionicSideMenuDelegate.toggleLeft();
+    $location.path(p);
+  };  
 
   $scope.navigateView = function (view, args) {
 

diff --git a/www/js/app.js b/www/js/app.js
@@ -11,6 +11,8 @@
 
 var appVersion = "0.0.0";
 
+
+
 // core app start stuff
 angular.module('zmApp', [
     'ionic',
@@ -202,6 +204,8 @@ angular.module('zmApp', [
   })
 
 
+
+
   //credit: http://stackoverflow.com/a/23931217/1361529
   .directive('hidepassword', function () {
 
@@ -1210,6 +1214,7 @@ angular.module('zmApp', [
     $ionicPlatform.ready(function () {
       //console.log(">>>>>>>>>>>>>>>>>>>>>>>>>>>>>INSIDE RUN");
 
+      $rootScope.dpadId = 0;
       $rootScope.textScaleFactor = 1.0;
       $rootScope.isLoggedIn = false;
       $rootScope.apiValid = false;
@@ -1316,6 +1321,120 @@ angular.module('zmApp', [
         });
       }
 
+    // DPAD Handler - disabled for now
+    // when ready add ionic cordova plugin add https://github.com/pliablepixels/cordova-plugin-android-tv.git
+
+   // console.log (JSON.stringify(ionic.Platform.device()));
+    if (0 && $ionicPlatform.is('android')) {
+      window.addEventListener('keydown', dPadHandler, true);
+    }
+    else {
+      NVRDataModel.log ("Not registering D-PAD handler, as you are not on android");
+    }
+
+
+      function dPadHandler(evt){
+
+        var handled = false;
+
+        var keyCodes = {
+            MKEYB: 77,
+            SELECT: 13,
+
+            LEFT: 37,
+            UP: 38,
+            RIGHT: 39,
+            DOWN: 40,
+
+            PLAYPAUSE: 179,
+            REWIND: 227,
+            FORWARD:228
+        };
+
+        $timeout (function() {
+          var st = '#'+$rootScope.dpadState+'-move-';
+       //  console.log ("IN STATE="+$rootScope.dpadState+ " with st="+st);
+          var keyCode=evt.keyCode;
+          var el, nextel;
+
+          if (keyCode == keyCodes.REWIND) { 
+            if (!$ionicSideMenuDelegate.isOpen()) {
+              $ionicSideMenuDelegate.toggleLeft();
+              $rootScope.dpadState = "menu";
+              $rootScope.dpadId = 0;
+
+            }
+            else {
+              el = angular.element(document.querySelector(st +$rootScope.dpadId));
+              if (el.length) el[0].classList.remove('dpadSelected');
+              $ionicSideMenuDelegate.toggleLeft();
+              $rootScope.dpadId = 0;
+              $rootScope.dpadState = $state.current.name.replace('app.',"");
+            }
+            console.log ("dpad State is: "+$rootScope.dpadState);
+            handled = true;
+          }
+
+          else if (keyCode == keyCodes.SELECT ) { // select
+            if ($rootScope.dpadId >0) {
+               el = angular.element(document.querySelector('#'+$rootScope.dpadState+'-move-' +$rootScope.dpadId));
+                  // if in menu, unselect
+                if ($rootScope.dpadState == 'menu') {
+                  if (el.length) {
+                    el[0].classList.remove('dpadSelected');
+                    $rootScope.dpadId = 0;
+                  }
+                }
+                el.triggerHandler('click');
+
+            }
+            handled = true;
+          }
+
+          // arrows
+          else if (keyCode >= keyCodes.LEFT && keyCode <= keyCodes.DOWN) {  
+
+            // might be open by mouse or other event, so check first
+            if ($ionicSideMenuDelegate.isOpen() && $rootScope.dpadState != 'menu') {
+              $rootScope.dpadState = "menu";
+              $rootScope.dpadId = 0;
+            }
+
+            if ($rootScope.dpadId < 1) { 
+             // console.log ("First dpad usage with st="+st);
+              $rootScope.dpadId = 1; 
+
+              //console.log ("looking for st="+st);
+              el = angular.element(document.querySelector(st+'1'));
+              if (el.length) {
+                el[0].classList.add('dpadSelected');
+                el[0].scrollIntoView();
+              }
+
+            } else {
+              // unselect old
+              //console.log ("looking for st="+st);
+               el = angular.element(document.querySelector(st +$rootScope.dpadId));
+
+               var nextId = (keyCode == keyCodes.LEFT || keyCode == keyCodes.UP) ? $rootScope.dpadId -1: $rootScope.dpadId + 1;
+               nextel = angular.element(document.querySelector(st +nextId));
+              if (nextel.length) {
+                if (el.length) el[0].classList.remove('dpadSelected');
+                nextel[0].classList.add('dpadSelected');
+                nextel[0].scrollIntoView();
+                $rootScope.dpadId = nextId;
+              }
+              console.log ("dpadID="+$rootScope.dpadId+ " with state="+$rootScope.dpadState);
+            }
+            handled = true;
+          }
+
+
+          return handled;
+
+        });
+     }
+
       // register callbacks for online/offline
       // lets see if it really works
       $rootScope.online = navigator.onLine;
@@ -1370,9 +1489,12 @@ angular.module('zmApp', [
         if (!$ionicSideMenuDelegate.isOpenLeft()) {
           e.preventDefault();
           $ionicSideMenuDelegate.toggleLeft();
+
+          $rootScope.dState = "menu";
+          $rootScope.dpadId = 0;
           //console.log("Status of SIDE MENU IS : " + $ionicSideMenuDelegate.isOpen());
         } else {
-
+        
           window.stop();
           //ionic.Platform.exitApp();
           //navigator.app.exitApp();
@@ -1420,26 +1542,29 @@ angular.module('zmApp', [
       $rootScope.$on('$stateChangeStart', function (event, toState, toParams) {
         var requireLogin = toState.data.requireLogin;
 
-
+        $rootScope.dpadId = 0;
+
         //console.log("HERE");
 
         if ($rootScope.apiValid == false && toState.name != 'app.invalidapi' && toState.data.requireLogin == true) {
           event.preventDefault();
-          $state.transitionTo('app.invalidapi');
+          $rootScope.dpadState = "invalidapi";
+          $state.transitionTo('invalidapi');
           return;
 
         }
 
         if (NVRDataModel.hasLoginInfo() || toState.data.requireLogin == false) {
           //console.log("State transition is authorized");
-
+          $rootScope.dpadState = toState.name.replace("app.","");
           return;
         } else {
           NVRDataModel.log("In Auth State trans: Not logged in, requested to go to " + JSON.stringify(toState));
           // event.preventDefault();
           // 
 
-          $state.transitionTo('app.login');
+          $rootScope.dpadState = "login";
+          $state.transitionTo('login');
 
         }
 
@@ -1452,6 +1577,7 @@ angular.module('zmApp', [
           // for whatever reason, .go was resulting in digest loops.
           // if you don't prevent, states will stack
           event.preventDefault();
+          $rootScope.dpadState = "login";
           $state.transitionTo('app.login');
           return;
         }

diff --git a/www/templates/devoptions.html b/www/templates/devoptions.html
@@ -1,12 +1,12 @@
 <ion-view view-title="{{'kDevOptions' | translate}}">
   <ion-nav-buttons side="left">
-    <button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button>
+    <button id="devoptions-move-1" class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button>
     &nbsp;
     <button data-badge="{{$root.alarmCount}}" class="animated infinite tada button button-icon button-clear ion-ios-bell notification-badge"
       ng-click="handleAlarms();" ng-if="$root.isAlarm"></button>
   </ion-nav-buttons>
   <ion-nav-buttons side="right">
-    <button class="button button-clear" ng-click="saveDevOptions()">{{'kSave' | translate}}</button>
+    <button id="devoptions-move-2" class="button button-clear" ng-click="saveDevOptions()">{{'kSave' | translate}}</button>
   </ion-nav-buttons>
   <ion-content delegate-handle="none" overflow-scroll="false" mouse-wheel-scroll>
     <div class="list list-inset">
@@ -16,11 +16,11 @@
       <div class="item item-input-inset">
         {{'kFrameUpdate'|translate}} ({{'kSec'|translate}}.)&nbsp;
         <label class="item-input-wrapper">
-          <input type="tel" placeholder="min is 1s" ng-model="loginData.refreshSec">
+          <input id="devoptions-move-3" type="tel" placeholder="min is 1s" ng-model="loginData.refreshSec">
         </label>
       </div>
       <label>
-        <ion-toggle ng-model="loginData.use24hr" toggle-class="toggle-calm">
+        <ion-toggle id="devoptions-move-4" ng-model="loginData.use24hr" toggle-class="toggle-calm">
           <span class="item-text-wrap">{{'kEnable24hr' | translate}}</span>
         </ion-toggle>
       </label>