From 58cf9f8390684b84d807ac4b9431090a96d79a37 Mon Sep 17 00:00:00 2001 From: juliandescottes Date: Sun, 20 Nov 2016 21:12:28 +0100 Subject: [PATCH 1/5] issue #555 detect performance issues based on sprite specs --- src/js/Events.js | 2 + src/js/app.js | 7 +++ src/js/controller/UserWarningController.js | 35 +++++++++++++++ .../service/performance/PerformanceReport.js | 45 +++++++++++++++++++ .../performance/PerformanceReportService.js | 25 +++++++++++ src/piskel-script-list.js | 3 ++ 6 files changed, 117 insertions(+) create mode 100644 src/js/controller/UserWarningController.js create mode 100644 src/js/service/performance/PerformanceReport.js create mode 100644 src/js/service/performance/PerformanceReportService.js diff --git a/src/js/Events.js b/src/js/Events.js index 75c37067..65f921f1 100644 --- a/src/js/Events.js +++ b/src/js/Events.js @@ -80,6 +80,8 @@ var Events = { CURRENT_COLORS_UPDATED : 'CURRENT_COLORS_UPDATED', + PERFORMANCE_REPORT_CHANGED : 'PERFORMANCE_REPORT_CHANGED', + // Tests MOUSE_EVENT : 'MOUSE_EVENT', KEYBOARD_EVENT : 'KEYBOARD_EVENT', diff --git a/src/js/app.js b/src/js/app.js index 83ce44a4..2959beb6 100644 --- a/src/js/app.js +++ b/src/js/app.js @@ -153,6 +153,13 @@ document.querySelector('#drawing-canvas-container')); this.fileDropperService.init(); + this.userWarningController = new pskl.controller.UserWarningController(this.piskelController); + this.userWarningController.init(); + + this.performanceReportService = new pskl.service.performance.PerformanceReportService( + this.piskelController, this.currentColorsService); + this.performanceReportService.init(); + this.drawingLoop = new pskl.rendering.DrawingLoop(); this.drawingLoop.addCallback(this.render, this); this.drawingLoop.start(); diff --git a/src/js/controller/UserWarningController.js b/src/js/controller/UserWarningController.js new file mode 100644 index 00000000..ae1b787f --- /dev/null +++ b/src/js/controller/UserWarningController.js @@ -0,0 +1,35 @@ +(function () { + var ns = $.namespace('pskl.controller'); + + ns.UserWarningController = function (piskelController, currentColorsService) { + this.piskelController = piskelController; + this.currentColorsService = currentColorsService; + this.isWarningDisplayed = false; + }; + + ns.UserWarningController.prototype.init = function () { + $.subscribe(Events.PERFORMANCE_REPORT_CHANGED, this.onPerformanceReportChanged_.bind(this)); + }; + + ns.UserWarningController.prototype.onPerformanceReportChanged_ = function (event, report) { + console.log(report); + + var shouldDisplayWarning = report.hasProblem(); + if (shouldDisplayWarning && !this.isWarningDisplayed) { + // show a notification + // show the warning bubble + $.publish(Events.SHOW_NOTIFICATION, [{ + 'content': 'performance problem notification', + 'hideDelay' : 5000 + }]); + console.log('should show a performance notification'); + this.isWarningDisplayed = true; + } + + if (!shouldDisplayWarning && this.isWarningDisplayed) { + // hide the warning bubble + console.log('should hide a performance notification'); + this.isWarningDisplayed = false; + } + }; +})(); diff --git a/src/js/service/performance/PerformanceReport.js b/src/js/service/performance/PerformanceReport.js new file mode 100644 index 00000000..2cdebf20 --- /dev/null +++ b/src/js/service/performance/PerformanceReport.js @@ -0,0 +1,45 @@ +(function () { + var ns = $.namespace('pskl.service.performance'); + + /** + * We consider that piskel should behave correctly for a sprite with the following specs: + * - 256*256 + * - 30 frames + * - 5 layers + * - 30 colors + * Based on these assumptions, as well as a few arbitrary hard limits we try to check + * if the provided sprite might present a performance issue. + * + * @param {Piskel} piskel the sprite to analyze + * @param {Number} colorsCount number of colors for the current sprite + * (not part of the piskel model so has to be provided separately). + */ + ns.PerformanceReport = function (piskel, colorsCount) { + var pixels = piskel.getWidth() * piskel.getHeight(); + this.resolution = pixels > (500 * 500); + + var layersCount = piskel.getLayers().length; + this.layers = layersCount > 25; + + var framesCount = piskel.getLayerAt(0).size(); + this.frames = framesCount > 100; + + this.colors = colorsCount > 100; + + var overallScore = (pixels / 2500) + (layersCount * 4) + framesCount + colorsCount; + this.overall = overallScore > 100; + }; + + ns.PerformanceReport.prototype.equals = function (report) { + return (report instanceof ns.PerformanceReport && + this.resolution == report.resolution && + this.layers == report.layers && + this.frames == report.frames && + this.colors == report.colors && + this.overall == report.overall); + }; + + ns.PerformanceReport.prototype.hasProblem = function () { + return this.resolution || this.layers || this.frames || this.colors || this.overall; + }; +})(); diff --git a/src/js/service/performance/PerformanceReportService.js b/src/js/service/performance/PerformanceReportService.js new file mode 100644 index 00000000..43a8ab8b --- /dev/null +++ b/src/js/service/performance/PerformanceReportService.js @@ -0,0 +1,25 @@ +(function () { + var ns = $.namespace('pskl.service.performance'); + + ns.PerformanceReportService = function (piskelController, currentColorsService) { + this.piskelController = piskelController; + this.currentColorsService = currentColorsService; + + this.currentReport = null; + }; + + ns.PerformanceReportService.prototype.init = function () { + $.subscribe(Events.HISTORY_STATE_SAVED, this.createReport_.bind(this)); + }; + + ns.PerformanceReportService.prototype.createReport_ = function () { + var report = new ns.PerformanceReport( + this.piskelController.getPiskel(), + this.currentColorsService.getCurrentColors().length); + + if (!report.equals(this.currentReport)) { + $.publish(Events.PERFORMANCE_REPORT_CHANGED, [report]); + this.currentReport = report; + } + }; +})(); diff --git a/src/piskel-script-list.js b/src/piskel-script-list.js index e5d6f605..4de8e3ff 100644 --- a/src/piskel-script-list.js +++ b/src/piskel-script-list.js @@ -115,6 +115,7 @@ "js/controller/NotificationController.js", "js/controller/TransformationsController.js", "js/controller/CanvasBackgroundController.js", + "js/controller/UserWarningController.js", // Settings sub-controllers "js/controller/settings/AbstractSettingController.js", @@ -181,6 +182,8 @@ "js/service/FileDropperService.js", "js/service/SelectedColorsService.js", "js/service/MouseStateService.js", + "js/service/performance/PerformanceReport.js", + "js/service/performance/PerformanceReportService.js", "js/service/storage/LocalStorageService.js", "js/service/storage/GalleryStorageService.js", "js/service/storage/DesktopStorageService.js", From d0cca52f478bd3e3f29fa179cea86c73daccea48 Mon Sep 17 00:00:00 2001 From: juliandescottes Date: Mon, 28 Nov 2016 01:00:49 +0100 Subject: [PATCH 2/5] issue #555: add performance warning icon, show dialog --- src/css/animations.css | 6 +++ src/css/dialogs-performance-info.css | 34 ++++++++++++ src/img/icons/common/common-warning-red.png | Bin 0 -> 285 bytes .../icons/common/common-warning-red@2x.png | Bin 0 -> 357 bytes src/index.html | 6 ++- src/js/controller/UserWarningController.js | 50 ++++++++++++------ .../controller/dialogs/DialogsController.js | 4 ++ .../dialogs/PerformanceInfoController.js | 11 ++++ src/piskel-script-list.js | 1 + src/piskel-style-list.js | 1 + src/templates/dialogs/performance-info.html | 11 ++++ 11 files changed, 108 insertions(+), 16 deletions(-) create mode 100644 src/css/dialogs-performance-info.css create mode 100644 src/img/icons/common/common-warning-red.png create mode 100644 src/img/icons/common/common-warning-red@2x.png create mode 100644 src/js/controller/dialogs/PerformanceInfoController.js create mode 100644 src/templates/dialogs/performance-info.html diff --git a/src/css/animations.css b/src/css/animations.css index 83463b4a..f24f9e72 100644 --- a/src/css/animations.css +++ b/src/css/animations.css @@ -1,3 +1,9 @@ @keyframes fade { 50% { opacity: 0.5; } } + +@keyframes glow { + 0% { opacity: 0.66; } + 50% { opacity: 1; } + 100% { opacity: 0.66; } +} diff --git a/src/css/dialogs-performance-info.css b/src/css/dialogs-performance-info.css new file mode 100644 index 00000000..81ced106 --- /dev/null +++ b/src/css/dialogs-performance-info.css @@ -0,0 +1,34 @@ +.performance-link { + display: none; + position: fixed; + bottom: 10px; + right: 10px; + z-index: 11000; + cursor: pointer; + opacity: 0; + transition : opacity 0.3s; +} + +.performance-link.visible { + display: block; + opacity: 0.66; + animation: glow 2s infinite; +} + +.performance-link.visible:hover { + opacity: 1; + animation: none; +} + +#dialog-container.performance-info { + width: 500px; + height: 600px; + top : 50%; + left : 50%; + position : absolute; + margin-left: -250px; +} + +.show #dialog-container.performance-info { + margin-top: -300px; +} diff --git a/src/img/icons/common/common-warning-red.png b/src/img/icons/common/common-warning-red.png new file mode 100644 index 0000000000000000000000000000000000000000..506482f1c5d153350c9a948ec40a21695fa9afb3 GIT binary patch literal 285 zcmV+&0pk9NP)!G$_m?$!2?UY%tdLHjIwsJ5Bg2?NwChTJA=Dh0}HJ?P0&E6e~B(AH<2 zaDrwFy}KXT_E6Wd9(Q<9B8jErc$u151`!JlEhE$Vedq)W<+{5x_|;MV(L#ErSAn{| j_3ZTN`)7w+pg$e?ZWdKADf$2a002ovPDHLkV1fVuh)#7s literal 0 HcmV?d00001 diff --git a/src/img/icons/common/common-warning-red@2x.png b/src/img/icons/common/common-warning-red@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..85ad393429f3123a8fb79e47f25ef2a61902a3ad GIT binary patch literal 357 zcmV-r0h<1aP)`>##%NS0u)(8Gt&Y!>{T?W?wcAj|^vu#mRS--b zHz=E29ajTWMp=Nm{j>iiOTOyzm>*Bpq$M8x*je*Jqt=ACfLbAKR|j`WP^}LE>V;%m zUre!ehHI2fP`CTcIbBdsLH1_qtz)L16qG$jTUZw;Gs(KUnRrz9U=&SYih5#DT?pza zs+iN>Y;i$*yH{bzlB4&X0PlKBfiq+OplZ8ejJ^ODR-7x)g**xX0000 literal 0 HcmV?d00001 diff --git a/src/index.html b/src/index.html index d0f5f478..12d178ac 100644 --- a/src/index.html +++ b/src/index.html @@ -71,13 +71,17 @@ @@include('templates/misc-templates.html', {}) @@include('templates/popup-preview.html', {}) -   +   +
 
