diff --git a/examples/html/random-color-pixel-strip.html b/examples/html/random-color-pixel-strip.html index 189db9b53254a02ecc887ee5832e437aa99be22e..dd44735dae5f146ba1b4de1edccdd62ab7a2cbea 100644 --- a/examples/html/random-color-pixel-strip.html +++ b/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>