-
Notifications
You must be signed in to change notification settings - Fork 2
/
led.html
100 lines (91 loc) · 3.27 KB
/
led.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<!DOCTYPE html>
<html>
<head>
<title>LED controller</title>
<script src="/static/led.js" type="text/javascript"></script>
<script type="text/javascript">
// Color wheel
var colors;
window.onload = function () {
init();
var out = document.getElementById("output"),
reg = /^#(.)\1(.)\2(.)\3$/;
// this is where colorpicker created
var cp = Raphael.colorpicker(40, 20, 300, "#eee", picker2);
// assigning onchange event handler
cp.onchange = function (clr) {
var confus;
var red = (hexToRgb(clr).r);
var calcr = red*16;
var green = (hexToRgb(clr).g);
var calcg = green*16;
var blue = (hexToRgb(clr).b);
var calcb = blue*16;
var obj = {0: calcr, 1: calcg, 2: calcb}
confus = JSON.stringify(obj);
console.log(confus)
sendColor(confus);
colors = clr;
};
// sending function that waits for ok before sending more
function sendColor(string) {
if (ws.bufferedAmount == 0) {
ws.send(string);
}
}
// Convert hex to rgb
function hexToRgb(hex) {
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;
};
};
// Convert rgb values 0, 1, 2 to hex
function componentToHex(c) {
var hex = c.toString(16);
return hex.length == 1 ? "0" + hex : hex;
};
function rgbToHex(r, g, b) {
return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
};
// Websockets
var ws = null;
colors = colors;
function init(colors) {
colors = colors;
if ("WebSocket" in window) {
ws = new WebSocket("ws://" + location.hostname + "/ws");
ws.onopen = function() {
console.log("Connection is opened");
}
ws.onclose = function() {
console.log("Connection is closed");
}
ws.onmessage = function(msg, colors) {
document.getElementById("display").innerHTML = msg.data;
// Converting received color information into hex
colors = JSON.parse(msg.data)
hex = rgbToHex(colors[0]/16, colors[1]/16, colors[2]/16)
console.log(hex)
document.body.style.backgroundColor = hex;
}
} else {
console.log('Your browser doenst support WebSocket!')
}
}
</script>
</head>
<body>
<div class="container">
<a href="/static/debug.html">Debug</a>
<div id="picker2"></div>
<div id="output"></div>
<p id="display"></p>
</div>
<div style="margin-top: 350px">
</div>
</body>
</html>