@@include('templates/dialogs/create-palette.html', {}) @@include('templates/dialogs/import-image.html', {}) @@include('templates/dialogs/browse-local.html', {}) @@include('templates/dialogs/cheatsheet.html', {}) + @@include('templates/dialogs/performance-info.html', {}) @@include('templates/settings/application.html', {}) diff --git a/src/js/controller/UserWarningController.js b/src/js/controller/UserWarningController.js index ae1b787f..108149ea 100644 --- a/src/js/controller/UserWarningController.js +++ b/src/js/controller/UserWarningController.js @@ -4,32 +4,52 @@ ns.UserWarningController = function (piskelController, currentColorsService) { this.piskelController = piskelController; this.currentColorsService = currentColorsService; - this.isWarningDisplayed = false; + }; + + // This method is not attached to the prototype because we want to trigger it + // from markup generated for a notification message. + ns.UserWarningController.showPerformanceInfoDialog = function () { + $.publish(Events.DIALOG_DISPLAY, { + dialogId: 'performance-info' + }); }; ns.UserWarningController.prototype.init = function () { $.subscribe(Events.PERFORMANCE_REPORT_CHANGED, this.onPerformanceReportChanged_.bind(this)); + + this.performanceLinkEl = document.querySelector('.performance-link'); + pskl.utils.Event.addEventListener( + this.performanceLinkEl, + 'click', + ns.UserWarningController.showPerformanceInfoDialog, + this + ); + }; + + ns.UserWarningController.prototype.destroy = function () { + pskl.utils.Event.removeAllEventListeners(this); + this.performanceLinkEl = null; }; ns.UserWarningController.prototype.onPerformanceReportChanged_ = function (event, report) { - console.log(report); - var shouldDisplayWarning = report.hasProblem(); - if (shouldDisplayWarning && !this.isWarningDisplayed) { - // show a notification - // show the warning bubble + + // Check if a performance warning is already displayed. + var isWarningDisplayed = this.performanceLinkEl.classList.contains('visible'); + + // Show/hide the performance warning link depending on the received report. + this.performanceLinkEl.classList.toggle('visible', shouldDisplayWarning); + + // Show a notification message if the new report indicates a performance issue + // and we were not displaying a warning before. + if (shouldDisplayWarning && !isWarningDisplayed) { $.publish(Events.SHOW_NOTIFICATION, [{ - 'content': 'performance problem notification', + 'content': 'performance problem notification ' + + '' + + 'learn more?', 'hideDelay' : 5000 }]); - console.log('should show a performance notification'); - this.isWarningDisplayed = true; - } - - if (!shouldDisplayWarning && this.isWarningDisplayed) { - // hide the warning bubble - console.log('should hide a performance notification'); - this.isWarningDisplayed = false; } }; })(); diff --git a/src/js/controller/dialogs/DialogsController.js b/src/js/controller/dialogs/DialogsController.js index 7afb6561..cf6a9e63 100644 --- a/src/js/controller/dialogs/DialogsController.js +++ b/src/js/controller/dialogs/DialogsController.js @@ -17,6 +17,10 @@ 'import-image' : { template : 'templates/dialogs/import-image.html', controller : ns.ImportImageController + }, + 'performance-info' : { + template : 'templates/dialogs/performance-info.html', + controller : ns.PerformanceInfoController } }; diff --git a/src/js/controller/dialogs/PerformanceInfoController.js b/src/js/controller/dialogs/PerformanceInfoController.js new file mode 100644 index 00000000..87fd57b5 --- /dev/null +++ b/src/js/controller/dialogs/PerformanceInfoController.js @@ -0,0 +1,11 @@ +(function () { + var ns = $.namespace('pskl.controller.dialogs'); + + ns.PerformanceInfoController = function () {}; + + pskl.utils.inherit(ns.PerformanceInfoController, ns.AbstractDialogController); + + ns.PerformanceInfoController.prototype.init = function () { + this.superclass.init.call(this); + }; +})(); diff --git a/src/piskel-script-list.js b/src/piskel-script-list.js index 4de8e3ff..cb2e8d3d 100644 --- a/src/piskel-script-list.js +++ b/src/piskel-script-list.js @@ -140,6 +140,7 @@ "js/controller/dialogs/ImportImageController.js", "js/controller/dialogs/BrowseLocalController.js", "js/controller/dialogs/CheatsheetController.js", + "js/controller/dialogs/PerformanceInfoController.js", // Dialogs controller "js/controller/dialogs/DialogsController.js", diff --git a/src/piskel-style-list.js b/src/piskel-style-list.js index 9199543e..a208b9c1 100644 --- a/src/piskel-style-list.js +++ b/src/piskel-style-list.js @@ -22,6 +22,7 @@ "css/dialogs-cheatsheet.css", "css/dialogs-create-palette.css", "css/dialogs-import-image.css", + "css/dialogs-performance-info.css", "css/notifications.css", "css/toolbox.css", "css/toolbox-layers-list.css", diff --git a/src/templates/dialogs/performance-info.html b/src/templates/dialogs/performance-info.html new file mode 100644 index 00000000..fb9ccee2 --- /dev/null +++ b/src/templates/dialogs/performance-info.html @@ -0,0 +1,11 @@ + \ No newline at end of file From 8dab74ceea07758d727294e31691c0f3d15b367a Mon Sep 17 00:00:00 2001 From: juliandescottes Date: Fri, 16 Dec 2016 10:04:36 +0100 Subject: [PATCH 3/5] add text to warning notifications popup --- src/css/dialogs-performance-info.css | 24 ++++++++++++++++++++- src/templates/dialogs/performance-info.html | 20 ++++++++++++++++- 2 files changed, 42 insertions(+), 2 deletions(-) diff --git a/src/css/dialogs-performance-info.css b/src/css/dialogs-performance-info.css index 81ced106..2d9d745e 100644 --- a/src/css/dialogs-performance-info.css +++ b/src/css/dialogs-performance-info.css @@ -22,13 +22,35 @@ #dialog-container.performance-info { width: 500px; - height: 600px; + height: 575px; top : 50%; left : 50%; position : absolute; margin-left: -250px; } +.dialog-performance-info-body { + font-size: 13px; + letter-spacing: 1px; + padding: 10px 20px; +} + +.dialog-performance-info-body ul { + border: 1px solid #666; + padding: 5px; + border-radius: 3px; +} + +.dialog-performance-info-body li { + list-style-type: initial; + margin: 0 20px; +} + +.dialog-performance-info-body sup { + color: gold; + cursor: pointer; +} + .show #dialog-container.performance-info { margin-top: -300px; } diff --git a/src/templates/dialogs/performance-info.html b/src/templates/dialogs/performance-info.html index fb9ccee2..5bd7c7ce 100644 --- a/src/templates/dialogs/performance-info.html +++ b/src/templates/dialogs/performance-info.html @@ -5,7 +5,25 @@ X
- content +

