-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathRob.html
263 lines (250 loc) · 11.8 KB
/
Rob.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
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
<!DOCTYPE HTML>
<!--
Photon by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>Photon Data Collection</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="assets/css/main.css" />
<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body class="is-preload">
<!-- Header -->
<section id="header">
<div class="inner">
<a href="index.html" class="icon major fa-cloud"></a>
<h1>Hey <strong>Rob</strong>, let's get <br />
started collecting data.</h1>
<p>I connect to Wio Nodes to collect light, sound, and <br />
distraction data for the Tufts ENP 162 Final Project.</p>
<p><code class="no-outline">#Group1</code></p>
<ul class="actions special">
<li><a href="#one" class="button scrolly">Get Started</a></li>
</ul>
</div>
</section>
<!-- One -->
<section id="one" class="main style1">
<div class="container">
<div class="row gtr-150">
<div class="col-6 col-12-medium">
<header class="major">
<h2>Before Starting Data Collection...</h2>
</header>
<p>Let me know the building location and study spot you're in so it will be easier to import the data into ArcGIS later.
</br> <br>
<strong>Make sure your 2 Wio Nodes are plugged into the USB ports on your computer before starting data collection.</strong></p>
</div>
<div class="col-6 col-12-medium imp-medium">
<header class="major">
<h2>Session Information</h2>
</header>
<form method="post" action="#">
<div class="row gtr-uniform gtr-50">
<div class="col-12">
<select name="demo-category" id="demo-building">
<option value="">- Building -</option>
<option value="574 Boston Ave Private Study Room">574 Boston Ave Private Study Room</option>
<option value="574 Boston Ave Group Study Area">574 Boston Ave Group Study Area</option>
<option value="Campus Center 1st Floor">Campus Center 1st Floor</option>
<option value="Campus Center 2nd Floor">Campus Center 2nd Floor</option>
<option value="Campus Center 3rd Floor">Campus Center 3rd Floor</option>
<option value="Tisch Group Study">Tisch Group Study</option>
<option value="Tisch Purple Wall">Tisch Purple Wall</option>
<option value="SEC Kindelvan">SEC Kindelvan</option>
</select>
</div>
<div class="col-12">
<input type="text" name="form-studySpot" id="form-studySpot" value="" placeholder="Study Spot" />
</div>
<div class="col-12">
<a class="button primary fit" id="startCollection" onclick="startDataCollection()">Start Collecting Data!</a>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="container">
<div class="row gtr-150">
<div class="col-6 col-12-medium">
<div class="col-6 col-12-medium">
<a class="button secondary fit" id="stopCollection" onclick="stopCollection()">Stop Collecting</a>
</div>
</div>
<div class="col-6 col-12-medium imp-medium">
<div class="col-6 col-12-medium">
<a href="#data" class="button secondary fit scrolly" id="jumpToDownload" onclick="stopCollection()">Jump to Download</a>
</div>
</div>
</div>
</div>
</section>
<!-- Two -->
<section id="two" class="main style2">
<div class="container">
<div class="row gtr-150">
<div class="col-4 col-12-medium">
<header class="major">
<h2>Button Data</h2>
</header>
<p id="ButtonData"></p>
</div>
<div class="col-4 col-12-medium">
<header class="major">
<h2>Sound Data</h2>
</header>
<p id="SoundData"></p>
</div>
<div class="col-4 col-12-medium">
<header class="major">
<h2>Light Data</h2>
</header>
<p id="LightData"></p>
</div>
</div>
</div>
</section>
<!-- Three -->
<section id="data" class="main style1 special">
<div class="container medium">
<div class="container">
<div class="row gtr-150">
<div class="col-6 col-12-medium">
<div class="col-6 col-12-medium">
<header class="major">
<h2>Saving the Data</h2>
</header>
</div>
</div>
<div class="col-6 col-12-medium imp-medium">
<div class="col-6 col-12-medium">
<a class="button primary fit" id="download" onclick="download_csv()">Download the Data!</a>
</div>
</div>
</div>
</div>
<div class="container medium">
<p class="align-left">Follow these steps to save your data so we can uploading to ArcGIS as easily as possible. To stop data collection, press the <code>Stop Collecting</code> button above the data. Once the data collection is stopped, you can click <code>Download the Data</code> to start the file downloads. Three separate .csv files should download (corresponding with the three types of data). After the files download, it's a good idea to open them to double check everything worked as expected.</p>
<header class="major">
<h2>Troubleshooting</h2>
</header>
<p class="align-left"> <strong>Why does the data look weird online?</strong>
</br>
JavaScript is annoying so I'm not printing line breaks. The data in the .csv files should be in columns and rows as expected. If this isn't the case, reach out to Jillian because somethings wrong.
</p>
<p class="align-left"> <strong>Why don't I see any output?</strong>
<br>
If you've clicked <code>Start Collecting</code> and don't see any output, wait 5 minutes. The data does not start outputting right away. If after 5 minutes there's still no output on the page, reach out to Jillian because somethings wrong.
</p>
<p class="align-left"> <strong>Only one data file downloaded. I thought there were supposed to be three?</strong>
That's correct! <i>There should be three files.</i> If you're only seeing one, it's probably because your browser thinks the website is spamming you. Chrome has an alert asking if you want to allow multiple downloads. If you're not using Chrome, I don't know - you're on your own to figure it out.
<br>
<p class="align-left"> <strong>Can I test the nodes before beginning official data collection?</strong>
<br>
Absolutely! Because the data is saved locally, all you have to do is reload the website to remove all previous data. So, feel free to run a test session for 10 or 15 minutes then download the data. Hit <code>command + r</code> anytime you want to restart. <i>You cannot recover previous data if you reload the page.</i>
<p class="align-left"> <strong>Is it possible to save the data manually?</strong>
</br>
So like technically yes but it's a lot of work. If you really really want to, here's how you can manually save the data: <br>
<ol>
<li class="align-left">Open a new document in the Sublime Text Editor. If you don't have Sublime on your computer, you can <a href="https://www.sublimetext.com/">download it here</a>. It's a free software so if you see the "Upgrade" pop up, just ignore it.</li>
<li class="align-left">Highlight all the data in the "Distraction Button Data" column. Make sure only this data is highlighted, and not the Light or Sensor data. </li>
<li class="align-left">Paste the data into the *new* Sublime document. If each row is not on it's own line, you're going to need to manually divide them. Have fun. </li>
<li class="align-left">Save the document as a .csv file. To set the file type, rename the document and add .csv to the end (you can't manually select the file type in Sublime and instead have to type it).</li>
<li class="align-left">Repeat this process with the Light data an Sensor data, saving them each to a new document.</li>
<li class="align-left">You should now be able to open the .csv files in Excel and each piece of data will be in its own cell.</li>
</ol>
</p>
</div>
</div>
<div class="container medium">
<header class="major">
<h2>Other Important Notes</h2>
</header>
<div class="container medium">
<p class="align-left">
All of the data is being saved locally. This means that if you close the window for any reason (you close the tab, quit the browser, your computer crashes, etc) <strong>all the data you've collected will be lost.</strong> To help mitigate this, all the data collected should be converted into csv files at the end of each session. We will put all our files together at a later date before uploading all the information to ArcGIS.
<br> <br>
Both Wio Nodes should be plugged in to your computer <i>before</i> you begin data collection. Give them 10 or 15 seconds after you plug them in to connect to the API and start transmitting before you try to collect data.
<br> <br>
If for some reason the Wio Nodes aren't collecting data, an alert will (hopefully) pop up in your browser. The sound & light sensors collect data every five minutes, so you will not see data begin populating right away but it should add a line as 5 minutes go by. The button data should populate as soon as you press the button.
<br> <br>
If you want to test the system before beginning official data collection, just go through the same setup and start instructions. As soon as you're ready to begin official data collection, reload your browser (<code>command + r</code>) and start again. None of the old data will be kept.
</p>
</div>
</div>
<div class="container large">
<div class="row gtr-150">
<div class="col-6 col-12">
<h4>Button Data File Columns</h4>
<div class="table-wrapper">
<table class="alt">
<tbody>
<tr>
<td>Date</td>
<td>Time</td>
<td>Building</td>
<td>Study Spot</td>
<td>Lat</td>
<td>Long</td>
<td>Collector</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-6 col-12">
<h4>Sound Data File Columns</h4>
<div class="table-wrapper">
<table class="alt">
<tbody>
<tr>
<td>Sound Level</td>
<td>Date</td>
<td>Time</td>
<td>Building</td>
<td>Study Spot</td>
<td>Lat</td>
<td>Long</td>
<td>Collector</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-6 col-12">
<h4>Light Data File Columns</h4>
<div class="table-wrapper">
<table class="alt">
<tbody>
<tr>
<td>Light Level</td>
<td>Date</td>
<td>Time</td>
<td>Building</td>
<td>Study Spot</td>
<td>Lat</td>
<td>Long</td>
<td>Collector</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</section>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.scrolly.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main_Rob.js"></script>
</body>
</html>