diff --git a/client/client.js b/client/client.js
index 9a162f6841bcffd6af33b251d7e5165ee59fdcb0..e7fe1eeccc2fc34f5dddcdd07fb36c8417765674 100644
--- a/client/client.js
+++ b/client/client.js
@@ -105,13 +105,17 @@ function addRep(rep) {
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.description.name
+
+ // more html: the title
+ var title = document.createElement('div')
+ title.className = 'modname'
+ title.innerHTML = rep.description.name + ' id: ' + rep.id
title.alt = rep.description.alt
domElem.appendChild(title)
- // using datgui to write the interface
+ // using datgui to write the interface for state
+ var datElem = document.createElement('div')
+ datElem.className = 'inside'
var datui = new dat.GUI({ autoplace: false })
// rolling through the json object
for (key in rep.state) {
@@ -137,8 +141,41 @@ function addRep(rep) {
})
}
}
- // now we'll add this element to the module div
- domElem.appendChild(datui.domElement)
+ datElem.appendChild(datui.domElement)
+
+ // add the inputs and outputs
+ var inElem = document.createElement('div')
+ inElem.className = 'inputs'
+ for (ip in rep.inputs) {
+ var li = document.createElement('li')
+ li.innerHTML = ip.toString()
+ li.id = ip.toString()
+ li.addEventListener('click', function(evt) {
+ console.log('in clk')
+ })
+ inElem.appendChild(li)
+ }
+
+ var outElem = document.createElement('div')
+ outElem.className = 'outputs'
+ for (op in rep.outputs) {
+ var li = document.createElement('li')
+ li.innerHTML = op.toString()
+ li.id = op.toString()
+ li.addEventListener('click', function(evt) {
+ console.log('out clk')
+ })
+ outElem.appendChild(li)
+ }
+
+
+ // now we'll append our objects to the top level container
+ domElem.appendChild(inElem)
+ domElem.appendChild(outElem)
+ domElem.appendChild(datElem)
+ var clearElem = document.createElement('div')
+ clearElem.className = 'clear'
+ domElem.appendChild(clearElem)
// here's all of the code that handles moving these around
title.onmousedown = function(evt) {
@@ -167,7 +204,7 @@ function addRep(rep) {
document.body.append(rep.ui.domElem)
}
-function newState(rep){
+function newState(rep) {
var data = {
id: rep.id,
state: rep.state
diff --git a/client/style.css b/client/style.css
index c68b47c8429ce8cfb192bc7945406bf9ca8b2369..487e8730f7e21eb4be98005d45ac26c244244348 100644
--- a/client/style.css
+++ b/client/style.css
@@ -1,28 +1,71 @@
+body {
+ background-color: #d6d6d6;
+ font-family: Lucia Grande, sans-serif;
+ font-size: 11px;
+}
+
.block {
width: auto;
- padding: 10px;
- padding-bottom: 30px;
position: absolute;
- border-style: solid;
- border-width: 1px;
- font-family: Lucia Grande, sans-serif;
- font-size: 13px;
+ padding: 3px;
+ padding-bottom: 23px;
+ background-color: #303030;
+}
+
+.modname {
+ font-size: 13px;
+ padding-left:60px;
+ padding-top: 7px;
+ padding-bottom: 7px;
+ color: #eee;
}
-.block .input {
+.inputs {
+ width: 55px;
+ float: left;
+ padding-left: 5px;
font-size: 11px;
- background-color: #cccccc;
+ background-color: #1a1a1a;
+ color: #eee;
+}
+
+.inside {
+ padding: 0 63px 0 63px;
}
-.block .output {
+.dg.a {
+ margin-right: 0px;
+}
+
+.outputs {
+ width: 55px;
+ float: right;
+ padding-right: 5px;
+ text-align: right;
font-size: 11px;
- background-color: #cfcfcf;
+ background-color: #1a1a1a;
+ color: #eee;
+}
+
+.clear {
+ clear: both;
+}
+
+ul {
+ list-style-type: none;
+ color: #eee;
+ padding: 7px 0 7px;
+}
+
+li {
+ list-style-type: none;
+ color: #eee;
+ padding: 7px 0 7px;
}
#menu {
position: absolute;
- width: auto;
+ width: 245px;
padding: 10px;
- border-style: solid;
- border-width: 1px;
+ background-color: #303030;
}
diff --git a/lib/inout.js b/lib/inout.js
index 188b90c605a5574d96f114550603e626a90eb6bd..d8b48b1d8cd122d28cdf2f5d1924d4065a3cb5e4 100644
--- a/lib/inout.js
+++ b/lib/inout.js
@@ -1,8 +1,7 @@
// event system to include type-checking etc
-function Input(name, type, fn){
+function Input(type, fn){
this.accepts = type
- this.name = name
this.calls = fn
this.fn = (data) => {
@@ -10,9 +9,8 @@ function Input(name, type, fn){
}
}
-function Output(name, type){
+function Output(type){
this.emits = type
- this.name = name
this.calls = new Array()
this.attach = (input) => {
@@ -34,4 +32,41 @@ function Output(name, type){
module.exports = {
Input: Input,
Output: Output
-}
\ No newline at end of file
+}
+
+/*
+prjRep = {
+ connectivity: [
+ {id: 1, thisOutput: ['2:thisInput', '4:thatInput'], thatOutput: [etc]},
+ {id: 2, thatOutput: ['2:thisInput', '4:thatInput']}
+ ],
+ states: [
+ {id: 1, state: {
+ //
+ }}
+ },
+ positions: [
+ {id: 1, posX: 12, posY: 15}
+ ]
+}
+*/
+
+
+/*
+more like
+
+modules = [
+ Class {
+ state: object,
+ inputs: object,
+ outputs: object, // walk this for connectivity - how to set that up?
+ }
+]
+
+reps = [
+ object {
+ posX: num,
+ posY: num
+ }
+]
+*/
\ No newline at end of file
diff --git a/src/ui/terminal.js b/src/ui/terminal.js
index b59a9adf31bfbae0187e92f61e6cafd5b63b2877..956c925cb720a0a65d897e0ba3937cf623c7c4de 100644
--- a/src/ui/terminal.js
+++ b/src/ui/terminal.js
@@ -4,7 +4,7 @@ let Input = InOut.Input
let Output = InOut.Output
// bonus reqs
-const readline = require('readline')
+// const readline = require('readline')
// a constructor, a fn, a javascript mess
function Terminal() {
@@ -24,6 +24,7 @@ function Terminal() {
}
// natural inputs / local functions
+ /*
var rlInterface = readline.createInterface({
input: process.stdin,
output: process.stdout
@@ -32,6 +33,7 @@ function Terminal() {
rlInterface.on('line', (data) => {
this.outputs.lineOut.emit(data)
})
+ */
var post = (str) => {
console.log(str)
@@ -39,11 +41,13 @@ function Terminal() {
// ins and outs
this.inputs = {
- lineIn: new Input('string', post)
+ lineIn: new Input('string', post),
+ trigger: new Input('event', post)
}
this.outputs = {
- lineOut: new Output('string')
+ lineOut: new Output('string'),
+ trigger: new Output('event')
}
}