diff --git a/assets/flatcraneSmall.png b/assets/flatcraneSmall.png
index 9b19d8108aa52629e80be4f0c17485d9162e6097..0cc32470475e2143c8b05fa2da068c86803c1eab 100644
Binary files a/assets/flatcraneSmall.png and b/assets/flatcraneSmall.png differ
diff --git a/assets/grab.png b/assets/grab.png
new file mode 100644
index 0000000000000000000000000000000000000000..d18ee734b6fb31ae6b227ca206eedbe750f448c3
Binary files /dev/null and b/assets/grab.png differ
diff --git a/assets/grabSmall.png b/assets/grabSmall.png
new file mode 100644
index 0000000000000000000000000000000000000000..e88a27056f595d475542173cdd1c3476000fd1f8
Binary files /dev/null and b/assets/grabSmall.png differ
diff --git a/assets/hyparColor.png b/assets/hyparColor.png
new file mode 100644
index 0000000000000000000000000000000000000000..b7dd4896e772cd29c996112974c58cf525b998e0
Binary files /dev/null and b/assets/hyparColor.png differ
diff --git a/assets/hyparColorSmall.png b/assets/hyparColorSmall.png
new file mode 100644
index 0000000000000000000000000000000000000000..65436a3a587e44cf7af691e01b7729d113459dc8
Binary files /dev/null and b/assets/hyparColorSmall.png differ
diff --git a/assets/hyparStrain.png b/assets/hyparStrain.png
new file mode 100644
index 0000000000000000000000000000000000000000..f072ad6e745b30530813a465b782c0bdb7a93123
Binary files /dev/null and b/assets/hyparStrain.png differ
diff --git a/assets/hyparStrainSmall.png b/assets/hyparStrainSmall.png
new file mode 100644
index 0000000000000000000000000000000000000000..adf89d3604e79fa30c0cf0998fa14ec8338b6c23
Binary files /dev/null and b/assets/hyparStrainSmall.png differ
diff --git a/assets/rotate.png b/assets/rotate.png
new file mode 100644
index 0000000000000000000000000000000000000000..b4d2bcdfb6a76917f8b74ff14e44f31c8383f890
Binary files /dev/null and b/assets/rotate.png differ
diff --git a/assets/rotateSmall.png b/assets/rotateSmall.png
new file mode 100644
index 0000000000000000000000000000000000000000..ae489190cde2c117cb72b009fc40b342296aa839
Binary files /dev/null and b/assets/rotateSmall.png differ
diff --git a/css/main.css b/css/main.css
index 1dd11bbaeab93fc55d21d7dbe7923e97b4a30b70..ca131b57b9bcb3548dc51c718ea8ca3cd2fd4f48 100755
--- a/css/main.css
+++ b/css/main.css
@@ -1,5 +1,6 @@
html{
width:100%;
+ min-width: 775px;
height:100%;
overflow: hidden;
padding:0;
@@ -9,6 +10,7 @@ html{
body{
width:100%;
+ min-width: 775px;
height:100%;
padding:0;
margin:0;
@@ -51,49 +53,117 @@ p{
}
#controlsBottom{
- width: 50%;
+ width:100%;
+ min-width: 775px;
+ max-width: 1000px;
margin: auto;
position: absolute;
bottom: 0;
right: 0;
left: 0;
- height: 90px;
+ height:110px;
font-weight: 900;
}
-#controlsBottom>.sliderInput{
+#controlsBottom>div{
+ display: inline-block;
+}
+#bottomSliderContainer{
+ position: absolute;
+ right:350px;
+ left:250px;
+ margin-top: 18px;
+}
+#creasePercentBottom{
width: 100%;
- margin-top:20px;
+ margin-top: 20px;
}
-#controlsBottom>.sliderInput>.flat-slider{
+#creasePercentBottom>.flat-slider{
width: 100%;
margin: 0;
background: #e8e8e8;
}
-#flatIndicator{
+.sliderEndPt{
text-align: center;
width: 100px;
position: absolute;
- top: 0;
- left: -110px;
- line-height: 10px;
+ top: -30px;
color: #34495e;
+ line-height: 18px;
+}
+#flatIndicator{
+ left: -50px;
}
-#flatIndicator>img{
+.sliderEndPt>img{
width:100%;
}
#foldedIndicator{
+ right: -50px;
+}
+.sliderEndPt>.fui-triangle-up{
+ display: block;
+ color: #34495e;
+ margin-top: 10px;
+}
+.sliderEndPtLabel{
+ color: #34495e;
+ display: block;
+ /*margin-top: 30px;*/
+}
+
+#viewToggle{
+ left: 30px;
+}
+#controlsToggle{
+ right: 140px;
+}
+.preserveAspect{
+ width: auto;
+}
+.bigToggle{
+ height:90px;
+ width:140px;
text-align: center;
- width: 100px;
position: absolute;
- top: 0;
- right: -110px;
- line-height: 10px;
+ font-size:14px;
+ /*border: 1px solid #34495e;*/
+}
+.bigToggle>div{
+ background: #e8e8e8;
+ height:70px;
+ overflow: hidden;
+ border-radius: 10px;
+ margin-bottom: 5px;
+}
+.bigToggle>div div{
+ padding: 5px;
+ width:50%;
+ height: 100%;
+ display: inline-block;
+ text-align: center;
+ font-size: 12px;
color: #34495e;
}
-#foldedIndicator>img{
+.bigToggle div.active{
+ background: #bdc3c7;
+}
+.bigToggle img{
+ display: inline-block;
+ height:40px;
+}
+.bigToggle span{
+ display: block;
width:100%;
}
+#resetBottom{
+ position: absolute;
+ right:30px;
+ top: 13px;
+ color: #34495e;
+ font-weight: 900;
+}
+
+
#controls{
position: absolute;
top:53px;
diff --git a/index.html b/index.html
index a1cabc0b36b64b86329e55372153fe4a7383188b..8c6fe638f3d5e6b426011720f5b1c7205bada121 100755
--- a/index.html
+++ b/index.html
@@ -1062,7 +1062,6 @@
<div id="threeContainer"></div>
<canvas id="gpuMathCanvas"></canvas>
<div id="basicUI">
- Drag to rotate, scroll to zoom.<br/><br/>
<!--<div class="inlineBlock fullWidth">-->
<!--<a class="about" href="#" id="aboutUserInteraction"><span class="fui-question-circle"></span></a>-->
<!--<label style="margin-right:40px" class="checkbox floatRight" for="userInteractionEnabled">-->
@@ -1171,17 +1170,34 @@
<div id="svgViewer"></div>
<div id="helper">Load more origami patterns here!</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 id="viewToggle" class="bigToggle">
+ <div>
+ <a href="#" id="colorToggle"><div class="active"><img src="assets/hyparColorSmall.png"/><span>Material</span></div></a><a href="#" id="strainToggle"><div><img src="assets/hyparStrainSmall.png"/><span>Strain</span></div></a>
+ </div>
+ View Mode
+ </div>
+ <div id="bottomSliderContainer">
+ <div class="sliderInput" id="creasePercentBottom">
+ <div class="flat-slider ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-content"></div>
+ </div>
+ <a href="#" id="flatIndicator" class="sliderEndPt smallTxt">
+ <img src="assets/flatcraneSmall.png"/>
+ <span class="fui-triangle-up"></span>
+ <span class="sliderEndPtLabel">Flat</span>
+ </a>
+ <a href="#" id="foldedIndicator" class="sliderEndPt smallTxt">
+ <img src="assets/foldedCraneSmall.png"/>
+ <span class="fui-triangle-up"></span>
+ <span class="sliderEndPtLabel">Folded</span>
+ </a>
+ </div>
+ <div id="controlsToggle" class="bigToggle">
+ <div>
+ <a href="#" id="orbitToggle"><div class="active"><img class="preserveAspect" src="assets/rotateSmall.png"/><span>Rotate 3D</span></div></a><a href="#" id="grabToggle"><div><img class="preserveAspect" src="assets/grabSmall.png"/><span>Grab</span></div></a>
+ </div>
+ Control Mode
</div>
- <a href="#" id="flatIndicator" class="smallTxt">
- <img src="assets/flatcraneSmall.png"/>
- Flat
- </a>
- <a href="#" id="foldedIndicator" class="smallTxt">
- <img src="assets/foldedCraneSmall.png"/>
- Folded
- </a>
+ <a href="#" id="resetBottom" class="btn btn-lg btn-default">Reset</a>
</div>
<div id="controlsLeft" class="flipped">
<div>
@@ -1720,7 +1736,8 @@
<span aria-hidden="true">×</span>
</button>
<p><b>BACKGROUND COLOR</b><br/><br/>
- Color (rgb hex) : <input id="backgroundColor" value="" placeholder="" class="hexVal form-control" type="text">
+ Color (rgb hex) : <input id="backgroundColor" value="" placeholder="" class="hexVal form-control" type="text"><br/>
+ <span class="smallTxt">Hex colors are 6 digit alphanumeric codes that specify different colors. You can get these codes using a <a href="https://www.webpagefx.com/web-design/color-picker/" target="_blank">color picker</a>.</span>
</p>
</div>
</div><!-- /.modal-content -->
diff --git a/js/controls.js b/js/controls.js
index 10ed4b23d83e5c6f34828c76a50313a32f9a6b05..8fdc5851883118e01aa9faf8afce2b659c49fba0 100755
--- a/js/controls.js
+++ b/js/controls.js
@@ -537,13 +537,30 @@ function initControls(globals){
else $("#coloredMaterialOptions").hide();
if (globals.colorMode == "axialStrain") $("#axialStrainMaterialOptions").show();
else $("#axialStrainMaterialOptions").hide();
- setRadio("colorMode", globals.colorMode, function(val){
+
+ function setColorMode(val){
globals.colorMode = val;
- if (val == "color") $("#coloredMaterialOptions").show();
- else $("#coloredMaterialOptions").hide();
+ if (val == "color") {
+ $("#coloredMaterialOptions").show();
+ $("#colorToggle>div").addClass("active");
+ $("#strainToggle>div").removeClass("active");
+ }
+ else {
+ $("#coloredMaterialOptions").hide();
+ $("#colorToggle>div").removeClass("active");
+ $("#strainToggle>div").addClass("active");
+ }
if (val == "axialStrain") $("#axialStrainMaterialOptions").show();
else $("#axialStrainMaterialOptions").hide();
+ $(".radio>input[value="+val+"]").prop("checked", true);
globals.model.setMeshMaterial();
+ }
+ setRadio("colorMode", globals.colorMode, setColorMode);
+ setLink("#colorToggle", function(){
+ setColorMode("color");
+ });
+ setLink("#strainToggle", function(){
+ setColorMode("axialStrain");
});
setHexInput("#color1", globals.color1, function(val){
@@ -632,6 +649,9 @@ function initControls(globals){
if (!globals.simulationRunning) $("#reset").hide();
globals.model.reset();
});
+ setLink("#resetBottom", function(){
+ globals.model.reset();
+ });
setLink("#stepForward", function(){
globals.model.step(globals.numSteps);
$("#reset").css('display', 'inline-block');
@@ -641,12 +661,26 @@ function initControls(globals){
globals.strainClip = val;
}, 0.0001, 100);
- setCheckbox($("#userInteractionEnabled"), globals.userInteractionEnabled, function(val){
+ setCheckbox($("#userInteractionEnabled"), globals.userInteractionEnabled, enableInteraction);
+ function enableInteraction(val){
globals.userInteractionEnabled = val;
+ $("#userInteractionEnabled").prop('checked', val);
if (val) {
+ $("#grabToggle>div").addClass("active");
+ $("#orbitToggle>div").removeClass("active");
globals.rotateModel = null;
globals.threeView.resetModel();
- } else globals.UI3D.hideHighlighters();
+ } else {
+ $("#grabToggle>div").removeClass("active");
+ $("#orbitToggle>div").addClass("active");
+ globals.UI3D.hideHighlighters();
+ }
+ }
+ setLink("#grabToggle", function(){
+ enableInteraction(true);
+ });
+ setLink("#orbitToggle", function(){
+ enableInteraction(false);
});
setCheckbox($("#foldUseAngles"), globals.foldUseAngles, function(val){
@@ -668,7 +702,7 @@ function initControls(globals){
setLink("#showAdvancedOptions", function(){
$("#basicUI").hide();
$("#controlsBottom").animate({
- bottom: "-90px"
+ bottom: "-140px"
}, function(){
$("#controls").animate({
right: 0