refactor most of everything server

README.md

@@ -2,10 +2,12 @@
 
 ## what it do
 
-javascript system for jake for building robot applications, 
+... now ...
+- refactor ui with setter
+- terminal serves terminal input line (client, css)
+- input lines comes thru to setter 
 
-.. rn: do terminal HTML? 
-.. then: consider model for node.js server, model-view-controller or w/e ?
+- hook in terminal ? output on output ... 
 
 ## remember
 

client/client.js

@@ -142,6 +142,8 @@ function addRep(rep) {
     uiElem.className = 'inside'
 
     // rolling through the json object 
+    // make UI objects, on change each fires new fn to push state of obj
+    // at server: how to do .onChange() ? 
     console.log(rep)
     for (key in rep.state) {
         console.log(key)

client/divtools.js

@@ -9,6 +9,4 @@ function DT() {
 			domElem: div
 		}
 	}
-
-	return this 
 }
\ No newline at end of file

lib/inout.js

 // event system to include type-checking etc
 
 function Input(type, fn){
-	this.accepts = type
-	this.calls = fn
-
-	this.fn = (data) => {
-		this.calls(data)
+	var input = {
+		accepts: type,
+		fn: fn
 	}
+
+	return input
 }
 
 function Output(type){
-	this.emits = type
-	this.calls = new Array()
+	var output = {
+		emits: type
+	}
+
+	output.calls = new Array()
 
-	this.attach = (input) => {
+	output.attach = function(input){
 		this.calls.push(input)
 	}
 
-	this.emit = (data) => {
-		// could typecheck here
+	output.emit = function(data){
 		if(this.calls.length == 0){
-			console.log('no events bound to this event: ', this.name)
+			console.log('no inputs bound to this output')
 		} else {
 			for(index in this.calls){
 				this.calls[index].fn(data)
 			}
 		}
 	}
+
+	return output
+}
+
+function UIElement(type, init, onChange){
+	var ui = {
+		accepts: type,
+		value: init,
+		onChange: onChange
+	}
+
+	ui.set = function(value){
+		this.value = value 
+		if(this.onChange != null){
+			this.onChange(value)
+		}
+	}
+
+	ui.get = () => {
+		return this.value
+	}
+
+	return ui
 }
 
 module.exports = {
 	Input: Input,
-	Output: Output
+	Output: Output,
+	UIElement: UIElement
 }
 
 /*

server.js

@@ -81,8 +81,8 @@ function socketRecv(evt) {
         case 'add module':
             addModule(data)
             break
-        case 'put state':
-            newState(data)
+        case 'put ui':
+            uiChange(data)
             break
         case 'put link':
             putLink(data)
@@ -110,28 +110,25 @@ var modules = new Array()
 var term = addModule('./src/ui/terminal.js')
 var gcode = addModule('./src/parsing/gcode.js')
 
-console.log('here setting term state txt to new txt')
-term.state.txt = "new txt"
-
-console.log('here setting term state text to new txt')
-term.state.text = "new text"
+term.outputs.lineOut.attach(gcode.inputs.lineIn)
 
-gcode.state.g0speed = 1255
+console.log('here setting term ui lineIn to new txt')
+term.ui.lineIn.set("new txt")
 
-term.outputs.lineOut.attach(gcode.inputs.lineIn)
+gcode.ui.g0speed.set(1255)
 
 // to add UI vars to prgmem / save them
 // typically, set in ui, saved in ui
 
-term.ui = {}
-term.ui.left = 10
-term.ui.top = 10
+term.rep = {}
+term.rep.left = 10
+term.rep.top = 10
 
-gcode.ui = {}
-gcode.ui.left = 200
-gcode.ui.top = 200
+gcode.rep = {}
+gcode.rep.left = 200
+gcode.rep.top = 200
 
-console.log('modules at prgmem start', modules)
+//console.log('modules at prgmem start', modules)
 
 function sendModules(){
     for (md in modules){
@@ -159,28 +156,6 @@ function addModule(path) {
 
         console.log('adding module', mod.description.name, 'id', mod.id)
 
-        // get and set skullduggery 
-        for (var item in mod.state) {
-            // turn into 'don't f with' property
-            mod.state['_' + item.toString()] = mod.state[item]
-            // add a setter to hit _ when this 
-            addSetGet(mod.state, item)
-            // Object.defineProperty(mod.state, item, {
-            //     set: function(x) {
-            //         console.log(this['_' + item])
-            //         console.log(place)
-            //     }
-            // })
-            /*
-            Object.defineProperty(mod.state, item, {
-                get: function() {
-                    console.log('getting', item)
-                    return this['_' + item]
-                }
-            })
-            */
-        }
-
         // now roll and return representable object 
         // first to UI
         socketSend('put rep', mod)
@@ -191,32 +166,33 @@ function addModule(path) {
     }
 }
 
-function addSetGet(obj, item){
-    Object.defineProperty(obj, item, {
-        set: function(x) {
-            this['_' + item] = x
-            console.log('SET', item, this['_' + item])
-        }
-    })
-    Object.defineProperty(obj, item, {
-        get: function() {
-            console.log('GET', item, this['_' + item])
-            return this['_' + item]
-        }
-    })
-}
+// function addSetGet(obj, item){
+//     Object.defineProperty(obj, item, {
+//         set: function(x) {
+//             this['_' + item] = x
+//             console.log('SET', item, this['_' + item])
+//         }
+//     })
+//     Object.defineProperty(obj, item, {
+//         get: function() {
+//             console.log('GET', item, this['_' + item])
+//             return this['_' + item]
+//         }
+//     })
+// }
 
-function newState(data) {
+function uiChange(data) {
     // of one module 
     // should just recv all state, walk tree for differences
-    var os = modules[data.id].state
-    var ns = data.state
+    var oldUi = modules[data.id].ui
+    var newUi = data.ui
     var id = data.id
     console.log(os)
     for (key in os) {
-        if (os[key] != ns[key]) {
-            os[key] = ns[key]
-            console.log(key, 'to ', ns[key], 'in', data.id)
+        if (oldUi[key] !== newUi[key]) {
+            oldUi[key] = newUi[key]
+            // should run through SET fn attached to state !
+            // console.log(key, 'to ', ns[key], 'in', data.id)
         }
     }
 }

src/parsing/gcode.js

@@ -2,6 +2,7 @@
 const InOut = require('../../lib/inout.js')
 let Input = InOut.Input
 let Output = InOut.Output
+let UIElement = InOut.UIElement
 
 function Gcode() {
     this.description = {
@@ -10,10 +11,10 @@ function Gcode() {
     }
 
     // state
-    this.state = {
-    	mode: 'G0',
-    	g0speed: 1200,
-        g1speed: 400
+    this.ui = {
+        mode: new UIElement('string', 'G0', null),
+    	g0speed: new UIElement('number', 1200, null),
+        g1speed: new UIElement('number', 400, null)
     }
 
     // local functions

src/ui/terminal.js

@@ -2,42 +2,40 @@
 const InOut = require('../../lib/inout.js')
 let Input = InOut.Input
 let Output = InOut.Output
+let UIElement = InOut.UIElement
 
 // a constructor, a fn, a javascript mess
 function Terminal() {
-    this.description = {
+
+    var terminal = {
+        description: {
             name: 'Terminal',
             alt: 'txt input'
+        },
+        ui: {
+            lineIn: UIElement('string', 'text input here', liChange)
+        },
+        inputs: {
+            lineIn: Input('string', newInput)
+        },
+        outputs: {
+            lineOut: Output('string')
         }
-
-    // object state
-    this.state = {
-        txt: 'ln',
-        text: 'line to out'
     }
 
-    // HERE: how to acces event on state change ? 
-    /*
-    this.state.text.onChange((evt) => {
-        // fn lik?
-    })
-    */
+    function liChange(value){
+        console.log('changed lineIn to', value)
+        newInput(value)
+    }
 
-    var post = (str) => {
+    function newInput(str){
         // uh wait how do we call this on state change?
         // update internal state of output
         console.log('terminal module outputting', str)
-        this.outputs.lineOut.emit(str)
+        terminal.outputs.lineOut.emit(str)
     }
 
-    // ins and outs
-    this.inputs = {
-        lineIn: new Input('string', post),
-    }
-
-    this.outputs = {
-        lineOut: new Output('string'),
-    }
+    return terminal
 }
 
 // exports