added client folders and cleaned index.html

This commit is contained in:
Rohit
2019-05-31 18:29:32 -04:00
parent 7ebacae080
commit cd7f6c8648
18 changed files with 191 additions and 192 deletions

View File

@@ -0,0 +1,361 @@
<div class="panel panel-default">
<div class="panel-body text-center">
<div class="col-lg-6">
<div class="panel panel-default">
<div class="panel-heading">
Left Arm Controls
</div>
<div class="panel panel-default">
<div class="panel-heading">
EEF Configuration
</div>
<div class="panel-body text-center">
You must be in "Stopped Mode" to change the EEF configuration!
<button type="button" onclick="triggerService('/left/aescape/hardware/setTrainingEEF')" class="btn btn-primary">
Recording EEF
</button>
<button type="button" onclick="triggerService('/left/aescape/hardware/setExecutionEEF')" class="btn btn-primary">
Massage EEF
</button>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
Select Operation Mode
</div>
<div class="panel-body text-center">
<div class="col-md-6">
<button id="left_teachingModeButton" type="button" onclick="triggerService('/left/aescape/mode/activateTeachingController')" class="btn btn-primary">
Teaching Mode
</button>
<button id="left_executionModeButton" type="button" onclick="triggerService('/left/aescape/mode/activateExecutionController')" class="btn btn-primary">
Massage Mode
</button>
<button id="left_readyModeButton" type="button" onclick="triggerService('/left/aescape/mode/activateReadyController')" class="btn btn-primary">
Ready Mode
</button>
<button id="left_standbyModeButton" type="button" onclick="triggerService('/left/aescape/mode/activateStandbyController')" class="btn btn-primary">
Standby Mode
</button>
<button id="left_stoppedModeButton" type="button" onclick="triggerService('/left/aescape/mode/stopControllers')" class="btn btn-primary">
Stopped Mode
</button>
</div>
<div class="col-md-6">
Safety Monitor Status:
<div class="row-md-3">
<h4><span id="left_safetyRunning" class="label label-default">Running</span></h4>
</div>
<div class="row-md-3">
<h4><span id="left_safetyStopped" class="label label-default">Stopped</span></h4>
</div>
<div class="row-md-3">
<button type="button" onclick="triggerService('/left/aescape/mode/activateSafetyController')" class="btn btn-sm btn-default">
Activate Safety Monitor
</button>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
Franka Arm Status
</div>
<div class="panel-body text-center">
<div class="col-md-4">
Current Robot Status:
<div class="row-md-3">
<h4><span id="left_frankaModeOther" class="label label-default">Other</span></h4>
</div>
<div class="row-md-3">
<h4><span id="left_frankaModeIdle" class="label label-default">Idle</span></h4>
</div>
<div class="row-md-3">
<h4><span id="left_frankaModeMove" class="label label-default">Move</span></h4>
</div>
<div class="row-md-3">
<h4><span id="left_frankaModeGuiding" class="label label-default">Guiding</span></h4>
</div>
<div class="row-md-3">
<h4><span id="left_frankaModeReflex" class="label label-default">Reflex</span></h4>
</div>
<div class="row-md-3">
<h4><span id="left_frankaModeUserStopped" class="label label-default">User Stopped</span></h4>
</div>
<div class="row-md-3">
<h4><span id="left_frankaModeErrorRecovery" class="label label-default">Automatic Error Recovery</span></h4>
</div>
</div>
<button id="left_fixFrankaButton" type="button" onclick="triggerService('/left/aescape/hardware/resetFrankaError')" class="btn btn-primary">
Fix Franka Errors
</button>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
Robotiq
</div>
<div class="panel-body text-center">
<div class="row-md-3">
<div class="progress" id="robotiqForce">
<div class="progress-bar bg-success" role="progressbar" id="robotiqForceBar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="200">N/A</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
Current Robotiq Values:
<div class="row-md-3">
<h4>X: <span id="robotiqX" class="label label-default">0.0</span></h4>
</div>
<div class="row-md-3">
<h4>Y: <span id="robotiqY" class="label label-default">0.0</span></h4>
</div>
<div class="row-md-3">
<h4>Z: <span id="robotiqZ" class="label label-default">0.0</span></h4>
</div>
</div>
<div class="col-md-4">
<button id="calibrateButton" type="button" onclick="triggerService('/left/aescape/hardware/calibrateRobotiq')" class="btn btn-primary">
Calibrate Robotiq
</button>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
Teaching Mode Operations
</div>
<div class="panel-body text-center">
<span class="row">
<label id="RecordingStatusLabel" class="label-warning">
Bag manager not connected!
</label>
</span>
<button type="button" onclick="triggerService('/left/aescape/mode/activateReadyController')" class="btn btn-default">
Activate Ready Mode
</button>
<button id="recordingStartButton" type="button" onclick="triggerService('/left/aescape/hardware/calibrateRobotiq'); triggerService('/left/aescape/mode/activateTeachingController'); triggerService('/aescape/bags/startTeachRecording')" class="btn btn-primary">
Start Teach Recording
</button>
<button id="recordingStopButton" type="button" onclick="triggerService('/aescape/bags/stopTeachRecording'); triggerService('/left/aescape/mode/activateReadyController')" class="btn btn-primary">
Stop Teach Recording
</button>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
Execution Mode Operations
</div>
<div class="panel-body text-center">
<span class="row">
<label id="ExecutionStatusLabel" class="label-warning">
Bag manager not connected!
</label>
</span>
Last Bag Playing:
<span id="lastbagText">
None
</span>
<div class="row-md-4">
<button type="button" onclick="triggerService('/left/aescape/mode/activateReadyController')" class="btn btn-default">
Activate Ready Mode
</button>
<button id="executionLoadButton" type="button" onclick="triggerService('/aescape/bags/startPlayingLastRecording')" class="btn btn-primary">
Load Last Recording
</button>
<button id="executionStartButton" type="button" onclick="triggerService('/left/aescape/mode/activateExecutionController'); triggerTopic('/left/run_trajectory')" class="btn btn-primary">
Play Last Recording
</button>
<button id="executionStopButton" type="button" onclick="triggerService('/aescape/bags/stopPlayingBag'); triggerService('/left/aescape/mode/activateReadyController')" class="btn btn-primary">
Stop Playing Recording
</button>
<div class="row-md-4">
Bagfile name must not start with "/"
<div class="input-group">
<input type="text" id="bagNameText" class="form-control" placeholder="bag_filename">
<span class="input-group-btn">
<button class="btn btn-primary" type="button" onclick="triggerMessageService('/aescape/bags/startPlayingRecording', 'bagNameText')">
<span>
Start Playing Bag
</span>
</button>
</span>
</div>
</div>
</div>
<!-- <div class="row-md-4">
<<div class="col-md-3"> -->
<!-- Bagfile name must not start with "/"
<button class="btn btn-primary" type="button" onclick="updateRecordingsList()">
Refresh List
</button>
</div> -->
<div class="row-md-3 pt-4">
<div style="height:300px;width:300px;overflow:auto">
<div class="list-group" id="bagList">
<button type="button" class="list-group-item list-group-item-action">Dapibus ac facilisis in</button>
<button type="button" class="list-group-item list-group-item-action">Morbi leo risus</button>
<button type="button" class="list-group-item list-group-item-action">Porta ac consectetur ac</button>
<button type="button" class="list-group-item list-group-item-action">Vestibulum at eros</button>
<button type="button" class="list-group-item list-group-item-action">Vestibulum at eros</button>
<button type="button" class="list-group-item list-group-item-action">Vestibulum at eros</button>
<button type="button" class="list-group-item list-group-item-action">Vestibulum at eros</button>
<button type="button" class="list-group-item list-group-item-action">Vestibulum at eros</button>
<button type="button" class="list-group-item list-group-item-action">Vestibulum at eros</button>
<button type="button" class="list-group-item list-group-item-action">Vestibulum at eros</button>
<button type="button" class="list-group-item list-group-item-action">Vestibulum at eros</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="panel panel-default">
<div class="panel-heading">
Right Arm Controls
</div>
<div class="panel panel-default">
<div class="panel-heading">
EEF Configuration
</div>
<div class="panel-body text-center">
You must be in "Stopped Mode" to change the EEF configuration!
<button type="button" onclick="triggerService('/right/aescape/hardware/setTrainingEEF')" class="btn btn-primary">
Recording EEF
</button>
<button type="button" onclick="triggerService('/right/aescape/hardware/setExecutionEEF')" class="btn btn-primary">
Massage EEF
</button>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
Select Operation Mode
</div>
<div class="panel-body text-center">
<div class="col-md-6">
<button id="right_teachingModeButton" type="button" onclick="triggerService('/right/aescape/mode/activateTeachingController')" class="btn btn-primary">
Teaching Mode
</button>
<button id="right_executionModeButton" type="button" onclick="triggerService('/right/aescape/mode/activateExecutionController')" class="btn btn-primary">
Massage Mode
</button>
<button id="right_readyModeButton" type="button" onclick="triggerService('/right/aescape/mode/activateReadyController')" class="btn btn-primary">
Ready Mode
</button>
<button id="right_standbyModeButton" type="button" onclick="triggerService('/right/aescape/mode/activateStandbyController')" class="btn btn-primary">
Standby Mode
</button>
<button id="right_stoppedModeButton" type="button" onclick="triggerService('/right/aescape/mode/stopControllers')" class="btn btn-primary">
Stopped Mode
</button>
</div>
<div class="col-md-6">
Safety Monitor Status:
<div class="row-md-3">
<h4><span id="right_safetyRunning" class="label label-default">Running</span></h4>
</div>
<div class="row-md-3">
<h4><span id="right_safetyStopped" class="label label-default">Stopped</span></h4>
</div>
<div class="row-md-3">
<button type="button" onclick="triggerService('/right/aescape/mode/activateSafetyController')" class="btn btn-sm btn-default">
Activate Safety Monitor
</button>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
Franka Arm Status
</div>
<div class="panel-body text-center">
<div class="col-md-4">
Current Robot Status:
<div class="row-md-3">
<h4><span id="right_frankaModeOther" class="label label-default">Other</span></h4>
</div>
<div class="row-md-3">
<h4><span id="right_frankaModeIdle" class="label label-default">Idle</span></h4>
</div>
<div class="row-md-3">
<h4><span id="right_frankaModeMove" class="label label-default">Move</span></h4>
</div>
<div class="row-md-3">
<h4><span id="right_frankaModeGuiding" class="label label-default">Guiding</span></h4>
</div>
<div class="row-md-3">
<h4><span id="right_frankaModeReflex" class="label label-default">Reflex</span></h4>
</div>
<div class="row-md-3">
<h4><span id="right_frankaModeUserStopped" class="label label-default">User Stopped</span></h4>
</div>
<div class="row-md-3">
<h4><span id="right_frankaModeErrorRecovery" class="label label-default">Automatic Error Recovery</span></h4>
</div>
</div>
<button id="right_fixFrankaButton" type="button" onclick="triggerService('/right/aescape/hardware/resetFrankaError')" class="btn btn-primary">
Fix Franka Errors
</button>
</div>
</div>
<!-- <div class="panel panel-default">
<div class="panel-heading">
Robotiq
</div>
<div class="panel-body text-center">
<div class="col-md-4">
Current Robotiq Values:
<div class="row-md-3">
<h4>X: <span id="robotiqX" class="label label-default">0.0</span></h4>
</div>
<div class="row-md-3">
<h4>Y: <span id="robotiqY" class="label label-default">0.0</span></h4>
</div>
<div class="row-md-3">
<h4>Z: <span id="robotiqZ" class="label label-default">0.0</span></h4>
</div>
</div>
<div class="row-md-3">
<button id="calibrateButton" type="button" onclick="triggerService('/right/aescape/hardware/calibrateRobotiq')" class="btn btn-primary">
Calibrate Robotiq
</button>
</div>
</div>
</div> -->
</div>
</div>
</div>
</div>
<!-- <div class="panel panel-default">
<div class="panel-heading">
Execution Recording Operations
</div>
<div class="panel-body text-center">
<button id="executionStartButton" type="button" onclick="triggerService('/startExecutionRecording')" class="btn btn-primary">
Start Recording Execution
</button>
<button id="executionRecordingStopButton" type="button" onclick="triggerService('/stopExecutionRecording')" class="btn btn-primary">
Stop Recording Execution
</button>
</div>
</div> -->

