Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

previewgif overflow #947

Closed
wants to merge 14 commits into from
16 changes: 13 additions & 3 deletions examples/demo.css
Original file line number Diff line number Diff line change
Expand Up @@ -259,8 +259,6 @@ a.name-header{
.trash-container button.btn-xs {
margin-top: -5px !important;
}

/*
.panel-footer .insert-step{
margin-left:10px;
border-radius:6px;
Expand All @@ -270,10 +268,22 @@ a.name-header{
.col-md-4{
padding-left: 30px;
}
/*
.panel-heading{
height:45px;
}
.panel-footer{
height: 45px;
}
*/
#gif{
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why is this commented?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@jywarren did it in the bootstrap panel.

margin-left:0px;
margin-top:5px;
width:100%;
}
.save-button{
margin-top:20px;
margin-bottom:0px;
align:center;
width:100%;
}
*/
54 changes: 24 additions & 30 deletions examples/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -145,32 +145,26 @@ <h1><a href="/" target='_blank' class="name-header">Image Sequencer</a></h1>
</div>
</section>

<section id="sequence-actions" class="panel">
<div class="panel-body">

<div class="modal fade" id="js-download-gif-modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title">Your gif is ready</h4>
</div>
<div class="modal-body">
<div id="js-download-modal-gif-container">
<!-- Gif should appear here -->
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Done</button>

<button id="js-download-as-gif-button" class="btn btn-primary">Download</button>
</div>
<div class="modal fade" id="js-download-gif-modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title">Your gif is ready</h4>
</div>
<div class="modal-body">
<div id="js-download-modal-gif-container">
<!-- Gif should appear here -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Done</button>

<button id="js-download-as-gif-button" class="btn btn-primary">Download</button>
</div>
</div>

</div>
</section>
</div>
</div>

</div>
<div class="col-sm-4">
Expand All @@ -179,14 +173,14 @@ <h4 class="modal-title">Your gif is ready</h4>
<div class="panel-body">
<div style="text-align:center;">
<h2 style="margin-top:20px">Save</h2>
<select class="form-control input-md" id="selectSaveOption" style="margin-top:20px">
<option>Save as PNG</option>
<option>Save as GIF (all steps)</option>
<option>Save sequence</option>
<option>Save sequence string</option>
</select>
<p><button id="saveButton" class="btn btn-primary btn-lg" style="margin-top:20px; margin-bottom:0px;align:center; width:100%;">Save</button></p>
<p><button class="btn btn-default js-view-as-gif" id="gif" style="align:center;">Preview GIF</button></p>
<select class="form-control input-md" id="selectSaveOption" style="margin-top:20px">
<option>Save as PNG</option>
<option>Save as GIF (all steps)</option>
<option>Save sequence</option>
<option>Save sequence string</option>
</select>
<button id="saveButton" class="btn btn-primary btn-lg save-button">Save</button>
<button class="btn btn-default btn-lg js-view-as-gif" id="gif">Preview GIF</button>
</div>
</div>
</div>
Expand Down
22 changes: 22 additions & 0 deletions src/modules/Grid/GridOverlay.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
module.exports = exports = function(pixels, options,priorstep){
var defaults = require('../../util/getDefaults.js')(require('./info.json'));

var canvas = document.createElement("canvas");
var context = canvas.getContext("2d");
canvas.width = pixels.shape[0]; //img.width();
canvas.height = pixels.shape[1]; //img.height();
for (var x = 0.5; x < canvas.width; x += 10) {
context.moveTo(x, 0);
context.lineTo(x, 381);
}

for (var y = 0.5; y < canvas.height; y += 10) {
context.moveTo(0, y);
context.lineTo(canvas.height, y);
}

context.strokeStyle = "#ddd";
context.stroke();

return pixels;
}
51 changes: 51 additions & 0 deletions src/modules/Grid/Module.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@

module.exports = function TextOverlay(options,UI) {

var output;

function draw(input, callback, progressObj) {

progressObj.stop(true);
progressObj.overrideFlag = true;

var step = this;
if (!options.step.inBrowser) { // This module is only for browser
this.output = input;
callback();
}
else{
var priorStep = this.getStep(-1); // get the previous step to add text onto it.

function extraManipulation(pixels) {
//if (options.step.inBrowser)
pixels = require('./GridOverlay')(pixels, options,priorStep);
return pixels
}

function output(image, datauri, mimetype) {

// This output is accesible by Image Sequencer
step.output = { src: datauri, format: mimetype };

}

return require('../_nomodule/PixelManipulation.js')(input, {
output: output,
extraManipulation: extraManipulation,
format: input.format,
image: options.image,
inBrowser: options.inBrowser,
callback: callback
});

}
}

return {
options: options,
draw: draw,
output: output,
UI: UI
}
}

4 changes: 4 additions & 0 deletions src/modules/Grid/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
module.exports = [
require('./Module'),
require('./info.json')
]
5 changes: 5 additions & 0 deletions src/modules/Grid/info.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
{
"name": "Grid Overlay",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh this is messy. Did you modify your main branch?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

oops thats because of checkout i GUESS

"description": "Overlays Grid on an image",
"inputs": {}
}