XTK FileAPI Test

Test the HTML5 File API interface of XTK. author(s): XTK

HTML

<script src="http://get.goXTK.com/xtk_edge.js"></script>
<input id='filebutton' type='file' multiple onchange='read(this.files)' style='position:absolute;right:10px;top:10px'>

CSS

html, body { 
  background-color:#000;
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden !important;  
}

JavaScript

// 
// Reading files using the HTML5 FileReader.
//
function read(files) {

  // we support here max. 1 of the following
  //
  // volume (.nrrd,.mgz,.mgh)
  // labelmap (.nrrd,.mgz,.mgh)
  // colortable (.txt,.lut)
  // mesh (.stl,.vtk,.fsm,.smoothwm,.inflated,.sphere,.pial,.orig)
  // scalars (.crv)
  // fibers (.trk)
  
  //
  // the data holder for the scene
  // includes the file object, file data and valid extensions for each object
  var _data = {
    'volume': {
      'file': null,
      'filedata': null,
      'extensions': ['NRRD', 'MGZ', 'MGH']
    },
    'labelmap': {
      'file': null,
      'filedata': null,
      'extensions': ['NRRD', 'MGZ', 'MGH']
    },
    'colortable': {
      'file': null,
      'filedata': null,
      'extensions': ['TXT', 'LUT']
    },
    'mesh': {
      'file': null,
      'filedata': null,
      'extensions': ['STL', 'VTK', 'FSM', 'SMOOTHWM', 'INFLATED', 'SPHERE',
                     'PIAL', 'ORIG']
    },
    'scalars': {
      'file': null,
      'filedata': null,
      'extensions': ['CRV']
    },
    'fibers': {
      'file': null,
      'filedata': null,
      'extensions': ['TRK']
    },
  };
  

  for ( var i = 0; i < files.length; i++) {
    
    var f = files[i];
    var _fileName = f.name;
    var _fileExtension = _fileName.split('.').pop().toUpperCase();
    var _fileSize = f.size;
    
    // check which type of file it is
    if (_data['volume']['extensions'].indexOf(_fileExtension) >= 0) {
      
      // this can be either the volume or the labelmap
      
      // if we already have a volume, check if the current one is smaller
      // then, set it as a label map, else wise switch them
      if (_data['volume']['file']) {
        
        if (_data['volume']['file'].size < _fileSize) {
          // switcharoo
          _data['labelmap']['file'] = _data['volume']['file'];
          _data['volume']['file'] = f;
          
        } else {
          
          _data['labelmap']['file'] = f;
          
   ...