Sign upLogin

publiclab/image-sequencer

View on GitHub
Star
examples/fisheye.html

Summary

Maintainability
Test Coverage
<!DOCTYPE html>
<html lang="en">
  <head>

    <title>Fisheye Removal | 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 rel="stylesheet" href="demo.css">

    <style media="screen">
      .r.18 {
        font-size: 18px !important;
      }
      .m {
        margin: 0 5px;
      }
      div.c.m {
        width: 100px;
      }
      .r span {
        width: 30px !important;
      }
      @media all and (max-width: 1000px) {
        div#main {
          flex-direction: column;
        }
      }
    </style>

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

  <body>

    <div class="wrapper">
      <header>
        <h2>Image Sequencer</h2>
        <h5>FisheyeGl Demo</h5>
      </header>

      <section class="rh">
        <div class="r">
          Drag the Slider to adjust values
        </div>
        <div class="r">
          Select an Image <input type="file" id="file" value="">
        </div>
        <div class="r" id="main">
          <div class="c">
            <img id="fisheye" src="" alt="">
          </div>
          <div class="c rh">
            <div class="r 18">
              <div class="c m 30">Fx:</div>
              <input class="c" name="Fx" type="range" min="0" max="2" step="0.01" value="0" />
              <span>0</span>
            </div>
            <div class="r 18">
              <div class="c m 30">Fy:</div>
              <input class="c" name="Fy" type="range" min="0" max="2" step="0.01" value="0" />
              <span>0</span>
            </div>
            <div class="r 18">
              <div class="c m 30">a:</div>
              <input class="c" name="a" type="range" min="0" max="4" step="0.01" value="1" />
              <span>1</span>
            </div>
            <div class="r 18">
              <div class="c m 30">b:</div>
              <input class="c" name="b" type="range" min="0" max="4" step="0.01" value="1" />
              <span>1</span>
            </div>
            <div class="r 18">
              <div class="c m 30">scale:</div>
              <input class="c" name="scale" type="range" min="0" max="20" step="0.01" value="1" />
              <span>1</span>
            </div>
            <div class="r 18">
              <div class="c m 30">FOV x:</div>
              <input class="c" name="x" type="range" min="0" max="2" step="0.01" value="1" />
              <span>1</span>
            </div>
            <div class="r 18">
              <div class="c m 30">FOV y:</div>
              <input class="c" name="y" type="range" min="0" max="2" step="0.01" value="1" />
              <span>1</span>
            </div>
          </div>
        </div>
      </section>

      <footer> <a href="https://github.com/publiclab/image-sequencer">View on GitHub</a> </footer>
    </div>

    <script type="text/javascript">
      window.onload = function() {
        sequencer = ImageSequencer();
        var image = document.querySelector('#fisheye');

        sequencer.setUI({
          onComplete: function(step){
            image.src = step.output;
          }
        });

        sequencer.loadImage('fisheye','images/grid.png',function(){
          this.addSteps('fisheye-gl').run();
        });

        var inputs = document.querySelectorAll('input[type="range"]')
        for(i in inputs)
        inputs[i].oninput = function(e) {
          e.target.nextSibling.nextSibling.innerHTML = e.target.value;
          sequencer.images.fisheye.steps[1].options[e.target.name] = e.target.value;
          sequencer.run(1);
        }

        document.querySelector('#file').onchange = function(e) {
          var file = e.target.files[0];

          if(!file) return;

          var reader = new FileReader();
          reader.onload = function() {
            sequencer.images.fisheye.steps[0].output.src = reader.result;
            sequencer.run(0);
          }
          reader.readAsDataURL(file);
        }
      }
    </script>

  </body>
</html>