Your current sprite exceeds the recommendations for Piskel.

+

The specifications are based on:

+
    +
  • sprite resolution ?
    • +
  • number of frames ?
    • +
  • number of layers ?
    • +
  • number of colors ?
    • +
+

You can ignore this message and continue working with your sprite but you might experience the following issues:

+
    +
  • unable to save
    • +
  • slowdowns
    • +
  • crashes
    • +
+

If you do ignore this warning and proceed, please make sure to save often!

+

We strive to improve Piskel as well as its performance and stability, but this is only a personal project with limited time and resources.

+

So for now we prefer to warn you early rather than having you lose your work.

+

Feel free to give us feedback about this feature at https://github.com/juliandescottes/piskel

+

Thank you for your understanding.

\ No newline at end of file From 57b37971f6d10458de538940a3ac405ed1687b91 Mon Sep 17 00:00:00 2001 From: juliandescottes Date: Sat, 17 Dec 2016 10:15:52 +0100 Subject: [PATCH 4/5] add svg warning icon --- misc/icons/source/common-warning-red.svg | 64 ++++++++++++++++++ src/css/dialogs-performance-info.css | 12 +++- src/img/icons/common/common-warning-red.png | Bin 285 -> 446 bytes .../icons/common/common-warning-red@2x.png | Bin 357 -> 851 bytes src/templates/dialogs/performance-info.html | 33 +++++---- 5 files changed, 93 insertions(+), 16 deletions(-) create mode 100644 misc/icons/source/common-warning-red.svg diff --git a/misc/icons/source/common-warning-red.svg b/misc/icons/source/common-warning-red.svg new file mode 100644 index 00000000..ba09fc4d --- /dev/null +++ b/misc/icons/source/common-warning-red.svg @@ -0,0 +1,64 @@ + + + +image/svg+xml + + \ No newline at end of file diff --git a/src/css/dialogs-performance-info.css b/src/css/dialogs-performance-info.css index 2d9d745e..132e8954 100644 --- a/src/css/dialogs-performance-info.css +++ b/src/css/dialogs-performance-info.css @@ -22,7 +22,7 @@ #dialog-container.performance-info { width: 500px; - height: 575px; + height: 525px; top : 50%; left : 50%; position : absolute; @@ -54,3 +54,13 @@ .show #dialog-container.performance-info { margin-top: -300px; } + +.dialog-performance-info-body .warning-icon { + float: left; + margin-top: 10px; +} + +.dialog-performance-info-body .warning-icon-info { + overflow: hidden; + margin-left: 30px; +} diff --git a/src/img/icons/common/common-warning-red.png b/src/img/icons/common/common-warning-red.png index 506482f1c5d153350c9a948ec40a21695fa9afb3..c5f4ea80d186c0d5954126f85412050df82a07ed 100644 GIT binary patch delta 420 zcmV;V0bBl^0=@%~B!2{RLP=Bz2nYy#2xN!=000SaNLh0L00!&;00!&<9(6c10000P zbVXQnQ*UN;cVTj60C#tHE@^ISb7Ns}WiD@WXPfRk8UO$RJ4r-AR5*>*l}kzkK^TO; z76kKNiQ*-428oNf2*gc}Ac&g?BEHC(ynsj+*#rrQAb0>ZF@KLMlnYAJ@L4VuxwzUK!K_UD0;oOA-K@c>po7MyCvusc(2_`OT*sEGstsB;3K`{&T z(gpoFuVSw<=k@JfBtxMrm^xfvc=o)Y>&{IDr6lOJgT2TOb|YTT`KvhebBi;FY7xMF z#H%?!6O?1njsxAqTlN#&bzLV0{dzB#?c>;ux=sE1BptW!`XK$2-^mBD`=d+vo*{|= O0000ZvY#B4*|~^cnW3UAut2l2>52;6{uPs0Ax;WQ>d{lAQMAs zJAWn(Ug*sX8)q3`jUY%tdLHjIwsJ5Bg z2?NwChTJA=Dh0}HJ?P0&E6e~B(AH<2aDrwFy}KXT_E6Wd9(Q<9B8jErc$u151`!Jl zEhE$Vedq)W<+{5x_|;MV(L#ErSAn{|_3ZTN`)7w+pg$e?ZWdKADf$2a002ovPDHLk HV1fVuIl6N^ diff --git a/src/img/icons/common/common-warning-red@2x.png b/src/img/icons/common/common-warning-red@2x.png index 85ad393429f3123a8fb79e47f25ef2a61902a3ad..bb24901b1a991e4f88bdbcb9023998e5364de424 100644 GIT binary patch delta 829 zcmV-D1H$~}0@DVNBYyw{b3#c}2nYxWdI?R8bVi zKi8Qgqi|DyKopaSWWRqP2nM-vp+s(6yK>{kRY?mM{U3rLf`8fci+&)waN{Dupdzut zLJBm(bXAR>7GCMj@lM{EcV|TEz-8v0^F8N$?wL39-aI2B>;zzIY?Bxw_4qPNM1{ASmdrHL@rWD_+e z1H2(0^rn5i+A7MwZ0OdqpI;ofodCDar`URS8X+J&PaJd;gn~Z-A>${=&a-K zRyi924dnzKQw`q>q@8%yiDeys+G^e0(PDasUqX#J4Rk2)03tc(c)|OAQ!}7)uVYMO zaQ`BvnSWIinG;AUjr()dt70je$@VuC(Y4PFaW zd324ArqL6xvbk=p`*A?wf@hkY1+=w}rnZ2l(^KzU4A94_=u5G;hXwRGf!tr>#@29a zK1v1(mpr@g*db>^U}6VNho|nvB%n`Kv6-NAI)7xrjH>;lG*GzW*>zh0z+DNsL_(XV z{^e3YpQ|F%fsQ}A00000NkvXX Hu0mjfF}{Dq delta 331 zcmV-R0kr`>##%NS0u)(8 zHtkvbEb##q`Y5MpY0@9ychPTpd>fQ$|^Uy8W~NB}=~Q@|Yh_)}$pK z{n%OaLZjA%w}4t9ZC3|(N>Hs20qTWhTVG7Eb%tw{O;ES{%sE|9PeJx(>aAm@o)nZl zM_X7IC^N~ryF{6IRQF&MO<;<8Vo+TO>M5$2)81@xL3_JbVaSrB_niRmdP{*bWB;IP dyJ3vJ02fxAE6{~J3IG5A07*qoM6N<$f&i}|og@GN diff --git a/src/templates/dialogs/performance-info.html b/src/templates/dialogs/performance-info.html index 5bd7c7ce..98d72da1 100644 --- a/src/templates/dialogs/performance-info.html +++ b/src/templates/dialogs/performance-info.html @@ -5,25 +5,28 @@ X
-

