Commit bfa06660 authored by Jake Read's avatar Jake Read

mvrobot

parent 9322f1a4
......@@ -267,8 +267,10 @@ View.assignProgram(program)
## 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
- set module display width
......
......@@ -98,7 +98,7 @@ function socketSend(type, data) {
type: type,
data: data
}
if(verboseComs) console.log('SEND', msg)
if (verboseComs) console.log('SEND', msg)
sckt.send(JSON.stringify(msg))
}
......@@ -106,7 +106,7 @@ function socketRecv(evt) {
var recv = JSON.parse(evt.data)
var type = recv.type
var data = recv.data
if(verboseComs) console.log('RECV', recv)
if (verboseComs) console.log('RECV', recv)
// tree banger
switch (type) {
case 'console':
......@@ -171,6 +171,9 @@ function heapSendsNewProgram(prgm) {
// whole hearted replace
// hello for bugs when we lay this on top of something else
program = prgm
if (program.description.view != null) {
writeTransformToPage(program.description.view)
}
// 1st we want to git rm old files ...
// when adding links, we'll have to add all and then draw links
if (verbose) console.log('LOAD PROGRAM', program)
......@@ -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) {
if ((element.tagName == 'HTML') || (element.tagName == 'BODY') || (element.tagName == 'svg')) {
return true
......@@ -420,6 +438,11 @@ onwheel = function(evt) {
var ty = cT.ty + (evt.pageY - cT.oy) * (1 - 1 / cT.s)
// 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.transformOrigin = `${evt.pageX}px ${evt.pageY}px`
......
......@@ -3,11 +3,17 @@
function addRepToView(rep) {
// a div to locate it
var domElem = document.createElement('div')
// dif. color for hardwares ?
if(rep.description.isBigBlock){
domElem.className = 'bigblock'
} else {
domElem.className = 'block'
}
// dif. color for hardwares ?
if (rep.description.isHardware) {
domElem.classList.add('hardware')
}
domElem.style.left = lastPos.x + 'px'
domElem.style.top = lastPos.y + 'px'
......
......@@ -18,6 +18,14 @@ body {
background-color: #303030;
}
.bigblock {
width: 800px;
position: absolute;
padding: 0px;
padding-bottom: 23px;
background-color: #303030;
}
.hardware {
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() {
// generic / example three.js canvas
/* KRITICAL STEP */
// this is our object, that we will later append
// to the .lump position
......
......@@ -7,9 +7,6 @@ let Output = JSUnit.Output
let State = JSUnit.State
function forwardTransform() {
var theta1 = 0
var theta2 = 0
var forwardTransform = {
description: {
name: 'forwardTransform Parser',
......@@ -24,73 +21,68 @@ function forwardTransform() {
// or they don't get getter / settered when we do
forwardTransform.state = State()
var state = forwardTransform.state
state.l1 = 0.4
state.l2 = 0.2
state.tA = 0
state.tB = 0
state.tC = 0
state.lA = 0.4
state.lB = 0.2
state.onUiChange('tA', () => {
doForwardTransform()
})
forwardTransform.inputs = {
theta1: Input('any', intakeTheta1),
theta2: Input('any', intakeTheta2),
l1: Input('any', intakeL1),
l2: Input('any', intakeL2)
theta_A: Input('any', (num) => {
state.tA = num
doForwardTransform()
}),
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 = {
originpt: Output('array'),
jointpt: Output('array'),
touchpt: 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')
ptA: Output('array'),
ptB: Output('array'),
ptC: Output('array')
}
// TODO: test, can we link global vars to ui objects ...
// forwardTransform.ui.mode.value = var ? no bc set / get etc
// more like var = forwardTransform.ui.mode.value ? is this referential?
function parseforwardTransform() {
var points = {
originpt: [0,0],
jointpt: [0,0],
touchpt: [0,0]
}
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)]
return points
function doForwardTransform() {
var lenA = state.lA*Math.cos(state.tB)
var lenB = state.lB*Math.cos(state.tB + state.tC)
var knuckle = [ lenA*Math.cos(state.tA),
lenA*Math.sin(state.tA),
state.lA*Math.sin(state.tB)]
var tip = [ knuckle[0] + lenB*Math.cos(state.tA),
knuckle[1] + lenB*Math.sin(state.tA),
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
......
......@@ -14,8 +14,9 @@ function RobotCanvas() {
var rbtCanvas = {
// descriptions are used in UI
description: {
name: 'ThreeJS-Canvas',
alt: 'graphix'
name: 'RobotArm-Canvas',
alt: 'graphix',
isBigBlock: true
}
}
......@@ -26,7 +27,7 @@ function RobotCanvas() {
rbtCanvas.inputs = {
xy1: Input('array', onNewXY1),
xy2: Input('array', onNewXY2),
// do some canvas stuff
xy3: Input('array', onNewXY3)
}
rbtCanvas.outputs = {
......@@ -35,30 +36,34 @@ function RobotCanvas() {
rbtCanvas.ui = UI()
var ui = rbtCanvas.ui
ui.addElement('threeCanvas', 'ui/threeCanvas.js')
ui.addElement('canvas', 'ui/robotRepresentation.js')
// add bonus lib path
ui.threeCanvas.libPath = 'ui/libs/three.js'
ui.threeCanvas.subscribe('onload', function(msg){
ui.canvas.libPath = 'ui/libs/three.js'
ui.canvas.subscribe('onload', function(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) {
ui.threeCanvas.send({
ui.canvas.send({
calls: "updateXY1",
argument: [array[0], 0, array[1]]
argument: array
})
}
function onNewXY2(array){
ui.threeCanavs.send({
ui.canvas.send({
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() {
gate.ui = UI()
var ui = gate.ui
ui.addElement('openButton', 'ui/uiButton.js')
ui.openButton.subscribe('onload', function(msg){
ui.openButton.subscribe('onload', function(msg) {
ui.openButton.send({
calls: 'setText',
argument: 'click to open gate'
......@@ -51,11 +51,17 @@ function Gate() {
if (gate.isOpen) {
gate.isOpen = false
state.message = 'closed'
ui.openButton.setText('click to open gate')
ui.openButton.send({
calls: 'setText',
argument: 'click to open gate'
})
} else {
gate.isOpen = true
state.message = 'open'
ui.openButton.setText('click to close gate')
ui.openButton.send({
calls: 'setText',
argument: 'click to close gate'
})
}
}
......
......@@ -21,6 +21,7 @@ function Logger() {
state.prefix = 'LOGGER:'
state.message = '---'
state.logToggle = true
logger.inputs = {
thru: Input('any', onInput) // makes anything into '1' event
......@@ -30,10 +31,12 @@ function Logger() {
throughput: Output('any')
}
function onInput(input){
function onInput(input) {
if (state.logToggle) {
state.message = input.toString()
console.log(state.prefix, input)
}
}
return logger
}
......
......@@ -305,6 +305,10 @@ function SetUI(module, left, top){
module.description.position.top = top
}
function SetView(program, transform){
program.description.view = transform
}
module.exports = {
new: newProgram,
open: openProgram,
......@@ -312,5 +316,6 @@ module.exports = {
loadModuleFromSource: loadModuleFromSource,
removeModule: removeModuleFromProgram,
assignSocket: assignSocket,
setUI: SetUI
setUI: SetUI,
setView: SetView
}
\ No newline at end of file
......@@ -22,19 +22,34 @@ var program = Programs.new('new program')
var link = Programs.loadModuleFromSource(program, './modules/hardware/atkseriallink.js')
link.startUp()
link.state.log = false
Programs.setUI(link, 1050, 50)
Programs.setUI(link, 1050, 150)
var mrbotone = Programs.loadModuleFromSource(program, './modules/hardware/atkmrobot.js')
mrbotone.route.route = '0,0'
mrbotone.state.enc_reverse = true
mrbotone.state.enc_offset = 8875
Programs.setUI(mrbotone, 600, 50)
var mrbottwo = Programs.loadModuleFromSource(program, './modules/hardware/atkmrobot.js')
mrbottwo.state.enc_reverse = true
mrbottwo.state.enc_offset = 4000
mrbottwo.route.route = '0,1'
Programs.setUI(mrbottwo, 600, 550)
var mrbotthree = Programs.loadModuleFromSource(program, './modules/hardware/atkmrobot.js')
mrbotthree.route.route = '0,2'
mrbotthree.state.enc_reverse = false
mrbotthree.state.enc_offset = 1700
Programs.setUI(mrbotthree, 600, 1050)
var rbtcanvas = Programs.loadModuleFromSource(program, './modules/ui/robotCanvas.js')
Programs.setUI(rbtcanvas, 1200, 50)
Programs.setUI(rbtcanvas, 1500, 1050)
/*
Programs.setView(program, {
scale: 0.5,
translate: [-160, -30],
origin: [200, 120]
})
var button = Programs.loadModuleFromSource(program, './modules/ui/button.js')
var delay = Programs.loadModuleFromSource(program, './modules/util/delay.js')
......@@ -46,17 +61,38 @@ Programs.setUI(delay, 90, 250)
Programs.setUI(gate, 90, 400)
button.outputs.whammy.attach(mrbotone.inputs.get_pos)
button.outputs.whammy.attach(mrbottwo.inputs.get_pos)
button.outputs.whammy.attach(mrbotthree.inputs.get_pos)
button.outputs.whammy.attach(delay.inputs.thru)
delay.outputs.out.attach(gate.inputs.thru)
gate.outputs.out.attach(button.inputs.thru)
var log = Programs.loadModuleFromSource(program, './modules/util/log.js')
log.state.prefix = "jnt1:"
Programs.setUI(log, 1050, 520)
mrbotone.outputs.pos.attach(log.inputs.thru)
var transform = Programs.loadModuleFromSource(program, './modules/robot/forwardTransform.js')
Programs.setUI(transform, 1225, 650)
var log1 = Programs.loadModuleFromSource(program, './modules/util/log.js')
log1.state.prefix = "jnt1:"
Programs.setUI(log1, 1500, 50)
mrbotone.outputs.pos.attach(log1.inputs.thru)
mrbotone.outputs.pos.attach(transform.inputs.theta_A)
var canvas = Programs.loadModuleFromSource(program, './modules/ui/threeCanvas.js')
Programs.setUI(canvas, 1500, 650)
var log2= Programs.loadModuleFromSource(program, './modules/util/log.js')
log2.state.prefix = "jnt2:"
Programs.setUI(log2, 1500, 250)
mrbottwo.outputs.pos.attach(log2.inputs.thru)
mrbottwo.outputs.pos.attach(transform.inputs.theta_B)
var log3 = Programs.loadModuleFromSource(program, './modules/util/log.js')
log3.state.prefix = "jnt3:"
Programs.setUI(log3, 1500, 450)
mrbotthree.outputs.pos.attach(log3.inputs.thru)
mrbotthree.outputs.pos.attach(transform.inputs.theta_C)
transform.outputs.ptA.attach(rbtcanvas.inputs.xy1)
transform.outputs.ptB.attach(rbtcanvas.inputs.xy2)
transform.outputs.ptC.attach(rbtcanvas.inputs.xy3)
/*
var collector = Programs.loadModuleFromSource(program, './modules/util/collector.js')
Programs.setUI(collector, 1050, 800)
......@@ -70,7 +106,7 @@ Programs.setUI(gateCounter, 600, 850)
var stest = Programs.loadModuleFromSource(program, './modules/ui/stest.js')
var rep = Reps.makeFromModule(stest)
console.log('rep', rep)
console.log1('rep', rep)
/* example program-like-an-api
// load some modules
......
......@@ -163,6 +163,9 @@ function uiRequestCurrentProgram() {
},
modules: {}
}
if(program.description.view != null){
prgRep.description.view = program.description.view
}
for (mdlName in program.modules) {
var mdlRep = Reps.makeFromModule(program.modules[mdlName])
prgRep.modules[mdlName] = mdlRep
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment