mirror of
https://github.com/publiclab/image-sequencer.git
synced 2025-12-12 03:10:03 +01:00
197 lines
5.7 KiB
HTML
197 lines
5.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 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 rel="stylesheet" href="demo.css">
|
|
|
|
<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" charset="utf-8"></script>
|
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
|
<div class="container">
|
|
|
|
<header class="jumbotron text-center">
|
|
<h1>Image Sequencer</h1>
|
|
<p><h3>Select an image to start with!</h3></p>
|
|
<center><input type="file" id="file" value=""></center>
|
|
</header>
|
|
|
|
<section id="steps" class="row">
|
|
</section>
|
|
|
|
<section id="addStep" class="jumbotron text-center">
|
|
<div class="row">
|
|
<h4>Add Step :</h4>
|
|
<select style="font-family: sans-serif; height: 30px">
|
|
<option value="none" disabled selected>Please Select</option>
|
|
</select>
|
|
</div>
|
|
<div class="row">
|
|
<div>
|
|
<h4>Options:</h4>
|
|
</div>
|
|
<div id="options" class="form-horizontal">
|
|
</div>
|
|
</div>
|
|
<div class="row" style="margin: 5px">
|
|
<button class="btn btn-success btn-lg" name="add">Add Step</button>
|
|
</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="row">\
|
|
<div>\
|
|
<img alt="" class="img-thumbnail"/>\
|
|
</div>\
|
|
<div class="details">\
|
|
<h2>'+step.name+' </h2>\
|
|
</div>\
|
|
</div>\
|
|
';
|
|
|
|
var removebutton =
|
|
'<button class="remove btn btn-danger">X</button>';
|
|
|
|
step.ui = parser.parseFromString(step.ui,'text/html');
|
|
step.ui = step.ui.querySelector('div.row');
|
|
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 = "row";
|
|
div.setAttribute('name',i);
|
|
div.innerHTML = "<div class='det'>" + i + ": " + "<span></span></div>";
|
|
step.ui.querySelector('div.details').appendChild(div);
|
|
}
|
|
}
|
|
|
|
if(step.name != "load-image")
|
|
step.ui.querySelector('div.details h2').appendChild(
|
|
parser.parseFromString(removebutton,'text/html')
|
|
.querySelector('button')
|
|
);
|
|
|
|
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="row">\
|
|
<div class="col-md-2">\
|
|
'+input+':\
|
|
</div>\
|
|
<div class="col-md-2">\
|
|
<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>
|