examples/demo.js
var defaultHtmlSequencerUi = require('./lib/defaultHtmlSequencerUi.js'),
setupCache = require('./lib/cache.js'),
intermediateHtmlStepUi = require('./lib/intermediateHtmlStepUi.js'),
DefaultHtmlStepUi = require('./lib/defaultHtmlStepUi.js'),
urlHash = require('./lib/urlHash.js'),
insertPreview = require('./lib/insertPreview.js'),
versionManagement = require('./lib/versionManagement.js'),
isGIF = require('../src/util/isGif');
window.onload = function () {
sequencer = ImageSequencer(); // Set the global sequencer variable
options = {
sortField: 'text',
openOnFocus: false,
onInitialize: function () {
this.$control.on('click', () => {
this.ignoreFocusOpen = true;
setTimeout(() => {
// Trigger onFocus and open dropdown.
this.ignoreFocusOpen = false;
}, 50);
});
},
// Open dropdown after timeout of onClick.
onFocus: function () {
if (!this.ignoreFocusOpen) {
this.open();
}
}
};
versionManagement.getLatestVersionNumber(function(versionNumber) {
console.log('The latest NPM version number for Image Sequencer (from GitHub) is v' + versionNumber);
});
console.log('The local version number for Image Sequencer is v' + versionManagement.getLocalVersionNumber());
function displayVersionNumber() {
$('#version-number-text').text('Image Sequencer v' + versionManagement.getLocalVersionNumber());
$('#version-number-top-right').text('v' + versionManagement.getLocalVersionNumber());
}
displayVersionNumber();
function refreshOptions(options) {
// Default options if parameter is empty.
if (options == undefined) options = { sortField: 'text' };
// Load information of all modules (Name, Inputs, Outputs)
var modulesInfo = sequencer.modulesInfo();
var addStepSelect = $('#addStep select');
addStepSelect.html('');
// Add modules to the addStep dropdown
for (var m in modulesInfo) {
if (modulesInfo[m] && modulesInfo[m].name)
addStepSelect.append(
'<option value="' + m + '">' + modulesInfo[m].name + '</option>'
);
}
// Null option
addStepSelect.append('<option value="" disabled selected>Select a Module</option>');
addStepSelect.selectize(options);
}
refreshOptions(options);
$(window).on('scroll', scrollFunction);
/**
* @description Method to toggle the scroll-up arrow.
*/
function scrollFunction(A, B) {
var shouldDisplay = $('body').scrollTop() > 20 || $(':root').scrollTop() > 20;
$('#move-up').css({
display: shouldDisplay ? 'block' : 'none'
});
}
/**
* @description Method to scroll to the top of the page.
*/
function topFunction() {
$('body').animate({scrollTop: 0});
$(':root').animate({scrollTop: 0});
}
$('#move-up').on('click', topFunction);
// UI for each step:
sequencer.setUI(DefaultHtmlStepUi(sequencer));
// UI for the overall demo:
var ui = defaultHtmlSequencerUi(sequencer);
// Load image data from URL `src` parameter.
if (urlHash.getUrlHashParameter('src')) {
sequencer.loadImage(urlHash.getUrlHashParameter('src'), ui.onLoad);
} else {
sequencer.loadImage('images/tulips.png', ui.onLoad);
}
var resetSequence = function () {
var r = confirm('Do you want to reset the sequence?');
if (r)
{
window.location.hash = '';
location.reload();
}
};
$('#addStep select').on('change', ui.selectNewStepUi);
$('#addStep #add-step-btn').on('click', ui.addStepUi);
$('#resetButton').on('click', resetSequence);
// Module Selector quick buttons click handler.
$('.radio-group .radio').on('click', function () {
$(this).parent().find('.radio').removeClass('selected');
$(this).addClass('selected');
newStep = $(this).attr('data-value');
$('#addStep select').val(newStep);
ui.selectNewStepUi(newStep);
ui.addStepUi(newStep);
$(this).removeClass('selected');
});
/**
* @method displayMessageOnSaveSequence
* @description When a sequence is saved to a browser, notification is displayed.
* @returns {Null}
*/
function displayMessageOnSaveSequence() {
$('.savesequencemsg').fadeIn();
setTimeout(function () {
$('.savesequencemsg').fadeOut();
}, 3000);
}
$('body').on('click', 'button.remove', ui.removeStepUi);
function saveSequence() { // 1. save seq
var result = window.prompt('Please give a name to your sequence... (Saved sequence will only be available in this browser).');
if (result) {
result = result + ' (local)';
sequencer.saveSequence(result, sequencer.toString()); // 1.a study saveSequence
sequencer.loadModules();
displayMessageOnSaveSequence();
refreshOptions();
}
}
$('#saveButton').on('click', function () {
// Different handlers triggered for different dropdown options.
let dropDownValue = $('#selectSaveOption option:selected').val();
if (dropDownValue == 'save-image') {
$('.download-btn:last()').trigger('click');
}
else if (dropDownValue == 'save-gif') {
handleSavePNG();
}
else if (dropDownValue == 'save-seq') {
saveSequence();
} else if(dropDownValue == 'save-pdf') {
savePDF(getLastImage());
}
else if (dropDownValue == 'save-to-publiclab.org' ){
SaveToPubliclab();
}
});
let isWorkingOnGifGeneration = false;
$('.js-view-as-gif').on('click', function (event) { // GIF generation and display
if (isWorkingOnGifGeneration) return; // Prevent multiple button clicks
isWorkingOnGifGeneration = true;
var button = event.target;
button.disabled = true;
button.innerHTML = '<i class="fa fa-circle-o-notch fa-spin"></i>';
try {
// Get GIF resources from previous steps
let options = getGifResources();
gifshot.createGIF(options, function (obj) { // GIF generation
if (!obj.error) {
// Final GIF encoded with base64 format
var image = obj.image;
var animatedImage = document.createElement('img');
animatedImage.id = 'gif_element';
animatedImage.src = image;
let modal = $('#js-download-gif-modal');
$('#js-download-as-gif-button').one('click', function () {
downloadGif(image); // Trigger GIF download
modal.modal('hide');
});
var gifContainer = document.getElementById('js-download-modal-gif-container');
// Clear previous results
gifContainer.innerHTML = '';
// Insert image
gifContainer.appendChild(animatedImage);
// Open modal
modal.modal();
button.disabled = false;
button.innerHTML = 'View GIF';
isWorkingOnGifGeneration = false;
}
});
}
catch (e) {
console.error(e);
button.disabled = false;
button.innerHTML = 'View GIF';
isWorkingOnGifGeneration = false;
}
});
function getGifResources() {
// Returns an object with specific gif options
let imgs = document.getElementsByClassName('step-thumbnail');
var imgSrcs = [];
// Pushes image sources of all the modules in the DOM
for (var i = 0; i < imgs.length; i++) {
imgSrcs.push(imgs[i].src);
}
var options = { // GIF frame options
'gifWidth': imgs[0].width,
'gifHeight': imgs[0].height,
'images': imgSrcs,
'frameDuration': 7,
};
return options;
}
function handleSavePNG() {
let options = getGifResources();
gifshot.createGIF(options, function(obj){
downloadGif(obj.image);
});
}
/**
* Get the data URL for the last image in the sequence.
* @return {string} The data URL for the last image in the sequence.
*/
function getLastImage() {
// Get the image from the last step.
let imgs = document.getElementsByClassName('step-thumbnail');
let lastStepImage = imgs[imgs.length - 1];
return lastStepImage.getAttribute('src');
}
/**
* Download the given image URL as a PDF file.
* @param {string} imageDataURL - The data URL for the image.
*/
function savePDF(imageDataURL) {
sequencer.getImageDimensions(imageDataURL, function(dimensions) {
if (isGIF(imageDataURL)) {
// Get the dimensions of the image.
let pageWidth = dimensions.width;
let pageHeight = dimensions.height;
// Create a new pdf with the same dimensions as the image.
const pdf = new jsPDF({
orientation: pageHeight > pageWidth ? 'portrait' : 'landscape',
unit: 'px',
format: [pageHeight, pageWidth]
});
// Add the image to the pdf with dimensions equal to the internal dimensions of the page.
pdf.addImage(imageDataURL, 0, 0, pdf.internal.pageSize.getWidth(), pdf.internal.pageSize.getHeight());
// Save the pdf with the filename specified here:
pdf.save('index.pdf');
}
else console.log('GIFs cannot be converted to PDF');
});
}
function downloadGif(image) {
download(image, 'index.gif', 'image/gif'); // Downloadjs library function
}
function SaveToPubliclab() {
function postToPL(imgSrc) {
var uniq = Date.now();
$('body').append('<form method="post" id="postToPL' + uniq + '" action="https://publiclab.org/post" target="postToPLWindow"><input type="hidden" name="datauri_main_image" /></form>');
f = $('#postToPL' + uniq)[0];
f.datauri_main_image.value = imgSrc;
window.open('', 'postToPLWindow');
f.submit();
}
postToPL($('img')[sequencer.steps.length - 1].src);
}
// Image selection and drag/drop handling from examples/lib/imageSelection.js
sequencer.setInputStep({
dropZoneSelector: '#dropzone',
fileInputSelector: '#fileInput',
takePhotoSelector: '#take-photo',
onLoad: function onFileReaderLoad(progress) {
var reader = progress.target;
var step = sequencer.steps[0];
var util = intermediateHtmlStepUi(sequencer);
step.output.src = reader.result;
sequencer.run({ index: 0 });
if (typeof step.options !== 'undefined')
step.options.step.imgElement.src = reader.result;
else
step.imgElement.src = reader.result;
insertPreview.updatePreviews(reader.result, document.querySelector('#addStep'));
DefaultHtmlStepUi(sequencer).updateDimensions(step);
},
onTakePhoto: function (url) {
var step = sequencer.steps[0];
step.output.src = url;
sequencer.run({ index: 0 });
if (typeof step.options !== 'undefined')
step.options.step.imgElement.src = url;
else
step.imgElement.src = url;
insertPreview.updatePreviews(url, document.querySelector('#addStep'));
DefaultHtmlStepUi(sequencer).updateDimensions(step);
}
});
setupCache();
if (urlHash.getUrlHashParameter('src')) { // Gets the sequence from the URL
insertPreview.updatePreviews(urlHash.getUrlHashParameter('src'), document.querySelector('#addStep'));
} else {
insertPreview.updatePreviews('images/tulips.png', document.querySelector('#addStep'));
}
};