diff --git a/01_Code/physical_computing_interface/css/style.css b/01_Code/physical_computing_interface/css/style.css
index d0aef402baf14bc14f88ef002ab529add5152453..383f97bbb8c3adcc769485a04f0a54ed24dd5781 100644
--- a/01_Code/physical_computing_interface/css/style.css
+++ b/01_Code/physical_computing_interface/css/style.css
@@ -37,6 +37,7 @@ body,html{width:100%;height:100%;padding:0;margin:0;}
height: var(--top);
float: left;
position: absolute;
+ width: 95%;
bottom: var(--bottom);
top:var(--dragwidth);
@@ -361,17 +362,18 @@ body,html{width:100%;height:100%;padding:0;margin:0;}
.dropbtn {
background-color: var(--color3);;
color: white;
- padding: 10px;
+ padding: 5px;
font-size: 16px;
font-family: var(--font);
border: none;
border-radius: 5px;
}
-
+.float_left{float:left;}
+.float_right{float:right;}
.dropdown {
- position: relative;
+ position: absolute;
display: inline-block;
- /* float: left; */
+
/* right: 40%; */
}
diff --git a/01_Code/physical_computing_interface/demos/indexSimulation.html b/01_Code/physical_computing_interface/demos/indexSimulation.html
index 9ce04689540dbcd9254816a89fb6bd717f30388e..ce7ea166b2be6bdacd60d19dcc39e048c7d0c00d 100644
--- a/01_Code/physical_computing_interface/demos/indexSimulation.html
+++ b/01_Code/physical_computing_interface/demos/indexSimulation.html
@@ -37,7 +37,17 @@
<div id="simulation">
<div id="threejs1">
<div class="header2">
- <i> Simulation </i>
+
+ <i> Simulation </i>
+
+ <div class="dropdown" style="float: right;" >
+ <button onclick="simulationFidelity()" class="dropbtn" >Fidelity</button>
+ <div id="myDropdown" class="dropdown-content" >
+ <a class="High" href="#">High (slow)</a>
+ <a class="Medium" href="#">Medium</a>
+ <a class="Low" href="#">Low (Fast)</a>
+ </div>
+ </div >
</div>
<div class="dragbar2"></div>
<div id="webgl1"></div>
diff --git a/01_Code/physical_computing_interface/demos/indexSwitchWindows.html b/01_Code/physical_computing_interface/demos/indexSwitchWindows.html
index b7475fe8a104c94c0cbe62d2aa6a4cc0159eb3bc..30f4efa434d87276059bc2a0adef3ff513718000 100644
--- a/01_Code/physical_computing_interface/demos/indexSwitchWindows.html
+++ b/01_Code/physical_computing_interface/demos/indexSwitchWindows.html
@@ -20,6 +20,7 @@
<div id="threejs1">
<div class="header1">
<i> Assembly</i>
+
<!-- Three.js -->
</div>
@@ -31,10 +32,11 @@
</div>
- <div id="simulation">
+ <div id="simulation" style="overflow: scroll;">
<div id="threejs1">
<div class="header1">
<i> Assembler Control</i>
+
</div>
<div class="dragbar2"></div>
<!-- <div id="webgl1"></div> -->
@@ -406,6 +408,7 @@
<div class="header2">
<div class="dragbar"></div>
<i> Graph</i>
+
</div>
<div id=jsondiveditor>
@@ -422,6 +425,8 @@
<div class="header2">
<div class="dragbar"></div>
<i> Node</i>
+
+
</div>
diff --git a/01_Code/physical_computing_interface/setup/globals.js b/01_Code/physical_computing_interface/setup/globals.js
index fa9c3c279c0570fc0f3de179c0721dd53ba86b10..56150d8055e179c739344fc11c8c4e697a52f11c 100644
--- a/01_Code/physical_computing_interface/setup/globals.js
+++ b/01_Code/physical_computing_interface/setup/globals.js
@@ -282,7 +282,9 @@ function globals(utils){
this.timeline=[];
this.selectedjson;
this.editor;
- this.globalJson={nodes:[]};
+ this.globalJson={nodes:[],
+ simulationSteps:10};
+
}
@@ -304,7 +306,7 @@ globals.prototype.addNode=function (x,y,z,replay=false,data={}){
posZ:p_z,
rotY:r_y,
replay:replay,
- data:data
+ data:data,
}
});
document.dispatchEvent(addNodeEvent);
diff --git a/01_Code/physical_computing_interface/simulation/app.js b/01_Code/physical_computing_interface/simulation/app.js
index f3e26253dce574ce780616bebfc1a61b1d4c454e..32dc56a4a085b5b5a376d044600125c1c1269513 100644
--- a/01_Code/physical_computing_interface/simulation/app.js
+++ b/01_Code/physical_computing_interface/simulation/app.js
@@ -14,6 +14,40 @@ three.init();
initGraph();// todo enclose into class
initEditor();// todo enclose into class
+
+function simulationFidelity() {
+ document.getElementById("myDropdown").classList.toggle("show");
+ }
+
+// Close the dropdown menu if the user clicks outside of it
+window.onclick = function(event) {
+ if (event.target.matches('.dropbtn')) {
+ var dropdowns = document.getElementsByClassName("dropdown-content");
+ var i;
+ for (i = 0; i < dropdowns.length; i++) {
+ var openDropdown = dropdowns[i];
+ if (openDropdown.classList.contains('show')) {
+ openDropdown.classList.remove('show');
+ }
+ }
+ }else if (event.target.matches('.High')) {
+ GLOBALS.globalJson.simulationSteps=1000;
+ setup.animation.exaggeration=10e2*5;
+ x = document.getElementById("instructions");
+ x.innerHTML = "Simulation fidelity set to high.";
+
+ }else if (event.target.matches('.Medium')) {
+ GLOBALS.globalJson.simulationSteps=500;
+ setup.animation.exaggeration=10e2*5;
+ x = document.getElementById("instructions");
+ x.innerHTML = "Simulation fidelity set to medium.";
+ }else if (event.target.matches('.Low')) {
+ GLOBALS.globalJson.simulationSteps=10;
+ x = document.getElementById("instructions");
+ x.innerHTML = "Simulation fidelity set to low.";
+ }
+}
+
// changed for assembler
// var assembler= new Assembler(three,GLOBALS,1,50,[new THREE.Vector3(GLOBALS.gridSize*GLOBALS.voxelSpacing,0,0)],[new THREE.Vector3(GLOBALS.gridSize*GLOBALS.voxelSpacing,0,GLOBALS.gridSize/2.0*GLOBALS.voxelSpacing)]);
// assembler.run();
@@ -52,7 +86,7 @@ setup.gridSize=GLOBALS.gridSize
document.addEventListener('runNode', function (e) {
x = document.getElementById("instructions");x.innerHTML = "Simulation Started, wait a few seconds for the results!";
- solveParallel(1000);
+ solveParallel(GLOBALS.globalJson.simulationSteps);
}, false);
diff --git a/01_Code/physical_computing_interface/simulation/visualization/main.js b/01_Code/physical_computing_interface/simulation/visualization/main.js
index 7c95d1dea900df7e7de9641a7885674d301f705a..c681d6f863d7af5245a00be71934a97cb1b821f6 100644
--- a/01_Code/physical_computing_interface/simulation/visualization/main.js
+++ b/01_Code/physical_computing_interface/simulation/visualization/main.js
@@ -32,8 +32,8 @@ var setupEmpty={//empty
animation : {
showDisplacement : true,
- exaggeration : 10e2*5,
- // exaggeration : 10e5/2,
+ // exaggeration : 10e2*5,
+ exaggeration : 10e5/2,
speed:3.0
},
diff --git a/01_Code/physical_computing_interface/threejs/grid.js b/01_Code/physical_computing_interface/threejs/grid.js
index ec06f7b59f23e16a0f37968e3bafc76aa326017e..f4b06797dcf7d79ce5202617277aa389faf5cdc0 100644
--- a/01_Code/physical_computing_interface/threejs/grid.js
+++ b/01_Code/physical_computing_interface/threejs/grid.js
@@ -111,7 +111,8 @@ function threejs(GLOBALS,utils,containerName,container1Name){
// console.log( "Select");//todo move to globals
var data={
color:GLOBALS.color4,
- type:"force"
+ type:"force",
+ locked:true
}
GLOBALS.changeNodeColor(three.selectedNodeID.x,three.selectedNodeID.y,three.selectedNodeID.z,false,data);
GLOBALS.selectNode(three.selectedNodeID.x,three.selectedNodeID.y,three.selectedNodeID.z);
@@ -125,7 +126,8 @@ function threejs(GLOBALS,utils,containerName,container1Name){
// console.log( "Select");//todo move to globals
var data={
color:GLOBALS.color7,
- type:"display"
+ type:"display",
+ locked:true
}
GLOBALS.changeNodeColor(three.selectedNodeID.x,three.selectedNodeID.y,three.selectedNodeID.z,false,data);
GLOBALS.selectNode(three.selectedNodeID.x,three.selectedNodeID.y,three.selectedNodeID.z);
@@ -140,7 +142,8 @@ function threejs(GLOBALS,utils,containerName,container1Name){
// console.log( "Select");//todo move to globals
var data={
color:GLOBALS.color2,
- type:"sensor"
+ type:"sensor",
+ locked:true
}
GLOBALS.changeNodeColor(three.selectedNodeID.x,three.selectedNodeID.y,three.selectedNodeID.z,false,data);
GLOBALS.selectNode(three.selectedNodeID.x,three.selectedNodeID.y,three.selectedNodeID.z);
@@ -154,7 +157,8 @@ function threejs(GLOBALS,utils,containerName,container1Name){
// console.log( "Select");//todo move to globals
var data={
color:GLOBALS.color5,
- type:"microcontroller"
+ type:"microcontroller",
+ locked:true
}
GLOBALS.changeNodeColor(three.selectedNodeID.x,three.selectedNodeID.y,three.selectedNodeID.z,false,data);
GLOBALS.selectNode(three.selectedNodeID.x,three.selectedNodeID.y,three.selectedNodeID.z);
@@ -169,7 +173,8 @@ function threejs(GLOBALS,utils,containerName,container1Name){
// console.log( "Select");//todo move to globals
var data={
color:GLOBALS.color3,
- type:"rigid"
+ type:"rigid",
+ locked:true
}
GLOBALS.changeNodeColor(three.selectedNodeID.x,three.selectedNodeID.y,three.selectedNodeID.z,false,data);
GLOBALS.selectNode(three.selectedNodeID.x,three.selectedNodeID.y,three.selectedNodeID.z);
@@ -237,6 +242,8 @@ function threejs(GLOBALS,utils,containerName,container1Name){
}else{
GLOBALS.addNode(node.x,node.y,node.z,false,node.data);
GLOBALS.changeNodeColor(node.x,node.y,node.z,false,node.data);
+ GLOBALS.selectNode(node.x,node.y,node.z,false,node.data);
+ GLOBALS.globalJson.simulationSteps=obj.simulationSteps
}
@@ -664,8 +671,8 @@ function onDocumentMouseDownThree( event ) {
three.highlight.position.x=p_x;
three.highlight.position.y=p_y;
three.highlight.position.z=p_z;
-
- x = document.getElementById("instructions");x.innerHTML = "Select node, delete node or change node type.";
+ var str="Right click on Node: ";
+ x = document.getElementById("instructions");x.innerHTML = str.bold()+"Select node, delete node or change node type.";
@@ -674,8 +681,8 @@ function onDocumentMouseDownThree( event ) {
}
if(event.which==3 && !(intersects1.length > 0)&& !(intersects.length > 0)){
three.menu=three.cy.cxtmenu( three.cxtdefaults );
-
- x = document.getElementById("instructions");x.innerHTML = "Upload design, save design or run simulation.";
+ var str="Right click on Background: ";
+ x = document.getElementById("instructions");x.innerHTML = str.bold()+"Upload design, save design or run simulation.";
}
@@ -686,6 +693,8 @@ function onDocumentKeyUpThree(event){
if(three.menu!==undefined){
three.menu.destroy();
+ // x = document.getElementById("instructions");x.innerHTML = "instructions.";
+
}
}
@@ -770,6 +779,7 @@ document.addEventListener('changeNodeColor', function (e) {
document.addEventListener('selectNode', function (e) {
var obj=e.detail;
+ three.selectedNodeID=obj
[p_x ,p_y ,p_z ,s_x ,s_y,s_z,r_y]=utils.getTransforms(three.grid,obj.x, obj.y,obj.z);
// x = document.getElementById("instructions");x.innerHTML = "Selected node at x="+e.detail.x+", y="+e.detail.y+", z="+e.detail.y+".";