actually make flashlight work and make switch look decent
[tricorder.git] / index.html
1 <!-- This Source Code Form is subject to the terms of the Mozilla Public
2    - License, v. 2.0. If a copy of the MPL was not distributed with this file,
3    - You can obtain one at http://mozilla.org/MPL/2.0/.  -->
4
5 <!DOCTYPE html>
6 <html manifest="manifest.appcache">
7 <head>
8   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
9   <!-- try to counts default scaling on mobile, see 
10        https://developer.mozilla.org/en/Mobile/Viewport_meta_tag -->
11   <meta name="viewport" content="width=device-width, height=device-height">
12   <title>Tricorder</title>
13   <script src="js/tricorder.js"></script>
14   <link rel="stylesheet" href="style/tricorder.css">
15   <link rel="shortcut icon" href="style/tilex32.png" type="image/png">
16 </head>
17 <body id="body">
18 <h1>Tricorder</h1>
19
20 <div id="sidebar">
21 <div id="sideTop">
22 <div id="stardate">[74]</div>
23 </div>
24
25 <div id="sideSepTop">
26 <div id="sideSepTopInsert"></div>
27 </div>
28
29 <div id="sideSepBottom">
30 <div id="sideSepBottomInsert"></div>
31 </div>
32
33 <div id="sideBottom">
34 <ul id="navlist">
35 <li id="navPos">Position</li>
36 <li id="navGrav">Gravity</li>
37 <li id="navSound">Sound</li>
38 <li id="navEnv">Environment</li>
39 <li id="navDev">Device</li>
40 <li id="navOther">Other</li>
41 </ul>
42 </div>
43
44 <ul id="sideRemark">
45 <li id="fullScreenButton">Full Screen</li>
46 </ul>
47 </div>
48
49 <div id="mainarea">
50 <div id="mainHeader">
51 Web Tricorder
52 </div>
53
54 <div id="mainSepTop"></div>
55 <div id="mainSepBottom"></div>
56
57 <div id="mainContent">
58 <section id="sectNull" class="active">
59 <p>Please select a data input module from the left-side navigation.</p>
60 </section>
61
62 <section id="sectPos">
63 <p id="posunavail">
64 Position watching is unavailable on this tricorder device.
65 <br/>Please talk to your superior officer or Starfleet contact to acquire
66 a better device.
67 </p>
68 <div id="posavail" style="display:none">
69 <table>
70 <tr><td>Latitude:</td><td id="posLat" class="posVal">...</td></tr>
71 <tr><td>Longitude:</td><td id="posLong" class="posVal">...</td></tr>
72 <tr><td>Accuracy:</td><td id="posAcc" class="posVal">...</td></tr>
73 <tr><td>Altitude:</td><td id="posAlt" class="posVal">...</td></tr>
74 <tr><td>Alt. Accuracy:</td><td id="posAltAcc" class="posVal">...</td></tr>
75 <tr><td>Heading:</td><td id="posHead" class="posVal">...</td></tr>
76 <tr><td>Speed:</td><td id="posSpd" class="posVal">...</td></tr>
77 <tr><td>Timestamp:</td><td id="posTime" class="posVal">...</td></tr>
78 </table>
79 <p class="note">
80 All coordinates use the WGS84 coordinate system.
81 </p>
82 </div>
83 </section>
84
85 <section id="sectGrav">
86 <p id="gravunavail">
87 Gravity sensors are unavailable on this tricorder device.
88 <br/>Please talk to your superior officer or Starfleet contact to acquire
89 a better device.
90 </p>
91 <div id="gravavail" style="display:none">
92 <table>
93 <tr><td>Total:</td><td id="gravTotal" class="gravVal">...</td></tr>
94 <tr><td>X:</td><td id="gravX" class="gravVal">...</td></tr>
95 <tr><td>Y:</td><td id="gravY" class="gravVal">...</td></tr>
96 <tr><td>Z:</td><td id="gravZ" class="gravVal">...</td></tr>
97 <tr><td>Alpha:</td><td id="gravAlpha" class="gravVal">...</td></tr>
98 <tr><td>Beta:</td><td id="gravBeta" class="gravVal">...</td></tr>
99 <tr><td>Gamma:</td><td id="gravGamma" class="gravVal">...</td></tr>
100 </table>
101 </div>
102 </section>
103
104 <section id="sectSound">
105 <p id="soundunavail">
106 Sound sensors are unavailable on this tricorder device.
107 <br/>Please talk to your superior officer or Starfleet contact to acquire
108 a better device.
109 </p>
110 <div id="soundavail" style="display:none">
111 <canvas id="soundcanvas" width="300" height="300"></canvas>
112 </div>
113 </section>
114
115 <section id="sectEnv">
116 <p id="envunavail">
117 Environment sensors are unavailable on this tricorder device.
118 <br/>Please talk to your superior officer or Starfleet contact to acquire
119 a better device.
120 </p>
121 <div id="envavail" style="display:none">
122 <table>
123 <tr><td>Light:</td><td id="envLight" class="envVal">...</td></tr>
124 <tr><td>Distance:</td><td id="envDistance" class="envVal">...</td></tr>
125 </table>
126 <div id="envFlashAvail" style="display:none">
127 Flashlight:
128 <button id="envFlashOn" class="envButton">On</button><button
129         id="envFlashOff" class="envButton" disabled="true">Off</button>
130 </div>
131 <div id="envFlashUnavail">
132 <!-- No camera with flash available -->
133 </div>
134 </div>
135 </section>
136
137 <section id="sectDev">
138 <table>
139 <tr><td>Battery Level:</td><td id="devBattLevel" class="deviceVal">...</td></tr>
140 <tr><td>Battery Status:</td><td id="devBattStatus" class="deviceVal">...</td></tr>
141 <!-- to come : storage data -->
142 </table>
143 </section>
144
145 <section id="sectOther">
146 <p>This tricorder model doesn't have other sensors yet, please contact
147 the <a href="http://www.kairo.at/apps" target="_blank">Starfleet science
148 department</a> if you want to help developing this for future models.</p>
149 </section>
150 </div>
151
152 </body>
153 </html>