eessppeelllloo/image-sequencer
1
0
Fork 0
mirror of https://github.com/publiclab/image-sequencer.git synced 2025-12-16 05:10: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

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

@@ -47,7 +47,7 @@ window.onload = function() {
$(':root').animate({scrollTop: 0});
}
$('#move-up').on('click',topFunction);
$('#move-up').on('click', topFunction);
// UI for each step:
@@ -64,14 +64,14 @@ window.onload = 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)
window.location = '/';
};
$('#addStep select').on('change', ui.selectNewStepUi);
$('#addStep #add-step-btn').on('click', ui.addStepUi);
$('#resetButton').on('click',resetSequence);
$('#resetButton').on('click', resetSequence);
//Module button radio selection
$('.radio-group .radio').on('click', function() {
@@ -85,11 +85,6 @@ window.onload = function() {
$(this).removeClass('selected');
});
$('#download-btn').click(function() {
$('.step-thumbnail:last()').trigger('click');
return false;
});
function displayMessageOnSaveSequence(){
$('.savesequencemsg').fadeIn();
setTimeout(function() {
@@ -119,7 +114,7 @@ window.onload = function() {
var button = event.target;
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 {
// Select all images from previous steps
@@ -193,35 +188,35 @@ window.onload = function() {
onLoad: function onFileReaderLoad(progress) {
var reader = progress.target;
var step = sequencer.steps[0];
var util= intermediateHtmlStepUi(sequencer);
var util = intermediateHtmlStepUi(sequencer);
step.output.src = reader.result;
sequencer.run({ index: 0 });
if(typeof step.options !=='undefined')
if(typeof step.options !== 'undefined')
step.options.step.imgElement.src = reader.result;
else
step.imgElement.src = reader.result;
insertPreview.updatePreviews(reader.result,'#addStep');
insertPreview.updatePreviews(sequencer.steps[0].imgElement.src,'.insertDiv');
insertPreview.updatePreviews(reader.result, '#addStep');
insertPreview.updatePreviews(sequencer.steps[0].imgElement.src, '.insertDiv');
},
onTakePhoto: function (url) {
var step = sequencer.steps[0];
step.output.src = url;
sequencer.run({ index: 0 });
if(typeof step.options !=='undefined')
if(typeof step.options !== 'undefined')
step.options.step.imgElement.src = url;
else
step.imgElement.src = url;
insertPreview.updatePreviews(url,'#addStep');
insertPreview.updatePreviews(sequencer.steps[0].imgElement.src,'.insertDiv');
insertPreview.updatePreviews(url, '#addStep');
insertPreview.updatePreviews(sequencer.steps[0].imgElement.src, '.insertDiv');
}
});
setupCache();
if (urlHash.getUrlHashParameter('src')) {
insertPreview.updatePreviews(urlHash.getUrlHashParameter('src'),'#addStep');
insertPreview.updatePreviews(urlHash.getUrlHashParameter('src'), '#addStep');
} else {
insertPreview.updatePreviews('images/tulips.png','#addStep');
insertPreview.updatePreviews('images/tulips.png', '#addStep');
}
};
@@ -277,7 +272,7 @@ function DefaultHtmlSequencerUi(_sequencer, options) {
function onLoad() {
importStepsFromUrlHash();
if ($('#selectStep').val()==='none')
if ($('#selectStep').val() === 'none')
$(addStepSel + ' #add-step-btn').prop('disabled', true);
handleSaveSequence();
}
@@ -342,8 +337,8 @@ function DefaultHtmlSequencerUi(_sequencer, options) {
}
function handleSaveSequence(){
var stepCount=sequencer.steps.length;
if(stepCount<2)
var stepCount = sequencer.steps.length;
if(stepCount < 2)
$(' #save-seq').prop('disabled', true);
else
$(' #save-seq').prop('disabled', false);
@@ -393,8 +388,8 @@ function DefaultHtmlStepUi(_sequencer, options) {
<div class="panel panel-default">\
<div class="panel-heading">\
<div class="trash-container pull-right"></div>\
<h3 class="panel-title">' +
'<span class="toggle">' +step.name + ' <span class="caret toggleIcon rotated"></span>\
<h3 class="panel-title">' +
'<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>\
</h3>\
</div>\
@@ -470,7 +465,7 @@ function DefaultHtmlStepUi(_sequencer, options) {
'"max="' +
inputDesc.max +
'"step="' +
(inputDesc.step ? inputDesc.step : 1)+ '">' + '<span>' + paramVal + '</span>';
(inputDesc.step ? inputDesc.step : 1) + '">' + '<span>' + paramVal + '</span>';
}
else html += '">';
@@ -498,9 +493,11 @@ function DefaultHtmlStepUi(_sequencer, options) {
);
$(step.ui.querySelector('div.panel-footer')).prepend(
'<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>'
);
);
}
if (step.name != 'load-image') {
@@ -509,14 +506,14 @@ function DefaultHtmlStepUi(_sequencer, options) {
.prepend(
parser.parseFromString(tools, 'text/html').querySelector('div')
);
$(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('.remove')).on('click', function() {notify('Step Removed', 'remove-notification');});
$(step.ui.querySelectorAll('.insert-step')).on('click', function() { util.insertStep(step.ID); });
// Insert the step's UI in the right place
if (stepOptions.index == _sequencer.steps.length) {
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)'))
$('#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 {
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('click', (e) => {e.preventDefault(); });
function saveOptions(e) {
e.preventDefault();
@@ -562,7 +560,7 @@ function DefaultHtmlStepUi(_sequencer, options) {
return inputChanged;
}
var
var
changedInputs = 0,
optionsChanged = false;
$(step.ui.querySelector('.input-form')).on('submit', saveOptions);
@@ -570,7 +568,7 @@ function DefaultHtmlStepUi(_sequencer, options) {
$(input)
.data('initValue', $(input).val())
.data('hasChangedBefore', false)
.on('input change' , function() {
.on('input change', function() {
$(this)
.focus()
.data('hasChangedBefore',
@@ -614,11 +612,21 @@ function DefaultHtmlStepUi(_sequencer, options) {
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);
step.linkElements[index].target = '_blank';
}
for (let index = 0; index < step.linkElements.length; index++){
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
if (_sequencer.modulesInfo().hasOwnProperty(step.name)) {
@@ -648,24 +656,24 @@ function DefaultHtmlStepUi(_sequencer, options) {
var img = $(step.imgElement);
img.mousemove(function(e) {
img.mousemove(function(e) {
var canvas = document.createElement('canvas');
canvas.width = img.width();
canvas.height = img.height();
var context = canvas.getContext('2d');
context.drawImage(this,0,0);
context.drawImage(this, 0, 0);
var offset = $(this).offset();
var xPos = e.pageX - offset.left;
var yPos = e.pageY - offset.top;
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) {
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();
}
@@ -673,8 +681,8 @@ function DefaultHtmlStepUi(_sequencer, options) {
return step.imgElement;
}
function notify(msg,id){
if ($('#'+id).length == 0) {
function notify(msg, id){
if ($('#' + id).length == 0) {
var notification = document.createElement('span');
notification.innerHTML = ' <i class="fa fa-info-circle" aria-hidden="true"></i> ' + msg ;
notification.id = id;
@@ -683,7 +691,7 @@ function DefaultHtmlStepUi(_sequencer, options) {
$('body').append(notification);
}
$('#'+id).fadeIn(500).delay(200).fadeOut(500);
$('#' + id).fadeIn(500).delay(200).fadeOut(500);
}
@@ -692,14 +700,14 @@ function DefaultHtmlStepUi(_sequencer, options) {
onSetup: onSetup,
onComplete: onComplete,
onRemove: onRemove,
onDraw: onDraw,
onDraw: onDraw,
notify: notify,
imageHover: imageHover
};
}
if(typeof window === 'undefined'){
module.exports={
module.exports = {
DefaultHtmlStepUi: DefaultHtmlStepUi
};
}
@@ -737,7 +745,7 @@ function generatePreview(previewStepName, customValues, path, selector) {
}
function updatePreviews(src, selector) {
$(selector+' img').remove();
$(selector + ' img').remove();
var previewSequencerSteps = {
'resize': '125%',