Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
Amanda Ghassaei
OrigamiSimulator
Commits
e8504634
Commit
e8504634
authored
May 30, 2017
by
amandaghassaei
Browse files
styling
parent
4b8c7afd
Changes
3
Hide whitespace changes
Inline
Side-by-side
css/main.css
View file @
e8504634
...
...
@@ -34,7 +34,7 @@ body{
background
:
rgba
(
10
,
10
,
10
,
0.1
);
}
#controls
>
a
{
float
:
right
;
/*
float:right;
*/
}
#controlsLeft
{
position
:
absolute
;
...
...
@@ -63,6 +63,9 @@ body{
.indent
{
padding-left
:
20px
;
}
.doubleIndent
{
padding-left
:
40px
;
}
#gpuMathCanvas
{
display
:
none
;
...
...
@@ -294,12 +297,19 @@ svg{
margin
:
0
18px
;
}
.about.floatRight
{
.about
{
margin-right
:
10px
;
color
:
#34495e
;
color
:
#34495e
!important
;
font-size
:
18px
;
line-height
:
18px
;
}
#controls
.about
{
position
:
absolute
;
line-height
:
1.7
;
margin-top
:
2px
;
right
:
5px
;
}
#aboutError
{
line-height
:
2.0
...
...
@@ -315,7 +325,8 @@ svg{
margin-left
:
20px
;
}
#stepForward
{
margin-left
:
13px
;
display
:
inline-block
;
margin-right
:
20px
;
}
#creasePercent
{
...
...
@@ -368,4 +379,20 @@ a.seeMore.closed>.fui-triangle-down{
.hide
{
display
:
none
;
}
.inlineBlock
{
display
:
inline-block
;
}
.alignRight
{
text-align
:
right
;
}
.fullWidth
{
width
:
100%
;
}
#simulationSettings
,
#errorInfo
,
#animationsSettings
,
#cameraAngle
,
#edgeVisiblity
,
#virtualReality
,
#materialSettings
{
margin-top
:
15px
;
}
\ No newline at end of file
index.html
View file @
e8504634
...
...
@@ -536,17 +536,15 @@
<div
id=
"threeContainer"
></div>
<canvas
id=
"gpuMathCanvas"
></canvas>
<div
id=
"controls"
>
<div>
<a
href=
"#"
id=
"reset"
class=
"btn floatRight btn-lg btn-default"
>
Reset
</a>
<a
href=
"#"
id=
"start"
class=
"btn floatRight btn-lg btn-success"
>
Start Simulation
</a>
<a
href=
"#"
id=
"pause"
class=
"btn floatRight btn-lg btn-warning"
>
Pause Simulation
</a>
<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"
>
Num Steps:
<input
id=
"numSteps"
value=
"100"
placeholder=
""
class=
"form-control"
type=
"text"
>
<a
href=
"#"
id=
"stepForward"
class=
"btn btn-lg btn-default"
>
Step Forward
</a>
<label>
Num Steps:
</label>
<input
id=
"numSteps"
value=
"100"
placeholder=
""
class=
"form-control"
type=
"text"
>
<br/><br/>
</div>
<a
href=
"#"
id=
"shouldCenterGeo"
class=
"floatRight btn btn-lg btn-default"
>
Re-center geometry
</a>
</div>
<!--<b>Simulation Type:</b><br/>-->
<!--<div class="indent">-->
...
...
@@ -563,41 +561,51 @@
<!--<!–Rigid Static Simulation <a class="about floatRight" href="#" id="aboutRigidSim"><span class="fui-question-circle"></span></a>–>-->
<!--<!–</label>–>-->
<!--</div><br/>-->
<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>
Allow User Interaction
</label><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
id=
"simulationSettings"
class=
"hide"
>
<div
class=
"sliderInput"
id=
"axialStiffness"
>
<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>
<input
value=
""
placeholder=
""
class=
"form-control"
type=
"text"
>
</div>
<div
class=
"sliderInput"
id=
"creaseStiffness"
>
<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>
<input
value=
""
placeholder=
""
class=
"form-control"
type=
"text"
>
</div>
<div
class=
"sliderInput"
id=
"panelStiffness"
>
<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>
<input
value=
""
placeholder=
""
class=
"form-control"
type=
"text"
>
</div>
<div
class=
"sliderInput"
id=
"percentDamping"
>
<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
class=
"inlineBlock fullWidth"
>
<label
class=
"checkbox floatRight"
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>
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
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"
>
<div
class=
"sliderInput paddingBottom"
id=
"axialStiffness"
>
<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>
<input
value=
""
placeholder=
""
class=
"form-control"
type=
"text"
>
</div>
<div
class=
"sliderInput"
id=
"creaseStiffness"
>
<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>
<input
value=
""
placeholder=
""
class=
"form-control"
type=
"text"
>
</div>
<div
class=
"sliderInput"
id=
"panelStiffness"
>
<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>
<input
value=
""
placeholder=
""
class=
"form-control"
type=
"text"
>
</div>
<div
class=
"sliderInput"
id=
"percentDamping"
>
<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>
</div><br/>
</div>
<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/>
<div
id=
"animationsSettings"
class=
"hide"
>
<div
class=
"indent"
>
<span
class=
"smallTxt"
>
Δ
t =
<span
id=
"deltaT"
></span>
seconds
</span><br/>
<span
class=
"smallTxt"
>
Num simulation steps per render:
<input
id=
"numStepsPerRender"
value=
""
placeholder=
""
class=
"int form-control"
type=
"text"
></span><br/><br/>
<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
class=
"doubleIndent"
>
<span
class=
"smallTxt"
>
Δ
t =
<span
id=
"deltaT"
></span>
seconds
</span><br/>
<span
class=
"smallTxt"
>
Num simulation steps per render:
<input
id=
"numStepsPerRender"
value=
""
placeholder=
""
class=
"int form-control"
type=
"text"
></span>
</div>
</div>
</div><br/>
<br/>
</div><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
class=
"fullWidth"
>
<a
href=
"#"
class=
"seeMore closed"
data-id=
"errorInfo"
><span
class=
"fui-triangle-down"
></span><b>
Error:
</b></a><a
class=
"about"
href=
"#"
id=
"aboutError"
><span
class=
"fui-question-circle"
></span></a><br/>
<div
id=
"errorInfo"
class=
"hide smallTxt doubleIndent"
>
<label>
Average node error:
<span
id=
"globalError"
></span></label>
</div>
</div><br/>
<div
class=
"extraSpace"
></div>
...
...
@@ -608,8 +616,10 @@
<div>
<b>
View Settings:
</b><br/><br/>
<div
class=
"indent"
>
<a
href=
"#"
class=
"seeMore open"
data-id=
"materialSettings"
><span
class=
"fui-triangle-down"
></span>
Mesh Material:
</a><br/>
<div
id=
"materialSettings"
class=
"indent"
>
<div>
<a
href=
"#"
class=
"seeMore open"
data-id=
"materialSettings"
><span
class=
"fui-triangle-down"
></span>
Mesh Material:
</a>
</div>
<div
id=
"materialSettings"
class=
"inlineBlock indent"
>
<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>
Mesh Visible
...
...
@@ -636,9 +646,11 @@
<input
id=
"strainClip"
value=
""
placeholder=
""
class=
"float form-control"
type=
"text"
>
%
<br/>
</div>
</div>
<br/>
</div><br/>
<a
href=
"#"
class=
"seeMore closed"
data-id=
"edgeVisiblity"
><span
class=
"fui-triangle-down"
></span>
Edge Visiblity
</a>
:
<div>
<a
href=
"#"
class=
"seeMore closed"
data-id=
"edgeVisiblity"
><span
class=
"fui-triangle-down"
></span>
Edge Visiblity
</a>
:
</div>
<div
id=
"edgeVisiblity"
class=
"hide indent"
>
<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>
...
...
@@ -662,7 +674,9 @@
Undriven Edges
<span
id=
"numPassive"
></span>
</label>
</div>
</div><br/><br/>
<br/>
</div>
<br/>
<!--Rendering:-->
<!--<div class="indent">-->
<!--<label class="checkbox" for="ambientOcclusion">-->
...
...
@@ -670,21 +684,25 @@
<!--Ambient Occlusion-->
<!--</label>-->
<!--</div>-->
<a
href=
"#"
class=
"seeMore closed"
data-id=
"virtualReality"
><span
class=
"fui-triangle-down"
></span>
Virtual Reality:
</a>
<div>
<a
href=
"#"
class=
"seeMore closed"
data-id=
"virtualReality"
><span
class=
"fui-triangle-down"
></span>
Virtual Reality:
</a>
</div>
<div
id=
"virtualReality"
class=
"hide indent smallTxt"
>
Status:
<span
id=
"VRstatus"
></span><a
class=
"about floatRight"
href=
"#"
id=
"aboutVR"
><span
class=
"fui-question-circle"
></span></a>
<div
id=
"VRoptions"
>
</div>
</div><br/><br/>
<a
href=
"#"
class=
"seeMore closed"
data-id=
"cameraAngle"
><span
class=
"fui-triangle-down"
></span>
View Angle:
</a><br/><br/>
<div
id=
"cameraAngle"
class=
"hide indent"
>
<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=
"cameraX"
class=
"paddingBottom btn btn-lg btn-default"
>
Right
</a>
<a
href=
"#"
id=
"cameraMinusX"
class=
"paddingBottom btn btn-lg btn-default"
>
Left
</a><br/>
<a
href=
"#"
id=
"cameraY"
class=
"btn btn-lg btn-default"
>
Top
</a>
<a
href=
"#"
id=
"cameraMinusY"
class=
"btn btn-lg btn-default"
>
Bottom
</a>
<a
href=
"#"
id=
"cameraOrtho"
class=
"btn btn-lg btn-default"
>
Ortho
</a>
</div><br/><br/>
</div><br/>
<div>
<a
href=
"#"
class=
"seeMore closed"
data-id=
"cameraAngle"
><span
class=
"fui-triangle-down"
></span>
View Angle:
</a><br/>
</div>
<div
id=
"cameraAngle"
class=
"hide indent "
>
<a
href=
"#"
id=
"cameraZ"
class=
"paddingBottom btn btn-sm btn-default"
>
Front
</a>
<a
href=
"#"
id=
"cameraMinusZ"
class=
"paddingBottom btn btn-sm btn-default"
>
Back
</a>
<a
href=
"#"
id=
"cameraX"
class=
"paddingBottom btn btn-sm btn-default"
>
Right
</a>
<a
href=
"#"
id=
"cameraMinusX"
class=
"paddingBottom btn btn-sm btn-default"
>
Left
</a><br/>
<a
href=
"#"
id=
"cameraY"
class=
"btn btn-sm btn-default"
>
Top
</a>
<a
href=
"#"
id=
"cameraMinusY"
class=
"btn btn-sm btn-default"
>
Bottom
</a>
<a
href=
"#"
id=
"cameraOrtho"
class=
"btn btn-sm btn-default"
>
Ortho
</a>
</div>
</div>
</div>
...
...
js/controls.js
View file @
e8504634
...
...
@@ -130,7 +130,7 @@ function initControls(globals){
$target
.
addClass
(
"
open
"
);
AnimateRotate
(
-
90
,
0
,
$target
.
children
(
"
span
"
));
$div
.
removeClass
(
"
hide
"
);
$div
.
show
(
);
$div
.
css
(
'
display
'
,
'
inline-block
'
);
}
else
{
$target
.
removeClass
(
"
open
"
);
$target
.
addClass
(
"
closed
"
);
...
...
@@ -297,15 +297,15 @@ function initControls(globals){
});
setLink
(
"
#start
"
,
function
(){
$
(
"
#pause
"
).
show
(
);
$
(
"
#reset
"
).
show
(
);
$
(
"
#pause
"
).
css
(
'
display
'
,
'
inline-block
'
);
$
(
"
#reset
"
).
css
(
'
display
'
,
'
inline-block
'
);
$
(
"
#start
"
).
hide
();
$
(
"
#stepForwardOptions
"
).
hide
();
globals
.
model
.
resume
();
});
setLink
(
"
#pause
"
,
function
(){
$
(
"
#start
"
).
show
(
);
$
(
"
#stepForwardOptions
"
).
show
(
);
$
(
"
#start
"
).
css
(
'
display
'
,
'
inline-block
'
);
$
(
"
#stepForwardOptions
"
).
css
(
'
display
'
,
'
inline-block
'
);
$
(
"
#pause
"
).
hide
();
globals
.
model
.
pause
();
});
...
...
@@ -320,7 +320,7 @@ function initControls(globals){
if
(
numSteps
<=
0
)
return
;
$
(
"
#numSteps
"
).
val
(
numSteps
);
globals
.
model
.
step
(
numSteps
);
$
(
"
#reset
"
).
show
(
);
$
(
"
#reset
"
).
css
(
'
display
'
,
'
inline-block
'
);
});
setInput
(
"
#strainClip
"
,
globals
.
strainClip
,
function
(
val
){
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment