456 slicedrop.html
View file
@@ -0,0 +1,456 @@
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<!--
/*
.----. _..._ .-'''-.
/ .--./ .---. .-'_..._''. _______ ' _ \
' ' | |.--. .' .' '.\ __.....__ \ ___ `'. / /` '. \_________ _...._
\ \ | ||__| / .' .-'' '. ,.--. ' |--.\ \ . | \ '\ |.' '-.
`.`'--. | |.--.. ' / .-''"'-. `. // \| | \ ' .-,.--.| ' | '\ .'```'. '.
`'-. `. | || || | / /________\ \\\ /| | | '| .-. \ \ / / \ | \ \
`. \ | || || | | | `'--' | | | || | | |`. ` ..' / | | | |
\ '| || |. ' \ .-------------' ,.--. | | ' .'| | | | '-...-'` | \ / .
| | || | \ '. .\ '-.____...---.// \| |___.' /' | | '- | |\`'-.-' .'
| | ||__| '. `._____.-'/ `. .' \\ /_______.'/ | | | | '-....-'`
/ /'---' `-.______ / `''-...... -' `'--'\_______|/ | | .' '.
/...-'.' ` |_| '-----------'
/--...-'
Slice:Drop - Instantly view scientific and medical imaging data in 3D.
http://slicedrop.com
Copyright (c) 2012 The Slice:Drop and X Toolkit Developers <dev@goXTK.com>
Slice:Drop is licensed under the MIT License:
http://www.opensource.org/licenses/mit-license.php
CREDITS: http://slicedrop.com/LICENSE
*/
-->
<html>
<head>
<title>Slice:Drop</title>
<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='http://slicedrop.com//css/bootstrap.css' rel='stylesheet' />
<link href='http://slicedrop.com//css/bootstrap-responsive.css' rel='stylesheet' />
<link type='text/css' rel='stylesheet' href='http://slicedrop.com//css/xtheme/jquery.ui.css' />
<link type='text/css' rel='stylesheet' href='http://slicedrop.com//css/jquery.miniColors.css' />
<link type='text/css' rel='stylesheet' href='http://slicedrop.com//css/jquery.sidebar.css' />
<link type='text/css' rel='stylesheet' href='http://slicedrop.com//css/frontpage.css' />
<link type='text/css' rel='stylesheet' href='http://slicedrop.com//css/viewer.css' />

<script type='text/javascript' src='http://slicedrop.com//js/jquery.js'></script>
<script type='text/javascript' src='http://slicedrop.com//js/jquery.ui.js'></script>
<script type='text/javascript' src='http://slicedrop.com//js/jquery.ui.slider.js'></script>
<script type='text/javascript' src='http://slicedrop.com//js/jquery.miniColors.js'></script>
<script type='text/javascript' src='http://slicedrop.com//js/jquery.filestyle.js'></script>
<script type='text/javascript' src='http://slicedrop.com//js/jquery.idTabs.js'></script>
<script type='text/javascript' src='http://slicedrop.com//js/jquery.sidebar.js'></script>
<script type='text/javascript' src='http://slicedrop.com//js/jquery.sidebar.volume.js'></script>
<script type='text/javascript' src='http://slicedrop.com//js/jquery.sidebar.mesh.js'></script>
<script type='text/javascript' src='http://slicedrop.com//js/jquery.sidebar.fibers.js'></script>
<script type='text/javascript' src='http://slicedrop.com//js/jquery.viewer.js'></script>
<script type='text/javascript' src='http://slicedrop.com//js/jquery.frontpage.js'></script>
<script type='text/javascript' src='http://slicedrop.com//js/dropbox.min.js'></script>
<script type='text/javascript' src='http://slicedrop.com//js/bootstrap-modal.js'></script>
<script type='text/javascript' src='http://slicedrop.com//js/x.controller.js'></script>
<script type='text/javascript' src='http://slicedrop.com//js/x.examples.js'></script>
<script type='text/javascript' src='http://slicedrop.com//js/x.rendering.js'></script>
<script type='text/javascript' src='http://slicedrop.com//js/x.scene.js'></script>
<script type='text/javascript' src='http://slicedrop.com//js/x.share.js'></script>
<script type='text/javascript' src='http://slicedrop.com//js/x.realtime.js'></script>
<script type='text/javascript' src='http://slicedrop.com//js/xtk.js'></script>
<script type='text/javascript' src='http://slicedrop.com//js/pusher.min.js'></script>