View File

@@ -0,0 +1,311 @@
///////////////////////////////////////////////////////////////////////////////////
// Publishers
///////////////////////////////////////////////////////////////////////////////////
function triggerTopic(topicName)
{
var topic = new ROSLIB.Topic({
ros : ros,
name : topicName,
messageType : 'std_msgs/Empty'
});
var msg = new ROSLIB.Message({});
topic.publish(msg);
}
////////////////////////////////////////////////////////////////
// Topics
////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////
// Subscribers
////////////////////////////////////////////////////////////////
class ArmControls
{
constructor(namespace) {
this.namespace = namespace;
// Franka Status
this.frankaStatusTopic = new ROSLIB.Topic({
ros : ros,
name : '/'+this.namespace+'/franka_state_controller/franka_states',
messageType : 'franka_msgs/FrankaState',
throttle_rate : 500 // 2Hz
});
this.frankaStatusTopic.subscribe(this.frankaStatus.bind(this));
// Mode Status
this.modeStatusTopic = new ROSLIB.Topic({
ros : ros,
name : '/'+this.namespace+'/aescape/mode/status',
messageType : 'std_msgs/String',
throttle_rate : 500 // 2Hz
});
this.modeStatusTopic.subscribe(this.modeStatus.bind(this));
// Safety Status
this.safetyStatusTopic = new ROSLIB.Topic({
ros : ros,
name : '/'+this.namespace+'/aescape/mode/safety_status',
messageType : 'std_msgs/String',
throttle_rate : 500 // 2Hz
});
this.safetyStatusTopic.subscribe(this.safetyStatus.bind(this));
}
// FrankaState
frankaStatus(message) {
document.getElementById(this.namespace+"_frankaModeOther").className = "label label-default"
document.getElementById(this.namespace+"_frankaModeIdle").className = "label label-default"
document.getElementById(this.namespace+"_frankaModeMove").className = "label label-default"
document.getElementById(this.namespace+"_frankaModeGuiding").className = "label label-default"
document.getElementById(this.namespace+"_frankaModeReflex").className = "label label-default"
document.getElementById(this.namespace+"_frankaModeUserStopped").className = "label label-default"
document.getElementById(this.namespace+"_frankaModeErrorRecovery").className = "label label-default"
document.getElementById(this.namespace+"_fixFrankaButton").className = "btn btn-primary"
if (message.robot_mode == 0)
{
document.getElementById(this.namespace+"_frankaModeOther").className = "label label-warning"
document.getElementById(this.namespace+"_fixFrankaButton").className = "btn btn-danger"
}
else if (message.robot_mode == 1)
{
document.getElementById(this.namespace+"_frankaModeIdle").className = "label label-warning"
document.getElementById(this.namespace+"_fixFrankaButton").className = "btn btn-danger"
}
else if (message.robot_mode == 2)
{
document.getElementById(this.namespace+"_frankaModeMove").className = "label label-warning"
document.getElementById(this.namespace+"_fixFrankaButton").className = "btn btn-success"
}
else if (message.robot_mode == 3)
{
document.getElementById(this.namespace+"_frankaModeGuiding").className = "label label-warning"
document.getElementById(this.namespace+"_fixFrankaButton").className = "btn btn-default"
}
else if (message.robot_mode == 4)
{
document.getElementById(this.namespace+"_frankaModeReflex").className = "label label-warning"
document.getElementById(this.namespace+"_fixFrankaButton").className = "btn btn-danger"
}
else if (message.robot_mode == 5)
{
document.getElementById(this.namespace+"_frankaModeUserStopped").className = "label label-warning"
document.getElementById(this.namespace+"_fixFrankaButton").className = "btn btn-default"
}
else if (message.robot_mode == 6)
{
document.getElementById(this.namespace+"_frankaModeErrorRecovery").className = "label label-warning"
document.getElementById(this.namespace+"_fixFrankaButton").className = "btn btn-default"
}
}
// Operation Mode
modeStatus(message) {
document.getElementById(this.namespace+"_stoppedModeButton").className = "btn btn-secondary"
document.getElementById(this.namespace+"_standbyModeButton").className = "btn btn-primary"
document.getElementById(this.namespace+"_readyModeButton").className = "btn btn-primary"
document.getElementById(this.namespace+"_teachingModeButton").className = "btn btn-primary"
document.getElementById(this.namespace+"_executionModeButton").className = "btn btn-primary"
if (this.namespace == "left")
{
document.getElementById("recordingStartButton").disabled = true
document.getElementById("executionStartButton").disabled = true
}
if (message.data == "stopped")
{
document.getElementById(this.namespace+"_stoppedModeButton").className = "btn btn-warning"
}
else if (message.data == "standby")
{
document.getElementById(this.namespace+"_standbyModeButton").className = "btn btn-primary btn-success"
}
else if (message.data == "teach")
{
document.getElementById(this.namespace+"_teachingModeButton").className = "btn btn-primary btn-success"
}
else if (message.data == "execution")
{
document.getElementById(this.namespace+"_executionModeButton").className = "btn btn-primary btn-success"
}
else if (message.data == "ready")
{
document.getElementById(this.namespace+"_readyModeButton").className = "btn btn-primary btn-success"
if (this.namespace == "left")
{
document.getElementById("recordingStartButton").disabled = false
document.getElementById("executionStartButton").disabled = false
}
}
}
safetyStatus(message) {
document.getElementById(this.namespace+"_safetyRunning").className = 'label label-default';
document.getElementById(this.namespace+"_safetyStopped").className = 'label label-default';
if (message.data == "stopped")
{
document.getElementById(this.namespace+"_safetyStopped").className = 'label label-danger';
}
else if (message.data == "running")
{
document.getElementById(this.namespace+"_safetyRunning").className = 'label label-success';
}
};
}
var leftArmControls = new ArmControls('left');
var rightArmControls = new ArmControls('right');
// Robotiq Data
var robotiqDataTopic = new ROSLIB.Topic({
ros : ros,
name : '/left/robotiq_ft_wrench',
messageType : 'geometry_msgs/WrenchStamped',
throttle_rate : 500 // 2Hz
});
robotiqDataTopic.subscribe(function(message) {
var force = message.wrench.force
document.getElementById("robotiqX").innerHTML = force.x.toFixed(1)
document.getElementById("robotiqY").innerHTML = force.y.toFixed(1)
document.getElementById("robotiqZ").innerHTML = force.z.toFixed(1)
var totalForce = math.norm([force.x, force.y, force.z]).toFixed(1)
var totalForcePercent = totalForce/2
doc = document.getElementById("robotiqForceBar");
doc.style.width = totalForcePercent + "%";
doc.innerHTML = totalForce + " N";
doc.setAttribute('aria-valuenow', totalForce);
if ((Math.abs(force.x) > 0.5) || (Math.abs(force.y) > 0.5) || (Math.abs(force.z) > 0.5))
{
document.getElementById("calibrateButton").className = "btn btn-danger"
} else {
document.getElementById("calibrateButton").className = "btn btn-default"
}
});
// Recording Bag
var recordingBagTopic = new ROSLIB.Topic({
ros : ros,
name : '/aescape/bags/recording_status',
messageType : 'std_msgs/String'
});
recordingBagTopic.subscribe(function(message) {
if (message.data == "stopped")
{
document.getElementById("RecordingStatusLabel").innerHTML = 'Not Running';
document.getElementById("RecordingStatusLabel").className = 'label label-warning';
}
else if (message.data == "running")
{
document.getElementById("RecordingStatusLabel").innerHTML = 'RUNNING!';
document.getElementById("RecordingStatusLabel").className = 'label label-success';
}
});
// Executing Bag
var executingBagTopic = new ROSLIB.Topic({
ros : ros,
name : '/aescape/bags/execution_status',
messageType : 'std_msgs/String'
});
executingBagTopic.subscribe(function(message) {
if (message.data == "stopped")
{
document.getElementById("ExecutionStatusLabel").innerHTML = 'Not Running';
document.getElementById("ExecutionStatusLabel").className = 'label label-warning';
}
else if (message.data == "running")
{
document.getElementById("ExecutionStatusLabel").innerHTML = 'RUNNING!';
document.getElementById("ExecutionStatusLabel").className = 'label label-success';
}
});
// Last Bag
var bagPlayingTopic = new ROSLIB.Topic({
ros : ros,
name : '/aescape/bags/last_played',
messageType : 'std_msgs/String'
});
bagPlayingTopic.subscribe(function(message) {
document.getElementById("lastbagText").innerHTML = message.data
});
////////////////////////////////////////////////////////////////
// Services
////////////////////////////////////////////////////////////////
function triggerService(serviceName)
{
var service = new ROSLIB.Service({
ros : ros,
name : serviceName,
serviceType : 'std_srvs/Trigger'
});
var request = new ROSLIB.ServiceRequest({});
service.callService(request, function(result) {
console.log('Result for service call on '
+ serviceName
+ ': '
+ result.sum);
});
}
function triggerMessageService(serviceName, textInput)
{
var text = document.getElementById(textInput).value
var service = new ROSLIB.Service({
ros : ros,
name : serviceName,
serviceType : 'demobot.TriggerMessage'
});
var request = new ROSLIB.ServiceRequest({
message : text
});
service.callService(request, function(result) {
console.log('Result for service call on '
+ serviceName
+ ': '
+ result.sum);
});
}
// function executeBagForm()
function updateSelectedBagFile(newFile)
{
// var newFile = document.getElementById(newFileInput).innerHTML
document.getElementById("bagNameText").value = newFile
}

