Commit a615e25e authored by amandaghassaei's avatar amandaghassaei

sceen capture

parent 456cb895
......@@ -353,7 +353,8 @@ input.form-control.bigInput{
}
.actionButton{
width: 110px;
min-width: 110px;
font-size: 16px;
}
#unitsDropdown{
......@@ -449,4 +450,14 @@ a.seeMore.closed>.fui-triangle-down{
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
transform: rotate(45deg);
}
#recordStatus{
position: absolute;
bottom:20px;
width:50px;
left:50%;
margin-left:-25px;
z-index: 2;
display: none;
}
\ No newline at end of file
This diff is collapsed.
......@@ -500,6 +500,7 @@
<script type="text/javascript" src="dependencies/path-data-polyfill.js"></script>
<script type="text/javascript" src="dependencies/earcut.js"></script>
<script type="text/javascript" src="dependencies/fold.js"></script>
<script type="text/javascript" src="dependencies/CCapture.all.min.js"></script>
<!--<script type="text/javascript" src="dependencies/numeric-1.2.6.js"></script>-->
<!--<script type="text/javascript" src="dependencies/EffectComposer.js"></script>-->
......@@ -554,6 +555,9 @@
<!--<li><a id="importSettings" href="#">SVG Import Settings...</a></li>-->
<li><a id="tips" href="#">File Import Tips</a></li>
<li class="divider"></li>
<li><a id="createGif" href="#">Record animated GIF...</a></li>
<li><a id="createVideo" href="#">Record video...</a></li>
<li class="divider"></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="exportOBJ" href="#">Save Simulation as OBJ...</a></li>
......@@ -909,6 +913,7 @@
<ul>
<li>All rendering and 3D interaction done with <a target="_blank" href="https://threejs.org/">three.js</a></li>
<li><a href="https://www.npmjs.com/package/path-data-polyfill" target="_blank">path-data-polyfill</a> helps with SVG parsing</li>
<li><a href="https://github.com/edemaine/fold" target="_blank">FOLD</a> is used as the internal data structure, and methods from the FOLD api are used for SVG parsing</li>
<li>Arbitrary polygonal faces of imported geometry are triangulated using the <a target="_blank" href="https://github.com/mapbox/earcut">Earcut Library</a></li>
<li><a target="_blank" href="https://jquery.com/">jQuery</a>, <a target="_blank" href="http://getbootstrap.com/">Bootstrap</a>, and the
<a target="_blank" href="http://designmodo.github.io/Flat-UI/">Flat UI theme</a> used to build the GUI</li>
......@@ -1046,7 +1051,7 @@
Filename: &nbsp;&nbsp;<input id="stlFilename" value="" placeholder="" class="bigInput text form-control" type="text"> .stl<br/><br/>
Scale: &nbsp;&nbsp;<input value="" placeholder="" class="float exportScale form-control" type="text"><br/><br/>
Dimensions: &nbsp;&nbsp;<b><span class="exportDimensions"></span></b><br/>
<span class="smallTxt">(the STL file format is unitless, but typically assumed to be either in inches or mm)</span><br/>
<span class="smallTxt">( the STL file format is unitless, but typically assumed to be either in inches or mm )</span><br/>
<label class="bigLabel checkbox" for="doublesidedSTL">
<input id="doublesidedSTL" data-toggle="checkbox" class="custom-checkbox layersSelector" type="checkbox"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
Double Sided
......@@ -1069,7 +1074,7 @@
Filename: &nbsp;&nbsp;<input id="objFilename" value="" placeholder="" class="bigInput text form-control" type="text"> .stl<br/><br/>
Scale: &nbsp;&nbsp;<input value="" placeholder="" class="float exportScale form-control" type="text"><br/><br/>
Dimensions: &nbsp;&nbsp;<b><span class="exportDimensions"></span></b><br/>
<span class="smallTxt">(the OBJ file format is unitless, but typically assumed to be either in inches or mm)</span><br/>
<span class="smallTxt">( the OBJ file format is unitless, but typically assumed to be either in inches or mm )</span><br/>
<label class="bigLabel checkbox" for="doublesidedOBJ">
<input id="doublesidedOBJ" data-toggle="checkbox" class="custom-checkbox layersSelector" type="checkbox"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
Double Sided
......@@ -1390,5 +1395,29 @@
</div>
</div>
</div>
<div class="modal fade" id="screenCaptureModal" 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>SCREEN RECORDING</b><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/>
<span class="smallTxt">( resize browser window to change aspect ratio )</span><br/><br/>
Quality ( 0-63 ): &nbsp;&nbsp;<input id="capturerQuality" value="" placeholder="" class="float int form-control" type="text"><br/><br/>
FrameRate ( 1-60 fps ): &nbsp;&nbsp;<input id="capturerFPS" value="" placeholder="" class="float int form-control" type="text"><br/><br/>
</div>
<div class="modal-footer">
<button id="doScreenRecord" type="button" class="actionButton btn btn-success" data-dismiss="modal">Start</button>
</div>
</div>
</div>
</div>
<div id="recordStatus">
<a href="#" id="stopRecord" class="btn btn-lg btn-danger">Stop Record <span></span></a>
</div>
</body>
</html>
\ No newline at end of file
......@@ -189,6 +189,60 @@ function initControls(globals){
globals.vertTol = val;
});
setLink("#createGif", function(){
globals.capturer = new CCapture({format:'gif', name:globals.filename, framerate:60, display:true, verbose:true, workersPath:'js/'});
globals.capturer.start();
});
setLink("#createVideo", function(){
//quality 0-63
//timeLimit: 30
$("#screenCaptureModal").modal("show");
$("#screenRecordFilename").val(globals.filename);
globals.screenRecordFilename = globals.filename;
updateCanvasDimensions();
});
setInput("#capturerFPS", globals.capturerFPS, function(val){
globals.capturerFPS = val;
}, 0, 60);
setInput("#capturerQuality", globals.capturerQuality, function(val){
globals.capturerQuality = val;
}, 0, 63);
setInput("#capturerScale", globals.capturerScale, function(val){
globals.capturerScale = val;
updateCanvasDimensions();
}, 1);
function updateCanvasDimensions(){
var $body = $("body");
var dim = (new THREE.Vector2($body.innerWidth(), $body.innerHeight())).multiplyScalar(globals.capturerScale);
$("#canvasDimensions").html(dim.x + " x " + dim.y + " px");
}
setInput("#screenRecordFilename", "OrigamiSimulator", function(val){
globals.screenRecordFilename = val;
});
setLink("#doScreenRecord", function(){
globals.capturerFrames = 0;
globals.capturer = new CCapture({
format:'webm',
name:globals.screenRecordFilename,
framerate:globals.capturerFPS,
// display:true,
// verbose:true,
workersPath:'js/',
quality: globals.capturerQuality
});
$("#recordStatus").show();
globals.capturer.start();
});
setLink("#stopRecord", function(){
if (!globals.capturer) return;
globals.capturer.stop();
globals.capturer.save();
globals.capturer = null;
$("#recordStatus").hide();
});
setLink("#navPattern", function(){
if (globals.noCreasePatternAvailable()){
......
......@@ -83,7 +83,13 @@ function initGlobals(){
rotateModel: null,
rotationSpeed: 0.01,
backgroundColor:"ffffff"
backgroundColor:"ffffff",
capturer: null,
capturerQuality: 63,
capturerFPS: 60,
capturerScale: 1,
capturerFrames: 0
};
function setCreasePercent(percent){
......
......@@ -96,12 +96,17 @@ function initThreeView(globals) {
globals.simulationRunning = true;
}
var captureStats = $("#stopRecord>span");
function _render(){
if (globals.vrEnabled){
globals.vive.render();
return;
}
renderer.render(scene, camera);
if (globals.capturer) {
captureStats.html("( " + ++globals.capturerFrames + " frames )");
globals.capturer.capture(renderer.domElement);
}
}
function _loop(callback){
......
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