index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    
    <title>Image Sequencer</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="content-type" content="text/html; charset=UTF8">

    <link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="node_modules/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="dist/image-sequencer.css" rel="stylesheet">

    <script src="node_modules/jquery/dist/jquery.min.js"></script>
    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="dist/image-sequencer.js"></script>

  </head>

  <body>

    <div class="header">

      <h1>Image Sequencer</h1>
      <h3>
        <a href="https://github.com/jywarren/image-sequencer"><i class="fa fa-github"></i></a>
      </h3>

    </div>

    <p style="display:none;" class="spinner"><i class="fa fa-spinner fa-spin"></i></p>

    <div class="panels">

      <div class="panel mod-image-select">
        <div id="drop">Drag image here</div>
        <p class="instructions">Select or drop an image here to begin.</p>
        <input id="file-select" type="file" />
      </div>

    </div>

    <div class="mod-new-panel">
      <form class="mod-new-panel">
        <p class="instructions">Add a new step</p>
        <select class="select-module form-control" style="margin-bottom:6px;">
          <option value="ndvi-red">NDVI with red filter</option>
          <option value="green-channel">Green channel</option>
          <option value="plot">Plot with colorbar</option>
          <option value="image-threshold">Threshold image</option>
        </select> 
        <p><button class="btn btn-default add-step">Add step</button></p>
      </form>
    </div>

    <div class="log">
      <h4>Log</h4>
    </div>

    <script>

      var sequencer;

      jQuery(document).ready(function($) {

        sequencer = ImageSequencer();

//        sequencer.loadImage('examples/grid.png');

        sequencer.addStep('ndvi-red');
        sequencer.addStep('image-threshold');
        //sequencer.addStep('plot');

        $('.add-step').click(function(e) {

          e.preventDefault();
          sequencer.addStep($('.select-module').val());
          sequencer.run();

        });

      });

    </script>

  </body>
</html>