From d3829567b74d686092880953587093fb37128368 Mon Sep 17 00:00:00 2001
From: "TMA\\intern.nttuan2" <ntt5794@gmail.com>
Date: Thu, 12 Oct 2017 17:27:18 +0700
Subject: [PATCH 01/16] Install and create Joystick Widget template (No
 function implemented yet)

---
 package.json                                |  1 +
 src/app/dashboard/dashboard.controller.js   | 61 ++++++++++++++++++++-
 src/app/dashboard/dashboard.scss            |  5 +-
 src/app/dashboard/widget-config.tpl.html    | 14 +++++
 src/app/dashboard/widget-library.tpl.html   | 13 +++++
 src/app/dashboard/widget-templates.tpl.html | 25 ++++++++-
 6 files changed, 115 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index 9052188..3a3ea4f 100644
--- a/package.json
+++ b/package.json
@@ -49,6 +49,7 @@
     "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"
   },
diff --git a/src/app/dashboard/dashboard.controller.js b/src/app/dashboard/dashboard.controller.js
index 24339a9..dbb2fc1 100644
--- a/src/app/dashboard/dashboard.controller.js
+++ b/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,$interval, $mdDialog, $rootScope, $translate, toast, $state, settings, Fullscreen, $log) {
     var vm = this;
     var mqttClient;
     var authKey = '';
@@ -476,9 +477,65 @@ export default function DashboardController($scope, userService, dashboardServic
                 minItemRows: 2
             })
         }
+        else if(type==='joystick'){
+            var Joystick = {
+                name:'Joystick',
+                type:'joystick',
+                bgColor:'#e91e63',
+                control:'',
+                id:0,
+                options:{
+                    zone:null,
+                    color:'white',
+                    mode:'dynamic',
+                },
+                position:{
+                    x:0,y:0
+                },
+                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(Joystick.id < vm.currentDashboard.content[v].id){
+                    Joystick.id=vm.currentDashboard.content[v].id;
+                }
+            }
+            Joystick.id++;
+            vm.currentDashboard.content.push(Joystick);
+            var itv=$interval(function(){
+                var v = $document[0].getElementById('Joystick'+Joystick.id);
+                if(v==null){
+                    $log.log("is null");
+                }
+                else
+                {
+                    $log.log(v);
+                    Joystick.options.zone=v;
+                    Joystick.control = nipplejs.create(Joystick.options);
+                    Joystick.control.on('move',function(e,data){
+                        $log.log(e);
+                        $log.log(data);
+                    } )
+                    cancelInterval(itv);
+                }
+            },1000)
+            $log.log(nipplejs);
+        }   
         $mdSidenav('widget-library').close();
     }
