Merge pull request #124 from placidblob/master

Tidying up examples/html/random-color-pixel-strip.html

examples/html/random-color-pixel-strip.html

@@ -15,22 +15,6 @@
         font-size: 20px;
     }
 
-    label {
-        display: block;
-        width: 100px;
-        margin: 10px 0 0 0;
-    }
-
-    input {
-        width: 400px;
-        height: 25px;
-        margin: 10px 20px;
-    }
-
-    span.value {
-        font: 20px monospace;
-    }
-
 </style>
 <script type="text/javascript">
 
@@ -57,15 +41,17 @@
         }
 
         // Set Default Black Color.
-        var defaultColor = {r:0,b:0,g:0};
+        var DEFAULT_COLOR = {r:0,b:0,g:0};
         
-        // Set Queue Speed, default is 3 seconds.
-        var speed = 3000;
-       
+        // Set timeout between color changes, in milliseconds
+        var TIMEOUT = 3000;
+
+        // Set number of LEDs
+        var NUM_LEDS = 60;
+
         // Set all pixels to a given color
-        function writeFrame(red, green, blue) {
-            var leds = 60;
-            var packet = new Uint8ClampedArray(4 + leds * 3);
+        function writeFrame() {
+            var packet = new Uint8Array(4 + NUM_LEDS * 3);
             // console.log(packet);
             if (socket.readyState != 1 /* OPEN */) {
                 // The server connection isn't open. Nothing to do.
@@ -86,52 +72,50 @@
             //http://www.paulirish.com/2009/random-hex-color-code-snippets/
             var myRandColor = '#'+Math.floor(Math.random()*16777215).toString(16);
             var myHtmlText = "<div style='color:" + myRandColor + "'>"+ myRandColor + "</div>";
-            var myObj = hexToRgb(myRandColor);
+            var rgb = hexToRgb(myRandColor);
             $("#colorQueue").append(myHtmlText);
              
 
             // Sample the center pixel of each LED
-            for (var led = 0; led < leds; led++) {
+            for (var led = 0; led < NUM_LEDS; led++) {
 
-                //protection against null from random color.
-                myObj === null ? myObj = defaultColor : myObj;
+                //protection against null from hexToRgb().
+                if (rgb === null)
+                    rgb = DEFAULT_COLOR;
 
-                packet[dest++] = myObj.r;
-                packet[dest++] = myObj.g;
-                packet[dest++] = myObj.b;
+                packet[dest++] = rgb.r;
+                packet[dest++] = rgb.g;
+                packet[dest++] = rgb.b;
             }
-            socket.send(packet.buffer);
-        }
 
-        // Animation parameters
-        var lastTime = 0;
-        var phase = 0;
+            // send the command to the FadeCandy Server
+            socket.send(packet.buffer);
+        };
 
         // Animation loop
         var animate = function() {
 
-            writeFrame(
-                defaultColor.r,
-                defaultColor.g,
-                defaultColor.b);
+            writeFrame();
 
-            setTimeout(animate, speed);
-        }
+            setTimeout(animate, TIMEOUT);
+        };
 
         // Connect to a Fadecandy server running on the same computer, on the default port
         var socket = new WebSocket('ws://localhost:7890');
 
         // Put some connection status text in the corner of the screen
         $('#connectionStatus').text('Connecting to fcserver...');
+
         socket.onclose = function(event) {
             $('#connectionStatus').text('Not connected to fcserver');
-        }
+        };
+
         socket.onopen = function(event) {
             $('#connectionStatus').text('Connected');
             animate();
-        }
+        };
 
-    })
+    });
 
 
 </script>