-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsensor-test.html
121 lines (121 loc) · 9.55 KB
/
sensor-test.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
<!DOCTYPE html>
<html lang="en">
<head>
<title>NBPSP - Experimental Sensor Access</title>
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
<meta charset="UTF-8">
<meta name="description" content="The New Buffalo Physics Skatepark's official website, with lots to learn about science, math, and fun.">
<meta name="keywords" content="NBPSP, sensors, phone sensors, gyroscopes, accelerometers, battery">
<meta name="author" content="Wesley McGinn">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/svg" href="./images/logo.svg">
<link rel="shortcut icon" href="./images/logo.png">
<link rel="stylesheet" type="text/css" href="./style.css?v=4">
<script src="./scripts/main.js?v=4603039019916211" type="text/javascript"></script>
<script src="./scripts/menu.js?v=4" type="text/javascript"></script>
</head>
<body onresize="resize()" onload="setupMenu();setup()" onunload="teardown()">
<ul id="menu">
<li id="logo" onclick="location.assign('./home.html')">
<svg width="50" height="50" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
<g transform="scale(0.125 0.125)">
<g>
<ellipse cx="128" cy="138" fill-opacity="0" rx="27.79154" ry="130" stroke="#0000ff" stroke-width="5"/>
<ellipse cx="115" cy="128" fill-opacity="0" rx="25" ry="120" stroke="#0000ff" stroke-width="5" transform="matrix(0.555831 0.938194 -0.962727 0.541667 187.309 -39.2257)"/>
<ellipse cx="115" cy="128" fill-opacity="0" rx="25" ry="120" stroke="#0000ff" stroke-width="5" transform="matrix(-0.555831 0.938194 -0.962727 -0.541667 315.15 99.441)"/>
<circle cx="128.00001" cy="138" fill="#ffb200" r="8.77" stroke="#ffb200" stroke-width="8"/>
</g>
<g>
<line fill="none" stroke="#7f7f7f" stroke-width="10" transform="rotate(-32.7619 95.4205 374.694)" x1="88.60321" x2="102.23786" y1="361.87425" y2="387.514"/>
<line fill="none" stroke="#7f7f7f" stroke-width="12" transform="rotate(-32.7619 106.938 365.105)" x1="117.47342" x2="96.40168" y1="349.23268" y2="380.97714"/>
<line fill="none" stroke="#7f7f7f" stroke-width="12" transform="rotate(-32.7619 323.884 226.949)" x1="315.20727" x2="332.56047" y1="212.29725" y2="241.59982"/>
<line fill="none" stroke="#7f7f7f" stroke-width="10" transform="rotate(-32.7619 337.243 219.077)" x1="341.58175" x2="332.90516" y1="207.47842" y2="230.67629"/>
<circle cx="111.25488" cy="385.55703" fill="#0000bf" r="10" stroke="#ffb200" stroke-width="8" transform="rotate(-32.7619 111.255 385.557)"/>
<circle cx="340.56973" cy="237.9894" fill="#0000bf" r="10" stroke="#ffb200" stroke-width="8" transform="rotate(-32.7619 340.57 237.989)"/>
<rect fill="#000000" height="7.32" stroke="#0000ff" stroke-width="0" transform="rotate(-32.7619 327.076 214.731)" width="52.05958" x="301.04664" y="211.06795"/>
<rect fill="#000000" height="7.32" stroke="#0000ff" stroke-width="0" transform="rotate(-32.7619 95.6769 363.64)" width="52.05958" x="69.6471" y="359.97709"/>
<path d="m-28.58107,268.38868l83.66719,17.09317l34.70639,-3.66282l234.26813,0l30.98785,4.88376l80.5684,-17.09317" fill-opacity="0" stroke="#0000ff" stroke-width="12" transform="rotate(-32.7619 203.518 277.546)"/>
</g>
</g>
</svg>
</li>
<li id="title" onclick="location.assign('./home.html')">
<h2><abbr title="New Buffalo Physics Skatepark">NBPSP</abbr></h2>
</li>
<li id="ham" onclick="ham()">
<svg width="30" height="30" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
<g transform="scale(0.75 0.75)">
<rect fill="white" height="10" rx="5" ry="5" stroke-width="0" width="40" x="0" y="0"/>
<rect fill="white" height="10" rx="5" ry="5" stroke-width="0" width="40" x="0" y="30"/>
<rect fill="white" height="10" rx="5" ry="5" stroke-width="0" width="40" x="0" y="15"/>
</g>
</svg>
</li>
<li class="ham" onclick="location.assign('./friction.html')">Friction</li>
<li class="ham" onclick="location.assign('./force-normal.html')">Force Normal</li>
<li class="ham" onclick="location.assign('./centripetal-acceleration.html')">Centripetal Acceleration</li>
<li class="ham" onclick="location.assign('./momentum.html')">Momentum</li>
<li class="ham" onclick="location.assign('./potential-to-kinetic-energy.html')">Potential to Kinetic Energy</li>
</ul>
<div class="box" height="60px"></div>
<div id="content" onmouseenter="unselectHam()">
<div class="col" id="col1">
<noscript>
<section>
<h1 class="noticable red">Uh Oh!</h1>
<p>It looks like Javascript isn't working on your device! This could be because you are using a very outdated web browser or because you have Javascript disabled in your settings.</p>
<p>You can still access this page, but many features may not work for you. It is highly recommended that you enable Javascript on your device or download a better web browser, such as <a href="https://www.google.com/chrome">Chrome</a>.</p>
</section>
</noscript>
<section>
<h1 class="orange">You Are Viewing an Experimental Page.</h1>
<p>This page is an experiment to test access to sensors within phones.</p>
<p>If we can figure out how to retrieve and process data from a phone's accelerometers and gyroscopes, the NBPSP website may be even more interactive and engaging.</p>
<p>You would be able to view your momentum and velocity live. You could view and understand the forces acting upon you. You could watch real-time centripetal acceleration and record 3D positional data videos of what you have been able to accomplish in the skatepark.</p>
<p>Unfortunately, we are not yet at that point. There is still much more work to do, a lot of which is being done on this page.</p>
</section>
</div>
<div class="col" id="col2">
<section id="gyro">
<h1>Your Gyroscopes</h1><br>
<div class="output" id="gx"><img alt="Loading...." title="Loading...." type="image/svg+xml" width="35px" src="./images/physics.svg"></div><br>
<div class="output" id="gy"><img alt="Loading...." title="Loading...." type="image/svg+xml" width="35px" src="./images/physics.svg"></div><br>
<div class="output" id="gz"><img alt="Loading...." title="Loading...." type="image/svg+xml" width="35px" src="./images/physics.svg"></div>
</section>
<section id="accel">
<h1>Your Accel<wbr>erometers</h1><br>
<div class="output" id="ax"><img alt="Loading...." title="Loading...." type="image/svg+xml" width="35px" src="./images/physics.svg"></div><br>
<div class="output" id="ay"><img alt="Loading...." title="Loading...." type="image/svg+xml" width="35px" src="./images/physics.svg"></div><br>
<div class="output" id="az"><img alt="Loading...." title="Loading...." type="image/svg+xml" width="35px" src="./images/physics.svg"></div>
</section>
</div>
<div class="col" id="col3">
<section>
<h1>Battery</h1><br>
<div class="output" id="battery" title="Your device's current battery level"><img alt="Loading...." title="Loading...." type="image/svg+xml" width="35px" src="./images/physics.svg"></div><br>
<div class="output" id="battery_charge" title="Your device's current battery charging status"><img alt="Loading...." title="Loading...." type="image/svg+xml" width="35px" src="./images/physics.svg"></div>
</section>
<section>
<h1>Output Test</h1><br>
<button onclick="vibe.len(100)">Vibrate Tiny Bit</button><br><br>
<button onclick="vibe.len(500)">Vibrate</button><br><br>
<button onclick="vibe.len(5000)">Vibrate A Lot</button><br><br>
<table style="width:100%">
<tr>
<td>
<button onclick="vibe.blink()">Start Blink</button>
</td>
<td>
<button onclick="vibe.stopBlink()">Stop Blink</button>
</td>
</tr>
</table>
</section>
</div>
</div>
</body>
<script src="./scripts/skateboard.js?v=1" type="text/javascript"></script>
<script src="./scripts/sensors.js?v=6" type="text/javascript"></script>
</html>