-
Notifications
You must be signed in to change notification settings - Fork 4
/
index.html
135 lines (120 loc) · 6.13 KB
/
index.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
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!DOCTYPE html>
<html>
<head>
<script src="tools/misc.js"></script>
<script src="deviceInfo.js"></script>
<script src="battery.js"></script>
<script src="heartRate.js"></script>
<script src="temperature.js"></script>
<script src="lightBulb.js"></script>
<script src="stressDisplay.js"></script>
<script src="puck.js"></script>
<script src="microbit.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;">
Chrome Bluetooth Demo:<br/>
<hr/>
<div style="border-style: ridge;">
Basic:<br/>
<button onclick="deviceInfo_connect()">Device Information</button>
<button onclick="battery_connect()">Battery Information</button>
<input type="text" id="battery_value" value="" style="width:30px" readonly/>%
</div>
<br/>
<div style="border-style: ridge; display:none;">
Puck:<br/>
<button onclick="puck_connect()">Start</button>
<input type="text" id="puck_value" value="0" style="width:30px" readonly/>
<button onclick="puck_disconnect()">Stop</button>
</div>
<div style="border-style: ridge;">
Heart Rate:<br/>
<button onclick="heartRate_connect()">Start</button>
<input type="text" id="heartRate_value" value="0" style="width:30px" readonly/>
<button onclick="heartRate_disconnect()">Stop</button>
</div>
<div style="border-style: ridge; display:none;">
Temperature: (Using BLE Peripheral Simulator App)
<br/>
<button onclick="temperature_connect()">Start</button>
<button onclick="temperature_disconnect()">Stop</button>
</div>
<br/>
<div style="border-style: ridge;">
Microbit button:<br/>
<button onclick="microbit_connect()">Start</button>
A:<input type="text" id="microbit_valueA" value="0" style="width:30px" readonly/>
B:<input type="text" id="microbit_valueB" value="0" style="width:30px" readonly/>
<br/>
Acc (X,Y,Z) :
(<input type="text" id="microbit_valueAccX" value="0" style="width:70px" readonly/>
,<input type="text" id="microbit_valueAccY" value="0" style="width:70px" readonly/>
,<input type="text" id="microbit_valueAccZ" value="0" style="width:70px" readonly/>
)
, G's:<input type="text" id="microbit_valueAccG" value="0" style="width:70px; text-align: right;" readonly/>
<br/>
Magnet (X,Y,Z) :
(<input type="text" id="microbit_magnetAccX" value="0" style="width:70px" readonly/>
,<input type="text" id="microbit_magnetAccY" value="0" style="width:70px" readonly/>
,<input type="text" id="microbit_magnetAccZ" value="0" style="width:70px" readonly/>
)
, G's:<input type="text" id="microbit_magnetAccG" value="0" style="width:70px; text-align: right;" readonly/>
<br/>
Temp:
(<input type="text" id="microbit_temp" value="0" style="width:70px" readonly/>
) centigrade
<br/>
<button onclick="microbit_disconnect()">Stop</button>
</div>
<br/>
<div style="border-style: ridge;">
Light Bulb:<br/>
<button onclick="lightBulb_connect()">Start</button>
<button onclick="lightBulb_traffic()">Traffic</button>
<button onclick="lightBulb_red()" style="background-color: #FFAEAE;">Red</button>
<button onclick="lightBulb_yellow()" style="background-color: #FFF0AA;">Yellow</button>
<button onclick="lightBulb_green()" style="background-color: #B0E57C;">Green</button>
<button onclick="lightBulb_blue()" style="background-color: #B4D8E7;">Blue</button>
<button onclick="lightBulb_black()" style="background-color: #808080;">Black</button>
<br/><button onclick="lightBulb_disconnect()">Stop</button>
<div id="color-picker" class="cp-default"></div>
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; background-color:Red; width: 100px;height: 100px;"></div>
</div>
<br/>
<div style="border-style: ridge;">
Stress Display:<br/>
<button onclick="stressDisplay_lightBulb_connect()">Light Bulb Start</button>
<button onclick="stressDisplay_heartRate_connect()">Heart Rate Start</button>
<button onclick="stressDisplay_disconnect()">Stop</button>
<br/><label style="display: inline-block; width: 40px;">value:</label>
<input type="text" id="valueStressDisplay" value="70" style="width:30px" readonly/>
<input id="valueStress" type="range" min="40" max="160" value="70" step="1" style="width:400px" onchange="valueDisplay(this.value);"
/>
<br/><label style="display: inline-block; width: 40px;">min:</label>
<input type="text" id="minStressDisplay" value="60" style="width:30px" readonly/>
<input id="minStress" type="range" min="40" max="160" value="60" step="1" style="width:400px" onchange="minDisplay(this.value);"
/>
<br/><label style="display: inline-block; width: 40px;">max:</label>
<input type="text" id="maxStressDisplay" value="80" style="width:30px" readonly/>
<input id="maxStress" type="range" min="40" max="160" value="80" step="1" style="width:400px" onchange="maxDisplay(this.value);"
/>
</div>
<br/>Results:
<br/> <textarea id="results" rows="10" style="width:100%;font-size: 70%;font-family:Courier New;font-weight:bold;"></textarea>
</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
});
</script>