AMI - Lesson 00

Load data. author(s): Nicolas Rannou (github)

by nicolasrannou

HTML

<div id="container"></div>


<!-- Tools -->
<script src="https://use.edgefonts.net/source-code-pro.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/dataarts/dat.gui/master/build/dat.gui.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/mrdoob/stats.js/master/build/stats.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.16.0/polyfill.min.js"></script>

<!-- THREEJS -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r83/three.min.js"></script>


<!-- AMI CDN -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ami.js//0.0.15/ami.min.js"></script>
        
      

<!-- ANALYTICS -->
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-39303022-3', 'auto');
  var page = '/ami/lessons/00';
  ga('send', 'pageview', page);

</script>

CSS

body{
  font-family: source-code-pro, sans-serif;
  color:#F9F9F9;
  background-color: #353535
}

.indent{
  padding-left: 8px;
}

.series{
  color: #F44336;
}

.stack{
  color:#8BC34A;
}

.frame{
  color:#FFEB3B;
}

JavaScript

/* globals AMI*/

// VJS classes we will be using in this lesson
var LoadersVolume = AMI.default.Loaders.Volume;

// element to contain the progress bar
var container = document.getElementById('container');

// instantiate the loader
var loader = new LoadersVolume(container);

var t2 = ['36444280', '36444294', '36444308', '36444322', '36444336'];
var files = t2.map(function(v) {
    return 'https://cdn.rawgit.com/FNNDSC/data/master/dicom/adi_brain/' + v;
  });

// once all files have been loaded (fetch + parse + add to array)
// merge them into series / stacks / frames
loader.load(files)
.then(function() {
    // merge files into clean series/stack/frame structure
    var series = loader.data[0].mergeSeries(loader.data);
    loader.free();
    loader = null;

    // series/stacks/frames are ready to be used
    window.console.log(series);

    // Display some content on the DOM
    var seriesIndex = 1;
    for(var mySeries of series) {
      var seriesDiv = document.createElement('div');
      seriesDiv.className += 'indent';
      seriesDiv.insertAdjacentHTML('beforeend',
        '<div> SERIES (' + seriesIndex + '/' + series.length + ')</div>');
      seriesDiv.insertAdjacentHTML('beforeend',
        '<div class="series"> numberOfChannels: '
        + mySeries.numberOfChannels+ '</div>');

      container.appendChild(seriesDiv);

      // loop through stacks
      var stackIndex = 1;
      for(var myStack of mySeries.stack) {
        var stackDiv = document.createElement('div');
        stackDiv.className += 'indent';
        stackDiv.insertAdjacentHTML('beforeend',
          '<div> STACK (' + stackIndex + '/'
          + mySeries.stack.length + ')</div>');
        stackDiv.insertAdjacentHTML('beforeend',
          '<div class="stack"> bitsAllocated: '
          + myStack.bitsAllocated+ '</div>');

        seriesDiv.appendChild(stackDiv);

        // loop through frames
        var frameIndex = 1;
        for(var myFrame of myStack.frame) {
          var...