mirror of
https://github.com/publiclab/image-sequencer.git
synced 2025-12-12 03:10:03 +01:00
207 lines
5.5 KiB
HTML
207 lines
5.5 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>
|
|
</select>
|
|
<button type="button" name="add">Add Step</button>
|
|
</div>
|
|
<div class="r">
|
|
<div class="c">
|
|
Options:
|
|
</div>
|
|
<div id="options" class="c rh">
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
</div>
|
|
|
|
<script type="text/javascript">
|
|
|
|
var sequencer = ImageSequencer();
|
|
|
|
window.onload = function() {
|
|
|
|
var modulesInfo = sequencer.modulesInfo();
|
|
|
|
for(var m in modulesInfo) {
|
|
if(m!="do-nothing" && m!="do-nothing-pix")
|
|
$('#addStep select').append(
|
|
'<option value="'+m+'">'+modulesInfo[m].name+'</option>'
|
|
);
|
|
}
|
|
|
|
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>\
|
|
</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(sequencer.modulesInfo().hasOwnProperty(step.name)) {
|
|
var inputs = sequencer.modulesInfo(step.name).inputs;
|
|
for (var i in inputs) {
|
|
var div = document.createElement('div');
|
|
div.className = "r nomargin";
|
|
div.setAttribute('name',i);
|
|
div.innerHTML = i + ": " + "<span></span>";
|
|
step.ui.querySelector('div.details').appendChild(div);
|
|
}
|
|
}
|
|
|
|
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;
|
|
|
|
if(sequencer.modulesInfo().hasOwnProperty(step.name)) {
|
|
var inputs = sequencer.modulesInfo(step.name).inputs;
|
|
for (var i in inputs) {
|
|
step.ui.querySelector('div[name="'+i+'"] span')
|
|
.innerHTML = step.options[i];
|
|
}
|
|
}
|
|
|
|
},
|
|
|
|
onRemove: function(step) {
|
|
step.ui.remove();
|
|
}
|
|
|
|
});
|
|
|
|
sequencer.loadImage('images/grid.png',function(){
|
|
this.addSteps('crop').run();
|
|
});
|
|
|
|
$('#addStep select').on('change', function(){
|
|
$('#options').html('');
|
|
var m = $('#addStep select').val();
|
|
for(var input in modulesInfo[m].inputs) {
|
|
$('#options').append(
|
|
'<div class="r">\
|
|
<div class="c">\
|
|
'+input+':\
|
|
</div>\
|
|
<div class="c">\
|
|
<input type="text" name="'+input+'" value="" placeholder="'+
|
|
modulesInfo[m].inputs[input].default+'"/>\
|
|
</div>\
|
|
</div>'
|
|
);
|
|
}
|
|
});
|
|
|
|
$('#addStep button').on('click',function(){
|
|
var options = {};
|
|
var inputs = $('#options input');
|
|
$.each(inputs, function() {
|
|
options[this.name] = $(this).val();
|
|
});
|
|
if($('#addStep select').val()=="none") return;
|
|
sequencer.addSteps($('#addStep select').val(),options).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>
|