Skip to content

Commit

Permalink
Merge pull request #156 from BoatsAreRockable/issue-141
Browse files Browse the repository at this point in the history 
Implement previous, next, first and last frame buttons
  • Loading branch information
Caleb Ely committed May 2, 2016
2 parents 572fe49 + 111cd6a commit d020981
Show file tree
Hide file tree
Showing 3 changed files with 115 additions and 35 deletions.
11 changes: 7 additions & 4 deletions app/animator.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,6 @@ <h2><i class="fa fa-camera fa-fw"></i> Capture</h2>
<ul id="capture-options">
<li><i class="fa fa-sort-asc fa-rotate-90 sidebar-link-dot"></i><a href="#" onclick="alert('Coming soon!');">Change resolution</a></li>
<li><i class="fa fa-sort-asc fa-rotate-90 sidebar-link-dot"></i><a href="#" onclick="alert('Coming soon!');">Change camera</a></li>
<li><input id="audio-toggle" type="checkbox" checked><label for="audio-toggle">Play audio</label></li>
</ul>
</div>

Expand Down Expand Up @@ -112,9 +111,13 @@ <h2><i class="fa fa-download fa-fw"></i> Export</h2>
</div>
</td>
<td id="playback-controls">
<div id="btn-loop" class="mediaControls" title="Loop Playback"><i class="fa fa-refresh"></i></div>
<div id="btn-stop" class="mediaControls" title="Stop Playback"><i class="fa fa-stop"></i></div>
<div id="btn-play-pause" class="mediaControls" title="Playback Frames"><i class="fa fa-play"></i></div>
<div id="btn-loop" title="Loop Playback"><i class="fa fa-refresh"></i></div>
<div id="btn-frame-last" title="Last frame"><i class="fa fa-fast-forward"></i></div>
<div id="btn-frame-next" title="Next frame"><i class="fa fa-step-forward"></i></div>
<div id="btn-stop" title="Stop Playback"><i class="fa fa-stop"></i></div>
<div id="btn-play-pause" title="Playback Frames"><i class="fa fa-play"></i></div>
<div id="btn-frame-previous" title="Previous frame"><i class="fa fa-step-backward"></i></div>
<div id="btn-frame-first" title="First frame"><i class="fa fa-fast-backward"></i></div>
</td>
</tr>
</table>
Expand Down
11 changes: 7 additions & 4 deletions app/css/animator.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -247,7 +247,7 @@ a {
}

#left-controls {
width: 35%;
width: 45%;
}

#left-controls i {
Expand All @@ -260,7 +260,7 @@ a {
}

#playback-controls {
width: 35%;
width: 45%;
font-size: 1.2em;
}

Expand All @@ -278,10 +278,13 @@ a {
color: #f3f76e;
}

#btn-play-pause, #btn-stop, #btn-loop {
padding: 0 0.25em;
#playback-controls div {
padding: 0 0.5em;
float: right;
}
#btn-play-pause {
width: 1.5em;
}

#btn-loop i.active, #btn-onion-skin-toggle i.active {
color: #ad0000;
Expand Down
128 changes: 101 additions & 27 deletions app/js/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,20 +34,24 @@ var width = 640,
btnDeleteLastFrame = document.querySelector("#btn-delete-last-frame"),

// Playback
frameRate = 15,
isPlaying = false,
isLooping = false,
curPlayFrame = 0,
playBackLoop = null,
btnStop = document.querySelector("#btn-stop"),
btnLoop = document.querySelector("#btn-loop"),
playback = document.querySelector("#playback"),
btnPlayPause = document.querySelector("#btn-play-pause"),
frameRate = 15,
isPlaying = false,
isLooping = false,
curPlayFrame = 0,
playBackLoop = null,
btnStop = document.querySelector("#btn-stop"),
btnLoop = document.querySelector("#btn-loop"),
playback = document.querySelector("#playback"),
btnPlayPause = document.querySelector("#btn-play-pause"),
btnFrameNext = document.querySelector("#btn-frame-next"),
btnFramePrevious = document.querySelector("#btn-frame-previous"),
btnFrameFirst = document.querySelector("#btn-frame-first"),
btnFrameLast = document.querySelector("#btn-frame-last"),
inputChangeFR = document.querySelector("#input-fr-change"),

