blinkstick
Version:
Blickstick API for Node.js
135 lines (112 loc) • 2.88 kB
HTML
<html>
<head>
<title>BlinkStick Color Picker</title>
<style>
body {
text-align: center;
}
select,
label {
width: 100px;
height: 50px;
font-family: Georgia;
font-size: 24px;
text-align: center;
line-height: 50px;
display: block;
color: #333;
}
label {
font-size: 32px;
}
p {
display: inline-block;
padding: 20px;
}
input[type=color] {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border: 0;
}
input::-webkit-color-swatch-wrapper {
padding: 0;
}
#color-picker {
display: none;
}
#color-picker p {
z-index: 1;
position: relative;
font-family: Georgia;
font-size: 32px;
color: #777;
}
body.picker #color-picker {
display: block;
}
body.picker #rgb-picker {
display: none;
}
</style>
</head>
<body>
<section id="rgb-picker">
<p>
<label for="red">Red</label>
<select id="red"></select>
</p>
<p>
<label for="green">Green</label>
<select id="green"></select>
</p>
<p>
<label for="blue">Blue</label>
<select id="blue"></select>
</p>
</section>
<section id="color-picker">
<input type="color" id="picker" />
<p>Click to choose color</p>
</section>
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io.connect(),
red, green, blue, i, html = '',
picker = document.getElementById('picker');
function emitRGB () {
var hex = '#' + red.value + green.value + blue.value;
document.body.style.backgroundColor = hex;
socket.emit('color', { hex: hex });
}
if (picker.type == 'color') {
document.body.className = 'picker';
socket.on('color', function (val) {
picker.value = val;
});
picker.addEventListener('input', function () {
socket.emit('color', { hex: this.value });
});
} else {
red = document.getElementById('red');
green = document.getElementById('green');
blue = document.getElementById('blue');
for (i = 0; i < 256; i++) html += '<option value="' + ('0' + i.toString(16)).substr(-2) + '">' + i + '</option>';
red.innerHTML = green.innerHTML = blue.innerHTML = html;
socket.on('color', function (val) {
red.value = parseInt(val.substr(1, 2), 16);
green.value = parseInt(val.substr(3, 2), 16);
blue.value = parseInt(val.substr(5, 2), 16);
document.body.style.backgroundColor = val;
});
red.addEventListener('change', emitRGB);
green.addEventListener('change', emitRGB);
blue.addEventListener('change', emitRGB);
}
</script>
</body>
</html>