mirror of
https://github.com/publiclab/image-sequencer.git
synced 2025-12-11 19:00:00 +01:00
url hash initial implementation (#125)
* url hash initial implementation * completed url hash UI
This commit is contained in:
Jeffrey Warren
GitHub
207
examples/demo.js
Normal file
207
examples/demo.js
Normal file
@@ -0,0 +1,207 @@
|
||||
window.onload = function() {
|
||||
|
||||
sequencer = ImageSequencer();
|
||||
|
||||
// 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 loadImageUI(){
|
||||
|
||||
// look up needed steps from Url Hash:
|
||||
var stepsFromHash = getUrlHashParameter('steps').split(',')
|
||||
stepsFromHash.forEach(function eachStep(step) {
|
||||
sequencer.addSteps(step)
|
||||
});
|
||||
sequencer.run();
|
||||
|
||||
});
|
||||
|
||||
|
||||
// File handling
|
||||
|
||||
$('#addStep select').on('change', selectNewStepUI);
|
||||
|
||||
function selectNewStepUI() {
|
||||
$('#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>'
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function addStepUI() {
|
||||
var options = {};
|
||||
var inputs = $('#options input');
|
||||
$.each(inputs, function() {
|
||||
options[this.name] = $(this).val();
|
||||
});
|
||||
if($('#addStep select').val()=="none") return;
|
||||
// add to URL hash too
|
||||
setUrlHashParameter('steps', getUrlHashParameter('steps') + ',' + $('#addStep select').val())
|
||||
sequencer.addSteps($('#addStep select').val(),options).run();
|
||||
}
|
||||
|
||||
$('#addStep button').on('click', addStepUI);
|
||||
|
||||
|
||||
function removeStepUI(){
|
||||
var index = $('button.remove').index(this) + 1;
|
||||
sequencer.removeSteps(index).run();
|
||||
// remove from URL hash too
|
||||
var urlHash = getUrlHashParameter('steps').split(',');
|
||||
urlHash.splice(index - 1, 1);
|
||||
setUrlHashParameter("steps", urlHash.join(','));
|
||||
}
|
||||
|
||||
$('body').on('click','button.remove', removeStepUI);
|
||||
|
||||
|
||||
// File handling
|
||||
|
||||
function handleFile(e) {
|
||||
|
||||
e.preventDefault();
|
||||
e.stopPropagation(); // stops the browser from redirecting.
|
||||
|
||||
if (e.target && e.target.files) var file = e.target.files[0];
|
||||
else var file = e.dataTransfer.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);
|
||||
}
|
||||
|
||||
$('#file').on('change', handleFile);
|
||||
|
||||
var select = $('#imageSelect');
|
||||
|
||||
select[0].addEventListener('drop', handleFile, false);
|
||||
|
||||
select.on('dragover', function(e) {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
e.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
|
||||
}, false);
|
||||
|
||||
select.on('dragenter', function(e) {
|
||||
select.addClass('hover');
|
||||
});
|
||||
|
||||
select.on('dragleave', function(e) {
|
||||
select.removeClass('hover');
|
||||
});
|
||||
|
||||
}
|
||||
@@ -17,6 +17,8 @@
|
||||
<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>
|
||||
<script src="lib/urlHash.js" charset="utf-8"></script>
|
||||
<script src="demo.js" charset="utf-8"></script>
|
||||
|
||||
</head>
|
||||
|
||||
@@ -58,187 +60,8 @@
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
// Initialize Image Sequencer
|
||||
var sequencer = ImageSequencer();
|
||||
var sequencer;
|
||||
|
||||
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();
|
||||
});
|
||||
|
||||
function handleFile(e) {
|
||||
|
||||
e.preventDefault();
|
||||
e.stopPropagation(); // stops the browser from redirecting.
|
||||
|
||||
if (e.target && e.target.files) var file = e.target.files[0];
|
||||
else var file = e.dataTransfer.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);
|
||||
}
|
||||
|
||||
$('#file').on('change', handleFile);
|
||||
|
||||
var select = $('#imageSelect');
|
||||
|
||||
select[0].addEventListener('drop', handleFile, false);
|
||||
|
||||
select.on('dragover', function(e) {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
e.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
|
||||
}, false);
|
||||
|
||||
select.on('dragenter', function(e) {
|
||||
select.addClass('hover');
|
||||
});
|
||||
|
||||
select.on('dragleave', function(e) {
|
||||
select.removeClass('hover');
|
||||
});
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
42
examples/lib/urlHash.js
Normal file
42
examples/lib/urlHash.js
Normal file
@@ -0,0 +1,42 @@
|
||||
function getUrlHashParameter(param) {
|
||||
|
||||
var params = getUrlHashParameters();
|
||||
return params[param];
|
||||
|
||||
}
|
||||
|
||||
function getUrlHashParameters() {
|
||||
|
||||
var sPageURL = window.location.hash;
|
||||
if (sPageURL) sPageURL = sPageURL.split('#')[1];
|
||||
var pairs = sPageURL.split('&');
|
||||
var object = {};
|
||||
pairs.forEach(function(pair, i) {
|
||||
pair = pair.split('=');
|
||||
if (pair[0] != '') object[pair[0]] = pair[1];
|
||||
});
|
||||
return object;
|
||||
}
|
||||
|
||||
// accepts an object like { paramName: value, paramName1: value }
|
||||
// and transforms to: url.com#paramName=value¶mName1=value
|
||||
function setUrlHashParameters(params) {
|
||||
|
||||
var keys = Object.keys(params);
|
||||
var values = Object.values(params);
|
||||
var pairs = [];
|
||||
keys.forEach(function(key, i) {
|
||||
if (key != '') pairs.push(keys[i] + '=' + values[i]);
|
||||
});
|
||||
var hash = pairs.join('&');
|
||||
window.location.hash = hash;
|
||||
|
||||
}
|
||||
|
||||
function setUrlHashParameter(param, value) {
|
||||
|
||||
var params = getUrlHashParameters();
|
||||
params[param] = value;
|
||||
setUrlHashParameters(params);
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user