<!-- Google Analytics -->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-33092072-1']);
_gaq.push(['_trackPageview']);

(function() {

var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl'
: 'http://www') +
'.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
})();
</script>
<!-- Google Analytics -->

</head>
<body id='body' class='webgl_enabled'>

<!-- The frontpage -->
<div id='frontpage' style=''>

<div id='content' class='container' style=''>

<img src='http://slicedrop.com//gfx/slicedrop.png' />

<div class='hero-unit'>
<p>Instantly view scientific and medical imaging data in 3D.</p>
<p>
<a class='btn btn-medium' data-toggle='modal' href='#learnMore'>Learn
more &raquo;</a>
</p>
</div>

<div class='well examples'>
<h3>Try the examples..</h3>
<img id='14yroldImage' src='http://slicedrop.com//gfx/14yrold.png' class='selectexample'
style='cursor: pointer;' /> <img id='avfImage'
src='http://slicedrop.com//gfx/avf_small.png' style='cursor: pointer;' /> <img
id='2yroldImage' src='http://slicedrop.com//gfx/2yrold_small.png'
style='cursor: pointer;' /> <img id='brainstemImage'
src='http://slicedrop.com//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
Example</span>
</div>
<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
Example</span>
</div>
<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>
<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
Example</span>
</div>
</div>

<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;'
onclick='javascript:document.getElementById("filebutton").click();'>Select
files</a><br />
<span style='font-size: 10px'> Your data stays on your
computer. No upload required!</span><br />
<br />
<ul class='thumbnails'>
<li>
<div class='thumbnail'>
<img src='http://slicedrop.com//gfx/fibers.png' alt='' /> Fibers<br />(.trk)<br /> <br />
</div>
</li>
<li>
<div class='thumbnail'>
<img src='http://slicedrop.com//gfx/dicom.png' alt='' /> Volumes<br />(.mgh / .mgz /
.nrrd / .nii <br />/ .nii.gz / DICOM)
</div>
</li>
<li>
<div class='thumbnail'>
<img src='http://slicedrop.com//gfx/surface.png' alt='' /> Models<br />(.obj / .vtk / .stl /
FreeSurfer)<br /> <br />
</div>
</li>
</ul>
</div>

<div class='footer'>
<div class='row' style='margin: auto'>
<div class='span2 offset8'>
<ul class='unstyled paddingated'>
<li style='line-height: 18px'><a
href='http://childrenshospital.org/FNNDSC' target='_blank'>Boston
Children's Hospital</a></li>
<li style='line-height: 18px'><a
href='https://github.com/slicedrop/slicedrop.github.com'
target='_blank'>Source Code</a></li>
<li style='line-height: 18px'><a href='mailto:dev@goxtk.com'
target='_blank'>Send Feedback</a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- /container -->

</div>

<!-- 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>
<div class='modal-body' style='max-height: 600px'>
<p>
<img src='http://slicedrop.com//gfx/workflow.png' />
</p>
<p>
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
href='https://github.com/xtk/X/wiki/X%3AFileformats'
target='_blank' style='color:cornflowerblue'>here</a> for a complete list).
</p>
<img src='http://slicedrop.com//gfx/multitouch.png' style='float:right'/>
<p>
<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='http://goXTK.com' target='_blank' style='color:cornflowerblue'>XTK</a>.
</p>
<p>All data stays on the client and nothing gets transferred via the internet. This is totally safe!
</p>
<p>
We are very keen on your feedback, so please <a
href='mailto:dev@goxtk.com' style='color:cornflowerblue'>email us</a>.
</p>
</div>
</div>

