From 91da4b8a12e7fb3dbc0183197a209a524abd851b Mon Sep 17 00:00:00 2001 From: Pliable Pixels Date: Mon, 14 May 2018 12:22:53 -0400 Subject: initial framework code for tv navigation --- config.xml | 1 - package.json | 4 +- www/css/style.css | 7 +++ www/js/MenuController.js | 13 +++- www/js/app.js | 136 ++++++++++++++++++++++++++++++++++++++++-- www/templates/devoptions.html | 8 +-- www/templates/menu.html | 24 ++++---- www/templates/monitors.html | 6 +- www/templates/montage.html | 32 +++++----- 9 files changed, 186 insertions(+), 45 deletions(-) diff --git a/config.xml b/config.xml index 3f407d9f..7f41090d 100644 --- a/config.xml +++ b/config.xml @@ -146,7 +146,6 @@ - diff --git a/package.json b/package.json index 77bb68fd..d7590fe0 100644 --- 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 index a2ab08e5..2847d2be 100644 --- 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 index 477849a6..f09d1c69 100644 --- 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 index 284bc90d..0a19b987 100755 --- 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 index e81e536f..80a1d80a 100644 --- a/www/templates/devoptions.html +++ b/www/templates/devoptions.html @@ -1,12 +1,12 @@ - +   - +
@@ -16,11 +16,11 @@
{{'kFrameUpdate'|translate}} ({{'kSec'|translate}}.) 
diff --git a/www/templates/menu.html b/www/templates/menu.html index 3b69b544..43833490 100644 --- a/www/templates/menu.html +++ b/www/templates/menu.html @@ -16,7 +16,7 @@ - + @@ -25,28 +25,28 @@ - + {{'kMenuTimeline'|translate}} - + {{'kMenuEvents'|translate}} - + {{'kMoment24Heading'|translate}} - + {{'kMenuEventMontage'|translate}} @@ -54,21 +54,21 @@ - + {{'kMenuMonitors'|translate}} - + {{'kMenuSystemStatus'|translate}} - + {{'kMenuZMSettings'|translate}} @@ -79,7 +79,7 @@ - + @@ -93,7 +93,7 @@ - + {{'kMenuHelp'|translate}} @@ -101,7 +101,7 @@ - + {{'kMenuWizard'|translate}} @@ -118,7 +118,7 @@
- + {{'kMenuLogs'|translate}} diff --git a/www/templates/monitors.html b/www/templates/monitors.html index 2bd5d819..6f37a6d3 100644 --- a/www/templates/monitors.html +++ b/www/templates/monitors.html @@ -1,6 +1,6 @@ - @@ -9,7 +9,7 @@
@@ -53,7 +53,7 @@
diff --git a/www/templates/montage.html b/www/templates/montage.html index 876e1125..b37e16b6 100644 --- a/www/templates/montage.html +++ b/www/templates/montage.html @@ -1,28 +1,28 @@ {{currentProfileName}} - +   - - - + {{timeNow}}  - - - @@ -39,34 +39,34 @@ --> -
  • - +
  • +
    • -
  • - +
  • +
    • -
  • - +
  • +
  • - + :{{getCycleStatus()}}
  • - +
  • - +
    • -- cgit v1.2.3