-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
155 lines (138 loc) · 6.35 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
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>NeuroCave</title>
</head>
<script type="text/javascript" src="js/external-libraries/queue.js"></script>
<script type="text/javascript" src="js/external-libraries/papaparse.min.js"></script>
<script>
// loadVisualization = function (folderName) {
// queue()
// .defer(setFolder,folderName)
// .awaitAll( function() {
// console.log(folder);
// });
// }
</script>
<body>
<h2>NeuroCave</h2>
NeuroCave is a tool allows to visualize brain networks also called the <a href="https://en.wikipedia.org/wiki/Connectome">
Connectome</a> which is the network that describes how the different regions of the brain are interconnected.
Particularly, the tools enable to perform the exploration of the intrinsic geometry of the brain, by letting the user
switch quickly different topological spaces where the connectome is embedded.
With a simple and easy-to-use interface, users can explore all the connections with a edge-on-demand technique and focus on
very specific area by switching on and off regions of the brain. Simple analytics such as nodal strength and shortest path
trees can be computed on the fly. This tool has been developed with virtual reality in mind and it is compatible with
the Oculus Rift and requires the Oculus Touch input.
<h3>Acknowledgement</h3>
The tool was entirely developed the <a href="https://www.evl.uic.edu/creativecoding/">Creative Coding Research Group</a>,
directed by Prof. Angus Forbes. The research group is part of the <a href="https://www.evl.uic.edu">Electronic Visualization
Lab (EVL)</a> at University of Illinois at Chicago (UIC). This research is being done in collaboration with Alex Leow,
Olusola Ajilore, and Allen Ye, all belonging to UIC Department of Psychiatry.
<h2>Demo</h2>
<ul>
<a onclick="location.href=this.href+'?dataset=Demo1&load=0&lut=freesurfer';return false;" href="visualization.html">Demo 1</a>
<p></p>
<a onclick="location.href=this.href+'?dataset=Demo2&load=0&lut=baltimore';return false;" href="visualization.html">Demo 2: F1000, female vs male</a>
<p></p>
<a onclick="location.href=this.href+'?dataset=Demo4&load=0&lut=mni';return false;" href="visualization.html">Demo 4: 2514 X 2514 </a>
<p></p>
<a onclick="location.href=this.href+'?dataset=Demo6&load=0&lut=baltimore';return false;" href="visualization.html">Demo 6: F1000, 7 groups of age</a>
<p></p>
<a onclick="location.href=this.href+'?dataset=Demo7&load=0&lut=baltimore';return false;" href="visualization.html">Demo 7: F1000, female vs male, age: 20-30</a>
<p></p>
<a onclick="location.href=this.href+'?dataset=theta&load=0&lut=baltimore';return false;" href="visualization.html">theta</a>
<p></p>
</ul>
<h2>Demo For Samsung Gear (under test)</h2>
<ul>
<a onclick="location.href=this.href;return false;" href="webvr_test.html">Test Your Phone</a>
<p></p>
<a onclick="location.href=this.href+'?dataset=Demo1&load=0&lut=freesurfer&mobile=1';return false;" href="visualization.html">Demo 1</a>
<p></p>
</ul>
<div class = "menu" id = 'full'>
<h2>Use your own data:</h2>
In order to use your own data, follow these instructions:
<ul style="list-style-type:circle">
<li><a href="https://github.com/CreativeCodingLab/NeuroCave/archive/master.zip">Download</a> <b>NeuroCave</b> to
your local drive</li>
<li>In the local copy, put the folder containing your data in <b>.\NeuroCave\data\</b>. Your data should follow the description in
<a href="https://github.com/CreativeCodingLab/NeuroCave#how-to-use-it">here</a>. </li>
<li>Run the local version of the <b>'index.html'</b> file</li>
<li>Browse for the folder using the below <b>'Browse'</b> button</li>
<li>Choose an <b>Atlas</b>. You could create your own Atlas following the instructions in
<a href="https://github.com/CreativeCodingLab/NeuroCave#creating-an-atlas">here</a>. </li>
<li>Press the <b>'Submit'</b> button</li>
</ul>
<p></p>
<input id = 'folderSelect' type = 'file' onchange="getfolder(event)" webkitdirectory directory multiple/>Choose data folder</input>
<p></p>
<select id = "Atlas" class = "jumpmenu"></select>
<label>Choose Atlas</label>
<p></p>
<button type = 'button' id = 'submit' onclick="location.href='visualization.html?dataset='+folder+'&load=0&lut='+atlas">Submit</button>
<br>
</div>
<script type="text/Javascript">
var list = null;
var atlas = null;
// it is assumed all data folder should have an index.txt file describing its contents
var lookForAtlases = function (callback) {
Papa.parse("data/index.txt", {
download: true,
delimiter: ",",
dynamicTyping: true,
header: false,
skipEmptyLines: true,
complete: function (results) {
list = results.data[0];
console.log("Look-up Table list loaded ... ");
callback(null, null);
}
});
};
// initialize variables:
// folder : is the folder containing data
// menu : will contain the different atlases
init = function () {
console.log("Init...");
atlas = list[0];
console.log("Current Atlas = " + atlas);
var menu = document.getElementById("Atlas");
var folder = '';
console.log("Current folder = " + folder);
for(var i = 0; i < 3; i++) {
var el = document.createElement("option");
el.textContent = list[i];
el.value = list[i];
el.selected = (i==0);
menu.appendChild(el);
}
menu.onchange = function () {
atlas = list[this.selectedIndex];
console.log("Current Atlas = " + atlas);
};
};
// get user selected folder info
getfolder = function (e) {
var files = e.target.files;
if (files) {
if (files.length == 0) {
alert("Empty directory!!!")
} else {
folder = files[0].webkitRelativePath.split('/')[0];
console.log("Selected folder = " + folder)
}
}
};
// populate the Atlas dropdown menu
queue()
.defer(lookForAtlases)
.awaitAll(function () {
init();
});
</script>
</body>
</html>