diff --git a/01_Code/.DS_Store b/01_Code/.DS_Store
new file mode 100644
index 0000000000000000000000000000000000000000..9e590ec8f16bcb601558a4c31c4dd79d41f2a26f
Binary files /dev/null and b/01_Code/.DS_Store differ
diff --git a/01_Code/physical_computing_interface/graph/main.js b/01_Code/physical_computing_interface/graph/main.js
index be3fd21fa052442aa3e621100a93e93f733713ec..18c882b65555f9cb689883db5a25307fbce64d63 100644
--- a/01_Code/physical_computing_interface/graph/main.js
+++ b/01_Code/physical_computing_interface/graph/main.js
@@ -244,7 +244,7 @@ document.addEventListener('DOMContentLoaded', function(){
}
});
document.addEventListener('addNode', function (e) {
- console.log("Add:"+e.detail.x+" "+e.detail.y+" "+e.detail.z);
+
cy.add({
classes: 'automove-viewport',
// data: { id: 'new' + Math.round( Math.random() * 100 ) },
diff --git a/01_Code/physical_computing_interface/index.html b/01_Code/physical_computing_interface/index.html
index 69d1bf662f1a46a8c8fab2efe8d745ddbaaf5d8f..d84376c7191e50d050adf849128a8ef2ebc2ee54 100644
--- a/01_Code/physical_computing_interface/index.html
+++ b/01_Code/physical_computing_interface/index.html
@@ -1,81 +1,88 @@
<html>
<head>
-<title>Physical Computing Interface</title>
-<link rel="stylesheet" type="text/css" href="style.css" media="screen"/>
-<link rel="stylesheet" type="text/css" href="./lib/jsoneditor/jsoneditor.css" >
-
+ <title>Physical Computing Interface</title>
+ <link rel="stylesheet" type="text/css" href="style.css" media="screen"/>
+ <link rel="stylesheet" type="text/css" href="./lib/jsoneditor/jsoneditor.css" >
</head>
<body>
-<div id="threejs">
- <div class="header1">
- <i> 3D</i>
- <!-- Three.js -->
- </div>
- <div id="webgl"></div>
-</div>
-
-<div id="graph">
- <div class="header2">
- <div class="dragbar"></div>
- <i> Graph</i>
- </div>
- <div id=jsondiveditor>
- <p>
- <button class="button" id="expandAll">Expand all</button>
- <button class="button" id="collapseAll">Collapse all</button>
- <br/>
- <button class="button" id="collapseRecursively">Collapse selected </button>
- <button class="button" id="expandRecursively">Expand selected </button>
- <br/>
- <button class="button" id="expandAllAndRemove">Expand all and remove</button>
- <button class="button" id="loadInCollapsedState">Load all collapsed</button>
- </p>
+ <div id="threejs">
+ <div class="header1">
+ <i> 3D</i>
+ <!-- Three.js -->
+ </div>
+ <div id="webgl"></div>
+ <div class="slidecontainer">
+ <input type="range" min="0" max="0" value="1" class="slider" id="time">
+ <!-- <p>Value: <span id="demo"></span></p> -->
+ </div>
- <div id="cy"></div>
- </div>
- <div class="dragbar"></div>
-
-
-</div>
+ </div>
+
+
+ <div id="graph">
+ <div class="header2">
+ <div class="dragbar"></div>
+ <i> Graph</i>
+ </div>
+ <div id=jsondiveditor>
+ <p>
+ <button class="button" id="expandAll">Expand all</button>
+ <button class="button" id="collapseAll">Collapse all</button>
+ <br/>
+ <button class="button" id="collapseRecursively">Collapse selected </button>
+ <button class="button" id="expandRecursively">Expand selected </button>
+ <br/>
+ <button class="button" id="expandAllAndRemove">Expand all and remove</button>
+ <button class="button" id="loadInCollapsedState">Load all collapsed</button>
+ </p>
+
+ <div id="cy"></div>
+ </div>
+ <div class="dragbar"></div>
+
+
+ </div>
-<div id="json">
-
+ <div id="json">
+
- <div class="header2">
- <div class="dragbar"></div>
- <i> Node</i>
- </div>
-
-
- <div id=jsondiveditor>
+ <div class="header2">
+ <div class="dragbar"></div>
+ <i> Node</i>
+ </div>
+
+
+ <div id=jsondiveditor>
+
+ <p>
+ <button class="button" id="setJSON">Get Info</button>
+ <button class="button" id="getJSON">Set Info</button>
+ </p>
- <p>
- <button class="button" id="setJSON">Get Info</button>
- <button class="button" id="getJSON">Set Info</button>
- </p>
+ <div id="jsoneditor"></div>
+ </div>
+ <div class="dragbar"></div>
+ <div class="dragbar1"></div>
- <div id="jsoneditor"></div>
- </div>
- <div class="dragbar"></div>
- <div class="dragbar1"></div>
-
-
-
-</div>
-
-<div class="footer1">
- <strong>click</strong>: add voxel, <strong>shift + click</strong>: remove voxel
-</div>
-<div class="footer2">
- <i>footer</i>
-</div>
+
+
+ </div>
+
+ <div class="footer1">
+ <strong>click</strong>: add voxel, <strong>shift + click</strong>: remove voxel
+ </div>
+
+ <div class="footer2">
+ <i>footer</i>
+ </div>
+
</body>
<!-- TODO:
- Clean structuture to modules?
+ Clean structure to modules?
Add another footer
-->
@@ -100,11 +107,14 @@
<!-- code -->
<script src="./main.js"></script> <!-- event handling and main json structure -->
-<script src="./threejs/main.js"></script>
-<script src="./graph/main.js"></script>
-<script src="./json/main.js"></script>
+<script src="./threejs/assembly.js"></script><!-- assembly and timestep handling -->
+<script src="./threejs/main.js"></script><!-- threejs visualization -->
+<script src="./graph/main.js"></script><!-- graph flow visualization-->
+<script src="./json/main.js"></script><!-- json -->
+
+<!-- windows control -->
<script>
var i = 0;
$('.dragbar').mousedown(function(e){
@@ -122,7 +132,6 @@
});
$('.dragbar1').mousedown(function(e){
-
e.preventDefault();
// $('#mousestatus').html("mousedown" + i++);
$(document).mousemove(function(e){
diff --git a/01_Code/physical_computing_interface/main.js b/01_Code/physical_computing_interface/main.js
index ddcbc46a0ca67fe9dc54c01575751a5d558cde29..3877a4dbf141f52eb6e13c3231e0fa0c22e6d55b 100644
--- a/01_Code/physical_computing_interface/main.js
+++ b/01_Code/physical_computing_interface/main.js
@@ -1,24 +1,8 @@
-//////////////////////occupancy//////////////////
-//TODO: ADD CLOSURE GLOBAL
-
-var occupancy=[];
var gridSize=20;
var voxelSpacing=50;
-
-for (var i=0;i<gridSize;++i){
- occupancy.push([]);
- for (var j=0;j<gridSize;++j){
- occupancy[i].push([]);
- for (var k=0;k<gridSize;++k){
- occupancy[i][j].push(false);
- }
- }
-}
-//////////////////////////////////////////////
-
//////////////////////events//////////////////
-function addNode (x,y,z){
+function addNode (x,y,z,replay=false){
var addNodeEvent = new CustomEvent('addNode', {
detail:
{
@@ -28,13 +12,14 @@ function addNode (x,y,z){
id:'[' +x +"," +y+","+z+']',
posX:(x-gridSize/2)*voxelSpacing+voxelSpacing/2,
posY:(y-gridSize/2)*voxelSpacing+voxelSpacing/2,
- posZ:(z)*voxelSpacing+voxelSpacing/2
+ posZ:(z)*voxelSpacing+voxelSpacing/2,
+ replay:replay
}
});
document.dispatchEvent(addNodeEvent);
}
-function removeNode (x,y,z){
+function removeNode (x,y,z,replay=false){
var removeNodeEvent = new CustomEvent('removeNode', {
detail:
{
@@ -44,12 +29,30 @@ function removeNode (x,y,z){
id:'[' +x +"," +y+","+z+']',
posX:(x-gridSize/2)*voxelSpacing+voxelSpacing/2,
posY:(y-gridSize/2)*voxelSpacing+voxelSpacing/2,
- posZ:(z)*voxelSpacing+voxelSpacing/2
+ posZ:(z)*voxelSpacing+voxelSpacing/2,
+ replay:replay
}
});
document.dispatchEvent(removeNodeEvent);
}
+function adjustTimeStep (addRemove,x,y,z){
+ var adjustTimeStepEvent = new CustomEvent('adjustTimeStep', {
+ detail:
+ {
+ x:x,
+ y:y,
+ z:z,
+ id:'[' +x +"," +y+","+z+']',
+ addRemove:addRemove,
+ posX:(x-gridSize/2)*voxelSpacing+voxelSpacing/2,
+ posY:(y-gridSize/2)*voxelSpacing+voxelSpacing/2,
+ posZ:(z)*voxelSpacing+voxelSpacing/2
+ }
+ });
+ document.dispatchEvent(adjustTimeStepEvent);
+}
+
function selectNode (x,y,z){
var selectNodeEvent = new CustomEvent('selectNode', {
detail:
@@ -65,19 +68,6 @@ function selectNode (x,y,z){
});
document.dispatchEvent(selectNodeEvent);
}
-
-document.addEventListener('addNode', function (e) {
-
- occupancy[e.detail.x][e.detail.y][e.detail.z]=true;
-
-}, false);
-
-document.addEventListener('removeNode', function (e) {
-
- occupancy[e.detail.x][e.detail.y][e.detail.z]=false;
-
-}, false);
-
//////////////////////////////////////////////
//////////////////////utils//////////////////
diff --git a/01_Code/physical_computing_interface/style.css b/01_Code/physical_computing_interface/style.css
index ce3e93300a15c8e3f82aeda9d94ae5bae2eb5c0d..4ed2f1b60d17164f78f16e049f83454ff92b6be7 100644
--- a/01_Code/physical_computing_interface/style.css
+++ b/01_Code/physical_computing_interface/style.css
@@ -189,3 +189,63 @@ body,html{width:100%;height:100%;padding:0;margin:0;}
background-color: #ccc;
}
+.slidecontainer {
+ width: 100%;
+ /* background-color: var(--color1); */
+ /* opacity: 0.0; */
+
+ height: var(--top);
+ /* width: 100%; */
+ float: left;
+ float: bottom;
+ position: absolute;
+ border-width: 10px;
+
+ bottom: var(--bottom);
+ overflow-y: hidden;
+ /* top:var(--dragwidth); */
+ /* left:var(--dragwidth); */
+
+ font-family: var(--font);
+ color: var(--color2);
+ /* top:var(--dragwidth); */
+}
+
+
+.slider {
+ -webkit-appearance: none;
+ width: 80%;
+ margin-left: 10%;
+ /* left: 50%; */
+ height: var(--dragwidth/3);
+ /* border-width: 10px; */
+ border-radius: 5px;
+ background: #d3d3d3;
+ outline: none;
+ opacity: 0.7;
+ -webkit-transition: .2s;
+ transition: opacity .2s;
+}
+
+.slider:hover {
+ opacity: 1;
+}
+
+.slider::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ appearance: none;
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
+ background: var(--color3);
+ cursor: pointer;
+}
+
+.slider::-moz-range-thumb {
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
+ background: var(--color3);
+ cursor: pointer;
+}
+
diff --git a/01_Code/physical_computing_interface/threejs/assembly.js b/01_Code/physical_computing_interface/threejs/assembly.js
new file mode 100644
index 0000000000000000000000000000000000000000..044eb3fba7e456fe79f64a9034193684962262ae
--- /dev/null
+++ b/01_Code/physical_computing_interface/threejs/assembly.js
@@ -0,0 +1,101 @@
+var slider = document.getElementById("time");
+var totalTimeSteps=0;
+var timeline=[];
+var timeStep=0;
+
+slider.oninput = function() {
+ replay(this.value);
+};
+
+//////////////////////occupancy//////////////////
+//TODO: ADD CLOSURE GLOBAL
+
+var occupancy=[];
+for (var i=0;i<gridSize;++i){
+ occupancy.push([]);
+ for (var j=0;j<gridSize;++j){
+ occupancy[i].push([]);
+ for (var k=0;k<gridSize;++k){
+ occupancy[i][j].push(false);
+ }
+ }
+}
+var timeStepOccupancy=[];
+timeStepOccupancy.push(occupancy.slice());
+
+////////////////////////
+document.addEventListener('addNode', function (e) {
+
+ if(!e.detail.replay){
+ console.log("Add:"+e.detail.x+" "+e.detail.y+" "+e.detail.z);
+ adjustTimeStep(true,e.detail.x,e.detail.y,e.detail.z);
+ }else{
+ console.log("Replay Add:"+e.detail.x+" "+e.detail.y+" "+e.detail.z);
+ }
+
+
+}, false);
+
+document.addEventListener('removeNode', function (e) {
+ if(!e.detail.replay){
+ console.log("Remove:"+e.detail.x+" "+e.detail.y+" "+e.detail.z);
+
+ adjustTimeStep(false,e.detail.x,e.detail.y,e.detail.z);
+
+ }else{
+ console.log("Replay Remove:"+e.detail.x+" "+e.detail.y+" "+e.detail.z);
+ }
+}, false);
+
+document.addEventListener('adjustTimeStep', function (e) {
+ timeStepOccupancy.push(timeStepOccupancy[totalTimeSteps]);
+ totalTimeSteps++;
+ console.log(timeStepOccupancy.length);
+ console.log(totalTimeSteps);
+ timeStepOccupancy[totalTimeSteps][e.detail.x][e.detail.y][e.detail.z]=e.detail.addRemove;
+ occupancy=timeStepOccupancy[totalTimeSteps];
+
+
+ slider.max=totalTimeSteps;
+ slider.value=totalTimeSteps;
+ timeline.push(e.detail);
+ replay(totalTimeSteps-1);
+ timeStep=totalTimeSteps;
+
+ // console.log(occupancy);
+ // console.log(timeStep);
+
+}, false);
+
+function replay(currValue){
+ // var currValue=this.value;
+ if(currValue<timeStep){
+ for(var i=timeStep;i>currValue;i--) {
+ var ii=i-1;
+ occupancy=timeStepOccupancy[i];
+ if(!timeline[ii].addRemove){
+ addNode(timeline[ii].x,timeline[ii].y,timeline[ii].z,true);
+ }else{
+ removeNode(timeline[ii].x,timeline[ii].y,timeline[ii].z,true);
+ }
+
+ }
+
+ }else if (currValue>timeStep){
+ for(var i=timeStep;i<currValue;i++) {
+ var ii=i;
+ occupancy=timeStepOccupancy[i];
+ if(timeline[ii].addRemove){
+ addNode(timeline[ii].x,timeline[ii].y,timeline[ii].z,true);
+ }else{
+ removeNode(timeline[ii].x,timeline[ii].y,timeline[ii].z,true);
+ }
+ }
+ }else{
+ console.log("No Replay!");
+ }
+
+ timeStep=currValue;
+ // console.log(timeStep);
+
+}
\ No newline at end of file
diff --git a/01_Code/physical_computing_interface/threejs/main.js b/01_Code/physical_computing_interface/threejs/main.js
index 4031927aaefedebbdf6ebc4591a959437bcce25d..1f3a6bc732edb2b43d17b47e1662a2935b093472 100644
--- a/01_Code/physical_computing_interface/threejs/main.js
+++ b/01_Code/physical_computing_interface/threejs/main.js
@@ -123,11 +123,11 @@ function threejs(){
}
addNode (x,z ,y); //y is up
- voxel.name='[' +x +"," +z+","+y+']';
+ // voxel.name='[' +x +"," +z+","+y+']';
- voxel.position.divideScalar( voxelSpacing ).floor().multiplyScalar( voxelSpacing ).addScalar( voxelSpacing/2 );
- scene.add( voxel );
- objects.push( voxel );
+ // voxel.position.divideScalar( voxelSpacing ).floor().multiplyScalar( voxelSpacing ).addScalar( voxelSpacing/2 );
+ // scene.add( voxel );
+ // objects.push( voxel );
}
@@ -135,6 +135,24 @@ function threejs(){
}
}
+ document.addEventListener('addNode', function (e) {
+ var voxel = new THREE.Mesh( cubeGeo, cubeMaterial );
+
+ // voxel.position.copy( intersect.point ).add( intersect.face.normal );
+ // var x=Math.floor(voxel.position.x/voxelSpacing)+gridSize/2;
+ // var y=Math.floor(voxel.position.y/voxelSpacing);
+ // var z=Math.floor(voxel.position.z/voxelSpacing)+gridSize/2;
+ voxel.position.x=e.detail.posX;
+ voxel.position.y=e.detail.posZ;
+ voxel.position.z=e.detail.posY;
+
+ voxel.name='[' +e.detail.x +"," +e.detail.y+","+e.detail.z+']';
+ // voxel.position.divideScalar( voxelSpacing ).floor().multiplyScalar( voxelSpacing ).addScalar( voxelSpacing/2 );
+ scene.add( voxel );
+ objects.push( voxel );
+
+ }, false);
+
document.addEventListener('removeNode', function (e) {
var name='[' +e.detail.x +"," +e.detail.y+","+e.detail.z+']';
var object = scene.getObjectByName( name );
@@ -172,3 +190,4 @@ function threejs(){
}
threejs();
+