load-from-url.html

<html>
  <head>
    <title>Flapjack Bytes</title>
    <meta charset="UTF-8">
  </head>
  <body>
      <div>
        <div>
          <label for="mapfile">Map file:</label>
          <input type="text" id="mapfile" name="mapfile" value="http://bioinf.hutton.ac.uk/flapjack/sample-data/tutorials/ped-ver-tutorial.map">
        </div>
        <div>
          <label for="genofile">Genotype file:</label>
          <input type="text" id="genofile" name="genofile" value="http://bioinf.hutton.ac.uk/flapjack/sample-data/tutorials/ped-ver-tutorial.dat">
        </div>
        <div>
          <label for="phenofile">Phenotype file:</label>
          <input type="text" id="phenofile" name="phenofile">
        </div>
        <input type="submit" action="#" id="submit" name="submit" value="Submit">
      </div>
      <div id="canvas-holder">
        <!-- Empty div that we can insert a canvas into from javascript. -->
      </div>
      <script src="build/flapjack-bytes.js"></script>
      <script type="text/javascript">
        document.addEventListener("DOMContentLoaded", function(){
          document.getElementById("submit").addEventListener("click", function(){
            var renderer = GenotypeRenderer();
            renderer.renderGenotypesUrl({
              domParent: "canvas-holder",
              width: 800,
              height: 600,
              mapFileURL: document.getElementById('mapfile').value,
              genotypeFileURL: document.getElementById('genofile').value,
              phenotypeFileURL: document.getElementById('phenofile').value,
            });
            return false;
          });
      });
      </script>
  </body>
</html>