Your current sprite exceeds the recommendations for Piskel.

-

The specifications are based on:

-
    -
  • sprite resolution ?
    • -
  • number of frames ?
    • -
  • number of layers ?
    • -
  • number of colors ?
    • -
-

You can ignore this message and continue working with your sprite but you might experience the following issues:

+

The current sprite may exceed the recommendations for Piskel.

+

You can ignore this warning and continue working with your sprite but you might experience the following issues:

    -
  • unable to save
    • +
  • saving failures
  • slowdowns
  • crashes
-

If you do ignore this warning and proceed, please make sure to save often!

-

We strive to improve Piskel as well as its performance and stability, but this is only a personal project with limited time and resources.

-

So for now we prefer to warn you early rather than having you lose your work.

-

Feel free to give us feedback about this feature at https://github.com/juliandescottes/piskel

-

Thank you for your understanding.

+

If you ignore this warning, please save often!

+

To fix the issue, try adjusting your sprite settings:

+
    +
  • sprite resolution ?
    • +
  • number of layers ?
    • +
  • number of frames ?
    • +
  • number of colors ?
    • +
+

We strive to improve Piskel, its performances and stability, but this is a personal project with limited time and resources. + We prefer to warn you early rather than having you lose your work.

+

Feedback welcome at https://github.com/juliandescottes/piskel

