From a05f7d25101edb56c6c78546befd4790779e35d1 Mon Sep 17 00:00:00 2001 From: lmarsbrown Date: Fri, 2 Jul 2021 14:02:59 -0700 Subject: [PATCH 1/2] simulator canvas size now is calculated by the size of the container, table is now located at origin, and conflicting simulator controls have been changed --- simulator/simulate.js | 25 +++++++++++++++++++------ 1 file changed, 19 insertions(+), 6 deletions(-) diff --git a/simulator/simulate.js b/simulator/simulate.js index e3497dab..5745c8e9 100644 --- a/simulator/simulate.js +++ b/simulator/simulate.js @@ -15,6 +15,7 @@ var THREE = require('three') var THREE_Text2D = require('three-text2d') var THREE_GLTFLoader = require('three-gltf-loader') //using the examples folder like this is depricated three/examples/js/loaders/GLTFLoader.js') +var canSize; var sim = {} //used to store sim "global" vars sim.hi_rez = true @@ -31,6 +32,12 @@ function init_simulation_maybe(){ } } function init_simulation(){ + canSize = + { + width: misc_pane_id.clientWidth-50, + height: persistent_get("dde_window_height")-persistent_get("top_right_panel_height") - 220 + }; + try{ init_mouse() sim.enable_rendering = false @@ -54,15 +61,15 @@ function createCamera(){ //https://discoverthreejs.com/book/first-steps/first-scene/ sim.camera = new THREE.PerspectiveCamera( 75, //field of view in degrees. determines ratio of far clipping region is to near clipping region - window.innerWidth / window.innerHeight, //aspect ratio, If not same as canvas width and height, + canSize.width/canSize.height, //aspect ratio, If not same as canvas width and height, //the image will be distorted. 0.1, //1, //0.1, //distance between camera and near clipping plane. Must be > 0. 4 //4 // 3 is too small and clips the table. was: 1000 //distance between camera an far clipping plane. Must be > near. ); sim.camera.name = "camera" sim.camera.position.x = 0 //to the right of the screen. - sim.camera.position.y = 1 //up is positive - sim.camera.position.z = 2 //2; //toward the viewer (out of the screen) is positive. 2 + sim.camera.position.y = 0 //up is positive + sim.camera.position.z = 1 //2; //toward the viewer (out of the screen) is positive. 2 sim.camera.zoom = 1 //1 is the default. 0.79 //has no effect. //new(75, width/height, 0.1, 4) pos[0, 1, 2] @@ -128,7 +135,7 @@ function createLights(){ function createRenderer(){ sim.renderer = new THREE.WebGLRenderer({ antialias:true });//antialias helps with drawing the table lines. //example: https://threejs.org/docs/#Manual/Introduction/Creating_a_scene sim.renderer.setSize( //sim.container.clientWidth, sim.container.clientHeight) //causes no canvas to appear - window.innerWidth, window.innerHeight ); + canSize.width,canSize.height); //renderer.setPixelRatio( window.devicePixelRatio ); //causes no canvas to appear //sim_graphics_pane_id.innerHTML = "" //done in video.js sim.renderer.shadowMap.enabled = true; @@ -144,6 +151,8 @@ function createMeshGLTF(){ sim.table_height = 0.01905 //height (thickness of Dexcell surface). This is 3/4 of an inch. was: 0.1) sim.table = draw_table(sim.scene, sim.table_width, sim.table_length, sim.table_height) + sim.table.position.set(0,0,-1); + sim.J0 = new THREE.Object3D(); //0,0,0 //does not move w.r.t table. sim.J0.rotation.y = Math.PI //radians for 180 degrees sim.J0.name = "J0" @@ -271,6 +280,8 @@ function createMeshBoxes(){ sim.table_height = 0.01905 //height (thickness of Dexcell surface). This is 3/4 of an inch. was: 0.1) sim.table = draw_table(sim.scene, sim.table_width, sim.table_length, sim.table_height) + sim.table.position.set(0,0,-1); + //draw_tool_rack(sim.table, 0.1, 0.3, 0.6) //gets in the way of >>> +Y text //draw_caption(sim.table, "Dexter 5-axis Robot Simulation") /*draw_help("To rotate table, mouse-down then drag.
" + @@ -434,14 +445,15 @@ function sim_handle_mouse_move(){ sim.camera.zoom = sim.zoom_at_mouseDown + zoom_increment //(spdy * 0.1) sim.camera.updateProjectionMatrix() } - else if (sim.altDown){ + else if (sim.button == 1){ var panX_inc = mouseX_diff / 100 var panY_inc = mouseY_diff / 100 sim.table.position.x = sim.tableX_at_mouseDown + panX_inc sim.table.position.y = sim.tableY_at_mouseDown - panY_inc } else { - sim.table.rotation.x = sim.rotationX_at_mouseDown + (mouseY_diff / 100) + let newX = sim.rotationX_at_mouseDown + (mouseY_diff / 100); + if(newX<=Math.PI*0.5&&newX>=-Math.PI*0.5)sim.table.rotation.x = newX; sim.table.rotation.y = sim.rotationY_at_mouseDown + (mouseX_diff / 100) } } @@ -468,6 +480,7 @@ function init_mouse(){ sim.rotationY_at_mouseDown = 0 sim_graphics_pane_id.addEventListener("mousedown", function(event) { + sim.button = event.button sim.mouseDown = true sim.shiftDown = event.shiftKey sim.altDown = event.altKey From b5bca186018d66d09e2d3f798482fd7b516d9cb9 Mon Sep 17 00:00:00 2001 From: lmarsbrown Date: Thu, 8 Jul 2021 10:43:30 -0700 Subject: [PATCH 2/2] Addedaxis alignment buttons. --- simulator/simulate.js | 116 ++++++++++++++++++++++++++++++++++++++---- video.js | 44 ++++++++-------- 2 files changed, 128 insertions(+), 32 deletions(-) diff --git a/simulator/simulate.js b/simulator/simulate.js index 5745c8e9..83eefe1f 100644 --- a/simulator/simulate.js +++ b/simulator/simulate.js @@ -15,7 +15,45 @@ var THREE = require('three') var THREE_Text2D = require('three-text2d') var THREE_GLTFLoader = require('three-gltf-loader') //using the examples folder like this is depricated three/examples/js/loaders/GLTFLoader.js') + + +function make_sim_html() +{ + return ` +
+ Move Dur: s + + ⓘ + Alignment: + + + + +
+ + X: + Y: + Z: + +
+ J1: + J2: + J3: + J4: + J5: + J6: + J7:
+
+ `; +} + var canSize; +var goalRotation = {x:Math.PI*0.25,y:Math.PI*0.25}; +var goalPosition = {x:0,y:0,z:-1}; +var pRotation = {x:Math.PI*0.25,y:Math.PI*0.25}; +var pPosition = {x:0,y:0,z:-1}; var sim = {} //used to store sim "global" vars sim.hi_rez = true @@ -151,7 +189,7 @@ function createMeshGLTF(){ sim.table_height = 0.01905 //height (thickness of Dexcell surface). This is 3/4 of an inch. was: 0.1) sim.table = draw_table(sim.scene, sim.table_width, sim.table_length, sim.table_height) - sim.table.position.set(0,0,-1); + sim.J0 = new THREE.Object3D(); //0,0,0 //does not move w.r.t table. sim.J0.rotation.y = Math.PI //radians for 180 degrees @@ -280,8 +318,6 @@ function createMeshBoxes(){ sim.table_height = 0.01905 //height (thickness of Dexcell surface). This is 3/4 of an inch. was: 0.1) sim.table = draw_table(sim.scene, sim.table_width, sim.table_length, sim.table_height) - sim.table.position.set(0,0,-1); - //draw_tool_rack(sim.table, 0.1, 0.3, 0.6) //gets in the way of >>> +Y text //draw_caption(sim.table, "Dexter 5-axis Robot Simulation") /*draw_help("To rotate table, mouse-down then drag.
" + @@ -429,10 +465,10 @@ var render_demo = function () { sim.J5.rotation.x += 0.02 //5th axis end effector twist //rotate table when user clicks down and drags. - if (sim.mouseDown){ + /*if (sim.mouseDown){ sim_handle_mouse_move() - } - sim.renderer.render(sim.scene, sim.camera); + }*/ + //sim.renderer.render(sim.scene, sim.camera); } }; @@ -515,12 +551,13 @@ function draw_table(parent, table_width, table_length, table_height){ sim.table = new THREE.Mesh(geometryt, materialt) sim.table.name = "table" sim.table.receiveShadow = true; - sim.table.position.x = -2.4 //-3.85 - sim.table.position.y = 2 //2.47 + + sim.table.position.x = 0 //-3.85 + sim.table.position.y = 0 //2.47 sim.table.position.z = -1 //0 - sim.table.rotation.x = 1 //0 //0.53 - sim.table.rotation.y = 5 //5 shows table with +x to right, and +y away from camera. 1.8 //0 //-0.44 + sim.table.rotation.x = Math.PI*0.25 //0 //0.53 + sim.table.rotation.y = Math.PI*0.25 //5 shows table with +x to right, and +y away from camera. 1.8 //0 //-0.44 sim.table.rotation.z = 0 parent.add(sim.table) @@ -775,6 +812,8 @@ function gltf_render(){ // if (sim.mouseDown){ // stl_sim_handle_mouse_move() // } + updateRotation(); + updatePosition(); sim.renderer.render(sim.scene, sim.camera); requestAnimationFrame(gltf_render) } @@ -844,3 +883,60 @@ function stl_sim_handle_mouse_move(){ } +function align_cam(position) +{ + switch(position) + { + case(0): + goalRotation.x = 0; + goalRotation.y = Math.PI; + break; + + case(1): + goalRotation.x = 0; + goalRotation.y = Math.PI*0.5; + break; + + case(2): + goalRotation.x = Math.PI*0.5; + goalRotation.y = Math.PI*0.5; + break; + + case(3): + goalRotation.x = Math.PI*0.25; + goalRotation.y = Math.PI*0.25; + goalPosition.x = 0; + goalPosition.y = 0; + goalPosition.z = -1; + break; + } +} + +function updateRotation() +{ + if(pRotation.x != sim.table.rotation.x||pRotation.y != sim.table.rotation.y) + { + goalRotation.x = sim.table.rotation.x; + goalRotation.y = sim.table.rotation.y; + } + sim.table.rotation.x -= (sim.table.rotation.x-goalRotation.x)*0.04; + sim.table.rotation.y -= (sim.table.rotation.y-goalRotation.y)*0.04; + pRotation.x = sim.table.rotation.x; + pRotation.y = sim.table.rotation.y; +} + +function updatePosition() +{ + if(pPosition.x != sim.table.position.x||pPosition.y != sim.table.position.y||pPosition.z != sim.table.position.z) + { + goalPosition.x = sim.table.position.x; + goalPosition.y = sim.table.position.y; + goalPosition.z = sim.table.position.z; + } + sim.table.position.x -= (sim.table.position.x-goalPosition.x)*0.04; + sim.table.position.y -= (sim.table.position.y-goalPosition.y)*0.04; + sim.table.position.z -= (sim.table.position.z-goalPosition.z)*0.04; + pPosition.x = sim.table.position.x; + pPosition.y = sim.table.position.y; + pPosition.z = sim.table.position.z; +} \ No newline at end of file diff --git a/video.js b/video.js index 5a68633c..3f166122 100644 --- a/video.js +++ b/video.js @@ -127,28 +127,28 @@ function show_in_misc_pane(content, arg1 = "", arg2){ try { if (content === "Simulate Dexter") { init_sim_in_process = true - sim_pane_content_id.innerHTML = - '
' + //Simulate Job/Robot: ' + + // 'Move Dur: s' + + // ' ' + + // ' ⓘ ' + + // '
' + + + // 'X: ' + //"margin-left:5px; + // ' Y: ' + //"margin-left:5px; + // ' Z: ' + //"margin-left:5px; + + // '
' + + // ' J1: ' + //"margin-left:5px; + // ' J2: ' + + // ' J3: ' + + // ' J4: ' + + // ' J5: ' + + // ' J6: ' + + // ' J7:
' + + // '
' open_doc(simulate_pane_doc_id) init_simulation() //sim.renderer.render(sim.scene, sim.camera);