big UI elements refactor

README.md

@@ -267,6 +267,11 @@ View.assignProgram(program)
 
 ## Immediately
 
+- go for generic ui class like remote hardware: subscribes etc 
+
+- three robot canvas 
+- set module display width 
+
 - saved program doesn't save state booleans 
 
 - ui objects ... refresh ... use state model ? 
@@ -281,6 +286,7 @@ View.assignProgram(program)
 
 - tuning:
  - mrobot having PI, PID terms
+ - probably good to do a remote-get ... 
  - having position-set input (also gets output?)
  - having position-actual output
  - graphing these things

client/divtools.js

@@ -265,13 +265,13 @@ function loadUIScript(container, rep, key) {
     }
 
     ui.script.onload = function(msg) {
-        console.log('UI script loaded')
+        console.log('UI script loaded and - ')
         // each ui script writes this function to 
         // window. (global scope) on load,
         // so we can use it now to get hooks
         registerNewModule(rep.description.id, key)
         // that function will be used to append to
-        console.log('UI script hooked, having lump at', program.modules[rep.description.id].ui[key].lump)
+        console.log('hooked, having lump at', program.modules[rep.description.id].ui[key].lump)
         container.appendChild(program.modules[rep.description.id].ui[key].lump.domElem)
     }
 }
@@ -279,8 +279,7 @@ function loadUIScript(container, rep, key) {
 function writeUiElement(container, rep, key) {
     // pull the representation object from what we were sent 
     var ui = rep.ui[key]
-    console.log('write ui', ui)
-    console.log('at rep', rep)
+    console.log('write ui', ui.clientPath, 'at rep', rep.description.id)
 
     // first, check if ui also has lib to load 
     if (ui.libPath != null) {

client/ui/threeCanvas.js

@@ -97,7 +97,9 @@
         var data = {
             id: threeCanvas.parentId,
             key: threeCanvas.key,
-            msg: 'onload'
+            msg: {
+                key: 'onload'
+            }
         }
         socketSend('put ui change', data)
     }

client/ui/uiButton.js

@@ -12,7 +12,9 @@
 		var data = {
 			id: btn.parentId,
 			key: btn.key,
-			msg: 'onclick'
+			msg: {
+				key: 'onclick'
+			}
 		}
 		socketSend('put ui change', data)
 	})
@@ -29,8 +31,7 @@
 	// upstream, and besides, wouldn't be able to get anything from
 	// the server 
 	btn.onMessage = function(msg){
-		console.log('got message in client side ui object', msg)
-		if(msg.call == 'setText'){
+		if(msg.calls == 'setText'){
 			btn.domElem.innerHTML = msg.argument
 		}
 	}
@@ -48,7 +49,9 @@
 		var data = {
 			id: btn.parentId,
 			key: btn.key,
-			msg: 'onload'
+			msg: {
+				key: 'onload'
+			}
 		}
 		socketSend('put ui change', data)
 	}

modules/flowcontrol/and.js

