forked from googlecodelabs/candle-bluetooth
/
app.js
64 lines (53 loc) · 2.25 KB
/
app.js
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
document.querySelector('#connect').addEventListener('click', function(event) {
/* Clicking this button will attempt to connect to the PLAYBULB Candle and
* read some values such as Device Name and Battery Level. */
});
function changeColor() {
/* This function is called when user clicks on an effect radio button. */
}
var r = g = b = 255;
function onColorChanged(rgb) {
if (rgb) {
console.log('Color changed to ' + rgb);
r = rgb[0]; g = rgb[1]; b = rgb[2];
} else {
console.log('Color changed');
}
}
var img = new Image();
img.src = 'color-wheel.png';
img.onload = function() {
var canvas = document.querySelector('canvas');
var context = canvas.getContext('2d');
canvas.width = 300 * devicePixelRatio;
canvas.height = 300 * devicePixelRatio;
canvas.style.width = "300px";
canvas.style.height = "300px";
canvas.addEventListener('click', function(evt) {
// Refresh canvas in case user zooms and devicePixelRatio changes.
canvas.width = 300 * devicePixelRatio;
canvas.height = 300 * devicePixelRatio;
context.drawImage(img, 0, 0, canvas.width, canvas.height);
var rect = canvas.getBoundingClientRect();
var x = Math.round((evt.clientX - rect.left) * devicePixelRatio);
var y = Math.round((evt.clientY - rect.top) * devicePixelRatio);
var data = context.getImageData(0, 0, canvas.width, canvas.height).data;
r = data[((canvas.width * y) + x) * 4];
g = data[((canvas.width * y) + x) * 4 + 1];
b = data[((canvas.width * y) + x) * 4 + 2];
changeColor();
context.beginPath();
context.arc(x, y + 2, 10 * devicePixelRatio, 0, 2 * Math.PI, false);
context.shadowColor = '#333';
context.shadowBlur = 4 * devicePixelRatio;
context.fillStyle = 'white';
context.fill();
});
context.drawImage(img, 0, 0, canvas.width, canvas.height);
}
document.querySelector('#noEffect').addEventListener('click', changeColor);
document.querySelector('#candleEffect').addEventListener('click', changeColor);
document.querySelector('#flashing').addEventListener('click', changeColor);
document.querySelector('#pulse').addEventListener('click', changeColor);
document.querySelector('#rainbow').addEventListener('click', changeColor);
document.querySelector('#rainbowFade').addEventListener('click', changeColor);