diff --git a/01_Code/physical_computing_interface/index.html b/01_Code/physical_computing_interface/index.html index 409e1d71d05415b08bc38162795a1b29ad11e2be..5157daa62deae898cc3e7353b785bfe9f2781b22 100644 --- a/01_Code/physical_computing_interface/index.html +++ b/01_Code/physical_computing_interface/index.html @@ -26,6 +26,23 @@ </div> </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> @@ -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'); }); diff --git a/01_Code/physical_computing_interface/style.css b/01_Code/physical_computing_interface/style.css index 062963debf668ebfb2a5e3f7f0c537f02f1ab6a4..106c2044b7b4f242ad93857a4e2f193ef7b9de4a 100644 --- a/01_Code/physical_computing_interface/style.css +++ b/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 ); */ @@ -53,7 +55,8 @@ body,html{width:100%;height:100%;padding:0;margin:0;} height: 100%; 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); @@ -76,7 +92,7 @@ body,html{width:100%;height:100%;padding:0;margin:0;} overflow-y: hidden; font-family: var(--font); color: var(--color2); - } +} #graph{ background-color: var(--color2); @@ -118,9 +134,9 @@ body,html{width:100%;height:100%;padding:0;margin:0;} color: var(--color2); height: var(--bottom); bottom:0; - } +} - .footer2{ +.footer2{ background-color: var(--color1); float: right; position: absolute; @@ -130,7 +146,7 @@ body,html{width:100%;height:100%;padding:0;margin:0;} color: var(--color2); height: var(--bottom); bottom:0; - } +} .dragbar{ @@ -151,7 +167,18 @@ body,html{width:100%;height:100%;padding:0;margin:0;} /* position: absolute; */ height: var(--dragwidth); 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%; @@ -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; }