-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathusage.html
executable file
·315 lines (255 loc) · 13.6 KB
/
usage.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
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
---
---
<!DOCTYPE html>
<html>
<head>
<title>ohmage : usage</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="static/ohmagehome/css/home.css" type="text/css"/>
<link rel="shortcut icon" href="static/images/favicon-gray.ico"/>
<script src="static/js/jquery-1.7.1.min.js" type="text/javascript" language="Javascript"></script>
<script src="static/js/jquery.scrollTo-1.4.2-min.js" type="text/javascript" language="Javascript"></script>
<!-- used to keep history on fragmented pages -->
<script src="static/js/jquery.ba-hashchange.min.js" type="text/javascript" language="Javascript"></script>
<!-- used to transmit events throughout the codebase -->
<script src="static/js/pubsub.js" type="text/javascript" language="Javascript"></script>
<!-- attach your page-specific code here -->
<script type="text/javascript" language="Javascript">
$(document).ready(function () {
// initially hide all the content panels
$(".content_panel").hide();
$("#content_panel_container").hide();
$(".role_panel").each(function (idx, me) {
$(me).click(function () {
var $target = $($(me).attr("data-target"));
var $container = $("#content_panel_container");
if (!$container.is(":visible"))
$container.fadeIn();
// set this role_panel as being selected
$(".role_panel").removeClass('selected').filter(me).addClass('selected');
// set the hash to the target...?
location.hash = $(me).attr("data-target");
// move the target to the top if it's not visible
// this makes it always slide down, as opposed to occasionally sliding up
if (!$target.is(":visible"))
$target.detach().prependTo("#content_panel_container");
// hide everything in the class, and then show the target
$(".content_panel").not($target).slideUp(300, function () {
$target.slideDown(300);
});
});
});
});
$(document).ready(function () {
// Bind the event.
$(window).hashchange(function () {
// simulate a click on the corresponding role thingy
$(".rp_iconic .role_panel[data-target=" + location.hash + "]").click();
});
// Trigger the event (useful on page load).
$(window).hashchange();
});
</script>
<style>
/*
=== standard role selector panel styles
*/
.role_panel_container { margin-top: 1em; padding: 5px; padding-top: 20px; }
.role_panel {
display: table-cell; width: 33%; cursor: pointer;
padding: 10px;
position: relative; z-index: 0;
}
.role_panel .desc { display: block; padding-right: 8px; }
/*
=== iconic role selector panels
*/
.rp_iconic .role_panel {
padding-left: 120px; height: 120px; padding-bottom: 5px; padding-top: 15px;
border-radius: 10px;
background-position: 5px 8px;
background-color: white;
background-repeat: no-repeat;
}
.rp_iconic .role_panel h2 { font-weight: bold; font-size: 18px; margin: 0; margin-bottom: 1px; }
#enduser_chooser {
background-image: url('static/ohmagehome/icons/clipboard.png');
}
#developer_chooser {
background-image: url('static/ohmagehome/icons/tools.png');
}
#researcher_chooser {
background-image: url('static/ohmagehome/icons/microscope.png');
}
/*
=== compressed role selector panels
*/
.role_panel_container.rp_compressed {
width: 100%; display: none;
}
/*
=== selected role selector panels
*/
.role_panel.selected {
background-color: #eee;
}
.role_panel.selected:after {
content: '';
width: 0; height: 0;
border-left: 15px dotted transparent;
border-right: 15px dotted transparent;
border-top: 15px solid #eee;
margin-left: -10px;
position: absolute;
bottom: -12px; left: 50%; z-index: 100;
}
/*
=== content panel designs
*/
#content_panel_container {
}
.content_panel {
}
.content_panel h2 {
margin-bottom: 0;
}
.content_panel h2:before {
content: '\203A';
font-weight: bold; font-size: 48px;
margin-right: 5px; vertical-align: -5px;
}
</style>
</head>
<body>
<div id="trunk">
<div id="header">
<img id="header_img" src="static/ohmagehome/images/login-logo.png"/>
</div>
{% include navbar.html %}
<div id="maincol" class="content_pane fullwidth">
<div class="subheader">how can i use ohmage?</div>
<p>How do you plan to use <strong>ohmage</strong>?</p>
<div class="role_panel_container rp_iconic">
<div id="enduser_chooser" data-target="#enduser_panel" class="role_panel">
<h2>For Myself</h2>
<span class="desc">I am interested in using ohmage to record and analyze my own data.</span>
</div>
<div id="developer_chooser" data-target="#developer_panel" class="role_panel">
<h2>As a Developer</h2>
<span class="desc">I am interested in running or extending ohmage.</span>
</div>
<div id="researcher_chooser" data-target="#researcher_panel" class="role_panel">
<h2>As a Researcher</h2>
<span class="desc">I am interested in using ohmage to help stage a research study.</span>
</div>
</div>
<div class="role_panel_container rp_compressed">
<div id="enduser_chooser_small" data-target="#enduser_panel" class="role_panel">
For Myself
</div>
<div id="developer_chooser_small" data-target="#developer_panel" class="role_panel">
As a Developer
</div>
<div id="researcher_chooser_small" data-target="#researcher_panel" class="role_panel">
As a Researcher
</div>
</div>
<div id="content_panel_container">
<div id="enduser_panel" class="content_panel">
<h2>ohmage for myself</h2>
<p>
<span class="provisional">
I want to learn more about my health behaviors (such as diet, stress, sleep, or exercise), my daily or weekly routines, and the places I visit. I want to be able to easily collect and view this information about myself. I am willing to download an application to my Android smartphone or iPhone, and answer surveys (and receive reminders set at a time that I decide on); if I want, I can collect automated traces of my activity and location that run continously in the background on my Android device, as well as incorporate data from my Fibit(™) or Bodymedia(™) devices. I want my data to stay private, but am willing to share this data with a specific research project.
</span>
</p>
<p class="tooltip" style="width: 75%;">
<img src="static/ohmagehome/icons/ohmage-small.png" class="icon"/>
<b>TUTORIAL:</b>
A guided tutorial for installing and using ohmage on your Android device is availabe here:
<a target="_blank" href="http://demo.ohmage.org/flows/default/">ohmage installation and use</a>.
</p>
<p class="tooltip" style="width: 75%;">
<img src="static/ohmagehome/icons/mobility-small.png" class="icon"/>
<b>TUTORIAL:</b>
A guided tutorial for using Mobility with ohmage is available as well:
<a target="_blank" href="http://demo.ohmage.org/flows/mobility/">mobility installation and
use</a>.
</p>
</div>
<div id="developer_panel" class="content_panel">
<h2>ohmage for developers</h2>
<p>
<span class="provisional">
I am interested in software systems developed for mobile health. I want to add new features to ohmage, borrow code from this open-source repository, or just see how a particularly useful visualization has been implemented. I am comfortable with the Android framework on the phone, the LAMP stack, Java, and MySQL for the server.
</span>
</p>
<p>
<b>Source Code (Github):</b>
<ul class="github_links">
<li><a target="_blank" href="https://github.com/ohmage/android-lib">Android Ohmage App</a></li>
<li><a target="_blank" href="https://github.com/ohmage/server">Ohmage Server</a></li>
<li><a target="_blank" href="https://github.com/ohmage/gwt-front-end">Ohmage Web Front-End</a>
</li>
<li><a target="_blank" href="https://github.com/ohmage/">Ohmage GitHub Repositories</a></li>
</ul>
</p>
<p>
<b>Ohmage Server Installation Manuals</b>
<ul class="howto_links">
<li>
<a target="_blank" href="https://github.com/ohmage/ohmage-ubuntu-manual/raw/ohmage-2.16/document.pdf">Ubuntu Installation Manual (PDF)</a>
</li>
<li>
<a target="_blank" href="https://github.com/ohmage/ohmage-fedora-manual/raw/ohmage-2.16/document.pdf">Fedora Installation Manual (PDF)</a>
</li>
</ul>
</p>
<p>
<b>Other Documentation</b>
<ul class="howto_links">
<li class="document">
<a target="_blank" href="/static/ohmagehome/docs/Mobility tech report (dec 2013 v2).pdf">Mobility Technical Writeup (updated Dec. 2013)</a>
</li>
</ul>
</p>
</div>
<div id="researcher_panel" class="content_panel">
<h2>ohmage for researchers</h2>
<p>
<span class="provisional">
I am interested in incorporating a smartphone in my clinical study or intervention.
</span>
</p>
<p class="tooltip" style="width: 75%;">
<img src="static/ohmagehome/icons/small/clipboard_plain.png" class="icon">
<b>PAPERS:</b>
If you would like to learn more about how smartphones have been used with ohmage in research
studies, please consult our <a href="/papers.html">list of papers and references</a>.
</p>
<p class="tooltip" style="width: 75%;">
<img src="static/ohmagehome/icons/small/envelope.png" class="icon">
<b>CONTACT:</b>
If you have an idea about how to use ohmage and smartphones together, feel free to
<a href="mailto:[email protected]">get in contact with us</a>.
</p>
<p class="tooltip" style="width: 75%;">
<img src="static/ohmagehome/icons/small/script.png" class="icon">
<b>TUTORIAL:</b>
If you'd like a guided tutorial on how to author a project and view data collected by research
subjects, try out the <a target="_blank" href="http://demo.ohmage.org/flows/authoring/">ohmage
authoring tutorial</a>
</p>
<p class="tooltip" style="width: 75%;">
<img src="static/ohmagehome/icons/small/user.png" class="icon"/>
<b>USERS:</b>
If you'd like to see how ohmage works from a user's perspective, take a look at
the guided tour on the <a target="_blank" href="http://demo.ohmage.org/flows/default/">ohmage
"first steps" tutorial</a>.
</p>
</div>
</div>
</div>
{% include footer.html %}
</div>
</body>
</html>