Permalink
Browse files

Add 13a to demonstrate weird behavior when using 'shift+mousemove' on…

… 2d.
  • Loading branch information...
haehn committed Sep 20, 2013
1 parent 2270f09 commit b9d5954f8317f9392551d172e434c03361640c26
Showing with 187 additions and 0 deletions.
  1. +7 −0 13a/demo.css
  2. +9 −0 13a/demo.details
  3. +9 −0 13a/demo.html
  4. +112 −0 13a/demo.js
  5. +50 −0 13a/index.html
  6. BIN 13a/volume.nii
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,112 @@
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 = 'volume.nii';
// we also attach a label map to show segmentations on a slice-by-slice base
//volume.labelmap.file = 'http://x.babymri.org/?seg.nrrd';
// .. and use a color table to map the label map values to colors
//volume.labelmap.colortable.file = 'http://x.babymri.org/?genericanatomy.txt';
// 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();
}
// 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.range[0] - 1);
var sliceYController = volumegui.add(volume, 'indexY', 0,
volume.range[1] - 1);
var sliceZController = volumegui.add(volume, 'indexZ', 0,
volume.range[2] - 1);
volumegui.open();
};
};
View
@@ -0,0 +1,50 @@
<!--
/*
*
* 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="http://get.goXTK.com/xtk_edge.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>
<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>
<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
Binary file not shown.

0 comments on commit b9d5954

Please sign in to comment.