Commit fb6d9df4 authored by amandaghassaei's avatar amandaghassaei

simplifying ui

parent cc68f6a8
......@@ -27,12 +27,72 @@ p{
margin: 15px 0 15px 0;
}
#showAdvancedOptions{
position: absolute;
top: 53px;
font-size: 14px;
color: #34495e;
font-weight: 900;
text-align: right;
right: 0px;
width: 400px;
padding: 20px 20px;
}
#hideAdvancedOptions{
font-size: 14px;
color: #34495e;
font-weight: 900;
text-align: right;
width: 100%;
display: inline-block;
}
#controlsBottom{
width: 50%;
margin: auto;
position: absolute;
bottom: 0;
right: 0;
left: 0;
height: 80px;
}
#controlsBottom>.sliderInput{
width: 100%;
margin-top:20px;
}
#controlsBottom>.sliderInput>.flat-slider{
width: 100%;
margin: 0;
background: #e8e8e8;
}
#flatIndicator{
text-align: center;
width: 100px;
position: absolute;
top: 0;
left: -110px;
line-height: 10px;
}
#flatIndicator>img{
width:100%;
}
#foldedIndicator{
text-align: center;
width: 100px;
position: absolute;
top: 0;
right: -110px;
line-height: 10px;
}
#foldedIndicator>img{
width:100%;
}
#controls{
position: absolute;
top:53px;
bottom: 0;
right:0;
right:-400px;
width:400px;
padding:20px 20px;
overflow: auto;
......@@ -44,7 +104,7 @@ p{
#controlsLeft{
position: absolute;
bottom:0;
left:0;
left:-420px;
width: 420px;
top:53px;
padding:20px 20px;
......@@ -336,13 +396,13 @@ svg{
#start, #stepForwardOptions{
display: none;
}
#stepForwardOptions{
width: 100%;
}
#reset{
margin-left: 20px;
}
#stepForward{
display: inline-block;
margin-right: 20px;
}
#creasePercentNav{
margin-bottom: 0;
......
......@@ -1011,7 +1011,7 @@
<a href="#" class="dropdown-toggle" data-toggle="dropdown">View <b class="caret"></b></a>
<span class="dropdown-arrow"></span>
<ul class="dropdown-menu">
<li><a id="menuVis" href="#">Toggle Menu Visibility</a></li>
<!--<li><a id="menuVis" href="#">Toggle Menu Visibility</a></li>-->
<li><a id="changeBackground" href="#">Change Background Color...</a></li>
<li class="dropdown-submenu">
<a tabindex="-1">Rotate Model<span class="pull-right fui-arrow-right"></span></a>
......@@ -1059,21 +1059,13 @@
<div id="threeContainer"></div>
<canvas id="gpuMathCanvas"></canvas>
<a href="#" id="showAdvancedOptions">Show Advanced Options</a>
<div id="controls">
<a href="#" id="hideAdvancedOptions">Hide Advanced Options</a><br/><br/>
<div class="sliderInput floatRight" id="creasePercent">
<span class="label-slider">Fold Percent : </span><div class="flat-slider ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-content"></div>
<input value="" placeholder="" class="float form-control" type="text">&nbsp;&nbsp;%
</div><br/><br/>
<div id="simButtons" class="alignRight">
<a href="#" id="start" class="paddingBottom btn btn-lg btn-success">Start Simulation</a>
<a href="#" id="pause" class="paddingBottom btn btn-lg btn-warning">Pause Simulation</a>
<a href="#" id="reset" class="paddingBottom btn btn-lg btn-default">Reset</a>
<div id="stepForwardOptions" class="floatRight">
<a href="#" id="stepForward" class="btn btn-lg btn-default">Step Forward</a>
<label>Num Steps:</label> &nbsp;&nbsp;<input id="numSteps" value="100" placeholder="" class="int form-control" type="text">
<br/><br/>
</div>
</div>
<!--<b>Simulation Type:</b><br/>-->
<!--<div class="indent">-->
<!--<label class="radio">-->
......@@ -1095,10 +1087,7 @@
<input id="userInteractionEnabled" data-toggle="checkbox" class="custom-checkbox layersSelector" type="checkbox"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
Allow User Interaction
</label>
</div><br/>
<div class="fullWidth alignRight">
<a href="#" id="shouldCenterGeo" class="displayBlock btn btn-lg btn-default">Re-center geometry</a>
</div><br/>
</div><br/><br/>
<div class="fullWidth">
<a href="#" class="seeMore closed" data-id="simulationSettings"><span class="fui-triangle-down"></span><b>Simulation Settings:</b></a><a class="about" href="#" id="aboutStiffness"><span class="fui-question-circle"></span></a><br/>
<div id="simulationSettings" class="hide">
......@@ -1138,9 +1127,20 @@
<div class="fullWidth">
<a href="#" class="seeMore closed" data-id="animationsSettings"><span class="fui-triangle-down"></span><b>Animation Settings:</b></a><a class="about" href="#" id="aboutAnimation"><span class="fui-question-circle"></span></a><br/>
<div id="animationsSettings" class="fullWidth hide">
<div id="simButtons" class="alignRight">
<a href="#" id="start" class="paddingBottom btn btn-lg btn-success">Start Simulation</a>
<a href="#" id="pause" class="paddingBottom btn btn-lg btn-warning">Pause Simulation</a>
<a href="#" id="reset" class="paddingBottom btn btn-lg btn-default">Reset</a>
<div id="stepForwardOptions" class="floatRight">
<a href="#" id="stepForward" class="btn btn-lg btn-default">Step Forward</a>
</div>
</div>
<div class="doubleIndent">
<span class="smallTxt">&Delta;t = <span id="deltaT"></span> seconds</span><br/>
<span class="smallTxt">Num simulation steps per frame: &nbsp;&nbsp;<input value="" placeholder="" class="numStepsPerRender int form-control" type="text"></span>
<span class="smallTxt">Num simulation steps per frame: &nbsp;&nbsp;<input value="" placeholder="" class="numStepsPerRender int form-control" type="text"></span><br/><br/>
<div class="fullWidth alignRight">
<a href="#" id="shouldCenterGeo" class="displayBlock btn btn-lg btn-default">Re-center geometry</a>
</div>
</div>
</div>
</div><br/>
......@@ -1155,6 +1155,19 @@
<div class="extraSpace"></div>
</div>
<div id="svgViewer"></div>
<div id="controlsBottom">
<div class="sliderInput floatRight" id="creasePercentBottom">
<div class="flat-slider ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-content"></div>
</div>
<div id="flatIndicator" class="smallTxt">
<img src="assets/flatcraneSmall.png"/>
Flat
</div>
<div id="foldedIndicator" class="smallTxt">
<img src="assets/foldedCraneSmall.png"/>
Folded
</div>
</div>
<div id="controlsLeft" class="flipped">
<div>
<b>View Settings:</b><br/><br/>
......@@ -1643,7 +1656,7 @@
<a href="https://en.wikipedia.org/wiki/Deformation_(mechanics)#Engineering_strain" target="_blank">
Cauchy strain or engineering strain</a> is a unitless measurement of how much a material is being stretched or compressed under load.
The <b>Strain Visualization</b> illustrates the strain across an origami sheet by mapping it to a color from blue (no strain) to red (max strain).<br/><br/>
<img style="width: 100%;" src="strain.jpg" />
<img style="width: 100%;" src="assets/doc/strain.jpg" />
</p>
</div>
</div><!-- /.modal-content -->
......
......@@ -448,34 +448,34 @@ function initControls(globals){
globals.materialHasChanged = true;
});
var creasePercentNavSlider, creasePercentSlider;
creasePercentSlider = setSliderInput("#creasePercent", globals.creasePercent*100, -100, 100, 1, function(val){
var creasePercentSlider = setSliderInput("#creasePercent", globals.creasePercent*100, -100, 100, 1, function(val){
globals.creasePercent = val/100;
globals.shouldChangeCreasePercent = true;
creasePercentNavSlider.slider('value', val);
$('#currentFoldPercent').val(val);
updateCreasePercent();
});
creasePercentNavSlider = setSlider("#creasePercentNav>div", globals.creasePercent*100, -100, 100, 1, function(val){
var creasePercentNavSlider = setSlider("#creasePercentNav>div", globals.creasePercent*100, -100, 100, 1, function(val){
globals.creasePercent = val/100;
globals.shouldChangeCreasePercent = true;
creasePercentSlider.slider('value', val);
$('#creasePercent>input').val(val);
$('#currentFoldPercent').val(val);
updateCreasePercent();
});
var creasePercentBottomSlider = setSlider("#creasePercentBottom>div", globals.creasePercent*100, 0, 100, 1, function(val){
globals.creasePercent = val/100;
globals.shouldChangeCreasePercent = true;
updateCreasePercent()
});
setInput("#currentFoldPercent", globals.creasePercent*100, function(val){
globals.creasePercent = val/100;
globals.shouldChangeCreasePercent = true;
creasePercentSlider.slider('value', val);
creasePercentNavSlider.slider('value', val);
$('#creasePercent>input').val(val);
updateCreasePercent();
}, -100, 100);
function updateCreasePercent(){
var val = (globals.creasePercent*100).toFixed(2);
var val = (globals.creasePercent*100);
creasePercentSlider.slider('value', val);
creasePercentNavSlider.slider('value', val);
$('#currentFoldPercent').val(val);
$('#creasePercent>input').val(val);
creasePercentBottomSlider.slider('value', val);
$('#currentFoldPercent').val(val.toFixed(0));
$('#creasePercent>input').val(val.toFixed(0));
}
// updateCreasePercent();
......@@ -622,12 +622,7 @@ function initControls(globals){
globals.model.reset();
});
setLink("#stepForward", function(){
var numSteps = $("#numSteps").val();
numSteps = parseInt(numSteps);
if (isNaN(numSteps)) return;
if (numSteps<=0) return;
$("#numSteps").val(numSteps);
globals.model.step(numSteps);
globals.model.step(globals.numSteps);
$("#reset").css('display', 'inline-block');
});
......@@ -659,6 +654,33 @@ function initControls(globals){
$('#aboutUserInteractionModal').modal('show');
});
setLink("#showAdvancedOptions", function(){
$("#showAdvancedOptions").hide();
$("#controlsBottom").animate({
bottom: "-80px"
}, function(){
$("#controls").animate({
right: 0
});
$("#controlsLeft").animate({
left: 0
});
});
});
setLink("#hideAdvancedOptions", function(){
$("#controls").animate({
right: "-400px"
}, function(){
$("#showAdvancedOptions").show();
$("#controlsBottom").animate({
bottom: 0
});
});
$("#controlsLeft").animate({
left: "-420px"
});
});
function setButtonGroup(id, callback){
$(id+" a").click(function(e){
e.preventDefault();
......
......@@ -104,8 +104,9 @@ function initGlobals(){
_globals.creasePercent = percent;
percent *= 100;
$("#creasePercent>div").slider({value:percent});
$("#creasePercent>input").val(percent);
$("#creasePercent>input").val(percent.toFixed(0));
$("#creasePercentNav>div").slider({value:percent});
$("#creasePercentBottom>div").slider({value:percent});
}
_globals.setCreasePercent = setCreasePercent;
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment