-
Notifications
You must be signed in to change notification settings - Fork 8
/
index.html
534 lines (494 loc) · 26.4 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
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
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
<!DOCTYPE html>
<html>
<head>
<meta charset="iso-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="app/lib/bootstrap-3.3.4-dist/css/bootstrap.min.css" media="screen">
<link rel="stylesheet" type="text/css" href="app/lib/font-awesome-4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="app/lib/jquery-ui-1.11.4.custom/jquery-ui.min.css">
<link rel="stylesheet" type="text/css" href="app/lib/jquery-ui-1.11.4.custom/jquery-ui.theme.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
<link href='http://fonts.googleapis.com/css?family=Lato&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<script src="app/lib/jquery-2.1.3.js"></script>
<script src="app/lib/jquery-ui-1.11.4.custom/jquery-ui.js"></script>
<script type="javascript" src="app/lib/bootstrap-3.3.4-dist/js/bootstrap.min.js"></script>
</head>
<body onload="init()">
<!-- this will display the user's experiment data in both tests -->
<div id="experiment-data-overlay">
<svg id="experiment-data"></svg>
</div>
<div class="container">
<div class="row full-height">
<div class="main-content col-xs-6 col-sm-8">
<div class="row" id="boids-row">
<div class="boid-container col-xs-12"><!-- container for boids -->
<svg id="boid-svg" width="300" height="500"></svg>
<div id="info-channels">
<button id="info-btn-channels" class="info-btn blue-btn-gradient"><i class="fa fa-info-circle"></i></button>
</div>
<div id="battery-display">
<span id="battery-charge-text">100%</span>
<div id="battery-body">
<div id="battery-charge"></div>
</div>
<div id="battery-pole"></div>
</div>
<div id="timer">
<img id="timer-icon" src="app/img/Timer-Icon (2).jpg"/>
<p id="timer-text">60 s</p>
</div>
<div class="points col-xs-12">
<p class="points-display"><i class="fa fa-star"></i>0</p>
</div>
</div>
</div>
<div class="row" id="controls">
<div id="control-row">
<div class="col-xs-4 full-height" id="experiment-options">
<div class="col-xs-4 full-height">
<button type="button" name="experiment-control" class="blue-btn-gradient" id="new-experiment-btn" style="top: 14%; position: relative;">
<i class="fa fa-user-plus"></i>
</button>
</div>
<div class="col-xs-4 full-height">
<svg id="is-good-indicator" width="200" height="90"></svg>
</div>
</div>
<div class="col-xs-4 full-height" id="experiment-control">
<div class="col-xs-4 full-height">
<button type="button" name="mode-control" class="blue-btn-gradient" id="prev-mode-btn" style="top: 14%; position: relative;">
<i class="fa fa-backward"></i>
</button>
</div>
<div class="col-xs-4 full-height">
<button type="button" name="mode-control" class="blue-btn-gradient" id="start-mode-btn" style="top: 14%; position: relative;">
<i class="fa fa-play"></i>
</button>
</div>
<div class="col-xs-4 full-height">
<button type="button" name="mode-control" class="blue-btn-gradient" id="next-mode-btn" style="top: 14%; position: relative;">
<i class="fa fa-forward"></i>
</button>
</div>
</div>
<div class="col-xs-4 full-height">
<div class="col-xs-8 full-height">
<input type="hidden" name="hidden-experiment-mode" value="0">
<input type="hidden" name="experiment-duration" id="hidden-experiment-duration" value="60">
<p id="experiment-mode-display">Calibration</p>
</div>
<div class="col-xs-4 full-height">
<button type="button" class="blue-btn-gradient" id="general-info-btn" style="top: 14%; position: relative;">
<i style="font-size: 2em;" class="fa fa-info-circle"></i>
</button>
</div>
</div>
</div>
</div>
<!-- running and restart-->
</div>
<!-- SIDEBAR BLUE - Frequency Band, Channel and Ratio settings --->
<div class="sidebar sb-blue col-xs-6 col-sm-5 col-lg-4 full-height">
<div class="row">
<div class="col-xs-6 no-padding">
<h3>Settings</h3>
</div>
<div class="col-xs-6 full-height">
<input type="checkbox" name="boids-running" id="running"/>
<label id="running-label" for="running">Running</label>
</div>
</div>
<!-- CHANNEL PICKER -->
<div class="row" style="margin-bottom: 0.5em;">
<h4>EEG Channels
<button id="info-btn-channel-names" class="info-btn info-btn-sidebar blue-btn-gradient">
<i class="fa fa-info-circle info-icon-sb"></i>
</button>
</h4>
<div class="ch-single no-padding col-xs-6">
<select class="channel-picker sidebar-select sb-blue-select left-margin-1">
<option name="ch-picker" id="ch-t9" value="1">T9</option>
<option name="ch-picker" id="ch-fp1" value="2">Fp1</option>
<option name="ch-picker" id="ch-fp2" value="3">Fp2</option>
<option name="ch-picker" id="ch-t10" value="4">T10</option>
<option name="ch-picker" id="ch-p-t9-fp1" value="1-2" selected>T9 + Fp1</option>
<option name="ch-picker" id="ch-p-t10-fp2" value="3-4">T10 + Fp2</option>
<option name="ch-picker" id="ch-p-fp1-fp2" value="2-3">Fp1 + Fp2</option>
<option name="ch-picker" id="ch-p-t9-t10" value="1-4">T9 + T10</option>
<option name="ch-picker" id="ch-o-all" value="1-2-3-4">All</option>
</select>
</div>
</div>
<!-- END CHANNEL PICKER -->
<!-- FREQUENCY BAND PICKER -->
<div class="row">
<h4>Training protocol
<button id="info-btn-training-protocol" class="info-btn info-btn-sidebar blue-btn-gradient">
<i class="fa fa-info-circle info-icon-sb"></i>
</button>
</h4>
<div class="fr-band-single no-padding col-xs-6">
<h5 class="left-margin-1">Reward <i class="fa fa-arrow-circle-up"></i></h5>
<select id="select-fr-dividend" class="frequency-picker sidebar-select sb-blue-select left-margin-1">
<option name="fr-picker" class="fr-dividend" id="fr-dividend-delta" value="0">δ (Delta) </option>
<option name="fr-picker" class="fr-dividend" id="fr-dividend-theta" value="1">θ (Theta)</option>
<option name="fr-picker" class="fr-dividend" id="fr-dividend-alpha" value="2" selected>α (Alpha)</option>
<option name="fr-picker" class="fr-dividend" id="fr-dividend-beta" value="3">β (Beta)</option>
<option name="fr-picker" class="fr-dividend" id="fr-dividend-all" value="4">γ (Gamma)</option>
</select>
</div>
<div class="fr-band-single no-padding col-xs-6">
<h5 class="left-margin-1">Inhibit <i class="fa fa-arrow-circle-down"></i></h5>
<select id="select-fr-divisor" class="frequency-picker sidebar-select sb-blue-select left-margin-1">
<option name="fr-picker" class="fr-divisor" id="fr-divisor-none" value="-1"> - </option>
<option name="fr-picker" class="fr-divisor" id="fr-divisor-delta" value="0">δ (Delta) </option>
<option name="fr-picker" class="fr-divisor" id="fr-divisor-theta" value="1">θ (Theta)</option>
<option name="fr-picker" class="fr-divisor" id="fr-divisor-alpha" value="2" disabled>α (Alpha)</option>
<option name="fr-picker" class="fr-divisor" id="fr-divisor-beta" value="3" selected>β (Beta)</option>
<option name="fr-picker" class="fr-divisor" id="fr-divisor-all" value="4">γ (Gamma)</option>
</select>
</div>
</div>
<!-- END FREQUENCY BAND PICKER --->
<!-- PERCENTILE INPUTS -->
<div class="row">
<div class="fr-percentile-input col-xs-3 col-sm-2" style="padding-left:0;">
<div id="slider-dividend-percentile" style="height:4em;"></div>
</div>
<div class=" col-xs-3 col-sm-4" style="padding-left:0; height: 70px;">
<span id="amount-dividend">
50%
</span>
</div>
<div class="fr-percentile-input col-xs-3 col-sm-2" style="padding-left:0;">
<div id="slider-divisor-percentile" style="height:4em;"></div>
</div>
<div class=" col-xs-3 col-sm-4" style="padding-left:0; height: 70px;">
<span id="amount-divisor">
50%
</span>
</div>
<br>
</div>
<!-- END PERCENTILE INPUTS -->
<!--- RATIO DISPLAYS -->
<div class="row">
<div class="col-xs-6 no-padding">
<h3>Feedback
<button id="info-btn-feedback" class="info-btn info-btn-sidebar blue-btn-gradient">
<i class="fa fa-info-circle info-icon-sb"></i>
</button>
</h3>
<svg id="reward-feedback" class="left-margin-1"></svg>
</div>
<div id="training-ratio-display" class="col-xs-6 no-padding full-height">
<div class="row">
<label for="ratio">Quotient α/β:</label>
</div>
<div class="row">
<input readonly type="number" name="ratio" class="sidebar-input sb-blue-input" id="ratio" value="0">
</div>
<div class="row">
<label for="training-ratio">Training ratio:</label>
</div>
<div class="row">
<input type="number" name="training-ratio" class="sidebar-input sb-blue-input" id="training-ratio" value="0">
</div>
</div>
</div>
<div class="row">
<h4>Artifacts
<button id="info-btn-artifact" class="info-btn info-btn-sidebar blue-btn-gradient">
<i class="fa fa-info-circle info-icon-sb"></i>
</button>
</h4>
</div>
<div class="row">
<div class="col-xs-6 no-padding">
<div class="row">
<span class="left-margin-1">Blinks</span>
</div>
<div class="row">
<svg id="blink-feedback" class="left-margin-1"></svg>
</div>
</div>
<div class="col-xs-6 no-padding">
<div class="row">
<span class="left-margin-1">Muscles</span>
</div>
<div class="row">
<svg id="jaw-clench-feedback" class="left-margin-1"></svg>
</div>
</div>
</div>
<div class="row">
</div>
<div class="row">
<div class="col-xs-4">
</div>
<div class="col-xs-7">
</div>
</div>
<!--- END RATIO DISPLAYS -->
</div>
<!-- END OF SIDEBAR 2 --->
<div id="sb-blue-show" class="sidebar-show">
<button id="sb-blue-effect" class="sidebar-effect">
<i class="fa fa-angle-left"></i>
</button>
</div>
</div><!-- div.row --->
<div id="dialog-age-gender" class="blue-dialog" title="Subject Information">
<form action="" method="post">
<div class="row">
<div class="col-xs-4">
<label for="initials">Initials</label>
</div>
<div class="col-xs-8">
<input type="text" name="initials" class="sidebar-input sb-blue-input" id="initials">
</div>
</div>
<div class="row">
<div class="col-xs-4">
<label for="age-select">Age</label>
</div>
<div class="col-xs-8">
<input type="number" name="age" class="sidebar-input sb-blue-input" id="age-select">
</div>
</div>
<div class="row">
<div class="col-xs-4">
<label for="gender-selection">Sex</label>
</div>
<div id="gender-selection">
<div class="col-xs-1">
<input type="radio" name="gender" class="sidebar-input sb-blue-input" id="male" value="m">
</div>
<div class="col-xs-2">
<label for="male">m</label>
</div>
<div class="col-xs-1">
<input type="radio" name="gender" class="sidebar-input sb-red-input" id="female" value="w">
</div>
<div class="col-xs-3">
<label for="female">f</label>
</div>
</div>
<br>
<p id="warning" style="color: lavender; display: none; float: left;">*Bitte vervollständigen Sie die Eingaben.</p>
</div>
<input id="submit-age-gender" name="age-gender-btn" type="button" class="sidebar-button" value="Submit" >
</form>
</div>
<div id="dialog-info-channels" class="blue-dialog" title="Info">
<div id="channel-info-1">
<h3>Contact quality</h3>
<p>Good contact between skin and EEG sensors is essential for good readings and proper feedback.
The circles in the top left corner indicate the contact quality.
</p>
<div class="row">
<div class="col-xs-3"></div>
<div class="col-xs-6">
<img src="app/img/FP1_no_contact.jpg" class="channel-contact">
No contact.
</div>
<div class="col-xs-3"></div>
</div>
<div class="row">
<div class="col-xs-3"></div>
<div class="col-xs-6">
<img src="app/img/FP1_bad_contact.jpg" class="channel-contact">
Bad contact.
</div>
<div class="col-xs-3"></div>
</div>
<div class="row">
<div class="col-xs-3"></div>
<div class="col-xs-6">
<img src="app/img/FP1_good_contact.JPG" class="channel-contact">
Good contact.
</div>
<div class="col-xs-3"></div>
</div>
<br>
<p style="text-decoration: underline">Tip:</p>
The less you move, the easier it gets to establish good contact between skin and electrodes.
Try to move as little as possible during measurements. Don't talk or move your eyes too much.
</div>
</div>
<div id="dialog-info-channel-names" class="blue-dialog" title="Info">
<div id="channel-name-1">
<h4>Choosing channels</h4>
<p>
Here you can choose the electrodes used for the feedback. The EEG devide that is measuring your brain
activity offers 4 of them:
Two behind the ears and two on the forehead.
</p>
</div>
<div id="channel-name-2">
<h4>Why do the elctrode positions have such weird names?</h4>
<p>
The names of the electrode positions are displayed inside the quality indicators on the top left side of the screen.
They are defined by the international <a target="_blank" href="https://de.wikipedia.org/wiki/10-20-System" style="text-decoration: underline">10-20-System</a>.
This system was developed because everyone's head shape and size is unique and there was need for a way of standardising the
positioning of electrodes on the head. This way the 10-20-System makes it possible to compare measurements of different people's
brain activity.
</p>
</div>
<div class="btns-row row top-margin-1">
<button id="show-channel-name-1" class="prev-info-btn blue-btn-gradient"><i class="fa fa-arrow-left"></i></button>
<button id="show-channel-name-2" class="next-info-btn blue-btn-gradient"><i class="fa fa-arrow-right"></i></button>
</div>
</div>
<div id="dialog-info-training-protocol" class="blue-dialog" title="Info">
<h3>What do I actually train?</h3>
<p>
Frequency bands of the human EEG are picked and "trained" to be strengthened or weakened. The choice of
frequency bands happens here.<br><br>
<img src="app/img/training_protocol_bargraph.JPG" id="img-training-protocol"/>
<br><br> The band in which electrical activity is supposed to be increased is chosen on the left hand side (reward),
while the band that is supposed to be suppressed is chosen on the right (inhibit). You can also just train one
frequency band by choosing "-" on the right.
</p>
</div>
<div id="dialog-info-feedback" class="blue-dialog" title="Info">
<h3>How does the feedback of brain activity work?</h3>
<p>The colour and movement speed of the triangles on the screen change together with the feedback graph in the sidebar.
The height of the bar graph depends on the activity in the frequency bands that were picked in section "training protocol".
<br>
The closer the bar gets to the black line, the more blue the triangles get and the slower they move.<br>
<img src="app/img/Boidsblue.JPG" class="img-feedback">
<img src="app/img/Feedback_Graph.jpg" class="img-feedback">
<p style="text-decoration: underline">Tip:</p>
<p>The longer you manage to turn the triangles blue, the more points you get.</p>
<img id="img-points" src="app/img/points-display.JPG">
</p>
</div>
<div id="dialog-info-artifacts" class="blue-dialog" title="Info">
<h3>Artifacts</h3>
<p>
While measuring EEG activity there often is so-called "noise" which is the result of muscle and eye movements.
These signal pollutions are also called "artifacts".<br>
When you blink or press your jaws together the bar graphs will show it.
In addition to that the triangles will become semi-transparent.<br><br>
<img src="app/img/artifact_bargraphs2.jpg" id="img-artifact-bargraphs">
<p style="text-decoration: underline">Tip:</p>
Try to move as little as possible during the Neurofeedback, so that the signal quality stays good and you get a
precise feedback.
</p>
</div>
<div id="dialog-info-general" class="blue-dialog" title="Info">
<div id="general-info-1">
<h3>What is Neurofeedback?</h3>
<p>
During Neurofeedback the electrical brain acitivity is measured using a EEG device.
You get a feedback of what's going on "in your head" through the triangles on the screen.<br>
Neurofeedback is used for different purposes. Some of those are the treatment of certain disorders, e.g.
ADHD, tinnitus, migraine and others. <br>
It can also be used in different areas, as in relaxation training.<br><br>
<p style="text-decoration: underline">Don't worry:</p> The device can't read your thoughts!</p>
</p>
</div>
<div id="general-info-2" class="col-xs-12" style="font-size: 13px;">
<h3>What is being measured during Neurofeedback?</h3>
<p>
Human brain activity can be described as oscillations with frequencies of roughly 1 - 80 Hz.
The activity is divided into 5 frequency bands, which are all named after greek letters and have different meanings:
</p>
<ul style="padding-left: 10px;">
<li>
<div class="row">
<div class="col-xs-5 col-sm-4 col-lg-3">
<img src="app/img/Eeg_delta.svg" class="brainwaves-img">
</div>
<div class="col-xs-7 col-sm-8 col-lg-9">
<p class="big-font">Delta waves (δ, 1 - 4 Hz): </p>
<p>
These waves are present during deep sleep phases in adults.
</p>
</div>
</div>
</li>
<li>
<div class="row top-margin-1">
<div class="col-xs-5 col-sm-4 col-lg-3">
<img src="app/img/Eeg_theta.svg" class="brainwaves-img">
</div>
<div class="col-xs-7 col-sm-8 col-lg-9">
<p class="big-font">Theta waves (θ, 4 - 8 Hz): </p>
<p>
Theta waves are mostly present when falling asleep or during deep relaxation.
</p>
</div>
</div>
</li>
<li>
<div class="row top-margin-1">
<div class="col-xs-5 col-sm-4 col-lg-3">
<img src="app/img/Eeg_alpha.svg" class="brainwaves-img">
</div>
<div class="col-xs-7 col-sm-8 col-lg-9">
<p class="big-font">Alpha waves (α, 8 - 13 Hz): </p>
<p>
You can measure these waves in persons that are awake but relaxed.
</p>
</div>
</div>
</li>
<li>
<div class="row top-margin-1">
<div class="col-xs-5 col-sm-4 col-lg-3">
<img src="app/img/Eeg_beta.svg" class="brainwaves-img">
</div>
<div class="col-xs-7 col-sm-8 col-lg-9">
<p class="big-font">Beta waves (β, 13 - 30 Hz): </p>
<p>
Beta waves are increased when a person is concentrating, so f.e. solving math problems.
</p>
</div>
</div>
</li>
<li>
<div class="row top-margin-1">
<div class="col-xs-5 col-sm-4 col-lg-3">
<img src="app/img/Eeg_gamma.svg" class="brainwaves-img">
</div>
<div class="col-xs-7 col-sm-8 col-lg-9">
<p class="big-font">Gamma waves (γ, > 30 Hz):</p>
<p>
These waves show when a person is highly concentrated or learning something new.
</p>
</div>
</div>
</li>
<li>
<div class="row top-margin-05">
<div style="font-size: 11px; padding-left: 15px;">Image source:<br>
<a href="https://commons.wikimedia.org/wiki/User:Hgamboa" target="_blank" style="text-shadow: none">Hgamboa</a>,
<a href="http://www.gnu.org/licenses/fdl-1.3.de.html" target="_blank" style="text-shadow: none">GNU Free Documentation License</a>
</div>
</div>
</li>
</ul>
</div>
<div class="btns-row row top-margin-1">
<button id="show-general-info-1" class="prev-info-btn blue-btn-gradient"><i class="fa fa-arrow-left"></i></button>
<button id="show-general-info-2" class="next-info-btn blue-btn-gradient"><i class="fa fa-arrow-right"></i></button>
</div>
</div>
</div><!-- div.container --->
<!-- load js dependencies -->
<script src="app/lib/socket.io-client/socket.io.js"></script>
<script src="app/lib/d3.v3.js" charset="utf-8"></script>
<script src="app/boid-data.js"></script>
<script src="app/vector.js"></script>
<script src="app/container.js"></script>
<script src="app/boids.js"></script>
<script src="app/graphics-controller.js"></script>
<script src="app/sidebar-effects.js"></script>
<script src="app/info.js"></script>
<script src="app/experiment-ui-controller.js"></script>
<script src="app/ui-controller.js"></script>
</body>
</html>