wbrawner/piskel
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Added preview picture. Added a flow : start with only file input enabled

Browse source
This commit is contained in:
jdescottes 2013-10-23 23:34:09 +02:00
parent 3dde3504d1
commit a0a1fa7bdf
9 changed files with 188 additions and 98 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
css/forms.css
View file

@ -16,20 +16,22 @@
.button {
height: 24px;
border: none;
box-sizing: border-box;
border-top: 1px solid #666;
border-left: 1px solid #333;
border-right: 1px solid #333;
border-bottom: 1px solid #333;
background-color: #3f3f3f;
border: 1px solid #333;
border-top-color: #666;
border-bottom-color: #222;
cursor: pointer;
color: white;
font-size: 1rem;
font-weight: bold;
text-align: center;
text-decoration: none;
text-shadow: 0px -1px 0 #000;
color: white;
text-shadow: 0px -1px 0 black;
font-weight: bold;
font-size: 1rem;
text-align: center;
transition: background-color 0.2s linear;
}
@ -37,4 +39,31 @@
text-decoration: none;
background-color: #484848;
color: gold;
}
.button-primary {
background-color: rgb(255,215,0); /* gold */
border-color: rgb(179, 164, 0);
border-top-color: white;
border-bottom-color: rgb(151, 133, 0);
color: black;
text-shadow: 0px 1px 0 #fff;
}
.button-primary:hover {
background-color: rgb(255,235,20);
color: #333;
}
.button[disabled=disabled],
.button[disabled=disabled]:hover {
cursor:default;
background-color: #aaa;
color: #777;
text-shadow: 0px 1px 0 #bbb;
border-color: #666;
border-top-color: #999;
border-bottom-color: #555;
}

41
css/settings.css
View file