-
+    function cancelInterval(intervalId){
+        $interval.cancel(intervalId);
+    }
     function widgetAction(widget, position) {
         if (vm.editMode) {
             return;
diff --git a/src/app/dashboard/dashboard.scss b/src/app/dashboard/dashboard.scss
index cac0867..fa2f287 100644
--- a/src/app/dashboard/dashboard.scss
+++ b/src/app/dashboard/dashboard.scss
@@ -179,7 +179,10 @@ md-whiteframe {
         height: 120px;
     }
 }
-
+.tb-widget-joystick{
+    background-color: #2196f3;
+    color: #ffffff;
+}
 .white-slider .md-thumb:after,
 .white-slider .md-track-fill {
     background-color: #ffffff !important;
diff --git a/src/app/dashboard/widget-config.tpl.html b/src/app/dashboard/widget-config.tpl.html
index 944cf4f..639e428 100644
--- a/src/app/dashboard/widget-config.tpl.html
+++ b/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" layout-align="space-around end">
+               <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()">
diff --git a/src/app/dashboard/widget-library.tpl.html b/src/app/dashboard/widget-library.tpl.html
index 7a9758e..0e5548c 100644
--- a/src/app/dashboard/widget-library.tpl.html
+++ b/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="icon-sun" aria-hidden="true"></i>
+                    </div>
+                </ripple>
+            </md-whiteframe>
+        </div>
     </div>
 </md-sidenav>
\ No newline at end of file
diff --git a/src/app/dashboard/widget-templates.tpl.html b/src/app/dashboard/widget-templates.tpl.html
index 16acb30..37b8906 100644
--- a/src/app/dashboard/widget-templates.tpl.html
+++ b/src/app/dashboard/widget-templates.tpl.html
@@ -160,4 +160,27 @@ <h4 ng-if="item.name.length">{{item.name}}</h4>
             </div>
         </ripple>
     </md-whiteframe>
-</script>
\ No newline at end of file
+</script>
+
+
+
+<!-- Template for Joystick widget -->
+<script type="text/ng-template" id="joystick.html">
+    <md-whiteframe flex layout class="md-whiteframe-4dp tb-widget-bottom-sheet" 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 class="joystick_container" layout layout-fill layout-align="center center" id="{{'Joystick'+item.id}}" ng-class="vm.editMode ? 'disabled' : ''">
+            <div class="nipple">
+                <div class="front"></div>
+                <div class="back"></div>
+            </div>
+        </div>
+    </md-whiteframe>
+</script>
+

From e1b54b898bd96927f695c6cf540130e83afdde4f Mon Sep 17 00:00:00 2001
From: "TMA\\intern.nttuan2" <ntt5794@gmail.com>
Date: Thu, 12 Oct 2017 18:11:30 +0700
Subject: [PATCH 02/16] Update Joystick Widget : Reading directions

---
 src/app/dashboard/dashboard.controller.js | 35 +++++++++++++++++++++--
 1 file changed, 32 insertions(+), 3 deletions(-)

diff --git a/src/app/dashboard/dashboard.controller.js b/src/app/dashboard/dashboard.controller.js
index dbb2fc1..f71150f 100644
--- a/src/app/dashboard/dashboard.controller.js
+++ b/src/app/dashboard/dashboard.controller.js
@@ -522,10 +522,39 @@ export default function DashboardController($scope, userService, dashboardServic
                     $log.log(v);
                     Joystick.options.zone=v;
                     Joystick.control = nipplejs.create(Joystick.options);
+                    
                     Joystick.control.on('move',function(e,data){
-                        $log.log(e);
-                        $log.log(data);
-                    } )
+                        //$log.log(e);
+                        if(angular.isUndefined(data.direction))
+                        {
+                                //
+                        }
+                        else
+                        {
+                            $log.log("----------------------------------");
+                            if(angular.isUndefined(data.direction.x)){
+                                //
+                            }
+                            else{
+                                $log.log(data.direction.x);
+                            
+                            }
+                            if(angular.isUndefined(data.direction.y)){
+                                //
+                            }
+                            else{
+                                $log.log(data.direction.y);
+                            
+                            }
+                            if(angular.isUndefined(data.direction.angle)){
+                                //
+                            }
+                            else{
+                                $log.log(data.direction.angle);
+                            
+                            }
+                        }
+                    } );
                     cancelInterval(itv);
                 }
             },1000)

From 181c5167d8f6db7ab8d6e765549ad6d6eff8631e Mon Sep 17 00:00:00 2001
From: "TMA\\intern.nttuan2" <ntt5794@gmail.com>
Date: Fri, 13 Oct 2017 10:52:09 +0700
Subject: [PATCH 03/16] Update joystick to only return data when direction is
 changed with a checking interval of 10 miliseconds (less spammy than
 continuously sending data)

---
 src/app/dashboard/dashboard.controller.js | 51 ++++++++++++++++-------
 1 file changed, 36 insertions(+), 15 deletions(-)

