Skip to content
Snippets Groups Projects
Commit f6917db4 authored by Jake Read's avatar Jake Read
Browse files

add messy state update

parent fb89c595
Branches
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
client/client.js
+ 133
− 133
View file @ f6917db4
// client side js for atkapi reconf
// client globals
var reps = new Array()
var sckt = {}
var lastPos = {}
// client fns
function socketSend(type, data) {
var msg = {
type: type,
data: data
}
sckt.send(JSON.stringify(msg))
}
function socketRecv(evt) {
var recv = JSON.parse(evt.data)
var type = recv.type
var data = recv.data
// tree banger
switch (type) {
case 'console':
console.log('recv console:', data)
break
case 'put menu':
buildMenu(data)
break
case 'put new rep':
addRep(data)
break
default:
console.log('recv with non recognized type', recv)
break
}
}
// get json menu item and render
// and ask for module at /obj/key
oncontextmenu = function(evt) {
if (sckt) {
lastPos.X = evt.pageX
lastPos.Y = evt.pageY
var req = {
type: 'get menu',
data: ''
}
sckt.send(JSON.stringify(req))
} else {
// socket brkn
location.reload()
}
// prevents propogation to the os
return false
}
// return ul element with name and alt and link?
function buildMenu(tree) {
var menuDom = document.createElement('div')
menuDom.id = 'menu'
menuDom.style.left = lastPos.X + 'px'
menuDom.style.top = lastPos.Y + 'px'
for (key in tree) {
var ul = document.createElement('ul')
ul.innerHTML = key.toString()
for (subkey in tree[key]) {
var li = document.createElement('li')
var path = tree[key][subkey].path
li.innerHTML = subkey.toString()
li.id = path
li.addEventListener('click', function(evt) {
var data = this.id
socketSend('add module', data)
document.body.removeChild(document.getElementById('menu'))
})
ul.appendChild(li)
}
menuDom.appendChild(ul)
}
document.body.append(menuDom)
function rmListener(evt) {
var findMenu = document.getElementById('menu')
if (findMenu !== null && findMenu.id == 'menu') {
document.body.removeChild(findMenu)
}
}
document.addEventListener('click', rmListener)
}
function get(data) {
}
// write html from json representation
function loadModule(rep) {
function addRep(rep) {
// a div to locate it
var domElem = document.createElement('div')
domElem.className = 'block'
domElem.style.left = lastPos.X + 'px'
domElem.style.top = lastPos.Y + 'px'
// more html
var title = document.createElement('p')
title.innerHTML = rep.name
title.innerHTML = rep.description.name
title.alt = rep.description.alt
domElem.appendChild(title)
// using datgui to write the interface
......@@ -21,19 +122,26 @@ function loadModule(rep) {
if (typeof rep.state[key][twokey] == 'object' && rep.state[key][twokey] !== null) {
console.log('two layers of settings!')
} else {
fold.add(rep.state[key], twokey)
var newi = fold.add(rep.state[key], twokey)
newi.folder = key.toString()
newi.onFinishChange(function(value) {
newState(rep, this.folder, this.property, value)
})
}
}
fold.open()
} else {
datui.add(rep.state, key)
var newi = datui.add(rep.state, key)
newi.onFinishChange(function(value) {
newState(rep, null, this.property, value)
})
}
}
// now we'll add this element to the module div
domElem.appendChild(datui.domElement)
// here's all of the code that handles moving these around
domElem.onmousedown = function(evt) {
title.onmousedown = function(evt) {
offsetX = evt.clientX - domElem.getBoundingClientRect().left
offsetY = evt.clientY - domElem.getBoundingClientRect().top
......@@ -46,7 +154,7 @@ function loadModule(rep) {
domElem.onmouseup = function() {
document.removeEventListener('mousemove', domElemMouseMove)
domElem.onmouseup = null
title.onmouseup = null
}
}
......@@ -55,108 +163,27 @@ function loadModule(rep) {
rep.ui.dat = datui
rep.ui.domElem = domElem
return rep
}
// return ul element with name and alt and link?
function buildMenu(tree, screenTarget) {
var menuDom = document.createElement('div')
menuDom.id = 'menu'
menuDom.style.left = screenTarget.X + 'px'
menuDom.style.top = screenTarget.Y + 'px'
for (key in tree) {
var ul = document.createElement('ul')
ul.innerHTML = key.toString()
for (subkey in tree[key]) {
var a = document.createElement('a')
a.innerHTML = subkey.toString()
a.addEventListener('click', function(evt) {
var path = tree[key][subkey].path
console.log('sending req for module', path)
var data = {
target: 'new module',
path: path,
screenTarget: screenTarget
}
socketSend('get', data)
document.body.removeChild(document.getElementById('menu'))
})
var li = document.createElement('li')
li.appendChild(a)
ul.appendChild(li)
}
menuDom.appendChild(ul)
}
document.body.append(menuDom)
function rmListener(evt) {
var findMenu = document.getElementById('menu')
if (findMenu !== null && findMenu.id == 'menu') {
document.body.removeChild(findMenu)
}
}
document.addEventListener('click', rmListener)
reps.push(rep)
document.body.append(rep.ui.domElem)
}
// get json menu item and render
// and ask for module at /obj/key
oncontextmenu = function(evt) {
var req = {
type: 'get menu',
data: {
screenTarget: {
X: evt.pageX,
Y: evt.pageY
}
}
}
sckt.send(JSON.stringify(req))
// prevents propogation to the os
return false
}
// client globals
var modules = new Array()
var sckt = {}
// client fns
function socketSend(type, data) {
var msg = {
type: type,
data: data
}
sckt.send(JSON.stringify(msg))
function newState(rep, folder, property, value){
// better if we do this with an update event? can add event watchers to each state, fired by change?
// write brief json for state change
// yep, fire all state and write tree scrubber on other side
var newState = {}
if(folder){
newState[folder] = {}
newState[folder][property] = value
} else {
newState[property] = value
}
function socketRecv(evt) {
var recv = JSON.parse(evt.data)
var type = recv.type
var data = recv.data
// tree banger
switch (type) {
case 'console':
console.log('recv console:', data)
break
case 'get':
get(data)
break
case 'put':
put(data)
break
case 'put menu':
console.log(data)
buildMenu(data.tree, data.screenTarget)
break
default:
console.log('recv with non recognized type', recv)
break
var data = {
id: rep.id,
newState: newState
}
socketSend('put state', data)
console.log('pushing new state for ', folder, property)
}
// init & hookup
......@@ -183,36 +210,9 @@ window.onload = function() {
sckt = null
}
}
modules.push(loadModule(gcodeDummy))
modules.push(loadModule(terminalDummy))
for (index in modules) {
document.body.append(modules[index].ui.domElem)
}
}
/*
to prototype
write example, has one state, a text box. load, connect, on event goes down thru and back up
*/
/* a few things
/ using
- get a list of available modules
- request a new module to be added to the program
- push state / get state (of individual module)
- get state (on load, of existing modules)
- save state to json
- load state from json
/ dev
- rewrite module file at / and reload all instances
- (how to catch errors in runtime?)
- reload all instances of module at /
- write new defaults into / (same as edit file, don't ambiguate)
- add inputs and outputs
- ui for link inputs and outputs
*/
\ No newline at end of file
server.js
+ 73
− 54
View file @ f6917db4
......@@ -19,10 +19,29 @@ app.get('/:file', (req, res) => {
res.sendFile(__dirname + '/client/' + req.params.file)
})
// and listening for requests here
const wss = new WebSocket.Server({ port: 8081 })
wss.on('connection', (ws) => {
sckt = ws
socketSend('console', 'hello client')
console.log('socket open on 8081')
ws.on('message', (evt) => {
socketRecv(evt)
})
})
// through this window
http.listen(8080, () => {
console.log('listening on 8080 for static files')
})
// server globals
var sckt = {}
var modules = new Array()
function socketSend(type, data) {
var msg = {
type: type,
......@@ -40,19 +59,21 @@ function socketRecv(evt){
case 'console':
console.log('recv console:', data)
break
case 'get':
get(data)
break
case 'put':
put(data)
break
case 'get menu':
var tree = buildMenu()
var msg = {
tree: tree,
screenTarget: data.screenTarget
}
socketSend('put menu', msg)
socketSend('put menu', tree)
break
case 'add module':
addModule(data)
break
case 'put state':
newState(data)
break
case 'put link':
// id:output > id:input
break
case 'rm link':
// id:output > id:input
break
default:
console.log('server recv with non recognized type', recv)
......@@ -60,22 +81,39 @@ function socketRecv(evt){
}
}
function get(data){
switch(data.target){
case 'new module':
console.log('getting module at path', data.path)
if(fs.existsSync(data.path)){
console.log('module found at', data.path)
var mod = require(data.path)
console.log(mod)
function addModule(path) {
// get and add to server system
if (fs.existsSync(path)) {
var src = require(path) // get and return
var mod = new src()
modules.push(mod)
mod.id = modules.length - 1
console.log('adding module', modules[modules.length - 1])
// mod.inputs.lineIn.fn('log')
// now roll and return representable object
socketSend('put new rep', mod)
} else {
console.log('no module found at', data.path)
console.log('no module found at', path)
}
break
default:
console.log('get req with no recognized type', data)
}
function newState(data) {
// should just recv all state, walk tree for differences
console.log(modules[data.id])
var newState = data.newState
var id = data.id
for (key in newState) {
if (typeof newState[key] == 'object' && newState[key] !== null) {
for (subkey in newState[key]) {
modules[id].state[key][subkey] = newState[key][subkey]
}
} else {
modules[id].state[key] = newState[key]
}
}
console.log(modules[id])
}
function put(data) {
switch (data.target) {
......@@ -88,25 +126,6 @@ function put(data){
}
}
// and listening for requests here
const wss = new WebSocket.Server({port: 8081})
wss.on('connection', (ws) => {
sckt = ws
socketSend('console', 'hello client')
console.log('socket open')
ws.on('message', (evt) => {
socketRecv(evt)
})
})
// through this window
http.listen(8080, () => {
console.log('listening on 8080')
})
function buildMenu() {
var tree = {}
var dir = fs.readdirSync('./src')
......
src/ui/terminal.js
+ 38
− 31
View file @ f6917db4
......@@ -8,11 +8,18 @@ const readline = require('readline')
// a constructor, a fn, a javascript mess
function Terminal() {
this.description = {
name: 'Terminal',
alt: 'txt input'
}
// object state
this.state = {
inputSize: {
width: 64,
height: 48,
height: 48
},
width: 12,
text: 'one line'
}
......@@ -32,11 +39,11 @@ function Terminal(){
// ins and outs
this.inputs = {
lineIn: new Input('line input', 'string', post)
lineIn: new Input('string', post)
}
this.outputs = {
lineOut: new Output('line output', 'string')
lineOut: new Output('string')
}
}
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment