Commit 4b8c7afd authored by amandaghassaei's avatar amandaghassaei
Browse files

simpler ui

parent 7c067951
...@@ -40,7 +40,7 @@ body{ ...@@ -40,7 +40,7 @@ body{
position: absolute; position: absolute;
bottom:0; bottom:0;
left:0; left:0;
/*width: 420px;*/ width: 420px;
top:53px; top:53px;
padding:20px 20px; padding:20px 20px;
max-height: 100%; max-height: 100%;
...@@ -350,4 +350,22 @@ input.form-control.bigInput{ ...@@ -350,4 +350,22 @@ input.form-control.bigInput{
.modal img{ .modal img{
width: 200px; width: 200px;
}
a.seeMore{
float:none!important;
color: #34495e;
}
a.seeMore>.fui-triangle-down{
display: inline-block;
margin-right:10px;
}
a.seeMore.closed>.fui-triangle-down{
-ms-transform: rotate(-90deg); /* IE 9 */
-webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */
transform: rotate(-90deg);
}
.hide{
display: none;
} }
\ No newline at end of file
...@@ -466,6 +466,7 @@ ...@@ -466,6 +466,7 @@
<li><a id="exportFOLD" href="#">Save Simulation as FOLD...</a></li> <li><a id="exportFOLD" href="#">Save Simulation as FOLD...</a></li>
<li><a id="exportSTL" href="#">Save Simulation as STL...</a></li> <li><a id="exportSTL" href="#">Save Simulation as STL...</a></li>
<li><a id="exportOBJ" href="#">Save Simulation as OBJ...</a></li> <li><a id="exportOBJ" href="#">Save Simulation as OBJ...</a></li>
<li class="divider"></li>
<li><a id="saveSVG" href="#">Save Pattern as SVG...</a></li> <li><a id="saveSVG" href="#">Save Pattern as SVG...</a></li>
<!--<li><a id="saveSVGScreenshot" href="#">Save SVG screenshot</a></li>--> <!--<li><a id="saveSVGScreenshot" href="#">Save SVG screenshot</a></li>-->
</ul> </ul>
...@@ -544,55 +545,61 @@ ...@@ -544,55 +545,61 @@
Num Steps: &nbsp;&nbsp;<input id="numSteps" value="100" placeholder="" class="form-control" type="text"> Num Steps: &nbsp;&nbsp;<input id="numSteps" value="100" placeholder="" class="form-control" type="text">
<a href="#" id="stepForward" class="btn btn-lg btn-default">Step Forward</a> <a href="#" id="stepForward" class="btn btn-lg btn-default">Step Forward</a>
<br/><br/> <br/><br/>
</div><br/> </div>
<a href="#" id="shouldCenterGeo" class="floatRight btn btn-lg btn-default">Re-center geometry</a>
</div> </div>
<b>Simulation Type:</b><br/> <!--<b>Simulation Type:</b><br/>-->
<div class="indent"> <!--<div class="indent">-->
<label class="radio">
<input name="simType" value="dynamic" data-toggle="radio" class="custom-radio" type="radio"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
Compliant Dynamic Simulation <a class="about floatRight" href="#" id="aboutDynamicSim"><span class="fui-question-circle"></span></a>
</label>
<!--<label class="radio">--> <!--<label class="radio">-->
<!--<input name="simType" value="static" data-toggle="radio" class="custom-radio" type="radio"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>--> <!--<input name="simType" value="dynamic" data-toggle="radio" class="custom-radio" type="radio"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>-->
<!--Compliant Static Simulation <a class="about floatRight" href="#" id="aboutStaticSim"><span class="fui-question-circle"></span></a>--> <!--Compliant Dynamic Simulation <a class="about floatRight" href="#" id="aboutDynamicSim"><span class="fui-question-circle"></span></a>-->
<!--</label>--> <!--</label>-->
<!--<label class="radio">--> <!--&lt;!&ndash;<label class="radio">&ndash;&gt;-->
<!--<input name="simType" value="rigid" data-toggle="radio" class="custom-radio" type="radio"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>--> <!--&lt;!&ndash;<input name="simType" value="static" data-toggle="radio" class="custom-radio" type="radio"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>&ndash;&gt;-->
<!--Rigid Static Simulation <a class="about floatRight" href="#" id="aboutRigidSim"><span class="fui-question-circle"></span></a>--> <!--&lt;!&ndash;Compliant Static Simulation <a class="about floatRight" href="#" id="aboutStaticSim"><span class="fui-question-circle"></span></a>&ndash;&gt;-->
<!--</label>--> <!--&lt;!&ndash;</label>&ndash;&gt;-->
</div><br/> <!--&lt;!&ndash;<label class="radio">&ndash;&gt;-->
<!--&lt;!&ndash;<input name="simType" value="rigid" data-toggle="radio" class="custom-radio" type="radio"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>&ndash;&gt;-->
<!--&lt;!&ndash;Rigid Static Simulation <a class="about floatRight" href="#" id="aboutRigidSim"><span class="fui-question-circle"></span></a>&ndash;&gt;-->
<!--&lt;!&ndash;</label>&ndash;&gt;-->
<!--</div><br/>-->
<label class="checkbox" for="userInteractionEnabled"> <label class="checkbox" for="userInteractionEnabled">
<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> <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 Allow User Interaction
</label><br/> </label><br/>
<b>Stiffness Settings:</b><a class="floatRight about" href="#" id="aboutStiffness"><span class="fui-question-circle"></span></a><br/><br/> <a href="#" class="seeMore closed" data-id="simulationSettings"><span class="fui-triangle-down"></span><b>Simulation Settings:</b></a><a class="floatRight about" href="#" id="aboutStiffness"><span class="fui-question-circle"></span></a><br/><br/>
<div class="sliderInput" id="axialStiffness"> <div id="simulationSettings" class="hide">
<span class="label-slider">Axial Stiffness : </span><div class="flat-slider ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-content"></div> <div class="sliderInput" id="axialStiffness">
<input value="" placeholder="" class="form-control" type="text"> <span class="label-slider">Axial Stiffness : </span><div class="flat-slider ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-content"></div>
</div> <input value="" placeholder="" class="form-control" type="text">
<div class="sliderInput" id="creaseStiffness"> </div>
<span class="label-slider">Fold Stiffness : </span><div class="flat-slider ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-content"></div> <div class="sliderInput" id="creaseStiffness">
<input value="" placeholder="" class="form-control" type="text"> <span class="label-slider">Fold Stiffness : </span><div class="flat-slider ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-content"></div>
</div> <input value="" placeholder="" class="form-control" type="text">
<div class="sliderInput" id="panelStiffness"> </div>
<span class="label-slider">Facet Stiffness : </span><div class="flat-slider ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-content"></div> <div class="sliderInput" id="panelStiffness">
<input value="" placeholder="" class="form-control" type="text"> <span class="label-slider">Facet Stiffness : </span><div class="flat-slider ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-content"></div>
</div> <input value="" placeholder="" class="form-control" type="text">
<div class="sliderInput" id="percentDamping"> </div>
<span class="label-slider">Damping (0-1): </span><div class="flat-slider ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-content"></div> <div class="sliderInput" id="percentDamping">
<input value="" placeholder="" class="form-control" type="text"> <span class="label-slider">Damping (0-1): </span><div class="flat-slider ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-content"></div>
<input value="" placeholder="" class="form-control" type="text">
</div>
<br/><br/>
</div> </div>
<br/><br/> <a href="#" class="seeMore closed" data-id="animationsSettings"><span class="fui-triangle-down"></span><b>Animation Settings:</b></a><a class="about floatRight" href="#" id="aboutAnimation"><span class="fui-question-circle"></span></a><br/>
<b>Error:</b><a class="about floatRight" href="#" id="aboutError"><span class="fui-question-circle"></span></a><br/> <div id="animationsSettings" class="hide">
<div class="indent">
<label>Average node error: <span id="globalError"></span></label>
</div><br/>
<b>Animation Settings:</b><a class="about floatRight" href="#" id="aboutAnimation"><span class="fui-question-circle"></span></a><br/>
<div class="indent"> <div class="indent">
<span class="smallTxt">&Delta;t = <span id="deltaT"></span> seconds</span><br/> <span class="smallTxt">&Delta;t = <span id="deltaT"></span> seconds</span><br/>
<span class="smallTxt">Num simulation steps per render: &nbsp;&nbsp;<input id="numStepsPerRender" value="" placeholder="" class="int form-control" type="text"></span><br/><br/> <span class="smallTxt">Num simulation steps per render: &nbsp;&nbsp;<input id="numStepsPerRender" value="" placeholder="" class="int form-control" type="text"></span><br/><br/>
<a href="#" id="shouldCenterGeo" class="floatRight btn btn-lg btn-default">Re-center geometry</a>
</div> </div>
</div><br/><br/>
<b>Error:</b><a class="about floatRight" href="#" id="aboutError"><span class="fui-question-circle"></span></a><br/>
<div class="indent">
<label>Average node error: <span id="globalError"></span></label>
</div><br/>
<div class="extraSpace"></div> <div class="extraSpace"></div>
</div> </div>
<div id="svgViewer"></div> <div id="svgViewer"></div>
...@@ -601,8 +608,8 @@ ...@@ -601,8 +608,8 @@
<div> <div>
<b>View Settings:</b><br/><br/> <b>View Settings:</b><br/><br/>
<div class="indent"> <div class="indent">
Mesh Material: <a href="#" class="seeMore open" data-id="materialSettings"><span class="fui-triangle-down"></span>Mesh Material:</a><br/>
<div class="indent"> <div id="materialSettings" class="indent">
<label class="checkbox" for="meshVisible"> <label class="checkbox" for="meshVisible">
<input id="meshVisible" data-toggle="checkbox" class="custom-checkbox layersSelector" type="checkbox"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span> <input id="meshVisible" data-toggle="checkbox" class="custom-checkbox layersSelector" type="checkbox"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
Mesh Visible Mesh Visible
...@@ -622,7 +629,7 @@ ...@@ -622,7 +629,7 @@
</label> </label>
<label class="radio"> <label class="radio">
<input name="colorMode" value="axialStrain" data-toggle="radio" class="custom-radio" type="radio"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span> <input name="colorMode" value="axialStrain" data-toggle="radio" class="custom-radio" type="radio"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
Axial Strain Visualization<a class="about floatRight" href="#" id="aboutAxialStrain"><span class="fui-question-circle"></span></a> Strain Visualization<a class="about floatRight" href="#" id="aboutAxialStrain"><span class="fui-question-circle"></span></a>
</label> </label>
<div id="axialStrainMaterialOptions" class="indent"> <div id="axialStrainMaterialOptions" class="indent">
<label>Max Strain: &nbsp;&nbsp;</label> <label>Max Strain: &nbsp;&nbsp;</label>
...@@ -630,8 +637,9 @@ ...@@ -630,8 +637,9 @@
</div> </div>
</div> </div>
</div><br/> </div><br/>
Edges:
<div class="indent"> <a href="#" class="seeMore closed" data-id="edgeVisiblity"><span class="fui-triangle-down"></span>Edge Visiblity</a>:
<div id="edgeVisiblity" class="hide indent">
<label class="checkbox" for="edgesVisible"> <label class="checkbox" for="edgesVisible">
<input id="edgesVisible" data-toggle="checkbox" class="custom-checkbox layersSelector" type="checkbox"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span> <input id="edgesVisible" data-toggle="checkbox" class="custom-checkbox layersSelector" type="checkbox"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
Edges Visible Edges Visible
...@@ -654,7 +662,7 @@ ...@@ -654,7 +662,7 @@
Undriven Edges <span id="numPassive"></span> Undriven Edges <span id="numPassive"></span>
</label> </label>
</div> </div>
</div><br/> </div><br/><br/>
<!--Rendering:--> <!--Rendering:-->
<!--<div class="indent">--> <!--<div class="indent">-->
<!--<label class="checkbox" for="ambientOcclusion">--> <!--<label class="checkbox" for="ambientOcclusion">-->
...@@ -662,16 +670,14 @@ ...@@ -662,16 +670,14 @@
<!--Ambient Occlusion--> <!--Ambient Occlusion-->
<!--</label>--> <!--</label>-->
<!--</div>--> <!--</div>-->
VR: <a class="about floatRight" href="#" id="aboutVR"><span class="fui-question-circle"></span></a> <a href="#" class="seeMore closed" data-id="virtualReality"><span class="fui-triangle-down"></span>Virtual Reality:</a>
<div class="indent smallTxt"> <div id="virtualReality" class="hide indent smallTxt">
Status: &nbsp;<span id="VRstatus"></span> Status: &nbsp;<span id="VRstatus"></span><a class="about floatRight" href="#" id="aboutVR"><span class="fui-question-circle"></span></a>
<br/>
<div id="VRoptions"> <div id="VRoptions">
</div> </div>
</div><br/> </div><br/><br/>
View Angle:<br/><br/> <a href="#" class="seeMore closed" data-id="cameraAngle"><span class="fui-triangle-down"></span>View Angle:</a><br/><br/>
<div class="indent"> <div id="cameraAngle" class="hide indent">
<a href="#" id="cameraZ" class="paddingBottom btn btn-lg btn-default">Front</a> <a href="#" id="cameraZ" class="paddingBottom btn btn-lg btn-default">Front</a>
<a href="#" id="cameraMinusZ" class="paddingBottom btn btn-lg btn-default">Back</a> <a href="#" id="cameraMinusZ" class="paddingBottom btn btn-lg btn-default">Back</a>
<a href="#" id="cameraX" class="paddingBottom btn btn-lg btn-default">Right</a> <a href="#" id="cameraX" class="paddingBottom btn btn-lg btn-default">Right</a>
...@@ -774,10 +780,10 @@ ...@@ -774,10 +780,10 @@
<br/><br/> <br/><br/>
When you open this page with the appropriate browser and a Vive connected through Steam VR, you will see a button that says "Enter VR". Clicking this will When you open this page with the appropriate browser and a Vive connected through Steam VR, you will see a button that says "Enter VR". Clicking this will
put the app in an interactive VR mode. The hand controllers will allow you to grab the origami mesh and pull on it. put the app in an interactive VR mode. The hand controllers will allow you to grab the origami mesh and pull on it.
This is especially cool if you set the mesh material to <b>Axial Strain Visualization</b> so you can see how your interactions This is especially cool if you set the <b>Mesh Material</b> to <b>Strain Visualization</b> so you can see how your interactions
change the internal strains in the material. change the internal strains in the material.
<br/><br/> <br/><br/>
If the simulation looks choppy, consider lowering the <b>Num simulation per render</b> setting in the right hand menu. If the simulation looks choppy, consider lowering the <b>Num simulation steps per render</b> setting under <b>Animation Settings</b> in the right hand menu.
</p> </p>
</div> </div>
</div><!-- /.modal-content --> </div><!-- /.modal-content -->
...@@ -940,7 +946,7 @@ ...@@ -940,7 +946,7 @@
Increasing the <b>Axial Stiffness</b> will tighten these constraints and Increasing the <b>Axial Stiffness</b> will tighten these constraints and
lower the error in the simulation.<br/> lower the error in the simulation.<br/>
<br/> <br/>
To visualize the error of each node graphically, select <b>Axial Strain Visualization</b> under <b>Mesh Material</b> To visualize the error of each node graphically, select <b>Strain Visualization</b> under <b>Mesh Material</b>
in the left menu. in the left menu.
</p> </p>
</div> </div>
...@@ -1010,7 +1016,7 @@ ...@@ -1010,7 +1016,7 @@
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span> <span aria-hidden="true">&times;</span>
</button> </button>
<p><b>Axial Strain</b><br/><br/> <p><b>Strain Visualization</b><br/><br/>
.... ....
</p> </p>
</div> </div>
......
...@@ -121,6 +121,40 @@ function initControls(globals){ ...@@ -121,6 +121,40 @@ function initControls(globals){
$("#svgViewer").hide(); $("#svgViewer").hide();
}); });
setLink(".seeMore", function(e){
var $target = $(e.target);
if (!$target.hasClass("seeMore")) $target = $target.parent();
var $div = $("#"+ $target.data("id"));
if ($target.hasClass("closed")){
$target.removeClass("closed");
$target.addClass("open");
AnimateRotate(-90, 0, $target.children("span"));
$div.removeClass("hide");
$div.show();
} else {
$target.removeClass("open");
$target.addClass("closed");
AnimateRotate(0, -90, $target.children("span"));
$div.hide();
}
});
function AnimateRotate(from, to, $elem) {
// we use a pseudo object for the animation
// (starts from `0` to `angle`), you can name it as you want
$({deg: from}).animate({deg: to}, {
duration: 200,
step: function(now) {
// in the step-callback (that is fired each step of the animation),
// you can use the `now` paramter which contains the current
// animation-position (`0` up to `angle`)
$elem.css({
transform: 'rotate(' + now + 'deg)'
});
}
});
}
setRadio("simType", globals.simType, function(val){ setRadio("simType", globals.simType, function(val){
globals.simType = val; globals.simType = val;
......
...@@ -15,6 +15,14 @@ function initModel(globals){ ...@@ -15,6 +15,14 @@ function initModel(globals){
backside.visible = false; backside.visible = false;
setMeshMaterial(); setMeshMaterial();
var lineMaterial = new THREE.LineBasicMaterial({color: 0x000000, linewidth: 1});
var mountainLines = new THREE.LineSegments(geometry);
var valleyLines = new THREE.LineSegments(geometry);
var facetLines = new THREE.LineSegments(geometry);
var hingeLines = new THREE.LineSegments(geometry);
var cutLines = new THREE.LineSegments(geometry);
// var borderLines = new THREE.LineSegments(geometry);
var positions;//place to store buffer geo vertex data var positions;//place to store buffer geo vertex data
var colors;//place to store buffer geo vertex colors var colors;//place to store buffer geo vertex colors
var indices; var indices;
......
Supports Markdown
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