diff --git a/src/app/dashboard/dashboard.controller.js b/src/app/dashboard/dashboard.controller.js
index f71150f..8bc6fb5 100644
--- a/src/app/dashboard/dashboard.controller.js
+++ b/src/app/dashboard/dashboard.controller.js
@@ -483,6 +483,7 @@ export default function DashboardController($scope, userService, dashboardServic
                 type:'joystick',
                 bgColor:'#e91e63',
                 control:'',
+                itv:'',
                 id:0,
                 options:{
                     zone:null,
@@ -492,6 +493,7 @@ export default function DashboardController($scope, userService, dashboardServic
                 position:{
                     x:0,y:0
                 },
+                newangle:'',
                 angle:'',
                 subscribeMessage:{
                     topic:'',
@@ -506,61 +508,80 @@ export default function DashboardController($scope, userService, dashboardServic
             }
             for(var v = 0;v<vm.currentDashboard.content.length;v++)
             {
-                if(Joystick.id < vm.currentDashboard.content[v].id){
-                    Joystick.id=vm.currentDashboard.content[v].id;
+                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);
-            var itv=$interval(function(){
+            initJoystick(Joystick);
+        }
+        $mdSidenav('widget-library').close();
+    }
+    function initJoystick(Joystick)
+    {
+        
+        Joystick.itv= $interval(function(){
+            if(Joystick.angle!==Joystick.newangle)
+            {
+                Joystick.angle = Joystick.newangle;
+                $log.log(Joystick.angle);
+                //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("is null");
+                    $log.log("Joystick returned as null.");
                 }
                 else
                 {
-                    $log.log(v);
                     Joystick.options.zone=v;
                     Joystick.control = nipplejs.create(Joystick.options);
                     
-                    Joystick.control.on('move',function(e,data){
+                    Joystick.control.on('move end',function(e,data){
                         //$log.log(e);
                         if(angular.isUndefined(data.direction))
                         {
                                 //
+                                
+                                Joystick.newangle="stop";
                         }
                         else
                         {
-                            $log.log("----------------------------------");
+                            
+                            //$log.log("----------------------------------");
                             if(angular.isUndefined(data.direction.x)){
                                 //
                             }
                             else{
-                                $log.log(data.direction.x);
+                                //$log.log(data.direction.x);
                             
                             }
                             if(angular.isUndefined(data.direction.y)){
                                 //
                             }
                             else{
-                                $log.log(data.direction.y);
+                                //$log.log(data.direction.y);
                             
                             }
                             if(angular.isUndefined(data.direction.angle)){
                                 //
                             }
                             else{
-                                $log.log(data.direction.angle);
-                            
+                                //$log.log(data.direction.angle);
+                                Joystick.newangle=data.direction.angle;
                             }
                         }
                     } );
                     cancelInterval(itv);
                 }
-            },1000)
-            $log.log(nipplejs);
-        }   
-        $mdSidenav('widget-library').close();
+            },1000);
+
+
     }
     function cancelInterval(intervalId){
         $interval.cancel(intervalId);

From 20ccc818aaec7360d060530dae346c6e35e5f724 Mon Sep 17 00:00:00 2001
From: "TMA\\intern.nttuan2" <ntt5794@gmail.com>
Date: Fri, 13 Oct 2017 15:55:38 +0700
Subject: [PATCH 04/16] Update Allow Joystick widget to sendMessage to topic

---
 src/app/dashboard/dashboard.controller.js | 14 ++++++++++++--
 src/app/dashboard/widget-config.tpl.html  |  2 +-
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/app/dashboard/dashboard.controller.js b/src/app/dashboard/dashboard.controller.js
index 8bc6fb5..677e1d1 100644
--- a/src/app/dashboard/dashboard.controller.js
+++ b/src/app/dashboard/dashboard.controller.js
@@ -193,6 +193,7 @@ export default function DashboardController($scope, userService, dashboardServic
                 });
             }
             initDashboardData(data.data);
+            initDashboardContent();
         });
     }
 
