Commit 9322f1a4 authored by Jake Read's avatar Jake Read

big UI elements refactor

parent d2101409
......@@ -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
......
......@@ -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) {
......
......@@ -97,7 +97,9 @@
var data = {
id: threeCanvas.parentId,
key: threeCanvas.key,
msg: 'onload'
msg: {
key: 'onload'
}
}
socketSend('put ui change', data)
}
......
......@@ -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)
}
......
......@@ -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),
......
......@@ -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)
......
......@@ -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
}
......
......@@ -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()
......
......@@ -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
......
......@@ -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),
......
......@@ -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
......
......@@ -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
})
})
}
......
// 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
......@@ -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
......
......@@ -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 = {
......
......@@ -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
......
......@@ -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 = {
......
......@@ -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 = {
......
......@@ -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'
})
})
ui.openButton.subscribe('onclick', onButtonPress)
// yikes
gate.isOpen = false
......
......@@ -28,13 +28,20 @@ function GateCounter() {
gateCounter.ui = UI()
var ui = gateCounter.ui
ui.addElement('openButton', './ui/uiButton.js', onButtonPress)
ui.openButton.onload = function() {
ui.openButton.setText('click to add ' + state.addThis.toString() + ' to count')
}
ui.addElement('openButton', 'ui/uiButton.js')
ui.openButton.subscribe('onload', function(msg){
ui.openButton.send({
calls: 'setText',
argument: 'click to add ' + state.addThis.toString() + ' to count'
})
})
ui.openButton.subscribe('onclick', onButtonPress)
state.onUiChange('addThis', function(){
ui.openButton.setText('click to add ' + state.addThis.toString() + ' to count')
ui.openButton.send({
calls: 'setText',
argument: 'click to add ' + state.addThis.toString() + ' to count'
})
})
// yikes
......
......@@ -31,10 +31,14 @@ function uiNum() {
uinum.ui = UI()
var ui = uinum.ui
ui.addElement('onNumberButton', './ui/uiButton.js', onNumberDesire)
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', onNumberDesire)
// inputs are required, and must be Input('type', callback)
uinum.inputs = {
......
......@@ -31,10 +31,14 @@ function ParallelContencator() {
parallelContencator.ui = UI()
var ui = parallelContencator.ui
ui.addElement('onOutputButton', './ui/uiButton.js', doThroughput)
ui.onOutputButton.onload = function() {
ui.onOutputButton.setText('array out ->')
}
ui.addElement('onOutputButton', 'ui/uiButton.js')
ui.onOutputButton.subscribe('onload', function(msg){
ui.onOutputButton.send({
calls: 'setText',
argument: 'array out ->'
})
})
ui.onOutputButton.subscribe('onclick', doThroughput)
// inputs are required, and must be Input('type', callback)
parallelContencator.inputs = {
......
......@@ -20,9 +20,9 @@
"inputs": {},
"outputs": {},
"state": {
"portName": "COM18",
"portStatus": "open",
"log": false
"portName": "---",
"portStatus": "closed",
"log": true
},
"ui": {
"kickButton": {
......@@ -81,8 +81,9 @@
"message": "no packet yet",
"route": "0,0",
"enc_cnt": 16384,
"enc_offset": 13500,
"enc_offset": 13390,
"enc_reverse": true,
"pc_r": 0,
"pc_t": 2048,
"pKp": 4.5,
"pKi": 0,
......@@ -106,8 +107,8 @@
"id": "atk-math-robot-joint-2",
"path": "./modules/hardware/atkmrobot.js",
"position": {
"left": 604,
"top": 492
"left": 596,
"top": 515
}
},
"inputs": {
......@@ -148,8 +149,9 @@
"message": "no packet yet",
"route": "0,1",
"enc_cnt": 16384,
"enc_offset": 1350,