@ -93,11 +93,18 @@
}
/* Gif Export Setting panel*/
.export-gif-upload-button {
.gif-upload-button,
.gif-render-button {
/*float : right;*/
margin-top : 10px;
margin-right : 10px;
}
.export-gif-preview {
.gif-export-radio-group {
margin:10px 0;
}
.gif-export-preview {
margin-top:20px;
max-width:240px;
position:relative;
@ -122,6 +129,19 @@
margin: 15px 0;
}
.import-section-disabled {
color : #888;
}
.import-section-preview {
display : inline-block;
height : 60px;
width: 60px;
border : 1px dashed #999;
border-radius: 3px;
margin-left : 10px;
}
.import-resize-field {
width: 30px;
margin: 0px 8px;
@ -138,23 +158,10 @@
width: 130px;
overflow: hidden;
height: 1rem;
height: 1.5rem;
word-break : break-all;
vertical-align: middle;
font-style: italic;
font-weight: normal;
text-shadow: none;
}
.import-button {
float: right;
padding : 8px 10px;
height: auto;
background: gold;
color: black;
text-shadow: 0px 1px 0 #fff;
border-radius: 2px;
font-size : 1.2rem;
border-color: rgb(179, 164, 0);
border-top-color: white;
border-bottom-color: rgb(151, 133, 0);
}

6
js/controller/settings/GifExportController.js
View file

@ -24,9 +24,9 @@
];
ns.GifExportController.prototype.init = function () {
this.radioTemplate_ = pskl.utils.Template.get("export-gif-radio-template");
this.radioTemplate_ = pskl.utils.Template.get("gif-export-radio-template");
this.previewContainerEl = document.querySelectorAll(".export-gif-preview div")[0];
this.previewContainerEl = document.querySelectorAll(".gif-export-preview")[0];
this.radioGroupEl = document.querySelectorAll(".gif-export-radio-group")[0];
this.uploadForm = $("[name=gif-export-upload-form]");
@ -56,7 +56,7 @@
};
ns.GifExportController.prototype.updatePreview_ = function (src) {
this.previewContainerEl.innerHTML = "<img style='max-width:240px;' src='"+src+"'/>";
this.previewContainerEl.innerHTML = "<div><img style='max-width:240px;' src='"+src+"'/></div>";
};
ns.GifExportController.prototype.getSelectedDpi_ = function () {

87
js/controller/settings/ImportController.js
View file

@ -1,6 +1,8 @@
(function () {
var ns = $.namespace('pskl.controller.settings');
var DEFAULT_FILE_STATUS = 'No file selected ...';
var PREVIEW_HEIGHT = 60;
ns.ImportController = function (piskelController) {
this.piskelController = piskelController;
this.importedImage_ = null;
@ -10,12 +12,15 @@
this.importForm = $("[name=import-form]");
this.hiddenFileInput = $("[name=file-upload-input]");
this.fileInputButton = $(".file-input-button");
this.fileInputStatus=$(".file-input-status");
this.fileInputStatus = $(".file-input-status");
this.fileInputStatus.html(DEFAULT_FILE_STATUS);
this.importPreview = $(".import-section-preview");
this.resizeWidth = $("[name=resize-width]");
this.resizeHeight = $("[name=resize-height]");
this.smoothResize = $("[name=smooth-resize-checkbox]");
this.submitButton = $("[name=import-submit]");
this.importForm.submit(this.onImportFormSubmit_.bind(this));
this.hiddenFileInput.change(this.onFileUploadChange_.bind(this));
@ -69,7 +74,7 @@
var file = files[0];
if (this.isImage_(file)) {
this.readImageFile_(file);
this.enableAdditionalInputs_();
this.enableDisabledSections_();
} else {
this.reset_();
throw "File is not an image : " + file.type;
@ -77,10 +82,16 @@
}
};
ns.ImportController.prototype.enableAdditionalInputs_ = function () {
ns.ImportController.prototype.enableDisabledSections_ = function () {
this.resizeWidth.removeAttr('disabled');
this.resizeHeight.removeAttr('disabled');
this.smoothResize.removeAttr('disabled');
this.submitButton.removeAttr('disabled');
this.fileInputButton.removeClass('button-primary');
this.fileInputButton.blur();
$('.import-section-disabled').removeClass('import-section-disabled');
};
ns.ImportController.prototype.readImageFile_ = function (imageFile) {
@ -101,12 +112,22 @@
ns.ImportController.prototype.onImageLoaded_ = function (evt) {
var w = this.importedImage_.width,
h = this.importedImage_.height;
this.resizeWidth.val(w);
this.resizeHeight.val(h);
var filePath = this.hiddenFileInput.val();
var fileName = this.extractFileNameFromPath_(filePath);
this.fileInputStatus.html(fileName);
this.resizeWidth.val(w);
this.resizeHeight.val(h);
this.importPreview.width("auto");
this.importPreview.append(this.createImagePreview_());
};
ns.ImportController.prototype.createImagePreview_ = function () {
var image = document.createElement('IMG');
image.src = this.importedImage_.src;
image.setAttribute('height', PREVIEW_HEIGHT);
return image;
};
ns.ImportController.prototype.extractFileNameFromPath_ = function (path) {
@ -123,59 +144,23 @@
ns.ImportController.prototype.importImageToPiskel_ = function () {
if (this.importedImage_) {
var image = pskl.utils.ImageResizer.resize(this.importedImage_, this.resizeWidth.val(), this.resizeHeight.val());
var frames = this.createFramesFromImage(image);
var confirmationMessage = "You are about to erase your current Piskel. " +
"A new Piskel will be created from your picture, size : " + image.width + "x" + image.height;
if (window.confirm("You are about to create a new Piskel, unsaved changes will be lost.")) {
var w = this.resizeWidth.val(),
h = this.resizeHeight.val(),
smoothing = !!this.smoothResize.prop('checked');
if (window.confirm(confirmationMessage)) {
var piskel = pskl.utils.Serializer.createPiskel([frames]);
var image = pskl.utils.ImageResizer.resize(this.importedImage_, w, h, smoothing);
var frame = pskl.utils.FrameUtils.createFromImage(image);
var piskel = pskl.utils.Serializer.createPiskel([frame]);
pskl.app.piskelController.setPiskel(piskel);
pskl.app.animationController.setFPS(12);
pskl.app.animationController.setFPS(Constants.DEFAULT.FPS);
this.reset_();
}
}
};
ns.ImportController.prototype.createFramesFromImage = function (image) {
var w = image.width,
h = image.height;
var canvas = pskl.CanvasUtils.createCanvas(w, h);
var context = canvas.getContext('2d');
context.drawImage(image, 0,0,w,h,0,0,w,h);
var imgData = context.getImageData(0,0,w,h).data;
// Draw the zoomed-up pixels to a different canvas context
var frames = [];
for (var x=0;x<image.width;++x){
frames[x] = [];
for (var y=0;y<image.height;++y){
// Find the starting index in the one-dimensional image data
var i = (y*image.width + x)*4;
var r = imgData[i ];
var g = imgData[i+1];
var b = imgData[i+2];
var a = imgData[i+3];
if (a < 125) {
frames[x][y] = "TRANSPARENT";
} else {
frames[x][y] = this.rgbToHex_(r,g,b);
}
}
}
return frames;
};
ns.ImportController.prototype.rgbToHex_ = function (r, g, b) {
return "#" + this.componentToHex_(r) + this.componentToHex_(g) + this.componentToHex_(b);
};
ns.ImportController.prototype.componentToHex_ = function (c) {
var hex = c.toString(16);
return hex.length == 1 ? "0" + hex : hex;
};
ns.ImportController.prototype.isImage_ = function (file) {
return file.type.indexOf('image') === 0;
};

58
js/utils/FrameUtils.js
View file

@ -20,6 +20,62 @@
frameA.setPixel(col, row, p);
}
});
},
/**
* Create a pskl.model.Frame from an Image object.
* Transparent pixels will either be converted to completely opaque or completely transparent pixels.
* @param {Image} image source image
* @return {pskl.model.Frame} corresponding frame
*/
createFromImage : function (image) {
var w = image.width,
h = image.height;
var canvas = pskl.CanvasUtils.createCanvas(w, h);
var context = canvas.getContext('2d');
context.drawImage(image, 0,0,w,h,0,0,w,h);
var imgData = context.getImageData(0,0,w,h).data;
// Draw the zoomed-up pixels to a different canvas context
var frame = [];
for (var x=0;x<image.width;++x){
frame[x] = [];
for (var y=0;y<image.height;++y){
// Find the starting index in the one-dimensional image data
var i = (y*image.width + x)*4;
var r = imgData[i ];
var g = imgData[i+1];
var b = imgData[i+2];
var a = imgData[i+3];
if (a < 125) {
frame[x][y] = "TRANSPARENT";
} else {
frame[x][y] = this.rgbToHex(r,g,b);
}
}
}
return frame;
},
/**
* Convert a rgb(Number, Number, Number) color to hexadecimal representation
* @param {Number} r red value, between 0 and 255
* @param {Number} g green value, between 0 and 255
* @param {Number} b blue value, between 0 and 255
* @return {String} hex representation of the color '#ABCDEF'
*/
rgbToHex : function (r, g, b) {
return "#" + this.componentToHex(r) + this.componentToHex(g) + this.componentToHex(b);
},
/**
* Convert a color component (as a Number between 0 and 255) to its string hexa representation
* @param {Number} c component value, between 0 and 255
* @return {String} eg. '0A'
*/
componentToHex : function (c) {
var hex = c.toString(16);
return hex.length == 1 ? "0" + hex : hex;
}
};
})();
})();

