added timeout and safety button

client/app/components/coordinator/coordinator.html

@@ -547,7 +547,11 @@
                     <div class="panel-footer">
 
                     </div>
+                    
                 </div>
+                <button type="button" onclick="triggerService('/aescape/safety_activate')" class="safety-button danger btn">
+                    Stop Now!
+                </button>
         </div>
 
         </div>

client/app/components/coordinator/js/ros_scripts.js

@@ -314,6 +314,7 @@ bagPlayingTopic.subscribe(function(message) {
 // Services
 ////////////////////////////////////////////////////////////////
 
+
 function triggerService(serviceName)
 {
   var service = new ROSLIB.Service({
@@ -323,7 +324,8 @@ function triggerService(serviceName)
   });
 
   var request = new ROSLIB.ServiceRequest({});
-  
+  var serviceCallTimeStamp = Date.now();
+  var serviceCallReturned = false;
   service.callService(request, function(result) {
     console.log('Result for service call on '
       + serviceName
@@ -357,8 +359,7 @@ function triggerService(serviceName)
           });
         });
       }
-      console.log(result);
+      serviceCallReturned = true;
-
   }, function(error){
       console.log("errored");
       $(document).ready(function(){
@@ -373,7 +374,30 @@ function triggerService(serviceName)
           delay: 1000 
         });
       });
+      serviceCallReturned = true;
   });
+  var responseCheckInterval = setInterval(function() {
+    var timeElapsedSinceServiceCall = Date.now() - serviceCallTimeStamp; // milliseconds elapsed since start
+    if(serviceCallReturned) {
+      clearInterval(responseCheckInterval);
+      return;
+    } else if (timeElapsedSinceServiceCall > 3000){
+        $(document).ready(function(){
+          $.notify({
+            message: "Timeout on " + serviceName
+          }, {
+            "placement" : {
+              from: "bottom",
+              align: "right"
+            }, 
+            type: 'danger', 
+            delay: 1000 
+          });
+        });
+        clearInterval(responseCheckInterval);
+        return;
+    }
+  }, 1000);
 }
 
 
@@ -390,6 +414,9 @@ function triggerMessageService(serviceName, textInput)
   var request = new ROSLIB.ServiceRequest({
     message : text
   });
+
+  var serviceCallTimeStamp = Date.now();
+  var serviceCallReturned = false;
   
   service.callService(request, function(result) {
     console.log('Result for service call on '
@@ -424,7 +451,7 @@ function triggerMessageService(serviceName, textInput)
           });
         });
       }
-      console.log(result);
+      serviceCallReturned = true;
 
   }, function(error){
       console.log("errored");
@@ -440,7 +467,30 @@ function triggerMessageService(serviceName, textInput)
           delay: 1000 
         });
       });
+      serviceCallReturned = true;
   });
+  var responseCheckInterval = setInterval(function() {
+    var timeElapsedSinceServiceCall = Date.now() - serviceCallTimeStamp; // milliseconds elapsed since start
+    if(serviceCallReturned) {
+      clearInterval(responseCheckInterval);
+      return;
+    } else if (timeElapsedSinceServiceCall > 3000){
+        $(document).ready(function(){
+          $.notify({
+            message: "Timeout on " + serviceName
+          }, {
+            "placement" : {
+              from: "bottom",
+              align: "right"
+            }, 
+            type: 'danger', 
+            delay: 1000 
+          });
+        });
+        clearInterval(responseCheckInterval);
+        return;
+    }
+  }, 1000);
 }
 
 
@@ -452,3 +502,16 @@ function playselectedBag() {
 }
 
 
+
+
+document.addEventListener("keydown", invokeSafetyController);
+function invokeSafetyController(event)
+{
+   var keyID = event.keyCode;
+   //8 == backspace, 46 == delete
+   if(keyID == 8 || keyID == 46) {
+    triggerService('/aescape/safety_activate')
+   }
+}
+
+

