Commit 66387095 authored by Jake Read's avatar Jake Read

thru hookup of states and event hooks

parent 327b496b
......@@ -15,6 +15,16 @@ This project serves the developement environment / api we use to write and repre
## For MW
- top menu bar instructions
- rick click on menu bar to delete module
- upd8ts to modules:
- rename inout to jsunit
- buttons get onClick evt
- as you test, to track,
- weird state types solution: arrays, numbers, buttons, etc ?
- GIFS
- load a program
- drag around
......@@ -25,12 +35,6 @@ This project serves the developement environment / api we use to write and repre
- rm modules
- change settings
- right now
- push state down & up
- note below :
- not actually setting, do node main, change ms, watch console
- some wholistic test ...
- *don't forget*
- onload, load state...
- when hooking back to server, server.emitChange(key) ... from writeStateObject
......
This diff is collapsed.
// writing representations
function addRepToView(rep) {
// a div to locate it
var domElem = document.createElement('div')
// 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'
// more html: the title
var title = document.createElement('div')
title.className = 'modname'
title.innerHTML = rep.description.id
title.alt = rep.description.alt
domElem.appendChild(title)
var uiSetFlag
// place in pos if info present
// the rep.ui object will store references to the module's related DOM elements
if (rep.description.position != null) {
uiSetFlag = false
if (rep.description.position.left != null) {
domElem.style.left = rep.description.position.left + 'px'
}
if (rep.description.position.top != null) {
domElem.style.top = rep.description.position.top + 'px'
}
} else {
uiSetFlag = true
rep.description.position = {}
rep.description.position.left = lastPos.x
rep.description.position.top = lastPos.y
}
if(rep.ui == null){
rep.ui = {}
}
rep.ui.domElem = domElem
// WRITE UI STATE ELEMENTS
var stateElem = document.createElement('div')
stateElem.className = 'state'
rep.ui.state = {}
for (st in rep.state) {
var inputItem = writeStateRep(stateElem, rep, st)
rep.ui.state[st] = inputItem
}
// WRITE INPUTS
var inElem = document.createElement('div')
inElem.className = 'inputs'
rep.ui.inputs = {}
for (ip in rep.inputs) {
var li = writeEventRep(rep, 'input', ip)
inElem.appendChild(li)
rep.ui.inputs[ip] = li
}
// WRITE OUTPUTS
var outElem = document.createElement('div')
outElem.className = 'outputs'
rep.ui.outputs = {}
for (op in rep.outputs) {
var li = writeEventRep(rep, 'output', op)
outElem.appendChild(li)
rep.ui.outputs[op] = li
}
// APPEND TO CONTAINER
domElem.appendChild(inElem)
domElem.appendChild(outElem)
domElem.appendChild(stateElem)
var clearElem = document.createElement('div')
clearElem.className = 'clear'
domElem.appendChild(clearElem)
// MOVEABOUT CODE
title.onmousedown = function(evt) {
offsetX = evt.clientX - domElem.getBoundingClientRect().left
offsetY = evt.clientY - domElem.getBoundingClientRect().top
function domElemMouseMove(mv) {
domElem.style.left = mv.pageX - offsetX + 'px'
domElem.style.top = mv.pageY - offsetY + 'px'
redrawLinks()
}
document.addEventListener('mousemove', domElemMouseMove)
title.onmouseup = function() {
rep.description.position.left = parseInt(domElem.style.left, 10)
rep.description.position.top = parseInt(domElem.style.top, 10)
putUi(rep)
document.removeEventListener('mousemove', domElemMouseMove)
title.onmouseup = null
}
}
wrapper.appendChild(rep.ui.domElem)
if(uiSetFlag){
putUi(rep)
}
}
function writeEventRep(rep, type, key) {
var li = document.createElement('li')
li.innerHTML = key.toString()
li.id = rep.id + ' ' + type + ' ' + key
li.addEventListener('click', (evt) => {
var ipclk = {
rep: rep,
type: type,
name: key,
evt: evt
}
console.log('clicked', key)
evtConnectHandler(ipclk)
})
return li
}
function writeStateRep(container, rep, key) {
var variable = rep.state[key]
switch (variable.type) {
......@@ -8,12 +133,6 @@ function writeStateRep(container, rep, key) {
var li = document.createElement('li')
li.appendChild(document.createTextNode(variable.label))
li.addEventListener('click', function() {
// invert
if (rep.state[key].isPressed) {
rep.state[key].isPressed = false
} else {
rep.state[key].isPressed = true
}
putState(rep, key)
})
container.appendChild(li)
......@@ -58,7 +177,7 @@ function writeStateRep(container, rep, key) {
input.type = 'text'
input.size = 24
input.value = variable.toString()
input.addEventListener('change', function() {
input.addEventListener('change', function(evt) {
rep.state[key] = parseFloat(input.value)
putState(rep, key)
})
......@@ -92,25 +211,11 @@ function writeStateRep(container, rep, key) {
}
}
function writeEventRep(rep, type, key) {
var li = document.createElement('li')
li.innerHTML = key.toString()
li.id = rep.id + ' ' + type + ' ' + key
li.addEventListener('click', (evt) => {
var ipclk = {
rep: rep,
type: type,
name: key,
evt: evt
}
console.log('clicked', key)
evtConnectHandler(ipclk)
})
return li
}
// bezier utilities
var svgns = 'http://www.w3.org/2000/svg'
var svg = {}
function newBezier(x1, y1, x2, y2) {
var bz = {}
......
......@@ -66,7 +66,7 @@ function State() {
this.emitters[item]()
}
}
return state
}
......
......@@ -23,6 +23,7 @@ programs are assemblies of modules
*/
// business
const Reps = require('./reps.js')
const Programs = require('./programs.js')
......@@ -30,109 +31,11 @@ var program = {}
program = Programs.open('programs/default.json')
// UI
const View = require('./views.js')
View.startHttp()
View.startWs()
Programs.assignSocket(View.uiSocket)
View.assignProgram(program)
/*
PROGRAM REPRESENT
*/
/*
// update state from UI to server
function changeState(data) {
// of one module
// should just recv all state, walk tree for differences
var oldState = modules[data.id].state
var newState = data.state
// rep only holds proper key-values w/o emitters, _values etc
for (var key in newState) {
if (isStateKey(key)) {
if (oldState[key].isButton) {
if (oldState[key].isPressed != newState[key].isPressed) {
console.log('CHANGE BUTTON STATE', key, 'to', newState[key], 'in', data.id)
// this will trigger some 'onChange' f'ns
// that might change some state
oldState[key] = newState[key]
// to prevent quickly changing it back, we'll exit now (one state change from UI per trx)
return true
}
} else if (oldState[key].isMultiLine) {
if (oldState[key].value != newState[key].value) {
console.log('CHANGE MULTILINE STATE', key, 'to', newState[key].value, 'in', data.id)
oldState[key].value = newState[key].value
return true
}
} else if (oldState[key] !== newState[key]) {
console.log('CHANGE STATE', key, 'to', newState[key], 'in', data.id)
oldState[key] = newState[key]
return true
}
}
}
}
function changeUi(data) {
var mod = modules[data.id]
if (mod.ui == null) {
console.log("NO UI")
mod.ui = {}
}
mod.ui = data.ui
console.log('CHANGE UI', mod.id, mod.ui)
}
function setUiPos(module, left, top) {
if (module.ui == null) {
module.ui = {}
}
module.ui.left = left
module.ui.top = top
}
// push new state from server to UI
function putState(mod) {
// push just the state to the individual mod
// copy only the keys we want to see
var state = {}
for (var key in mod.state) {
if (isStateKey(key)) {
state[key] = mod.state[key]
}
}
var data = {
id: mod.id,
state: state
}
socketSend('change state', data)
}
function putLink(data) {
var fromModule = modules.find((module) => {
return module.id === data.from.id
})
var toModule = modules.find((module) => {
return module.id === data.to.id
})
if (fromModule.outputs[data.from.output].isLinked(toModule.inputs[data.to.input])) {
console.log("HOOKDOWN")
fromModule.outputs[data.from.output].remove(toModule.inputs[data.to.input])
} else {
fromModule.outputs[data.from.output].attach(toModule.inputs[data.to.input])
}
// replace it
changeRep(fromModule)
}
*/
// put
\ No newline at end of file
......@@ -72,7 +72,7 @@ function writeStateObject(mod, key) {
// when we change it within the module
// this.emitChange(key)
// push to external view
if(link){
if(socket){
pushState(mod, key)
}
}
......@@ -96,8 +96,12 @@ function assignSocket(sckt){
}
function pushState(mod, key){
console.log("GONNA PUSH IT OOOOOUT")
console.log('link', socket)
var data = {
id: mod.description.id,
key: key,
val: mod.state[key]
}
socket.send('put state change', data)
}
......
......@@ -21,6 +21,7 @@ function Delay() {
var state = delay.state
state.ms = 100
state.onChange('ms', onMsChange)
delay.inputs = {
thru: Input('any', onDelayBegin) // makes anything into '1' event
......@@ -30,6 +31,11 @@ function Delay() {
out: Output('any')
}
function onMsChange(){
console.log("noting state change", state.ms)
state.ms = 1200
}
function onDelayBegin(input){
setTimeout(function(){
delay.outputs.out.emit(input)
......
......@@ -15,13 +15,12 @@ function Gate() {
alt: 'in ... out'
}
}
gate.state = State()
// alias !
var state = gate.state
state.toggle = Button("Open / Close")
state.onChange('toggle', onButtonPress)
state.toggle = Button("Open / Close", onButtonPress)
// yikes
gate.isOpen = false
state.message = 'closed'
......@@ -35,6 +34,7 @@ function Gate() {
}
function onButtonPress(evt){
console.log("GATE BUTTON")
state.toggle.isPressed = false
if(gate.isOpen){
gate.isOpen = false
......
......@@ -99,14 +99,14 @@ function socketRecv(evt) {
case 'put module':
uiRequestNewModule(data)
break
case 'put state':
case 'put state change':
uiRequestStateChange(data)
break
case 'put link':
case 'put link change':
uiRequestLinkChange(data)
// id:output > id:input
break
case 'put ui':
case 'put ui change':
uiRequestUiChange(data)
break
default:
......@@ -226,36 +226,26 @@ function uiRequestNewModule(data) {
function uiRequestStateChange(data) {
console.log('UI REQUEST CHANGE STATE IN MODULE', data)
// there should only be one !
var id = data.description.id
var key = data.state.key
var val = data.state.val
var mdlState = program.modules[id].state
console.log('mdlState', mdlState)
var mdlStateItem = program.modules[id].state[key]
console.log('mdlStateItem', mdlStateItem)
if (mdlStateItem) {
switch (mdlState.type) {
var mdlState = program.modules[data.id].state
if (mdlState[data.key]) {
switch (mdlState[data.key].type) {
case 'button':
mdlStateItem.onClick()
mdlState[data.key].onClick()
break
case 'multiline':
mdlStateItem.value = val
mdlState.emitChange(key)
mdlState[data.key].value = data.val
mdlState.emitChange(data.key)
break
default:
mdlStateItem = val
mdlState.emitChange(key)
mdlState[data.key] = data.val
mdlState.emitChange(data.key)
break
}
} else {
console.log("ERR no state key,", key, "found here", data)
}
console.log('mdlStateItem', mdlStateItem)
console.log(program.modules[id])
}
function uiRequestLinkChange(data) {
......@@ -265,14 +255,17 @@ function uiRequestLinkChange(data) {
var toId = data.to.id
var inputName = data.to.input
// HERE: check if hooked already
var fromMdl = program.modules[fromId]
var toMdl = program.modules[toId]
fromMdl.outputs[outputName].attach(toMdl.inputs[inputName])
var nRep = Reps.makeFromModule(fromMdl)
// if it's already attached, we rm
if(fromMdl.outputs[outputName].isLinked(toMdl.inputs[inputName])){
fromMdl.outputs[outputName].remove(toMdl.inputs[inputName])
} else {
fromMdl.outputs[outputName].attach(toMdl.inputs[inputName])
}
var nRep = Reps.makeFromModule(fromMdl)
socketSend('put module change', nRep)
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment