Added Demo for FisheyeGl Module (#62)

* demo for FisheyeGl * demo for FisheyeGl - Bugfixes * Demo Created * Demo Created * Changed Title in Demo * Improved Demo * Organize examples directory, Recreate FisheyeGl Demo of fisheyegl using Image Sequencer UI * Modified tests
2025-12-16 13:20:01 +01:00 · 2017-08-07 02:11:12 +05:30
parent c90bf3fa0a
commit 14b1152e5a
20 changed files with 230 additions and 9 deletions
--- a/examples/Poiret
+++ b/examples/Poiret
--- a/examples/demo.css
+++ b/examples/demo.css
@@ -0,0 +1,74 @@
+@font-face {
+  font-family: "Poiret One";
+  src: url("Poiret One.woff2");
+}
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+  font-family: "Poiret One";
+}
+html, body {
+  min-height: 100vh;
+  width: 100vw;
+}
+body {
+  background: #fff;
+}
+.wrapper {
+  width: 100vw;
+  max-width: 1000px;
+  height: 100%;
+  min-height: 100vh;
+  margin: auto;
+  position: relative;
+}
+header {
+  position: relative;
+  height: 150px;
+  font-size: 45px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+footer {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-around;
+  padding: 10px 0;
+  font-size: 20px;
+}
+section {
+  position: relative;
+  width: 100%;
+  min-height: 100px;
+  padding: 10px 15px;
+  font-size: 25px;
+  margin-bottom: 50px;
+}
+.rh {
+  display: flex;
+  flex-direction: column;
+}
+section .r {
+  display: flex;
+  flex-direction: row;
+  flex: auto;
+  align-items: center;
+  justify-content: space-around;
+  margin: 10px;
+}
+section .c {
+  flex: auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+section span {
+  margin: 0 5px;
+}
--- a/examples/fisheye.html
+++ b/examples/fisheye.html
@@ -0,0 +1,136 @@
+<!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="../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>
--- a/examples/images/IS-QR.js
+++ b/examples/images/IS-QR.js
--- a/examples/images/IS-QR.png
+++ b/examples/images/IS-QR.png
--- a/examples/images/cyan.jpg
+++ b/examples/images/cyan.jpg
--- a/examples/images/grid.png
+++ b/examples/images/grid.png
--- a/examples/images/red.jpg
+++ b/examples/images/red.jpg
--- a/examples/images/red.png
+++ b/examples/images/red.png
--- a/examples/images/replace.jpg
+++ b/examples/images/replace.jpg
--- a/examples/images/test.gif
+++ b/examples/images/test.gif
--- a/examples/images/test.gif.js
+++ b/examples/images/test.gif.js
--- a/examples/images/test.png
+++ b/examples/images/test.png
--- a/examples/images/test.png.js
+++ b/examples/images/test.png.js
--- a/examples/replace.html
+++ b/examples/replace.html
@@ -33,7 +33,7 @@
    <div class="panels">

      <div class="panel ismod-image-select" style="display:flex;justify-content:center">
-        <img src="replace.jpg" id="pencils" style="cursor:pointer">
+        <img src="images/replace.jpg" id="pencils" style="cursor:pointer">
      </div>

    </div>
--- a/test/image-manip.js
+++ b/test/image-manip.js
@@ -10,9 +10,9 @@ require('../src/ImageSequencer.js');
 //require image files as DataURLs so they can be tested alike on browser and Node.
 var sequencer = ImageSequencer({ ui: false });

-var qr = require('../examples/IS-QR.js');
-var test_png = require('../examples/test.png.js');
-var test_gif = require('../examples/test.gif.js');
+var qr = require('./images/IS-QR.js');
+var test_png = require('./images/test.png.js');
+var test_gif = require('./images/test.gif.js');

 sequencer.loadImages(test_png);
 sequencer.addSteps(['do-nothing-pix','invert','invert']);
--- a/test/image-sequencer.js
+++ b/test/image-sequencer.js
@@ -42,16 +42,24 @@ test('loadImages loads a DataURL image and creates a step.', function (t){

 if(!sequencer.options.inBrowser)
  test('loadImage loads an image from URL and creates a step. (NodeJS)', function (t){
-    sequencer.loadImage('URL','https://ccpandhare.github.io/image-sequencer/examples/red.jpg', function(){
-      t.equal(sequencer.images.URL.steps.length, 1, "Initial Step Created");
-      t.equal(typeof(sequencer.images.URL.steps[0].output.src), "string", "Initial output exists");
-      t.end();
+    require('dns').resolve('www.github.com', function(err) {
+      if (err) {
+        console.log("Test aborted due to no internet");
+        t.end();
+      }
+      else {
+        sequencer.loadImage('URL','https://ccpandhare.github.io/image-sequencer/examples/images/red.jpg', function(){
+          t.equal(sequencer.images.URL.steps.length, 1, "Initial Step Created");
+          t.equal(typeof(sequencer.images.URL.steps[0].output.src), "string", "Initial output exists");
+          t.end();
+        });
+      }
    });
  });

 if(!sequencer.options.inBrowser)
  test('loadImages loads an image from PATH and creates a step. (NodeJS)', function (t){
-    sequencer.loadImages('examples/red.jpg');
+    sequencer.loadImages('examples/images/red.jpg');
    t.equal(sequencer.images.image1.steps.length, 1, "Initial Step Created");
    t.equal(typeof(sequencer.images.image1.steps[0].output.src), "string", "Initial output exists");
    t.end();
--- a/test/images/IS-QR.js
+++ b/test/images/IS-QR.js
--- a/test/images/test.gif.js
+++ b/test/images/test.gif.js
--- a/test/images/test.png.js
+++ b/test/images/test.png.js