From b08b0c2897e6fa5eb54507f3bb9b69e67b2c03cf Mon Sep 17 00:00:00 2001
From: Jake <jake.read@cba.mit.edu>
Date: Mon, 17 Dec 2018 20:40:01 -0500
Subject: [PATCH] viable robot demo
---
client/ui/robotRepresentation.js | 6 +-
client/ui/robotRepresentationTubes.js | 124 ++++++++++++++++++++++++++
modules/ui/robotCanvas.js | 2 +-
robot.js | 2 +
4 files changed, 131 insertions(+), 3 deletions(-)
create mode 100644 client/ui/robotRepresentationTubes.js
diff --git a/client/ui/robotRepresentation.js b/client/ui/robotRepresentation.js
index 2664eb1..891fe7e 100644
--- a/client/ui/robotRepresentation.js
+++ b/client/ui/robotRepresentation.js
@@ -46,8 +46,10 @@
near: camera.near,
far: camera.far
})
- var mesh = new THREE.Mesh(meshline.geometry, material)
- scene.add(mesh)
+ var meshlineMesh = new THREE.Mesh(meshline.geometry, material)
+ scene.add(meshlineMesh)
+
+ var
var controls = new THREE.OrbitControls(camera, container)
diff --git a/client/ui/robotRepresentationTubes.js b/client/ui/robotRepresentationTubes.js
new file mode 100644
index 0000000..b4e01b9
--- /dev/null
+++ b/client/ui/robotRepresentationTubes.js
@@ -0,0 +1,124 @@
+(function() {
+ // generic / example three.js canvas
+ /* KRITICAL STEP */
+ // this is our object, that we will later append
+ // to the .lump position
+ var threeCanvas = {}
+
+ var verbose = false
+
+ // now three stuff
+ var container = document.createElement('div')
+ var scene = new THREE.Scene()
+ scene.background = new THREE.Color(0xd6d6d6)
+ var camera = new THREE.PerspectiveCamera(75, 1, 0.01, 1000)
+ camera.up.set(0, 0, 1)
+ var renderer = new THREE.WebGLRenderer()
+ renderer.setSize(696, 796)
+ container.appendChild(renderer.domElement)
+
+ // axes
+ var axesHelper = new THREE.AxesHelper(0.1)
+ scene.add(axesHelper)
+
+ // grid
+ /*
+ var gridHelper = new THREE.GridHelper(10, 100)
+ gridHelper.translateOnAxis(new THREE.Vector3(0, 0, 1), -0.01)
+ gridHelper.rotateX(-Math.PI / 2)
+ scene.add(gridHelper)
+ */
+
+ // one line
+ var tsLineOne = new THREE.LineCurve3(new THREE.Vector3(0, 0, 0), new THREE.Vector3(0.5, 0, 0.5))
+ var tsSecOne = new THREE.TubeGeometry(tsLineOne, 3, 0.03, 12, true)
+ var material = new THREE.MeshBasicMaterial({ color: 0x797e87 })
+ var meshOne = new THREE.Mesh(tsSecOne, material)
+
+ var tsLineTwo = new THREE.LineCurve3(new THREE.Vector3(0.5, 0, 0.5), new THREE.Vector3(1, 0, 1))
+ var tsSecTwo = new THREE.TubeGeometry(tsLineTwo, 3, 0.03, 12, true)
+ var meshTwo = new THREE.Mesh(tsSecTwo, material)
+
+ scene.add(meshOne)
+ scene.add(meshTwo)
+
+ var controls = new THREE.OrbitControls(camera, container)
+
+ camera.position.set(0.5, -1, 0.5)
+ controls.update()
+
+ console.log(tsSecOne.parameters)
+
+ var animate = function() {
+ requestAnimationFrame(animate)
+ controls.update()
+ renderer.render(scene, camera)
+ }
+ // kickstart
+ animate()
+
+ // set class, etc, put canvas in class, etc
+ // and then
+ /* KRITICAL STEP */
+ // we have to give our 'lump' object a .domElem, this
+ // will be referenced upstream to append to the right module
+ // append it to the dom so that it can be appended on init
+ threeCanvas.domElem = container
+
+ /* KRITICAL STEP */
+ // whatever is posted to .lump will receive messages through
+ // .onMessage, so if we don't write one, we'll cause errors
+ // upstream, and besides, wouldn't be able to get anything from
+ // the server
+ threeCanvas.onMessage = function(msg) {
+ //console.log('got message in client side ui object', msg)
+ if (msg.calls == 'updateXY1') {
+ if (verbose) console.log('updateXY1', msg.argument)
+ } else if (msg.calls == 'updateXY2') {
+ if (verbose) console.log('updateXY2', msg.argument)
+ tsLineOne.v2.set(msg.argument[0], msg.argument[1], msg.argument[2])
+ tsLineOne.verticesNeedUpdate = true
+ tsLineTwo.v1.set(msg.argument[0], msg.argument[1], msg.argument[2])
+ tsLineTwo.verticesNeedUpdate = true
+ scene.remove(meshOne)
+ scene.remove(meshTwo)
+ tsSecOne = new THREE.TubeGeometry(tsLineOne, 12, 0.03, 12, true)
+ tsSecTwo = new THREE.TubeGeometry(tsLineTwo, 12, 0.03, 12, true)
+ meshOne = new THREE.Mesh(tsSecOne, material)
+ meshTwo = new THREE.Mesh(tsSecTwo, material)
+ scene.add(meshOne)
+ scene.add(meshTwo)
+ } else if (msg.calls == 'updateXY3') {
+ if (verbose) console.log('updateXY3', msg.argument)
+ tsLineTwo.v2.set(msg.argument[0], msg.argument[1], msg.argument[2])
+ tsLineTwo.verticesNeedUpdate = true
+ scene.remove(meshTwo)
+ tsSecTwo = new THREE.TubeGeometry(tsLineTwo, 12, 0.03, 12, true)
+ meshTwo = new THREE.Mesh(tsSecTwo, material)
+ scene.add(meshTwo)
+ } else {
+ console.log('default msg because none from sys at threejs clientside')
+ console.log(msg)
+ }
+ }
+
+ /* KRITICAL STEP */
+ // expect this to only be used once
+ // it's basically our init function
+ // and gets called once the module is loaded
+ window.registerNewModule = function(id, key) {
+ threeCanvas.parentId = id
+ threeCanvas.key = key
+ // affectionately named lump of code, insert ourselves here
+ program.modules[id].ui[key].lump = threeCanvas
+ // and call-back to do onload things
+ var data = {
+ id: threeCanvas.parentId,
+ key: threeCanvas.key,
+ msg: {
+ key: 'onload'
+ }
+ }
+ socketSend('put ui change', data)
+ }
+})()
\ No newline at end of file
diff --git a/modules/ui/robotCanvas.js b/modules/ui/robotCanvas.js
index 28b0d7c..7a00775 100644
--- a/modules/ui/robotCanvas.js
+++ b/modules/ui/robotCanvas.js
@@ -36,7 +36,7 @@ function RobotCanvas() {
rbtCanvas.ui = UI()
var ui = rbtCanvas.ui
- ui.addElement('canvas', 'ui/robotRepresentation.js')
+ ui.addElement('canvas', 'ui/robotRepresentationTubes.js')
// add bonus lib path
ui.canvas.libPath = 'ui/libs/three.js'
ui.canvas.subscribe('onload', function(msg){
diff --git a/robot.js b/robot.js
index 77c9b52..237da62 100644
--- a/robot.js
+++ b/robot.js
@@ -68,6 +68,8 @@ delay.outputs.out.attach(gate.inputs.thru)
gate.outputs.out.attach(button.inputs.thru)
var transform = Programs.loadModuleFromSource(program, './modules/robot/forwardTransform.js')
+transform.state.lA = 0.37
+transform.state.lB = 0.25
Programs.setUI(transform, 1225, 650)
var log1 = Programs.loadModuleFromSource(program, './modules/util/log.js')
--
GitLab