eessppeelllloo/image-sequencer
1
0
Fork 0
mirror of https://github.com/publiclab/image-sequencer.git synced 2025-12-17 05:40:00 +01:00
Code Issues Packages Projects Releases Wiki Activity

built

Browse Source
This commit is contained in:
jywarren
2019-06-15 14:44:49 -04:00
parent b7795aba4d
commit 8c47bde9ba
4 changed files with 648 additions and 466 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
dist/image-sequencer-ui.js vendored
View File

@@ -47,7 +47,7 @@ window.onload = function() {
$(':root').animate({scrollTop: 0}); $(':root').animate({scrollTop: 0});
} }
$('#move-up').on('click',topFunction); $('#move-up').on('click', topFunction);
// UI for each step: // UI for each step:
@@ -64,14 +64,14 @@ window.onload = function() {
} }
var resetSequence = function(){ var resetSequence = function(){
var r=confirm('Do you want to reset the sequence?'); var r = confirm('Do you want to reset the sequence?');
if (r) if (r)
window.location = '/'; window.location = '/';
}; };
$('#addStep select').on('change', ui.selectNewStepUi); $('#addStep select').on('change', ui.selectNewStepUi);
$('#addStep #add-step-btn').on('click', ui.addStepUi); $('#addStep #add-step-btn').on('click', ui.addStepUi);
$('#resetButton').on('click',resetSequence); $('#resetButton').on('click', resetSequence);
//Module button radio selection //Module button radio selection
$('.radio-group .radio').on('click', function() { $('.radio-group .radio').on('click', function() {
@@ -85,11 +85,6 @@ window.onload = function() {
$(this).removeClass('selected'); $(this).removeClass('selected');
}); });
$('#download-btn').click(function() {
$('.step-thumbnail:last()').trigger('click');
return false;
});
function displayMessageOnSaveSequence(){ function displayMessageOnSaveSequence(){
$('.savesequencemsg').fadeIn(); $('.savesequencemsg').fadeIn();
setTimeout(function() { setTimeout(function() {
@@ -119,7 +114,7 @@ window.onload = function() {
var button = event.target; var button = event.target;
button.disabled = true; button.disabled = true;
button.innerHTML='<i class="fa fa-circle-o-notch fa-spin"></i>'; button.innerHTML = '<i class="fa fa-circle-o-notch fa-spin"></i>';
try { try {
// Select all images from previous steps // Select all images from previous steps
@@ -193,35 +188,35 @@ window.onload = function() {
onLoad: function onFileReaderLoad(progress) { onLoad: function onFileReaderLoad(progress) {
var reader = progress.target; var reader = progress.target;
var step = sequencer.steps[0]; var step = sequencer.steps[0];
var util= intermediateHtmlStepUi(sequencer); var util = intermediateHtmlStepUi(sequencer);
step.output.src = reader.result; step.output.src = reader.result;
sequencer.run({ index: 0 }); sequencer.run({ index: 0 });
if(typeof step.options !=='undefined') if(typeof step.options !== 'undefined')
step.options.step.imgElement.src = reader.result; step.options.step.imgElement.src = reader.result;
else else
step.imgElement.src = reader.result; step.imgElement.src = reader.result;
insertPreview.updatePreviews(reader.result,'#addStep'); insertPreview.updatePreviews(reader.result, '#addStep');
insertPreview.updatePreviews(sequencer.steps[0].imgElement.src,'.insertDiv'); insertPreview.updatePreviews(sequencer.steps[0].imgElement.src, '.insertDiv');
}, },
onTakePhoto: function (url) { onTakePhoto: function (url) {
var step = sequencer.steps[0]; var step = sequencer.steps[0];
step.output.src = url; step.output.src = url;
sequencer.run({ index: 0 }); sequencer.run({ index: 0 });
if(typeof step.options !=='undefined') if(typeof step.options !== 'undefined')
step.options.step.imgElement.src = url; step.options.step.imgElement.src = url;
else else
step.imgElement.src = url; step.imgElement.src = url;
insertPreview.updatePreviews(url,'#addStep'); insertPreview.updatePreviews(url, '#addStep');
insertPreview.updatePreviews(sequencer.steps[0].imgElement.src,'.insertDiv'); insertPreview.updatePreviews(sequencer.steps[0].imgElement.src, '.insertDiv');
} }
}); });
setupCache(); setupCache();
if (urlHash.getUrlHashParameter('src')) { if (urlHash.getUrlHashParameter('src')) {
insertPreview.updatePreviews(urlHash.getUrlHashParameter('src'),'#addStep'); insertPreview.updatePreviews(urlHash.getUrlHashParameter('src'), '#addStep');
} else { } else {
insertPreview.updatePreviews('images/tulips.png','#addStep'); insertPreview.updatePreviews('images/tulips.png', '#addStep');
} }
}; };
@@ -277,7 +272,7 @@ function DefaultHtmlSequencerUi(_sequencer, options) {
function onLoad() { function onLoad() {
importStepsFromUrlHash(); importStepsFromUrlHash();
if ($('#selectStep').val()==='none') if ($('#selectStep').val() === 'none')
$(addStepSel + ' #add-step-btn').prop('disabled', true); $(addStepSel + ' #add-step-btn').prop('disabled', true);
handleSaveSequence(); handleSaveSequence();
} }
@@ -342,8 +337,8 @@ function DefaultHtmlSequencerUi(_sequencer, options) {
} }
function handleSaveSequence(){ function handleSaveSequence(){
var stepCount=sequencer.steps.length; var stepCount = sequencer.steps.length;
if(stepCount<2) if(stepCount < 2)
$(' #save-seq').prop('disabled', true); $(' #save-seq').prop('disabled', true);
else else
$(' #save-seq').prop('disabled', false); $(' #save-seq').prop('disabled', false);
@@ -394,7 +389,7 @@ function DefaultHtmlStepUi(_sequencer, options) {
<div class="panel-heading">\ <div class="panel-heading">\
<div class="trash-container pull-right"></div>\ <div class="trash-container pull-right"></div>\
<h3 class="panel-title">' + <h3 class="panel-title">' +
'<span class="toggle">' +step.name + ' <span class="caret toggleIcon rotated"></span>\ '<span class="toggle">' + step.name + ' <span class="caret toggleIcon rotated"></span>\
<span class="load-spin pull-right" style="display:none;padding:1px 8px;"><i class="fa fa-circle-o-notch fa-spin"></i></span>\ <span class="load-spin pull-right" style="display:none;padding:1px 8px;"><i class="fa fa-circle-o-notch fa-spin"></i></span>\
</h3>\ </h3>\
</div>\ </div>\
@@ -470,7 +465,7 @@ function DefaultHtmlStepUi(_sequencer, options) {
'"max="' + '"max="' +
inputDesc.max + inputDesc.max +
'"step="' + '"step="' +
(inputDesc.step ? inputDesc.step : 1)+ '">' + '<span>' + paramVal + '</span>'; (inputDesc.step ? inputDesc.step : 1) + '">' + '<span>' + paramVal + '</span>';
} }
else html += '">'; else html += '">';
@@ -498,7 +493,9 @@ function DefaultHtmlStepUi(_sequencer, options) {
); );
$(step.ui.querySelector('div.panel-footer')).prepend( $(step.ui.querySelector('div.panel-footer')).prepend(
'<button class="pull-right btn btn-default btn-sm insert-step" >\ '<button class="pull-right btn btn-default btn-sm insert-step" >\
<span class="insert-text"><i class="fa fa-plus"></i> Insert Step</span><span class="no-insert-text" style="display:none">Close</span>\ <span class="insert-text"><i class="fa fa-plus"></i> Insert Step</span><span class="no-insert-text" style="display:none">Close</span></button>\
<button class="pull-right btn btn-default btn-sm download-btn" style="margin-right:2px" >\
<i class="fa fa-download"></i>\
</button>' </button>'
); );
} }
@@ -509,14 +506,14 @@ function DefaultHtmlStepUi(_sequencer, options) {
.prepend( .prepend(
parser.parseFromString(tools, 'text/html').querySelector('div') parser.parseFromString(tools, 'text/html').querySelector('div')
); );
$(step.ui.querySelectorAll('.remove')).on('click', function() {notify('Step Removed','remove-notification');}); $(step.ui.querySelectorAll('.remove')).on('click', function() {notify('Step Removed', 'remove-notification');});
$(step.ui.querySelectorAll('.insert-step')).on('click', function() { util.insertStep(step.ID); }); $(step.ui.querySelectorAll('.insert-step')).on('click', function() { util.insertStep(step.ID); });
// Insert the step's UI in the right place // Insert the step's UI in the right place
if (stepOptions.index == _sequencer.steps.length) { if (stepOptions.index == _sequencer.steps.length) {
stepsEl.appendChild(step.ui); stepsEl.appendChild(step.ui);
$('#steps .step-container:nth-last-child(1) .insert-step').prop('disabled',true); $('#steps .step-container:nth-last-child(1) .insert-step').prop('disabled', true);
if($('#steps .step-container:nth-last-child(2)')) if($('#steps .step-container:nth-last-child(2)'))
$('#steps .step-container:nth-last-child(2) .insert-step').prop('disabled',false); $('#steps .step-container:nth-last-child(2) .insert-step').prop('disabled', false);
} else { } else {
stepsEl.insertBefore(step.ui, $(stepsEl).children()[stepOptions.index]); stepsEl.insertBefore(step.ui, $(stepsEl).children()[stepOptions.index]);
} }
@@ -530,6 +527,7 @@ function DefaultHtmlStepUi(_sequencer, options) {
}); });
$(step.imgElement).on('mousemove', _.debounce(() => imageHover(step), 150)); $(step.imgElement).on('mousemove', _.debounce(() => imageHover(step), 150));
$(step.imgElement).on('click', (e) => {e.preventDefault(); });
function saveOptions(e) { function saveOptions(e) {
e.preventDefault(); e.preventDefault();
@@ -570,7 +568,7 @@ function DefaultHtmlStepUi(_sequencer, options) {
$(input) $(input)
.data('initValue', $(input).val()) .data('initValue', $(input).val())
.data('hasChangedBefore', false) .data('hasChangedBefore', false)
.on('input change' , function() { .on('input change', function() {
$(this) $(this)
.focus() .focus()
.data('hasChangedBefore', .data('hasChangedBefore',
@@ -614,11 +612,21 @@ function DefaultHtmlStepUi(_sequencer, options) {
return output.split('/')[1].split(';')[0]; return output.split('/')[1].split(';')[0];
} }
for (let index = 0; index < step.linkElements.length; index++) { $(step.ui.querySelectorAll('.download-btn')).on('click', () => {
step.linkElements[index].download = step.name + '.' + fileExtension(step.imgElement.src); for (let index = 0; index < step.linkElements.length; index++){
step.linkElements[index].target = '_blank';
var element = document.createElement('a');
element.setAttribute('href', step.linkElements[index].href);
element.setAttribute('download', step.name + '.' + fileExtension(step.imgElement.src));
element.style.display = 'none';
document.body.appendChild(element);
element.click();
document.body.removeChild(element);
} }
});
// fill inputs with stored step options // fill inputs with stored step options
if (_sequencer.modulesInfo().hasOwnProperty(step.name)) { if (_sequencer.modulesInfo().hasOwnProperty(step.name)) {
@@ -653,19 +661,19 @@ function DefaultHtmlStepUi(_sequencer, options) {
canvas.width = img.width(); canvas.width = img.width();
canvas.height = img.height(); canvas.height = img.height();
var context = canvas.getContext('2d'); var context = canvas.getContext('2d');
context.drawImage(this,0,0); context.drawImage(this, 0, 0);
var offset = $(this).offset(); var offset = $(this).offset();
var xPos = e.pageX - offset.left; var xPos = e.pageX - offset.left;
var yPos = e.pageY - offset.top; var yPos = e.pageY - offset.top;
var myData = context.getImageData(xPos, yPos, 1, 1); var myData = context.getImageData(xPos, yPos, 1, 1);
img[0].title = 'rgb: ' +myData.data[0]+','+ myData.data[1]+','+myData.data[2];//+ rgbdata; img[0].title = 'rgb: ' + myData.data[0] + ',' + myData.data[1] + ',' + myData.data[2];//+ rgbdata;
}); });
} }
function onRemove(step) { function onRemove(step) {
step.ui.remove(); step.ui.remove();
$('#steps .step-container:nth-last-child(1) .insert-step').prop('disabled',true); $('#steps .step-container:nth-last-child(1) .insert-step').prop('disabled', true);
$('div[class*=imgareaselect-]').remove(); $('div[class*=imgareaselect-]').remove();
} }
@@ -673,8 +681,8 @@ function DefaultHtmlStepUi(_sequencer, options) {
return step.imgElement; return step.imgElement;
} }
function notify(msg,id){ function notify(msg, id){
if ($('#'+id).length == 0) { if ($('#' + id).length == 0) {
var notification = document.createElement('span'); var notification = document.createElement('span');
notification.innerHTML = ' <i class="fa fa-info-circle" aria-hidden="true"></i> ' + msg ; notification.innerHTML = ' <i class="fa fa-info-circle" aria-hidden="true"></i> ' + msg ;
notification.id = id; notification.id = id;
@@ -683,7 +691,7 @@ function DefaultHtmlStepUi(_sequencer, options) {
$('body').append(notification); $('body').append(notification);
} }
$('#'+id).fadeIn(500).delay(200).fadeOut(500); $('#' + id).fadeIn(500).delay(200).fadeOut(500);
} }
@@ -699,7 +707,7 @@ function DefaultHtmlStepUi(_sequencer, options) {
} }
if(typeof window === 'undefined'){ if(typeof window === 'undefined'){
module.exports={ module.exports = {
DefaultHtmlStepUi: DefaultHtmlStepUi DefaultHtmlStepUi: DefaultHtmlStepUi
}; };
} }
@@ -737,7 +745,7 @@ function generatePreview(previewStepName, customValues, path, selector) {
} }
function updatePreviews(src, selector) { function updatePreviews(src, selector) {
$(selector+' img').remove(); $(selector + ' img').remove();
var previewSequencerSteps = { var previewSequencerSteps = {
'resize': '125%', 'resize': '125%',

2
dist/image-sequencer-ui.min.js vendored
View File

File diff suppressed because one or more lines are too long

926
dist/image-sequencer.js vendored
View File

File diff suppressed because it is too large Load Diff

2
dist/image-sequencer.min.js vendored
View File

File diff suppressed because one or more lines are too long