diff --git a/client/app/components/coordinator/coordinator.html b/client/app/components/coordinator/coordinator.html index 492d0a6..7fcf3e0 100644 --- a/client/app/components/coordinator/coordinator.html +++ b/client/app/components/coordinator/coordinator.html @@ -119,7 +119,60 @@
-
+
+
+ Franka Force +
+
+
+
+
+
+ N/A +
+ Observed +
+
+
+
    +
  • +

    X: 0.0

    +
    • +
  • +

    Y: 0.0

    +
    • +
  • +

    Z: 0.0

    +
    • +
+
+
+
+
N/A
+
+
    +
  • +

    X: 0.0

    +
    • +
  • +

    Y: 0.0

    +
    • +
  • +

    Z: 0.0

    +
    • +
+
+
+
+
+ +
+
+
+
+
Robotiq
@@ -129,14 +182,14 @@
N/A
@@ -274,20 +327,21 @@
-
+
- + - + - +
- - + +
+
@@ -325,29 +379,43 @@
- +
-
- -
-
-
-
- -
- -
-
-
- -
+ +
+
+ + + + + + +
+
+ +
+
+
+
+
+ +
+ +
+
+
+ +
+
+
+
diff --git a/client/app/components/coordinator/js/ros_scripts.js b/client/app/components/coordinator/js/ros_scripts.js index db0539d..519156b 100644 --- a/client/app/components/coordinator/js/ros_scripts.js +++ b/client/app/components/coordinator/js/ros_scripts.js @@ -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') -} - diff --git a/client/app/components/coordinator/js/update_guis.js b/client/app/components/coordinator/js/update_guis.js index 5c1cb17..89d2046 100644 --- a/client/app/components/coordinator/js/update_guis.js +++ b/client/app/components/coordinator/js/update_guis.js @@ -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') +} + + diff --git a/client/app/main.css b/client/app/main.css index 132fad1..bec11d3 100644 --- a/client/app/main.css +++ b/client/app/main.css @@ -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%; } - \ No newline at end of file + #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; + } \ No newline at end of file