checkpoint for progess. added franka force. fleshed out the ux for tagging
This commit is contained in:
Rohit
@@ -119,7 +119,60 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="status-container">
|
||||
<div class="robotiq panel panel-default panel-horizontal">
|
||||
<div class="franka-force force-bar panel panel-default panel-horizontal">
|
||||
<div class="panel-heading">
|
||||
Franka Force
|
||||
</div>
|
||||
<div class="panel-body text-center">
|
||||
<div class="status-list">
|
||||
<div class="observed">
|
||||
<div class="progress" id="frankaForceObservedLeft">
|
||||
<div class="progress-bar bg-success" role="progressbar" id="frankaForceObservedBar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="200">
|
||||
<span>N/A</span>
|
||||
<div>
|
||||
<span>Observed</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="list-group list-group-horizontal text-center">
|
||||
<li class="list-group-item force-value">
|
||||
<h4>X: <span id="frankaForceLeftObservedX">0.0</span></h4>
|
||||
</li>
|
||||
<li class="list-group-item force-value">
|
||||
<h4>Y: <span id="frankaForceLeftObservedY">0.0</span></h4>
|
||||
</li>
|
||||
<li class="list-group-item force-value">
|
||||
<h4>Z: <span id="frankaForceLeftObservedZ">0.0</span></h4>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="commanded">
|
||||
<div class="progress" id="frankaForceCommandedLeft">
|
||||
<div class="progress-bar bg-success" role="progressbar" id="frankaForceCommandedBar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="200">N/A</div>
|
||||
</div>
|
||||
<ul class="list-group list-group-horizontal text-center">
|
||||
<li class="list-group-item force-value">
|
||||
<h4>X: <span id="frankaForceLeftCommandedX">0.0</span></h4>
|
||||
</li>
|
||||
<li class="list-group-item force-value">
|
||||
<h4>Y: <span id="frankaForceLeftCommandedY">0.0</span></h4>
|
||||
</li>
|
||||
<li class="list-group-item force-value">
|
||||
<h4>Z: <span id="frankaForceLeftCommandedZ">0.0</span></h4>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="action-button panel-footer">
|
||||
<button id="frankaForceLeftCalibrate" type="button" onclick="triggerService('')" class="btn">
|
||||
Calibrate
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="status-container">
|
||||
<div class="robotiq force-bar panel panel-default panel-horizontal">
|
||||
<div class="panel-heading">
|
||||
Robotiq
|
||||
</div>
|
||||
@@ -129,14 +182,14 @@
|
||||
<div class="progress-bar bg-success" role="progressbar" id="robotiqForceBar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="200">N/A</div>
|
||||
</div>
|
||||
<ul class="list-group list-group-horizontal text-center">
|
||||
<li class="list-group-item">
|
||||
<h4>X: <span id="robotiqX" class="label label-default">0.0</span></h4>
|
||||
<li class="list-group-item force-value">
|
||||
<h4>X: <span id="robotiqX">0.0</span></h4>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<h4>Y: <span id="robotiqY" class="label label-default">0.0</span></h4>
|
||||
<li class="list-group-item force-value">
|
||||
<h4>Y: <span id="robotiqY">0.0</span></h4>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<h4>Z: <span id="robotiqZ" class="label label-default">0.0</span></h4>
|
||||
<li class="list-group-item force-value">
|
||||
<h4>Z: <span id="robotiqZ">0.0</span></h4>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -274,20 +327,21 @@
|
||||
<div id="RecordingStatusLabel" class="message">
|
||||
<!-- TO DO: Show errors in bag manager -->
|
||||
</div>
|
||||
<div class="tagging-options" id="teaching-tags">
|
||||
<div class="tagging-options open" id="teaching-tags">
|
||||
<div class="col-md-10">
|
||||
<!--full with naming box search:no new:yes-->
|
||||
<select id="playBagFileName" placeholder="Filename"> <option value="test">Test</option> </select>
|
||||
<select id="playBagFileName" placeholder="Filename"></select>
|
||||
<!--full width category box search:yes new:yes-->
|
||||
<select id="playBagCategory" placeholder="Category"> <option value="test">Test</option> </select>
|
||||
<select id="playBagCategory" placeholder="Category"></select>
|
||||
<!--full width tags box search:yes new:yes-->
|
||||
<select id="playBagTags" placeholder="Tags"> <option value="test">Test</option> </select>
|
||||
<select id="playBagTags" placeholder="Tags"></select>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<i class="fas fa-check" onclick="hideTaggingOptions('teaching-tags', true)"></i>
|
||||
<i class="fas fa-times" onclick="hideTaggingOptions('teaching-tags', false)"></i>
|
||||
<i class="fas fa-check-circle" onclick="hideTaggingOptions('teaching-tags', true)"></i>
|
||||
<i class="fas fa-times-circle" onclick="hideTaggingOptions('teaching-tags', false)"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div id="playTagError" class="col-md-10"></div>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -325,29 +379,43 @@
|
||||
</div>
|
||||
<div class="action-area panel-footer">
|
||||
<div class="message" id="ExecutionStatusLabel">
|
||||
<!--Bag manager not connected! -->
|
||||
<!-- TO DO: Show errors in bag manager -->
|
||||
</div>
|
||||
<div>
|
||||
<!--Bagfile name must not start with "/" -->
|
||||
<div class="row">
|
||||
<div class="col-md-8">
|
||||
<div class="dropdown">
|
||||
<div>
|
||||
<select id="bagList" placeholder="Select bag to play">
|
||||
</select>
|
||||
</div>
|
||||
<!-- <i class="fas fa-sync-alt" onclick="updateRecordingsList()"></i> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<button class="btn btn-primary" type="button" onclick="loadSelectedBagFile()">
|
||||
<span>
|
||||
Load Bag
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<!-- TO DO: Bagfile name must not start with "/" -->
|
||||
<div class="tagging-options open" id="teaching-tags">
|
||||
<div class="col-md-10">
|
||||
<!--full with naming box search:no new:yes-->
|
||||
<select id="playBagFileName" placeholder="Filename"></select>
|
||||
<!--full width category box search:yes new:yes-->
|
||||
<select id="playBagCategory" placeholder="Category"></select>
|
||||
<!--full width tags box search:yes new:yes-->
|
||||
<select id="playBagTags" placeholder="Tags"></select>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<i class="fas fa-check-circle" onclick="hideTaggingOptions('teaching-tags', true)"></i>
|
||||
<i class="fas fa-times-circle" onclick="hideTaggingOptions('teaching-tags', false)"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="col-md-8">
|
||||
<div class="dropdown">
|
||||
<div>
|
||||
<select id="bagList" placeholder="Select bag to play">
|
||||
</select>
|
||||
</div>
|
||||
<!-- <i class="fas fa-sync-alt" onclick="updateRecordingsList()"></i> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<button class="btn btn-primary" type="button" onclick="loadSelectedBagFile()">
|
||||
<span>
|
||||
Load Bag
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="playTagError" class="col-md-10"></div>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -428,36 +428,5 @@ function invokeSafetyController(event)
|
||||
|
||||
|
||||
|
||||
function displayTaggingOptions(id) {
|
||||
|
||||
//populate the values in the select boxes on every display
|
||||
// /aescape/bags/getCategoryList
|
||||
// /aescape/bags/getTagList
|
||||
// /aescape/bags/getBagList
|
||||
|
||||
|
||||
//Subscribe to topics from the backend which indicate recording or playback is complete
|
||||
document.getElementById(id).style.display = '';
|
||||
}
|
||||
|
||||
function hideTaggingOptions(id, updateValues=false) {
|
||||
if(updateValues) {
|
||||
//get values from the elements
|
||||
updateBagMetadata(mode, bag_name, modified_bag_name, category, tags)
|
||||
}
|
||||
//TO DO: Wait for the response from the backend before setting the display to none
|
||||
document.getElementById(id).style.display = 'none'
|
||||
}
|
||||
|
||||
function updateBagMetadata(mode, bag_name, modified_bag_name, category, tags) {
|
||||
if(!mode) {
|
||||
return //error
|
||||
}
|
||||
if(!bag_name) {
|
||||
return // error
|
||||
}
|
||||
triggerService('/aescape/bags/updateBagMeta')
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -50,7 +50,94 @@ setTimeout(function(){
|
||||
$(function () {
|
||||
$('[data-toggle="popover"]').popover()
|
||||
})
|
||||
|
||||
|
||||
var $select = $('#playBagFileName').selectize({
|
||||
valueField: 'name',
|
||||
labelField: 'name',
|
||||
searchField: ['name'],
|
||||
options: [],
|
||||
create: true,
|
||||
placeholder : "Enter a name for the bag"
|
||||
});
|
||||
|
||||
var selectize = $select[0].selectize;
|
||||
selectize.clearOptions()
|
||||
selectize.addOption([].map(function(bagName){
|
||||
return {name : bagName}
|
||||
}));
|
||||
|
||||
var $select2 = $('#playBagCategory').selectize({
|
||||
valueField: 'name',
|
||||
labelField: 'name',
|
||||
searchField: ['name'],
|
||||
options: [],
|
||||
create: true,
|
||||
placeholder : "Enter or select a category for the bag"
|
||||
});
|
||||
|
||||
var selectize2 = $select2[0].selectize;
|
||||
//selectize.clearOptions()
|
||||
results2 = ['Production', 'Test'];
|
||||
selectize2.addOption(results2.map(function(bagName){
|
||||
return {name : bagName}
|
||||
}));
|
||||
|
||||
var $select3 = $('#playBagTags').selectize({
|
||||
valueField: 'name',
|
||||
labelField: 'name',
|
||||
searchField: ['name'],
|
||||
maxItems: 3,
|
||||
options: [],
|
||||
create: true,
|
||||
placeholder : "Enter or select tags for the bag"
|
||||
});
|
||||
|
||||
var selectize3 = $select3[0].selectize;
|
||||
//selectize.clearOptions()
|
||||
results3 = ['single-arm', 'dual-arm', 'palpation', 'demo'];
|
||||
selectize3.addOption(results3.map(function(bagName){
|
||||
return {name : bagName}
|
||||
}));
|
||||
|
||||
}, 100);
|
||||
|
||||
|
||||
|
||||
function displayTaggingOptions(id) {
|
||||
|
||||
//populate the values in the select boxes on every display
|
||||
// /aescape/bags/getCategoryList
|
||||
// /aescape/bags/getTagList
|
||||
// /aescape/bags/getBagList
|
||||
|
||||
|
||||
//Subscribe to topics from the backend which indicate recording or playback is complete
|
||||
document.getElementById(id).classList.add('open');
|
||||
//Putting this in a timeout to wait for the animation to finish completing
|
||||
setTimeout(function(){
|
||||
document.getElementById(id).setAttribute('overflow', 'visible');
|
||||
}, 600)
|
||||
}
|
||||
|
||||
function hideTaggingOptions(id, updateValues=false) {
|
||||
if(updateValues) {
|
||||
//get values from the elements
|
||||
updateBagMetadata(mode, bag_name, modified_bag_name, category, tags)
|
||||
}
|
||||
//TO DO: Wait for the response from the backend before setting the display to none
|
||||
document.getElementById(id).setAttribute('overflow', 'hidden');
|
||||
document.getElementById(id).classList.remove('open');
|
||||
}
|
||||
|
||||
function updateBagMetadata(mode, bag_name, modified_bag_name, category, tags) {
|
||||
if(!mode) {
|
||||
return //error
|
||||
}
|
||||
if(!bag_name) {
|
||||
return // error
|
||||
}
|
||||
triggerService('/aescape/bags/updateBagMeta')
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -316,14 +316,23 @@ html, body {
|
||||
background-image: linear-gradient(#b45f06, #783f04) !important;
|
||||
}
|
||||
|
||||
.status-container .robotiq .progress {
|
||||
margin-bottom: 5px;
|
||||
.force-bar .progress {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.status-container .robotiq .list-group-horizontal {
|
||||
.force-bar .list-group-horizontal {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.force-bar .force-value {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.force-bar .bar-label {
|
||||
color: black;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
#recordingStartButton[active] {
|
||||
animation: blinker 3s linear infinite;
|
||||
}
|
||||
@@ -382,4 +391,22 @@ html, body {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
#playTagError {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.tagging-options i {
|
||||
font-size: 30px;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
|
||||
.tagging-options {
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
transition: height 600ms ease 0ms;
|
||||
}
|
||||
.tagging-options.open {
|
||||
height: 122px;
|
||||
}
|
||||
Reference in New Issue
Block a user