View File

@@ -0,0 +1,47 @@
var bagList = Array();
function getBagList()
{
var service = new ROSLIB.Service({
ros : ros,
name : '/aescape/bags/getBagList',
serviceType : 'demobot/TriggerList'
});
var request = new ROSLIB.ServiceRequest({});
service.callService(request, function(result) {
// console.log('Result for service call on '
// + serviceName
// + ': '
// + result.message);
bagList = result.message;
});
}
function updateRecordingsList()
{
getBagList();
if(bagList != null){
var innerHTML = "";
for (var i = 0; i < bagList.length; i++ )
{
// innerHTML = innerHTML.concat(bagList[i]);
// innerHTML = innerHTML.concat("<br>");
innerHTML += "<button type=\"button\" class=\"list-group-item list-group-item-action\" onclick=\"updateSelectedBagFile('" + bagList[i] + "')\">" + bagList[i] + "</button>";
// innerHTML += "<button type=\"button\" class=\"list-group-item list-group-item-action\" onclick=\"triggerMessageService('/aescape/bags/startPlayingRecording', '" + bagList[i] + "')\">" + bagList[i] + "</button>";
}
document.getElementById("bagList").innerHTML = innerHTML;
}
document.getElementById("bagNameText").value = message.data
};
window.setInterval(function(){
updateRecordingsList();
}, 1000);