From 3dde3504d1cbc9981799624be25d26862e4e6739 Mon Sep 17 00:00:00 2001 From: jdescottes Date: Wed, 23 Oct 2013 01:01:35 +0200 Subject: [PATCH] Synchronize resize fields, resize image when importing --- css/forms.css | 40 ++++++++++++++++++++ css/settings.css | 8 +++- js/Events.js | 3 ++ js/controller/settings/ImportController.js | 36 ++++++++++++++++-- js/controller/settings/SettingsController.js | 2 + js/utils/ImageResizer.js | 22 +++++++++++ piskel-script-list.js | 1 + templates/settings/import.html | 22 +++++------ 8 files changed, 119 insertions(+), 15 deletions(-) create mode 100644 css/forms.css create mode 100644 js/utils/ImageResizer.js diff --git a/css/forms.css b/css/forms.css new file mode 100644 index 00000000..f78c1729 --- /dev/null +++ b/css/forms.css @@ -0,0 +1,40 @@ +.textfield { + background : black; + border : 1px solid #888; + border-radius : 2px; + padding : 3px 10px; + color : white; +} + +.textfield[disabled=disabled] { + background : #3a3a3a; +} + +.textfield-small { + width : 50px; +} + +.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; + cursor: pointer; + color: white; + font-size: 1rem; + font-weight: bold; + text-align: center; + text-decoration: none; + text-shadow: 0px -1px 0 #000; + transition: background-color 0.2s linear; +} + +.button:hover { + text-decoration: none; + background-color: #484848; + color: gold; +} \ No newline at end of file diff --git a/css/settings.css b/css/settings.css index 3af8a57c..b1361d92 100644 --- a/css/settings.css +++ b/css/settings.css @@ -134,9 +134,15 @@ } .file-input-status { + display: inline-block; + width: 130px; + overflow: hidden; + + height: 1rem; + vertical-align: middle; font-style: italic; font-weight: normal; - text-shadow : none; + text-shadow: none; } .import-button { diff --git a/js/Events.js b/js/Events.js index 64985864..e7e5e7ea 100644 --- a/js/Events.js +++ b/js/Events.js @@ -39,6 +39,9 @@ var Events = { */ USER_SETTINGS_CHANGED: "USER_SETTINGS_CHANGED", + /* Listened to by SettingsController */ + CLOSE_SETTINGS_DRAWER : "CLOSE_SETTINGS_DRAWER", + /** * The framesheet was reseted and is now probably drastically different. * Number of frames, content of frames, color used for the palette may have changed. diff --git a/js/controller/settings/ImportController.js b/js/controller/settings/ImportController.js index c69ac924..4e9bc792 100644 --- a/js/controller/settings/ImportController.js +++ b/js/controller/settings/ImportController.js @@ -15,16 +15,39 @@ this.resizeWidth = $("[name=resize-width]"); this.resizeHeight = $("[name=resize-height]"); + this.smoothResize = $("[name=smooth-resize-checkbox]"); this.importForm.submit(this.onImportFormSubmit_.bind(this)); this.hiddenFileInput.change(this.onFileUploadChange_.bind(this)); this.fileInputButton.click(this.onFileInputClick_.bind(this)); + + this.resizeWidth.keyup(this.onResizeInputKeyUp_.bind(this, 'width')); + this.resizeHeight.keyup(this.onResizeInputKeyUp_.bind(this, 'height')); }; ns.ImportController.prototype.reset_ = function () { this.importForm.get(0).reset(); this.fileInputStatus.html(DEFAULT_FILE_STATUS); + $.publish(Events.CLOSE_SETTINGS_DRAWER); + }; + ns.ImportController.prototype.onResizeInputKeyUp_ = function (from, evt) { + if (this.importedImage_) { + this.synchronizeResizeFields_(evt.target.value, from); + } + }; + + ns.ImportController.prototype.synchronizeResizeFields_ = function (value, from) { + value = parseInt(value, 10); + if (isNaN(value)) { + value = 0; + } + var height = this.importedImage_.height, width = this.importedImage_.width; + if (from === 'width') { + this.resizeHeight.val(Math.round(value * height / width)); + } else { + this.resizeWidth.val(Math.round(value * width / height)); + } }; ns.ImportController.prototype.onImportFormSubmit_ = function (evt) { @@ -46,6 +69,7 @@ var file = files[0]; if (this.isImage_(file)) { this.readImageFile_(file); + this.enableAdditionalInputs_(); } else { this.reset_(); throw "File is not an image : " + file.type; @@ -53,6 +77,12 @@ } }; + ns.ImportController.prototype.enableAdditionalInputs_ = function () { + this.resizeWidth.removeAttr('disabled'); + this.resizeHeight.removeAttr('disabled'); + this.smoothResize.removeAttr('disabled'); + }; + ns.ImportController.prototype.readImageFile_ = function (imageFile) { pskl.utils.FileUtils.readFile(imageFile, this.processImageSource_.bind(this)); }; @@ -93,7 +123,7 @@ ns.ImportController.prototype.importImageToPiskel_ = function () { if (this.importedImage_) { - var image = 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; @@ -102,9 +132,9 @@ var piskel = pskl.utils.Serializer.createPiskel([frames]); pskl.app.piskelController.setPiskel(piskel); pskl.app.animationController.setFPS(12); - } - this.reset_(); + this.reset_(); + } } }; diff --git a/js/controller/settings/SettingsController.js b/js/controller/settings/SettingsController.js index d56497c7..708b3fa1 100644 --- a/js/controller/settings/SettingsController.js +++ b/js/controller/settings/SettingsController.js @@ -48,6 +48,8 @@ this.closeDrawer(); } }.bind(this)); + + $.subscribe(Events.CLOSE_SETTINGS_DRAWER, this.closeDrawer.bind(this)); }; ns.SettingsController.prototype.loadSetting = function (setting) { diff --git a/js/utils/ImageResizer.js b/js/utils/ImageResizer.js new file mode 100644 index 00000000..20c5769f --- /dev/null +++ b/js/utils/ImageResizer.js @@ -0,0 +1,22 @@ +(function () { + var ns = $.namespace('pskl.utils'); + + ns.ImageResizer = { + resizeNearestNeighbour : function (image, targetWidth, targetHeight) { + + }, + + resize : function (image, targetWidth, targetHeight) { + var canvas = pskl.CanvasUtils.createCanvas(targetWidth, targetHeight); + var context = canvas.getContext('2d'); + + context.save(); + 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; + } + }; +})(); \ No newline at end of file diff --git a/piskel-script-list.js b/piskel-script-list.js index e7a48df7..deeb069e 100644 --- a/piskel-script-list.js +++ b/piskel-script-list.js @@ -16,6 +16,7 @@ exports.scripts = [ "js/utils/CanvasUtils.js", "js/utils/FileUtils.js", "js/utils/FrameUtils.js", + "js/utils/ImageResizer.js", "js/utils/PixelUtils.js", "js/utils/Serializer.js", "js/utils/Template.js", diff --git a/templates/settings/import.html b/templates/settings/import.html index a697a38e..0201dd42 100644 --- a/templates/settings/import.html +++ b/templates/settings/import.html @@ -5,21 +5,21 @@
- -
- + Size : + x +
- + Smooth resize : +