<!-- Drop note -->
<div id='drop-box-overlay'>
<h1>Drop files anywhere...</h1>
</div>

<!-- 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>

<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='http://slicedrop.com//gfx/3d.png' />
</div>
<div id='slicing'>
<img src='http://slicedrop.com//gfx/2d.png' />
</div>
</div>

<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>

<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>
<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>

<div class='menuLabel' style='margin-top: 4px; float: left;'>Labelmap
Opacity</div>
<div id='opacity-labelmap'
style='margin-left: 10px; margin-top: 4px; float: left;'></div>


</div>
</div>

</div></li>

<li id='mesh' class='navigationLi'><div class='menu'>
<div class='pin'>
<span class='ui-icon ui-icon-pin-w pinicon'></span>
</div>
<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>
</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>



<div class='menuLabel' style='margin-top: 4px; float: left;'>Scalars
Threshold</div>
<div id='threshold-scalars'
style='margin-left: 10px; margin-top: 4px; float: left;'></div>

</div>

</div>
</div></li>

<li id='fibers' class='navigationLi'><div class='menu'>
<div class='pin'>
<span class='ui-icon ui-icon-pin-w pinicon'></span>
</div>
<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>

<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>


</div>

</div>
</div></li>

</ul>



<!-- The renderers. -->

<div id='3d' class='threeDRenderer'></div>
<div id='sliceX' class='twoDRenderer'>
<div id='yellow_slider'></div>
<span class='ren2d_icon' style='left: 2px;'
onclick='javascript:_current_X_content.rotateCounter();'> <span
class='ui-icon ui-icon-arrowreturnthick-1-w' style='margin: 5px;'
title="Rotate"></span>
</span> <span class='ren2d_icon' style='right: 2px;'
onclick='javascript:_current_X_content.rotate();'> <span
class='ui-icon ui-icon-arrowreturnthick-1-w ren2d_icon_flip'
style='margin: 5px;' title="Rotate"></span>
</span>
</div>
<div id='sliceY' class='twoDRenderer'>
<div id='red_slider'></div>
<span class='ren2d_icon' style='left: 2px;'
onclick='javascript:_current_Y_content.rotateCounter();'> <span
class='ui-icon ui-icon-arrowreturnthick-1-w' style='margin: 5px;'
title="Rotate"></span>
</span> <span class='ren2d_icon' style='right: 2px;'
onclick='javascript:_current_Y_content.rotate();'> <span
class='ui-icon ui-icon-arrowreturnthick-1-w ren2d_icon_flip'
style='margin: 5px;' title="Rotate"></span>
</span>
</div>
<div id='sliceZ' class='twoDRenderer'>
<div id='green_slider'></div>
<span class='ren2d_icon' style='left: 2px;'
onclick='javascript:_current_Z_content.rotateCounter();'> <span
class='ui-icon ui-icon-arrowreturnthick-1-w' style='margin: 5px;'
title="Rotate"></span>
</span> <span class='ren2d_icon' style='right: 2px;'
onclick='javascript:_current_Z_content.rotate();'> <span
class='ui-icon ui-icon-arrowreturnthick-1-w ren2d_icon_flip'
style='margin: 5px;' title="Rotate"></span>
</span>

</div>

<!-- Slice:Drop logo -->
<div id='blacklogo'>
<a href='http://slicedrop.com' target='_top'><img src='http://slicedrop.com//gfx/slicedrop_transparent.png' /></a>
</div>

<div id='share'>
<img id='sharelogo' src='http://slicedrop.com//gfx/dropbox.png' title='Share with Dropbox'/>
<div id='sharemsg' style='display:none'></div>
</div>

<div id='download'>
<img id='linklogo' src='http://slicedrop.com//gfx/link.png' title='Realtime Collaboration'/>
<img id='linkselectedlogo' style='display:none' src='http://slicedrop.com//gfx/link_selected.png' title='Stop Realtime Collaboration'/>
<img id='downloadlogo' src='http://slicedrop.com//gfx/download.png' title='Download data'/>
</div>

<div id='log'></div>

</div>

</body>
</html>