Joystick widget dashboard

package.json

@@ -49,6 +49,8 @@
     "md-steppers": "^0.3.4",
     "moment": "^2.18.1",
     "ng-ripple": "^1.0.3",
+    "ngtouch": "^1.0.1",
+    "nipplejs": "^0.6.7",
     "sass-material-colors": "0.0.5",
     "typeface-roboto": "0.0.29"
   },

src/app/dashboard/dashboard.controller.js

@@ -25,10 +25,11 @@ import newDashboardTemplate from './new-dashboard.tpl.html';
 import renameDashboardTemplate from './rename-dashboard.tpl.html';
 import moment from 'moment';
 
+import nipplejs from 'nipplejs/dist/nipplejs.js';
 /* eslint-disable no-undef, angular/window-service, angular/document-service */
 
 /*@ngInject*/
-export default function DashboardController($scope, userService, dashboardService, store, $window, $mdMedia, $mdSidenav, $document, $timeout, $mdDialog, $rootScope, $translate, toast, $state, settings, Fullscreen, $log) {
+export default function DashboardController($scope, userService, dashboardService, store, $window, $mdMedia, $mdSidenav, $document, $timeout, $mdDialog, $rootScope, $translate, toast, $state, settings, Fullscreen, $log,$interval) {
     var vm = this;
     var mqttClient;
     var authKey = '';
@@ -197,6 +198,7 @@ export default function DashboardController($scope, userService, dashboardServic
             }
 
             initDashboardData(data.data);
+            initDashboardContent();
         });
     }
 
@@ -481,9 +483,97 @@ export default function DashboardController($scope, userService, dashboardServic
                 minItemRows: 2
             })
         }
+        else if(type==='joystick'){
+            var Joystick = {
+                name:'Joystick',
+                type:'joystick',
+                bgColor:'#e91e63',
+                control:'',
+                itv:'',
+                id:0,
+                options:{
+                    zone:null,
+                    color:'white',
+                    mode:'dynamic',
+                },
+                position:{
+                    x:0,y:0
+                },
+                newangle:'',
+                angle:'',
+                subscribeMessage:{
+                    topic:'',
+                    message:'',
+                },
+                cols:2,
+                rows:2,
+                minItemCols:2,
+                minItemRows:2,
+                maxItemCols:6,
+                maxItemRows:6,
+            }
+            for(var v = 0;v<vm.currentDashboard.content.length;v++)
+            {
+                if(vm.currentDashboard.content[v].type==='joystick')
+                {
+                    if(Joystick.id < vm.currentDashboard.content[v].id){
+                        Joystick.id=vm.currentDashboard.content[v].id;
+                    }
+                }
+            }
+            Joystick.id++;
+            vm.currentDashboard.content.push(Joystick);
+            initJoystick(Joystick);
+        }
         $mdSidenav('widget-library').close();
     }
+    function initJoystick(Joystick)
+    {
+
+        Joystick.itv= $interval(function(){
+            if(Joystick.angle!==Joystick.newangle)
+            {
+                Joystick.angle = Joystick.newangle;
+                sendMessage(Joystick.subscribeMessage.topic,Joystick.angle.toString());
+            }
+        },100);
+        var itv=$interval(function(){
+                var v = $document[0].getElementById('Joystick'+Joystick.id);
+                if(v==null){
+                    $log.log("Joystick returned as null.");
+                }
+                else
+                {
+                    Joystick.options.zone=v;
+                    Joystick.control = nipplejs.create(Joystick.options);
+
+                    Joystick.control.on('move end',function(e,data){
+                        //$log.log(e);
+                        if(angular.isUndefined(data.direction))
+                        {
+                                //
+
+                                Joystick.newangle="stop";
+                        }
+                        else
+                        {
+                            if(angular.isUndefined(data.direction.angle)){
+                                //
+                            }
+                            else{
+                                Joystick.newangle=data.direction.angle;
+                            }
+                        }
+                    } );
+                    cancelInterval(itv);
+                }
+            },1000);
+
 
+    }
+    function cancelInterval(intervalId){
+        $interval.cancel(intervalId);
+    }
     function widgetAction(widget, position) {
         if (vm.editMode) {
             return;
@@ -655,7 +745,15 @@ export default function DashboardController($scope, userService, dashboardServic
             });
         }
     }