@@ -29,10 +29,14 @@ function AndFlow() {
 
     andFlow.ui = UI()
     var ui = andFlow.ui
-    ui.addElement('btnReset', './ui/uiButton.js', onReset)
-    ui.btnReset.onload = function() {
-        ui.btnReset.setText('reset')
-    }
+    ui.addElement('btnReset', 'ui/uiButton.js')
+    ui.btnReset.subscribe('onload', function(msg){
+        ui.btnReset.send({
+            calls: 'setText',
+            argument: 'reset'
+        })
+    })
+    ui.btnReset.subscribe('onclick', onReset)
 
     andFlow.inputs = {
         reset: Input('any', onReset),

modules/hardware/atkbreadboardboard.js

@@ -37,14 +37,23 @@ function ATKBreadBoardBoard() {
     state.onUiChange('servoVal', onServoValChange)
 
     var ui = atkbbb.ui 
-    ui.addElement('servoButton', './ui/uiButton.js', onServoValChange)
-    ui.servoButton.onload = function(){
-        ui.servoButton.setText('click to send servo value')
-    }
-    ui.addElement('adcReqButton', './ui/uiButton.js', onADCRequest)
-    ui.adcReqButton.onload = function(){
-        ui.adcReqButton.setText('click to request adc conversion')
-    }
+    ui.addElement('servoButton', 'ui/uiButton.js')
+    ui.servoButton.subscribe('onload', function(msg){
+        ui.servoButton.send({
+            calls: 'setText',
+            argument: 'click to send servo value'
+        })
+    })
+    ui.servoButton.subscribe('onclick', onServoValChange)
+
+    ui.addElement('adcReqButton', 'ui/uiButton.js')
+    ui.adcReqButton.subscribe('onload', function(msg){
+        ui.adcReqButton.send({
+            calls: 'setText',
+            argument: 'click to request adc conversion'
+        })
+    })
+    ui.adcReqButton.subscribe('onclick', onADCRequest)
 
     // to send things down the well, we can use
     // atkbbb.route.send(packet) 

modules/hardware/atkmrobot.js

@@ -49,14 +49,15 @@ function ATKMathRobot() {
     state.enc_cnt = 16384
     state.enc_offset = 0
     state.enc_reverse = false 
+    state.pc_r = 0
     state.pc_t = 2048
     state.onUiChange('pc_t', onPositionTargetUserChange)
 
-    state.pKp = 4.5
+    state.pKp = 10
     state.onUiChange('pKp', onKValsUpdate)
-    state.pKi = 0.0
+    state.pKi = 0.005
     state.onUiChange('pKi', onKValsUpdate)
-    state.pKd = 0.0
+    state.pKd = 40.0
     state.onUiChange('pKd', onKValsUpdate)
     state.cKp = 4.0
     state.onUiChange('cKp', onKValsUpdate)
@@ -67,10 +68,11 @@ function ATKMathRobot() {
 
     atkmr.ui = UI()
     var ui = atkmr.ui
-    ui.addElement('walkValButton', './ui/uiButton.js', onPositionTickTock)
-    ui.walkValButton.onload = function() {
-        ui.walkValButton.setText('walk value')
-    }
+    ui.addElement('walkValButton', 'ui/uiButton.js')
+    ui.walkValButton.subscribe('onload', function(msg){
+        ui.walkValButton.call('setText', 'click to walk val')
+    })
+    ui.walkValButton.subscribe('onclick', onPositionTickTock)
 
     // to send things down the well, we can use
     // atkmr.route.send(packet) 
@@ -94,6 +96,7 @@ function ATKMathRobot() {
 
     atkmr.route.subscribe(145, function(msg){
         var pos = PCKT.unPack32(msg.slice(1))
+        state.pc_r = pos 
         if(state.enc_reverse){
             pos = state.enc_cnt - pos 
         }

modules/hardware/atkseriallink.js

@@ -34,11 +34,14 @@ function ATKSerialLink() {
     atkSerialLink.ui = UI() 
     var ui = atkSerialLink.ui 
 
-    ui.addElement('kickButton', './ui/uiButton.js', findSerialPort)
-
-    ui.kickButton.onload = function(){
-        ui.kickButton.setText('click to find and connect')
-    }
+    ui.addElement('kickButton', 'ui/uiButton.js')
+    ui.kickButton.subscribe('onload', function(msg){
+        ui.kickButton.send({
+            calls: 'setText',
+            argument: 'click to find and connect'
+        })
+    })
+    ui.kickButton.subscribe('onclick', findSerialPort)
 
     atkSerialLink.init = function(){
         //findSerialPort()

modules/hardware/atkstepper.js

@@ -51,10 +51,14 @@ function Stepper() {
     state.rawMove = -10
 
     var ui = stepper.ui 
-    ui.addElement('rawButton', './ui/uiButton.js', onRawMove)
-    ui.rawButton.onload = function(){
-        ui.rawButton.setText('click to send test move')
-    }
+    ui.addElement('rawButton', 'ui/uiButton.js')
+    ui.rawButton.subscribe('onload', function(msg){
+        ui.rawButton.send({
+            calls: 'setText',
+            argument: 'click to send test move'
+        })
+    })
+    ui.rawButton.subscribe('onclick', onRawMove)
 
     state.lead = 0
     state.position = 0 // in steps 

modules/motion/planner.js

@@ -47,15 +47,23 @@ function Planner() {
 
     planner.ui = UI()
     var ui = planner.ui 
-    ui.addElement('resetButton', './ui/uiButton.js', onPlannerReset)
-    ui.resetButton.onload = function(){
-        ui.resetButton.setText('reset planner')
-    }
-
-    ui.addElement('startStopButton', './ui/uiButton.js', onStartStop)
-    ui.startStopButton.onload = function(){
-        ui.startStopButton.setText('start / stop planner')
-    }
+    ui.addElement('resetButton', 'ui/uiButton.js')
+    ui.resetButton.subscribe('onload', function(msg){
+        ui.resetButton.send({
+            calls: 'setText',
+            argument: 'reset planner'
+        })
+    })
+    ui.resetButton.subscribe('onclick', onPlannerReset)
+
+    ui.addElement('startStopButton', 'ui/uiButton.js')
+    ui.startStopButton.subscribe('onload', function(msg){
+        ui.startStopButton.send({
+            calls: 'setText',
+            argument: 'start / stop planner'
+        })
+    })
+    ui.startStopButton.subscribe('onclick', onStartStop)
 
     planner.inputs = {
         instruction: Input('move instruction', onNewInstruction),

modules/ui/button.js

@@ -25,10 +25,14 @@ function uiButton() {
 
     button.ui = UI() 
     var ui = button.ui 
-    ui.addElement('btn', './ui/uiButton.js', onButtonPress)
-    ui.btn.onload = function(){
-        ui.btn.setText('click!')
-    }
+    ui.addElement('btn', 'ui/uiButton.js')
+    ui.btn.subscribe('onload', function(msg){
+        ui.btn.send({
+            calls: 'setText',
+            argument: 'click!'
+        })
+    })
+    ui.btn.subscribe('onclick', onButtonPress)
 
     button.inputs = {
         thru: Input('any', onButtonPress) // makes anything into '1' event

modules/ui/multiline.js

@@ -6,13 +6,19 @@ let State = JSUnit.State
 
 // interface elements
 const JSUI = require('../../src/jsui.js')
-let UI = JSUI.UI 
+let UI = JSUI.UI
+
+/* WARN
+not refactored since UI API refactor
+*/
 
 const fs = require('fs')
 
 // a constructor, a fn, a javascript mess
 function MultiLineIn() {
 
+    console.log("WARNING - LOADING MULTILINE - not refactored since UI API refactor")
+
     var multilinein = {
         // descriptions are used in UI
         description: {
@@ -26,33 +32,61 @@ function MultiLineIn() {
     var state = multilinein.state
 
     multilinein.ui = UI()
-    var ui = multilinein.ui 
-    ui.addElement('thruButton', './ui/uiButton.js', lineThru)
-    ui.thruButton.onload = function(){
-        ui.thruButton.setText('click to advance line-by-line')
-    }
-
-    ui.addElement('previously', './ui/multiline.js', null)
-    ui.previously.onload = function(){
-        ui.previously.setContents('-')
-        ui.previously.setLabel('previously:')
-        ui.previously.setRows(15)
-    }
+    var ui = multilinein.ui
+    ui.addElement('thruButton', 'ui/uiButton.js')
+    ui.thruButton.subscribe('onload', function(msg) {
+        ui.thruButton.send({
+            calls: 'setText',
+            argument: 'click to advance line-by-line'
+        })
+    })
+    ui.thruButton.subscribe('onclick', lineThru)
+
+    ui.addElement('previously', './ui/multiline.js')
+    ui.previously.subscribe('onload', function(msg) {
+        ui.previously.send({
+            calls: 'setContents',
+            argument: '-'
+        })
+        ui.previously.send({
+            calls: 'setLabel',
+            argument: 'previously:'
+        })
+        ui.previously.send({
+            calls: 'setRows',
+            argument: 15
+        })
+    })
 
-    ui.addElement('justNow', './ui/multiline.js', null)
-    ui.justNow.onload = function(){
-        ui.justNow.setContents('-')
-        ui.justNow.setLabel('just now:')
-        ui.justNow.setRows(1)
-    }
+    ui.addElement('justNow', './ui/multiline.js')
+    ui.justNow.subscribe('onload', function(msg) {
+        ui.justNow.send({
+            calls: 'setContents',
+            argument: '-'
+        })
+        ui.justNow.send({
+            calls: 'setlabel',
+            argument: 'just now:'
+        })
+        ui.justNow.send({
+            calls: 'setRows',
+            argument: 1
+        })
+    })
 
-    ui.addElement('incoming', './ui/multiline.js', null)
-    ui.incoming.onload = function(){
+    ui.addElement('incoming', './ui/multiline.js')
+    ui.incoming.subscribe('onload', function(msg) {
         //ui.incoming.setContents('G0 F50 X10Y10Z10\nG0 X20Y20Z0\nG0 X0\nG0 Y10\nG0 F50 X10Y10Z10\nG0 X20Y20Z0\nG0 X0\nG0 Y10\nG0 F50 X10Y10Z10\nG0 X20Y20Z0\nG0 X0\nG0 Y10\nG0 F50 X10Y10Z10\nG0 X20Y20Z0\nG0 X0\nG0 Y10\n')
-        ui.incoming.setLabel('incoming:')
-        ui.incoming.setRows(50)
+        ui.incoming.send({
+            calls: 'setLabel',
+            argument: 'incoming:'
+        })
+        ui.incoming.send({
+            calls: 'setRows',
+            argument: 50
+        }) 
         onLoadFile('./files/dogbone.gcode')
-    }
+    })
 
     multilinein.inputs = {
         req: Input('number', onLineRequest),
@@ -68,7 +102,7 @@ function MultiLineIn() {
 
     function lineThru() {
         // get all as arrays with linebreak as delimiter 
-        
+
         var outBox = ui.previously.contents.split('\n')
         var box = ui.justNow.contents
         var inBox = ui.incoming.contents.split('\n')
@@ -88,8 +122,8 @@ function MultiLineIn() {
         }
     }
 
-    function checkContent(string){
-        if(typeof string == 'string'){
+    function checkContent(string) {
+        if (typeof string == 'string') {
             return string
         } else {
             return '-'
@@ -108,7 +142,10 @@ function MultiLineIn() {
             if (err) throw err;
             console.log('Loading:')
             console.log(data);
-            ui.incoming.setContents(data)
+            ui.incoming.send({
+                calls: 'setContents',
+                argument: data
+            })
         })
     }
 

modules/ui/robotCanvas.js

+// boilerplate atkapi header
+const JSUnit = require('../../src/jsunit.js')
+let Input = JSUnit.Input
+let Output = JSUnit.Output
+let State = JSUnit.State
+
+// interface elements
+const JSUI = require('../../src/jsui.js')
+let UI = JSUI.UI
+
+// a constructor, a fn, a javascript mess
+function RobotCanvas() {
+
+    var rbtCanvas = {
+        // descriptions are used in UI
+        description: {
+            name: 'ThreeJS-Canvas',
+            alt: 'graphix'
+        }
+    }
+
+    rbtCanvas.state = State()
+    // alias !
+    var state = rbtCanvas.state
+
+    rbtCanvas.inputs = {
+        xy1: Input('array', onNewXY1),
+        xy2: Input('array', onNewXY2),
+        // do some canvas stuff 
+    }
+
+    rbtCanvas.outputs = {
+        //log: Output('string')
+    }
+
+    rbtCanvas.ui = UI()
+    var ui = rbtCanvas.ui
+    ui.addElement('threeCanvas', 'ui/threeCanvas.js')
+    // add bonus lib path 
+    ui.threeCanvas.libPath = 'ui/libs/three.js'
+    ui.threeCanvas.subscribe('onload', function(msg){
+        console.log('catch canvas load', msg)
+    })
+
+    /*
+    ui.threeCanvas.onload = function() {
+        console.log('canvas is loaded')
+    }
+    */
+    
+    function onNewXY1(array) {
+        ui.threeCanvas.send({
+            calls: "updateXY1",
+            argument: [array[0], 0, array[1]]
+        })
+    }
+
+    function onNewXY2(array){
+        ui.threeCanavs.send({
+            calls: "updateXY2",
+            argument: [array[0], 0, array[1]]
+        })
+    }
+
+    return rbtCanvas
+}
+
+// exports 
+module.exports = RobotCanvas
\ No newline at end of file

modules/ui/stest.js

@@ -48,15 +48,18 @@ function STest() {
 	// other items for interaction are explicitly UI 
 	stest.ui = UI() 
 	var ui = stest.ui 
-	ui.addElement('btnex', './ui/uiButton.js', onButtonData)
-
-	ui.btnex.onload = function(){
+	ui.addElement('btnex', 'ui/uiButton.js')
+	ui.btnex.subscribe('onload', function(msg){
 		console.log('ok, yes, loaded')
-	}
+    })
+    ui.btnex.subscribe('onclick', onButtonData)
 
 	function onButtonData(evt){
 		console.log('on module callback', evt)
-		ui.btnex.setText('hello from ss')
+		ui.btnex.send({
+            calls: 'setText',
+            argument: 'hello from stest'
+        })
 	}
 
 	return stest

modules/ui/string.js

@@ -31,10 +31,14 @@ function uiString() {
 
     uistring.ui = UI() 
     var ui = uistring.ui 
-    ui.addElement('onNumberButton', './ui/uiButton.js', onStringDesire)
-    ui.onNumberButton.onload = function() {
-        ui.onNumberButton.setText('number out ->')
-    }
+    ui.addElement('onNumberButton', 'ui/uiButton.js')
+    ui.onNumberButton.subscribe('onload', function(msg){
+        ui.onNumberButton.send({
+            calls: 'setText',
+            argument: 'number out ->'
+        })
+    })
+    ui.onNumberButton.subscribe('onclick', onStringDesire)
 
     // inputs are required, and must be Input('type', callback) 
     uistring.inputs = {

modules/util/andgate.js

@@ -29,10 +29,14 @@ function AndFlowControl() {
 
     andGate.ui = UI() 
     var ui = andGate.ui 
-    ui.addElement('openButton', './ui/uiButton.js', onButtonPress)
-    ui.openButton.onload = function() {
-        ui.openButton.setText('open / close')
-    }
+    ui.addElement('openButton', 'ui/uiButton.js')
+    ui.openButton.subscribe('onload', function(msg){
+        ui.openButton.send({
+            calls: 'setText',
+            argument: 'open / close'
+        })
+    })
+    ui.openButton.subscribe('onclick', onButtonPress)
 
     andGate.inputs = {
         thru: Input('any', andGateKeeper) // makes anything into '1' event

modules/util/array.js

@@ -31,10 +31,14 @@ function UIArray() {
 
     uiArray.ui = UI() 
     var ui = uiArray.ui 
-    ui.addElement('onArrayButton', './ui/uiButton.js', onArrayDesire)
-    ui.onArrayButton.onload = function() {
-        ui.onArrayButton.setText('array out ->')
-    }
+    ui.addElement('onArrayButton', 'ui/uiButton.js')
+    ui.onArrayButton.subscribe('onload', function(msg){
+        ui.onArrayButton.send({
+            calls: 'setText',
+            argument: 'array out ->'
+        })
+    })
+    ui.onArrayButton.subscribe('onclick', onArrayDesire)
 
     // inputs are required, and must be Input('type', callback) 
     uiArray.inputs = {

modules/util/collector.js

@@ -42,10 +42,14 @@ function Collector() {
 
     collector.ui = UI() 
     var ui = collector.ui 
-    ui.addElement('onDumpButton', './ui/uiButton.js', onDumpDesire)
-    ui.onDumpButton.onload = function() {
-        ui.onDumpButton.setText('array out ->')
-    }
+    ui.addElement('onDumpButton', 'ui/uiButton.js')
+    ui.onDumpButton.subscribe('onload', function(msg){
+        ui.onDumpButton.send({
+            calls: 'setText',
+            argument: 'array out ->'
+        })
+    })
+    ui.onDumpButton.subscribe('onclick', onDumpDesire)
 
     // inputs are required, and must be Input('type', callback) 
     collector.inputs = {

modules/util/gate.js

@@ -27,10 +27,14 @@ function Gate() {
 
     gate.ui = UI()
     var ui = gate.ui
-    ui.addElement('openButton', './ui/uiButton.js', onButtonPress)
-    ui.openButton.onload = function() {
-        ui.openButton.setText('click to open gate')
-    }
+    ui.addElement('openButton', 'ui/uiButton.js')
+    ui.openButton.subscribe('onload', function(msg){
+        ui.openButton.send({
+            calls: 'setText',
+            argument: 'click to open gate'
+        })
+    })