Skip to content
GitLab
Explore
Sign in
Primary navigation
Search or go to…
Project
F
Fadecandy
Manage
Activity
Members
Code
Repository
Branches
Commits
Tags
Repository graph
Compare revisions
Help
Help
Support
GitLab documentation
Compare GitLab plans
Community forum
Contribute to GitLab
Provide feedback
Keyboard shortcuts
?
Snippets
Groups
Projects
Show more breadcrumbs
scanlime
Fadecandy
Commits
b9602aa4
Commit
b9602aa4
authored
11 years ago
by
supsup
Browse files
Options
Downloads
Patches
Plain Diff
Create random-color-pixel-strip
parent
2bc5a63b
No related branches found
Branches containing commit
No related tags found
No related merge requests found
Changes
1
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
examples/html/random-color-pixel-strip
+150
-0
150 additions, 0 deletions
examples/html/random-color-pixel-strip
with
150 additions
and
0 deletions
examples/html/random-color-pixel-strip
0 → 100644
+
150
−
0
View file @
b9602aa4
<!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>
This diff is collapsed.
Click to expand it.
Preview
0%
Loading
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Save comment
Cancel
Please
register
or
sign in
to comment