-
Notifications
You must be signed in to change notification settings - Fork 4
/
demo.html
115 lines (97 loc) · 4.23 KB
/
demo.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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<!DOCTYPE html>
<html>
<head>
<script src="tools/misc.js"></script>
<script src="lightBulb.js"></script>
<script type="text/javascript" src="tools/colorpicker.js"></script>
<link rel="stylesheet" type="text/css" href="css/themes.css" />
<title>Chrome Bluetooth Demo</title>
</head>
<body style=" width:500px;" onload="initButtons()">
Chrome Bluetooth Talk - Assist:
<br/>
<br/>
<div style="border-style: ridge;">
Light Bulb:
<br/>
<br/>
<button onclick="lightBulb_connect()" style="width:200px; height:50px;">Start</button>
<button onclick="lightBulb_countdown()" style="width:200px; height:50px;">Countdown</button>
<br/>
<button onclick="lightBulb_traffic()" style="width:200px; height:50px;">Traffic</button>
<br/>
<button onclick="lightBulb_red()" style="width:200px; height:50px; background-color: #FFAEAE;">Red</button>
<br/>
<button onclick="lightBulb_yellow()" style="width:200px; height:50px; background-color: #FFF0AA;">Yellow</button>
<br/>
<button onclick="lightBulb_green()" style="width:200px; height:50px; background-color: #B0E57C;">Green</button>
<br/>
<button onclick="lightBulb_blue()" style="width:200px; height:50px; background-color: #B4D8E7;">Blue</button>
<br/>
<button onclick="lightBulb_black()" style="width:200px; height:50px; background-color: #808080;">Black</button>
<br/>
<button onclick="lightBulb_common(255,255,255)" style="width:200px; height:50px; background-color: White;">White</button>
<div id="color-picker" class="cp-default"></div>
<br/>RGB:
<input type="text" id="rgb_value" value="0" style="width:200px; font-family:Courier New;font-weight:bold;" readonly/>
<div id="color-value" style="border-style: ridge;backgroundColor:Red; width: 100px;height: 100px;"></div>
<br/>
<button onclick="lightBulb_disconnect()" style="width:200px; height:50px;">Stop</button>
<div style="border-style: ridge;">
Song:
<audio controls id="my-audio">
<source src="IndiannaJones.mp3" type="audio/mpeg">
<!-- fallback for non supporting browsers goes here -->
<p>Your browser does not support HTML5 audio, but you can still
<a href="IndiannaJones.mp3">download the music</a>.</p>
</audio>
<!-- custom play and pause buttons -->
<br/>
<button id="playToggle" style="width:200px; height:50px; background-color: White;">play toggle</button>
<br/>
<button id="play" style="width:200px; height:50px; background-color: White;">play</button>
<button id="pause" style="width:200px; height:50px; background-color: White;">pause</button>
</div>
</div>
<span id="lightBulbColorKey"></span>
</body>
</html>
<script type="text/javascript">
ColorPicker(
document.getElementById('color-picker'),
function (hex, hsv, rgb) {
//console.log(hsv.h, hsv.s, hsv.v); // [0-359], [0-1], [0-1]
//console.log(rgb.r, rgb.g, rgb.b); // [0-255], [0-255], [0-255]
//document.getElementById('color-value').style.backgroundColor = hex;
lightBulb_common(rgb.r, rgb.g, rgb.b);
//document.body.style.backgroundColor = hex; // #HEX
});
var playing = false;
var myAudio = null;
function playAudio() {
myAudio.currentTime = 0;
myAudio.play();
playing = true;
}
function pauseAudio() {
myAudio.pause();
playing = false;
}
function playToggleAudio() {
if (playing)
pauseAudio();
else
playAudio();
}
window.onload = function () {
initButtons();
myAudio = document.getElementById('my-audio');
var playToggle = document.getElementById('playToggle');
var play = document.getElementById('play');
var pause = document.getElementById('pause');
// associate functions with the 'onclick' events
playToggle.onclick = playToggleAudio;
play.onclick = playAudio;
pause.onclick = pauseAudio;
}
</script>