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

Added thumbnails to insert preview. (#653)

Browse Source 
* Adds thumbnail to insert step view

* removed redundant code

* Resolved merge conflicts

* Resolved merge conflicts

* made changes in intermediateHtmlStepUi

* Update intermediateHtmlStepUi.js
This commit is contained in:
Slytherin
2019-01-23 01:54:59 +05:30
committed by Jeffrey Warren
parent 8fd4efc621
commit 3d2d7844b6
4 changed files with 81 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
examples/demo.js
View File

@@ -1,34 +1,4 @@
window.onload = function() {
function generatePreview(previewStepName, customValues, path) {
var previewSequencer = ImageSequencer();
function insertPreview(src) {
var img = document.createElement('img');
img.classList.add('img-thumbnail')
img.classList.add('no-border');
img.src = src;
$(img).css("max-width", "200%");
$(img).css("transform", "translateX(-20%)");
var stepDiv = $('#addStep .row').find('div').each(function() {
if ($(this).find('div').attr('data-value') === previewStepName) {
$(this).find('div').append(img);
}
});
}
function loadPreview() {
previewSequencer = previewSequencer.addSteps('resize', { resize: "40%" });
if (previewStepName === "crop") {
previewSequencer.addSteps(previewStepName, customValues).run(insertPreview);
}
else {
previewSequencer.addSteps(previewStepName, { [previewStepName]: customValues }).run(insertPreview);
}
}
previewSequencer.loadImage(path, loadPreview);
}
sequencer = ImageSequencer();
function refreshOptions() {
@@ -210,10 +180,12 @@ window.onload = function() {
onLoad: function onFileReaderLoad(progress) {
var reader = progress.target;
var step = sequencer.images.image1.steps[0];
var util=IntermediateHtmlStepUi(sequencer);
step.output.src = reader.result;
sequencer.run({ index: 0 });
step.options.step.imgElement.src = reader.result;
updatePreviews(reader.result);
updatePreviews(reader.result,'addStep');
updatePreviews(sequencer.images.image1.steps[0].options.step.imgElement.src,'insertStep');
},
onTakePhoto: function (url) {
var step = sequencer.images.image1.steps[0];
@@ -225,31 +197,9 @@ window.onload = function() {
setupCache();
function updatePreviews(src) {
$('#addStep img').remove();
var previewSequencerSteps = {
"brightness": "175",
"saturation": "0.5",
"rotate": 90,
"contrast": 90,
"crop": {
"x": 0,
"y": 0,
"w": "(50%)",
"h": "(50%)",
"noUI": true
}
}
Object.keys(previewSequencerSteps).forEach(function(step, index) {
generatePreview(step, Object.values(previewSequencerSteps)[index], src);
});
}
if (getUrlHashParameter('src')) {
updatePreviews(getUrlHashParameter('src'));
updatePreviews(getUrlHashParameter('src'),'addStep');
} else {
updatePreviews("images/tulips.png");
updatePreviews("images/tulips.png",'addStep');
}
};

1
examples/index.html
View File

@@ -21,6 +21,7 @@
<script src="lib/defaultHtmlStepUi.js" charset="utf-8"></script>
<script src="lib/defaultHtmlSequencerUi.js" charset="utf-8"></script>
<script src="lib/intermediateHtmlStepUi.js" charset="utf-8"></script>
<script src="lib/insertPreview.js" charset="utf-8"></script>
<script src="lib/cache.js" charset="utf-8"></script>
<script src="demo.js" charset="utf-8"></script>
<!-- for crop module: -->

50
examples/lib/insertPreview.js Normal file
View File

@@ -0,0 +1,50 @@
function generatePreview(previewStepName, customValues, path, selector) {
var previewSequencer = ImageSequencer();
function insertPreview(src) {
var img = document.createElement('img');
img.classList.add('img-thumbnail')
img.classList.add('no-border');
img.src = src;
$(img).css("max-width", "200%");
$(img).css("transform", "translateX(-20%)");
var stepDiv = $('#'+selector+' .row').find('div').each(function() {
if ($(this).find('div').attr('data-value') === previewStepName) {
$(this).find('div').append(img);
}
});
}
function loadPreview() {
previewSequencer = previewSequencer.addSteps('resize', { resize: "40%" });
if (previewStepName === "crop") {
previewSequencer.addSteps(previewStepName, customValues).run(insertPreview);
}
else {
previewSequencer.addSteps(previewStepName, { [previewStepName]: customValues }).run(insertPreview);
}
}
previewSequencer.loadImage(path, loadPreview);
}
function updatePreviews(src, selector) {
$('#'+selector+' img').remove();
var previewSequencerSteps = {
"brightness": "20",
"saturation": "5",
"rotate": 90,
"contrast": 90,
"crop": {
"x": 0,
"y": 0,
"w": "(50%)",
"h": "(50%)",
"noUI": true
}
}
Object.keys(previewSequencerSteps).forEach(function (step, index) {
generatePreview(step, Object.values(previewSequencerSteps)[index], src, selector);
});
}

42
examples/lib/intermediateHtmlStepUi.js
View File

@@ -1,40 +1,40 @@
function IntermediateHtmlStepUi(_sequencer, step, options) {
function stepUI() {
return '<div class="row insertDiv">\
<div class="col-md-6" style="margin-top:5%">\
<div class="col-md-6 col-md-offset-2" style="margin-top:5%">\
<section id="insertStep" class="panel panel-primary">\
<div class="form-inline">\
<div class="panel-body">\
<p class="info">Select a new module to add to your sequence.</p>\
<div class="row center-align radio-group">\
<div>\
<button type="button" class="btn btn-default btn-circle btn-xl radio" data-value="brightness">\
<i class="fa fa-sun-o fa-4x"></i>\
</button>\
<div class="radio" data-value="brightness">\
<i class="fa fa-sun-o fa-4x i-over"></i>\
</div>\
<p>Brightness</p>\
</div>\
<div>\
<button type="button" class="btn btn-default btn-circle btn-xl radio" data-value="contrast">\
<i class="fa fa-adjust fa-4x"></i>\
</button>\
<div class="radio" data-value="contrast">\
<i class="fa fa-adjust fa-4x i-over"></i>\
</div>\
<p>Contrast</p>\
</div>\
<div>\
<button type="button" class="btn btn-default btn-circle btn-xl radio" data-value="saturation">\
<i class="fa fa-tint fa-4x"></i>\
</button>\
<div class="radio" data-value="saturation">\
<i class="fa fa-tint fa-4x i-over i-small"></i>\
</div>\
<p>Saturation</p>\
</div>\
<div>\
<button type="button" class="btn btn-default btn-circle btn-xl radio" data-value="rotate">\
<i class="fa fa-rotate-right fa-4x"></i>\
</button>\
<div class="radio" data-value="rotate">\
<i class="fa fa-rotate-right fa-4x i-over"></i>\
</div>\
<p>Rotate</p>\
</div>\
<div>\
<button type="button" class="btn btn-default btn-circle btn-xl radio" data-value="crop">\
<i class="fa fa-crop fa-4x"></i>\
</button>\
<div class="radio" data-value="crop">\
<i class="fa fa-crop fa-4x i-over"></i>\
</div>\
<p>Crop</p>\
</div>\
</div>\
@@ -50,12 +50,14 @@ function IntermediateHtmlStepUi(_sequencer, step, options) {
</section>\
</div>';
}
function selectNewStepUi() {
var m = $("#insertStep select").val();
$("#insertStep .info").html(_sequencer.modulesInfo(m).description);
$("#insertStep #add-step-btn").prop("disabled", false);
}
insertStep = function(id) {
insertStep = function (id) {
var modulesInfo = _sequencer.modulesInfo();
var parser = new DOMParser();
var addStepUI = stepUI();
@@ -65,6 +67,7 @@ function IntermediateHtmlStepUi(_sequencer, step, options) {
.insertAdjacentElement('afterend',
addStepUI
);
updatePreviews(step.output,'insertStep');
var insertStepSelect = $("#insertStep select");
insertStepSelect.html("");
// Add modules to the insertStep dropdown
@@ -78,7 +81,7 @@ function IntermediateHtmlStepUi(_sequencer, step, options) {
$('#insertStep #add-step-btn').prop('disabled', true);
insertStepSelect.append('<option value="none" disabled selected>More modules...</option>');
$('#insertStep .radio-group .radio').on("click", function() {
$('#insertStep .radio-group .radio').on("click", function () {
$(this).parent().find('.radio').removeClass('selected');
$(this).addClass('selected');
newStep = $(this).attr('data-value');
@@ -88,7 +91,7 @@ function IntermediateHtmlStepUi(_sequencer, step, options) {
$(this).removeClass('selected');
});
$(step.ui.querySelector("#insertStep select")).on('change', selectNewStepUi);
$(step.ui.querySelector("#insertStep #add-step-btn")).on('click', function() { insert(id) });
$(step.ui.querySelector("#insertStep #add-step-btn")).on('click', function () { insert(id) });
}
function insert(id) {
@@ -112,6 +115,7 @@ function IntermediateHtmlStepUi(_sequencer, step, options) {
setUrlHashParameter("steps", _sequencer.toString());
}
return {
insertStep
}