examples/simpleSpinner.html

<html>
<head>
  <title>Simple Spinner</title>
  <link rel='stylesheet' href='css/main.css'/>

</head>
<body>
  <div id="header">
    <a href="https://github.com/Pixpipe/quickvoxelcore"><img src='../assets/images/qv_logo_horizontal.png'/></a>
    <div class="description">
      Quickvoxel Core provides some events such as <code>startAddingVolume</code> and <code>volumeReady</code>, giving the possibility to show and hide a spinner based on the loading and processing stage or the data
      &bull;
      <a id="sourcelink" href="">source</a>
    </div>
  </div>

  <!-- This one is not related to Quickvoxel, just to auto update the link to the Github source -->
  <script src="js/addsourcelink.js"></script>

  <!-- Loading Quickvoxel Core -->
  <script src="../dist/quickvoxelcore.es6.js"></script>

  <img id="spinner" src="images/lego_spinner.gif"/>
  <canvas id="renderCanvas"></canvas>

  <script>

    // test compatibility with WebGL2
    if (!quickvoxelcore.webGL2()){
      alert( 'Quickvoxel Core cannot run here because this web browser is not compatible with WebGL2.' )
    } else {
      main()
    }


  function main () {
    let canvas = document.getElementById("renderCanvas")
    let spinner = document.getElementById('spinner')

    // the QuickvoxelCore instance is the entry point
    let qvc = new quickvoxelcore.QuickvoxelCore( canvas );
    // for future access to the volume collection
    let volumeCollection = qvc.getVolumeCollection();
    // for future access the render engine
    let renderEngine = qvc.getRenderEngine();

    // events must be declared before adding a volume!


    volumeCollection.on("startAddingVolume", function(volume){
      // showing the loading spinner
      spinner.style.display = 'initial'
    })

    // mount the volume when it's ready!
    volumeCollection.on("volumeReady", function(volume){
      // hiding the loading spinner
      spinner.style.display = 'none'

      let couldMount = renderEngine.mountVolumeOnFirstEmptySlot( volume )
      if( !couldMount ){
        console.log("All volume slots are taken on the render engine, make some space before rendering this volume.");
      }
    })

    volumeCollection.addVolumeFromUrl( "../data/structural.nii.gz" );
  }

  </script>

</body>
</html>