20
js/utils/ImageResizer.js
View file

@ -2,21 +2,29 @@
var ns = $.namespace('pskl.utils');
ns.ImageResizer = {
resizeNearestNeighbour : function (image, targetWidth, targetHeight) {
},
resize : function (image, targetWidth, targetHeight) {
resize : function (image, targetWidth, targetHeight, smoothingEnabled) {
var canvas = pskl.CanvasUtils.createCanvas(targetWidth, targetHeight);
var context = canvas.getContext('2d');
context.save();
if (!smoothingEnabled) {
this.disableSmoothingOnContext(context);
}
context.translate(canvas.width / 2, canvas.height / 2);
context.scale(targetWidth / image.width, targetHeight / image.height);
context.drawImage(image, -image.width / 2, -image.height / 2);
context.restore();
return canvas;
},
disableSmoothingOnContext : function (context) {
context.imageSmoothingEnabled = false;
context.mozImageSmoothingEnabled = false;
context.oImageSmoothingEnabled = false;
context.webkitImageSmoothingEnabled = false;
context.msImageSmoothingEnabled = false;
}
};
})();

4
templates/settings.html
View file

@ -13,12 +13,12 @@
rel="tooltip" data-placement="left">
</div>
<a
<!-- <a
class="tool-icon gallery-icon"
title="Visit gallery"
href="http://juliandescottes.github.io/piskel-website/"
rel="tooltip" data-placement="left" target="_blank">
</a>
</a> -->
<div
class="tool-icon save-icon"

7
templates/settings/export-gif.html
View file

@ -5,13 +5,14 @@
<div class="settings-item">
<label>Select resolution:</label>
<form action="" method="POST" name="gif-export-upload-form">
<script type="text/template" id="export-gif-radio-template">
<script type="text/template" id="gif-export-radio-template">
<label style="display:block"><input type="radio" name="gif-dpi" value="{{value}}"/>
{{label}}</label>
</script>
<div class="gif-export-radio-group"></div>
<input type="submit" class="export-gif-upload-button" value="Upload" />
<input type="submit" class="button button-primary gif-upload-button" value="Upload" />
<button type="button" class="button gif-render-button">Render</button>
</form>
<div class="export-gif-preview"><div></div></div>
<div class="gif-export-preview"></div>
</div>
</div>

14
templates/settings/import.html
View file

@ -6,22 +6,26 @@
<form action="" method="POST" name="import-form">
<div class="import-section">
<span class="import-section-title">File :</span>
<button type="button" class="button file-input-button">Browse</button>
<button type="button" class="button button-primary file-input-button">Browse</button>
<span class="file-input-status"></span>
<input style="display:none"
type="file" name="file-upload-input"
value="file" accept="image/*"/>
</div>
<div class="import-section">
<div class="import-section import-section-disabled">
<span class="import-section-title" style="vertical-align:top">Preview :</span>
<div class="import-section-preview"></div>
</div>
<div class="import-section import-section-disabled">
<span class="import-section-title">Size :</span>
<input type="text" disabled="disabled" class="textfield import-resize-field" name="resize-width"/>x
<input type="text" disabled="disabled" class="textfield import-resize-field" name="resize-height"/>
</div>
<div class="import-section">
<div class="import-section import-section-disabled">
<span class="import-section-title">Smooth resize :</span>
<input type="checkbox" disabled="disabled" checked="checked" name="smooth-resize-checkbox"/>
<input type="checkbox" disabled="disabled" checked="checked" name="smooth-resize-checkbox" value="1"/>
</div>
<input type="submit" class="button import-button" value="Import" />
<input type="submit" name="import-submit" disabled="disabled" class="button button-primary import-button" value="Import" />
</form>
</div>
</div>