diff --git a/01_Code/physical_computing_interface/app.js b/01_Code/physical_computing_interface/app.js index d63db67c2e3886fe557f670bed1804fccdca53c6..2ec7b8f1a32abc164d2e51f86f930a091976ccd7 100644 --- a/01_Code/physical_computing_interface/app.js +++ b/01_Code/physical_computing_interface/app.js @@ -10,11 +10,6 @@ var GLOBALS=new globals(utils); var three=new threejs(GLOBALS,utils,'webgl','threejs1'); three.init(); -var slider = document.getElementById("time"); - -slider.oninput = function() { - replay(this.value); -}; initGraph();// todo enclose into class initEditor();// todo enclose into class diff --git a/01_Code/physical_computing_interface/assembly/replay.js b/01_Code/physical_computing_interface/assembly/replay.js index bc1732c4975b54492bbef0d884c5d318477ba067..90288135369533e856f78f63e4b4a7861d46f872 100644 --- a/01_Code/physical_computing_interface/assembly/replay.js +++ b/01_Code/physical_computing_interface/assembly/replay.js @@ -5,6 +5,12 @@ // var timeStepOccupancy=[]; // timeStepOccupancy.push([occupancy.slice()]); +var slider = document.getElementById("time"); + +slider.oninput = function() { + replay(this.value); +}; + //////////////////////// document.addEventListener('addNode', function (e) { diff --git a/01_Code/physical_computing_interface/globals.js b/01_Code/physical_computing_interface/globals.js index 95bec39a4440f9369ee1acee062e078cd625f5cc..e6e72541672e70b9be9b4e2ba7874ff4ac49be17 100644 --- a/01_Code/physical_computing_interface/globals.js +++ b/01_Code/physical_computing_interface/globals.js @@ -285,6 +285,45 @@ globals.prototype.removeNode=function (x,y,z,replay=false){ document.dispatchEvent(removeNodeEvent); }; +globals.prototype.updateNode=function (data){ + var updateNodeEvent = new CustomEvent('updateNode', { + detail: + { + id: data.id, + name: data.name, + parent: data.parent, + code: data.code, + state:data.state, + neighbors:data.neighbors, + inputs:data.inputs, + outputs:data.outputs, + } + }); + document.dispatchEvent(updateNodeEvent); +}; + +globals.prototype.runNode=function (x,y,z){ + x=parseInt(x); + y=parseInt(y); + z=parseInt(z); + [p_x ,p_y ,p_z ,s_x ,s_y,s_z,r_y]=this.utils.getTransforms(this.grid,x, y,z); + var runNodeEvent = new CustomEvent('runNode', { + detail: + { + x:x, + y:y, + z:z, + id:'[' +x +"," +y+","+z+']', + posX:p_x, + posY:p_y, + posZ:p_z, + rotY:r_y, + replay:replay + } + }); + document.dispatchEvent(runNodeEvent); +}; + globals.prototype.adjustTimeStep=function (addRemove,x,y,z){ var adjustTimeStepEvent = new CustomEvent('adjustTimeStep', { detail: diff --git a/01_Code/physical_computing_interface/graph/graph.js b/01_Code/physical_computing_interface/graph/graph.js index 84f6bf915e5cb7d3ad324dbc99d0b34ceb1ea0c1..e77185dff6c3dc085fa066daff9c3fa4665381d8 100644 --- a/01_Code/physical_computing_interface/graph/graph.js +++ b/01_Code/physical_computing_interface/graph/graph.js @@ -38,6 +38,7 @@ function initGraph(){ 'background-color': color3, 'content': 'data(name)', // 'text-valign': 'center', + "text-wrap": "wrap", 'color': color6, 'font-family':font, "font-size": 10 @@ -94,87 +95,18 @@ function initGraph(){ elements: { nodes: [ - // { - // data: { id: 'cy', name: 'DICE' } - // }, - - // { - // data: { id: 'core', name: 'Core', parent: 'api' }, - // position: { x: 0, y: 0 } - // }, - - // { - // data: { id: 'eles', name: 'Collection', parent: 'api' }, - // position: { x: 150, y: 150 } - // }, - - // { - // data: { id: 'style', name: 'Stylesheet', parent: 'api' }, - // position: { x: 0, y: 150 } - // }, - - // { - // data: { id: 'selector', name: 'Selector', parent: 'api' }, - // position: { x: -150, y: 150 } - // }, - - // { - // data: { id: 'ext', name: 'Extensions', parent: 'cy' } - // }, - - // { - // data: { id: 'corefn', name: 'Core Function', parent: 'ext' }, - // classes: 'ext', - // position: { x: 350, y: -140 } - // }, - - // { - // data: { id: 'elesfn', name: 'Collection Function', parent: 'ext' }, - // classes: 'ext', - // position: { x: 350, y: 0 } - // }, - - // { - // data: { id: 'layout', name: 'Layout', parent: 'ext' }, - // classes: 'ext', - // position: { x: 350, y: 140 } - // }, - - // { - // data: { id: 'renderer', name: 'Renderer', parent: 'ext' }, - // classes: 'ext', - // position: { x: 350, y: 280 } - // }, - - // { - // data: { id: 'api', name: 'Core API', parent: 'cy' } - // }, - - // { - // data: { id: 'app', name: 'Client' }, - // position: { x: 0, y: 480 } - // } ], edges: [ - // { data: { source: 'core', target: 'eles' } }, - // { data: { source: 'core', target: 'ext' } }, - // { data: { source: 'core', target: 'style' } }, - // { data: { source: 'style', target: 'selector' } }, - // { data: { source: 'core', target: 'selector' } }, - // { data: { source: 'elesfn', target: 'eles' }, classes: 'ext' }, - // { data: { source: 'corefn', target: 'core' }, classes: 'ext' }, - // { data: { source: 'layout', target: 'api' }, classes: 'ext' }, - // { data: { source: 'renderer', target: 'api' }, classes: 'ext' }, - // { data: { source: 'app', target: 'api', name: 'use' }, classes: 'app' }, - // { data: { source: 'app', target: 'ext', name: 'register' }, classes: 'app' } - ] + ] }, }); + var api = cy.expandCollapse('get'); ////////////////////////// + //nodes cy.cxtmenu({ selector: 'node',//'node, edge', menuRadius: 50, @@ -194,16 +126,23 @@ function initGraph(){ commands: [ { + //play //TODO change to event content: '<span class="fa fa-play fa-1x"></span>', select: function(ele){ - console.log( ele.id() ); + // console.log( ele._private.data.data.code); + // console.log( eval(ele._private.data.data.code)); + // runNode(ele); + var pos=utils.getXYZfromName(ele.data('id')); + GLOBALS.selectNode(pos.x,pos.y,pos.z); + GLOBALS.runNode(pos.x,pos.y,pos.z); + } }, - { + { //todo remove clutter and put into function content: '<span class="fa fa-trash fa-1x"></span>', select: function(ele){ - console.log( ele.data('name') ); + // console.log( ele.data('name') ); var tgt = ele; // console.log(tgt._private.data.id); var pos=utils.getXYZfromName(tgt._private.data.id); @@ -221,15 +160,15 @@ function initGraph(){ // content: 'Select', content: '<span class="fa fa-mouse-pointer fa-1x"></span>', select: function(ele){ - console.log( ele.id()); - // var nodes = this; - // ele.trigger('tap');//TODO FIX SELECT + var pos=utils.getXYZfromName(ele.data('id')); + GLOBALS.selectNode(pos.x,pos.y,pos.z); } } ] }); + //expand and collapse cy.cxtmenu({ selector: 'core', menuRadius: 50, @@ -252,7 +191,6 @@ function initGraph(){ { content: '<span class="fa fa-expand-arrows-alt fa-1.5x"></span>', select: function(){ - // console.log( 'bg1' ); api.expandAll(); } }, @@ -304,15 +242,17 @@ function initGraph(){ //TODO: HIGHLIGHT NODE IN THREEJS cy.on('tap', 'node', function(){ // var nodes = this; - GLOBALS.selectedjson=this._private.data.data; - - var pos=utils.getXYZfromName(this._private.data.id); + // GLOBALS.selectedjson=this._private.data.data; + var pos=utils.getXYZfromName(this.data('id')); GLOBALS.selectNode(pos.x,pos.y,pos.z); - this.trigger('blaa'); + // this.trigger('blaa'); }); document.addEventListener('selectNode', function (e) { + var tgt=cy.$id(e.detail.id); + cy.nodes().unselect();//unselect the rest + tgt.select(); GLOBALS.selectedjson=tgt._private.data.data; var neigh=tgt.neighborhood(function( ele ){ return ele.isNode(); @@ -320,7 +260,7 @@ function initGraph(){ neigh=tgt.connectedEdges(); // console.log(tgt.edgesTo()); for(var i=0;i<neigh.length;i++){ - console.log(neigh[i].id()); + // console.log(neigh[i].id()); } @@ -331,19 +271,19 @@ function initGraph(){ //TODO: FIX cy.on('tap', 'edge', function(){ var nodes = this; + var pos=utils.getXYZfromName(this.data('id')); GLOBALS.selectNode(); GLOBALS.selectedjson=this._private.data; }); - //TODO: fix add node to random location threejs cy.on('tap', function( evt ){ var tgt = evt.target || evt.cyTarget; // 3.x || 2.x if( tgt === cy ){ - console.log( evt.position.x+" "+evt.position.y); + // console.log( evt.position.x+" "+evt.position.y); cy.add({ classes: 'automove-viewport', data: { @@ -369,13 +309,14 @@ function initGraph(){ // data: { id: 'new' + Math.round( Math.random() * 100 ) }, data: { id: e.detail.id, - name: 0, + name: '[' +e.detail.x +"," +e.detail.y+']\n'+0, parent: ''+e.detail.z, data:{ id: e.detail.id, name: '[' +e.detail.x +"," +e.detail.y+']', parent: ''+e.detail.z, - code: "sum(x+y/2)", + code: "2*2*5", + state:0, neighbors:[], inputs:[], outputs:[], @@ -469,42 +410,40 @@ function initGraph(){ //////// - var api = cy.expandCollapse('get'); - var elements = null; - - // document.getElementById("collapseRecursively").addEventListener("click", function () { - // api.collapseRecursively(cy.$(":selected")); - // }); - - // document.getElementById("expandRecursively").addEventListener("click", function () { - // api.expandRecursively(cy.$(":selected")); - // }); - - // document.getElementById("expandAllAndRemove").addEventListener("click", function () { - // api.expandAll(); - // elements = cy.elements().remove(); - // }); - - // document.getElementById("loadInCollapsedState").addEventListener("click", function () { - // if (elements){ - // cy.add(elements); - // api.collapseAll(); - // elements = null; - // } - // else{ - // console.warn("Remove elements first by clicking on 'Expand all and remove' button."); - // } - // }); - - // document.getElementById("collapseAll").addEventListener("click", function () { - // api.collapseAll(); - // }); - - // document.getElementById("expandAll").addEventListener("click", function () { - // api.expandAll(); - // }); - - // }); + //////////UPDATE NODE JSON AND RUN + + document.addEventListener('updateNode', function (e) { + var tgt=cy.$id(e.detail.id); + var data=e.detail; + tgt.data('data',data); + + runNode(tgt); //todo: call event instead?? + + }, false); + + ////////RUN NODE + document.addEventListener('runNode', function (e) { + var tgt=cy.$id(e.detail.id); + runNode(tgt); //local run node //TODO CHANGE ADD CLOSURE + + }, false); + + function runNode(node){ + // node.data('state',eval(node._private.data.data.code)) + node._private.data.data.state=eval(node._private.data.data.code); + updateName(node); + + + //select + GLOBALS.selectedjson=node.data('data'); + var pos=utils.getXYZfromName(node.data('id')); + GLOBALS.selectNode(pos.x,pos.y,pos.z); + } + + function updateName(node){ + node.data('name', node._private.data.data.name+'\n'+node._private.data.data.state); + // node._private.data.name= node._private.data.data.name+'\n'+node._private.data.data.state; + } ////////try custom events//// cy.on('blaa', 'node', function(evt) { diff --git a/01_Code/physical_computing_interface/index.html b/01_Code/physical_computing_interface/index.html index 4d1aafa0fbdefa10de6924088a716fed7e4c2a3f..dd8ba46a0af72ba0b83a7b40a4b011464110fd2f 100644 --- a/01_Code/physical_computing_interface/index.html +++ b/01_Code/physical_computing_interface/index.html @@ -62,10 +62,11 @@ <div id=jsondiveditor> - <p> + <br></br> + <!-- <p> <button class="button" id="setJSON">Get Info</button> <button class="button" id="getJSON">Set Info</button> - </p> + </p> --> <div id="jsoneditor"></div> </div> diff --git a/01_Code/physical_computing_interface/json/json.js b/01_Code/physical_computing_interface/json/json.js index fbffac210868fbfb79a37e7d9f444ddf5a28b968..cb31dcd6c3e3a9306f8d013cf3f081a5ead7fbf1 100644 --- a/01_Code/physical_computing_interface/json/json.js +++ b/01_Code/physical_computing_interface/json/json.js @@ -1,31 +1,53 @@ function initEditor(){ // create the editor - const container = document.getElementById('jsoneditor'); - const options = {}; - const editor = new JSONEditor(container, options); - - // set json - document.getElementById('setJSON').onclick = function () { - const json = { - 'array': [1, 2, 3], - 'boolean': true, - 'color': '#82b92c', - 'null': null, - 'number': 123, - 'object': {'a': 'b', 'c': 'd'}, - 'string': 'Hello World' - }; - editor.set(GLOBALS.selectedjson); + var container = document.getElementById('jsoneditor'); + var options = { + onChangeText: function (jsonString) { + // console.log(jsonString); + // const json = editor.get(); + var json=JSON.parse(jsonString); + GLOBALS.updateNode(json); + } }; + var editor = new JSONEditor(container, options); + + // set json //get info + // document.getElementById('setJSON').onclick = function () { + // const json = { + // 'array': [1, 2, 3], + // 'boolean': true, + // 'color': '#82b92c', + // 'null': null, + // 'number': 123, + // 'object': {'a': 'b', 'c': 'd'}, + // 'string': 'Hello World' + // }; + // editor.set(GLOBALS.selectedjson); + // }; + document.addEventListener('selectNode', function (e) { editor.set(GLOBALS.selectedjson); }, false); - // get json - document.getElementById('getJSON').onclick = function () { - const json = editor.get(); - alert(JSON.stringify(json, null, 2)); - }; + // get json //set info + // document.getElementById('getJSON').onclick = function () { + // var json = editor.get(); + // // alert(JSON.stringify(json, null, 2)); + // GLOBALS.updateNode(json); + // }; + + // editor.on('onChangeJson',function() { + // console.log("hiii"); + // }); + + // editor.onChangeJson= function(json){ + // // console.log(json); + // console.log("hiii"); + // }; + + // document.addEventListener('onChangeJson', function (e) { + // console.log("hissssii"); + // }, false); } diff --git a/01_Code/physical_computing_interface/threejs/grid.js b/01_Code/physical_computing_interface/threejs/grid.js index 7e8689417efba7748953dddc143ee5563dc28df3..919a23211bf6027bccb612850ceec4737b2ce979 100644 --- a/01_Code/physical_computing_interface/threejs/grid.js +++ b/01_Code/physical_computing_interface/threejs/grid.js @@ -31,7 +31,9 @@ function threejs(GLOBALS,utils,containerName,container1Name){ this.occupancy=GLOBALS.occupancy; this.selectedNodeID; this.menu; + this.highlight; + //TODO: REMOVE FROM HERE TO GLOBALS var color1= "#ffffff"; //white var color11= "#ffffff8c"; //white transparent var color2= "#020227"; //dark blue @@ -80,15 +82,18 @@ function threejs(GLOBALS,utils,containerName,container1Name){ // atMouse: false // draw menu at mouse position commands: [ { + //RUN/PLAY NODE content: '<span class="fa fa-play fa-1x"></span>', select: function(){ - console.log( "play");//todo move to globals + // console.log( "play");//todo move to globals + GLOBALS.runNode(three.selectedNodeID.x,three.selectedNodeID.y,three.selectedNodeID.z); } }, { content: '<span class="fa fa-trash fa-1x"></span>', select: function(){ + GLOBALS.selectNode(three.selectedNodeID.x,three.selectedNodeID.y,three.selectedNodeID.z); GLOBALS.removeNode(three.selectedNodeID.x,three.selectedNodeID.y,three.selectedNodeID.z); }, @@ -99,7 +104,9 @@ function threejs(GLOBALS,utils,containerName,container1Name){ // content: 'Select', content: '<span class="fa fa-mouse-pointer fa-1x"></span>', select: function(){ - console.log( "Select");//todo move to globals + // console.log( "Select");//todo move to globals + GLOBALS.selectNode(three.selectedNodeID.x,three.selectedNodeID.y,three.selectedNodeID.z); + } } ] @@ -117,6 +124,8 @@ threejs.prototype.init=function() { this.scene.background = new THREE.Color( 0xffffff ); this.cubeGeo = new THREE.BoxBufferGeometry( this.voxelSpacing, this.voxelSpacing, this.voxelSpacing ); + + this.sphereGeo = new THREE.SphereGeometry( this.voxelSpacing/2, 32, 32 ); this.cubeMaterial = new THREE.MeshPhongMaterial( { color: 0x1c5c61 } ); @@ -140,6 +149,12 @@ threejs.prototype.init=function() { this.rollOverMesh.scale.x=this.grid.voxelScaleX; this.rollOverMesh.scale.z=this.grid.voxelScaleY; this.rollOverMesh.scale.y=this.grid.voxelScaleZ; + var edges = new THREE.EdgesGeometry( rollOverGeo ); + this.highlight = new THREE.LineSegments( edges, new THREE.LineBasicMaterial( { color: this.color4,linewidth: 4} ) ); + this.highlight.scale.x=this.grid.voxelScaleX*1.1; + this.highlight.scale.z=this.grid.voxelScaleY*1.1; + this.highlight.scale.y=this.grid.voxelScaleZ*1.1; + this.scene.add(this.highlight); this.scene.add( this.rollOverMesh ); this.raycaster = new THREE.Raycaster(); @@ -460,6 +475,22 @@ function onDocumentMouseDownThree( event ) { var obj=utils.getXYZfromName(intersect.object.name); three.selectedNodeID=obj; three.menu=three.cy.cxtmenu( three.cxtdefaults ); + + + [p_x ,p_y ,p_z ,s_x ,s_y,s_z,r_y]=utils.getTransforms(three.grid,obj.x, obj.y,obj.z); + + + three.highlight.name="h["+parseInt(obj.x) +","+parseInt(obj.y) +","+parseInt(obj.z) +"]"; + three.highlight.position.x=0; + three.highlight.position.y=0; + three.highlight.position.z=0; + + three.highlight.rotation.y=r_y; + + + three.highlight.position.x=p_x; + three.highlight.position.y=p_y; + three.highlight.position.z=p_z; @@ -484,7 +515,14 @@ document.addEventListener('removeNode', function (e) { var object = three.scene.getObjectByName( name ); three.scene.remove( object ); three.voxels.splice( three.voxels.indexOf( object ), 1 ); - three.updateHelperMeshesAfterRemove(three.grid,e.detail.x,e.detail.y,e.detail.z); + three.updateHelperMeshesAfterRemove(three.grid,e.detail.x,e.detail.y,e.detail.z); + if(three.highlight.name=== 'h'+name) { + three.highlight.name="h["+0+","+0 +","+0 +"]"; + three.highlight.position.x=0; + three.highlight.position.y=0; + three.highlight.position.z=0; + + } }, false); @@ -505,6 +543,26 @@ document.addEventListener('addNode', function (e) { }, false); +document.addEventListener('selectNode', function (e) { + var obj=e.detail; + [p_x ,p_y ,p_z ,s_x ,s_y,s_z,r_y]=utils.getTransforms(three.grid,obj.x, obj.y,obj.z); + + + three.highlight.name="h["+parseInt(obj.x) +","+parseInt(obj.y) +","+parseInt(obj.z) +"]"; + three.highlight.position.x=0; + three.highlight.position.y=0; + three.highlight.position.z=0; + + three.highlight.rotation.y=r_y; + + + three.highlight.position.x=p_x; + three.highlight.position.y=p_y; + three.highlight.position.z=p_z; + + +}, false); + ///////////////////// diff --git a/README.md b/README.md index b7d538f3222d3170e2c2983537f1171f942e08e0..86b92067a6e6ef6d6c92a3983d03e5e2a2eae30d 100644 --- a/README.md +++ b/README.md @@ -28,6 +28,8 @@ Topics include: - [x] Import cad models - [ ] Add NN code/interactions - [ ] Reset All function +- [ ] documentation +- [ ] simulation portal