|
| 1 | +# EEG Browser Visualization |
| 2 | + |
1 | 3 | ## Main dependencies |
2 | 4 |
|
3 | | -### Ramda (https://ramdajs.com) |
| 5 | +- [Ramda](https://ramdajs.com) |
4 | 6 | A practical functional library for JavaScript programmers. |
5 | 7 |
|
6 | | -### Redux (https://redux.js.org) |
| 8 | +- [Redux](https://redux.js.org): |
7 | 9 | A Predictable State Container for JS Apps |
8 | 10 |
|
9 | | -### Visx (https://airbnb.io/visx) |
| 11 | +- [Visx](https://airbnb.io/visx): |
10 | 12 | A collection of expressive, low-level visualization primitives for React. |
11 | 13 |
|
12 | | -### RxJS (https://rxjs-dev.firebaseapp.com/guide/overview) |
| 14 | +- [RxJS](https://rxjs-dev.firebaseapp.com/guide/overview): |
13 | 15 | RxJS is a library for composing asynchronous and event-based programs by using observable sequences. |
14 | 16 | It provides one core type, the Observable, satellite types (Observer, Schedulers, Subjects) and operators to allow handling asynchronous events as collections. |
15 | 17 |
|
16 | | -### TypeScript (https://www.typescriptlang.org) |
| 18 | +- [TypeScript](https://www.typescriptlang.org) |
17 | 19 | A static type checker for javascript. |
18 | 20 |
|
19 | | -### Protocol Buffers (https://developers.google.com/protocol-buffers) |
| 21 | +- [Protocol Buffers](https://developers.google.com/protocol-buffers) |
20 | 22 | To install the Protocol Buffers Compiler (protoc), run: |
21 | 23 | `apt install -y protobuf-compiler` |
| 24 | + |
| 25 | + |
| 26 | +## User manual |
| 27 | + |
| 28 | +The EEG Browser visualization component adds support for some useful visual helpers: The **Signal Viewer** and the **Electrode Map**. |
| 29 | + |
| 30 | + |
| 31 | + |
| 32 | +### Signal Viewer |
| 33 | + <br/><br/> |
| 34 | +Several tools can be used to navigate through the Signal Viewer: |
| 35 | + - The **Timeline Range View** (1) can be used to change the boundaries of the viewed timeline. |
| 36 | + - The **Amplitude** and **Filter** tools (2) can be used to increase/reduce the amplitude scale and apply high or low-pass filters. |
| 37 | + - The **Channel navigation** (3) can be used to navigate through the viewed channels. |
| 38 | + - The **Event Panel** (4) can be used to display information about the events when event data is available. |
| 39 | + - If the selected timeline range contains more than 100 events, a message (5) indicates the user to reduce the boundaries of the timeline in order to display the event data. |
| 40 | +<br/><br/> |
| 41 | +<p align="center"> |
| 42 | + <img width="650" src="./../../images/signal-values.png"/><br/> |
| 43 | + <sub>Signal Viewer with signal values and event data displayed.</sub> |
| 44 | +</p> |
| 45 | + |
| 46 | +### Electrode Map |
| 47 | +The current implementation of the Electrode Map supports 2 display modes: 2D and 3D. |
| 48 | + |
| 49 | +| 2D View | 3D View | |
| 50 | +|:-------------------------:|:-------------------------:| |
| 51 | +|<img width="300" src="./../../images/electrodes-2d-hover.png"/><br/> The 2D view is a stereographic projection of the electrodes position. Electrodes are indexed and their name is displayed on mouse hover. | <img width="300" src="./../../images/electrodes-3d.png" /><br/> The 3D view displays the exact position of the electrodes on the brain. | |
| 52 | + |
| 53 | +### Future developements to come |
| 54 | + |
| 55 | +A signal annotation feature is currently under development. |
0 commit comments