From d3155686ea518b1c5335c5b61bd57131423d64fc Mon Sep 17 00:00:00 2001 From: Justin Berger Date: Fri, 23 Mar 2018 11:26:59 -0600 Subject: Refactor viz tool to be able to use it as a library --- tools/viz/survive_viewer.js | 275 +++++++++++++++++++++----------------------- 1 file changed, 134 insertions(+), 141 deletions(-) (limited to 'tools/viz') diff --git a/tools/viz/survive_viewer.js b/tools/viz/survive_viewer.js index 81de2a0..0710c68 100644 --- a/tools/viz/survive_viewer.js +++ b/tools/viz/survive_viewer.js @@ -5,6 +5,9 @@ var angles = {}; var ctx; var canvas; var oldDrawTime = 0; +var timecode = {}; +var oldPoseTime = 0, poseCnt = 0; +var scene, camera, renderer, floor; $(function() { $("#toggleBtn").click(function() { $("#cam").toggle(); }); }); @@ -16,16 +19,16 @@ function add_lighthouse(idx, p, q) { group.position.fromArray(p); group.quaternion.fromArray([ q[1], q[2], q[3], q[0] ]); - var height = 3; - var geometry = new THREE.ConeGeometry(Math.sin(1.0472) * height, height, 4, 1, true); + var height = 10; + + var geometry = new THREE.ConeGeometry(height / Math.cos(60 / 180 * Math.PI), height, 4, 1, true); var material = new THREE.MeshBasicMaterial({ - wireframe : true, - vertexColor : true, - color : 0x111111, - opacity : 0.09, + color : 0x1F1FFF, + opacity : 0.02, transparent : true, blending : THREE.AdditiveBlending, - side : THREE.BothSides + side : THREE.DoubleSide, + depthTest : false }); var cone = new THREE.Mesh(geometry, material); @@ -34,16 +37,14 @@ function add_lighthouse(idx, p, q) { var lhBox = new THREE.Mesh(lhBoxGeom, lhBoxMaterial); group.add(lhBox); - cone.translateZ(-height / 2) - cone.rotateZ(Math.PI / 4) - cone.rotateX(Math.PI / 2) - // cone.position.z + cone.translateZ(-height / 2); + cone.rotateZ(Math.PI / 4); + cone.rotateX(Math.PI / 2); group.add(cone); group.add(lh); scene.add(group); - // DrawCoordinateSystem(p[0], p[1], p[2], q[0], q[1], q[2], q[3]); } function recolorTrackers(when) { @@ -157,7 +158,7 @@ function redrawCanvas(when) { } } -function create_object(info) { +function create_tracked_object(info) { var sensorGeometry = new THREE.SphereGeometry(.01, 32, 16); var group = new THREE.Group(); group.sensors = []; @@ -184,149 +185,141 @@ function create_object(info) { scene.add(group); } -var timecode = {}; +var survive_log_handlers = { + "LH_POSE" : function(v) { + var obj = { + lighthouse : parseInt(v[1]), + position : [ parseFloat(v[3]), parseFloat(v[4]), parseFloat(v[5]) ], + quat : [ parseFloat(v[6]), parseFloat(v[7]), parseFloat(v[8]), parseFloat(v[9]) ] + }; -function parseLine(msg) { - var s = msg.split(' '); + add_lighthouse(obj.lighthouse, obj.position, obj.quat); + }, + "POSE" : function(v, tracker) { + var obj = { + tracker : v[1], + position : [ parseFloat(v[3]), parseFloat(v[4]), parseFloat(v[5]) ], + quat : [ parseFloat(v[6]), parseFloat(v[7]), parseFloat(v[8]), parseFloat(v[9]) ] + }; - var command_mappings = { - "LH_POSE" : function(v) { - return { - type : "lighthouse_pose", - lighthouse : parseInt(v[1]), - position : [ parseFloat(v[3]), parseFloat(v[4]), parseFloat(v[5]) ], - quat : [ parseFloat(v[6]), parseFloat(v[7]), parseFloat(v[8]), parseFloat(v[9]) ] - }; - }, - "POSE" : function(v) { - return { - type: "pose", position: [ parseFloat(v[3]), parseFloat(v[4]), parseFloat(v[5]) ], - quat: [ parseFloat(v[6]), parseFloat(v[7]), parseFloat(v[8]), parseFloat(v[9]) ] + if (objs[obj.tracker]) { + var now = new Date().getTime(); + if (oldPoseTime + 5000 < now) { + oldPoseTime = now; + console.log((poseCnt / 5) + "hz"); + poseCnt = 0; } - }, - "CONFIG" : function(v) { - var configStr = s.slice(3).join(' '); - var config = JSON.parse(configStr); - - return { type: "htc_config", config: config } - - }, - 'A' : function(v) { - return { - type: 'angle', sensor_id: parseInt(v[3]), acode: parseInt(v[4]), timecode: parseInt(v[5]), - length: parseFloat(v[6]), angle: parseFloat(v[7]), lighthouse: parseInt(v[8]) + poseCnt++; + objs[obj.tracker].position.set(obj.position[0], obj.position[1], obj.position[2]); + objs[obj.tracker].quaternion.set(obj.quat[1], obj.quat[2], obj.quat[3], obj.quat[0]); + objs[obj.tracker].verticesNeedUpdate = true; + timecode[obj.tracker] = obj.timecode; + } + }, + "CONFIG" : function(v, tracker) { + var configStr = v.slice(3).join(' '); + var config = JSON.parse(configStr); + var obj = {config : config, tracker : v[1]}; + + create_tracked_object(obj); + }, + 'A' : function(v, tracker) { + var obj = { + tracker : v[1], + sensor_id : parseInt(v[3]), + acode : parseInt(v[4]), + timecode : parseInt(v[5]), + length : parseFloat(v[6]), + angle : parseFloat(v[7]), + lighthouse : parseInt(v[8]) + }; + + angles[obj.tracker] = angles[obj.tracker] || {}; + angles[obj.tracker][obj.lighthouse] = angles[obj.tracker][obj.lighthouse] || {}; + angles[obj.tracker][obj.lighthouse][obj.sensor_id] = angles[obj.tracker][obj.lighthouse][obj.sensor_id] || {}; + + angles[obj.tracker][obj.lighthouse][obj.sensor_id][obj.acode & 1] = [ obj.angle, obj.timecode ]; + timecode[obj.tracker] = obj.timecode; + }, + 'LOG' : function(v) { + var msg = v.slice(3).join(' '); + + var consoleDiv = $("#console"); + consoleDiv.append(msg + "
"); + consoleDiv[0].scrollTop = consoleDiv[0].scrollHeight; + + }, + "I" : function(v, tracker) { + var obj = { + mask : parseInt(v[3]), + timecode : parseInt(v[4]), + accelgyro : [ + parseFloat(v[5]), parseFloat(v[6]), parseFloat(v[7]), parseFloat(v[8]), parseFloat(v[9]), + parseFloat(v[10]) + ], + tracker : v[1] + }; + + if (objs[obj.tracker]) { + if (!downAxes[obj.tracker] && objs[obj.tracker]) { + downAxes[obj.tracker] = new THREE.Geometry(); + downAxes[obj.tracker].vertices.push(new THREE.Vector3(0, 0, 0), new THREE.Vector3(0, 0, 0)); + + var line = new THREE.Line(downAxes[obj.tracker], new THREE.LineBasicMaterial({color : 0xffffff})); + scene.add(line); + } + + if (objs[obj.tracker].position) { + var q = obj.accelgyro; + + downAxes[obj.tracker].vertices[0] = objs[obj.tracker].position; + downAxes[obj.tracker].vertices[1].fromArray(q); + downAxes[obj.tracker].vertices[1].add(objs[obj.tracker].position); + downAxes[obj.tracker].verticesNeedUpdate = true; } - }, - 'LOG' : function(v) { - return { type: "info", msg: s.slice(3).join(' ') } - }, - "I" : function(v) { - return { - type : "imu", - mask : parseInt(v[3]), - timecode : parseInt(v[4]), - accelgyro : [ - parseFloat(v[5]), parseFloat(v[6]), parseFloat(v[7]), parseFloat(v[8]), parseFloat(v[9]), - parseFloat(v[10]) - ] - - }; } - }; - if (command_mappings[s[2]]) { - var rtn = command_mappings[s[2]](s); - rtn.time = parseFloat(s[0]); - rtn.tracker = s[1]; - return rtn; + + } +}; + +function add_survive_log_handler(name, entry) { survive_log_handlers[name] = entry; } +function process_survive_handlers(msg) { + var s = msg.split(' '); + + if (survive_log_handlers[s[2]]) { + survive_log_handlers[s[2]](s); } + return {}; } -var oldPoseTime = 0, poseCnt = 0; + +var survive_ws; + +// Dial up the websocket $(function() { setTimeout(function() { - var ws; - if (window.location.protocol === "file:") { - ws = new WebSocket("ws://localhost:8080/ws"); + var url = new URL(window.location.href); + var remote = url.searchParams.get("remote"); + + if (remote.length) { + survive_ws = new WebSocket("ws://" + remote + "/ws"); + } else if (window.location.protocol === "file:") { + survive_ws = new WebSocket("ws://localhost:8080/ws"); } else { - ws = new WebSocket(((window.location.protocol === "https:") ? "wss://" : "ws://") + window.location.host + - "/ws"); + survive_ws = new WebSocket(((window.location.protocol === "https:") ? "wss://" : "ws://") + + window.location.host + "/ws"); } - ws.onopen = function(evt) { - // ws.send("!"); - }; - ws.onmessage = function(evt) { + survive_ws.onmessage = function(evt) { var msg = evt.data; - var obj; - if (msg[0] == "{") - obj = JSON.parse(msg); - else - obj = parseLine(msg); - - // console.log(obj); - if (obj.type === "pose") { - if (objs[obj.tracker]) { - var now = new Date().getTime(); - if(oldPoseTime + 5000 < now) { - oldPoseTime = now; - console.log( (poseCnt / 5) + "hz"); - poseCnt = 0; - } - poseCnt++; - objs[obj.tracker].position.set(obj.position[0], obj.position[1], obj.position[2]); - objs[obj.tracker].quaternion.set(obj.quat[1], obj.quat[2], obj.quat[3], obj.quat[0]); - objs[obj.tracker].verticesNeedUpdate = true; - timecode[obj.tracker] = obj.timecode; - } - } else if (obj.type === "info") { - var consoleDiv = $("#console"); - consoleDiv.append(obj.msg + "
"); - consoleDiv[0].scrollTop = consoleDiv[0].scrollHeight; - } else if (obj.type === "lighthouse_pose") { - add_lighthouse(obj.lighthouse, obj.position, obj.quat); - } else if (obj.type === "htc_config") { - create_object(obj); - } else if (obj.type === "imu") { - if (objs[obj.tracker]) { - if (!downAxes[obj.tracker] && objs[obj.tracker]) { - downAxes[obj.tracker] = new THREE.Geometry(); - downAxes[obj.tracker].vertices.push(new THREE.Vector3(0, 0, 0), new THREE.Vector3(0, 0, 0)); - - var line = - new THREE.Line(downAxes[obj.tracker], new THREE.LineBasicMaterial({color : 0xffffff})); - scene.add(line); - } - - if (objs[obj.tracker].position) { - var q = obj.accelgyro; - - downAxes[obj.tracker].vertices[0] = objs[obj.tracker].position; - downAxes[obj.tracker].vertices[1].fromArray(q); - downAxes[obj.tracker].vertices[1].add(objs[obj.tracker].position); - downAxes[obj.tracker].verticesNeedUpdate = true; - } - } - - } else if (obj.type === "angle") { - angles[obj.tracker] = angles[obj.tracker] || {}; - angles[obj.tracker][obj.lighthouse] = angles[obj.tracker][obj.lighthouse] || {}; - angles[obj.tracker][obj.lighthouse][obj.sensor_id] = - angles[obj.tracker][obj.lighthouse][obj.sensor_id] || {}; - - angles[obj.tracker][obj.lighthouse][obj.sensor_id][obj.acode & 1] = [ obj.angle, obj.timecode ]; - timecode[obj.tracker] = obj.timecode; - } - - // ws.send("!"); + process_survive_handlers(msg); }; + }, 60); // Hacky, but this gives the server time to restart on CTRL+R }); -// standard global variables -var container, scene, camera, renderer, controls; - -// custom global variables +// Init and start the render loop $(function() { // initialization init(); @@ -367,7 +360,7 @@ init() { renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT); // attach div element to variable to contain the renderer - container = document.getElementById('ThreeJS'); + var container = document.getElementById('ThreeJS'); // attach renderer to the container div container.appendChild(renderer.domElement); @@ -375,17 +368,17 @@ init() { // move mouse and: left click to rotate, // middle click to zoom, // right click to pan - controls = new THREE.OrbitControls(camera, renderer.domElement); + var controls = new THREE.OrbitControls(camera, renderer.domElement); // create a light var light = new THREE.PointLight(0xffffff); - light.position.set(0, 5, 0); + light.position.set(0, 0, 5); scene.add(light); var floorMaterial = new THREE.MeshBasicMaterial({color : 0x000000, opacity : 0.15, transparent : true, side : THREE.FrontSide}); var floorGeometry = new THREE.PlaneGeometry(10, 10); - var floor = new THREE.Mesh(floorGeometry, floorMaterial); + floor = new THREE.Mesh(floorGeometry, floorMaterial); floor.position.z = -1; scene.add(floor); -- cgit v1.2.3 From 5339216719825ba8aac0ae6507014d4a8115890f Mon Sep 17 00:00:00 2001 From: Justin Berger Date: Sat, 24 Mar 2018 01:09:42 -0600 Subject: Viz with chemtrails --- tools/viz/index.html | 1 + tools/viz/survive_viewer.js | 31 +++++++++++++++++++++++++++++++ 2 files changed, 32 insertions(+) (limited to 'tools/viz') diff --git a/tools/viz/index.html b/tools/viz/index.html index b146b5d..0221b41 100644 --- a/tools/viz/index.html +++ b/tools/viz/index.html @@ -12,6 +12,7 @@
+ Trails
diff --git a/tools/viz/survive_viewer.js b/tools/viz/survive_viewer.js index 0710c68..70aecfa 100644 --- a/tools/viz/survive_viewer.js +++ b/tools/viz/survive_viewer.js @@ -185,6 +185,29 @@ function create_tracked_object(info) { scene.add(group); } +var trails; +var MAX_LINE_POINTS = 1000; +$(function() { + $("#trails").change(function() { + if (this.checked) { + var geometry = new THREE.Geometry(); + var material = new THREE.LineBasicMaterial({color : 0x305ea8}); + + for (i = 0; i < MAX_LINE_POINTS; i++) { + geometry.vertices.push(new THREE.Vector3(0, 0, 0)); + } + geometry.dynamic = true; + + trails = new THREE.Line(geometry, material); + + scene.add(trails); + } else { + if (trails) + scene.remove(trails); + } + }); +}); + var survive_log_handlers = { "LH_POSE" : function(v) { var obj = { @@ -214,6 +237,14 @@ var survive_log_handlers = { objs[obj.tracker].quaternion.set(obj.quat[1], obj.quat[2], obj.quat[3], obj.quat[0]); objs[obj.tracker].verticesNeedUpdate = true; timecode[obj.tracker] = obj.timecode; + + if (trails) { + + trails.geometry.vertices.push(trails.geometry.vertices.shift()); // shift the array + trails.geometry.vertices[MAX_LINE_POINTS - 1] = + new THREE.Vector3(obj.position[0], obj.position[1], obj.position[2]); + trails.geometry.verticesNeedUpdate = true; + } } }, "CONFIG" : function(v, tracker) { -- cgit v1.2.3 From 2dfd1ed1027e94b73048299b0cb8300694832a7c Mon Sep 17 00:00:00 2001 From: Justin Berger Date: Sun, 25 Mar 2018 12:38:48 -0600 Subject: Added normals to viz --- tools/viz/survive_viewer.js | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) (limited to 'tools/viz') diff --git a/tools/viz/survive_viewer.js b/tools/viz/survive_viewer.js index 70aecfa..df10ec3 100644 --- a/tools/viz/survive_viewer.js +++ b/tools/viz/survive_viewer.js @@ -164,16 +164,20 @@ function create_tracked_object(info) { group.sensors = []; if (info.config && info.config.lighthouse_config) { for (var idx in info.config.lighthouse_config.modelPoints) { - var p = info.config.lighthouse_config.modelPoints[idx]; - var color = 0xFFFFFF; // / info.points.length * idx; - if (idx === 10) + var p = info.config.lighthouse_config.modelPoints[idx]; + var pn = info.config.lighthouse_config.modelNormals[idx]; + var color = idx / info.config.lighthouse_config.modelPoints * 0xFFFFFF; + if (idx === 6) color = 0x00ff00; - if (idx === 12) - color = 0x0000ff; var sensorMaterial = new THREE.MeshBasicMaterial({color : color}); var newSensor = new THREE.Mesh(sensorGeometry, sensorMaterial); newSensor.position.set(p[0], p[1], p[2]); + var normalGeom = new THREE.Geometry(); + normalGeom.vertices.push(newSensor.position, + new THREE.Vector3(p[0] + pn[0] * .02, p[1] + pn[1] * .02, p[2] + pn[2] * .02)); + var normal= new THREE.Line(normalGeom, new THREE.LineBasicMaterial({color : idx == 6 ? 0xFF0000 : 0x00FF00})); + group.add(normal); group.sensors[idx] = sensorMaterial; group.add(newSensor); } @@ -296,7 +300,7 @@ var survive_log_handlers = { downAxes[obj.tracker] = new THREE.Geometry(); downAxes[obj.tracker].vertices.push(new THREE.Vector3(0, 0, 0), new THREE.Vector3(0, 0, 0)); - var line = new THREE.Line(downAxes[obj.tracker], new THREE.LineBasicMaterial({color : 0xffffff})); + var line = new THREE.Line(downAxes[obj.tracker], new THREE.LineBasicMaterial({color : 0xffffff})); scene.add(line); } -- cgit v1.2.3 From 93ce31bf11cb22c5a09b5af04a76c7b7a6b912fd Mon Sep 17 00:00:00 2001 From: Justin Berger Date: Sun, 25 Mar 2018 21:28:18 -0600 Subject: Made it so viz tool didn't require remote arg --- tools/viz/survive_viewer.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) (limited to 'tools/viz') diff --git a/tools/viz/survive_viewer.js b/tools/viz/survive_viewer.js index df10ec3..67e65f0 100644 --- a/tools/viz/survive_viewer.js +++ b/tools/viz/survive_viewer.js @@ -167,7 +167,7 @@ function create_tracked_object(info) { var p = info.config.lighthouse_config.modelPoints[idx]; var pn = info.config.lighthouse_config.modelNormals[idx]; var color = idx / info.config.lighthouse_config.modelPoints * 0xFFFFFF; - if (idx === 6) + if (idx === 0) color = 0x00ff00; var sensorMaterial = new THREE.MeshBasicMaterial({color : color}); var newSensor = new THREE.Mesh(sensorGeometry, sensorMaterial); @@ -176,7 +176,7 @@ function create_tracked_object(info) { var normalGeom = new THREE.Geometry(); normalGeom.vertices.push(newSensor.position, new THREE.Vector3(p[0] + pn[0] * .02, p[1] + pn[1] * .02, p[2] + pn[2] * .02)); - var normal= new THREE.Line(normalGeom, new THREE.LineBasicMaterial({color : idx == 6 ? 0xFF0000 : 0x00FF00})); + var normal= new THREE.Line(normalGeom, new THREE.LineBasicMaterial({color : idx == 4 ? 0xFF0000 : 0x00FF00})); group.add(normal); group.sensors[idx] = sensorMaterial; group.add(newSensor); @@ -240,7 +240,6 @@ var survive_log_handlers = { objs[obj.tracker].position.set(obj.position[0], obj.position[1], obj.position[2]); objs[obj.tracker].quaternion.set(obj.quat[1], obj.quat[2], obj.quat[3], obj.quat[0]); objs[obj.tracker].verticesNeedUpdate = true; - timecode[obj.tracker] = obj.timecode; if (trails) { @@ -337,7 +336,7 @@ $(function() { var url = new URL(window.location.href); var remote = url.searchParams.get("remote"); - if (remote.length) { + if (remote && remote.length) { survive_ws = new WebSocket("ws://" + remote + "/ws"); } else if (window.location.protocol === "file:") { survive_ws = new WebSocket("ws://localhost:8080/ws"); -- cgit v1.2.3 From 1ca9196f93a4d9fa09736112c880634392536d8e Mon Sep 17 00:00:00 2001 From: Justin Berger Date: Wed, 28 Mar 2018 00:11:04 -0600 Subject: Bigger chemtrails; colors on HMD trackers --- tools/viz/survive_viewer.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'tools/viz') diff --git a/tools/viz/survive_viewer.js b/tools/viz/survive_viewer.js index 67e65f0..d7f80ad 100644 --- a/tools/viz/survive_viewer.js +++ b/tools/viz/survive_viewer.js @@ -130,7 +130,7 @@ function redrawCanvas(when) { for (var key in angles) { for (var lh = 0; lh < 2; lh++) { - var bvalue = {"WW0" : "FF", "TR0" : "00"}; + var bvalue = {"WW0" : "FF", "TR0" : "00", "HMD" : "88"}; ctx.strokeStyle = (lh === 0 ? "#FF00" : "#00FF") + bvalue[key]; if (angles[key][lh]) @@ -190,7 +190,7 @@ function create_tracked_object(info) { } var trails; -var MAX_LINE_POINTS = 1000; +var MAX_LINE_POINTS = 100000; $(function() { $("#trails").change(function() { if (this.checked) { -- cgit v1.2.3 From 3c4e37a277745cb22e7a4b1b7337f64fd653c205 Mon Sep 17 00:00:00 2001 From: Justin Berger Date: Wed, 28 Mar 2018 10:35:23 -0600 Subject: Prettier word wrap --- tools/viz/index.html | 1 + 1 file changed, 1 insertion(+) (limited to 'tools/viz') diff --git a/tools/viz/index.html b/tools/viz/index.html index 0221b41..2987555 100644 --- a/tools/viz/index.html +++ b/tools/viz/index.html @@ -26,6 +26,7 @@ position: absolute; bottom: 20px; overflow: auto; + white-space: pre-wrap; background-color: rgba(0,200,200, .25); z-index: 3;"> -- cgit v1.2.3