Toggle FPS and debug controls

css/style.css

@@ -24,7 +24,12 @@ td, th {
 }
 
 form input, form button {
-  margin: 5px;
+  margin-bottom: 5px;
+  margin-top: 10px;
+}
+
+form label, form label strong {
+  margin-right: 10px;
 }
 
 input {

index.html

@@ -18,7 +18,7 @@
     <script src="js/proximity.js"></script>
     <div id="options">
       <button id="toggle-help">Help</button>
-      <button id="toggle-controls">Controls</button>
+      <button id="toggle-controls">Settings</button>
     </div>
     <div id="help" class="panel" style="display: none;">
       <h2>Help</h2>
@@ -107,19 +107,23 @@
     </div>
     <div id="controls" class="panel" style="display: none;">
 			<form action="">
-        <label>Cycle Duration:
+        <label><strong>Cycle Duration:</strong>
           <input type="range" name="timeRange" min="1" max="360" value="0" oninput="this.form.timeInput.value=this.value" />
           <input type="number" name="timeInput" min="1" max="360" value="0" oninput="this.form.timeRange.value=this.value" />
         </label>
         <button type="button" id="randomize-cycles">Randomize Point Cycles</button><br />
-        <label>Point tweening:
+        <label><strong>Point tweening:</strong>
           <label><input type="radio" name="tweening" value="linear" /> Linear</label>
           <label><input type="radio" name="tweening" value="meandering" checked /> Meandering</label>
           <label><input type="radio" name="tweening" value="snappy" /> Snappy</label>
           <label><input type="radio" name="tweening" value="bouncy" /> Bouncy</label>
           <label><input type="radio" name="tweening" value="elastic" /> Elastic</label>
           <label><input type="radio" name="tweening" value="back" /> Overshoot</label>
-        </label>
+        </label><br />
+        <label><strong>Debugging:</strong>
+          <label><input type="checkbox" name="debug"> Debug</label>
+          <label><input type="checkbox" name="fpsCounter"> FPS Counter</label>
+        <label>
 			</form>
     </div>
   </body>

js/proximity.js

@@ -280,6 +280,40 @@ function toggleControls () {
     }
 }
 
+function toggleFPS () {
+    var fpsCheckbox = document.getElementsByName('fpsCounter')[0];
+    if (fpsEnabled) {
+        stage.removeChild(fpsGraphic);
+        fpsEnabled = false;
+    } else {
+        stage.addChild(fpsGraphic);
+        fpsEnabled = true;
+        lastLoop = new Date();
+    }
+    fpsCheckbox.checked = fpsEnabled;
+}
+
+function toggleDebug () {
+    var fpsCheckbox = document.getElementsByName('fpsCounter')[0];
+    var debugCheckbox = document.getElementsByName('debug')[0];
+    if (debug) {
+        if (fpsEnabled) {
+            stage.removeChild(fpsGraphic);
+        }
+        debug = false;
+        fpsEnabled = debug;
+    } else {
+        if (!fpsEnabled) {
+            stage.addChild(fpsGraphic);
+        }
+        debug = true;
+        fpsEnabled = debug;
+        lastLoop = new Date();
+    }
+    fpsCheckbox.checked = fpsEnabled;
+    debugCheckbox.checked = debug;
+}
+
 function randomInt (min, max) {
     // inclusive of min and max
     return Math.floor(Math.random() * (max - min + 1)) + min;
@@ -754,8 +788,10 @@ window.PIXI.loader
     .load(loopStart);
 
 window.onload = function () {
-    var tweeningInputs;
+    var tweeningInputs, debug, fpsCheckbox;
     tweeningInputs = document.getElementsByName('tweening');
+    debugCheckbox = document.getElementsByName('debug')[0];
+    fpsCheckbox = document.getElementsByName('fpsCounter')[0];
     /* MOUSE AND TOUCH EVENTS */
 
     window.addEventListener('mousewheel', function (e) {
@@ -854,31 +890,9 @@ window.onload = function () {
             tweeningFns = tweeningSets.back;
             tweeningInputs[5].checked = true;
         } else if (e.keyCode === 70) { // f
-            // toggle fpsCounter
+            toggleFPS();
-            if (fpsEnabled) {
-                stage.removeChild(fpsGraphic);
-                fpsEnabled = false;
-            } else {
-                stage.addChild(fpsGraphic);
-                fpsEnabled = true;
-                lastLoop = new Date();
-            }
         } else if (e.keyCode === 68) { // d
-            // toggle debug
+            toggleDebug();
-            if (debug) {
-                if (fpsEnabled) {
-                    stage.removeChild(fpsGraphic);
-                }
-                debug = false;
-                fpsEnabled = debug;
-            } else {
-                if (!fpsEnabled) {
-                    stage.addChild(fpsGraphic);
-                }
-                debug = true;
-                fpsEnabled = debug;
-                lastLoop = new Date();
-            }
         } else if (e.keyCode === 78) { // n
             if (drawNodes) {
                 for (i = 0; i < sprites.length; i++) {
@@ -937,4 +951,12 @@ window.onload = function () {
             tweeningFns = tweeningSets[this.value];
         });
     }
+
+    debugCheckbox.addEventListener('change', function (e) {
+        toggleDebug();
+    });
+
+    fpsCheckbox.addEventListener('change', function (e) {
+        toggleFPS();
+    });
 };