added simulation window

01_Code/physical_computing_interface/index.html

@@ -27,6 +27,23 @@
             
     </div>
 
+    <div id="simulation">
+        <div id="threejs1">
+            <div class="header1">
+                    <i> Simulation</i>
+                    <!-- Three.js -->
+            </div>
+            
+            <!-- <div id="webgl1"></div> -->
+            <div class="dragbar2"></div>
+        </div>
+        <!-- <div class="slidecontainer">
+                <input type="range" min="0" max="0" value="1" class="slider" id="time">
+        </div> -->
+        
+            
+    </div>
+    
 
 
     <div id="graph">
@@ -142,6 +159,9 @@
         $(document).mousemove(function(e){
         //   $('#position').html(e.pageX +', '+ e.pageY);
           $('#threejs').css("width",e.pageX+2);
+
+          $('#simulation').css("width",e.pageX+2);
+
           $('#graph').css("left",e.pageX+2);
           $('#json').css("left",e.pageX+2);
           $('.footer1').css("width",e.pageX+2);
@@ -160,6 +180,16 @@
       })
    });
 
+   $('.dragbar2').mousedown(function(e){
+       e.preventDefault();
+       // $('#mousestatus').html("mousedown" + i++);
+       $(document).mousemove(function(e){
+        $('#threejs').css("height",e.pageY+2);
+        $('#simulation').css("top",e.pageY+2);
+         
+      })
+   });
+
    $(document).mouseup(function(e){
        $(document).unbind('mousemove');
     });

01_Code/physical_computing_interface/style.css

@@ -30,6 +30,7 @@ body,html{width:100%;height:100%;padding:0;margin:0;}
     color: var(--color2);
     top:var(--dragwidth);
 }
+
 .header2{
     background-color:  rgba(0, 0, 0, 0);/*transparent*/
 
@@ -46,6 +47,7 @@ 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 ); */
@@ -54,6 +56,7 @@ body,html{width:100%;height:100%;padding:0;margin:0;}
     float: top;
     /* z-index: -1; */
 }
+
 #threejs{
    background-color: var(--color11);
    /* background-image: linear-gradient(+90deg, #03023d 90%,#ffffff ); */
@@ -61,14 +64,27 @@ body,html{width:100%;height:100%;padding:0;margin:0;}
    float: left;
    position: absolute;
    top:0px;
-   bottom: var(--bottom);
+   bottom: 50%;
+   /* bottom: var(--bottom); */
    overflow-y: hidden;
    font-family: var(--font);
    color: var(--color2);
    /* z-index: -1; */
 }
 
-
+#simulation{
+    background-color: var(--color11);
+    /* background-image: linear-gradient(+90deg, #03023d 90%,#ffffff ); */
+    width: 50%;
+    float: left;
+    position: absolute;
+    top:50%;
+    bottom: var(--bottom);
+    overflow-y: hidden;
+    font-family: var(--font);
+    color: var(--color2);
+    /* z-index: -1; */
+}
 
 #webgl{
     top:var(--top);
@@ -153,6 +169,17 @@ body,html{width:100%;height:100%;padding:0;margin:0;}
     cursor: row-resize;
 }
 
+.dragbar2{
+    /* background-color: var(--color3); */
+    background-image: linear-gradient(+0deg, var(--color1)50% ,var(--color2)60% ,var(--color1));
+    width:100%;
+    left:var(--dragwidth);
+    float: bottom;
+    /* position: absolute; */
+    height: var(--dragwidth);
+    cursor: row-resize;
+}
+
 #cy {
     height: 100%;
     width: 100%;
@@ -163,6 +190,7 @@ body,html{width:100%;height:100%;padding:0;margin:0;}
     /* left: var(--dragwidth);
     top:var(--top); */
 }
+
 #jsoneditor {
     width: 100%;
     height: 100%;
@@ -192,6 +220,7 @@ body,html{width:100%;height:100%;padding:0;margin:0;}
 	-webkit-transition: background-color .2s ease-in; 
 	transition: background-color .2s ease-in; 
 }
+
 .button:hover {
     background-color: #e5e5e5;    
 }