-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
323 lines (287 loc) · 14.3 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
<!DOCTYPE HTML>
<!--
Stellar by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>Pixpipe</title>
<meta charset="utf-8" />
<meta name="author" content="Jonathan Lurie" />
<meta name="description" content="Image processing pipeline in pure Javascript" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Pixpipe" />
<meta property="og:title" content="Pixpipe" />
<meta property="og:url" content="http://www.pixpipe.io/" />
<meta property="og:description" content="Image processing pipeline in pure Javascript" />
<meta property="og:image" content="http://www.pixpipe.io/images/org_logo_512.png" />
<meta property="og:image:secure_url" content="http://www.pixpipe.io/images/org_logo_512.png" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Pixpipe" />
<meta name="twitter:description" content="Image processing pipeline in pure Javascript" />
<meta name="twitter:image" content="http://www.pixpipe.io/images/org_logo_512.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!--[if lte IE 8]><script src="assets/js/ie/html5shiv.js"></script><![endif]-->
<link rel="stylesheet" href="assets/css/main.css" />
<!--[if lte IE 9]><link rel="stylesheet" href="assets/css/ie9.css" /><![endif]-->
<!--[if lte IE 8]><link rel="stylesheet" href="assets/css/ie8.css" /><![endif]-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
<style>
header img {
width: 20%;
border-radius: 3%;
}
#pipe-intro {
border: none;
}
#pipe-intro img {
border-radius: 0;
}
</style>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-110948661-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-110948661-1');
</script>
</head>
<body>
<!-- Wrapper -->
<div id="wrapper">
<!-- Header -->
<header id="header" class="alt">
<span class="logo"><img src="images/org_logo_512.png" alt="" /></span>
<h1>Pixpipe</h1>
<p>Image processing pipeline in pure Javascript<br>
<br>
<a href="https://github.com/Pixpipe/pixpipejs" class="icon fa-github alt"></a>
</p>
</header>
<!-- Nav -->
<nav id="nav">
<ul>
<li><a href="#intro" class="active">Introduction</a></li>
<li><a href="#install">Installation</a></li>
<li><a href="#features">Features</a></li>
<li><a href="#overview">Overview</a></li>
<li><a href="#ressources">Ressources</a></li>
<li><a href="/feedback">Feedback</a></li>
<!--<li><a href="#developers">Developers</a></li>-->
</ul>
</nav>
<!-- Main -->
<div id="main">
<!-- Introduction -->
<section id="intro" class="main">
<div class="spotlight">
<div class="content">
<header class="major">
<h2>Introduction</h2>
</header>
<p>
Pixpipe.js is an attempt to build an image processing pipeline entirely in native Javascript for browsers. Its architecture is somewhat inspired by <a href="https://itk.org/" target="_blank">ITK</a>, making a clear distinction between objects that contain data and objects that process data.
</p>
<p>The motivation at the origin of the project is mainly to bring image processing to every web-browser so that interactive tools do not have to reinvent the wheel when they need such pipeline.</p>
<p>
The concept of pipeline implies that the output of a <code>Filter</code> can be used as an input for the next one, like in ITK. In Pixpipe.js, this is done by using the <code>Filter</code>'s methods <code>addInput()</code> and <code>getOuput()</code>. Some filters may have several inputs, several outputs and possibly of different kinds.
</p>
<p>
Pixpipe is being developed at the <a href="http://www.mcgill.ca/neuro/about">Montreal Neurological Institute</a> (MNI/Neuro), in the lab <a href="http://mcin-cnim.ca/">McGill Center for Integrative Neuroscience</a> (MCIN), thus, it puts the emphasis on playing well with data from research in neuroscience.
</p>
<!--
<ul class="actions">
<li><a href="generic.html" class="button">Learn More</a></li>
</ul>
-->
</div>
<span id="pipe-intro" class="image"><img src="images/pipe_1000.png" alt="" /></span>
</div>
</section>
<!-- install Section -->
<section id="install" class="main">
<header class="major">
<h2>Install Pixpipe</h2>
</header>
<p>Like most Javascript projects, installing Pipipe is quite easy:</p>
<pre><code># in a npm Javascript project
$ npm install pixpipe
</code></pre>
<p>Once added to your project, you can import to the source:</p>
<pre><code>// From a Javascript source
import pixpipe from 'pixpipejs';
</code></pre>
<p>and use the <code>pixpipe</code> module to address all the classes and objects, just like in <code>var myImage = new pixpipe.Image2D();</code></p>
<!--
<footer class="major">
<ul class="actions">
<li><a href="generic.html" class="button">Learn More</a></li>
</ul>
</footer>
-->
</section>
<section id="features" class="main">
<header class="major">
<h2>Features</h2>
</header>
<p>Pixpipe provides some tools and structures to create, open, process and save objects from different types:</p>
<ul>
<li><strong>images</strong>, such as jpeg, png, tiff (8/16bits), using <code>Image2D</code> objects</li>
<li><strong>volumes</strong>, such as <a href="https://brainder.org/2012/09/23/the-nifti-file-format/">NIfTI</a>, <a href="https://en.wikibooks.org/wiki/MINC/SoftwareDevelopment/MINC2.0_File_Format_Reference">Minc2</a> and <a href="https://surfer.nmr.mgh.harvard.edu/fswiki/FsTutorial/MghFormat">MGH</a>, using <code>Image3D</code> objects</li>
<li><strong>mono-dimensional</strong> signals, such as <a href="https://www.edfplus.info/specs/edf.html">EDF</a> files using <code>Signal1D</code> objects</li>
<li><strong>Meshes</strong> surface files such as <a href="http://www.bic.mni.mcgill.ca/users/mishkin/mni_obj_format.pdf">MNI OBJ</a> and soon Wavefront Obj, using <code>Mesh3D</code> objects</li>
</ul>
<p>One of the key features of these containers is that they are made for precise scientific computation, thus, they are using <code>float32</code> instead of <code>uint8</code> and can be composed of as many bands as required (and not only 3, like in the classic RGB).</p>
<p>In addition to containing data, every <em>Pixpipe type</em> can contain an infinite amount of metadata from various types</p>
<p>Along these containers, some <em>filters</em> are available in order to process these data. Filters can cover very broad usage, from performing a simple threshold to applying a low pass filter in Fourier domain.<br />
Pixpipe is still a young project and most of the time, a new filter is created when it is necessary, so don't expect to have an OpenCV kind of diversity. But good news: adding a new filter is quite easy and <em>pull requests</em> are welcome. (cf. <a href="/contribution-guide">contribution guide</a>)</p>
<p>Finally, a data serializer is provided, so that you can save your data on your own storage, as a file. This uses the <a href="https://github.com/Pixpipe/pixbincodec">PixBin</a> format, developed especially for the needs Pixpipe. It can save any object of the <em>Pixpipe types</em> with both data and metadata (+ optional lossless compression). Later when reading a <em>PixBin</em> file, you will find all your objects the way you left them.</p>
<!--
<footer class="major">
<ul class="actions">
<li><a href="generic.html" class="button">Learn More</a></li>
<li><a href="generic.html" class="button">Learn More</a></li>
<li><a href="generic.html" class="button">Learn More</a></li>
</ul>
</footer>
-->
</section>
<!-- overview Section -->
<section id="overview" class="main">
<header class="major">
<h2>Overview</h2>
</header>
<p>The point of Pixpipe is to be easy to use and easy to contribute to. This goal leads to take some decisions: </p>
<ul>
<li>using a source bundler (<a href="http://rollupjs.org/">Rollup</a>)</li>
<li>properly define a folder hierarchy within <code>src</code>:</li>
<ul>
<li><code>core</code> for the most low level <em>interfaces</em> and <em>classes</em></li>
<li><code>decoder</code> for specific file decoding and encoding</li>
<li><code>filter</code> for all the filters (this could be arranged in a better way)</li>
<li><code>helper</code> are like filters but the processing they provide is to help visualize data, rather that applying a scientifically relevant treatment. (ie. apply a colormap)</li>
<li><code>io</code> for downloading/reading/writing files from the filesystem or AJAX</li>
<li><code>utils</code> for hosting utility classes, mostly static</li>
<li><code>pixpipe.js</code> the main entry point where are listed all the modules</li>
</ul>
<li>A modular approach and a clear separation of objects.</li>
<li>Once built, Pixpipe is only a single file, located in <code>dist</code>, so that's it's easy to import</li>
</ul>
<p>
<a href="http://slides.com/jonathanlurie/pixpipejs-2#/">Here are some slides</a> to present the project. They were done only a few months after having started but most of it is still relevant.
</p>
<!--
<footer class="major">
<ul class="actions">
<li><a href="generic.html" class="button">Learn More</a></li>
</ul>
</footer>
-->
</section>
<!-- overview Section -->
<section id="ressources" class="main">
<header class="major">
<h2>Ressources</h2>
</header>
<ul class="statistics">
<li class="style1">
<a href="http://pixpipe.io/cookbook" target="_blank" class="no-border">
<span class="icon fa-book"></span>
<strong>Cookbook</strong>To start easily
</a>
</li>
<li class="style2">
<a href="https://gitter.im/pixpipe/" target="_blank" class="no-border">
<span class="icon fa-comments"></span>
<strong>Gitter</strong>To ask/answer questions
</a>
</li>
<li class="style3">
<a href="hhttp://www.pixpipe.io/pixpipejs/doc/" target="_blank" class="no-border">
<span class="icon fa-code"></span>
<strong>API Doc</strong>In depth
</a>
</li>
<li class="style4">
<a href="http://www.pixpipe.io/cookbook/4-learning-with-examples/0-README.html" target="_blank" class="no-border">
<span class="icon fa-flask"></span>
<strong>Examples</strong>See it in action
</a>
</li>
<li class="style5">
<a href="https://github.com/Pixpipe" target="_blank" class="no-border">
<span class="icon fa-github"></span>
<strong>Source</strong>Explore and contribute
</a>
</li>
</ul>
<p>Some modules were developed for Pixpipe but can also be used independently, you can find them on the <a href="https://github.com/Pixpipe">Github organization</a>. For example, the <em>PixBin</em> serialization format in-depth description can be found <a href="https://github.com/Pixpipe/pixbincodec/blob/master/pixbinformat.md">here</a>.
<!--
<footer class="major">
<ul class="actions">
<li><a href="generic.html" class="button">Learn More</a></li>
</ul>
</footer>
-->
</section>
<!--
<section id="developers" class="main special">
<header class="major">
<h2>developers</h2>
<p>Donec imperdiet consequat consequat. Suspendisse feugiat congue<br />
posuere. Nulla massa urna, fermentum eget quam aliquet.</p>
</header>
<footer class="major">
<ul class="actions">
<li><a href="generic.html" class="button special">Get Started</a></li>
<li><a href="generic.html" class="button">Learn More</a></li>
</ul>
</footer>
</section>
-->
</div>
<!-- Footer -->
<footer id="footer">
<section>
<p>
<a href="/">Home</a><br />
<a href="cookbook">Cookbook</a><br />
<a href="contribution-guide">Contribution guide</a><br />
<a href="https://github.com/Pixpipe/pixpipejs">GitHub repository</a><br />
<a href="http://www.pixpipe.io/pixpipejs/doc/">Code documentation</a><br />
<a href="https://github.com/Pixpipe/pixbincodec">PixBin repository</a><br />
<a href="https://github.com/Pixpipe/pixpipe.github.io">Modify this website</a>
</p>
<!--
<ul class="actions">
<li><a href="generic.html" class="button">Learn More</a></li>
</ul>
-->
</section>
<section>
<dl class="alt">
<dt>Developers</dt>
<dd><a href="https://github.com/jonathanlurie">Jonathan Lurie</a> • <a href="https://github.com/ArminTaheri">Armin Taheri</a></dd>
<dt>Lab</dt>
<dd><a href="http://mcin-cnim.ca/">MCIN</a> • <a href="http://www.mcgill.ca/neuro/">Montreal Neurological Institute</a></dd>
<dt>Contact</dt>
<dd>
<a href="/feedback">Send us a message</a>
</dd>
</dl>
</section>
<p class="copyright">© Pixpipe. Design: <a href="https://html5up.net">HTML5 UP</a>.</p>
</footer>
</div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.scrollex.min.js"></script>
<script src="assets/js/jquery.scrolly.min.js"></script>
<script src="assets/js/skel.min.js"></script>
<script src="assets/js/util.js"></script>
<!--[if lte IE 8]><script src="assets/js/ie/respond.min.js"></script><![endif]-->
<script src="assets/js/main.js"></script>
</body>
</html>