@@ -529,7 +530,7 @@ export default function DashboardController($scope, userService, dashboardServic
             {
                 Joystick.angle = Joystick.newangle;
                 $log.log(Joystick.angle);
-                //sendMessage(Joystick.subscribeMessage.topic,Joystick.angle.toString());
+                sendMessage(Joystick.subscribeMessage.topic,Joystick.angle.toString());
             }
         },100);
         var itv=$interval(function(){
@@ -757,7 +758,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;
@@ -766,6 +775,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;
diff --git a/src/app/dashboard/widget-config.tpl.html b/src/app/dashboard/widget-config.tpl.html
index 639e428..51283ca 100644
--- a/src/app/dashboard/widget-config.tpl.html
+++ b/src/app/dashboard/widget-config.tpl.html
@@ -219,7 +219,7 @@ <h5 flex>{{vm.selectedWidget.type==='valuedisplay'?'Display':vm.selectedWidget.t
                 <label>Name</label>
                 <input ng-model="vm.selectedWidget.name">
             </md-input-container>
-            <div layout="row" layout-align="space-around end">
+            <div layout="row">
                <tb-color-picker color="vm.selectedWidget.bgColor"></tb-color-picker>
             </div>
             <md-input-container>

From 26398ffb98e410f928e55db872da5a89593b2e94 Mon Sep 17 00:00:00 2001
From: "TMA\\intern.nttuan2" <ntt5794@gmail.com>
Date: Fri, 13 Oct 2017 16:55:17 +0700
Subject: [PATCH 05/16] Update joystick. Disable joystick if in editMode

---
 src/app/dashboard/widget-templates.tpl.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/dashboard/widget-templates.tpl.html b/src/app/dashboard/widget-templates.tpl.html
index 37b8906..3360230 100644
--- a/src/app/dashboard/widget-templates.tpl.html
+++ b/src/app/dashboard/widget-templates.tpl.html
@@ -175,7 +175,7 @@ <h4 ng-if="item.name.length">{{item.name}}</h4>
                 <md-icon class="material-icons md-light md-48">mode_edit</md-icon>
             </md-button>
         </div>
-        <div class="joystick_container" layout layout-fill layout-align="center center" id="{{'Joystick'+item.id}}" ng-class="vm.editMode ? 'disabled' : ''">
+        <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="nipple">
                 <div class="front"></div>
                 <div class="back"></div>

From e396f5f8f378eb36f79986b64bf75c3c48b0e37b Mon Sep 17 00:00:00 2001
From: "TMA\\intern.nttuan2" <ntt5794@gmail.com>
Date: Mon, 16 Oct 2017 10:25:49 +0700
Subject: [PATCH 06/16] Update $interval service in dashboard controller

---
 src/app/dashboard/dashboard.controller.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/dashboard/dashboard.controller.js b/src/app/dashboard/dashboard.controller.js
index 677e1d1..9011592 100644
--- a/src/app/dashboard/dashboard.controller.js
+++ b/src/app/dashboard/dashboard.controller.js
@@ -29,7 +29,7 @@ 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,$interval, $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 = '';

From 6c646ded7eae1a0a80691e7aacaa57bbbcbbdd4a Mon Sep 17 00:00:00 2001
From: "TMA\\intern.nttuan2" <ntt5794@gmail.com>
Date: Thu, 12 Oct 2017 17:27:18 +0700
Subject: [PATCH 07/16] Install and create Joystick Widget template (No
 function implemented yet)

---
 package.json                                |  2 +
 src/app/dashboard/dashboard.controller.js   | 61 ++++++++++++++++++++-
 src/app/dashboard/dashboard.scss            |  5 +-
 src/app/dashboard/widget-config.tpl.html    | 14 +++++
 src/app/dashboard/widget-library.tpl.html   | 13 +++++
 src/app/dashboard/widget-templates.tpl.html | 25 ++++++++-
 6 files changed, 116 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index 1d7b445..1d6aa7c 100644
--- a/package.json
+++ b/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"
   },
diff --git a/src/app/dashboard/dashboard.controller.js b/src/app/dashboard/dashboard.controller.js
index 826b128..bb7c7c7 100644
--- a/src/app/dashboard/dashboard.controller.js
+++ b/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,$interval, $mdDialog, $rootScope, $translate, toast, $state, settings, Fullscreen, $log) {
     var vm = this;
     var mqttClient;
     var authKey = '';
@@ -481,9 +482,65 @@ export default function DashboardController($scope, userService, dashboardServic
                 minItemRows: 2
             })
         }
+        else if(type==='joystick'){
+            var Joystick = {
+                name:'Joystick',
+                type:'joystick',
+                bgColor:'#e91e63',
+                control:'',
+                id:0,
+                options:{
+                    zone:null,
+                    color:'white',
+                    mode:'dynamic',
+                },
+                position:{
+                    x:0,y:0
+                },
+                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(Joystick.id < vm.currentDashboard.content[v].id){
+                    Joystick.id=vm.currentDashboard.content[v].id;
+                }
+            }
+            Joystick.id++;
+            vm.currentDashboard.content.push(Joystick);
+            var itv=$interval(function(){
+                var v = $document[0].getElementById('Joystick'+Joystick.id);
+                if(v==null){
+                    $log.log("is null");
+                }
+                else
+                {
+                    $log.log(v);
+                    Joystick.options.zone=v;
+                    Joystick.control = nipplejs.create(Joystick.options);
+                    Joystick.control.on('move',function(e,data){
+                        $log.log(e);
+                        $log.log(data);
+                    } )
+                    cancelInterval(itv);
+                }
+            },1000)
+            $log.log(nipplejs);
+        }   
         $mdSidenav('widget-library').close();
     }
