diff --git a/operator/operator.css b/operator/operator.css index 0a0a0f2..a2d849a 100644 --- a/operator/operator.css +++ b/operator/operator.css @@ -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; } diff --git a/operator/operator.html b/operator/operator.html index 1c30889..2aed2c0 100644 --- a/operator/operator.html +++ b/operator/operator.html @@ -238,8 +238,8 @@ - - + + diff --git a/operator/operator_ui_regions.js b/operator/operator_ui_regions.js index 60ab12c..3022df9 100644 --- a/operator/operator_ui_regions.js +++ b/operator/operator_ui_regions.js @@ -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) { @@ -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); } @@ -194,6 +199,7 @@ class OverlayTHREE extends Overlay { addItem(obj) { this.objs[obj.name] = obj; + this.scene.add(obj.mesh); } hide() { @@ -209,6 +215,10 @@ class OverlayTHREE extends Overlay { } this.threeManager.resumeOverlayRender(this.modeId); } + + render() { + this.composer.render(); + } } /* @@ -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) { @@ -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 ); @@ -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(); diff --git a/shared/sensors.js b/shared/sensors.js index 525be32..f2c4d0d 100644 --- a/shared/sensors.js +++ b/shared/sensors.js @@ -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; @@ -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; @@ -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) { @@ -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);