mirror of
https://github.com/publiclab/image-sequencer.git
synced 2025-12-12 11:20:02 +01:00
222 lines
6.9 KiB
HTML
222 lines
6.9 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-fluid">
|
|
|
|
<header class="text-center">
|
|
<h1>Image Sequencer</h1>
|
|
<h3>
|
|
<a href="https://github.com/publiclab/image-sequencer"><i class="fa fa-github"></i></a>
|
|
</h3>
|
|
</header>
|
|
|
|
<div id="imageSelect">
|
|
<p><i>Select an image to start with!</i></p>
|
|
<center><input type="file" id="file" value=""></center>
|
|
</div>
|
|
|
|
<section id="steps" class="row"></section>
|
|
|
|
<section id="addStep">
|
|
<div class="row">
|
|
<select class="form-control">
|
|
<option value="none" disabled selected>Select a new step...</option>
|
|
</select>
|
|
</div>
|
|
<hr />
|
|
<div class="row">
|
|
<div id="options"></div>
|
|
</div>
|
|
<div class="row add">
|
|
<button class="btn btn-success btn-lg" name="add">Add Step</button>
|
|
</div>
|
|
</section>
|
|
|
|
</div>
|
|
|
|
<script type="text/javascript">
|
|
|
|
// Initialize Image Sequencer
|
|
var sequencer = ImageSequencer();
|
|
|
|
window.onload = function() {
|
|
|
|
// Load information of all modules (Name, Inputs, Outputs)
|
|
var modulesInfo = sequencer.modulesInfo();
|
|
|
|
// Add modules to the addStep dropdown
|
|
for(var m in modulesInfo) {
|
|
$('#addStep select').append(
|
|
'<option value="'+m+'">'+modulesInfo[m].name+'</option>'
|
|
);
|
|
}
|
|
|
|
// Initial definitions
|
|
var steps = document.querySelector('#steps');
|
|
var parser = new DOMParser();
|
|
var reader = new FileReader();
|
|
initial = "images/grid.png";
|
|
|
|
// Set the UI in sequencer. This Will generate HTML based on
|
|
// Image Sequencer events :
|
|
// onSetup : Called every time a step is added
|
|
// onDraw : Called every time a step starts draw
|
|
// onComplete : Called every time a step finishes drawing
|
|
// onRemove : Called everytime a step is removed
|
|
// The variable 'step' stores useful data like input and
|
|
// output values, step information.
|
|
// See documetation for more details.
|
|
sequencer.setUI({
|
|
|
|
onSetup: function(step) {
|
|
|
|
step.ui = '\
|
|
<div class="row step">\
|
|
<div class="col-md-4 details">\
|
|
<h3>'+step.name+'</h3>\
|
|
<p><i>'+(step.description || '')+'</i></p>\
|
|
</div>\
|
|
<div class="col-md-8">\
|
|
<img alt="" class="img-thumbnail"/>\
|
|
</div>\
|
|
</div>\
|
|
';
|
|
|
|
var tools =
|
|
'<div class="tools btn-group">\
|
|
<button confirm="Are you sure?" class="remove btn btn-xs btn-default">\
|
|
<i class="fa fa-trash"></i>\
|
|
</button>\
|
|
</div>';
|
|
|
|
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;
|
|
var outputs = sequencer.modulesInfo(step.name).outputs;
|
|
var io = Object.assign(inputs,outputs);
|
|
for (var i in io) {
|
|
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').appendChild(
|
|
parser.parseFromString(tools,'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;
|
|
var outputs = sequencer.modulesInfo(step.name).outputs;
|
|
for (var i in inputs) {
|
|
step.ui.querySelector('div[name="'+i+'"] span')
|
|
.innerHTML = step.options[i];
|
|
}
|
|
for (var i in outputs) {
|
|
step.ui.querySelector('div[name="'+i+'"] span')
|
|
.innerHTML = step[i];
|
|
}
|
|
}
|
|
|
|
},
|
|
|
|
onRemove: function(step) {
|
|
step.ui.remove();
|
|
}
|
|
|
|
});
|
|
|
|
sequencer.loadImage('images/grid.png',function(){
|
|
this.addSteps('invert').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-5 labels">\
|
|
'+input+':\
|
|
</div>\
|
|
<div class="col-md-5">\
|
|
<input class="form-control" 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>
|