// Audio
captureAudio = new Audio("audio/camera.wav"),
audioToggle = document.querySelector("#audio-toggle"),
playAudio = true,

// Status bar
statusBarCurMode = document.querySelector("#current-mode span"),
Expand Down Expand Up @@ -243,13 +247,51 @@ function startup() {

// Stop the preview
btnStop.addEventListener("click", function() {
if (totalFrames > 0 && winMode === "playback") {
_removeFrameReelSelection();
_addFrameReelSelection(totalFrames);
if (winMode === "playback") {
videoStop();
}
});

// Preview one frame to the right on framereel
btnFrameNext.addEventListener("click", function() {
if (curSelectedFrame) {
if (curSelectedFrame !== totalFrames) {
_displayFrame(curSelectedFrame + 1);
} else {
btnLiveView.click();
}
}
});

// Preview one frame to the left on framereel
btnFramePrevious.addEventListener("click", function() {
if (curSelectedFrame > 1) {
_displayFrame(curSelectedFrame - 1);
} else if (winMode === "capture") {
switchMode("playback");
_displayFrame(totalFrames);
}
});

// Preview first frame on framereel
btnFrameFirst.addEventListener("click", function() {
if (winMode === "capture") {
switchMode("playback");
}
_displayFrame(1);
});

// Preview last frame on framereel
btnFrameLast.addEventListener("click", function() {
if (curSelectedFrame) {
if (curSelectedFrame !== totalFrames) {
videoStop();
} else {
btnLiveView.click();
}
}
});

// Listen for frame rate changes
inputChangeFR.addEventListener("input", function() {
if (inputChangeFR.value >= 1 && inputChangeFR.value <= 60) {
Expand All @@ -274,12 +316,14 @@ function startup() {
notifyInfo("That feature is not yet implemented.");
});

// Switch from frame preview back to live view
btnLiveView.addEventListener("click", function() {
videoStop();
_removeFrameReelSelection();
switchMode("capture");
});
// Switch from frame preview back to live view
btnLiveView.addEventListener("click", function() {
if (totalFrames > 0) {
videoStop();
_removeFrameReelSelection();
switchMode("capture");
}
});

// Preview a captured frame
frameReelRow.addEventListener("click", function(e) {
Expand Down Expand Up @@ -484,7 +528,7 @@ function _toggleOnionSkin(ev) {
*/
function audio(name) {
"use strict";
if (audioToggle.checked) {
if (playAudio) {
name.play();
}
}
Expand Down Expand Up @@ -563,15 +607,31 @@ function videoPause() {
* Fully stop captured frames preview video.
*/
function videoStop() {
"use strict";
"use strict";
_displayFrame(totalFrames);
curPlayFrame = 0;
console.info("Playback stopped");
}

/**
* Pause playback and view a specific frame in the preview area.
*
* @param {Integer} id The frame ID to preview.
*/
function _displayFrame(id) {
"use strict";
if (totalFrames > 0) {
// Reset the player
videoPause();
curPlayFrame = 0;
playback.setAttribute("src", capturedFrames[totalFrames - 1]);
_removeFrameReelSelection();

// Display newest frame number in status bar
_updateStatusBarCurFrame(totalFrames);
console.info("Playback stopped");
// Preview selected frame ID
_addFrameReelSelection(id);
curPlayFrame = id - 1;
playback.setAttribute("src", capturedFrames[id - 1]);
_updateStatusBarCurFrame(id);
_frameReelScroll();
}
}

/**
Expand Down Expand Up @@ -964,6 +1024,20 @@ function loadMenu() {
modifiers: "ctrl",
}));

captureMenu.append(new nw.MenuItem({ type: "separator" }));

captureMenu.append(new nw.MenuItem({
label: "Play capture sounds",
click: function() {
playAudio = !playAudio;
notifyInfo(`Capture sounds ${playAudio ? "enabled" : "disabled"}`);
},
type: "checkbox",
checked: true,
key: "m",
modifiers: "ctrl",
}));

// Help menu items
helpMenu.append(new nw.MenuItem({
label: "Documentation",
Expand Down Expand Up @@ -1023,4 +1097,4 @@ function loadMenu() {
if (process.platform === "darwin") {
menuBar.createMacBuiltin("Boats Animator");
}
}
}

0 comments on commit d020981

Please sign in to comment.