Skip to content
Snippets Groups Projects
Commit 1c2a1930 authored by Yannis.Kalligeros's avatar Yannis.Kalligeros
Browse files

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

parent 8ee050e7
No related branches found
No related tags found
No related merge requests found
...@@ -15,22 +15,6 @@ ...@@ -15,22 +15,6 @@
font-size: 20px; 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> </style>
<script type="text/javascript"> <script type="text/javascript">
...@@ -57,15 +41,17 @@ ...@@ -57,15 +41,17 @@
} }
// Set Default Black Color. // 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. // Set timeout between color changes, in milliseconds
var speed = 3000; var TIMEOUT = 3000;
// Set number of LEDs
var NUM_LEDS = 60;
// Set all pixels to a given color // Set all pixels to a given color
function writeFrame(red, green, blue) { function writeFrame() {
var leds = 60; var packet = new Uint8Array(4 + NUM_LEDS * 3);
var packet = new Uint8ClampedArray(4 + leds * 3);
// console.log(packet); // console.log(packet);
if (socket.readyState != 1 /* OPEN */) { if (socket.readyState != 1 /* OPEN */) {
// The server connection isn't open. Nothing to do. // The server connection isn't open. Nothing to do.
...@@ -86,52 +72,50 @@ ...@@ -86,52 +72,50 @@
//http://www.paulirish.com/2009/random-hex-color-code-snippets/ //http://www.paulirish.com/2009/random-hex-color-code-snippets/
var myRandColor = '#'+Math.floor(Math.random()*16777215).toString(16); var myRandColor = '#'+Math.floor(Math.random()*16777215).toString(16);
var myHtmlText = "<div style='color:" + myRandColor + "'>"+ myRandColor + "</div>"; var myHtmlText = "<div style='color:" + myRandColor + "'>"+ myRandColor + "</div>";
var myObj = hexToRgb(myRandColor); var rgb = hexToRgb(myRandColor);
$("#colorQueue").append(myHtmlText); $("#colorQueue").append(myHtmlText);
// Sample the center pixel of each LED // 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. //protection against null from hexToRgb().
myObj === null ? myObj = defaultColor : myObj; if (rgb === null)
rgb = DEFAULT_COLOR;
packet[dest++] = myObj.r; packet[dest++] = rgb.r;
packet[dest++] = myObj.g; packet[dest++] = rgb.g;
packet[dest++] = myObj.b; packet[dest++] = rgb.b;
} }
socket.send(packet.buffer);
}
// Animation parameters // send the command to the FadeCandy Server
var lastTime = 0; socket.send(packet.buffer);
var phase = 0; };
// Animation loop // Animation loop
var animate = function() { var animate = function() {
writeFrame( writeFrame();
defaultColor.r,
defaultColor.g,
defaultColor.b);
setTimeout(animate, speed); setTimeout(animate, TIMEOUT);
} };
// Connect to a Fadecandy server running on the same computer, on the default port // Connect to a Fadecandy server running on the same computer, on the default port
var socket = new WebSocket('ws://localhost:7890'); var socket = new WebSocket('ws://localhost:7890');
// Put some connection status text in the corner of the screen // Put some connection status text in the corner of the screen
$('#connectionStatus').text('Connecting to fcserver...'); $('#connectionStatus').text('Connecting to fcserver...');
socket.onclose = function(event) { socket.onclose = function(event) {
$('#connectionStatus').text('Not connected to fcserver'); $('#connectionStatus').text('Not connected to fcserver');
} };
socket.onopen = function(event) { socket.onopen = function(event) {
$('#connectionStatus').text('Connected'); $('#connectionStatus').text('Connected');
animate(); animate();
} };
}) });
</script> </script>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment