Commit 91a981bc authored by amandaghassaei's avatar amandaghassaei

new ui

parent 35c09151
assets/flatcraneSmall.png

6.12 KB | W: | H:

assets/flatcraneSmall.png

14.8 KB | W: | H:

assets/flatcraneSmall.png
assets/flatcraneSmall.png
assets/flatcraneSmall.png
assets/flatcraneSmall.png
  • 2-up
  • Swipe
  • Onion skin
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;
......
......@@ -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">&times;</span>
</button>
<p><b>BACKGROUND COLOR</b><br/><br/>
Color (rgb hex) : &nbsp;&nbsp;<input id="backgroundColor" value="" placeholder="" class="hexVal form-control" type="text">
Color (rgb hex) : &nbsp;&nbsp;<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 -->
......
......@@ -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
......
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