taking svg snapshot from after effects
diff --git a/build/extension/bodymovin.zxp b/build/extension/bodymovin.zxp
index 041feed..4c8b851 100644
--- a/build/extension/bodymovin.zxp
+++ b/build/extension/bodymovin.zxp
Binary files differ
diff --git a/extension/css/snapshot.css b/extension/css/snapshot.css
index b2d8351..f9790c0 100644
--- a/extension/css/snapshot.css
+++ b/extension/css/snapshot.css
@@ -15,12 +15,101 @@
width: 100%;
}
+#snapshot .header{
+ padding-top: 10px;
+ padding-bottom: 10px;
+}
+
+#snapshot .header .buttons{
+ margin-top: 10px;
+}
+
#snapshot h1{
- color: #EAD3A8;
+ color: #D23641;
+ margin: 0;
}
#snapshot .animContainer{
width: 100%;
- height: 400px;
+ background-color: #6E6568;
+}
+
+#snapshot .controls{
+ height: 40px;
+ width: 100%;
+ background-color: #EAD3A8;
+ border-top: 1px solid #484043;
+ position: relative;
+}
+
+#snapshot .controls .snapshotButton{
+ float: left;
+ margin-top: 5px;
+ margin-left: 4px;
+}
+
+#snapshot .controls .slider{
+ width: 100%;
+ height: 2px;
+ background-color: #D23641;
+ cursor: pointer;
+}
+
+#snapshot .controls .thumb{
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
+ background-color: #D23641;
+ border: 1px solid #FFFFFF;
+ position: absolute;
+ left: -5px;
+ top: -5px;
+ cursor: pointer;
+ pointer-events: none;
+}
+
+#snapshot .controls .frames{
+ float: right;
+ padding: 10px;
+ color: #D23641;
+ font-size: 12px;
+ line-height: 20px;
+}
+
+#snapshot .controls .frames .current{
+ background-color: #484043;
+ display: inline-block;
+ vertical-align: top;
+ min-width: 20px;
+ height: 20px;
+ padding: 0px 2px;
+ text-align: right;
+}
+
+#snapshot .controls .frames .total{
+ display: inline-block;
+ vertical-align: top;
+}
+
+#snapshot .rendersSelection {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(0,0,0,.8);
+}
+
+#snapshot .rendersSelection .listContainer{
+ text-align: center;
+}
+
+#snapshot .rendersSelection .topSpace{
+ height: 10%;
+}
+
+#snapshot .rendersSelection .listContainer .generalButton{
+ display: block;
+ margin: auto;
}
\ No newline at end of file
diff --git a/extension/index.html b/extension/index.html
index 8bcffe2..feae247 100644
--- a/extension/index.html
+++ b/extension/index.html
@@ -48,14 +48,33 @@
</div>
</div>
<div id='snapshot'>
- <h1>Select animation</h1>
- <div class='buttons'>
- <button class='generalButton rightFloat current'>Current renders</button>
- <div class='buttonSeparator rightFloat'></div>
- <button class='generalButton rightFloat browse'>Browse</button>
- <button class='generalButton return'>Back</button>
+ <div class='header'>
+ <h1>Select animation</h1>
+ <div class='buttons'>
+ <button class='generalButton rightFloat current'>Current renders</button>
+ <div class='buttonSeparator rightFloat'></div>
+ <button class='generalButton rightFloat browse'>Browse</button>
+ <button class='generalButton return'>Back</button>
+ </div>
</div>
<div class="animContainer"></div>
+ <div class="controls">
+ <div class="slider"></div>
+ <div class="thumb"></div>
+ <button class="snapshotButton generalButton highlightButton">Take Snapshot</button>
+ <div class="frames">
+ <div class="current" contenteditable="true"></div>
+ <div class="total" >/<span class='value'></span></div>
+ </div>
+ </div>
+ <div class="rendersSelection">
+ <div class="topSpace"></div>
+ <div class="listContainer">
+
+ </div>
+ <div>
+ </div>
+ </div>
</div>
<div id='info'>
<div class='buttons'>
diff --git a/extension/js/controllers/CompRenderController.js b/extension/js/controllers/CompRenderController.js
index 822f63f..121efd0 100644
--- a/extension/js/controllers/CompRenderController.js
+++ b/extension/js/controllers/CompRenderController.js
@@ -90,6 +90,7 @@
}
if (messageData.isFinished) {
elem.addClass('rendered');
+ compData.renderData = messageData.data.substr(7);
}
}
@@ -134,9 +135,14 @@
view.hide();
}
+ function getCompositions() {
+ return compositions;
+ }
+
ob.init = init;
ob.show = show;
ob.hide = hide;
+ ob.getCompositions = getCompositions;
return ob;
}());
\ No newline at end of file
diff --git a/extension/js/controllers/snapshotController.js b/extension/js/controllers/snapshotController.js
index a5d461b..748dbe6 100644
--- a/extension/js/controllers/snapshotController.js
+++ b/extension/js/controllers/snapshotController.js
@@ -1,15 +1,24 @@
/*jslint vars: true, plusplus: true, devel: true, nomen: true, regexp: true, indent: 4, maxerr: 50 */
-/*global $, alertData, successData, bodymovin, mainController */
+/*global $, alertData, successData, bodymovin, mainController, compRenderController, messageController */
var snapshotController = (function () {
'use strict';
- var ob = {}, view, csInterface, anim, animContainer, showing = false;
+ var ob = {}, view, csInterface, anim, header, controls, current, animContainer, slider, thumb, snapshotButton, $window, showing = false;
+ var totalFrames, currentFrame, sliderWidth, rendersSelection, listContainer;
function showSelection() {
mainController.showView('selection');
}
- function displayCurrentRenders() {
-
+ function showControls() {
+ controls.find('.snapshotButton').show();
+ controls.find('.frames .total').show();
+ current.show();
+ }
+
+ function hideControls() {
+ controls.find('.snapshotButton').hide();
+ controls.find('.frames .total').hide();
+ current.hide();
}
function browseFiles() {
@@ -17,29 +26,134 @@
csInterface.evalScript(eScript);
}
- function handleFilePath(ev) {
- var jsonData = JSON.parse(ev.data.substr(7));
- //var result = window.cep.fs.readFile(path);
+ function updateControls(origin) {
+ if (origin !== 'input') {
+ controls.find('.frames .current').html(currentFrame);
+ }
+ if (anim) {
+ anim.goToAndStop(currentFrame + 1, true);
+ }
+ var x = (currentFrame / totalFrames) * sliderWidth;
+ thumb.css('left', x - 5 + 'px');
+ }
+
+ function loadAnimation(data) {
+ var jsonData = JSON.parse(data);
+ totalFrames = jsonData.animation.totalFrames;
+ controls.find('.frames .total .value').html(totalFrames);
+ currentFrame = 1;
if (anim) {
anim.destroy();
}
+ updateControls();
var params = {
animType: 'svg',
- wrapper: animContainer,
+ wrapper: animContainer[0],
loop: false,
autoplay: false,
prerender: true,
animationData: jsonData
};
anim = bodymovin.loadAnimation(params);
+ showControls();
+ }
+
+ function addSelectionListener(elem, data) {
+ elem.on('click', function () {
+ rendersSelection.hide();
+ loadAnimation(data.renderData);
+ });
+ }
+
+ function displayCurrentRenders() {
+ var compositions = compRenderController.getCompositions();
+ if (!compositions || compositions.length === 0) {
+ messageController.showMessage({type: 'alert', message: 'You have no recent renders.\n Try browsing your files'});
+ } else if (compositions.length === 1) {
+ loadAnimation(compositions[0].renderData);
+ } else {
+ rendersSelection.show();
+ listContainer.empty();
+ var i, len = compositions.length;
+ var li;
+ for (i = 0; i < len; i += 1) {
+ li = $('<button class="generalButton">');
+ li.html(compositions[i].name);
+ listContainer.append(li);
+ addSelectionListener(li, compositions[i]);
+ }
+ }
+ }
+
+ function handleFilePath(ev) {
+ loadAnimation(ev.data.substr(7));
}
function handleWindowResize() {
if (!showing) {
return;
}
- console.log($(window).height());
- console.log($(window).width());
+ animContainer.css('height', $window.height() - 2 - header.outerHeight() - controls.outerHeight() + 'px');
+ sliderWidth = slider.width();
+
+ }
+
+ function frameChangeHandler() {
+ var num = parseInt(current.html(), 10);
+ if (isNaN(num)) {
+ return;
+ }
+ if (num < 0) {
+ num = 0;
+ } else if (num >= totalFrames) {
+ num = totalFrames - 1;
+ }
+ currentFrame = num;
+ updateControls('input');
+ }
+
+ function updateSliderValue(pageX) {
+ var x = pageX - slider.offset().left;
+ var perc = x / sliderWidth;
+ if (perc < 0) {
+ perc = 0;
+ } else if (perc > 1) {
+ perc = 1;
+ }
+ currentFrame = Math.round(perc * totalFrames);
+ updateControls();
+ }
+
+ function sliderMove(ev) {
+ updateSliderValue(ev.pageX);
+ }
+
+ function sliderUp(ev) {
+ $window.off('mousemove', sliderMove);
+ $window.off('mouseup', sliderUp);
+ }
+
+ function sliderDown(ev) {
+ $window.on('mouseup', sliderUp);
+ $window.on('mousemove', sliderMove);
+ updateSliderValue(ev.pageX);
+ }
+
+ function addSliderListeners() {
+
+ slider = controls.find('.slider');
+ thumb = controls.find('.thumb');
+ slider.on('mousedown', sliderDown);
+ }
+
+ function saveSnapshot() {
+ var svgData = animContainer[0].innerHTML;
+ var result = window.cep.fs.showSaveDialogEx('Select location', '', ['*.svg'], 'snapshot.svg');
+ var targetFilePath = result.data;
+ var writeResult = window.cep.fs.writeFile(targetFilePath, svgData);
+ if (0 !== writeResult.err) {
+ console.log('faillled');
+ }
}
function init(csIntfc) {
@@ -49,15 +163,27 @@
view.find('.buttons .current').on('click', displayCurrentRenders);
view.find('.buttons .browse').on('click', browseFiles);
view.find('.return').on('click', showSelection);
- animContainer = view.find('.animContainer')[0];
+ animContainer = view.find('.animContainer');
+ controls = view.find('.controls');
+ controls.find('.snapshotButton').on('click', saveSnapshot);
+ current = controls.find('.frames .current');
+ current.on('input', frameChangeHandler);
+ header = view.find('.header');
+ rendersSelection = view.find('.rendersSelection');
+ listContainer = rendersSelection.find('.listContainer');
+ rendersSelection.hide();
+ $window = $(window);
csInterface.addEventListener('bm:file:path', handleFilePath);
$(window).on('resize', handleWindowResize);
+ addSliderListeners();
+ hideControls();
}
function show() {
if (!showing) {
showing = true;
view.show();
+ handleWindowResize();
}
}
@@ -65,6 +191,8 @@
if (showing) {
showing = false;
view.hide();
+ slider.off('mouseup', sliderUp);
+ slider.off('mousemove', sliderMove);
}
}
diff --git a/extension/jsx/renderManager.jsx b/extension/jsx/renderManager.jsx
index ba0813d..67ef0ef 100644
--- a/extension/jsx/renderManager.jsx
+++ b/extension/jsx/renderManager.jsx
@@ -3,7 +3,7 @@
var bm_renderManager = (function () {
'use strict';
- var ob = {}, pendingLayers = [], pendingComps = [], destinationPath, currentCompID, totalLayers, currentLayer;
+ var ob = {}, pendingLayers = [], pendingComps = [], destinationPath, currentCompID, currentComp, totalLayers, currentLayer;
function verifyTrackLayer(layerData, comp, pos) {
var nextLayerInfo = comp.layers[pos + 2];
@@ -107,7 +107,7 @@
} catch (err) {
bm_eventDispatcher.sendEvent('bm:alert', {message: 'Could not write file.<br /> Make sure you have enabled scripts to write files. <br /> Edit > Preferences > General > Allow Scripts to Write Files and Access Network '});
}
- bm_eventDispatcher.sendEvent('bm:render:update', {type: 'update', message: 'Render finished ', compId: currentCompID, progress: 1, isFinished: true});
+ bm_eventDispatcher.sendEvent('bm:render:update', {type: 'update', message: 'Render finished ', compId: currentCompID, progress: 1, isFinished: true, data: '__PFX__' + string});
bm_compsManager.renderComplete();
}
