From 4d179512a6060e9e3cb952e570e64611649a83b4 Mon Sep 17 00:00:00 2001
From: Byron Ambright <ambri011@umn.edu>
Date: Fri, 25 Oct 2019 13:36:34 -0500
Subject: [PATCH 1/2] Test code for iss119

---
 app/css/dmx.css   |  4 +++-
 app/html/dmx.html |  3 +++
 app/js/dmx.js     | 24 ++++++++++++++++++++++--
 3 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/app/css/dmx.css b/app/css/dmx.css
index 68a42bd..658ed6f 100644
--- a/app/css/dmx.css
+++ b/app/css/dmx.css
@@ -7,4 +7,6 @@ div.section {
     padding-bottom: 8px;
 }
 
-
+.slider {
+    width: 100%;
+}
diff --git a/app/html/dmx.html b/app/html/dmx.html
index f129753..db854db 100644
--- a/app/html/dmx.html
+++ b/app/html/dmx.html
@@ -54,6 +54,9 @@ <h4>Sets all channels on or off</h4>
         <h4>Toggle a continuous fade on all channels</h4>
         <button id='fadeOn'>Fade On</button>
         <button id='fadeOff'>Fade Off</button>
+        <input type="range" min="1" max="10000" value="5000" class="slider" id="fadeDuration">
+        <input type="range" min="1" max="100" value="50" class="slider" id="fadeInterval">
+f
     </div>
 
 </body>
diff --git a/app/js/dmx.js b/app/js/dmx.js
index d1a7b46..be4cb2d 100644
--- a/app/js/dmx.js
+++ b/app/js/dmx.js
@@ -3,8 +3,11 @@ const DMX = parent.require('dmx');
 /* Fading setup */
 let isFading = false;
 let currentFade = 0;
-const fadeDuration = 5000;
-const fadeInterval = 50;
+let fadeDuration =  5000;
+
+// const fadeDuration = getIntFromElementById("fadeDuration", 5000);
+// const fadeInterval = getIntFromElementById("fadeDuration", 50);
+let fadeInterval = 50;
 let fadeChange = 255.0 * fadeInterval / fadeDuration;
 
 // Limits
