From e97a641e9547b8b5268a7246c2b313a63044eaa2 Mon Sep 17 00:00:00 2001 From: juliandescottes Date: Wed, 21 Dec 2016 13:15:13 +0100 Subject: [PATCH 1/7] add constant for the max datastore accepted size --- src/js/Constants.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/js/Constants.js b/src/js/Constants.js index e2f9048e..c11c5823 100644 --- a/src/js/Constants.js +++ b/src/js/Constants.js @@ -49,6 +49,9 @@ var Constants = { // TESTS DRAWING_TEST_FOLDER : 'drawing', + // Maximum size of a sprite that can be saved on piskelapp datastore. + APPENGINE_SAVE_LIMIT : 1000, + // SERVICE URLS APPENGINE_SAVE_URL : 'save', IMAGE_SERVICE_UPLOAD_URL : 'http://piskel-imgstore-b.appspot.com/__/upload', From 184b2e48aa4470325d9ff5b1b123ef52ce4bd047 Mon Sep 17 00:00:00 2001 From: juliandescottes Date: Wed, 21 Dec 2016 17:44:33 +0100 Subject: [PATCH 2/7] disable gallery save when if spritesheet size too big (WIP) --- src/js/Constants.js | 5 ++- src/js/controller/settings/SaveController.js | 35 ++++++++++++++++++++ src/templates/settings/save.html | 2 +- 3 files changed, 40 insertions(+), 2 deletions(-) diff --git a/src/js/Constants.js b/src/js/Constants.js index c11c5823..3142b6e5 100644 --- a/src/js/Constants.js +++ b/src/js/Constants.js @@ -50,7 +50,10 @@ var Constants = { DRAWING_TEST_FOLDER : 'drawing', // Maximum size of a sprite that can be saved on piskelapp datastore. - APPENGINE_SAVE_LIMIT : 1000, + // This size will be compared to the length of the stringified serialization of the sprite. + // This is an approximation at best but gives correct results in most cases. + // The datastore limit is 1 MiB, which we roughly approximate to 1 million characters. + APPENGINE_SAVE_LIMIT : 1 * 1000 * 1000, // SERVICE URLS APPENGINE_SAVE_URL : 'save', diff --git a/src/js/controller/settings/SaveController.js b/src/js/controller/settings/SaveController.js index 4597926c..dc418d34 100644 --- a/src/js/controller/settings/SaveController.js +++ b/src/js/controller/settings/SaveController.js @@ -19,6 +19,8 @@ * @public */ ns.SaveController.prototype.init = function () { + this.getPiskelSize_().then(this.onPiskelSizeCalculated_.bind(this)); + this.saveForm = document.querySelector('.save-form'); this.insertSavePartials_(); @@ -50,6 +52,37 @@ $.subscribe(Events.AFTER_SAVING_PISKEL, this.enableSaveButtons_.bind(this)); }; + /** + * Retrieve the size of the spritesheet that will be saved. + * Not completely accurate, as the size canbe impacted by whatever the user enters + * in the name and description fields on the save panel, but should give a rough idea. + * + * @return {Promise} promise that will resolve the spritesheet size {Number} + */ + ns.SaveController.prototype.getPiskelSize_ = function () { + var piskelController = this.piskelController; + return new Promise(function (resolve, reject) { + window.setTimeout(function () { + try { + var spritesheetSize = JSON.stringify(piskelController.serialize()).length; + resolve(spritesheetSize); + } catch (e) { + reject(e); + } + }, 100); + }); + }; + + ns.SaveController.prototype.onPiskelSizeCalculated_ = function (spritesheetSize) { + if (this.saveGalleryButton && spritesheetSize > Constants.APPENGINE_SAVE_LIMIT) { + this.saveGalleryButton.setAttribute('disabled', true); + document.querySelector('.save-online-status').innerHTML = + '
 
' + + '
This sprite is too big to be saved on the gallery. ' + + 'Try saving it as a .piskel file.
'; + } + }; + ns.SaveController.prototype.insertSavePartials_ = function () { this.getPartials_().forEach(function (partial) { pskl.utils.Template.insert(this.saveForm, 'beforeend', partial); @@ -65,6 +98,8 @@ return [PARTIALS.GALLERY, PARTIALS.LOCALSTORAGE, PARTIALS.FILEDOWNLOAD]; } + // Uncomment this line to test the online save section locally. + // return [PARTIALS.FILEDOWNLOAD, PARTIALS.LOCALSTORAGE, PARTIALS.GALLERY]; return [PARTIALS.FILEDOWNLOAD, PARTIALS.LOCALSTORAGE, PARTIALS.GALLERY_UNAVAILABLE]; }; diff --git a/src/templates/settings/save.html b/src/templates/settings/save.html index aef784dc..87737a9a 100644 --- a/src/templates/settings/save.html +++ b/src/templates/settings/save.html @@ -26,7 +26,7 @@
Save online
-
Your piskel will be stored online in your gallery.
+
Your piskel will be stored online in your gallery.
From 01b98981819e8197d5ce9abcab87714f563c7cfa Mon Sep 17 00:00:00 2001 From: Julian Descottes Date: Thu, 22 Dec 2016 10:32:16 +0100 Subject: [PATCH 3/7] improve serialization error detection for firefox --- src/js/utils/serialization/Serializer.js | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/src/js/utils/serialization/Serializer.js b/src/js/utils/serialization/Serializer.js index 938a2930..cfc4b411 100644 --- a/src/js/utils/serialization/Serializer.js +++ b/src/js/utils/serialization/Serializer.js @@ -3,7 +3,7 @@ var areChunksValid = function (chunks) { return chunks.length && chunks.every(function (chunk) { - return chunk.base64PNG; + return chunk.base64PNG && chunk.base64PNG !== "data:,"; }); }; @@ -49,7 +49,7 @@ // retry. var chunks = []; while (!areChunksValid(chunks)) { - if (chunks.length > frames.length) { + if (chunks.length >= frames.length) { // Something went horribly wrong. chunks = []; break; @@ -65,11 +65,10 @@ var offset = 0; for (var i = 0 ; i < frameChunks.length ; i++) { var chunkFrames = frameChunks[i]; - var renderer = new pskl.rendering.FramesheetRenderer(chunkFrames); chunks.push({ - base64PNG : renderer.renderAsCanvas().toDataURL(), // create a layout array, containing the indices of the frames extracted in this chunk layout : createLineLayout(chunkFrames.length, offset), + base64PNG : ns.Serializer.serializeFramesToBase64(chunkFrames), }); offset += chunkFrames.length; @@ -78,6 +77,15 @@ layerToSerialize.chunks = chunks; return JSON.stringify(layerToSerialize); + }, + + serializeFramesToBase64 : function (frames) { + try { + var renderer = new pskl.rendering.FramesheetRenderer(frames); + return renderer.renderAsCanvas().toDataURL(); + } catch (e) { + return ""; + } } }; })(); From 9518d570e60d2692b11a0b81a12284515993296a Mon Sep 17 00:00:00 2001 From: Julian Descottes Date: Thu, 22 Dec 2016 12:11:46 +0100 Subject: [PATCH 4/7] display save to gallery warning if performance issue detected --- src/js/controller/settings/SaveController.js | 37 ++++--------------- .../performance/PerformanceReportService.js | 4 ++ .../service/storage/GalleryStorageService.js | 4 ++ src/js/service/storage/StorageService.js | 11 ++++-- src/templates/settings/save.html | 4 +- 5 files changed, 26 insertions(+), 34 deletions(-) diff --git a/src/js/controller/settings/SaveController.js b/src/js/controller/settings/SaveController.js index dc418d34..3f2c910b 100644 --- a/src/js/controller/settings/SaveController.js +++ b/src/js/controller/settings/SaveController.js @@ -19,8 +19,6 @@ * @public */ ns.SaveController.prototype.init = function () { - this.getPiskelSize_().then(this.onPiskelSizeCalculated_.bind(this)); - this.saveForm = document.querySelector('.save-form'); this.insertSavePartials_(); @@ -48,38 +46,17 @@ this.disableSaveButtons_(); } + this.updateSaveToGalleryMessage_(); + $.subscribe(Events.BEFORE_SAVING_PISKEL, this.disableSaveButtons_.bind(this)); $.subscribe(Events.AFTER_SAVING_PISKEL, this.enableSaveButtons_.bind(this)); }; - /** - * Retrieve the size of the spritesheet that will be saved. - * Not completely accurate, as the size canbe impacted by whatever the user enters - * in the name and description fields on the save panel, but should give a rough idea. - * - * @return {Promise} promise that will resolve the spritesheet size {Number} - */ - ns.SaveController.prototype.getPiskelSize_ = function () { - var piskelController = this.piskelController; - return new Promise(function (resolve, reject) { - window.setTimeout(function () { - try { - var spritesheetSize = JSON.stringify(piskelController.serialize()).length; - resolve(spritesheetSize); - } catch (e) { - reject(e); - } - }, 100); - }); - }; - - ns.SaveController.prototype.onPiskelSizeCalculated_ = function (spritesheetSize) { - if (this.saveGalleryButton && spritesheetSize > Constants.APPENGINE_SAVE_LIMIT) { - this.saveGalleryButton.setAttribute('disabled', true); + ns.SaveController.prototype.updateSaveToGalleryMessage_ = function (spritesheetSize) { + if (pskl.app.performanceReportService.hasProblem()) { document.querySelector('.save-online-status').innerHTML = - '
 
' + - '
This sprite is too big to be saved on the gallery. ' + - 'Try saving it as a .piskel file.
'; + '
 
' + + '
Saving to the gallery might fail due to the sprite size.
'; } }; @@ -99,7 +76,7 @@ } // Uncomment this line to test the online save section locally. - // return [PARTIALS.FILEDOWNLOAD, PARTIALS.LOCALSTORAGE, PARTIALS.GALLERY]; + return [PARTIALS.FILEDOWNLOAD, PARTIALS.LOCALSTORAGE, PARTIALS.GALLERY]; return [PARTIALS.FILEDOWNLOAD, PARTIALS.LOCALSTORAGE, PARTIALS.GALLERY_UNAVAILABLE]; }; diff --git a/src/js/service/performance/PerformanceReportService.js b/src/js/service/performance/PerformanceReportService.js index 43a8ab8b..2f77b113 100644 --- a/src/js/service/performance/PerformanceReportService.js +++ b/src/js/service/performance/PerformanceReportService.js @@ -22,4 +22,8 @@ this.currentReport = report; } }; + + ns.PerformanceReportService.prototype.hasProblem = function () { + return this.currentReport && this.currentReport.hasProblem(); + }; })(); diff --git a/src/js/service/storage/GalleryStorageService.js b/src/js/service/storage/GalleryStorageService.js index 030f0bb1..725c51fa 100644 --- a/src/js/service/storage/GalleryStorageService.js +++ b/src/js/service/storage/GalleryStorageService.js @@ -23,6 +23,10 @@ framesheet_as_png : pskl.app.getFramesheetAsPng() }; + if (serialized.length > Constants.APPENGINE_SAVE_LIMIT) { + deferred.reject('This sprite is too big to be saved on the gallery. Try saving it as a .piskel file.'); + } + if (descriptor.isPublic) { data.public = true; } diff --git a/src/js/service/storage/StorageService.js b/src/js/service/storage/StorageService.js index 0973fd19..e4407c46 100644 --- a/src/js/service/storage/StorageService.js +++ b/src/js/service/storage/StorageService.js @@ -80,7 +80,10 @@ }; ns.StorageService.prototype.onSaveSuccess_ = function () { - $.publish(Events.SHOW_NOTIFICATION, [{'content': 'Successfully saved !'}]); + $.publish(Events.SHOW_NOTIFICATION, [{ + content : 'Successfully saved !', + hideDelay : 3000 + }]); $.publish(Events.PISKEL_SAVED); this.afterSaving_(); }; @@ -90,14 +93,16 @@ if (errorMessage) { errorText += ' : ' + errorMessage; } - $.publish(Events.SHOW_NOTIFICATION, [{'content': errorText}]); + $.publish(Events.SHOW_NOTIFICATION, [{ + content : errorText, + hideDelay : 10000 + }]); this.afterSaving_(); return Q.reject(errorMessage); }; ns.StorageService.prototype.afterSaving_ = function () { $.publish(Events.AFTER_SAVING_PISKEL); - window.setTimeout($.publish.bind($, Events.HIDE_NOTIFICATION), 5000); }; ns.StorageService.prototype.setSavingFlag_ = function (savingFlag) { diff --git a/src/templates/settings/save.html b/src/templates/settings/save.html index 87737a9a..957ae8a4 100644 --- a/src/templates/settings/save.html +++ b/src/templates/settings/save.html @@ -26,7 +26,9 @@
Save online
-
Your piskel will be stored online in your gallery.
+
+
Your piskel will be stored online in your gallery.
+
From 98527c6dedae9263edb11da63421f6cfeb3c5d6b Mon Sep 17 00:00:00 2001 From: Julian Descottes Date: Thu, 22 Dec 2016 12:38:19 +0100 Subject: [PATCH 5/7] update notification style to use piskel theme colors --- src/css/notifications.css | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/css/notifications.css b/src/css/notifications.css index 3cdfbb31..6cd2e66a 100644 --- a/src/css/notifications.css +++ b/src/css/notifications.css @@ -6,12 +6,12 @@ max-width: 300px; border-top-left-radius: 7px; - border: #F0C36D 1px solid; + border: #e1a325 2px solid; border-right: 0; border-bottom: 0; color: #222; - background-color: #F9EDBE; + background-color: var(--highlight-color); font-weight: bold; font-size: 13px; @@ -24,8 +24,6 @@ top: 6px; right: 17px; - color: gray; - font-size: 18px; font-weight: bold; From c0f7e7be525379e9a43a6f19257a23a75b9ac524 Mon Sep 17 00:00:00 2001 From: Julian Descottes Date: Sat, 24 Dec 2016 10:43:12 +0100 Subject: [PATCH 6/7] jshint cleanup, move HTML to a template, add css classes --- src/css/settings-save.css | 10 ++++++++++ src/js/controller/settings/SaveController.js | 6 ++---- src/js/utils/serialization/Serializer.js | 4 ++-- src/templates/settings/save.html | 9 ++++++--- 4 files changed, 20 insertions(+), 9 deletions(-) diff --git a/src/css/settings-save.css b/src/css/settings-save.css index db9be2c5..25df9f69 100644 --- a/src/css/settings-save.css +++ b/src/css/settings-save.css @@ -24,3 +24,13 @@ color: white; font-style: normal; } + +.save-status-warning-icon { + float: left; + margin-top: 5px; +} + +.save-status-warning-icon { + overflow: hidden; + padding-left: 10px; +} diff --git a/src/js/controller/settings/SaveController.js b/src/js/controller/settings/SaveController.js index 3f2c910b..956f903b 100644 --- a/src/js/controller/settings/SaveController.js +++ b/src/js/controller/settings/SaveController.js @@ -54,9 +54,8 @@ ns.SaveController.prototype.updateSaveToGalleryMessage_ = function (spritesheetSize) { if (pskl.app.performanceReportService.hasProblem()) { - document.querySelector('.save-online-status').innerHTML = - '
 
' + - '
Saving to the gallery might fail due to the sprite size.
'; + var warningPartial = pskl.utils.Template.get('save-gallery-warning-partial'); + document.querySelector('.save-online-status').innerHTML = warningPartial; } }; @@ -76,7 +75,6 @@ } // Uncomment this line to test the online save section locally. - return [PARTIALS.FILEDOWNLOAD, PARTIALS.LOCALSTORAGE, PARTIALS.GALLERY]; return [PARTIALS.FILEDOWNLOAD, PARTIALS.LOCALSTORAGE, PARTIALS.GALLERY_UNAVAILABLE]; }; diff --git a/src/js/utils/serialization/Serializer.js b/src/js/utils/serialization/Serializer.js index cfc4b411..553e2ae2 100644 --- a/src/js/utils/serialization/Serializer.js +++ b/src/js/utils/serialization/Serializer.js @@ -3,7 +3,7 @@ var areChunksValid = function (chunks) { return chunks.length && chunks.every(function (chunk) { - return chunk.base64PNG && chunk.base64PNG !== "data:,"; + return chunk.base64PNG && chunk.base64PNG !== 'data:,'; }); }; @@ -84,7 +84,7 @@ var renderer = new pskl.rendering.FramesheetRenderer(frames); return renderer.renderAsCanvas().toDataURL(); } catch (e) { - return ""; + return ''; } } }; diff --git a/src/templates/settings/save.html b/src/templates/settings/save.html index 957ae8a4..8b933272 100644 --- a/src/templates/settings/save.html +++ b/src/templates/settings/save.html @@ -26,12 +26,15 @@
Save online
-
-
Your piskel will be stored online in your gallery.
-
+
Your piskel will be stored online in your gallery.
+ +