client/app/main.css

@@ -106,8 +106,20 @@ html, body {
         float: right;
     }
 
-    .main-tabs-container {
+    .header-bar {
+        display: flex;
+        flex-wrap: wrap;
         margin-top: 10px;
+        padding: 0px 15px;
+    }
+
+    .fa-circle {
+        background: -webkit-gradient(linear, left top, left bottom, from(#bf9000), to(#7f6000));
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+    }
+
+    .main-tabs-container {
         display: flex;
         flex-wrap: wrap;
     }
@@ -119,7 +131,7 @@ html, body {
     #task-connection-message {
         position: relative;
         margin: auto;
-        left: -10%;
+        left: -8%;
         font-weight: 600;
         font-size: 19pt;
         text-transform: capitalize;
@@ -214,9 +226,6 @@ html, body {
         background: #020625;
     }
 
-    .nav-pills {
-        margin-left: 40px;
-    }
 
     .nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover, .nav>li>a:focus, .nav>li>a:hover{
         //color: #EDF0F4;
@@ -352,6 +361,12 @@ html, body {
         color: grey;
     }
 
+    .safety-button {
+        width: 100%;
+        height: 200px;
+        font-size: 32px;
+    }
+
 
 
     

client/index.html

@@ -19,6 +19,25 @@
         <script src="../include/js/roslib.js"></script>
         <script type="text/javascript" src="include/js/roslib.js"></script>
 
+        <script src="//cdnjs.cloudflare.com/ajax/libs/annyang/2.6.0/annyang.min.js"></script>
+        <script>
+        if (annyang) {
+          // Let's define our first command. First the text we expect, and then the function it should call
+          var commands = {
+            'stop': function() {
+              $('#task-connection-message').animate({bottom: '-100px'});
+              console.log("stop")
+            }
+          };
+        
+          // Add our commands to annyang
+          annyang.addCommands(commands);
+        
+          // Start listening. You can call this here, or attach this call to an event, button, etc.
+          annyang.start();
+        }
+        </script>
+
         <script>
             $(function(){
                 $("#coordinatorContent").load("app/components/coordinator/coordinator.html");
@@ -67,31 +86,39 @@
                 <i class="far fa-user"></i>
             </div>
         </div>
+        <div class="header-bar">
+                <div class="row-md-3">
+                        <ul id="tabs" class="nav nav-pills" data-tabs="tabs" >
+                            <li> 
+                                <a href="#Connect" data-toggle="tab">
+                                    Connect
+                                </a>
+                            </li>
+                            <li class="active">
+                                <a href="#Coordinator" data-toggle="tab">
+                                    Coordinator
+                                </a>
+                            </li>
+                            <li>
+                                <a target="_blank" href="vision/vision.html">
+                                    Vision
+                                </a>
+                            </li>
+                        </ul>
+                    </div>
+        
+                    <div id="task-connection-message">
+                        Disconnected
+                    </div>
+        
+                    <div>
+                        <!--
+                        <i class="fas fa-2x fa-circle" data-toggle="modal" data-target="#exampleModal"></i>
+                        -->
+                    </div>
+                    
+        </div>
         <div class="main-tabs-container">
-            <div class="row-md-3">
-                <ul id="tabs" class="nav nav-pills" data-tabs="tabs" >
-                    <li> 
-                        <a href="#Connect" data-toggle="tab">
-                            Connect
-                        </a>
-                    </li>
-                    <li class="active">
-                        <a href="#Coordinator" data-toggle="tab">
-                            Coordinator
-                        </a>
-                    </li>
-                    <li>
-                        <a target="_blank" href="vision/vision.html">
-                            Vision
-                        </a>
-                    </li>
-                </ul>
-            </div>
-
-            <div id="task-connection-message">
-                Disconnected
-            </div>
-            
             <div id="my-tab-content" class="tab-content">
                 <div class="tab-pane" id="Connect">
                     <div id="connectorContent"></div>