Commit bfa06660 authored by Jake Read's avatar Jake Read

mvrobot

parent 9322f1a4
...@@ -267,8 +267,10 @@ View.assignProgram(program) ...@@ -267,8 +267,10 @@ View.assignProgram(program)
## Immediately ## Immediately
- go for generic ui class like remote hardware: subscribes etc - nice work on generic ui classes / ui.thing.call('function', arg)
- finish robot flow: offsets, ok, 100ms updates, ok
- forward transform object -> three.js canvas
- do key-binding ui for robot jogging, write video
- three robot canvas - three robot canvas
- set module display width - set module display width
......
...@@ -32,7 +32,7 @@ var wrapper = {} ...@@ -32,7 +32,7 @@ var wrapper = {}
var nav = {} var nav = {}
var verbose = false var verbose = false
var verboseComs = false var verboseComs = false
/* /*
...@@ -98,7 +98,7 @@ function socketSend(type, data) { ...@@ -98,7 +98,7 @@ function socketSend(type, data) {
type: type, type: type,
data: data data: data
} }
if(verboseComs) console.log('SEND', msg) if (verboseComs) console.log('SEND', msg)
sckt.send(JSON.stringify(msg)) sckt.send(JSON.stringify(msg))
} }
...@@ -106,7 +106,7 @@ function socketRecv(evt) { ...@@ -106,7 +106,7 @@ function socketRecv(evt) {
var recv = JSON.parse(evt.data) var recv = JSON.parse(evt.data)
var type = recv.type var type = recv.type
var data = recv.data var data = recv.data
if(verboseComs) console.log('RECV', recv) if (verboseComs) console.log('RECV', recv)
// tree banger // tree banger
switch (type) { switch (type) {
case 'console': case 'console':
...@@ -171,6 +171,9 @@ function heapSendsNewProgram(prgm) { ...@@ -171,6 +171,9 @@ function heapSendsNewProgram(prgm) {
// whole hearted replace // whole hearted replace
// hello for bugs when we lay this on top of something else // hello for bugs when we lay this on top of something else
program = prgm program = prgm
if (program.description.view != null) {
writeTransformToPage(program.description.view)
}
// 1st we want to git rm old files ... // 1st we want to git rm old files ...
// when adding links, we'll have to add all and then draw links // when adding links, we'll have to add all and then draw links
if (verbose) console.log('LOAD PROGRAM', program) if (verbose) console.log('LOAD PROGRAM', program)
...@@ -397,6 +400,21 @@ function getCurrentTransform() { ...@@ -397,6 +400,21 @@ function getCurrentTransform() {
}) })
} }
function writeTransformToPage(trns) {
// console.log('writing transform', trns)
/* transform is like {
scale: number,
translate: [x, y],
origin: [x, y]
}
*/
document.body.style.transform = `scale(${trns.scale}) translate(${trns.translate[0]}px, ${trns.translate[1]}px)`
document.body.style.transformOrigin = `${trns.origin[0]}px ${trns.origin[1]}px`
// opposite for nav
nav.style.transformOrigin = `${trns.origin[0]}px ${trns.origin[1]}px`
nav.style.transform = `scale(${1/trns.scale}) translate(${-trns.translate[0]*trns.scale}px,${-trns.translate[1]*trns.scale}px)`
}
function elementIsNotModule(element) { function elementIsNotModule(element) {
if ((element.tagName == 'HTML') || (element.tagName == 'BODY') || (element.tagName == 'svg')) { if ((element.tagName == 'HTML') || (element.tagName == 'BODY') || (element.tagName == 'svg')) {
return true return true
...@@ -420,6 +438,11 @@ onwheel = function(evt) { ...@@ -420,6 +438,11 @@ onwheel = function(evt) {
var ty = cT.ty + (evt.pageY - cT.oy) * (1 - 1 / cT.s) var ty = cT.ty + (evt.pageY - cT.oy) * (1 - 1 / cT.s)
// body // body
writeTransformToPage({
scale: scale,
translate: [tx, ty],
origin: [evt.pageX, evt.pageY]
})
document.body.style.transform = `scale(${scale}) translate(${tx}px,${ty}px)` document.body.style.transform = `scale(${scale}) translate(${tx}px,${ty}px)`
document.body.style.transformOrigin = `${evt.pageX}px ${evt.pageY}px` document.body.style.transformOrigin = `${evt.pageX}px ${evt.pageY}px`
......
...@@ -3,11 +3,17 @@ ...@@ -3,11 +3,17 @@
function addRepToView(rep) { function addRepToView(rep) {
// a div to locate it // a div to locate it
var domElem = document.createElement('div') var domElem = document.createElement('div')
if(rep.description.isBigBlock){
domElem.className = 'bigblock'
} else {
domElem.className = 'block'
}
// dif. color for hardwares ? // dif. color for hardwares ?
domElem.className = 'block'
if (rep.description.isHardware) { if (rep.description.isHardware) {
domElem.classList.add('hardware') domElem.classList.add('hardware')
} }
domElem.style.left = lastPos.x + 'px' domElem.style.left = lastPos.x + 'px'
domElem.style.top = lastPos.y + 'px' domElem.style.top = lastPos.y + 'px'
......
...@@ -18,6 +18,14 @@ body { ...@@ -18,6 +18,14 @@ body {
background-color: #303030; background-color: #303030;
} }
.bigblock {
width: 800px;
position: absolute;
padding: 0px;
padding-bottom: 23px;
background-color: #303030;
}
.hardware { .hardware {
background-color: #4d4c4c; background-color: #4d4c4c;
} }
......
This diff is collapsed.
(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 material = new THREE.LineBasicMaterial({ color: 0x000000 })
var geometry = new THREE.Geometry()
geometry.vertices.push(new THREE.Vector3(0, 0, 0))
geometry.vertices.push(new THREE.Vector3(0.5, 0, 0.5))
geometry.vertices.push(new THREE.Vector3(1, 0, 0.5))
var meshline = new MeshLine()
meshline.setGeometry(geometry, function(p) { return 3 })
var material = new MeshLineMaterial({
useMap: false,
color: new THREE.Color(0x50514f),
opacity: 1,
sizeAttenuation: true,
lineWidth: 0.01,
near: camera.near,
far: camera.far
})
var mesh = new THREE.Mesh(meshline.geometry, material)
scene.add(mesh)
var controls = new THREE.OrbitControls(camera, container)
camera.position.set(0.5, -1, 0.5)
controls.update()
var animate = function() {
requestAnimationFrame(animate)
/*
line.geometry.vertices[1].x += 0.01
line.geometry.verticesNeedUpdate = true
*/
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)
geometry.vertices[0].set(msg.argument[0], msg.argument[1], msg.argument[2])
meshline.setGeometry(geometry, function(p) { return 3 })
geometry.verticesNeedUpdate = true
} else if (msg.calls == 'updateXY2') {
if(verbose) console.log('updateXY2', msg.argument)
geometry.vertices[1].set(msg.argument[0], msg.argument[1], msg.argument[2])
meshline.setGeometry(geometry, function(p) { return 3 })
geometry.verticesNeedUpdate = true
} else if (msg.calls == 'updateXY3') {
if(verbose) console.log('updateXY3', msg.argument)
geometry.vertices[2].set(msg.argument[0], msg.argument[1], msg.argument[2])
meshline.setGeometry(geometry, function(p) { return 3 })
geometry.verticesNeedUpdate = true
} 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
(function() { (function() {
// generic / example three.js canvas
/* KRITICAL STEP */ /* KRITICAL STEP */
// this is our object, that we will later append // this is our object, that we will later append
// to the .lump position // to the .lump position
......
...@@ -7,9 +7,6 @@ let Output = JSUnit.Output ...@@ -7,9 +7,6 @@ let Output = JSUnit.Output
let State = JSUnit.State let State = JSUnit.State
function forwardTransform() { function forwardTransform() {
var theta1 = 0
var theta2 = 0
var forwardTransform = { var forwardTransform = {
description: { description: {
name: 'forwardTransform Parser', name: 'forwardTransform Parser',
...@@ -24,73 +21,68 @@ function forwardTransform() { ...@@ -24,73 +21,68 @@ function forwardTransform() {
// or they don't get getter / settered when we do // or they don't get getter / settered when we do
forwardTransform.state = State() forwardTransform.state = State()
var state = forwardTransform.state var state = forwardTransform.state
state.l1 = 0.4 state.tA = 0
state.l2 = 0.2 state.tB = 0
state.tC = 0
state.lA = 0.4
state.lB = 0.2
state.onUiChange('tA', () => {
doForwardTransform()
})
forwardTransform.inputs = { forwardTransform.inputs = {
theta1: Input('any', intakeTheta1), theta_A: Input('any', (num) => {
theta2: Input('any', intakeTheta2), state.tA = num
l1: Input('any', intakeL1), doForwardTransform()
l2: Input('any', intakeL2) }),
theta_B: Input('any', (num) => {
state.tB = num
doForwardTransform()
}),
theta_C: Input('number', (num) => {
state.tC = num
doForwardTransform()
}),
len_A: Input('any', (num) => {
state.lA = num
doForwardTransform()
}),
len_B: Input('any', (num) => {
state.lB = num
doForwardTransform()
})
} }
forwardTransform.outputs = { forwardTransform.outputs = {
originpt: Output('array'), ptA: Output('array'),
jointpt: Output('array'), ptB: Output('array'),
touchpt: Output('array') ptC: Output('array')
}
function intakeTheta1(num){
theta1 = num
var points = parseforwardTransform()
forwardTransform.outputs.originpt.emit(points.originpt)
forwardTransform.outputs.jointpt.emit(points.jointpt)
forwardTransform.outputs.touchpt.emit(points.touchpt)
}
function intakeTheta2(num){
theta2 = num
var points = parseforwardTransform()
forwardTransform.outputs.originpt.emit(points.originpt)
forwardTransform.outputs.jointpt.emit(points.jointpt)
forwardTransform.outputs.touchpt.emit(points.touchpt)
//console.log('theta2 input')
}
function intakeL1(num){
state.l1 = num
var points = parseforwardTransform()
forwardTransform.outputs.originpt.emit(points.originpt)
forwardTransform.outputs.jointpt.emit(points.jointpt)
forwardTransform.outputs.touchpt.emit(points.touchpt)
//console.log('state.l1 input')
}
function intakeL2(num){
state.l2 = num
var points = parseforwardTransform()
forwardTransform.outputs.originpt.emit(points.originpt)
forwardTransform.outputs.jointpt.emit(points.jointpt)
forwardTransform.outputs.touchpt.emit(points.touchpt)
//console.log('state.l2 input')
} }
// TODO: test, can we link global vars to ui objects ... // TODO: test, can we link global vars to ui objects ...
// forwardTransform.ui.mode.value = var ? no bc set / get etc // forwardTransform.ui.mode.value = var ? no bc set / get etc
// more like var = forwardTransform.ui.mode.value ? is this referential? // more like var = forwardTransform.ui.mode.value ? is this referential?
function parseforwardTransform() { function doForwardTransform() {
var points = { var lenA = state.lA*Math.cos(state.tB)
originpt: [0,0], var lenB = state.lB*Math.cos(state.tB + state.tC)
jointpt: [0,0],
touchpt: [0,0] var knuckle = [ lenA*Math.cos(state.tA),
} lenA*Math.sin(state.tA),
state.lA*Math.sin(state.tB)]
points.jointpt = [state.l1*Math.cos(theta1), state.l1*Math.sin(theta1)]
points.touchpt = [state.l1*Math.cos(theta1)+state.l2*Math.cos(theta2+theta1), state.l1*Math.sin(theta1)+state.l2*Math.sin(theta2+ theta1)] var tip = [ knuckle[0] + lenB*Math.cos(state.tA),
knuckle[1] + lenB*Math.sin(state.tA),
return points knuckle[2] + state.lB*Math.sin(state.tB + state.tC)]
/*
[ state.lA*Math.cos(state.tA) + state.lB*Math.cos(state.tA + state.tB),
state.lA*Math.sin(state.tA) + state.lB*Math.sin(state.tA + state.tB),
state.lA*Math.sin(state.tB) + state.lB*Math.sin(state.tA + state.tB)]
*/
forwardTransform.outputs.ptA.emit([0,0,0])
forwardTransform.outputs.ptB.emit(knuckle)
forwardTransform.outputs.ptC.emit(tip)
} }
return forwardTransform return forwardTransform
......
...@@ -14,8 +14,9 @@ function RobotCanvas() { ...@@ -14,8 +14,9 @@ function RobotCanvas() {
var rbtCanvas = { var rbtCanvas = {
// descriptions are used in UI // descriptions are used in UI
description: { description: {
name: 'ThreeJS-Canvas', name: 'RobotArm-Canvas',
alt: 'graphix' alt: 'graphix',
isBigBlock: true
} }
} }
...@@ -26,7 +27,7 @@ function RobotCanvas() { ...@@ -26,7 +27,7 @@ function RobotCanvas() {
rbtCanvas.inputs = { rbtCanvas.inputs = {
xy1: Input('array', onNewXY1), xy1: Input('array', onNewXY1),
xy2: Input('array', onNewXY2), xy2: Input('array', onNewXY2),
// do some canvas stuff xy3: Input('array', onNewXY3)
} }
rbtCanvas.outputs = { rbtCanvas.outputs = {
...@@ -35,30 +36,34 @@ function RobotCanvas() { ...@@ -35,30 +36,34 @@ function RobotCanvas() {
rbtCanvas.ui = UI() rbtCanvas.ui = UI()
var ui = rbtCanvas.ui var ui = rbtCanvas.ui
ui.addElement('threeCanvas', 'ui/threeCanvas.js') ui.addElement('canvas', 'ui/robotRepresentation.js')
// add bonus lib path // add bonus lib path
ui.threeCanvas.libPath = 'ui/libs/three.js' ui.canvas.libPath = 'ui/libs/three.js'
ui.threeCanvas.subscribe('onload', function(msg){ ui.canvas.subscribe('onload', function(msg){
console.log('catch canvas load', msg) console.log('catch canvas load', msg)
onNewXY1([0,0,0])
onNewXY2([0.3,0.3,0.6])
onNewXY3([0.6,0.6,0.3])
}) })
/*
ui.threeCanvas.onload = function() {
console.log('canvas is loaded')
}
*/
function onNewXY1(array) { function onNewXY1(array) {
ui.threeCanvas.send({ ui.canvas.send({
calls: "updateXY1", calls: "updateXY1",
argument: [array[0], 0, array[1]] argument: array
}) })
} }
function onNewXY2(array){ function onNewXY2(array){
ui.threeCanavs.send({ ui.canvas.send({
calls: "updateXY2", calls: "updateXY2",
argument: [array[0], 0, array[1]] argument: array
})
}
function onNewXY3(array){
ui.canvas.send({
calls: "updateXY3",
argument: array
}) })
} }
......
...@@ -28,7 +28,7 @@ function Gate() { ...@@ -28,7 +28,7 @@ function Gate() {
gate.ui = UI() gate.ui = UI()
var ui = gate.ui var ui = gate.ui
ui.addElement('openButton', 'ui/uiButton.js') ui.addElement('openButton', 'ui/uiButton.js')
ui.openButton.subscribe('onload', function(msg){ ui.openButton.subscribe('onload', function(msg) {
ui.openButton.send({ ui.openButton.send({
calls: 'setText', calls: 'setText',
argument: 'click to open gate' argument: 'click to open gate'
...@@ -51,11 +51,17 @@ function Gate() { ...@@ -51,11 +51,17 @@ function Gate() {
if (gate.isOpen) { if (gate.isOpen) {
gate.isOpen = false gate.isOpen = false
state.message = 'closed' state.message = 'closed'
ui.openButton.setText('click to open gate') ui.openButton.send({
calls: 'setText',
argument: 'click to open gate'
})
} else { } else {
gate.isOpen = true gate.isOpen = true
state.message = 'open' state.message = 'open'
ui.openButton.setText('click to close gate') ui.openButton.send({
calls: 'setText',
argument: 'click to close gate'
})
} }
} }
......
...@@ -17,10 +17,11 @@ function Logger() { ...@@ -17,10 +17,11 @@ function Logger() {
logger.state = State() logger.state = State()
// alias ! // alias !
var state = logger.state var state = logger.state
state.prefix = 'LOGGER:' state.prefix = 'LOGGER:'
state.message = '---' state.message = '---'
state.logToggle = true
logger.inputs = { logger.inputs = {
thru: Input('any', onInput) // makes anything into '1' event thru: Input('any', onInput) // makes anything into '1' event
...@@ -30,9 +31,11 @@ function Logger() { ...@@ -30,9 +31,11 @@ function Logger() {
throughput: Output('any') throughput: Output('any')
} }
function onInput(input){ function onInput(input) {
state.message = input.toString() if (state.logToggle) {
console.log(state.prefix, input) state.message = input.toString()
console.log(state.prefix, input)
}
} }
return logger return logger
......
...@@ -305,6 +305,10 @@ function SetUI(module, left, top){ ...@@ -305,6 +305,10 @@ function SetUI(module, left, top){
module.description.position.top = top module.description.position.top = top
} }
function SetView(program, transform){
program.description.view = transform
}
module.exports = { module.exports = {
new: newProgram,