-
+    function initDashboardContent(){
+        for(var i=0;i<vm.currentDashboard.content.length;i++)
+        {
+            if(vm.currentDashboard.content[i].type==='joystick')
+            {
+                    initJoystick(vm.currentDashboard.content[i]);
+            }
+        }
+    }
     function initDashboardData(data) {
         if (!data.length) {
             return;
@@ -664,6 +762,7 @@ export default function DashboardController($scope, userService, dashboardServic
             if (vm.dashboards[i].content.length) {
                 for (var j = 0; j < vm.dashboards[i].content.length; j++) {
                     var widget = vm.dashboards[i].content[j];
+
                     if (angular.isDefined(widget.subscribeMessage)) {
                         var wantedData = data.filter(function (item) {
                             return item.topic === widget.subscribeMessage.topic && item.dataType === widget.subscribeMessage.dataType;

src/app/dashboard/dashboard.scss

@@ -179,7 +179,14 @@ md-whiteframe {
         height: 120px;
     }
 }
-
+.tb-widget-joystick{
+    background-color: #e91e63;
+    color: #ffffff;
+
+}
+.tb-widget-joystick-icon{
+    font-size:48px!important;
+}
 .white-slider .md-thumb:after,
 .white-slider .md-track-fill {
     background-color: #ffffff !important;

src/app/dashboard/widget-config.tpl.html

@@ -213,6 +213,20 @@ <h5 flex>{{vm.selectedWidget.type==='valuedisplay'?'Display':vm.selectedWidget.t
                 <input type="text" ng-model="vm.selectedWidget.color" disabled/>
             </md-input-container>
         </div>
+
+        <div ng-if="vm.selectedWidget.type=='joystick'">
+            <md-input-container>
+                <label>Name</label>
+                <input ng-model="vm.selectedWidget.name">
+            </md-input-container>
+            <div layout="row">
+               <tb-color-picker color="vm.selectedWidget.bgColor"></tb-color-picker>
+            </div>
+            <md-input-container>
+                <label>Output Topic</label>
+                <input type="text" ng-model="vm.selectedWidget.subscribeMessage.topic" />
+            </md-input-container>
+        </div>
     </div>
     <div layout="row">
         <md-button class="md-warn" ng-click="vm.removeWidget()">

src/app/dashboard/widget-library.tpl.html

@@ -113,5 +113,18 @@ <h4>Chart</h4>
                 </ripple>
             </md-whiteframe>
         </div>
+
+        <div layout="row">
+            <md-whiteframe layout="row" layout-margin ng-click="vm.addWidget('joystick')" class="md-whiteframe-4dp tb-widget-joystick" flex="40">
+                <div class="tb-widget-tile-header">
+                    <h4>Joystick</h4>
+                </div>
+                <ripple r-disabled>
+                    <div class="tb-widget-tile-body" layout-fill layout="column" layout-align="center center">
+                        <i class="material-icons" aria-hidden="true">games</i>
+                    </div>
+                </ripple>
+            </md-whiteframe>
+        </div>
     </div>
 </md-sidenav>

src/app/dashboard/widget-templates.tpl.html

@@ -160,4 +160,30 @@ <h4 ng-if="item.name.length">{{item.name}}</h4>
             </div>
         </ripple>
     </md-whiteframe>
-</script>
+</script>
+
+
+
+<!-- Template for Joystick widget -->
+<script type="text/ng-template" id="joystick.html">
+    <md-whiteframe flex layout class="md-whiteframe-4dp" ng-attr-style="background-color: {{item.bgColor}};">
+        <div class="tb-widget-tile-header">
+            <h4 ng-if="item.name.length">{{item.name}}</h4>
+        </div>
+        <div ng-if="vm.editMode" class="tb-widget-edit">
+            <md-button ng-click="vm.toggleWidgetConfig($index)" ng-touchstart="vm.toggleWidgetConfig($index)">
+                <md-icon class="material-icons md-light md-48">mode_edit</md-icon>
+            </md-button>
+        </div>
+        <div ng-hide="vm.editMode" class="joystick_container" layout layout-fill layout-align="center center" id="{{'Joystick'+item.id}}" ng-class="vm.editMode ? 'disabled' : ''">
+            <div class="material-icons tb-widget-joystick-icon">
+                touch_app
+            </div>
+            <div class="nipple">
+                <div class="front"></div>
+                <div class="back"></div>
+            </div>
+        </div>
+    </md-whiteframe>
+</script>
+