-
+    function cancelInterval(intervalId){
+        $interval.cancel(intervalId);
+    }
     function widgetAction(widget, position) {
         if (vm.editMode) {
             return;
diff --git a/src/app/dashboard/dashboard.scss b/src/app/dashboard/dashboard.scss
index cac0867..fa2f287 100644
--- a/src/app/dashboard/dashboard.scss
+++ b/src/app/dashboard/dashboard.scss
@@ -179,7 +179,10 @@ md-whiteframe {
         height: 120px;
     }
 }
-
+.tb-widget-joystick{
+    background-color: #2196f3;
+    color: #ffffff;
+}
 .white-slider .md-thumb:after,
 .white-slider .md-track-fill {
     background-color: #ffffff !important;
diff --git a/src/app/dashboard/widget-config.tpl.html b/src/app/dashboard/widget-config.tpl.html
index 944cf4f..639e428 100644
--- a/src/app/dashboard/widget-config.tpl.html
+++ b/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" layout-align="space-around end">
+               <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()">
diff --git a/src/app/dashboard/widget-library.tpl.html b/src/app/dashboard/widget-library.tpl.html
index 7a9758e..0e5548c 100644
--- a/src/app/dashboard/widget-library.tpl.html
+++ b/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="icon-sun" aria-hidden="true"></i>
+                    </div>
+                </ripple>
+            </md-whiteframe>
+        </div>
     </div>
 </md-sidenav>
\ No newline at end of file
diff --git a/src/app/dashboard/widget-templates.tpl.html b/src/app/dashboard/widget-templates.tpl.html
index eddafa3..9666205 100644
--- a/src/app/dashboard/widget-templates.tpl.html
+++ b/src/app/dashboard/widget-templates.tpl.html
@@ -160,4 +160,27 @@ <h4 ng-if="item.name.length">{{item.name}}</h4>
             </div>
         </ripple>
     </md-whiteframe>
-</script>
\ No newline at end of file
+</script>
+
+
+
+<!-- Template for Joystick widget -->
+<script type="text/ng-template" id="joystick.html">
+    <md-whiteframe flex layout class="md-whiteframe-4dp tb-widget-bottom-sheet" 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 class="joystick_container" layout layout-fill layout-align="center center" id="{{'Joystick'+item.id}}" ng-class="vm.editMode ? 'disabled' : ''">
+            <div class="nipple">
+                <div class="front"></div>
+                <div class="back"></div>
+            </div>
+        </div>
+    </md-whiteframe>
+</script>
+

From 4fe1b8e200d2f61537651e0bb24f372433942401 Mon Sep 17 00:00:00 2001
From: "TMA\\intern.nttuan2" <ntt5794@gmail.com>
Date: Thu, 12 Oct 2017 18:11:30 +0700
Subject: [PATCH 08/16] Update Joystick Widget : Reading directions

---
 src/app/dashboard/dashboard.controller.js | 35 +++++++++++++++++++++--
 1 file changed, 32 insertions(+), 3 deletions(-)

diff --git a/src/app/dashboard/dashboard.controller.js b/src/app/dashboard/dashboard.controller.js
index bb7c7c7..58fd611 100644
--- a/src/app/dashboard/dashboard.controller.js
+++ b/src/app/dashboard/dashboard.controller.js
@@ -527,10 +527,39 @@ export default function DashboardController($scope, userService, dashboardServic
                     $log.log(v);
                     Joystick.options.zone=v;
                     Joystick.control = nipplejs.create(Joystick.options);
+                    
                     Joystick.control.on('move',function(e,data){
-                        $log.log(e);
-                        $log.log(data);
-                    } )
+                        //$log.log(e);
+                        if(angular.isUndefined(data.direction))
+                        {
+                                //
+                        }
+                        else
+                        {
+                            $log.log("----------------------------------");
+                            if(angular.isUndefined(data.direction.x)){
+                                //
+                            }
+                            else{
+                                $log.log(data.direction.x);
+                            
+                            }
+                            if(angular.isUndefined(data.direction.y)){
+                                //
+                            }
+                            else{
+                                $log.log(data.direction.y);
+                            
+                            }
+                            if(angular.isUndefined(data.direction.angle)){
+                                //
+                            }
+                            else{
+                                $log.log(data.direction.angle);
+                            
+                            }
+                        }
+                    } );
                     cancelInterval(itv);
                 }
             },1000)

