Skip to content
GitLab
Commit 66387095 authored by Jake Read's avatar Jake Read
Browse files

thru hookup of states and event hooks

parent 327b496b
Hide whitespace changes
Inline Side-by-side
README.md
View file @ 66387095
......@@ -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
......
client/client.js
View file @ 66387095
......@@ -66,6 +66,8 @@ window.onload = function() {
}
// others
this.onerror = (err) => {
alert('link to server is broken')
location.reload()
console.log('socket error', err)
}
this.onclose = (evt) => {
......@@ -138,73 +140,6 @@ MISC ---------------------------------------------------
*/
// return ul element with name and alt and link?
// TODO: not properly a tree, see note @ reciprocal fn in views.js
function heapSendsModuleMenu(tree) {
var menuDom = document.createElement('div')
menuDom.id = 'moduleMenu'
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('put module', data)
wrapper.removeChild(document.getElementById('moduleMenu'))
})
ul.appendChild(li)
}
menuDom.appendChild(ul)
}
wrapper.append(menuDom)
function rmListener(evt) {
var findMenu = document.getElementById('moduleMenu')
if (findMenu !== null && findMenu.id == 'moduleMenu') {
wrapper.removeChild(findMenu)
}
evt.target.removeEventListener(evt.type, arguments.callee)
}
document.addEventListener('click', rmListener)
}
function heapSendsProgramMenu(tree) {
var menuDom = document.createElement('div')
menuDom.id = 'programMenu'
menuDom.style.left = lastPos.x + 'px'
menuDom.style.top = lastPos.y + 'px'
for(key in tree){
var li = document.createElement('li')
var path = tree[key].path
li.innerHTML = key.toString()
li.id = path
li.addEventListener('click', function(evt){
var data = this.id
socketSend('load program', data)
wrapper.removeChild(document.getElementById('programMenu'))
})
menuDom.appendChild(li)
}
wrapper.append(menuDom)
function rmListener(evt){
var findMenu = document.getElementById('programMenu')
if(findMenu !== null && findMenu.id == 'programMenu'){
wrapper.removeChild(findMenu)
}
// rm this listner...
evt.target.removeEventListener(evt.type, arguments.callee)
}
document.addEventListener('click', rmListener)
}
/*
......@@ -215,7 +150,6 @@ HEAP -> SERVER ---------------------------------------------------
// always a rep, tho
var program = {}
// re-writes the program, adds a description,
// and loads multiple representations of modules to the view
......@@ -248,112 +182,6 @@ function heapSendsNewModule(mdl) {
// and appends to the rep object a .ui object
// containing references to those DOM objects
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 heapSendsModuleChange(data){
console.log(data)
......@@ -383,7 +211,9 @@ function heapSendsModuleChange(data){
// update state from server to UI
function heapSendsStateChange(data) {
console.log('HEAP SENDS CHANGE STATE IN MODULE', data)
heapSendsModuleChange(data)
var rep = program.modules[data.id]
rep.state[data.key] = data.val
rep.ui.state[data.key].value = data.val
}
/*
......@@ -394,17 +224,12 @@ UI -> HEAP ---------------------------------------------------
// push new state from UI to server
function putState(rep, key) {
// ship it all home: not perfect, but hey
var data = {
description: {
id: rep.description.id
},
state: {
key: key,
val: rep.state[key]
}
id: rep.description.id,
key: key,
val: rep.state[key]
}
socketSend('put state', data)
socketSend('put state change', data)
}
// save ui position to server for reload
......@@ -419,12 +244,47 @@ function putUi(rep) {
}
}
socketSend('put ui', data)
socketSend('put ui change', data)
}
// input / output click handling
var clkState = false
var oClk = {}
var tmpBz = {}
function evtConnectHandler(clk) {
if (!clkState) {
// first click
oClk = clk
clkState = true
} else {
// second click
var tClk = clk
//console.log(oClk, tClk)
var x1 = parseInt(oClk.evt.target.offsetParent.style.left, 10) + oClk.evt.target.offsetLeft + oClk.evt.target.clientWidth
var y1 = parseInt(oClk.evt.target.offsetParent.style.top, 10) + oClk.evt.target.offsetTop + oClk.evt.target.clientHeight / 2
var x2 = parseInt(tClk.evt.target.offsetParent.style.left, 10) + tClk.evt.target.offsetLeft
var y2 = parseInt(tClk.evt.target.offsetParent.style.top, 10) + tClk.evt.target.offsetTop + tClk.evt.target.clientHeight / 2
//var bz = newBezier(x1, y1, x2, y2)
clkState = false
//console.log('connect', oClk.rep.description.id, oClk.name, 'to', tClk.rep.description.id, tClk.name)
var data = {
from: {
id: oClk.rep.description.id,
output: oClk.name
},
to: {
id: tClk.rep.description.id,
input: tClk.name
}
}
socketSend('put link change', data)
}
}
/*
UTILITIES? ---------------------------------------------------
UTILITIES ---------------------------------------------------
*/
......@@ -460,17 +320,6 @@ function redrawLinks() {
}
}
// need top level rep of program - nice to think of how to handle heirarchy later on? tl rep is internal rep ... is same ?
// how to handle movement of rep, incl. svg - goes with moving mouse after 1st click: svg lives 'in' rep ?
// trying to do this top level from the program config itself, will try sending jsonified modules[]
// consistency with saved formats, written formats, sent... json objs
var svgns = 'http://www.w3.org/2000/svg'
var svg = {}
/*
UI EVENTS ---------------------------------------------------------------------
......@@ -519,39 +368,70 @@ document.onkeydown = function(evt){
}
}
// input / output click hookups
// return ul element with name and alt and link?
// TODO: not properly a tree, see note @ reciprocal fn in views.js
function heapSendsModuleMenu(tree) {
var menuDom = document.createElement('div')
menuDom.id = 'moduleMenu'
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('put module', data)
wrapper.removeChild(document.getElementById('moduleMenu'))
})
ul.appendChild(li)
}
menuDom.appendChild(ul)
}
wrapper.append(menuDom)
var clkState = false
var oClk = {}
var tmpBz = {}
function rmListener(evt) {
var findMenu = document.getElementById('moduleMenu')
if (findMenu !== null && findMenu.id == 'moduleMenu') {
wrapper.removeChild(findMenu)
}
evt.target.removeEventListener(evt.type, arguments.callee)
}
// input / output click handling
function evtConnectHandler(clk) {
if (!clkState) {
// first click
oClk = clk
clkState = true
} else {
// second click
var tClk = clk
//console.log(oClk, tClk)
var x1 = parseInt(oClk.evt.target.offsetParent.style.left, 10) + oClk.evt.target.offsetLeft + oClk.evt.target.clientWidth
var y1 = parseInt(oClk.evt.target.offsetParent.style.top, 10) + oClk.evt.target.offsetTop + oClk.evt.target.clientHeight / 2
var x2 = parseInt(tClk.evt.target.offsetParent.style.left, 10) + tClk.evt.target.offsetLeft
var y2 = parseInt(tClk.evt.target.offsetParent.style.top, 10) + tClk.evt.target.offsetTop + tClk.evt.target.clientHeight / 2
//var bz = newBezier(x1, y1, x2, y2)
clkState = false
//console.log('connect', oClk.rep.description.id, oClk.name, 'to', tClk.rep.description.id, tClk.name)
var data = {
from: {
id: oClk.rep.description.id,
output: oClk.name
},
to: {
id: tClk.rep.description.id,
input: tClk.name
}
document.addEventListener('click', rmListener)
}
function heapSendsProgramMenu(tree) {
var menuDom = document.createElement('div')
menuDom.id = 'programMenu'
menuDom.style.left = lastPos.x + 'px'
menuDom.style.top = lastPos.y + 'px'
for(key in tree){
var li = document.createElement('li')
var path = tree[key].path
li.innerHTML = key.toString()
li.id = path
li.addEventListener('click', function(evt){
var data = this.id
socketSend('load program', data)
wrapper.removeChild(document.getElementById('programMenu'))
})
menuDom.appendChild(li)
}
wrapper.append(menuDom)
function rmListener(evt){
var findMenu = document.getElementById('programMenu')
if(findMenu !== null && findMenu.id == 'programMenu'){
wrapper.removeChild(findMenu)
}
socketSend('put link', data)
// rm this listner...
evt.target.removeEventListener(evt.type, arguments.callee)
}
}
\ No newline at end of file
document.addEventListener('click', rmListener)
}
client/divtools.js
View file @ 66387095
// 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