Skip to content

Commit

Permalink
Live preview button now properly scrolls and preview window fills space
Browse files Browse the repository at this point in the history 
Also made frame reel images slightly bigger but this has resulted in the
live preview button being slightly off center
  • Loading branch information
Charlie Lee committed Oct 27, 2015
1 parent bf10684 commit 26a47ba
Show file tree
Hide file tree
Showing 3 changed files with 21 additions and 18 deletions.
4 changes: 1 addition & 3 deletions app/animator.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -136,7 +136,7 @@ <h2><i class="fa fa-heartbeat fa-fw"></i> Debugging</h2>
<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>
<div id="deleteLastFrame"><i class="fa fa-trash"></i> Delete last frame</div>
<div id="deleteLastFrame" title="Delete last frame captured"><i class="fa fa-trash"></i> Delete last frame</div>
</div>
<div id="capture-control">
<div id="captureFrame" class="fa-stack fa-lg" title="Capture Frame">
Expand All @@ -152,8 +152,6 @@ <h2><i class="fa fa-heartbeat fa-fw"></i> Debugging</h2>
<table class="hidden">
<tr id="reel-captured-imgs">
<!--This is where the frame is added through JS -->
</tr>
<tr>

This comment has been minimized.

Sign in to view

Copy link
@le717

le717 Oct 27, 2015

Contributor

What was the reasoning behind this change (and the related JS one)? This was by design. When you take a new frame, it should be added to the right of the previous frames but left of the Live View button. Now it adds the new frame to the left of the previous frames, which is strange and kinda counter-intuitive.

This comment has been minimized.

Sign in to view

Copy link
@charlielee

charlielee Oct 27, 2015

Owner

Ah rats... That was not intentional, I was trying to fix the Live View button moving onto a new line when the scroll bar appears on the frame reel

This comment has been minimized.

Sign in to view

Copy link
@charlielee

charlielee Oct 27, 2015

Owner

This is why I really need to remember to split out my commits!

This comment has been minimized.

Sign in to view

Copy link
@charlielee

charlielee Oct 27, 2015

Owner

Added as issue #55

This comment has been minimized.

Sign in to view

Copy link
@le717

le717 Oct 27, 2015

Contributor

I had a feeling it was an accident but I commented just to be sure we were on the same page on how this should act. ;)
<td>
<div id="btn-live-view" title="Live Preview">
<i class="fa fa-video-camera"></i>
Expand Down
23 changes: 12 additions & 11 deletions app/css/animator.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -121,9 +121,8 @@ a {
#video, #canvas { display: none; }

#captureWindow, #playbackWindow {
height: calc(100vh - 56px - 132px - 37px);
text-align: center;
padding-top: 0.5em;
padding-bottom: 0.3em;
background-color: black;
}

Expand All @@ -134,20 +133,24 @@ a {
max-width: 100%;
padding: 0;
margin: 0;
min-height: 20em;
max-height: 30em;
height: 100%;
}

.windowTitleContainer {
text-align: center;
display: inline-block;
}

#playback {
height: calc((100vh - 56px - 132px - 37px));
width: calc((100vh - 56px - 132px - 37px) / 4));
}

/*========== ONION SKINNING ==============*/

#onionSkinningLayer{
width: 100%;
height: 0;
width: 100%;
overflow: visible;
padding: 0;
margin: 0;
Expand All @@ -161,9 +164,8 @@ a {
border: 0;
opacity: 0.5;
display: none;
max-height: 30em;
min-height: 20em;
max-width: 100%;
width: calc((100vh - 56px - 132px - 37px) / 4));
height: calc((100vh - 56px - 132px - 37px));
}
#onion-skinning-frame.visible { display: inline; }

Expand Down Expand Up @@ -255,14 +257,13 @@ a {
.btn-frame-delete:hover { opacity: 0.8; }

#btn-live-view {
margin-top: -0.15em;

width: 5rem;
height: 3.75rem;
height: calc(75px + 0em);
background-color: #171717;
text-align: center;
font-size: 2.5em;
cursor: pointer;
float: right;
}

#btn-live-view i { padding-top: 0.3em; }
Expand Down
12 changes: 8 additions & 4 deletions app/js/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -162,6 +162,10 @@ function startup() {
console.log("height: " + height);
console.log("width: " + width);
console.log("Aspect ratio: " + aspectRatio);

if (aspectRatio === 1.33) {
captureWindow.classList.add("4by3");
}

notifySuccess("Camera successfully connected.");
}
Expand Down Expand Up @@ -288,8 +292,8 @@ function updateFrameReel(action, id) {

// Add the newly captured frame
if (action === "capture") {
frameReelRow.insertAdjacentHTML("beforeend", `<td><div class="frame-reel-preview">
<img class="frame-reel-img" id="img-${id}" title="Expand image" width="80" height="60" src="${capturedFramesRaw[id - 1]}">
frameReelRow.insertAdjacentHTML("afterbegin", `<td><div class="frame-reel-preview">
<img class="frame-reel-img" id="img-${id}" title="Expand image" width="100" height="75" src="${capturedFramesRaw[id - 1]}">
<i class="btn-frame-delete fa fa-trash" title="Delete Frame"></i>
</div></td>`);

Expand Down Expand Up @@ -479,8 +483,8 @@ function stopitwhenlooping() {
isPlaying = false;
//stop increasing playback frame number
clearInterval(yoplayit);
document.getElementById('playback').setAttribute("src", capturedFramesRaw[curFrame - 1]);
document.querySelector('#currentFrame span').innerHTML = curFrame;
playback.setAttribute("src", capturedFramesRaw[curFrame - 1]);
statusBarCurFrame.innerHTML = curFrame;
btnPlayPause.children[0].classList.remove("fa-pause");
btnPlayPause.children[0].classList.add("fa-play");

Expand Down

0 comments on commit 26a47ba

Please sign in to comment.