diff --git a/01_Code/physical_computing_interface/app.js b/01_Code/physical_computing_interface/app.js
index 2cb95555a4847bd58d64501628db0a82acec0165..d63db67c2e3886fe557f670bed1804fccdca53c6 100644
--- a/01_Code/physical_computing_interface/app.js
+++ b/01_Code/physical_computing_interface/app.js
@@ -6,10 +6,15 @@
var utils= new utilities();
var GLOBALS=new globals(utils);
+//
+var three=new threejs(GLOBALS,utils,'webgl','threejs1');
+three.init();
+var slider = document.getElementById("time");
-var three=new threejs(GLOBALS,utils,'webgl','threejs');
-three.init();
+slider.oninput = function() {
+ replay(this.value);
+};
initGraph();// todo enclose into class
initEditor();// todo enclose into class
@@ -20,3 +25,4 @@ assembler.run();
+
diff --git a/01_Code/physical_computing_interface/assembly/replay.js b/01_Code/physical_computing_interface/assembly/replay.js
index 36ed6e6f237b52d6d688579675b5d46b23162423..bc1732c4975b54492bbef0d884c5d318477ba067 100644
--- a/01_Code/physical_computing_interface/assembly/replay.js
+++ b/01_Code/physical_computing_interface/assembly/replay.js
@@ -1,8 +1,4 @@
-var slider = document.getElementById("time");
-slider.oninput = function() {
- replay(this.value);
-};
//////////////////////occupancy//////////////////
diff --git a/01_Code/physical_computing_interface/index.html b/01_Code/physical_computing_interface/index.html
index 7ead2497cdf597ced975b3c874d313ca3e5607d5..4d1aafa0fbdefa10de6924088a716fed7e4c2a3f 100644
--- a/01_Code/physical_computing_interface/index.html
+++ b/01_Code/physical_computing_interface/index.html
@@ -13,17 +13,20 @@
<body>
<div id="threejs">
+ <div id="threejs1">
<div class="header1">
<i> 3D</i>
<!-- Three.js -->
</div>
+
<div id="webgl"></div>
- <div class="slidecontainer">
+ </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>
</div>
+
<div id="graph">
diff --git a/01_Code/physical_computing_interface/style.css b/01_Code/physical_computing_interface/style.css
index 0be116cce06bdc721ae40097944344809d8707b1..831151e55ed91b06f5d5abbe2399019cdedd3a05 100644
--- a/01_Code/physical_computing_interface/style.css
+++ b/01_Code/physical_computing_interface/style.css
@@ -46,6 +46,14 @@ body,html{width:100%;height:100%;padding:0;margin:0;}
color: var(--color1);
}
+#threejs1{
+ background-color: var(--color11);
+ /* background-image: linear-gradient(+90deg, #03023d 90%,#ffffff ); */
+ width: 100%;
+ height: 100%;
+ float: top;
+ /* z-index: -1; */
+ }
#threejs{
background-color: var(--color11);
/* background-image: linear-gradient(+90deg, #03023d 90%,#ffffff ); */
@@ -57,8 +65,11 @@ body,html{width:100%;height:100%;padding:0;margin:0;}
overflow-y: hidden;
font-family: var(--font);
color: var(--color2);
+ /* z-index: -1; */
}
+
+
#webgl{
top:var(--top);
bottom: var(--bottom);
@@ -189,6 +200,11 @@ body,html{width:100%;height:100%;padding:0;margin:0;}
background-color: #ccc;
}
+#time{
+ z-index: 9999999;
+
+}
+
.slidecontainer {
width: 100%;
/* background-color: var(--color1); */
@@ -208,6 +224,7 @@ body,html{width:100%;height:100%;padding:0;margin:0;}
font-family: var(--font);
color: var(--color2);
+ z-index: 1000000;
/* top:var(--dragwidth); */
}
diff --git a/01_Code/physical_computing_interface/threejs/grid.js b/01_Code/physical_computing_interface/threejs/grid.js
index 84d94d488fa03121a6a0334f7d7c05d45b570294..7e8689417efba7748953dddc143ee5563dc28df3 100644
--- a/01_Code/physical_computing_interface/threejs/grid.js
+++ b/01_Code/physical_computing_interface/threejs/grid.js
@@ -47,8 +47,11 @@ function threejs(GLOBALS,utils,containerName,container1Name){
ready: function(){
},
+
style: [
+
],
+ autolock: true,
elements: {
nodes: [
@@ -73,7 +76,7 @@ function threejs(GLOBALS,utils,containerName,container1Name){
// openMenuEvents: 'cxttapstart taphold', // space-separated cytoscape events that will open the menu; only `cxttapstart` and/or `taphold` work here
itemColor: color6, // the colour of text in the command's content
// itemTextShadowColor: 'transparent', // the text shadow colour of the command's content
- zIndex: 2*9999, // the z-index of the ui div
+ zIndex: 9999, // the z-index of the ui div
// atMouse: false // draw menu at mouse position
commands: [
{
@@ -101,6 +104,7 @@ function threejs(GLOBALS,utils,containerName,container1Name){
}
]
};
+
// this.init();
}
@@ -375,7 +379,8 @@ threejs.prototype.updateHelperMeshesAfterRemove=function(grid,x,y,z){
}
};
-//
+
+
threejs.prototype.changeToGrid=function(newGrid){
};