Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Improve statusbar #125

Merged
merged 5 commits into from
Mar 8, 2016
Merged

Improve statusbar #125

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
474b1a3
Renamed var curFrame to totalFrames
Mar 1, 2016
fd0fdd8
Made the status bar more compact
Mar 1, 2016
0e5cb86
Renamed status bar ids
Mar 3, 2016
9397062
Added updateStatusBarCurFrame function
Mar 5, 2016
193e1ba
Merge remote-tracking branch 'refs/remotes/origin/master' into improv…
Mar 8, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 3 additions & 4 deletions app/animator.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -154,10 +154,9 @@ <h2><i class="fa fa-download fa-fw"></i> Export</h2>

<div id="statusBar">
<ul>
<li id="currentFrame">Current frame: <span>0</span></li>
<li id="num-of-frames"><span>0 frames</span> captured</li>
<li id="currentFrameRate"><span></span> FPS</li>
<li class="no-pipe" id="currentMode"><span></span> mode</li>
<li>Frame <span id="current-frame">0</span> of <span id="num-of-frames">0</span></li>
<li id="current-frame-rate"><span></span> FPS</li>
<li class="no-pipe" id="current-mode"><span></span> mode</li>
<li id="statusBar-dev" class="no-pipe">
<!--Debugging Options-->
<button id="btn-open-dev-tools">Dev tools</button>
Expand Down
69 changes: 40 additions & 29 deletions app/js/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ var width = 640,

// Capture
capturedFrames = [],
curFrame = 0,
totalFrames = 0,
curSelectedFrame = null,
btnGridToggle = document.querySelector("#btn-grid-toggle"),
btnCaptureFrame = document.querySelector("#btn-capture-frame"),
Expand All @@ -54,10 +54,10 @@ var width = 640,
audioToggle = document.querySelector("#audio-toggle"),

// Status bar
statusBarCurMode = document.querySelector("#currentMode span"),
statusBarCurFrame = document.querySelector("#currentFrame span"),
statusBarFrameNum = document.querySelector("#num-of-frames span"),
statusBarFrameRate = document.querySelector("#currentFrameRate span"),
statusBarCurMode = document.querySelector("#current-mode span"),
statusBarCurFrame = document.querySelector("#current-frame"),
statusBarFrameNum = document.querySelector("#num-of-frames"),
statusBarFrameRate = document.querySelector("#current-frame-rate span"),

