Permalink
Browse files

introduce lesson 18 (ex lesson 17)

  • Loading branch information...
NicolasRannou committed Aug 21, 2013
1 parent 63b1b9e commit 58b8aa02a6a6d82533e0d6b62cf17bf1869b7a43
Showing with 409 additions and 0 deletions.
  1. BIN 18/avf.nii
  2. +7 −0 18/demo.css
  3. +9 −0 18/demo.details
  4. +9 −0 18/demo.html
  5. +163 −0 18/demo.js
  6. +69 −0 18/index.html
  7. +53 −0 18/single.html
  8. +99 −0 18/triple.html
  9. BIN 18/vol.nii
View
Binary file not shown.
View
@@ -0,0 +1,7 @@
html, body {
background-color:#000;
margin: 0;
padding: 0;
height: 100%;
overflow: hidden !important;
}
View
@@ -0,0 +1,9 @@
---
name: XTK Lesson 13
description: I want 2D!
authors:
- XTK
resources:
- http://get.goXTK.com/xtk_xdat.gui.js
normalize_css: no
...
View
@@ -0,0 +1,9 @@
<!-- the container for the renderers -->
<div id="3d"
style="background-color: #000; width: 100%; height: 70%; margin-bottom: 2px;"></div>
<div id="sliceX"
style="border-top: 2px solid yellow; background-color: #000; width: 32%; height: 30%; float: left;"></div>
<div id="sliceY"
style="border-top: 2px solid red;background-color: #000; width: 32%; height: 30%; float: left;"></div>
<div id="sliceZ"
style="border-top: 2px solid green; background-color: #000; width: 32%; height: 30%; float: left;"></div>
View
@@ -0,0 +1,163 @@
goog.require('X.renderer3D');
goog.require('X.renderer2D');
goog.require('X.volume');
window.onload = function() {
//
// try to create the 3D renderer
//
_webGLFriendly = true;
try {
// try to create and initialize a 3D renderer
threeD = new X.renderer3D();
threeD.container = '3d';
threeD.init();
} catch (Exception) {
// no webgl on this machine
_webGLFriendly = false;
}
//
// create the 2D renderers
// .. for the X orientation
sliceX = new X.renderer2D();
sliceX.container = 'sliceX';
sliceX.orientation = 'X';
sliceX.init();
// .. for Y
var sliceY = new X.renderer2D();
sliceY.container = 'sliceY';
sliceY.orientation = 'Y';
sliceY.init();
// .. and for Z
var sliceZ = new X.renderer2D();
sliceZ.container = 'sliceZ';
sliceZ.orientation = 'Z';
sliceZ.init();
//
// THE VOLUME DATA
//
// create a X.volume
volume = new X.volume();
// .. and attach the single-file dicom in .NRRD format
// this works with gzip/gz/raw encoded NRRD files but XTK also supports other
// formats like MGH/MGZ
volume.file = 'vol.nii';
// we also attach a label map to show segmentations on a slice-by-slice base
// add the volume in the main renderer
// we choose the sliceX here, since this should work also on
// non-webGL-friendly devices like Safari on iOS
sliceX.add(volume);
// start the loading/rendering
sliceX.render();
//
// THE GUI
//
// the onShowtime method gets executed after all files were fully loaded and
// just before the first rendering attempt
sliceX.onShowtime = function() {
//
// add the volume to the other 3 renderers
//
sliceY.add(volume);
sliceY.render();
sliceZ.add(volume);
sliceZ.render();
if (_webGLFriendly) {
threeD.add(volume);
threeD.render();
}
return;
// now the real GUI
var gui = new dat.GUI();
// the following configures the gui for interacting with the X.volume
var volumegui = gui.addFolder('Volume');
// now we can configure controllers which..
// .. switch between slicing and volume rendering
var vrController = volumegui.add(volume, 'volumeRendering');
// .. configure the volume rendering opacity
var opacityController = volumegui.add(volume, 'opacity', 0, 1);
// .. and the threshold in the min..max range
var lowerThresholdController = volumegui.add(volume, 'lowerThreshold',
volume.min, volume.max);
var upperThresholdController = volumegui.add(volume, 'upperThreshold',
volume.min, volume.max);
var lowerWindowController = volumegui.add(volume, 'windowLow', volume.min,
volume.max);
var upperWindowController = volumegui.add(volume, 'windowHigh', volume.min,
volume.max);
// the indexX,Y,Z are the currently displayed slice indices in the range
// 0..dimensions-1
var sliceXController = volumegui.add(volume, 'indexX', 0,
volume.dimensions[0] - 1);
var sliceYController = volumegui.add(volume, 'indexY', 0,
volume.dimensions[1] - 1);
var sliceZController = volumegui.add(volume, 'indexZ', 0,
volume.dimensions[2] - 1);
volumegui.open();
};
sliceX.interactor.onMouseMove = showIJKX;
sliceX.onScroll = showIJKX;
sliceY.interactor.onMouseMove = showIJKY;
sliceY.onScroll = showIJKY;
sliceZ.interactor.onMouseMove = showIJKZ;
sliceZ.onScroll = showIJKZ;
function showIJKX(e) {showIJK(sliceX, 'X',e); }
function showIJKY(e) {showIJK(sliceY, 'Y',e); }
function showIJKZ(e) {showIJK(sliceZ, 'Z',e); }
function showIJK(r, which,e) {
var ijk = r.xy2ijk(r.interactor.mousePosition[0],
r.interactor.mousePosition[1]);
if (!ijk) {document.getElementById('info'+which).innerHTML = 'NA'; return;}
if (e.shiftKey) {
// propagate to slices
if (r==sliceX) {
volume.indexY = ijk[1];
volume.indexZ = ijk[2];
} else if (r==sliceY) {
volume.indexX = ijk[0];
volume.indexZ = ijk[2];
} else if (r==sliceZ) {
volume.indexX = ijk[0];
volume.indexY = ijk[1];
}
}
document.getElementById('info'+which).innerHTML = ijk;
}
};
View
@@ -0,0 +1,69 @@
<!--
/*
*
* xxxxxxx xxxxxxx
* x:::::x x:::::x
* x:::::x x:::::x
* x:::::xx:::::x
* x::::::::::x
* x::::::::x
* x::::::::x
* x::::::::::x
* x:::::xx:::::x
* x:::::x x:::::x
* x:::::x x:::::x
* THE xxxxxxx xxxxxxx TOOLKIT
*
* http://www.goXTK.com
*
* Copyright (c) 2012 The X Toolkit Developers <dev@goXTK.com>
*
* The X Toolkit (XTK) is licensed under the MIT License:
* http://www.opensource.org/licenses/mit-license.php
*
* LESSON 13 - I want 2D!
*/
-->
<html>
<head>
<title>XTK LESSON 13</title>
<script type="text/javascript"
src="../../X/lib/google-closure-library/closure/goog/base.js"></script>
<script type="text/javascript" src="../../X/xtk-deps.js"></script>
<script type="text/javascript"
src="http://get.goXTK.com/xtk_xdat.gui.js"></script>
<script type="text/javascript" src="demo.js"></script>
<link rel="stylesheet" type="text/css" href="demo.css">
</head>
<body>
<!-- the container for the renderers -->
<div id="3d"
style="background-color: #000; width: 100%; height: 70%; margin-bottom: 2px;"></div>
<div id="sliceX"
style="border-top: 2px solid yellow; background-color: #000; width: 32%; height: 30%; float: left;">
<div id='infoX'
style='position: relative; top: 10px; left: 10px; color: white;'>none</div>
</div>
<div id="sliceY"
style="border-top: 2px solid red; background-color: #000; width: 32%; height: 30%; float: left;">
<div id='infoY'
style='position: relative; top: 10px; left: 10px; color: white;'>none</div>
</div>
<div id="sliceZ"
style="border-top: 2px solid green; background-color: #000; width: 32%; height: 30%; float: left;">
<div id='infoZ'
style='position: relative; top: 10px; left: 10px; color: white;'>none</div>
</div>
<div id='jsfiddle' style='position: absolute; top: 10px; left: 10px;'>
<a
href='http://jsfiddle.net/gh/get/toolkit/edge/xtk/lessons/tree/master/13/#run'
target=_blank><img src='http://xtk.github.com/fiddlelogo.png'
border=0></a>
</div>
</body>
</html>
View
@@ -0,0 +1,53 @@
<html>
<head>
<title>XTK LESSON 13</title>
<script type="text/javascript" src="../../X/lib/google-closure-library/closure/goog/base.js"></script>
<script type="text/javascript" src="../../X/xtk-deps.js"></script>
<script type="text/javascript">
goog.require('X.renderer2D');
goog.require('X.volume');
window.onload = function() {
ren2d = new X.renderer2D();
ren2d.orientation = 'Y';
ren2d.init();
volume = new X.volume();
volume.file = 'avf.nii';
ren2d.add(volume);
ren2d.render();
ren2d.onShowtime = function() {
volume.windowHigh = 1;
}
ren2d.interactor.onMouseMove = showIJK;
ren2d.onScroll = showIJK;
function showIJK() {
var ijk = ren2d.xy2ijk(ren2d.interactor.mousePosition[0],ren2d.interactor.mousePosition[1]);
console.log(ijk);
document.getElementById('info').innerHTML = ijk;
}
};
</script>
<link rel="stylesheet" type="text/css" href="demo.css">
</head>
<body>
<div id='info' style='position:absolute;top:10px;left:10px;color:white;'>none</div>
</body>
</html>
Oops, something went wrong.

0 comments on commit 58b8aa0

Please sign in to comment.