-
Notifications
You must be signed in to change notification settings - Fork 9
/
index.html
106 lines (86 loc) · 3 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
<!DOCTYPE html>
<html>
<head>
<title>Marine Compass</title>
<meta charset="utf-8">
<meta name="viewport" content="user-scalable=no, initial-scale=1">
<style>
html {
width: 100%;
height: 100%;
}
body {
position: fixed;
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
overflow: hidden;
background: transparent url(./images/bg.jpg) no-repeat scroll 50%;
background-size: 100% 100%;
font-family: Arial, Helvetica, sans-serif;
}
#glCanvas {
position: absolute;
top: 0;
}
.output_err {
display: block;
background-color: #fff;
color: #CC0000;
font-weight: bold;
border: 1px solid #000;
margin: 20px 10px;
padding: 20px;
}
.heading {
display: block;
text-align: center;
padding: 10px 0 0;
height: 40px;
color: #fff;
font-size: 1.8em;
font-weight: normal;
}
</style>
<!-- COMPASS -->
<script type="text/javascript" src="scripts/orientationChange.js"></script>
<script type="text/javascript" src="scripts/gl-matrix.min.js"></script>
<script type="text/javascript" src="scripts/fulltilt.min.js"></script>
<script type="text/javascript" src="scripts/compass.js"></script>
<!-- FEATURE DETECTION -->
<link rel="stylesheet" href="featuredetection/styles/panel.css">
<script src="featuredetection/modernizr.js"></script>
<script src="featuredetection/panel.js"></script>
<!-- DEVICEORIENTATION EMULATOR DETECTION + BOOTSTRAP -->
<script src="https://richtr.github.io/doe/doe.js"></script>
<script>
window.addEventListener('load', function() {
/* Pretty Print Feature Detection */
if(window.FeaturePanel) {
new FeaturePanel({
title: 'Marine Compass',
legend: 'A fully web standards compliant JavaScript 3D Compass application.',
link: 'https://github.com/richtr/Marine-Compass',
features: [
{name: 'deviceorientation', title: 'Device Orientation Events', link: 'http://caniuse.com/#feat=deviceorientation'},
{name: 'webgl', title: 'WebGL', link: 'http://caniuse.com/#feat=webgl'}
]
});
}
/* Compass Web App */
var canvasElement = document.getElementById('glCanvas');
canvasElement.setAttribute('width', window.innerWidth);
canvasElement.setAttribute('height', window.innerHeight);
var headingElement = document.getElementById('headingReading');
new Compass( canvasElement, headingElement );
}, true);
</script>
</head>
<body>
<div class="heading">Heading: <span id="headingReading">-</span>°</div>
<canvas id="glCanvas" width="320" height="240"></canvas>
<!-- Github Ribbon -->
<a href="https://github.com/richtr/Marine-Compass"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/e7bbb0521b397edbd5fe43e7f760759336b5e05f/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677265656e5f3030373230302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_green_007200.png"></a>
</body>
</html>