AMI - Lesson 00

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

by nicolasrannou

HTML

<input type="file" id="filesinput" multiple>
<div id="container"></div>




<!-- We load the scripts here because JSFIddle external resources are loaded
in random order, which is problematic because AMI relies on THREEJS to be
loaded -->
<!-- Tools -->
<script src="//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://cdn.rawgit.com/fnndsc/vjs/master/external/scripts/babel/polyfill.min.js"></script>
<!-- THREEJS -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r75/three.min.js"></script>
<!-- AMI -->
<script type="text/javascript" src="https://cdn.rawgit.com/fnndsc/ami/dev/dist/ami.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 Stats, dat, 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');
var loader = new LoadersVolume(container);
var seriesContainer = [];

// once all files have been loaded (fetch + parse + add to array)
// merge them into series / stacks / frames
function handleSeries() {
  loader.free();
  loader = null;

  // merge files into clean series/stack/frame structure
  var series = seriesContainer[0].mergeSeries(seriesContainer);

  // series/stacks/frames are ready to be used
  window.console.log(series);
};
  
function readMultipleFiles(evt) {
  // hide the upload button
  if (evt.target.files.length) {
    document.getElementById('filesinput').style.display = 'none';
  }

  function loadSequence(index, files) {
    return Promise.resolve()
      // load the file
      .then(function() {
        return new Promise(function(resolve, reject) {
          let myReader = new FileReader();
          // should handle errors too...
          myReader.addEventListener('load', function(e) {
            resolve(e.target.result);
          });
          myReader.readAsArrayBuffer(files[index]);
        });
      })
      .then(function(buffer) {
        return loader.parse({url: files[index].name, buffer});
      })
      .then(function(series) {
        seriesContainer.push(series);
      })
      .catch(function(error) {
        window.console.log('oops... something went wrong...');
        window.console.log(error);
      });
    }

    let loadSequenceContainer = [];
    for (let i = 0; i < evt.target.files.length; i++) {
      loadSequenceContainer.push(
        loadSequence(i, evt.target.files)
      );
    }

    // run the load sequence
    // load sequence for all files
    Promise
    .all(loadSequenceContainer)
    .then(function() {
      handleSeries(seriesContainer);
    })
    .catch(function(error) {
     ...