// Export frames
frameExportDirectory = null,
Expand Down Expand Up @@ -240,14 +240,14 @@ function startup() {
// Play/pause the preview
btnPlayPause.addEventListener("click", function() {
// Make sure we have frames to play back
if (curFrame > 0) {
if (totalFrames > 0) {
(isPlaying ? videoPause : previewCapturedFrames)();
}
});

// Stop the preview
btnStop.addEventListener("click", function() {
if (curFrame > 0) {
if (totalFrames > 0) {
_removeFrameReelSelection();
videoStop();
}
Expand Down Expand Up @@ -301,7 +301,7 @@ function startup() {
playback.setAttribute("src", capturedFrames[imageID - 1]);
curPlayFrame = imageID - 1;
curSelectedFrame = imageID;
statusBarCurFrame.innerHTML = imageID;
_updateStatusBarCurFrame(imageID);
}
});

Expand All @@ -317,7 +317,7 @@ function switchMode(newMode) {
"use strict";
winMode = newMode;
if (winMode === "capture") {
statusBarCurFrame.innerHTML = curFrame;
_updateStatusBarCurFrame(totalFrames + 1);
playbackWindow.classList.add("hidden");
captureWindow.classList.remove("hidden");
captureWindow.classList.add("active");
Expand Down Expand Up @@ -356,6 +356,16 @@ function _removeFrameReelSelection() {
function _addFrameReelSelection(id) {
"use strict";
document.querySelector(`.frame-reel-img#img-${id}`).classList.add("selected");
curSelectedFrame = id;
}

/**
* Change the current frame number on the status bar.
* @param {Integer} id The value to change the frame number to.
*/
function _updateStatusBarCurFrame(id) {
"use strict";
statusBarCurFrame.innerHTML = id;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sold on these two lines. The method is called _addFrameReelSelection. Ideally, methods only interact with what they say they do. Now, this method says on the tin we only alter the frame reel, but it actually also edits the status bar.

Fun challenge for you: devise how this should be fixed on your own instead of me telling you. Let's see how much you are learning. :)

}

/**
Expand All @@ -370,13 +380,13 @@ function updateFrameReel(action, id) {
"use strict";
var onionSkinFrame = id - 1;
// Display number of captured frames in status bar
statusBarCurFrame.innerHTML = curFrame;
statusBarFrameNum.innerHTML = `${curFrame} ${curFrame === 1 ? "frame" : "frames"}`;
statusBarFrameNum.innerHTML = totalFrames;

// Add the newly captured frame
if (action === "capture") {
// Remove any frame selection
_removeFrameReelSelection();
_updateStatusBarCurFrame(totalFrames + 1);

// Insert the new frame into the reel
frameReelRow.insertAdjacentHTML("beforeend", `<td><div class="frame-reel-preview">
Expand All @@ -385,14 +395,14 @@ function updateFrameReel(action, id) {

// Remove the chosen frame
} else if (action === "delete") {
if (id !== curFrame) {
if (id !== totalFrames) {
onionSkinFrame = id - 2;
}
frameReelRow.removeChild(frameReelRow.children[id - 1]);
}

// We have frames, display them
if (curFrame > 0) {
if (totalFrames > 0) {
frameReelMsg.classList.add("hidden");
frameReelTable.classList.remove("hidden");

Expand All @@ -403,7 +413,8 @@ function updateFrameReel(action, id) {
// Update frame preview selection
if (curSelectedFrame) {
_removeFrameReelSelection();
document.querySelector(`.frame-reel-img#img-${id - 1}`).classList.add("selected");
_addFrameReelSelection(id - 1);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good catch!

_updateStatusBarCurFrame(id - 1);
}

// All the frames were deleted, display "No frames" message
Expand All @@ -429,9 +440,9 @@ function deleteFrame(id) {

exportedFramesList.splice(id - 1, 1);
capturedFrames.splice(id - 1, 1);
curFrame--;
totalFrames--;
updateFrameReel("delete", id);
console.info(`There are now ${curFrame} captured frames`);
console.info(`There are now ${totalFrames} captured frames`);
}

/**
Expand All @@ -440,8 +451,8 @@ function deleteFrame(id) {
function undoFrame() {
"use strict";
// Make sure there is a frame to delete
if (curFrame > 0) {
confirmSet(deleteFrame, curFrame, "Are you sure you want to delete the last frame captured?");
if (totalFrames > 0) {
confirmSet(deleteFrame, totalFrames, "Are you sure you want to delete the last frame captured?");
} else {
notifyError("There is no previous frame to undo!");
}
Expand All @@ -467,8 +478,8 @@ function _toggleOnionSkin(ev) {

// Display last captured frame
onionSkinWindow.classList.add("visible");
if (curFrame > 0) {
onionSkinWindow.setAttribute("src", capturedFrames[curFrame - 1]);
if (totalFrames > 0) {
onionSkinWindow.setAttribute("src", capturedFrames[totalFrames - 1]);
}
}
}
Expand Down Expand Up @@ -503,12 +514,12 @@ function takePicture() {

// Store the image data and update the current frame
capturedFrames.push(data);
curFrame++;
console.info(`Captured frame: ${data.slice(100, 120)} There are now: ${curFrame} frames`);
totalFrames++;
console.info(`Captured frame: ${data.slice(100, 120)} There are now: ${totalFrames} frames`);

// Save the frame to disk and update the frame reel
saveFrame(curFrame);
updateFrameReel("capture", curFrame);
saveFrame(totalFrames);
updateFrameReel("capture", totalFrames);

// Scroll the frame reel to the end
frameReelArea.scrollLeft = frameReelArea.scrollWidth;
Expand Down Expand Up @@ -562,10 +573,10 @@ function videoStop() {
// Reset the player
videoPause();
curPlayFrame = 0;
playback.setAttribute("src", capturedFrames[curFrame - 1]);
playback.setAttribute("src", capturedFrames[totalFrames - 1]);

// Display newest frame number in status bar
statusBarCurFrame.innerHTML = curFrame;
_updateStatusBarCurFrame(totalFrames);
console.info("Playback stopped");
}

Expand All @@ -577,7 +588,7 @@ function _videoPlay() {
// Display each frame
_removeFrameReelSelection();
playback.setAttribute("src", capturedFrames[curPlayFrame]);
statusBarCurFrame.innerHTML = curPlayFrame + 1;
_updateStatusBarCurFrame(curPlayFrame + 1);

// Display selection outline as each frame is played
_addFrameReelSelection(curPlayFrame + 1);
Expand All @@ -588,7 +599,7 @@ function _videoPlay() {
curPlayFrame++;

// There are no more frames to preview
if (curPlayFrame >= curFrame) {
if (curPlayFrame >= totalFrames) {
// We are not looping, stop the playback
if (!isLooping) {
videoStop();
Expand Down Expand Up @@ -627,7 +638,7 @@ function _frameReelScroll() {
if (curPlayFrame === 0) {
// Scroll to start when playback begins
frameReelArea.scrollLeft = 0;
} else if (curPlayFrame + 1 !== curFrame) {
} else if (curPlayFrame + 1 !== totalFrames) {
// Scroll so currently played frame is in view
document.querySelector(`.frame-reel-img#img-${curPlayFrame + 2}`).scrollIntoView();
} else {
Expand Down