Merge pull request #179 from BoatsAreRockable/issue-71-onionskin

Remove onion skinning toggle button #71
charlielee · Dec 19, 2016 · 57bd2e7 · 57bd2e7
2 parents 976df3a + 5a2fdee
commit 57bd2e7
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 49 deletions.
diff --git a/.gitignore b/.gitignore
@@ -26,3 +26,4 @@ app/lib/
 node_modules/
 jsconfig.json
 *.~is
+npm-debug.log
diff --git a/app/animator.html b/app/animator.html
@@ -139,12 +139,11 @@ <h2><i class="fa fa-download fa-fw"></i> Export</h2>
 
         <table id="control-panel-table">
             <tr>
-                <td id="onion-toggle-td">
+                <td id="preview-options-td">
                     <div id="btn-grid-toggle"><i class="fa fa-th" title="Grid Overlay"></i></div>
-                    <div id="btn-onion-skin-toggle"><i class="fa fa-adjust fa-flip-horizontal" title="Enable Onion Skin"></i></div>
                 </td>
 
-                <td id="onion-opacity-td"><input id="input-onion-skin-opacity" type="range" name="onionSkinAmount" min="0" max="20" value="10" title="50%"><div id="slider-background-middle"></div>
+                <td id="onion-opacity-td"><input id="input-onion-skin-opacity" type="range" name="onionSkinAmount" min="-100" max="100" value="0" title="0%" step="2"><div id="slider-background-middle"></div>
                 </td>
                 <td id="framerate-container-td"><div id="framerate-container"><input id="input-fr-change" type="number" value="15" min="1" max="60" title="Framerate"><label for="input-fr-change"> FPS</label></div></td>
             </tr>

diff --git a/app/css/animator.css b/app/css/animator.css
@@ -218,17 +218,16 @@ a {
   padding: 0;
   margin: 0;
   border: 0;
-  opacity: 0.5;
+  opacity: 0;
   position: absolute;
   top: 0;
   left: 0;
   object-fit: contain;
   z-index: 2;
-  display: none;
+  display: inline;
 }
 
-#onion-skinning-frame.visible { display: inline; }
-#onion-skinning-frame.visible:not([src]){ display:none; }
+#onion-skinning-frame:not([src]){ display:none; }
 
 /* ========== CONTROLS ============== */
 
@@ -385,7 +384,7 @@ a {
   float: left;
 }
 
-#onion-toggle-td, #framerate-container-td {
+#preview-options-td, #framerate-container-td {
   width: 35%;
 }
 
@@ -450,7 +449,7 @@ a {
 
 #input-onion-skin-opacity {
   -webkit-appearance: none;
-  max-width: 15em;
+  width: 15em;
 }
 
 

diff --git a/app/js/main.js b/app/js/main.js
@@ -64,10 +64,8 @@ var width  = 640,
     curDirDisplay      = document.querySelector("#currentDirectoryName"),
 
     // Onion skin
-    isOnionSkinEnabled = false,
-    onionSkinToggle    = document.querySelector("#btn-onion-skin-toggle"),
-    onionSkinWindow    = document.querySelector("#onion-skinning-frame"),
-    onionSkinOpacity   = document.querySelector("#input-onion-skin-opacity"),
+    onionSkinWindow = document.querySelector("#onion-skinning-frame"),
+    onionSkinSlider = document.querySelector("#input-onion-skin-opacity"),
 
     // Frame reel
     frameReelArea  = document.querySelector("#area-frame-reel"),
@@ -221,14 +219,13 @@ function startup() {
     // Undo last captured frame
     btnDeleteLastFrame.addEventListener("click", undoFrame);
 
-    // Toggle onion skin
-    onionSkinToggle.addEventListener("click", _toggleOnionSkin);
-
     // Toggle preview looping
     btnLoop.addEventListener("click", _toggleVideoLoop);
 
-    // Change onion skin opacity
-    onionSkinOpacity.addEventListener("input", _onionSkinChangeAmount);
+  // Change onion skin opacity
+  onionSkinSlider.addEventListener("input", _onionSkinChangeAmount);
+
+
 
     // Change the default save directory
     btnDirectoryChange.addEventListener("click", _changeSaveDirectory);
@@ -462,6 +459,9 @@ function updateFrameReel(action, id) {
         frameReelMsg.classList.remove("hidden");
         frameReelTable.classList.add("hidden");
         switchMode("capture");
+
+      // Clear the onion skin window
+      onionSkinWindow.removeAttribute("src");
     }
 }
 
@@ -498,32 +498,6 @@ function undoFrame() {
     }
 }
 
-/**
- * Toggle onion skinning on or off.
- */
-function _toggleOnionSkin(ev) {
-    "use strict";
-    // Onion skin is currently enabled, turn it off
-    if (isOnionSkinEnabled) {
-      isOnionSkinEnabled = false;
-      ev.target.setAttribute("title", "Enable Onion Skin");
-      onionSkinToggle.children[0].classList.remove("active");
-      onionSkinWindow.classList.remove("visible");
-
-      // Onion skin is currently disabled, turn it on
-    } else {
-      isOnionSkinEnabled = true;
-      ev.target.setAttribute("title", "Disable Onion Skin");
-      onionSkinToggle.children[0].classList.add("active");
-
-      // Display last captured frame
-      onionSkinWindow.classList.add("visible");
-      if (totalFrames > 0) {
-          onionSkinWindow.setAttribute("src", capturedFrames[totalFrames - 1].src);
-      }
-    }
-}
-
 /**
  * Play audio if checkbox checked.
  * @param {String} file Location of audio file to play.
@@ -714,12 +688,17 @@ function _frameReelScroll() {
  * @param {Object} ev Event object from addEventListener.
  */
 function _onionSkinChangeAmount(ev) {
-    "use strict";
-    // Calculate the percentage opacity value
-    var amount = ev.target.value * 5;
+  "use strict";
+  // Calculate the percentage opacity value
+  var amount = ev.target.value;
 
-    ev.target.setAttribute("title", `${amount}%`);
-    onionSkinWindow.style.opacity = amount / 100;
+  ev.target.setAttribute("title", `${amount}%`);
+  onionSkinWindow.style.opacity = Math.abs(amount / 100);
+
+  // Make it easier to switch off onion skinning
+  if (amount >= -6 && amount <= 6) {
+    onionSkinSlider.value = 0;
+  }
 }
 
 /**