Organize examples directory, Recreate FisheyeGl Demo of fisheyegl using Image Sequencer UI
Chinmay Pandhare
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;
|
||||
}
|
||||
@@ -7,81 +7,129 @@
|
||||
<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">
|
||||
<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="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||
<script src="../dist/image-sequencer.js"></script>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="header">
|
||||
<div class="wrapper">
|
||||
<header>
|
||||
<h2>Image Sequencer</h2>
|
||||
<h5>FisheyeGl Demo</h5>
|
||||
</header>
|
||||
|
||||
<h1>Image Sequencer</h1>
|
||||
<h3>
|
||||
<a href="https://github.com/publiclab/image-sequencer"><i class="fa fa-github"></i></a>
|
||||
</h3>
|
||||
<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>
|
||||
|
||||
<p style="display:none;" class="spinner"><i class="fa fa-spinner fa-spin"></i></p>
|
||||
<script type="text/javascript">
|
||||
window.onload = function() {
|
||||
sequencer = ImageSequencer();
|
||||
var image = document.querySelector('#fisheye');
|
||||
|
||||
<div class="panels">
|
||||
|
||||
<div class="panel ismod-image-select" style="display:flex;justify-content:center">
|
||||
<img src="grid.png" id="grid" style="cursor:pointer" class="original">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="mod-new-panel" style="display:flex;justify-content:center">
|
||||
<p class="lead" style="text-align:center">
|
||||
Click on the image above to remove the FishEye Effect<br>
|
||||
(This may take a few seconds)</p>
|
||||
</div>
|
||||
|
||||
<!-- <div class="log">
|
||||
<h4>var sequencer = new ImageSequencer();</h4><br>
|
||||
<h4>sequencer.replaceImage('#pencils','invert');</h4>
|
||||
</div> -->
|
||||
|
||||
<script>
|
||||
|
||||
var canvas = document.createElement('canvas');
|
||||
var context = canvas.getContext('2d');
|
||||
var image = document.querySelector('#grid');
|
||||
var insrc;
|
||||
image.onload = function() {
|
||||
canvas.width = image.naturalWidth;
|
||||
canvas.height = image.naturalHeight;
|
||||
context.drawImage(image,0,0);
|
||||
insrc = canvas.toDataURL();
|
||||
image.onload = null;
|
||||
image.height = image.width * 99 / 130; // Android Chrome Fix
|
||||
sequencer.setUI({
|
||||
onComplete: function(step){
|
||||
image.src = step.output;
|
||||
}
|
||||
var desc = document.querySelector(".lead");
|
||||
const text = desc.innerHTML;
|
||||
|
||||
var sequencer = ImageSequencer();
|
||||
image.onclick = function() {
|
||||
if (desc.innerHTML == text) {
|
||||
sequencer.loadImage(insrc)
|
||||
.addSteps('fisheye-gl',{Fx:0.04,Fy:0.11,scale:1.1})
|
||||
.run(function(out){
|
||||
image.src = out;
|
||||
});
|
||||
desc.innerHTML = "Click on image to restore original";
|
||||
}
|
||||
else {
|
||||
image.src = "grid.png";
|
||||
desc.innerHTML = text;
|
||||
}
|
||||
|
||||
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>
|
||||
|
||||
|
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="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>
|
||||
|
||||