+

+

 
+
This icon will remain on the top-bottom of the application until the performance issue is fixed. You can click on it at anytime to display this information again.
+

\ No newline at end of file From 58bfe16b270cd46e5844a82d01d2dea008c954ce Mon Sep 17 00:00:00 2001 From: juliandescottes Date: Sun, 18 Dec 2016 06:52:44 +0100 Subject: [PATCH 5/5] performance warning: text cleanup --- src/index.html | 2 +- src/js/controller/UserWarningController.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/index.html b/src/index.html index 12d178ac..6d52399d 100644 --- a/src/index.html +++ b/src/index.html @@ -74,7 +74,7 @@  
 
+ rel="tooltip" data-placement="left" title="Performance problem detected, learn more.">  @@include('templates/dialogs/create-palette.html', {}) diff --git a/src/js/controller/UserWarningController.js b/src/js/controller/UserWarningController.js index 108149ea..c1b62147 100644 --- a/src/js/controller/UserWarningController.js +++ b/src/js/controller/UserWarningController.js @@ -44,7 +44,7 @@ // and we were not displaying a warning before. if (shouldDisplayWarning && !isWarningDisplayed) { $.publish(Events.SHOW_NOTIFICATION, [{ - 'content': 'performance problem notification ' + + 'content': 'Performance problem detected, ' + '' + 'learn more?',