senaduka/old-lab_ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added timeout and safety button

Browse Source
This commit is contained in:
Rohit Nandwani
2019-06-20 17:15:19 -04:00
parent 03f331f89e
commit 61d7dc539f
4 changed files with 142 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
client/app/components/coordinator/coordinator.html
View File

@@ -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>

71
client/app/components/coordinator/js/ros_scripts.js
View File

@@ -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')
}
}

25
client/app/main.css
View File

@@ -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;
}

75
client/index.html
View File

@@ -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>