Commit 0c17f596 authored by amandaghassaei's avatar amandaghassaei

adding animation settings

parent b3d64c3d
......@@ -452,7 +452,7 @@ a.seeMore.closed>.fui-triangle-down{
transform: rotate(45deg);
}
#screenCaptureModal .modal-content{
#screenCaptureModal .modal-content, #animationSetupModal .modal-content{
background: rgba(255,255,255,0.9);
}
......@@ -470,4 +470,15 @@ a.seeMore.closed>.fui-triangle-down{
display: block;
margin-left: auto;
margin-right: auto;
}
.animationStep{
margin: 7px 0;
display: inline-block;
padding: 5px 15px;
background: #fff;
}
#animationSetupModal p, #animationSetupModal ul{
text-align: center;
padding: 0;
}
\ No newline at end of file
......@@ -534,6 +534,7 @@
<script type="text/javascript" src="js/saveFOLD.js"></script>
<script type="text/javascript" src="js/importer.js"></script>
<script type="text/javascript" src="js/ViveInterface.js"></script>
<script type="text/javascript" src="js/videoAnimator.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
......@@ -963,8 +964,8 @@
<a href="https://www.w3schools.com/graphics/svg_stroking.asp" target="_blank">stroke</a> color:</li>
<li>Mountain folds have <b style="color:red">red</b> stroke - rgb(255, 0, 0), hex #ff0000</li>
<li>Valley folds have <b style="color:blue">blue</b> stroke - rgb(0, 0, 255), hex #0000ff</li>
<li>Outline edges have <b style="color:black">black</b> stroke - rgb(0, 0, 0), hex #000000 - use
this edge type for both the border of the pattern, and any internal holes.</li>
<li>Boundary edges have <b style="color:black">black</b> stroke - rgb(0, 0, 0), hex #000000 - use
this edge type for both the outline of the pattern, and any internal holes.</li>
<li>Cuts have <b style="color:#00ff00">green</b> stroke - rgb(0, 255, 0), hex #00ff00- use this edge type
to form thin slits in the pattern.</li>
<li>Hinges (undriven creases) have <b style="color:magenta">magenta</b> stroke - rgb(255, 0, 255), hex #ff00ff</li>
......@@ -1343,7 +1344,7 @@
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-body">
This app uses GPU functions which are not supported by this device/browser, please try again on desktop with Chrome/Firefox.<br/><br/>
This app uses GPU functions that are not supported by this device/browser, please try again on desktop with Chrome/Firefox.<br/><br/>
</div>
</div>
</div>
......@@ -1414,6 +1415,7 @@
<span aria-hidden="true">&times;</span>
</button>
<b>SCREEN RECORDING</b><br/><br/>
<a href="#" id="setupAnimation" class="displayBlock btn btn-lg btn-default">Animate Fold Percent</a><br/><br/>
Filename: &nbsp;&nbsp;<input id="screenRecordFilename" value="" placeholder="" class="bigInput text form-control" type="text"> .webm<br/><br/>
Scale: &nbsp;&nbsp;<input id="capturerScale" value="" placeholder="" class="float form-control" type="text"><br/><br/>
Dimensions: &nbsp;&nbsp;<b><span id="canvasDimensions"></span></b><br/>
......@@ -1437,6 +1439,28 @@
</div>
</div>
</div>
<div class="modal fade" id="animationSetupModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
<div class="modal-dialog modal-med">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<b>FOLD PERCENT ANIMATION SETUP</b><br/>
<p>
Current Fold Percent: &nbsp;&nbsp;<input value="" placeholder="" id="currentFoldPercent" class="float form-control" type="text">&nbsp;&nbsp;%<br/><br/>
<span id="animationSetupHelp"></span>
<ul id="animationHTML"></ul>
<a href="#" id="addDelay" class="displayBlock btn btn-lg btn-warning">Add Delay</a>&nbsp;&nbsp;&nbsp;
<a href="#" id="addAnimationItem" class="displayBlock btn btn-lg btn-success">Add Animation</a><br/>
</p>
</div>
<div class="modal-footer">
<button id="finishAnimationSetup" type="button" class="actionButton btn btn-success" data-dismiss="modal">Done</button>
</div>
</div>
</div>
</div>
<div id="recordStatus">
<a href="#" id="stopRecord" class="btn btn-lg btn-danger">Stop Record <span></span></a>
</div>
......
......@@ -408,13 +408,22 @@ function initControls(globals){
globals.creasePercent = val/100;
globals.shouldChangeCreasePercent = true;
creasePercentNavSlider.slider('value', val);
$('#currentFoldPercent').val(val);
});
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);
});
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);
}, -100, 100);
function setDeltaT(val){
$("#deltaT").html(val.toFixed(4));
......@@ -437,6 +446,11 @@ function initControls(globals){
}
});
setLink("#setupAnimation", function(){
$("#screenCaptureModal").modal("hide");
$("#animationSetupModal").modal("show");
});
setLink("#saveSVGScreenshot", function(){
globals.threeView.saveSVG();
});
......@@ -444,6 +458,15 @@ function initControls(globals){
setLink("#saveSVG", function(){
globals.pattern.saveSVG();
});
setLink("#addAnimationItem", function(){
globals.videoAnimator.addItem();
});
setLink("#addDelay", function(){
globals.videoAnimator.addDelay();
});
$("#animationSetupModal").on('hidden.bs.modal', function (){
$("#screenCaptureModal").modal("show");
});
setCheckbox("#ambientOcclusion", globals.ambientOcclusion, function(val){
globals.ambientOcclusion = val;
......
......@@ -26,5 +26,6 @@ $(function() {
globals.rigidSolver = initRigidSolver(globals);
globals.pattern = initPattern(globals);
globals.vive = initViveInterface(globals);
globals.videoAnimator = initVideoAnimator(globals);
$(".demo[data-url='Tessellations/huffmanWaterbomb.svg']").click();//load demo models
});
\ No newline at end of file
/**
* Created by amandaghassaei on 7/2/17.
*/
function initVideoAnimator(globals){
var foldAngleSequence = [];
function clear(){
foldAngleSequence = [];
render();
}
function addItem(from, to, dur){
foldAngleSequence.push({
type:"animation",
dur: dur,
from: from,
to: to
});
render();
}
function addDelay(dur){
foldAngleSequence.push({type:"delay", dur:dur});
render();
}
function render(){
var html = "";
if (foldAngleSequence.length == 0){
$("#animationSetupHelp").html("No animation items in sequence.");
$("#animationHTML").html("");
return;
}
for (var i=0;i<foldAngleSequence.length;i++){
if (foldAngleSequence[i].type == "delay") html += renderDelay(foldAngleSequence[i], i);
else html += renderItem(foldAngleSequence[i], i);
}
$("#animationSetupHelp").html("Configure automatic <b>Fold Percent</b> control:");
$("#animationHTML").html(html);
$(".deleteItem").click(function(e){
e.preventDefault();
var $target = $(e.target);
var index = $target.data("index");
if (index === undefined) index = $target.parent(".deleteItem").data("index");
foldAngleSequence.splice(index, 1);
render();
});
$(".durVal").change(function(e){
var $input = $(e.target);
var val = $input.val();
if (isNaN(parseFloat(val))) return;
val = parseFloat(val);
if (val < 0) val = 0;
$input.val(val);
var index = $input.data("index");
foldAngleSequence[index].dur = val;
render();
});
$(".toVal").change(function(e){
var $input = $(e.target);
var val = $input.val();
if (isNaN(parseFloat(val))) return;
val = parseFloat(val);
if (val < -100) val = -100;
if (val > 100) val = 100;
$input.val(val);
var index = $input.data("index");
foldAngleSequence[index].to = val;
render();
});
}
function renderItem(item, index){
var dur = "";
if (item.dur !== null && item.dur !== undefined) dur = item.dur;
var to = "";
if (item.to !== null && item.to !== undefined) to = item.to;
return '<li class="animationStep">Animate to &nbsp;' +
'<input value="' + to + '" placeholder="Target" data-index="'+index+'" class="toVal float form-control" type="text">' +
' % for &nbsp;' +
'<input value="' + dur + '" placeholder="Duration" data-index="'+index+'" class="durVal float form-control" type="text">' +
'&nbsp; seconds &nbsp;&nbsp;&nbsp;' +
'<a href="#" data-index="'+index+'" class="red deleteItem"><span data-index="'+index+'" class="fui-cross"></span></a>' +
'</li>';
}
function renderDelay(delay, index){
var dur = "";
if (delay.dur !== null && delay.dur !== undefined) dur = delay.dur;
return '<li class="animationStep">Wait for &nbsp;' +
'<input value="' + dur + '" placeholder="Duration" data-index="'+index+'" class="durVal float form-control" type="text">' +
'&nbsp; seconds &nbsp;&nbsp;&nbsp;' +
'<a href="#" data-index="'+index+'" class="red deleteItem"><span class="fui-cross"></span></a>' +
'</li>';
}
render();
return {
addItem: addItem,
addDelay: addDelay
}
}
\ No newline at end of file
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