From d0ab2a927f96d7b3f5cf130e3f980d180c150aaa Mon Sep 17 00:00:00 2001
From: "TMA\\intern.nttuan2" <ntt5794@gmail.com>
Date: Fri, 13 Oct 2017 10:52:09 +0700
Subject: [PATCH 09/16] Update joystick to only return data when direction is
 changed with a checking interval of 10 miliseconds (less spammy than
 continuously sending data)

---
 src/app/dashboard/dashboard.controller.js | 51 ++++++++++++++++-------
 1 file changed, 36 insertions(+), 15 deletions(-)

diff --git a/src/app/dashboard/dashboard.controller.js b/src/app/dashboard/dashboard.controller.js
index 58fd611..d465f50 100644
--- a/src/app/dashboard/dashboard.controller.js
+++ b/src/app/dashboard/dashboard.controller.js
@@ -488,6 +488,7 @@ export default function DashboardController($scope, userService, dashboardServic
                 type:'joystick',
                 bgColor:'#e91e63',
                 control:'',
+                itv:'',
                 id:0,
                 options:{
                     zone:null,
@@ -497,6 +498,7 @@ export default function DashboardController($scope, userService, dashboardServic
                 position:{
                     x:0,y:0
                 },
+                newangle:'',
                 angle:'',
                 subscribeMessage:{
                     topic:'',
@@ -511,61 +513,80 @@ export default function DashboardController($scope, userService, dashboardServic
             }
             for(var v = 0;v<vm.currentDashboard.content.length;v++)
             {
-                if(Joystick.id < vm.currentDashboard.content[v].id){
-                    Joystick.id=vm.currentDashboard.content[v].id;
+                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);
-            var itv=$interval(function(){
+            initJoystick(Joystick);
+        }
+        $mdSidenav('widget-library').close();
+    }
+    function initJoystick(Joystick)
+    {
+        
+        Joystick.itv= $interval(function(){
+            if(Joystick.angle!==Joystick.newangle)
+            {
+                Joystick.angle = Joystick.newangle;
+                $log.log(Joystick.angle);
+                //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("is null");
+                    $log.log("Joystick returned as null.");
                 }
                 else
                 {
-                    $log.log(v);
                     Joystick.options.zone=v;
                     Joystick.control = nipplejs.create(Joystick.options);
                     
-                    Joystick.control.on('move',function(e,data){
+                    Joystick.control.on('move end',function(e,data){
                         //$log.log(e);
                         if(angular.isUndefined(data.direction))
                         {
                                 //
+                                
+                                Joystick.newangle="stop";
                         }
                         else
                         {
-                            $log.log("----------------------------------");
+                            
+                            //$log.log("----------------------------------");
                             if(angular.isUndefined(data.direction.x)){
                                 //
                             }
                             else{
-                                $log.log(data.direction.x);
+                                //$log.log(data.direction.x);
                             
                             }
                             if(angular.isUndefined(data.direction.y)){
                                 //
                             }
                             else{
-                                $log.log(data.direction.y);
+                                //$log.log(data.direction.y);
                             
                             }
                             if(angular.isUndefined(data.direction.angle)){
                                 //
                             }
                             else{
-                                $log.log(data.direction.angle);
-                            
+                                //$log.log(data.direction.angle);
+                                Joystick.newangle=data.direction.angle;
                             }
                         }
                     } );
                     cancelInterval(itv);
                 }
-            },1000)
-            $log.log(nipplejs);
-        }   
-        $mdSidenav('widget-library').close();
+            },1000);
+
+
     }
     function cancelInterval(intervalId){
         $interval.cancel(intervalId);

From 70a661c22e33110ed370626e2d458d99d1a9a98e Mon Sep 17 00:00:00 2001
From: "TMA\\intern.nttuan2" <ntt5794@gmail.com>
Date: Fri, 13 Oct 2017 15:55:38 +0700
Subject: [PATCH 10/16] Update Allow Joystick widget to sendMessage to topic

---
 src/app/dashboard/dashboard.controller.js | 14 ++++++++++++--
 src/app/dashboard/widget-config.tpl.html  |  2 +-
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/app/dashboard/dashboard.controller.js b/src/app/dashboard/dashboard.controller.js
index d465f50..c93aa60 100644
--- a/src/app/dashboard/dashboard.controller.js
+++ b/src/app/dashboard/dashboard.controller.js
@@ -198,6 +198,7 @@ export default function DashboardController($scope, userService, dashboardServic
             }
 
             initDashboardData(data.data);
+            initDashboardContent();
         });
     }
 
@@ -534,7 +535,7 @@ export default function DashboardController($scope, userService, dashboardServic
             {
                 Joystick.angle = Joystick.newangle;
                 $log.log(Joystick.angle);
-                //sendMessage(Joystick.subscribeMessage.topic,Joystick.angle.toString());
+                sendMessage(Joystick.subscribeMessage.topic,Joystick.angle.toString());
             }
         },100);
         var itv=$interval(function(){
@@ -762,7 +763,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;
@@ -771,6 +780,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;
diff --git a/src/app/dashboard/widget-config.tpl.html b/src/app/dashboard/widget-config.tpl.html
index 639e428..51283ca 100644
--- a/src/app/dashboard/widget-config.tpl.html
+++ b/src/app/dashboard/widget-config.tpl.html
@@ -219,7 +219,7 @@ <h5 flex>{{vm.selectedWidget.type==='valuedisplay'?'Display':vm.selectedWidget.t
                 <label>Name</label>
                 <input ng-model="vm.selectedWidget.name">
             </md-input-container>
-            <div layout="row" layout-align="space-around end">
+            <div layout="row">
                <tb-color-picker color="vm.selectedWidget.bgColor"></tb-color-picker>
             </div>
             <md-input-container>

From edc0e3672fc8190dfc78481f50e305165b5bdeaf Mon Sep 17 00:00:00 2001
From: "TMA\\intern.nttuan2" <ntt5794@gmail.com>
Date: Fri, 13 Oct 2017 16:55:17 +0700
Subject: [PATCH 11/16] Update joystick. Disable joystick if in editMode

---
 src/app/dashboard/widget-templates.tpl.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/dashboard/widget-templates.tpl.html b/src/app/dashboard/widget-templates.tpl.html
index 9666205..adedaef 100644
--- a/src/app/dashboard/widget-templates.tpl.html
+++ b/src/app/dashboard/widget-templates.tpl.html
@@ -175,7 +175,7 @@ <h4 ng-if="item.name.length">{{item.name}}</h4>
                 <md-icon class="material-icons md-light md-48">mode_edit</md-icon>
             </md-button>
         </div>
-        <div class="joystick_container" layout layout-fill layout-align="center center" id="{{'Joystick'+item.id}}" ng-class="vm.editMode ? 'disabled' : ''">
+        <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="nipple">
                 <div class="front"></div>
                 <div class="back"></div>

From 4b983f48161b89c8301a076420d4936cec02312b Mon Sep 17 00:00:00 2001
From: "TMA\\intern.nttuan2" <ntt5794@gmail.com>
Date: Mon, 16 Oct 2017 10:25:49 +0700
Subject: [PATCH 12/16] Update $interval service in dashboard controller

---
 src/app/dashboard/dashboard.controller.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/dashboard/dashboard.controller.js b/src/app/dashboard/dashboard.controller.js
index c93aa60..cef1022 100644
--- a/src/app/dashboard/dashboard.controller.js
+++ b/src/app/dashboard/dashboard.controller.js
@@ -29,7 +29,7 @@ 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,$interval, $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 = '';

From 2d64305734f1f38178f0c754a39b7f71b6b849bd Mon Sep 17 00:00:00 2001
From: "TMA\\intern.nttuan2" <ntt5794@gmail.com>
Date: Tue, 17 Oct 2017 09:32:56 +0700
Subject: [PATCH 13/16] remove logging

---
 src/app/dashboard/dashboard.controller.js | 18 ------------------
 1 file changed, 18 deletions(-)

diff --git a/src/app/dashboard/dashboard.controller.js b/src/app/dashboard/dashboard.controller.js
index cef1022..08d0690 100644
--- a/src/app/dashboard/dashboard.controller.js
+++ b/src/app/dashboard/dashboard.controller.js
@@ -534,7 +534,6 @@ export default function DashboardController($scope, userService, dashboardServic
             if(Joystick.angle!==Joystick.newangle)
             {
                 Joystick.angle = Joystick.newangle;
-                $log.log(Joystick.angle);
                 sendMessage(Joystick.subscribeMessage.topic,Joystick.angle.toString());
             }
         },100);
@@ -558,27 +557,10 @@ export default function DashboardController($scope, userService, dashboardServic
                         }
                         else
                         {
-                            
-                            //$log.log("----------------------------------");
-                            if(angular.isUndefined(data.direction.x)){
-                                //
-                            }
-                            else{
-                                //$log.log(data.direction.x);
-                            
-                            }
-                            if(angular.isUndefined(data.direction.y)){
-                                //
-                            }
-                            else{
-                                //$log.log(data.direction.y);
-                            
-                            }
                             if(angular.isUndefined(data.direction.angle)){
                                 //
                             }
                             else{
-                                //$log.log(data.direction.angle);
                                 Joystick.newangle=data.direction.angle;
                             }
                         }

From c45db71a7bfc37babd61829b752a2f2fcd0732a1 Mon Sep 17 00:00:00 2001
From: "TMA\\intern.nttuan2" <ntt5794@gmail.com>
Date: Tue, 17 Oct 2017 09:46:15 +0700
Subject: [PATCH 14/16] Change icon in library template

---
 src/app/dashboard/widget-library.tpl.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/dashboard/widget-library.tpl.html b/src/app/dashboard/widget-library.tpl.html
index 0e5548c..21a9935 100644
--- a/src/app/dashboard/widget-library.tpl.html
+++ b/src/app/dashboard/widget-library.tpl.html
@@ -121,7 +121,7 @@ <h4>Joystick</h4>
                 </div>
                 <ripple r-disabled>
                     <div class="tb-widget-tile-body" layout-fill layout="column" layout-align="center center">
-                        <i class="icon-sun" aria-hidden="true"></i>
+                        <i class="material-icons" aria-hidden="true">games</i>
                     </div>
                 </ripple>
             </md-whiteframe>

From 9ae3b3ec274cbaae8cb9a5d4a748ec214ef7bc57 Mon Sep 17 00:00:00 2001
From: "TMA\\intern.nttuan2" <ntt5794@gmail.com>
Date: Tue, 17 Oct 2017 09:58:34 +0700
Subject: [PATCH 15/16] Add suggestive icon to widget template: 'touch to
 start'

---
 src/app/dashboard/dashboard.scss            | 4 ++++
 src/app/dashboard/widget-templates.tpl.html | 5 ++++-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/app/dashboard/dashboard.scss b/src/app/dashboard/dashboard.scss
index fa2f287..fb1bfa2 100644
--- a/src/app/dashboard/dashboard.scss
+++ b/src/app/dashboard/dashboard.scss
@@ -182,6 +182,10 @@ md-whiteframe {
 .tb-widget-joystick{
     background-color: #2196f3;
     color: #ffffff;
+    
+}
+.tb-widget-joystick-icon{
+    font-size:36px!important;
 }
 .white-slider .md-thumb:after,
 .white-slider .md-track-fill {
diff --git a/src/app/dashboard/widget-templates.tpl.html b/src/app/dashboard/widget-templates.tpl.html
index adedaef..3afcd85 100644
--- a/src/app/dashboard/widget-templates.tpl.html
+++ b/src/app/dashboard/widget-templates.tpl.html
@@ -166,7 +166,7 @@ <h4 ng-if="item.name.length">{{item.name}}</h4>
 
 <!-- Template for Joystick widget -->
 <script type="text/ng-template" id="joystick.html">
-    <md-whiteframe flex layout class="md-whiteframe-4dp tb-widget-bottom-sheet" ng-attr-style="background-color: {{item.bgColor}};">
+    <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>
@@ -176,6 +176,9 @@ <h4 ng-if="item.name.length">{{item.name}}</h4>
             </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>

From 962fe81d3dd8aa223d15e7162294b4ee49ca50bd Mon Sep 17 00:00:00 2001
From: "TMA\\intern.nttuan2" <ntt5794@gmail.com>
Date: Tue, 17 Oct 2017 10:20:06 +0700
Subject: [PATCH 16/16] Change joystick background color

---
 src/app/dashboard/dashboard.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/dashboard/dashboard.scss b/src/app/dashboard/dashboard.scss
index fb1bfa2..d3c7c18 100644
--- a/src/app/dashboard/dashboard.scss
+++ b/src/app/dashboard/dashboard.scss
@@ -180,12 +180,12 @@ md-whiteframe {
     }
 }
 .tb-widget-joystick{
-    background-color: #2196f3;
+    background-color: #e91e63;
     color: #ffffff;
     
 }
 .tb-widget-joystick-icon{
-    font-size:36px!important;
+    font-size:48px!important;
 }
 .white-slider .md-thumb:after,
 .white-slider .md-track-fill {