added PTZ support (well, P for now, but framework with a cool menu is in place)

7 files changed, 737 insertions, 93 deletions

diff --git a/www/js/DataModel.js b/www/js/DataModel.js
index 59802ca3..cbb3e74d 100644
--- a/www/js/DataModel.js
+++ b/www/js/DataModel.js
@@ -7,7 +7,7 @@
 // that many other controllers use
 // It's grown over time. I guess I may have to split this into multiple services in the future
 
-angular.module('zmApp.controllers').service('ZMDataModel', ['$http', '$q', '$ionicLoading', function ($http, $q, $ionicLoading) {
+angular.module('zmApp.controllers').service('ZMDataModel', ['$http', '$q', '$ionicLoading', '$ionicBackdrop', function ($http, $q, $ionicLoading, $ionicBackdrop) {
     // var deferred='';
     var monitorsLoaded = 0;
     var simSize = 30; // how many monitors to simulate
@@ -309,18 +309,28 @@ angular.module('zmApp.controllers').service('ZMDataModel', ['$http', '$q', '$ion
         // the menu events option
         // monitorId == 0 means all monitors (ZM starts from 1)
 
-        getEvents: function (monitorId, pageId) {
+        getEvents: function (monitorId, pageId, loadingStr) {
 
             console.log("ZMData getEvents called with ID=" + monitorId + "and Page=" + pageId);
 
+           if (!loadingStr)
+           {
+               loadingStr = "Loading Events...";
+           }
+            //if (loadingStr) loa
+
+            if (loadingStr != 'none')
+            {
             $ionicLoading.show({
-                template: 'Loading Events...',
+                template: loadingStr,
                 animation: 'fade-in',
                 showBackdrop: true,
                 maxWidth: 200,
                 showDelay: 0,
                 duration: 15000, //specifically for Android - http seems to get stuck at times
             });
+            }
+            //$ionicBackdrop.retain();
 
             var d = $q.defer();
             var myevents = [];
@@ -338,13 +348,13 @@ angular.module('zmApp.controllers').service('ZMDataModel', ['$http', '$q', '$ion
                 console.log("Events will be simulated");
                 myevents = simulation.fillSimulatedEvents(eventSimSize);
                 d.resolve(myevents);
-                $ionicLoading.hide();
+                if (loadingStr != 'none') $ionicLoading.hide();
                 return d.promise;
             } else { // not simulated
 
                 $http.get(myurl /*,{timeout:15000}*/ )
                     .success(function (data) {
-                        $ionicLoading.hide();
+                        if (loadingStr != 'none') $ionicLoading.hide();
                         //myevents = data.events;
                         myevents = data.events.reverse();
                         if (monitorId == 0) {
@@ -357,7 +367,7 @@ angular.module('zmApp.controllers').service('ZMDataModel', ['$http', '$q', '$ion
 
                     })
                     .error(function (err) {
-                        $ionicLoading.hide();
+                        if (loadingStr != 'none') $ionicLoading.hide();
                         console.log("HTTP Events error " + err);
                         // I need to reject this as I have infinite scrolling
                         // implemented in EventCtrl.js --> and if it does not know
diff --git a/www/js/EventCtrl.js b/www/js/EventCtrl.js
index 7422b03a..98c3b6c9 100644
--- a/www/js/EventCtrl.js
+++ b/www/js/EventCtrl.js
@@ -6,10 +6,53 @@
 // This was before I got access to the new APIs. FIXME: Revisit this code to see what I am doing with it
 // and whether the new API has a better mechanism
 
-angular.module('zmApp.controllers').controller('zmApp.EventCtrl', ['$ionicPlatform', '$scope', '$stateParams', 'message', 'ZMDataModel', '$ionicSideMenuDelegate', '$ionicModal', '$ionicLoading', '$http', '$state', '$window', function ($ionicPlatform, $scope, $stateParams, message, ZMDataModel, $ionicSideMenuDelegate, $ionicModal, $ionicLoading, $http, $state, $window) {
+angular.module('zmApp.controllers').controller('zmApp.EventCtrl', ['$ionicPlatform', '$scope', '$stateParams', 'message', 'ZMDataModel', '$ionicSideMenuDelegate', '$ionicModal', '$ionicLoading', '$http', '$state', '$window',function ($ionicPlatform, $scope, $stateParams, message, ZMDataModel, $ionicSideMenuDelegate, $ionicModal, $ionicLoading, $http, $state, $window, $rootScope) {
     console.log("I got STATE PARAM " + $stateParams.id);
     $scope.id = parseInt($stateParams.id, 10);
     $scope.connKey = Math.floor(Math.random() * (999999 - 111111 + 1)) + 111111;
+    // These are the commands ZM uses to move around
+    // in ZMS
+    var eventCommands = {
+        next: "13",
+        previous: "12",
+        zoomin: "8",
+        zoomout: "9",
+        stop: "3",
+        pause: "1",
+        play: "2"
+    };
+
+    $scope.showSearch = false;
+    var eventsPage = 1;
+    var moreEvents = true;
+    $scope.viewTitle = {
+        title: ""
+    };
+    $scope.search = {text:""};
+    $scope.myfilter="";
+
+
+
+    // for some reason inifinite scroll is invoked
+    // before I actually load the first page with page count
+    // this makes scrolling stop as eventsPage is still 0
+    // FIXME: This is a hack
+
+    var pageLoaded = false;
+
+
+    // FIXME: Hack or elegance?
+    // to get rid of  full stack event get on search
+
+    var enableLoadMore = true;
+
+    // When loading images, it sometimes takes time -  the images can be quite
+    // large. What practically was happening was you'd see a blank screen for a few
+    // seconds. Not a good UX. So what I am doing is when the events modal or
+    // monitor modal is loaded, I show an ionic loading. And then when the first frame
+    // finishes loading, I take it away
+
+
 
     $scope.openMenu = function () {
         $ionicSideMenuDelegate.toggleLeft();
@@ -31,6 +74,18 @@ angular.module('zmApp.controllers').controller('zmApp.EventCtrl', ['$ionicPlatfo
 
     };
 
+    $scope.tapped = function()
+    {
+        console.log ("*** TAPPED ****");
+        // if he tapped, the we are not infinite loading on ion-infinite
+        if (  enableLoadMore == false )
+        {
+            moreEvents=true;
+            enableLoadMore = true;
+            console.log ("REMOVING ARTIFICAL LOAD MORE BLOCK");
+        }
+    };
+
     $scope.$on('$ionicView.loaded', function () {
         console.log("**VIEW ** Events Ctrl Loaded");
     });
@@ -53,43 +108,38 @@ angular.module('zmApp.controllers').controller('zmApp.EventCtrl', ['$ionicPlatfo
     });
 
 
-    // These are the commands ZM uses to move around
-    // in ZMS
-    var eventCommands = {
-        next: "13",
-        previous: "12",
-        zoomin: "8",
-        zoomout: "9",
-        stop: "3",
-        pause: "1",
-        play: "2"
+
+    $scope.finishedLoadingImage = function () {
+        console.log("*** Events image FINISHED loading ***");
+        $ionicLoading.hide();
     };
 
-    var eventsPage = 1;
-    var moreEvents = true;
-    $scope.viewTitle = {
-        title: ""
+    $scope.clearSearch = function()
+    {
+        $scope.search.text="";
+        console.log ("CLEAR");
     };
 
-    // for some reason inifinite scroll is invoked
-    // before I actually load the first page with page count
-    // this makes scrolling stop as eventsPage is still 0
-    // FIXME: This is a hack
+    $scope.searchClicked = function()
+    {
+        $scope.showSearch = !$scope.showSearch;
+        // this helps greatly in repeat scroll gets
+        if ($scope.showSearch == false)
+                    $scope.search.text="";
+
+        console.log ("**** Setting search view to "+$scope.showSearch+" ****");
+        if (  enableLoadMore == false && $scope.showSearch == false)
+        {
+            moreEvents=true;
+            enableLoadMore = true;
+            console.log ("REMOVING ARTIFICAL LOAD MORE BLOCK");
+        }
+    };
 
-    var pageLoaded = false;
 
-    // When loading images, it sometimes takes time -  the images can be quite
-    // large. What practically was happening was you'd see a blank screen for a few
-    // seconds. Not a good UX. So what I am doing is when the events modal or
-    // monitor modal is loaded, I show an ionic loading. And then when the first frame
-    // finishes loading, I take it away
+    $scope.eventCommands = eventCommands;
 
-    $scope.finishedLoadingImage = function () {
-        console.log("*** Events image FINISHED loading ***");
-        $ionicLoading.hide();
-    };
 
-    $scope.eventCommands = eventCommands;
 
     // this routine handles skipping through events
     // in different event views
@@ -180,7 +230,7 @@ angular.module('zmApp.controllers').controller('zmApp.EventCtrl', ['$ionicPlatfo
             console.log("SUCCESS: " + JSON.stringify(resp));
             var str = toast_blurb + "event:" + resp.status.event;
             console.log(str);
-            $ionicLoading.hide();
+           // $ionicLoading.hide();
             $ionicLoading.show({
                 template: str,
                 noBackdrop: true,
@@ -257,13 +307,16 @@ angular.module('zmApp.controllers').controller('zmApp.EventCtrl', ['$ionicPlatfo
     // start from the latest. If this fails, nothing displays
     // FIXME: clean up error handling
 
+    // FIXME: call loadMore once -- to fill up page. Its possible
+    // last event page only has a few records
+
     ZMDataModel.getEventsPages($scope.id)
         .then(function (data) {
             eventsPage = data.pageCount;
             console.log("TOTAL EVENT PAGES IS " + eventsPage);
             pageLoaded = true;
             $scope.viewTitle.title = data.count;
-            ZMDataModel.getEvents($scope.id, eventsPage)
+            ZMDataModel.getEvents($scope.id, eventsPage,"")
 
             .then(function (data) {
                 console.log("EventCtrl Got events");
@@ -287,6 +340,23 @@ angular.module('zmApp.controllers').controller('zmApp.EventCtrl', ['$ionicPlatfo
         return moreEvents;
     };
 
+     $scope.cancelSearch = function()
+        {
+            $ionicLoading.hide(); //Or whatever action you want to preform
+            enableLoadMore = false;
+            console.log ("**** CANCELLED ****");
+          $ionicLoading.show({
+                template: 'Search Cancelled',
+                animation: 'fade-in',
+                showBackdrop: true,
+                duration: 2000,
+                maxWidth: 200,
+                showDelay: 0
+            });
+
+
+        };
+
     $scope.loadMore = function () {
 
         // the events API does not return an error for anything
@@ -300,9 +370,32 @@ angular.module('zmApp.controllers').controller('zmApp.EventCtrl', ['$ionicPlatfo
             return;
         }
 
+       if (!enableLoadMore)
+       {
+           moreEvents=false; // Dont ion-scroll till enableLoadMore is true;
+           $scope.$broadcast('scroll.infiniteScrollComplete');
+
+           console.log ("**** LOADMORE ARTIFICALLY DISABLED");
+           return;
+       }
+
+        var loadingStr="";
+        if ($scope.search.text != "")
+        {
+            var toastStr="Searching page "+eventsPage;
+
+
 
+$ionicLoading.show({ maxwidth:100, scope:$scope, template: '<button class="button button-clear icon-left ion-close-circled button-text-wrap" ng-click="cancelSearch()" >'+toastStr+'</button>' });
 
-        ZMDataModel.getEvents($scope.id, eventsPage)
+           //  toastr.info(toastStr,{"positionClass": "toast-bottom-full-width",
+            //                       "showMethod": "fadeIn",
+             //                      "hideMethod": "fadeOut",
+            //                       "closeButton": false,
+        //                       });
+            loadingStr="none";
+        }
+        ZMDataModel.getEvents($scope.id, eventsPage,loadingStr)
             .then(function (data) {
                     console.log("Got new page of events with Page=" + eventsPage);
                     var myevents = data;
@@ -312,14 +405,16 @@ angular.module('zmApp.controllers').controller('zmApp.EventCtrl', ['$ionicPlatfo
                     }
                     $scope.events = $scope.events.concat(myevents);
                     console.log("Got new page of events");
-
+                    moreEvents = true;
                     $scope.$broadcast('scroll.infiniteScrollComplete');
+            //toastr.clear();
                 },
 
                 function (error) {
                     console.log("*** No More Events to Load, Stop Infinite Scroll ****");
                     moreEvents = false;
                     $scope.$broadcast('scroll.infiniteScrollComplete');
+           // toastr.clear();
 
                 });
         //  $scope.$broadcast('scroll.infiniteScrollComplete');
@@ -330,18 +425,28 @@ angular.module('zmApp.controllers').controller('zmApp.EventCtrl', ['$ionicPlatfo
         return ZMDataModel.isSimulated();
     };
 
+    // For consistency we are keeping the refresher list
+    // but its a dummy. The reason I deviated is because
+    // refresh with infinite scroll is a UX problem - its
+    // easy to pull to refresh when scrolling up with
+    // a large list
+
+    $scope.dummyDoRefresh= function()
+    {
+         $scope.$broadcast('scroll.refreshComplete');
+    };
 
     $scope.doRefresh = function () {
         console.log("***Pull to Refresh");
         $scope.events = [];
-
+        moreEvents = true;
         ZMDataModel.getEventsPages($scope.id)
             .then(function (data) {
                 eventsPage = data.pageCount;
                 console.log("TOTAL EVENT PAGES IS " + eventsPage);
                 pageLoaded = true;
                 $scope.viewTitle.title = data.count;
-                ZMDataModel.getEvents($scope.id, eventsPage)
+                ZMDataModel.getEvents($scope.id, eventsPage,"")
 
                 .then(function (data) {
                     console.log("EventCtrl Got events");
diff --git a/www/js/EventsGraphsCtrl.js b/www/js/EventsGraphsCtrl.js
index dc73b9eb..830528e3 100644
--- a/www/js/EventsGraphsCtrl.js
+++ b/www/js/EventsGraphsCtrl.js
@@ -53,12 +53,6 @@ angular.module('zmApp.controllers').controller('zmApp.EventsGraphsCtrl', ['$ioni
         var monitors = [];
 
 
-     var canvases = document.getElementById('superman');
-        //console.log ("**** FOUND " + canvases.length + "CANVASES");
-       // for (var i = 0; i < canvases.length; i++) {
-      //      console.log ("*** FOUND CANVAS");
-            //context.push(canvases[i].getContext('2d'));
-     //   }
          var dateRange = "";
         var startDate = "";
         var endDate = "";
@@ -84,8 +78,9 @@ angular.module('zmApp.controllers').controller('zmApp.EventsGraphsCtrl', ['$ioni
           label: '',
            fillColor: 'rgba(151,187,205,0.5)',
           strokeColor: 'rgba(151,187,205,0.8)',
-          highlightFill: 'rgba(151,187,205,0.75)',
-          highlightStroke: 'rgba(151,187,205,1)',
+            highlightFill: 'rgba(0,163,124,0.5)',
+       //   highlightFill: 'rgba(151,187,205,0.75)',
+         // highlightStroke: 'rgba(151,187,205,1)',
           data: []
         },
           ]
@@ -107,6 +102,7 @@ angular.module('zmApp.controllers').controller('zmApp.EventsGraphsCtrl', ['$ioni
                     // I much prefer the old days of passing context data from request to response
 
                     $scope.data.labels.push(monitors[j].Monitor.Name);
+
                    //$scope.chartObject[id].data.push([monitors[j].Monitor.Name,'0','color:#76A7FA','0']);
                     // $scope.chartObject.data[j+1]=([monitors[j].Monitor.Name,'100','color:#76A7FA','0']);
 
@@ -129,6 +125,8 @@ angular.module('zmApp.controllers').controller('zmApp.EventsGraphsCtrl', ['$ioni
 
 
 
+
+
                             })
                             .error(function (data) {
                                 // ideally I should be treating it as an error
@@ -138,6 +136,7 @@ angular.module('zmApp.controllers').controller('zmApp.EventsGraphsCtrl', ['$ioni
 
                              $scope.data.datasets[0].data[j] = 0;
 
+
                             });
                     } // is not simulated
                     else // simulated: grab a random event count
@@ -145,6 +144,7 @@ angular.module('zmApp.controllers').controller('zmApp.EventsGraphsCtrl', ['$ioni
                         var rndEventCount = Math.floor(Math.random() * (100 - 20 + 1)) + 20;
                          $scope.data.datasets[0].data[j] = rndEventCount;
 
+
                     }
                 })(i); // j
 
@@ -155,43 +155,26 @@ angular.module('zmApp.controllers').controller('zmApp.EventsGraphsCtrl', ['$ioni
 
 
 
-         $scope.options =  {
-
-      // Sets the chart to be responsive
-      responsive: true,
-
-
-      //Boolean - Whether the scale should start at zero, or an order of magnitude down from the lowest value
-      scaleBeginAtZero : true,
+         $scope.options = {
 
-      //Boolean - Whether grid lines are shown across the chart
-      scaleShowGridLines : false,
+     responsive: true,
+     scaleBeginAtZero: true,
+     scaleShowGridLines: false,
+     scaleGridLineColor: "rgba(0,0,0,.05)",
+     scaleGridLineWidth: 1,
+     barShowStroke: true,
+     barStrokeWidth: 2,
+     barValueSpacing: 5,
+     barDatasetSpacing: 1,
+     showTooltip: true,
 
-      //String - Colour of the grid lines
-      scaleGridLineColor : "rgba(0,0,0,.05)",
+     //String - A legend template
+     //  legendTemplate : '<ul class="tc-chart-js-legend"><% for (var i=0; i<datasets.length; i++){%><li><span style="background-color:<%=datasets[i].fillColor%>"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>'
+ };
 
-      //Number - Width of the grid lines
-      scaleGridLineWidth : 1,
 
-      //Boolean - If there is a stroke on each bar
-      barShowStroke : true,
 
-      //Number - Pixel width of the bar stroke
-      barStrokeWidth : 2,
-
-      //Number - Spacing between each of the X value sets
-      barValueSpacing : 5,
-
-      //Number - Spacing between data sets within X values
-      barDatasetSpacing : 1,
-
-      //String - A legend template
-    //  legendTemplate : '<ul class="tc-chart-js-legend"><% for (var i=0; i<datasets.length; i++){%><li><span style="background-color:<%=datasets[i].fillColor%>"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>'
-    };
-
-
-
-    };
+ };
 
 
 
diff --git a/www/js/MonitorCtrl.js b/www/js/MonitorCtrl.js
index b7469a9d..63d27ea2 100644
--- a/www/js/MonitorCtrl.js
+++ b/www/js/MonitorCtrl.js
@@ -5,7 +5,7 @@
 // controller for Monitor View
 // refer to comments in EventCtrl for the modal stuff. They are almost the same
 
-angular.module('zmApp.controllers').controller('zmApp.MonitorCtrl', ['$ionicPopup', '$scope', 'ZMDataModel', 'message', '$ionicSideMenuDelegate', '$ionicLoading', '$ionicModal', '$state', '$http', function ($ionicPopup, $scope, ZMDataModel, message, $ionicSideMenuDelegate, $ionicLoading, $ionicModal, $state, $http, $rootScope) {
+angular.module('zmApp.controllers').controller('zmApp.MonitorCtrl', ['$ionicPopup', '$scope', 'ZMDataModel', 'message', '$ionicSideMenuDelegate', '$ionicLoading', '$ionicModal', '$state', '$http', function ($ionicPopup, $scope, ZMDataModel, message, $ionicSideMenuDelegate, $ionicLoading, $ionicModal, $state, $http, $rootScope, $timeout) {
 
     $scope.monitors = [];
 
@@ -26,8 +26,121 @@ angular.module('zmApp.controllers').controller('zmApp.MonitorCtrl', ['$ionicPopu
         });
     };
 
-// This function takes care of changing function parameters
-// For now, I've only limited it to enable/disable and change monitor mode
+    $scope.radialMenuOptions = {
+        content: '',
+
+        background: '#2F4F4F',
+        isOpen: false,
+        toggleOnClick: false,
+        button: {
+            cssClass: "fa  fa-arrows-alt",
+        },
+        items: [
+            {
+                content: '',
+                cssClass: 'fa fa-chevron-circle-up',
+                empty: false,
+                onclick: function () {
+                    controlPTZ($scope.monitorId, 'Down');
+                }
+    },
+
+            {
+                content: '',
+                cssClass: 'fa fa-chevron-circle-up',
+                empty: false,
+                onclick: function () {
+                    controlPTZ($scope.monitorId, 'DownLeft');
+                }
+    },
+
+            {
+                content: '',
+                cssClass: 'fa fa-chevron-circle-up',
+                empty: false,
+
+                onclick: function () {
+                    controlPTZ($scope.monitorId, 'Left');
+                }
+    },
+            {
+                content: 'D',
+                empty: true,
+
+                onclick: function () {
+                    console.log('About');
+                }
+    },
+
+            {
+                content: '',
+                cssClass: 'fa fa-chevron-circle-up',
+                empty: false,
+                onclick: function () {
+                    controlPTZ($scope.monitorId, 'UpLeft');
+                }
+    },
+
+            {
+                content: '',
+                cssClass: 'fa fa-chevron-circle-up',
+                empty: false,
+                onclick: function () {
+                    controlPTZ($scope.monitorId, 'Up');
+                }
+    },
+
+            {
+                content: '',
+                cssClass: 'fa fa-chevron-circle-up',
+                empty: false,
+                onclick: function () {
+                    controlPTZ($scope.monitorId, 'UpRight');
+                }
+    },
+
+            {
+                content: 'H',
+                empty: true,
+                onclick: function () {
+                    console.log('About');
+                }
+    },
+
+            {
+                content: '',
+                cssClass: 'fa fa-chevron-circle-up',
+                empty: false,
+                onclick: function () {
+                    controlPTZ($scope.monitorId, 'Right');
+                }
+    },
+
+
+            {
+                content: '',
+                cssClass: 'fa fa-chevron-circle-up',
+                empty: false,
+                onclick: function () {
+                    controlPTZ($scope.monitorId, 'DownRight');
+                }
+    },
+
+            {
+                content: 'K',
+                empty: true,
+                onclick: function () {
+                    console.log('About');
+                }
+    },
+
+
+  ]
+    };
+
+
+    // This function takes care of changing function parameters
+    // For now, I've only limited it to enable/disable and change monitor mode
 
     $scope.changeConfig = function (monitorName, monitorId, enabled, func) {
         var checked = "false";
@@ -194,14 +307,15 @@ angular.module('zmApp.controllers').controller('zmApp.MonitorCtrl', ['$ionicPopu
         console.log("**VIEW ** Monitor Ctrl Unloaded");
     });
 
-    $scope.openModal = function (mid) {
-        console.log("Open Monitor Modal");
+    $scope.openModal = function (mid, controllable) {
+        console.log("Open Monitor Modal with monitod Id=" + mid + " and Controllable:" + controllable);
 
         $scope.monitorId = mid;
         $scope.LoginData = ZMDataModel.getLogin();
         $scope.rand = Math.floor(Math.random() * (999999 - 111111 + 1)) + 111111;
 
         // This is a modal to show the monitor footage
+
         $ionicModal.fromTemplateUrl('templates/monitors-modal.html', {
                 scope: $scope,
                 animation: 'slide-in-up'
@@ -214,9 +328,48 @@ angular.module('zmApp.controllers').controller('zmApp.MonitorCtrl', ['$ionicPopu
                     noBackdrop: true,
                     duration: 15000
                 });
+                $scope.isControllable = controllable;
+                $scope.showPTZ = false;
                 $scope.modal.show();
             });
 
+        // do a post login for PTZ
+        var loginData = ZMDataModel.getLogin();
+        console.log("*** MODAL PORTAL LOGIN ****");
+        $http({
+                method: 'POST',
+                url: loginData.url + '/index.php',
+                headers: {
+                    'Content-Type': 'application/x-www-form-urlencoded',
+                    'Accept': 'application/json',
+                },
+                transformRequest: function (obj) {
+                    var str = [];
+                    for (var p in obj)
+                        str.push(encodeURIComponent(p) + "=" +
+                            encodeURIComponent(obj[p]));
+                    var foo = str.join("&");
+                    console.log("****RETURNING " + foo);
+                    return foo;
+                },
+
+                data: {
+                    username: loginData.username,
+                    password: loginData.password,
+                    action: "login",
+                    view: "console"
+                }
+            })
+            .success(function (data) {
+                console.log("**** PORTAL  LOGIN OK");
+            })
+            .error(function (error) {
+                console.log("**** PORTAL LOGIN FAILED");
+            });
+
+
+
+
     };
 
     $scope.closeModal = function () {
@@ -230,6 +383,123 @@ angular.module('zmApp.controllers').controller('zmApp.MonitorCtrl', ['$ionicPopu
         $scope.modal.remove();
     });
 
+    $scope.togglePTZ = function () {
+        $scope.showPTZ = !$scope.showPTZ;
+    };
+
+    function controlPTZ(monitorId, cmd) {
+        //    curl -X POST "http://arjunrc.ddns.net:9898/zm/index.php" -d "view=request&request=control&user=admin&passwd=indiglo&id=4&control=moveConLeft"
+
+
+        //curl -X POST "http://server.com/zm/index.php?view=request" -d "request=control&user=admin&passwd=xx&id=4&control=moveConLeft"
+
+        console.log("Command value " + cmd + " with MID=" + monitorId);
+
+        if (ZMDataModel.isSimulated()) {
+            var str = "simulation mode. no action taken";
+            $ionicLoading.show({
+                template: str,
+                noBackdrop: true,
+                duration: 3000
+            });
+            return;
+        }
+
+        $ionicLoading.hide();
+        $ionicLoading.show({
+            template: "please wait...",
+            noBackdrop: true,
+            duration: 15000,
+        });
+
+        var loginData = ZMDataModel.getLogin();
+
+        /*  $http({
+              method:'POST',
+              url:loginData.url + '/index.php',
+              headers:{
+                  'Content-Type': 'application/x-www-form-urlencoded',
+                 'Accept': 'application/json',
+              },
+              transformRequest: function (obj) {
+                  var str = [];
+                  for (var p in obj)
+                      str.push(encodeURIComponent(p) + "=" +
+                          encodeURIComponent(obj[p]));
+                  var foo = str.join("&");
+                  console.log("****RETURNING " + foo);
+                  return foo;
+              },
+
+              data: {
+                  username:loginData.username,
+                  password:loginData.password,
+                  action:"login",
+                  view:"console"
+              }
+          })
+          .success (function(data,status,header,config)
+          {*/
+        $ionicLoading.hide();
+        $ionicLoading.show({
+            template: "Sending PTZ..",
+            noBackdrop: true,
+            duration: 15000,
+        });
+        // console.log ("ANGULAR VERSION: "+JSON.stringify(angular.version));
+
+        // console.log('Set-Cookie'+ header('Set-Cookie')); //
+
+
+        var req = $http({
+            method: 'POST',
+            /*timeout: 15000,*/
+            url: loginData.url + '/index.php',
+            headers: {
+                'Content-Type': 'application/x-www-form-urlencoded',
+                'Accept': 'application/json',
+            },
+            transformRequest: function (obj) {
+                var str = [];
+                for (var p in obj)
+                    str.push(encodeURIComponent(p) + "=" +
+                        encodeURIComponent(obj[p]));
+                var foo = str.join("&");
+                console.log("****RETURNING " + foo);
+                return foo;
+            },
+
+            data: {
+                view: "request",
+                request: "control",
+                id: monitorId,
+                //connkey: $scope.connKey,
+                control: "moveCon" + cmd,
+                xge: "30",
+                yge: "30",
+                //user: loginData.username,
+                //pass: loginData.password
+            }
+
+        });
+
+        req.success(function (resp) {
+            $ionicLoading.hide();
+            console.log("SUCCESS: " + JSON.stringify(resp));
+
+            // $ionicLoading.hide();
+
+        });
+
+        req.error(function (resp) {
+            $ionicLoading.hide();
+            console.log("ERROR: " + JSON.stringify(resp));
+        });
+
+        //});
+    }
+
+
 
 
     console.log("***EVENTS: Waiting for Monitors to load before I proceed");
diff --git a/www/js/MontageCtrl.js b/www/js/MontageCtrl.js
index 79220658..9313d660 100644
--- a/www/js/MontageCtrl.js
+++ b/www/js/MontageCtrl.js
@@ -4,10 +4,239 @@
 /* global cordova,StatusBar,angular,console */
 
 
-angular.module('zmApp.controllers').controller('zmApp.MontageCtrl', ['$scope', '$rootScope', 'ZMDataModel', 'message', '$ionicSideMenuDelegate', '$timeout', '$interval', '$ionicModal', '$ionicLoading', function ($scope, $rootScope, ZMDataModel, message, $ionicSideMenuDelegate, $timeout, $interval, $ionicModal, $ionicLoading) {
+angular.module('zmApp.controllers').controller('zmApp.MontageCtrl', ['$scope', '$rootScope', 'ZMDataModel', 'message', '$ionicSideMenuDelegate', '$timeout', '$interval', '$ionicModal', '$ionicLoading', '$http', function ($scope, $rootScope, ZMDataModel, message, $ionicSideMenuDelegate, $timeout, $interval, $ionicModal, $ionicLoading, $http) {
 
     var timestamp = new Date().getUTCMilliseconds();
 
+      $scope.togglePTZ = function () {
+        $scope.showPTZ = !$scope.showPTZ;
+    };
+
+      $scope.radialMenuOptions = {
+        content: '',
+
+        background: '#2F4F4F',
+        isOpen: false,
+        toggleOnClick: false,
+        button: {
+            cssClass: "fa  fa-arrows-alt",
+        },
+        items: [
+            {
+                content: '',
+                cssClass: 'fa fa-chevron-circle-up',
+                empty: false,
+                onclick: function () {
+                    controlPTZ($scope.monitorId, 'Down');
+                }
+    },
+
+            {
+                content: '',
+                cssClass: 'fa fa-chevron-circle-up',
+                empty: false,
+                onclick: function () {
+                    controlPTZ($scope.monitorId, 'DownLeft');
+                }
+    },
+
+            {
+                content: '',
+                cssClass: 'fa fa-chevron-circle-up',
+                empty: false,
+
+                onclick: function () {
+                    controlPTZ($scope.monitorId, 'Left');
+                }
+    },
+            {
+                content: 'D',
+                empty: true,
+
+                onclick: function () {
+                    console.log('About');
+                }
+    },
+
+            {
+                content: '',
+                cssClass: 'fa fa-chevron-circle-up',
+                empty: false,
+                onclick: function () {
+                    controlPTZ($scope.monitorId, 'UpLeft');
+                }
+    },
+
+            {
+                content: '',
+                cssClass: 'fa fa-chevron-circle-up',
+                empty: false,
+                onclick: function () {
+                    controlPTZ($scope.monitorId, 'Up');
+                }
+    },
+
+            {
+                content: '',
+                cssClass: 'fa fa-chevron-circle-up',
+                empty: false,
+                onclick: function () {
+                    controlPTZ($scope.monitorId, 'UpRight');
+                }
+    },
+
+            {
+                content: 'H',
+                empty: true,
+                onclick: function () {
+                    console.log('About');
+                }
+    },
+
+            {
+                content: '',
+                cssClass: 'fa fa-chevron-circle-up',
+                empty: false,
+                onclick: function () {
+                    controlPTZ($scope.monitorId, 'Right');
+                }
+    },
+
+
+            {
+                content: '',
+                cssClass: 'fa fa-chevron-circle-up',
+                empty: false,
+                onclick: function () {
+                    controlPTZ($scope.monitorId, 'DownRight');
+                }
+    },
+
+            {
+                content: 'K',
+                empty: true,
+                onclick: function () {
+                    console.log('About');
+                }
+    },
+
+
+  ]
+    };
+
+    function controlPTZ(monitorId, cmd) {
+        //    curl -X POST "http://arjunrc.ddns.net:9898/zm/index.php" -d "view=request&request=control&user=admin&passwd=indiglo&id=4&control=moveConLeft"
+
+
+        //curl -X POST "http://server.com/zm/index.php?view=request" -d "request=control&user=admin&passwd=xx&id=4&control=moveConLeft"
+
+        console.log("Command value " + cmd + " with MID=" + monitorId);
+
+        if (ZMDataModel.isSimulated()) {
+            var str = "simulation mode. no action taken";
+            $ionicLoading.show({
+                template: str,
+                noBackdrop: true,
+                duration: 3000
+            });
+            return;
+        }
+
+        $ionicLoading.hide();
+        $ionicLoading.show({
+            template: "please wait...",
+            noBackdrop: true,
+            duration: 15000,
+        });
+
+        var loginData = ZMDataModel.getLogin();
+
+        /*  $http({
+              method:'POST',
+              url:loginData.url + '/index.php',
+              headers:{
+                  'Content-Type': 'application/x-www-form-urlencoded',
+                 'Accept': 'application/json',
+              },
+              transformRequest: function (obj) {
+                  var str = [];
+                  for (var p in obj)
+                      str.push(encodeURIComponent(p) + "=" +
+                          encodeURIComponent(obj[p]));
+                  var foo = str.join("&");
+                  console.log("****RETURNING " + foo);
+                  return foo;
+              },
+
+              data: {
+                  username:loginData.username,
+                  password:loginData.password,
+                  action:"login",
+                  view:"console"
+              }
+          })
+          .success (function(data,status,header,config)
+          {*/
+        $ionicLoading.hide();
+        $ionicLoading.show({
+            template: "Sending PTZ..",
+            noBackdrop: true,
+            duration: 15000,
+        });
+        // console.log ("ANGULAR VERSION: "+JSON.stringify(angular.version));
+
+        // console.log('Set-Cookie'+ header('Set-Cookie')); //
+
+
+        var req = $http({
+            method: 'POST',
+            /*timeout: 15000,*/
+            url: loginData.url + '/index.php',
+            headers: {
+                'Content-Type': 'application/x-www-form-urlencoded',
+                'Accept': 'application/json',
+            },
+            transformRequest: function (obj) {
+                var str = [];
+                for (var p in obj)
+                    str.push(encodeURIComponent(p) + "=" +
+                        encodeURIComponent(obj[p]));
+                var foo = str.join("&");
+                console.log("****RETURNING " + foo);
+                return foo;
+            },
+
+            data: {
+                view: "request",
+                request: "control",
+                id: monitorId,
+                //connkey: $scope.connKey,
+                control: "moveCon" + cmd,
+                xge: "30",
+                yge: "30",
+                //user: loginData.username,
+                //pass: loginData.password
+            }
+
+        });
+
+        req.success(function (resp) {
+            $ionicLoading.hide();
+            console.log("SUCCESS: " + JSON.stringify(resp));
+
+            // $ionicLoading.hide();
+
+        });
+
+        req.error(function (resp) {
+            $ionicLoading.hide();
+            console.log("ERROR: " + JSON.stringify(resp));
+        });
+
+        //});
+    }
+
+
 
     // same logic as EventCtrl.js
     $scope.finishedLoadingImage = function () {
@@ -20,7 +249,7 @@ angular.module('zmApp.controllers').controller('zmApp.MontageCtrl', ['$scope', '
     };
 
 
-    $scope.openModal = function (mid) {
+    $scope.openModal = function (mid, controllable) {
         console.log("Open Monitor Modal");
 
         $scope.monitorId = mid;
@@ -40,6 +269,8 @@ angular.module('zmApp.controllers').controller('zmApp.MontageCtrl', ['$scope', '
                     noBackdrop: true,
                     duration: 15000
                 });
+            $scope.isControllable = controllable;
+                $scope.showPTZ = false;
                 $scope.modal.show();
             });
 
diff --git a/www/js/app.js b/www/js/app.js
index 7efea0e1..b541128c 100644
--- a/www/js/app.js
+++ b/www/js/app.js
@@ -6,7 +6,7 @@
 // core app start stuff
 angular.module('zmApp', [
                             'ionic',
-                            'zmApp.controllers'
+                            'zmApp.controllers',
 
                         ])
 
@@ -89,7 +89,7 @@ angular.module('zmApp', [
 */
 
 
-.run(function ($ionicPlatform, $ionicPopup, $rootScope, $state, ZMDataModel, $cordovaSplashscreen) {
+.run(function ($ionicPlatform, $ionicPopup, $rootScope, $state, ZMDataModel, $cordovaSplashscreen, $http) {
 
     ZMDataModel.init();
     var loginData = ZMDataModel.getLogin();
@@ -179,11 +179,55 @@ angular.module('zmApp', [
 
 
     });
+
+
+    // lets POST so we get a session ID right hre
+  //  var loginData = ZMDataModel.getLogin();
+
+    console.log ("*** INIT LOGIN ****");
+    $http({
+        method:'POST',
+        url:loginData.url + '/index.php',
+        headers:{
+            'Content-Type': 'application/x-www-form-urlencoded',
+           'Accept': 'application/json',
+        },
+        transformRequest: function (obj) {
+            var str = [];
+            for (var p in obj)
+                str.push(encodeURIComponent(p) + "=" +
+                    encodeURIComponent(obj[p]));
+            var foo = str.join("&");
+            console.log("****RETURNING " + foo);
+            return foo;
+        },
+
+        data: {
+            username:loginData.username,
+            password:loginData.password,
+            action:"login",
+            view:"console"
+        }
+    })
+    .success(function(data)
+    {
+        console.log ("**** INIT LOGIN OK");
+    })
+    .error(function(error)
+    {
+        console.log ("**** INIT LOGIN FAILED");
+    });
+
+
+
+
+
 })
 
 // My route map connecting menu options to their respective templates and controllers
 .config(function ($stateProvider, $urlRouterProvider, $httpProvider) {
-
+    // If you do this, Allow Origin can't be *
+    //$httpProvider.defaults.withCredentials = true;
     $httpProvider.interceptors.push('timeoutHttpIntercept');
     //$httpProvider.interceptors.push('httpAuthIntercept');
 
diff --git a/www/js/controllers.js b/www/js/controllers.js
index d11b248a..bd907c19 100644
--- a/www/js/controllers.js
+++ b/www/js/controllers.js
@@ -2,7 +2,7 @@
 /* jshint browser: true*/
 /* global cordova,StatusBar,angular,console */
 
-angular.module('zmApp.controllers', ['ionic',  'tc.chartjs', 'ngCordova', 'ng-mfb' ])
+angular.module('zmApp.controllers', ['ionic', 'tc.chartjs', 'ngCordova', 'ng-mfb','angularCircularNavigation' ])
 
 
 .controller('zmApp.AppCtrl', function($scope, $ionicSideMenuDelegate) {
@@ -10,3 +10,4 @@ angular.module('zmApp.controllers', ['ionic',  'tc.chartjs', 'ngCordova', 'ng-mf
     $ionicSideMenuDelegate.toggleLeft();
   };
 });
+