mvrobot

README.md

@@ -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 
 

client/client.js

@@ -32,7 +32,7 @@ var wrapper = {}
 var nav = {}
 
 var verbose = false
-var verboseComs = false 
+var verboseComs = false
 
 /*
 
@@ -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`
 

client/divtools.js

@@ -3,11 +3,17 @@
 function addRepToView(rep) {
     // a div to locate it 
     var domElem = document.createElement('div')
+
+    if(rep.description.isBigBlock){
+        domElem.className = 'bigblock'
+    } else {
+        domElem.className = 'block'
+    }
     // dif. color for hardwares ?
-    domElem.className = 'block'
     if (rep.description.isHardware) {
         domElem.classList.add('hardware')
     }
+
     domElem.style.left = lastPos.x + 'px'
     domElem.style.top = lastPos.y + 'px'
 

client/style.css

@@ -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;
 }

client/ui/robotRepresentation.js

+(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

client/ui/threeCanvas.js

 (function() {
+    // generic / example three.js canvas 
     /* KRITICAL STEP */
     // this is our object, that we will later append
     // to the .lump position 

modules/robot/forwardTransform.js

@@ -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

modules/ui/robotCanvas.js

@@ -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
         })
     }
 

modules/util/gate.js

@@ -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'
+            })
         }
     }
 

modules/util/log.js

@@ -17,10 +17,11 @@ function Logger() {
 
     logger.state = State()
     // alias !
-    var state = logger.state 
+    var state = logger.state
 
     state.prefix = 'LOGGER:'
     state.message = '---'
+    state.logToggle = true
 
     logger.inputs = {
         thru: Input('any', onInput) // makes anything into '1' event
@@ -30,9 +31,11 @@ function Logger() {
         throughput: Output('any')
     }
 
-    function onInput(input){
-        state.message = input.toString()
-        console.log(state.prefix, input)
+    function onInput(input) {
+        if (state.logToggle) {
+            state.message = input.toString()
+            console.log(state.prefix, input)
+        }
     }
 
     return logger

programs.js

@@ -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

robot.js

@@ -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

views.js

@@ -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