Create random-color-pixel-strip

b9602aa4 · supsup · 2bc5a63b · b9602aa4
Commit b9602aa4 authored 11 years ago by supsup
--- a/examples/html/random-color-pixel-strip
+++ b/examples/html/random-color-pixel-strip
+<!DOCTYPE html>
+<html>
+<head>
+<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
+<style type="text/css">
+
+    body {
+        background: #222;
+        color: #ddd;
+        font: 15px verdana;
+    }
+
+    #connectionStatus {
+        font-weight: bold;
+        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">
+
+    /*
+     * Experiment with random Color Queue      
+     */
+
+    $(function() {
+
+        function hexToRgb(hex) {
+            // http://stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb
+            // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
+            var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
+            hex = hex.replace(shorthandRegex, function(m, r, g, b) {
+                return r + r + g + g + b + b;
+            });
+
+            var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+            return result ? {
+                r: parseInt(result[1], 16),
+                g: parseInt(result[2], 16),
+                b: parseInt(result[3], 16)
+            } : null;
+        }
+
+        // Scrape values from our form
+        var color = {r:0,b:0,g:0};
+       
+        // Set all pixels to a given color
+        function writeFrame(red, green, blue) {
+            var leds = 60;
+            var packet = new Uint8ClampedArray(4 + leds * 3);
+            // console.log(packet);
+            if (socket.readyState != 1 /* OPEN */) {
+                // The server connection isn't open. Nothing to do.
+                return;
+            }
+
+            if (socket.bufferedAmount > packet.length) {
+                // The network is lagging, and we still haven't sent the previous frame.
+                // Don't flood the network, it will just make us laggy.
+                // If fcserver is running on the same computer, it should always be able
+                // to keep up with the frames we send, so we shouldn't reach this point.
+                return;
+            }
+
+            // Dest position in our packet. Start right after the header.
+            var dest = 4;
+            
+            //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);
+            $("#colorQueue").append(myHtmlText);
+             
+
+            // Sample the center pixel of each LED
+            for (var led = 0; led < leds; led++) {
+
+                //protection against null from random color.
+                myObj === null ? myObj = {r:0,b:0,g:0} : myObj;
+
+                packet[dest++] = myObj.r;
+                packet[dest++] = myObj.g;
+                packet[dest++] = myObj.b;
+            }
+            socket.send(packet.buffer);
+        }
+
+        // Animation parameters
+        var lastTime = 0;
+        var phase = 0;
+
+        // Animation loop
+        var animate = function() {
+
+            // Get time delta 
+
+            writeFrame(
+                color.r,
+                color.g,
+                color.b);
+
+            setTimeout(animate, 3000);
+        }
+
+        // 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>
+</head>
+<body>
+<form>
+
+    <div id="connectionStatus"></div>
+
+    <h3> Next Color: </h3>
+    <div id="colorQueue"></div>
+
+    <br/>
+
+</form>
+</body>
+</html>