Skip to content
Find file
Fetching contributors…
Cannot retrieve contributors at this time
445 lines (363 sloc) 16.5 KB
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' ''>
.----. _..._ .-'''-.
/ .--./ .---. .-'_..._''. _______ ' _ \
' ' | |.--. .' .' '.\ __.....__ \ ___ `'. / /` '. \_________ _...._
\ \ | ||__| / .' .-'' '. ,.--. ' |--.\ \ . | \ '\ |.' '-.
`.`'--. | |.--.. ' / .-''"'-. `. // \| | \ ' .-,.--.| ' | '\ .'```'. '.
`'-. `. | || || | / /________\ \\\ /| | | '| .-. \ \ / / \ | \ \
`. \ | || || | | | `'--' | | | || | | |`. ` ..' / | | | |
\ '| || |. ' \ .-------------' ,.--. | | ' .'| | | | '-...-'` | \ / .
| | || | \ '. .\ '-.____...---.// \| |___.' /' | | '- | |\`'-.-' .'
| | ||__| '. `._____.-'/ `. .' \\ /_______.'/ | | | | '-....-'`
/ /'---' `-.______ / `''-...... -' `'--'\_______|/ | | .' '.
/...-'.' ` |_| '-----------'
Slice:Drop - Instantly view scientific and medical imaging data in 3D.
Copyright (c) 2012 The Slice:Drop and X Toolkit Developers <>
Slice:Drop is licensed under the MIT License:
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
<meta name='viewport'
content='width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0' />
<meta name='description'
content='Slice:Drop - Instantly view scientific and medical imaging data in 3D.' />
<meta name='author' content='Daniel Haehn' />
<link href='css/bootstrap.css' rel='stylesheet' />
<link href='css/bootstrap-responsive.css' rel='stylesheet' />
<link type='text/css' rel='stylesheet' href='css/xtheme/jquery.ui.css' />
<link type='text/css' rel='stylesheet' href='css/jquery.miniColors.css' />
<link type='text/css' rel='stylesheet' href='css/jquery.sidebar.css' />
<link type='text/css' rel='stylesheet' href='css/frontpage.css' />
<link type='text/css' rel='stylesheet' href='css/viewer.css' />
<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/jquery.ui.js'></script>
<script type='text/javascript' src='js/jquery.ui.slider.js'></script>
<script type='text/javascript' src='js/jquery.miniColors.js'></script>
<script type='text/javascript' src='js/jquery.filestyle.js'></script>
<script type='text/javascript' src='js/jquery.idTabs.js'></script>
<script type='text/javascript' src='js/jquery.sidebar.js'></script>
<script type='text/javascript' src='js/jquery.sidebar.volume.js'></script>
<script type='text/javascript' src='js/jquery.sidebar.mesh.js'></script>
<script type='text/javascript' src='js/jquery.sidebar.fibers.js'></script>
<script type='text/javascript' src='js/jquery.viewer.js'></script>
<script type='text/javascript' src='js/jquery.frontpage.js'></script>
<script type='text/javascript' src='js/dropbox.min.js'></script>
<script type='text/javascript' src='js/bootstrap-modal.js'></script>
<script type='text/javascript' src='js/x.controller.js'></script>
<script type='text/javascript' src='js/x.examples.js'></script>
<script type='text/javascript' src='js/x.rendering.js'></script>
<script type='text/javascript' src='js/x.scene.js'></script>
<script type='text/javascript' src='js/x.share.js'></script>
<script type='text/javascript' src='js/x.realtime.js'></script>
<script type='text/javascript' src='js/xtk.js'></script>
<script type='text/javascript' src='js/pusher.min.js'></script>
<!-- Google Analytics -->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-33092072-1']);
(function() {
var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl'
: 'http://www') +
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
<!-- Google Analytics -->
<body id='body' class='webgl_enabled'>
<!-- The frontpage -->
<div id='frontpage' style=''>
<div id='content' class='container' style=''>
<img src='gfx/slicedrop.png' />
<div class='hero-unit'>
<p>Instantly view scientific and medical imaging data in 3D.</p>
<a class='btn btn-medium' data-toggle='modal' href='#learnMore'>Learn
more &raquo;</a>
<div class='well examples'>
<h3>Try the examples..</h3>
<img id='14yroldImage' src='gfx/14yrold.png' class='selectexample'
style='cursor: pointer;' /> <img id='avfImage'
src='gfx/avf_small.png' style='cursor: pointer;' /> <img
id='2yroldImage' src='gfx/2yrold_small.png'
style='cursor: pointer;' /> <img id='brainstemImage'
src='gfx/brainstem_small.png' style='cursor: pointer;' />
<div id='14yrold'>
A 14 year old healthy male brain. The patient was scanned using a
structural MRI and a diffusion MRI to highlight connecting brain
fibers. <b>Loading time: +++</b><span
class='label label-info viewexample' id='14yroldlink'>View
<div id='avf' style='display: none'>
A contrast enhanced 3D MR image showing an arteriovenous fistula
which is a bypass created by joining an artery and a vein, located
in an arm. <b>Loading time: +</b><span
class='label label-info viewexample' id='avflink'>View
<div id='2yrold' style='display: none'>
The surface of the left hemisphere of a 2 years old healthy brain.
The scalar overlay shows the bending energy based on <i>Curvedness</i>.
<b>Loading time: ++</b><span class='label label-info viewexample'
id='2yroldlink'>View Example</span>
<div id='brainstem' style='display: none'>
A region of the brainstem of a human adult including an
automatically generated segmentation as a label map colorized using
an anatomical color table. <b>Loading time: +</b> <span
class='label label-info viewexample' id='brainstemlink'>View
<div class='dropzone'>
<span>Drop files here or </span><input id='filebutton' type='file'
multiple onchange='selectfiles(this.files)' style='display: none;'></input><a
class='btn btn-inverse btn-large' style='vertical-align: super;'
files</a><br />
<span style='font-size: 10px'> Your data stays on your
computer. No upload required!</span><br />
<br />
<ul class='thumbnails'>
<div class='thumbnail'>
<img src='gfx/fibers.png' alt='' /> Fibers<br />(.trk)<br /> <br />
<div class='thumbnail'>
<img src='gfx/dicom.png' alt='' /> Volumes<br />(.mgh / .mgz /
.nrrd / .nii <br />/ .nii.gz / DICOM)
<div class='thumbnail'>
<img src='gfx/surface.png' alt='' /> Models<br />(.obj / .vtk / .stl /
FreeSurfer)<br /> <br />
<div class='footer'>
<div class='row' style='margin: auto'>
<div class='span2 offset8'>
<ul class='unstyled paddingated'>
<li style='line-height: 18px'><a
href='' target='_blank'>Boston
Children's Hospital</a></li>
<li style='line-height: 18px'><a
target='_blank'>Source Code</a></li>
<li style='line-height: 18px'><a href=''
target='_blank'>Send Feedback</a></li>
<!-- /container -->
<!-- Learn more -->
<div class='modal hide fade' id='learnMore'
style='display: none; width: 800px; height: 610px; margin-top: -305px; margin-left: -400px;'>
<div class='modal-header'>
<button class='close' data-dismiss='modal'>×</button>
<h3>Try it!!</h3>
<div class='modal-body' style='max-height: 600px'>
<img src='gfx/workflow.png' />
We think that the best way to render your files is without any
necessary conversions. Just drop'em on this website and they are ready
to render. <b>Slice:Drop</b> supports a variety of scientific file formats
out-of-the-box (see <a
target='_blank' style='color:cornflowerblue'>here</a> for a complete list).
<img src='gfx/multitouch.png' style='float:right'/>
<b>Slice:Drop</b> uses WebGL and HTML5 Canvas to render the data in
2D and 3D. We use our own open-source toolkit to perform the
rendering, called <a href='' target='_blank' style='color:cornflowerblue'>XTK</a>.
<p>All data stays on the client and nothing gets transferred via the internet. This is totally safe!
We are very keen on your feedback, so please <a
href='' style='color:cornflowerblue'>email us</a>.
<!-- Drop note -->
<div id='drop-box-overlay'>
<h1>Drop files anywhere...</h1>
<!-- The viewer -->
<div id='viewer' style='display: none;'>
<ul class='navigation'>
<li id='volume' class='navigationLi'><div class='menu'>
<div class='pin'>
<span class='ui-icon ui-icon-pin-w pinicon'></span>
<div class='tabbox idTabs' id='volumetabs'>
<div class='caption'>VOLUME</div>
<a href='#volumeTab' class='selected'>Volume</a> <a
href='#labelmapTab' id='labelmapSwitch'
style='margin-left: 50px;'>Labelmap</a>
<div id='volumeTab' class='tabContent'>
<div id='modes' style='width: 130px; float: left;'>
<div id='volumerendering'>
<img src='gfx/3d.png' />
<div id='slicing'>
<img src='gfx/2d.png' />
<div id='colors'
style='width: 26px; margin-left: 6px; float: left;'>
<input id='fgColorVolume' type='hidden'
class='color-picker black' size='6' value='#ffffff' /> <input
id='bgColorVolume' type='hidden' class='color-picker black'
size='6' value='#000000' />
<div id='opacity-label' class='menuLabel'
style='margin-top: 4px; float: left;'>3D Opacity</div>
<div id='opacity-volume'
style='margin-left: 10px; margin-top: 4px; float: left;'></div>
<div id='windowlevel-label' class='menuLabel'
style='margin-top: 4px; float: left;'>Window/Level</div>
<div id='windowlevel-volume'
style='margin-left: 10px; margin-top: 4px; float: left;'></div>
<div class='menuLabel' style='margin-top: 4px; float: left;'>Threshold</div>
<div id='threshold-volume'
style='margin-left: 10px; margin-top: 4px; float: left;'></div>
<div id='labelmapTab' class='tabContent' style='display: none'>
<div id='visibility-labelmap' style='width: 130px; float: left;'>
<div class='menuLabel' style='margin-top: 4px; float: left;'>Show/Hide</div>
<div id='labelmapvisibility' class='eye show-icon'
style='margin-left: 6px;'></div>
<div class='menuLabel' style='margin-top: 4px; float: left;'>Labelmap
<div id='opacity-labelmap'
style='margin-left: 10px; margin-top: 4px; float: left;'></div>
<li id='mesh' class='navigationLi'><div class='menu'>
<div class='pin'>
<span class='ui-icon ui-icon-pin-w pinicon'></span>
<div class='tabbox idTabs'>
<div class='caption'>MESH</div>
<a class='meshtabs selected'>Mesh 1</a>
<div id='mesh1' class='tabContent'>
<div id='visibility-mesh'
style='width: 140px; float: left; margin-top: 2px;'>
<div class='menuLabel' style='margin-top: 4px; float: left;'>Show/Hide</div>
<div id='meshvisibility' class='eye show-icon'
style='margin-left: 6px;'></div>
<input type='hidden' id='meshColor' class='color-picker black'
size='6' value='#0000ff' />
<div class='menuLabel' style='margin-top: 4px; float: left;'>Opacity</div>
<div id='opacity-mesh'
style='margin-left: 10px; margin-top: 4px; float: left;'></div>
<div class='menuLabel'
style='margin-top: 4px; float: left; margin-top: 10px;'>Scalars</div>
<div id='scalars-mesh' style='width: 160px; float: left;'>
<select id='scalars-selector' style='margin-left: 6px'><option>Scalars
1</option></select> <input type='hidden' class='color-picker black'
id='scalarsMinColor' size='6' value='#00ff00' /> <input
type='hidden' id='scalarsMaxColor' class='color-picker black'
size='6' value='#ff0000' />
<div class='menuLabel' style='margin-top: 4px; float: left;'>Scalars
<div id='threshold-scalars'
style='margin-left: 10px; margin-top: 4px; float: left;'></div>
<li id='fibers' class='navigationLi'><div class='menu'>
<div class='pin'>
<span class='ui-icon ui-icon-pin-w pinicon'></span>
<div class='tabbox idTabs'>
<div class='caption'>FIBERS</div>
<a class='fiberstabs selected'>Fibers 1</a>
<div id='fibers1' class='tabContent'>
<div id='visibility-fibers'
style='width: 140px; float: left; margin-top: 2px;'>
<div class='menuLabel' style='margin-top: 4px; float: left;'>Show/Hide</div>
<div id='fibersvisibility' class='eye show-icon'
style='margin-left: 6px;'></div>
<div class='menuLabel' style='margin-top: 4px; float: left;'>Fiber
Length Threshold</div>
<div id='threshold-fibers'
style='margin-left: 10px; margin-top: 4px; float: left;'></div>
<!-- The renderers. -->
<div id='3d' class='threeDRenderer'></div>
<div id='sliceAx' class='twoDRenderer'>
<div id='blue_slider'></div>
<div id='ax_right_label' class='left_annotation'>R</div>
<div id='ax_left_label' class='right_annotation'>L</div>
<div id='ax_top_label' class='top_annotation'>A</div>
<div id='ax_bottom_label' class='bottom_annotation'>P</div>
<div id='sliceSag' class='twoDRenderer'>
<div id='red_slider'></div>
<div id='sag_right_label' class='right_annotation'>P</div>
<div id='sag_left_label' class='left_annotation'>A</div>
<div id='sag_top_label' class='top_annotation'>S</div>
<div id='sag_bottom_label' class='bottom_annotation'>I</div>
<div id='sliceCor' class='twoDRenderer'>
<div id='green_slider'></div>
<div id='cor_right_label' class='left_annotation'>R</div>
<div id='cor_left_label' class='right_annotation'>L</div>
<div id='cor_top_label' class='top_annotation'>S</div>
<div id='cor_bottom_label' class='bottom_annotation'>I</div>
<!-- Slice:Drop logo -->
<div id='blacklogo'>
<a href='' target='_top'><img src='gfx/slicedrop_transparent.png' /></a>
<div id='share'>
<img id='sharelogo' src='gfx/dropbox.png' title='Share with Dropbox'/>
<div id='sharemsg' style='display:none'></div>
<div id='download'>
<img id='linklogo' src='gfx/link.png' title='Realtime Collaboration'/>
<img id='linkselectedlogo' style='display:none' src='gfx/link_selected.png' title='Stop Realtime Collaboration'/>
<img id='downloadlogo' src='gfx/download.png' title='Download data'/>
<div id='log'></div>
Something went wrong with that request. Please try again.