@@ -39,7 +42,11 @@ function setAll(value) {
 // Updates the current fade amount. Only changes if isFading is set
 function updateFade() {
     if (isFading) {
+
         currentFade += fadeChange;
+        console.log(currentFade);
+        console.log(fadeDuration);
+        console.log(fadeChange);
 
         if (currentFade < 0) {
             currentFade = 0;
@@ -173,6 +180,19 @@ function setupButtons() {
     document.getElementById('rangeStart').oninput = function rangeStartOnChange() { onInputChange('rangeStart'); };
     document.getElementById('rangeEnd').oninput = function rangeEndOnChange() { onInputChange('rangeEnd'); };
     document.getElementById('boxNumber').oninput = function boxNumberOnChange() { onInputChange('boxNumber'); };
+
+    document.getElementById('fadeDuration').onchange = function fadeDurationChange() { 
+        fadeDuration = document.getElementById("fadeDuration").value;
+        fadeChange = 255.0 * fadeInterval / fadeDuration;
+        setInterval(updateFade, fadeInterval);
+    };
+    document.getElementById('fadeInterval').onchange = function fadeIntervalChange() { 
+        fadeInterval = document.getElementById("fadeInterval").value;
+        fadeChange = 255.0 * fadeInterval / fadeDuration;
+        setInterval(updateFade, fadeInterval);
+
+    };
+
 }
 
 // Sets up the page

From 7c4574a3a2e136fc3b7f9d2d456ca467a5066ca8 Mon Sep 17 00:00:00 2001
From: theeldestelder <joshuag98@gmail.com>
Date: Sun, 24 Nov 2019 20:34:22 -0600
Subject: [PATCH 2/2] Iss119 Add slider to change fade speed

Attach a slider on the DMX page to control the speed of the fade. The
previous default fade was very slow. The new fade default is faster with
the ability to increase it further with the slider. The slider changes how
much the brightness level changes every time interval so that increasing
the slider value will make the fade happen faster and vice versa.
---
 app/css/dmx.css   |  2 +-
 app/html/dmx.html |  7 ++++---
 app/js/dmx.js     | 33 ++++++++-------------------------
 3 files changed, 13 insertions(+), 29 deletions(-)

diff --git a/app/css/dmx.css b/app/css/dmx.css
index 658ed6f..625ae94 100644
--- a/app/css/dmx.css
+++ b/app/css/dmx.css
@@ -8,5 +8,5 @@ div.section {
 }
 
 .slider {
-    width: 100%;
+    width: 80%;
 }
diff --git a/app/html/dmx.html b/app/html/dmx.html
index db854db..e3ea378 100644
--- a/app/html/dmx.html
+++ b/app/html/dmx.html
@@ -54,9 +54,10 @@ <h4>Sets all channels on or off</h4>
         <h4>Toggle a continuous fade on all channels</h4>
         <button id='fadeOn'>Fade On</button>
         <button id='fadeOff'>Fade Off</button>
-        <input type="range" min="1" max="10000" value="5000" class="slider" id="fadeDuration">
-        <input type="range" min="1" max="100" value="50" class="slider" id="fadeInterval">
-f
+        <div>
+            <label for="fadeDuration">Fade Speed:</label>
+            <input type="range" min="0.01" max="10" value="5" class="slider" id="fadeDuration" step="0.01">
+        </div>
     </div>
 
 </body>
diff --git a/app/js/dmx.js b/app/js/dmx.js
index be4cb2d..d250ef7 100644
--- a/app/js/dmx.js
+++ b/app/js/dmx.js
@@ -3,12 +3,9 @@ const DMX = parent.require('dmx');
 /* Fading setup */
 let isFading = false;
 let currentFade = 0;
-let fadeDuration =  5000;
+let fadeDelta = 1;
 
-// const fadeDuration = getIntFromElementById("fadeDuration", 5000);
-// const fadeInterval = getIntFromElementById("fadeDuration", 50);
-let fadeInterval = 50;
-let fadeChange = 255.0 * fadeInterval / fadeDuration;
+const fadeInterval = 25; // (ms), the maximum(ish) framerate of DMX
 
 // Limits
 const MAX_CHANNEL = 512; // Inclusive
@@ -42,19 +39,14 @@ function setAll(value) {
 // Updates the current fade amount. Only changes if isFading is set
 function updateFade() {
     if (isFading) {
-
-        currentFade += fadeChange;
-        console.log(currentFade);
-        console.log(fadeDuration);
-        console.log(fadeChange);
+        currentFade += Number(fadeDelta);
 
         if (currentFade < 0) {
             currentFade = 0;
-            fadeChange = -fadeChange;
-        }
-        if (currentFade > 255) {
+            fadeDelta = -fadeDelta;
+        } else if (currentFade > 255) {
             currentFade = 255;
-            fadeChange = -fadeChange;
+            fadeDelta = -fadeDelta;
         }
 
         // Divide by 1 to make it an int
@@ -181,18 +173,9 @@ function setupButtons() {
     document.getElementById('rangeEnd').oninput = function rangeEndOnChange() { onInputChange('rangeEnd'); };
     document.getElementById('boxNumber').oninput = function boxNumberOnChange() { onInputChange('boxNumber'); };
 
-    document.getElementById('fadeDuration').onchange = function fadeDurationChange() { 
-        fadeDuration = document.getElementById("fadeDuration").value;
-        fadeChange = 255.0 * fadeInterval / fadeDuration;
-        setInterval(updateFade, fadeInterval);
+    document.getElementById('fadeDuration').oninput = function fadeDurationChange() {
+        fadeDelta = document.getElementById('fadeDuration').value * Math.sign(fadeDelta);
     };
-    document.getElementById('fadeInterval').onchange = function fadeIntervalChange() { 
-        fadeInterval = document.getElementById("fadeInterval").value;
-        fadeChange = 255.0 * fadeInterval / fadeDuration;
-        setInterval(updateFade, fadeInterval);
-
-    };
-
 }
 
 // Sets up the page