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

UI : Align PNG export with GIF export

Browse source 
- PNG export now has its own panel
- Lots of code duplication between PNG and GIF controller => FIXIT
- Added a link displayed after image upload
This commit is contained in:
jdescottes 2014-03-08 17:23:20 +01:00
parent 0072a2c8b0
commit 087b8c57c5
13 changed files with 367 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
css/settings.css
View file

@ -161,7 +161,8 @@
border: gold 1px solid;
}
/* Gif Export Setting panel*/
/* Gif/Png Export Setting panel*/
/*******************************/
.gif-upload-button,
.gif-render-button {
/*float : right;*/
@ -173,12 +174,26 @@
margin:10px 0;
}
.gif-export-preview {
.gif-export-preview,
.png-export-preview {
margin-top:20px;
max-width:240px;
position:relative;
}
.png-export-preview {
margin:10px 0;
overflow: hidden;
}
.png-export-preview img {
float: left;
}
.png-upload-status {
margin : 10px 0;
}
.preview-upload-ongoing:before{
content: "Upload ongoing ...";
position: absolute;

4
css/style.css
View file

@ -300,3 +300,7 @@ body {
.user-message .close:hover {
color: black;
}
.image-link {
color : gold;
}

222
diff.txt Normal file
View file

@ -0,0 +1,222 @@
diff --git a/css/settings.css b/css/settings.css
index 829a727..32dd7df 100644
--- a/css/settings.css
+++ b/css/settings.css
@@ -161,7 +161,8 @@
border: gold 1px solid;
}
-/* Gif Export Setting panel*/
+/* Gif/Png Export Setting panel*/
+/*******************************/
.gif-upload-button,
.gif-render-button {
/*float : right;*/
@@ -173,12 +174,26 @@
margin:10px 0;
}
-.gif-export-preview {
+.gif-export-preview,
+.png-export-preview {
margin-top:20px;
max-width:240px;
position:relative;
}
+.png-export-preview {
+ margin:10px 0;
+ overflow: hidden;
+}
+
+.png-export-preview img {
+ float: left;
+}
+
+.png-upload-status {
+ margin : 10px 0;
+}
+
.preview-upload-ongoing:before{
content: "Upload ongoing ...";
position: absolute;
diff --git a/css/style.css b/css/style.css
index a61879a..fe9405b 100644
--- a/css/style.css
+++ b/css/style.css
@@ -300,3 +300,7 @@ body {
.user-message .close:hover {
color: black;
}
+
+.image-link {
+ color : gold;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 05d758b..36cb01c 100644
--- a/index.html
+++ b/index.html
@@ -51,12 +51,13 @@
<iframe src="templates/settings.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
<div class="drawer vertical-centerer">
<div class="drawer-content" id="drawer-container">
+ <iframe src="templates/settings/save.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
<iframe src="templates/settings/application.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
<iframe src="templates/settings/resize.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
- <iframe src="templates/settings/export-gif.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
<iframe src="templates/settings/import.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
<iframe src="templates/settings/localstorage.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
- <iframe src="templates/settings/save.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
+ <iframe src="templates/settings/export-gif.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
+ <iframe src="templates/settings/export-png.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
</div>
</div>
</div>
diff --git a/js/Constants.js b/js/Constants.js
index 71a12bc..67be116 100644
--- a/js/Constants.js
+++ b/js/Constants.js
@@ -44,8 +44,8 @@ var Constants = {
SAVE : 'save'
}
},
- IMAGE_SERVICE_UPLOAD_URL : 'http://screenletstore.appspot.com/__/upload',
- IMAGE_SERVICE_GET_URL : 'http://screenletstore.appspot.com/img/',
+ IMAGE_SERVICE_UPLOAD_URL : 'http://piskel-imgstore-a.appspot.com/__/upload',
+ IMAGE_SERVICE_GET_URL : 'http://piskel-imgstore-a.appspot.com/img/',
GRID_STROKE_WIDTH: 1,
ZOOMED_OUT_BACKGROUND_COLOR : '#A0A0A0',
diff --git a/js/controller/settings/GifExportController.js b/js/controller/settings/GifExportController.js
index ac7602e..9a5bd75 100644
--- a/js/controller/settings/GifExportController.js
+++ b/js/controller/settings/GifExportController.js
@@ -1,6 +1,8 @@
(function () {
var ns = $.namespace("pskl.controller.settings");
+ var URL_MAX_LENGTH = 60;
+
ns.GifExportController = function (piskelController) {
this.piskelController = piskelController;
};
@@ -26,6 +28,8 @@
ns.GifExportController.prototype.init = function () {
this.radioTemplate_ = pskl.utils.Template.get("gif-export-radio-template");
+ this.uploadStatusContainerEl = document.querySelectorAll(".gif-upload-status")[0];
+
this.previewContainerEl = document.querySelectorAll(".gif-export-preview")[0];
this.radioGroupEl = document.querySelectorAll(".gif-export-radio-group")[0];
@@ -52,7 +56,9 @@
ns.GifExportController.prototype.onImageUploadCompleted_ = function (imageUrl) {
this.updatePreview_(imageUrl);
+ this.updateStatus_(imageUrl);
this.previewContainerEl.classList.remove("preview-upload-ongoing");
+
};
ns.GifExportController.prototype.updatePreview_ = function (src) {
@@ -127,4 +133,27 @@
gif.render();
};
+
+ // FIXME : HORRIBLE COPY/PASTA
+
+ ns.GifExportController.prototype.updateStatus_ = function (imageUrl, error) {
+ if (imageUrl) {
+ var linkTpl = "<a class='image-link' href='{{link}}' target='_blank'>{{shortLink}}</a>";
+ var linkHtml = pskl.utils.Template.replace(linkTpl, {
+ link : imageUrl,
+ shortLink : this.shorten_(imageUrl, URL_MAX_LENGTH, '...')
+ });
+ this.uploadStatusContainerEl.innerHTML = 'Your image is now available at : ' + linkHtml;
+ } else {
+ // FIXME : Should display error message instead
+ }
+ };
+
+ ns.GifExportController.prototype.shorten_ = function (url, maxLength, suffix) {
+ if (url.length > maxLength) {
+ url = url.substring(0, maxLength);
+ url += suffix;
+ }
+ return url;
+ };
})();
\ No newline at end of file
diff --git a/js/controller/settings/SettingsController.js b/js/controller/settings/SettingsController.js
index de4a0bd..dc20b2d 100644
--- a/js/controller/settings/SettingsController.js
+++ b/js/controller/settings/SettingsController.js
@@ -14,6 +14,10 @@
template : 'templates/settings/export-gif.html',
controller : ns.GifExportController
},
+ 'png' : {
+ template : 'templates/settings/export-png.html',
+ controller : ns.PngExportController
+ },
'import' : {
template : 'templates/settings/import.html',
controller : ns.ImportController
diff --git a/js/drawingtools/BaseTool.js b/js/drawingtools/BaseTool.js
index 1d2dfd4..a78d5cf 100644
--- a/js/drawingtools/BaseTool.js
+++ b/js/drawingtools/BaseTool.js
@@ -33,7 +33,11 @@
ns.BaseTool.prototype.hideHighlightedPixel = function(overlay) {
if (this.highlightedPixelRow !== null && this.highlightedPixelCol !== null) {
- overlay.setPixel(this.highlightedPixelCol, this.highlightedPixelRow, Constants.TRANSPARENT_COLOR);
+ try {
+ overlay.setPixel(this.highlightedPixelCol, this.highlightedPixelRow, Constants.TRANSPARENT_COLOR);
+ } catch (e) {
+ console.warn('ns.BaseTool.prototype.hideHighlightedPixel failed');
+ }
this.highlightedPixelRow = null;
this.highlightedPixelCol = null;
}
diff --git a/piskel-script-list.js b/piskel-script-list.js
index 65247a7..6048fa7 100644
--- a/piskel-script-list.js
+++ b/piskel-script-list.js
@@ -72,6 +72,7 @@ exports.scripts = [
"js/controller/settings/ApplicationSettingsController.js",
"js/controller/settings/ResizeController.js",
"js/controller/settings/GifExportController.js",
+ "js/controller/settings/PngExportController.js",
"js/controller/settings/LocalStorageController.js",
"js/controller/settings/SaveController.js",
"js/controller/settings/ImportController.js",
diff --git a/templates/settings.html b/templates/settings.html
index bb12a43..22b9a43 100644
--- a/templates/settings.html
+++ b/templates/settings.html
@@ -43,9 +43,9 @@
</div>
<div
+ data-setting="png"
class="tool-icon upload-cloud-icon"
title="Upload as a spritesheet PNG"
- onclick="pskl.app.uploadAsSpritesheetPNG()"
rel="tooltip" data-placement="left">
<span class="label">PNG</span>
</div>
diff --git a/templates/settings/export-gif.html b/templates/settings/export-gif.html
index b2c9576..97feaf3 100644
--- a/templates/settings/export-gif.html
+++ b/templates/settings/export-gif.html
@@ -13,5 +13,6 @@
<input type="submit" class="button button-primary gif-upload-button" value="Upload" />
</form>
<div class="gif-export-preview"></div>
+ <div class="gif-upload-status"></div>
</div>
</div>
\ No newline at end of file

5
index.html
View file

@ -51,12 +51,13 @@
<iframe src="templates/settings.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
<div class="drawer vertical-centerer">
<div class="drawer-content" id="drawer-container">
<iframe src="templates/settings/save.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
<iframe src="templates/settings/application.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
<iframe src="templates/settings/resize.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
<iframe src="templates/settings/export-gif.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
<iframe src="templates/settings/import.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
<iframe src="templates/settings/localstorage.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
<iframe src="templates/settings/save.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
<iframe src="templates/settings/export-gif.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
<iframe src="templates/settings/export-png.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
</div>
</div>
</div>

4
js/Constants.js
View file

@ -44,8 +44,8 @@ var Constants = {
SAVE : 'save'
}
},
IMAGE_SERVICE_UPLOAD_URL : 'http://screenletstore.appspot.com/__/upload',
IMAGE_SERVICE_GET_URL : 'http://screenletstore.appspot.com/img/',
IMAGE_SERVICE_UPLOAD_URL : 'http://piskel-imgstore-a.appspot.com/__/upload',
IMAGE_SERVICE_GET_URL : 'http://piskel-imgstore-a.appspot.com/img/',
GRID_STROKE_WIDTH: 1,
ZOOMED_OUT_BACKGROUND_COLOR : '#A0A0A0',

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

@ -1,6 +1,8 @@
(function () {
var ns = $.namespace("pskl.controller.settings");
var URL_MAX_LENGTH = 60;
ns.GifExportController = function (piskelController) {
this.piskelController = piskelController;
};
@ -26,6 +28,8 @@
ns.GifExportController.prototype.init = function () {
this.radioTemplate_ = pskl.utils.Template.get("gif-export-radio-template");
this.uploadStatusContainerEl = document.querySelectorAll(".gif-upload-status")[0];
this.previewContainerEl = document.querySelectorAll(".gif-export-preview")[0];
this.radioGroupEl = document.querySelectorAll(".gif-export-radio-group")[0];
@ -52,7 +56,9 @@
ns.GifExportController.prototype.onImageUploadCompleted_ = function (imageUrl) {
this.updatePreview_(imageUrl);
this.updateStatus_(imageUrl);
this.previewContainerEl.classList.remove("preview-upload-ongoing");
};
ns.GifExportController.prototype.updatePreview_ = function (src) {
@ -127,4 +133,27 @@
gif.render();
};
// FIXME : HORRIBLE COPY/PASTA
ns.GifExportController.prototype.updateStatus_ = function (imageUrl, error) {
if (imageUrl) {
var linkTpl = "<a class='image-link' href='{{link}}' target='_blank'>{{shortLink}}</a>";
var linkHtml = pskl.utils.Template.replace(linkTpl, {
link : imageUrl,
shortLink : this.shorten_(imageUrl, URL_MAX_LENGTH, '...')
});
this.uploadStatusContainerEl.innerHTML = 'Your image is now available at : ' + linkHtml;
} else {
// FIXME : Should display error message instead
}
};
ns.GifExportController.prototype.shorten_ = function (url, maxLength, suffix) {
if (url.length > maxLength) {
url = url.substring(0, maxLength);
url += suffix;
}
return url;
};
})();

63
js/controller/settings/PngExportController.js Normal file
View file

@ -0,0 +1,63 @@
(function () {
var ns = $.namespace("pskl.controller.settings");
var URL_MAX_LENGTH = 60;
ns.PngExportController = function (piskelController) {
this.piskelController = piskelController;
};
ns.PngExportController.prototype.init = function () {
this.previewContainerEl = document.querySelectorAll(".png-export-preview")[0];
this.uploadStatusContainerEl = document.querySelectorAll(".png-upload-status")[0];
this.uploadForm = $("[name=png-export-upload-form]");
this.uploadForm.submit(this.onUploadFormSubmit_.bind(this));
this.updatePreview_(this.getFramesheetAsBase64Png());
};
ns.PngExportController.prototype.onUploadFormSubmit_ = function (evt) {
evt.originalEvent.preventDefault();
this.previewContainerEl.classList.add("preview-upload-ongoing");
pskl.app.imageUploadService.upload(this.getFramesheetAsBase64Png(), this.onImageUploadCompleted_.bind(this));
};
ns.PngExportController.prototype.getFramesheetAsBase64Png = function () {
var renderer = new pskl.rendering.PiskelRenderer(this.piskelController);
var framesheetCanvas = renderer.renderAsCanvas();
return framesheetCanvas.toDataURL("image/png");
};
ns.PngExportController.prototype.onImageUploadCompleted_ = function (imageUrl) {
this.updatePreview_(imageUrl);
this.updateStatus_(imageUrl);
this.previewContainerEl.classList.remove("preview-upload-ongoing");
};
ns.PngExportController.prototype.updateStatus_ = function (imageUrl, error) {
if (imageUrl) {
var linkTpl = "<a class='image-link' href='{{link}}' target='_blank'>{{shortLink}}</a>";
var linkHtml = pskl.utils.Template.replace(linkTpl, {
link : imageUrl,
shortLink : this.shorten_(imageUrl, URL_MAX_LENGTH, '...')
});
this.uploadStatusContainerEl.innerHTML = 'Your image is now available at : ' + linkHtml;
} else {
// FIXME : Should display error message instead
}
};
ns.PngExportController.prototype.updatePreview_ = function (src) {
this.previewContainerEl.innerHTML = "<img class='light-picker-background' style='max-width:240px;' src='"+src+"'/>";
};
ns.PngExportController.prototype.shorten_ = function (url, maxLength, suffix) {
if (url.length > maxLength) {
url = url.substring(0, maxLength);
url += suffix;
}
return url;
};
})();

4
js/controller/settings/SettingsController.js
View file

@ -14,6 +14,10 @@
template : 'templates/settings/export-gif.html',
controller : ns.GifExportController
},
'png' : {
template : 'templates/settings/export-png.html',
controller : ns.PngExportController
},
'import' : {
template : 'templates/settings/import.html',
controller : ns.ImportController

6
js/drawingtools/BaseTool.js
View file

@ -33,7 +33,11 @@
ns.BaseTool.prototype.hideHighlightedPixel = function(overlay) {
if (this.highlightedPixelRow !== null && this.highlightedPixelCol !== null) {
overlay.setPixel(this.highlightedPixelCol, this.highlightedPixelRow, Constants.TRANSPARENT_COLOR);
try {
overlay.setPixel(this.highlightedPixelCol, this.highlightedPixelRow, Constants.TRANSPARENT_COLOR);
} catch (e) {
console.warn('ns.BaseTool.prototype.hideHighlightedPixel failed');
}
this.highlightedPixelRow = null;
this.highlightedPixelCol = null;
}

1
piskel-script-list.js
View file

@ -72,6 +72,7 @@ exports.scripts = [
"js/controller/settings/ApplicationSettingsController.js",
"js/controller/settings/ResizeController.js",
"js/controller/settings/GifExportController.js",
"js/controller/settings/PngExportController.js",
"js/controller/settings/LocalStorageController.js",
"js/controller/settings/SaveController.js",
"js/controller/settings/ImportController.js",

2
templates/settings.html
View file

@ -43,9 +43,9 @@
</div>
<div
data-setting="png"
class="tool-icon upload-cloud-icon"
title="Upload as a spritesheet PNG"
onclick="pskl.app.uploadAsSpritesheetPNG()"
rel="tooltip" data-placement="left">
<span class="label">PNG</span>
</div>

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

@ -13,5 +13,6 @@
<input type="submit" class="button button-primary gif-upload-button" value="Upload" />
</form>
<div class="gif-export-preview"></div>
<div class="gif-upload-status"></div>
</div>
</div>

15
templates/settings/export-png.html Normal file
View file

@ -0,0 +1,15 @@
<div class="settings-section">
<div class="settings-title">
Export to PNG
</div>
<div class="settings-item">
<span>Preview : </span>
<div class="png-export-preview"></div>
<form action="" method="POST" name="png-export-upload-form">
<div class="png-export-radio-group"></div>
<input type="submit" class="button button-primary png-upload-button" value="Upload" />
<!-- <input type="button" class="button png-download-button" value="Download" /> -->
<div class="png-upload-status"></div>
</form>
</div>
</div>