mirror of
https://github.com/publiclab/image-sequencer.git
synced 2025-12-09 09:49:58 +01:00
138 lines
4.0 KiB
HTML
138 lines
4.0 KiB
HTML
<!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>
|