Skip to content

Commit

Permalink
Fix reach visualization overlay with new interface
Browse files Browse the repository at this point in the history
  • Loading branch information
@kavidey
kavidey committed Jul 6, 2021
1 parent 01a4092 commit e592acc
Show file tree
Hide file tree
Showing 4 changed files with 90 additions and 72 deletions.
8 changes: 8 additions & 0 deletions operator/operator.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,14 @@ video {
.foreground {
z-index:2;
cursor: pointer;
position: relative;
}

/* Three.js canvas positioning */
.foreground > canvas {
position: absolute;
top: 0;
left: 0;
}


Expand Down
4 changes: 2 additions & 2 deletions operator/operator.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -238,8 +238,8 @@ <h5 class="modal-title" id="settingsTitle">Settings</h5>

<!-- THREE.js core and extensions -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js" integrity="sha512-dLxUelApnYxpLt6K2iomGngnHO83iUvZytA3YjDUCjT0HDOHKXnVYdf3hU4JjM8uEhxf9nD1/ey98U3t2vZ0qQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/postprocessing.min.js" integrity="sha256-pyGwxSnoRHKgrnFqpxGf22nsl+CEKp1/vaD9NH+6a1Q=" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/build/postprocessing.min.js" integrity="sha256-pyGwxSnoRHKgrnFqpxGf22nsl+CEKp1/vaD9NH+6a1Q=" crossorigin="anonymous" referrerpolicy="no-referrer"></script> -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/postprocessing.js"></script>
<script src="../shared/video_dimensions.js"></script>
<script src="operator.js"></script>
<script src="operator_ui_regions.js"></script>
Expand Down
24 changes: 17 additions & 7 deletions operator/operator_ui_regions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,14 +92,19 @@ class THREEManager {

pauseOverlayRender(modeId) {
this.overlays[modeId].render = false;
this.overlays[modeId].overlay.render();
}

resumeOverlayRender(modeId) {
this.overlays[modeId].render = true;
this.overlays[modeId].overlay.render();
}

animate() {
requestAnimationFrame(this.animate);
// TODO: Figure out how to properly pass self into a callback function
requestAnimationFrame(() => {
this.animate();
});

for (const overlay in this.overlays) {
if (this.overlays[overlay].render) {
Expand Down Expand Up @@ -180,10 +185,10 @@ class OverlayTHREE extends Overlay {
this.scene = new THREE.Scene();
this.renderer = new THREE.WebGLRenderer({ alpha: true });
this.renderer.setSize(this.threeManager.width, this.threeManager.height);
$(`#${modeId}_ui_overlay`).append(this.renderer.domElement);
$(`#${modeId}_ui_overlay`).parent().parent().prepend(this.renderer.domElement);

this.composer = new POSTPROCESSING.EffectComposer(this.renderer);
this.composer.addPass(new POSTPROCESSING.RenderPass(this.scene, this.renderer));
this.composer.addPass(new POSTPROCESSING.RenderPass(this.scene, this.threeManager.camera));

this.threeManager.addOverlay(this);
}
Expand All @@ -194,6 +199,7 @@ class OverlayTHREE extends Overlay {

addItem(obj) {
this.objs[obj.name] = obj;
this.scene.add(obj.mesh);
}

hide() {
Expand All @@ -209,6 +215,10 @@ class OverlayTHREE extends Overlay {
}
this.threeManager.resumeOverlayRender(this.modeId);
}

render() {
this.composer.render();
}
}

/*
Expand Down Expand Up @@ -330,7 +340,6 @@ var manipulationVideoControl = new VideoControl('manipulationVideo', 'manip');
var threeManager = new THREEManager(new THREE.PerspectiveCamera(69, w/h, 0.1, 1000), w, h);



function createUiRegions(debug) {

if(debug) {
Expand Down Expand Up @@ -374,11 +383,11 @@ function createUiRegions(debug) {
new THREE.CircleGeometry(0.52, 32), // The arm has a 52 centimeter reach (source: https://hello-robot.com/product#:~:text=range%20of%20motion%3A%2052cm)
new THREE.MeshBasicMaterial({color: 'rgb(246, 179, 107)', transparent: true, opacity: 0.25}),
));
const outlineEffect = new POSTPROCESSING.OutlineEffect(
navOverlay.scene,
var outlineEffect = new POSTPROCESSING.OutlineEffect(
navOverlayTHREE.scene,
navOverlayTHREE.threeManager.camera,
{visibleEdgeColor: 0xff9900});
const outlineEffectPass = new POSTPROCESSING.EffectPass(
var outlineEffectPass = new POSTPROCESSING.EffectPass(
navOverlayTHREE.threeManager.camera,
outlineEffect
);
Expand Down Expand Up @@ -665,3 +674,4 @@ function drawText(elementID, text, x, y, font_size=100, center=false, color='whi


createUiRegions(true); // debug = true or false
threeManager.animate();
126 changes: 63 additions & 63 deletions shared/sensors.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,12 @@ var liftSensors = {
// adjust for the effort needed to hold the arm in place
// against gravity
var adjusted_value = value - 53.88;
var armUpRegion1 = document.querySelector('#low_arm_up_region');
var armUpRegion2 = document.querySelector('#high_arm_up_region');
var armUpRegion1 = document.getElementById('low_arm_up_region');
var armUpRegion2 = document.getElementById('high_arm_up_region');

var armDownRegion1 = document.getElementById('low_arm_down_region');
var armDownRegion2 = document.getElementById('high_arm_down_region');

var armDownRegion1 = document.querySelector('#low_arm_down_region');
var armDownRegion2 = document.querySelector('#high_arm_down_region');

var redRegion1;
var redRegion2;

Expand Down Expand Up @@ -48,11 +48,11 @@ var liftSensors = {

var armSensors = {
"arm_effort": function(value) {
var armExtendRegion1 = document.querySelector('#low_arm_extend_region');
var armExtendRegion2 = document.querySelector('#high_arm_extend_region');
var armExtendRegion1 = document.getElementById('low_arm_extend_region');
var armExtendRegion2 = document.getElementById('high_arm_extend_region');

var armRetractRegion1 = document.querySelector('#low_arm_retract_region');
var armRetractRegion2 = document.querySelector('#high_arm_retract_region');
var armRetractRegion1 = document.getElementById('low_arm_retract_region');
var armRetractRegion2 = document.getElementById('high_arm_retract_region');

var redRegion1;
var redRegion2;
Expand Down Expand Up @@ -88,68 +88,68 @@ var armSensors = {

var wristSensors = {
"yaw_torque": function(value) {
var yawInRegion = document.querySelector('#hand_in_region');
var yawOutRegion = document.querySelector('#hand_out_region');
var redRegion;
var nothingRegion;
if (value > 0.0) {
redRegion = yawOutRegion;
nothingRegion = yawInRegion;
} else {
redRegion = yawInRegion;
nothingRegion = yawOutRegion;
}
redRegion.setAttribute('fill', 'red');
// make the torque positive and multiply it by a factor to
// make sure the video will always be visible even with
var redOpacity = Math.abs(value) * 0.015;
redRegion.setAttribute('fill-opacity', redOpacity);
nothingRegion.setAttribute('fill-opacity', 0.0);
var yawInRegion = document.getElementById('hand_in_region');
var yawOutRegion = document.getElementById('hand_out_region');
var redRegion;
var nothingRegion;
if (value > 0.0) {
redRegion = yawOutRegion;
nothingRegion = yawInRegion;
} else {
redRegion = yawInRegion;
nothingRegion = yawOutRegion;
}
redRegion.setAttribute('fill', 'red');
// make the torque positive and multiply it by a factor to
// make sure the video will always be visible even with
var redOpacity = Math.abs(value) * 0.015;
redRegion.setAttribute('fill-opacity', redOpacity);
nothingRegion.setAttribute('fill-opacity', 0.0);
},
"bend_torque": function(value) {
var bendUpRegion = document.querySelector('#wrist_bend_up_region');
var bendDownRegion = document.querySelector('#wrist_bend_down_region');
var redRegion;
var nothingRegion;
if (value > 0.0) {
redRegion = bendUpRegion;
nothingRegion = bendDownRegion;
} else {
redRegion = bendDownRegion;
nothingRegion = bendUpRegion;
}
redRegion.setAttribute('fill', 'red');
// make the torque positive and multiply it by a factor to
// make sure the video will always be visible even with
var redOpacity = Math.abs(value) * 0.8;
redRegion.setAttribute('fill-opacity', redOpacity);
nothingRegion.setAttribute('fill-opacity', 0.0);
var bendUpRegion = document.getElementById('wrist_bend_up_region');
var bendDownRegion = document.getElementById('wrist_bend_down_region');
var redRegion;
var nothingRegion;
if (value > 0.0) {
redRegion = bendUpRegion;
nothingRegion = bendDownRegion;
} else {
redRegion = bendDownRegion;
nothingRegion = bendUpRegion;
}
redRegion.setAttribute('fill', 'red');
// make the torque positive and multiply it by a factor to
// make sure the video will always be visible even with
var redOpacity = Math.abs(value) * 0.8;
redRegion.setAttribute('fill-opacity', redOpacity);
nothingRegion.setAttribute('fill-opacity', 0.0);
},
"roll_torque": function(value) {
var rollLeftRegion = document.querySelector('#wrist_roll_left_region');
var rollRightRegion = document.querySelector('#wrist_roll_right_region');
var redRegion;
var nothingRegion;
if (value > 0.0) {
redRegion = rollLeftRegion;
nothingRegion = rollRightRegion;
} else {
redRegion = rollRightRegion;
nothingRegion = rollLeftRegion;
}
redRegion.setAttribute('fill', 'red');
// make the torque positive and multiply it by a factor to
// make sure the video will always be visible even with
var redOpacity = Math.abs(value) * 0.8;
redRegion.setAttribute('fill-opacity', redOpacity);
nothingRegion.setAttribute('fill-opacity', 0.0);
var rollLeftRegion = document.getElementById('wrist_roll_left_region');
var rollRightRegion = document.getElementById('wrist_roll_right_region');
var redRegion;
var nothingRegion;
if (value > 0.0) {
redRegion = rollLeftRegion;
nothingRegion = rollRightRegion;
} else {
redRegion = rollRightRegion;
nothingRegion = rollLeftRegion;
}
redRegion.setAttribute('fill', 'red');
// make the torque positive and multiply it by a factor to
// make sure the video will always be visible even with
var redOpacity = Math.abs(value) * 0.8;
redRegion.setAttribute('fill-opacity', redOpacity);
nothingRegion.setAttribute('fill-opacity', 0.0);
}
}

var gripperSensors = {
"gripper_torque": function(value) {
var handCloseRegion = document.querySelector('#hand_close_region');
var handOpenRegion = document.querySelector('#hand_open_region');
var handCloseRegion = document.getElementById('hand_close_region');
var handOpenRegion = document.getElementById('hand_open_region');
var redRegion;
var nothingRegion;
if (value > 0.0) {
Expand All @@ -161,7 +161,7 @@ var gripperSensors = {
}
redRegion.setAttribute('fill', 'red');
// make the torque positive and multiply it by a factor to
// make sure the video will always be visible even with
// make sure the video will always be visible even with
var redOpacity = Math.abs(value) * 0.015;
redRegion.setAttribute('fill-opacity', redOpacity);
nothingRegion.setAttribute('fill-opacity', 0.0);
Expand Down

0 comments on commit e592acc

Please sign in to comment.