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
Chinmay Pandhare
Jeffrey Warren
BIN
examples/Poiret One.woff2
Normal file
74
examples/demo.css
Normal file
@@ -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;
|
||||||
|
}
|
||||||
136
examples/fisheye.html
Normal file
@@ -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>
|
||||||
|
Before Width: | Height: | Size: 29 KiB After Width: | Height: | Size: 29 KiB |
|
Before Width: | Height: | Size: 621 B After Width: | Height: | Size: 621 B |
|
Before Width: | Height: | Size: 26 KiB After Width: | Height: | Size: 26 KiB |
|
Before Width: | Height: | Size: 288 B After Width: | Height: | Size: 288 B |
|
Before Width: | Height: | Size: 277 B After Width: | Height: | Size: 277 B |
|
Before Width: | Height: | Size: 8.9 KiB After Width: | Height: | Size: 8.9 KiB |
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 112 KiB After Width: | Height: | Size: 112 KiB |
@@ -33,7 +33,7 @@
|
|||||||
<div class="panels">
|
<div class="panels">
|
||||||
|
|
||||||
<div class="panel ismod-image-select" style="display:flex;justify-content:center">
|
<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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -10,9 +10,9 @@ require('../src/ImageSequencer.js');
|
|||||||
//require image files as DataURLs so they can be tested alike on browser and Node.
|
//require image files as DataURLs so they can be tested alike on browser and Node.
|
||||||
var sequencer = ImageSequencer({ ui: false });
|
var sequencer = ImageSequencer({ ui: false });
|
||||||
|
|
||||||
var qr = require('../examples/IS-QR.js');
|
var qr = require('./images/IS-QR.js');
|
||||||
var test_png = require('../examples/test.png.js');
|
var test_png = require('./images/test.png.js');
|
||||||
var test_gif = require('../examples/test.gif.js');
|
var test_gif = require('./images/test.gif.js');
|
||||||
|
|
||||||
sequencer.loadImages(test_png);
|
sequencer.loadImages(test_png);
|
||||||
sequencer.addSteps(['do-nothing-pix','invert','invert']);
|
sequencer.addSteps(['do-nothing-pix','invert','invert']);
|
||||||
|
|||||||
@@ -42,16 +42,24 @@ test('loadImages loads a DataURL image and creates a step.', function (t){
|
|||||||
|
|
||||||
if(!sequencer.options.inBrowser)
|
if(!sequencer.options.inBrowser)
|
||||||
test('loadImage loads an image from URL and creates a step. (NodeJS)', function (t){
|
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(){
|
require('dns').resolve('www.github.com', function(err) {
|
||||||
t.equal(sequencer.images.URL.steps.length, 1, "Initial Step Created");
|
if (err) {
|
||||||
t.equal(typeof(sequencer.images.URL.steps[0].output.src), "string", "Initial output exists");
|
console.log("Test aborted due to no internet");
|
||||||
t.end();
|
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)
|
if(!sequencer.options.inBrowser)
|
||||||
test('loadImages loads an image from PATH and creates a step. (NodeJS)', function (t){
|
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(sequencer.images.image1.steps.length, 1, "Initial Step Created");
|
||||||
t.equal(typeof(sequencer.images.image1.steps[0].output.src), "string", "Initial output exists");
|
t.equal(typeof(sequencer.images.image1.steps[0].output.src), "string", "Initial output exists");
|
||||||
t.end();
|
t.end();
|
||||||
|
|||||||
