diff options
| -rw-r--r-- | config.xml | 1 | ||||
| -rw-r--r-- | package.json | 4 | ||||
| -rw-r--r-- | www/css/style.css | 7 | ||||
| -rw-r--r-- | www/js/MenuController.js | 13 | ||||
| -rwxr-xr-x | www/js/app.js | 136 | ||||
| -rw-r--r-- | www/templates/devoptions.html | 8 | ||||
| -rw-r--r-- | www/templates/menu.html | 24 | ||||
| -rw-r--r-- | www/templates/monitors.html | 6 | ||||
| -rw-r--r-- | www/templates/montage.html | 32 |
9 files changed, 186 insertions, 45 deletions
@@ -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 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 @@ <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> <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}}.) <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> 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 @@ <!-- <ion-scroll scrollbar-y="false" style="height:100%" >--> <ion-list> <!--<ion-item ng-click="navigateView('app.montage')" menu-close>--> - <ion-item href="#/app/montage" menu-close> + <ion-item id="menu-move-1" href="#/app/montage" ng-click="go('/app/montage')" > <!--<span ng-if="$root.runMode=='lowbw'" style="float:right;margin-top:-18px;background-color:#f1c40f;color:#000;font-size:11px;opacity:0.7;width:20px;border-radius: 0px 0px 5px 5px;display:inline-block;text-align:center;"> <i class="icon ion-arrow-graph-down-left"></i> </span>--> <span class=" item-icon-left"> @@ -25,28 +25,28 @@ </ion-item> <!--<ion-item ng-click="navigateView('app.timeline')" menu-close>--> - <ion-item href="#/app/timeline" menu-close> + <ion-item id="menu-move-2" href="#/app/timeline" ng-click="go('/app/timeline')" > <span class=" item-icon-left"> <i class="icon ion-android-time"></i> </span>{{'kMenuTimeline'|translate}} </ion-item> <!--<ion-item ng-click="navigateView('app.events', {id:0,playEvent:false})" menu-close>--> - <ion-item href="#/app/events/0/false" menu-close> + <ion-item id="menu-move-3" href="#/app/events/0/false" ng-click="go('/app/events/0/false')" > <span class=" item-icon-left"> <i class="icon ion-ios-calendar-outline"></i> </span>{{'kMenuEvents'|translate}} </ion-item> <!--<ion-item ng-click="navigateView('app.moment')" menu-close>--> - <ion-item href="#/app/moment" menu-close> + <ion-item id="menu-move-4" ng-click="go('/app/moment')" href="#/app/moment" ng-click="go('/app/moment')"> <span class=" item-icon-left"> <i class="icon ion-star"></i> </span>{{'kMoment24Heading'|translate}} </ion-item> <!-- <ion-item ng-click="navigateView('app.montage-history')" menu-close>--> - <ion-item href="#/app/montage-history" menu-close> + <ion-item id="menu-move-5" href="#/app/montage-history" ng-click="go('/app/montage-history')" > <span class=" item-icon-left"> <i class="icon ion-ios-keypad-outline"></i> </span>{{'kMenuEventMontage'|translate}} @@ -54,21 +54,21 @@ <!--<ion-item ng-click="navigateView('app.monitors')" menu-close>--> - <ion-item href="#/app/monitors" menu-close> + <ion-item id="menu-move-6" href="#/app/monitors" ng-click="go('/app/monitors')" > <span class=" item-icon-left"> <i class="icon ion-ios-videocam-outline"></i> </span>{{'kMenuMonitors'|translate}} </ion-item> <!--<ion-item ng-click="navigateView('app.state')" menu-close>--> - <ion-item href="#/app/state" menu-close> + <ion-item id="menu-move-7" href="#/app/state" ng-click="go('/app/state')"> <span class=" item-icon-left"> <i class="icon ion-information-circled"></i> </span> {{'kMenuSystemStatus'|translate}} </ion-item> <!--<ion-item nav-clear menu-close ng-click="navigateView('app.login', {wizard:false})" >--> - <ion-item nav-clear menu-close href="#/app/login/false"> + <ion-item id="menu-move-8" nav-clear href="#/app/login/false" ng-click="go('/app/login/false')"> <span class=" item-icon-left"> <i class="icon ion-person"></i> {{'kMenuZMSettings'|translate}} @@ -79,7 +79,7 @@ </span> </ion-item> - <ion-item nav-clear menu-close href="#/app/devoptions"> + <ion-item id="menu-move-9" nav-clear href="#/app/devoptions" ng-click="go('/app/devoptions')" > <!--<ion-item nav-clear menu-close ng-click="navigateView('app.devoptions')">--> <span class=" item-icon-left"> <i class="icon ion-settings"></i> @@ -93,7 +93,7 @@ </ion-item> <!--<ion-item nav-clear menu-close ng-click="navigateView('app.help')" >--> - <ion-item nav-clear menu-close href="#/app/help"> + <ion-item id="menu-move-10" nav-clear href="#/app/help" ng-click="go('/app/help')"> <span class=" item-icon-left"> <i class="icon ion-help"></i> </span> {{'kMenuHelp'|translate}} @@ -101,7 +101,7 @@ <!--<ion-item nav-clear menu-close ng-click="navigateView('app.wizard')" >--> - <ion-item nav-clear menu-close href="#/app/wizard"> + <ion-item id="menu-move-11" nav-clear href="#/app/wizard" ng-click="go('/app/wizard')"> <span class=" item-icon-left"> <i class="icon ion-wand"></i> </span> {{'kMenuWizard'|translate}} @@ -118,7 +118,7 @@ </div> <!--<ion-item nav-clear menu-close ng-click="navigateView('app.log')" >--> - <ion-item nav-clear menu-close href="#/app/log"> + <ion-item id="menu-move-12" nav-clear href="#/app/log" ng-click="go('/app/log')"> <span class=" item-icon-left"> <i class="icon ion-clipboard"></i> </span> {{'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 @@ <ion-view view-title="{{'kMonitors' | translate}}" cache-view="false"> <ion-nav-buttons side="left"> - <button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"> + <button id="monitors-move-2" class="button button-icon button-clear ion-navicon" ng-click="openMenu()"> </button> <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> @@ -9,7 +9,7 @@ <ion-refresher pulling-text="Pull to reload Monitors..." spinner="bubbles" on-refresh="doRefresh()"> </ion-refresher> <div style="float:right;margin-top:3px;margin-right:8px;"> - <a class="button button-small icon icon-left icon ion-ios-world-outline" href="" ng-click="changeConfig('All', '','1','Monitor');">{{'kGlobalConfiguration' | translate}}</a> + <a id="monitors-move-2" class="button button-small icon icon-left icon ion-ios-world-outline" href="" ng-click="changeConfig('All', '','1','Monitor');">{{'kGlobalConfiguration' | translate}}</a> </div> <br/> <div class="list card" ng-repeat="monitor in monitors"> @@ -53,7 +53,7 @@ <div style="float:right;"> <a class="button button-small icon icon-left icon ion-gear-a" href="" ng-click="changeConfig(monitor.Monitor.Name, monitor.Monitor.Id,monitor.Monitor.Enabled,monitor.Monitor.Function);">{{'kConfiguration' | translate}}</a> <a class="button button-small icon icon-left ion-calendar" href="#/app/events/{{monitor.Monitor.Id}}/false">{{'kEventsCap'|translate}}</a> - <a class="button button-small icon icon-left ion-ios-eye" ng-click="openModal(monitor.Monitor.Id, monitor.Monitor.Controllable, monitor.Monitor.ControlId, monitor.Monitor.connKey, monitor)">{{'kLiveView' | translate}}</a> + <a class="button button-small icon icon-left ion-ios-eye" ng-click="openModal(monitor.Monitor.Id, monitor.Monitor.Controllable, monitor.Monitor.ControlId, monitor.Monitor.connKey, monitor)">{{'kLiveView' | translate}} </a> </div> </div> </div> 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 @@ <ion-view cache-view="false" hide-nav-bar="{{minimal}}"> <ion-nav-title>{{currentProfileName}}</ion-nav-title> <ion-nav-buttons side="left"> - <button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button> + <button id="montage-move-1" class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button> - <button class="button button-icon button-clear ion-eye" ng-click="hideUnhide();"> + <button class="button button-icon button-clear ion-eye" ng-click="hideUnhide();"> </button> - <button class="button button-icon button-clear ion-chevron-down" ng-click="toggleSubMenuFunction();"> + <button id="montage-move-2" class="button button-icon button-clear ion-chevron-down" ng-click="toggleSubMenuFunction();"> </button> <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"> - <span ng-click="toggleTimeType()" class="icon montage-time"> + <span ng-click="toggleTimeType()" class="icon montage-time"> <i ng-class="(iconTimeNow=='server')?'icon-server':'ion-ios-location'"></i> {{timeNow}} </span> - <button class="button button-icon button-clear ion-arrow-move" ng-click="dragToggle();"> + <button class="button button-icon button-clear ion-arrow-move" ng-click="dragToggle();"> </button> <!-- <button class="button button-icon button-clear ion-monitor" ng-click="cast();"> </button> --> - <button class="button button-icon button-clear ion-loop" ng-click="resetSizes();"> + <button id="montage-move-3" class="button button-icon button-clear ion-loop" ng-click="resetSizes();"> </button> - <button class="button button-icon button-clear ion-android-contract" ng-click="switchMinimal()"> + <button class="button button-icon button-clear ion-android-contract" ng-click="switchMinimal()"> </button> </ion-nav-buttons> <ion-content ng-cloak has-bouncing="false" style="background-color:#444444" delegate-handle="montage-delegate" overflow-scroll="false"> @@ -39,34 +39,34 @@ <a href="" ng-click="killAllImages()"> <i class="ion-ionic"></i></a> </li>--> - <li> - <a href="" ng-click="sliderChanged(1)"> + <li > + <a id="montage-move-4" ng-click="sliderChanged(1)" > <i class="ion-plus-circled"></i> </a> </li> - <li> - <a href="" ng-click="sliderChanged(-1)"> + <li > + <a id="montage-move-5" ng-click="sliderChanged(-1)" > <i class="ion-minus-circled"></i> </a> </li> - <li> - <a href="" ng-click="squeezeMonitors()"> + <li > + <a id="montage-move-6" ng-click="squeezeMonitors()" > <i class="ion-android-apps"></i> </a> </li> <li ng-style="{'background-color': isCycleOn()?'rgba(69, 170, 242,0.7)':'rgba(108, 122, 137, 0.7)'}" ng-if="!isDragabillyOn"> - <a href="" ng-click="toggleCycle()"> + <a ng-click="toggleCycle()"> <i class="ion-android-bicycle"></i>:{{getCycleStatus()}}</a> </li> <li ng-if="isDragabillyOn"> - <a href="" ng-click="hideMonitor(monitor.Monitor.Id)"> + <a ng-click="hideMonitor(monitor.Monitor.Id)"> <i class="ion-close-circled"></i> </a> </li> <li ng-if="isDragabillyOn"> - <a href="" ng-click="toggleStamp()"> + <a ng-click="toggleStamp()"> <i class="ion-pin"></i> </a> </li> |