mirror of
https://github.com/publiclab/image-sequencer.git
synced 2025-12-12 03:10:03 +01:00
180 lines
4.7 KiB
HTML
180 lines
4.7 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html>
|
|
|
|
|
|
<head>
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta http-equiv="content-type" content="text/html; charset=UTF8">
|
|
|
|
<title>Image Sequencer</title>
|
|
|
|
<link rel="stylesheet" href="demo.css">
|
|
|
|
<script src="../dist/image-sequencer.js" charset="utf-8"></script>
|
|
|
|
<style media="screen">
|
|
#addStep select, button, #addStep input {
|
|
font-family: sans-serif;
|
|
font-size: 18px !important;
|
|
height: 30px !important;
|
|
}
|
|
.nomargin {
|
|
margin: 0 !important;
|
|
}
|
|
#steps img {
|
|
max-width: 90%;
|
|
}
|
|
</style>
|
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
|
<div class="wrapper">
|
|
|
|
<header>
|
|
<h2>Image Sequencer</h2>
|
|
<h5>Single Image Demo</h5>
|
|
</header>
|
|
|
|
<section id="steps" class="rh">
|
|
<div class="r">
|
|
Select an Image <input type="file" id="file" value="">
|
|
</div>
|
|
</section>
|
|
|
|
<section id="addStep">
|
|
<div class="r">
|
|
Add Step :
|
|
<select style="font-family: sans-serif; height: 30px">
|
|
<option value="none" disabled selected>Please Select</option>
|
|
<option value="crop">Crop</option>
|
|
<option value="decode-qr">Decode Qr</option>
|
|
<option value="fisheye-gl">Fisheye GL</option>
|
|
<option value="green-channel">Green Channel</option>
|
|
<option value="invert">Invert</option>
|
|
<option value="ndvi-red">NDVI Red</option>
|
|
<option value="segmented-colormap">Segmented Colormap</option>
|
|
</select>
|
|
<button type="button" name="add">Add Step</button>
|
|
</div>
|
|
<div class="r">
|
|
<div class="c">
|
|
Options:
|
|
</div>
|
|
<div class="c rh">
|
|
<div class="r">
|
|
<div class="c">
|
|
key:
|
|
</div>
|
|
<div class="c">
|
|
<input type="text" name="" value="" placeholder="default"/>
|
|
</div>
|
|
</div>
|
|
<div class="r">
|
|
<div class="c">
|
|
key:
|
|
</div>
|
|
<div class="c">
|
|
<input type="text" name="" value="" placeholder="default"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
</div>
|
|
|
|
<script type="text/javascript">
|
|
|
|
window.onload = function() {
|
|
|
|
|
|
var sequencer = ImageSequencer();
|
|
|
|
var steps = document.querySelector('#steps');
|
|
var parser = new DOMParser();
|
|
var reader = new FileReader();
|
|
initial = "images/grid.png";
|
|
|
|
sequencer.setUI({
|
|
|
|
onSetup: function(step) {
|
|
|
|
step.ui = '\
|
|
<div class="r">\
|
|
<div class="c">\
|
|
<img alt="" />\
|
|
</div>\
|
|
<div class="c rh details">\
|
|
<div class="r"><h4>'+step.name+'</h4></div>\
|
|
<div class="r nomargin">Width: x</div>\
|
|
<div class="r nomargin">Height: y</div>\
|
|
</div>\
|
|
</div>\
|
|
';
|
|
|
|
var removebutton =
|
|
'<div class="r"><button class="remove">Remove</button></div>';
|
|
|
|
step.ui = parser.parseFromString(step.ui,'text/html');
|
|
step.ui = step.ui.querySelector('div.r');
|
|
step.imgElement = step.ui.querySelector('img');
|
|
|
|
if(step.name != "load-image")
|
|
step.ui.querySelector('div.details').appendChild(
|
|
parser.parseFromString(removebutton,'text/html')
|
|
.querySelector('div')
|
|
);
|
|
|
|
steps.appendChild(step.ui);
|
|
},
|
|
|
|
onComplete: function(step) {
|
|
step.imgElement.src = step.output;
|
|
},
|
|
|
|
onRemove: function(step) {
|
|
step.ui.remove();
|
|
}
|
|
|
|
});
|
|
|
|
sequencer.loadImage('images/grid.png',function(){
|
|
this.addSteps('crop').run();
|
|
});
|
|
|
|
$('#addStep button').on('click',function(){
|
|
if($('#addStep select').val()=="none") return;
|
|
sequencer.addSteps($('#addStep select').val()).run();
|
|
});
|
|
|
|
$('body').on('click','button.remove',function(){
|
|
var index = $('button.remove').index(this) + 1;
|
|
sequencer.removeSteps(index).run();
|
|
});
|
|
|
|
$('#file').on('change',function(e){
|
|
var file = e.target.files[0];
|
|
if(!file) return;
|
|
|
|
reader.onload = function(){
|
|
var loadStep = sequencer.images.image1.steps[0];
|
|
loadStep.output.src = reader.result;
|
|
sequencer.run(0);
|
|
loadStep.options.step.imgElement.src = reader.result;
|
|
}
|
|
|
|
reader.readAsDataURL(file);
|
|
});
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
|
|
|
|
</html>
|