This repository has been archived by the owner on Aug 5, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 8
/
index.html
122 lines (110 loc) · 3.78 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
<!DOCTYPE html>
<html>
<head>
<title>Marine Compass</title>
<meta charset="utf-8">
<meta name="viewport" content="user-scalable=no, initial-scale=1">
<!-- Origin Trial Token, feature = Generic Sensors, origin = https://sensor-compass.appspot.com, expires = 2017-10-24 -->
<meta http-equiv="origin-trial" data-feature="Generic Sensors" data-expires="2017-10-24" content="Anr1kKvqldcA1J7cfKIwqZTBVYjbbCt9+Gt9tnnSF3XDZXTg03rrNALIt6yeJRduWgL2SeR89p8a+jN0B0mjKgQAAABheyJvcmlnaW4iOiJodHRwczovL3NlbnNvci1jb21wYXNzLmFwcHNwb3QuY29tOjQ0MyIsImZlYXR1cmUiOiJHZW5lcmljU2Vuc29yIiwiZXhwaXJ5IjoxNTA4ODM0NjE0fQ==">
<style>
html {
width: 100%;
height: 100%;
}
body {
position: fixed;
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
overflow: hidden;
background-color: #3e3e56;
font-family: Arial, Helvetica, sans-serif;
}
.output_err {
display: block;
background-color: #fff;
color: #CC0000;
font-weight: bold;
border: 1px solid #000;
margin: 20px 10px;
padding: 20px;
}
button {
padding: 8px;
margin: 6px 8px 6px 8px;
font: 500 16px Roboto, sans-serif;
color: #3e3e56;
background-color: transparent;
border: 0;
border-radius: 2px;
box-shadow: none;
cursor: pointer;
display: inline-block;
height: 36px;
min-width: 36px;
outline: 0;
overflow: hidden;
text-align: center;
text-decoration: none;
text-overflow: ellipsis;
text-transform: uppercase;
transition: background-color .2s,box-shadow .2s;
vertical-align: middle;
white-space: nowrap;
}
error-console {
position: absolute;
z-index: 0;
}
</style>
<script type="module" src="scripts/error-console.js"></script>
<script type="module" src="scripts/menu-drawer.js"></script>
<script type="module" src="scripts/compass.js"></script>
<link rel="manifest" href="/manifest.json">
<lcink rel="serviceworker" href="/sw.js">
<script>
function changeRoute(route) {
window.history.replaceState({}, '', `?filter=${route}`);
document.querySelector('sensor-compass').onRouteChanged();
document.querySelector('menu-drawer').opened = false;
}
function daydream() {
document.querySelector('sensor-compass').requestBTController("daydream");
document.querySelector('menu-drawer').opened = false;
}
function zephyr() {
document.querySelector('sensor-compass').requestBTController("zephyr");
document.querySelector('menu-drawer').opened = false;
}
function thingy52() {
document.querySelector('sensor-compass').requestBTController("thingy52");
document.querySelector('menu-drawer').opened = false;
}
function browser() {
document.querySelector('sensor-compass').requestBTController(null);
document.querySelector('menu-drawer').opened = false;
}
</script>
</head>
<body>
<menu-drawer style="z-index: 1; visibility: hidden;">
<div style="display: flex; flex-direction: column">
<button onclick="changeRoute('l')">Ambient Light</button>
<button onclick="changeRoute('a')">Accelerometer</button>
<button onclick="changeRoute('g')">Gyroscope</button>
<button onclick="changeRoute('m')">Magnetometer (magnet + accel)</button>
<button onclick="changeRoute('c')">Complementary filter (accel + gyro)</button>
<button onclick="changeRoute('k')">Kalman filter (accel + gyro)</button>
<button onclick="changeRoute('o')">Absolute Orientation (accel + gyro + mag)</button>
<br><br>
<button onclick="daydream()">Daydream Controller</button>
<button onclick="zephyr()">Zephyr Device</button>
<button onclick="thingy52()">Thingy:52 Device</button>
<button onclick="browser()">Device itself</button>
</div>
</menu-drawer>
<error-console style="z-index: 1"></error-console>
<sensor-compass></sensor-compass>
</body>
</html>