-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
78 lines (75 loc) · 3.87 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
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta http-equiv="origin-trial" content="AtgOYVRO5xlsm/3qCzZ701Hx8qTUrCUbFVML9Z8E9vELP5w9K9E73YWGBQc4Ivy0hGd+++sh7JUtKx+3EuV3ngkAAABeeyJvcmlnaW4iOiAiaHR0cHM6Ly9ibHVlYXBwaW8uZ2l0aHViLmlvOjQ0MyIsICJmZWF0dXJlIjogIldlYkJsdWV0b290aCIsICJleHBpcnkiOiAxNDc2ODE1NjAyfQ==" />
<title>PLAYBULB Candle Demo</title>
<meta name="description" content="Control the color and effects of a PLAYBULB Candle with a Web Bluetooth app.">
<link rel="icon" sizes="192x192" href="../favicon.png">
<link rel="manifest" href="manifest.json">
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.4/material.green-light_green.min.css">
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.4/material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="styles.css">
</head>
<body id="state">
<div id="step1">
<div id="title">PLAYBULB CANDLE DEMO</div>
<button id="connect" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">CONNECT</button>
<div id="no-bluetooth" class="no-bluetooth-card-square mdl-card mdl-shadow--2dp">
<div class="mdl-card__title mdl-card--expand">
<h2 class="mdl-card__title-text">No Web Bluetooth</h2>
</div>
<div class="mdl-card__supporting-text">
Web Bluetooth isn't currently enabled. Please check that your browser and
device support it and have any necessary development flags set.
</div>
</div>
</div>
<div id="step2">
<canvas></canvas>
<input id="deviceName" type="text" maxLength="20">
<div id="buttons">
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="noEffect">
<input type="radio" id="noEffect" name="effectSwitch" class="mdl-radio__button" checked/>
<span class="mdl-radio__label">No Effect</span>
</label>
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="candleEffect">
<input type="radio" id="candleEffect" name="effectSwitch" class="mdl-radio__button"/>
<span class="mdl-radio__label">Candle Effect</span>
</label>
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="flashing">
<input type="radio" id="flashing" name="effectSwitch" class="mdl-radio__button"/>
<span class="mdl-radio__label">Flashing</span>
</label>
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="pulse">
<input type="radio" id="pulse" name="effectSwitch" class="mdl-radio__button"/>
<span class="mdl-radio__label">Pulse</span>
</label>
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="rainbow">
<input type="radio" id="rainbow" name="effectSwitch" class="mdl-radio__button"/>
<span class="mdl-radio__label">Rainbow</span>
</label>
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="rainbowFade">
<input type="radio" id="rainbowFade" name="effectSwitch" class="mdl-radio__button"/>
<span class="mdl-radio__label">Rainbow Fade</span>
</label>
</div>
<div id="batteryLevel"></div>
</div>
<div id="loading">
<div class="mdl-spinner mdl-spinner--single-color mdl-js-spinner is-active"></div>
</div>
<script src="https://blueappio.github.io/blueapp.io/blueapp.io.min.js"></script>
<script src="playbulbCandle.js"></script>
<script src="app.js" defer></script>
<script>
if('serviceWorker' in navigator) {
navigator.serviceWorker.register('sw.js', { scope: '/demos/playbulb-candle/' })
.then(function(registration) {
console.log("Service Worker Registered");
});
}
</script>
</body>
</html>