diff --git a/css/preview-film-section.css b/css/preview-film-section.css index 52019e97..48680d04 100644 --- a/css/preview-film-section.css +++ b/css/preview-film-section.css @@ -10,6 +10,31 @@ padding-right: 7px; } +.add-frame-action { + border: #888 solid 4px; + font-size: 13px; + color: #888; + cursor: pointer; + padding: 6px 0; + border-radius: 4px; + margin-top: 8px; + background-image: url(../img/plus.png); + background-repeat: no-repeat; + background-position: 3px 7px; + background-size: 26px 26px; + text-indent: 18px; + background-color: #222; +} + +.add-frame-action .label { + width: 80px; + margin: 0 auto; +} + +.add-frame-action:hover { + border-color: gold; +} + .preview-tile { position: relative; border: #444 3px solid; diff --git a/css/reset.css b/css/reset.css index 46bc9cd7..b0c09cce 100644 --- a/css/reset.css +++ b/css/reset.css @@ -32,5 +32,5 @@ ul, li { } ::-webkit-scrollbar-track { - background-color: #444; + background-color: rgba(50, 50, 50, 0.4);; } \ No newline at end of file diff --git a/css/style.css b/css/style.css index 04812bf8..a06d9012 100644 --- a/css/style.css +++ b/css/style.css @@ -12,10 +12,10 @@ body { text-align: center; font-size: 0; position: absolute; - left: 0; - top: 104px; + left: 104px; + top: 10px; right: 0; - bottom: 0; + bottom: 10px; } .left-column { @@ -35,19 +35,27 @@ body { font-size: 0; } -.top-section { - position: absolute; - bottom: 100%; - min-width: 400px; - margin-bottom: 5px; -} - .right-column { display: inline-block; vertical-align: top; margin-left: 10px; } +.sticky-section { + display: table; + height: 100%; + position: fixed; + top: 0; + bottom: 0; + left: 0; + width: 140px; +} + +.sticky-section .wrap { + display: table-cell; + vertical-align: middle; +} + /** * Canvases layout diff --git a/css/tools.css b/css/tools.css index 86fbc40b..1a12a3e2 100644 --- a/css/tools.css +++ b/css/tools.css @@ -5,10 +5,6 @@ float: left; } -.tools-wrapper { - width: 70%; -} - .tool-icon { float: left; cursor : pointer; @@ -95,96 +91,77 @@ */ .tool-paint-bucket .drawing-canvas-container:hover { - cursor: url(../img/tools_legacy/paint-bucket.png) 12 12, pointer; + cursor: url(../img/icons/paint-bucket.png) 12 12, pointer; } .tool-vertical-mirror-pen .drawing-canvas-container:hover { - cursor: url(../img/tools_legacy/vertical-mirror-pen.png) 5 15, pointer; + cursor: url(../img/icons/vertical-mirror-pen.png) 5 15, pointer; } .tool-pen .drawing-canvas-container:hover { - cursor: url(../img/tools_legacy/pen.png) 0 15, pointer; + cursor: url(../img/icons/pen.png) 0 15, pointer; } .tool-eraser .drawing-canvas-container:hover { - cursor: url(../img/tools_legacy/eraser.png) 0 15, pointer; + cursor: url(../img/icons/eraser.png) 0 15, pointer; } .tool-stroke .drawing-canvas-container:hover { - cursor: url(../img/tools_legacy/pen.png) 0 15, pointer; + cursor: url(../img/icons/pen.png) 0 15, pointer; } .tool-rectangle .drawing-canvas-container:hover { - cursor: url(../img/tools_legacy/rectangle.png) 0 15, pointer; + cursor: url(../img/icons/rectangle.png) 0 15, pointer; } .tool-circle .drawing-canvas-container:hover { - cursor: url(../img/tools_legacy/circle.png) 2 15, pointer; + cursor: url(../img/icons/circle.png) 2 15, pointer; } .tool-move .drawing-canvas-container:hover { - cursor: url(../img/tools_legacy/hand.png) 15 15, pointer; + cursor: url(../img/icons/hand.png) 15 15, pointer; } .tool-rectangle-select .drawing-canvas-container:hover { - cursor: url(../img/tools_legacy/select.png) 15 15, pointer; + cursor: url(../img/icons/select.png) 15 15, pointer; } .tool-shape-select .drawing-canvas-container:hover { - cursor: url(../img/tools_legacy/wand.png) 15 15, pointer; + cursor: url(../img/icons/wand.png) 15 15, pointer; } .tool-colorpicker .drawing-canvas-container:hover { - cursor: url(../img/tools_legacy/dropper.png) 0 15, pointer; -} - -.tool-grid, -.tool-grid label, -.tool-grid input { - line-height: 2.5; - cursor: pointer; -} - -.tool-color-picker { - padding: 5px 0 0 5px; - height: 25px; - cursor : default; + cursor: url(../img/icons/dropper.png) 0 15, pointer; } .tool-color-picker input { - width: 8px; height: 8px; + width: 16px; + height: 16px; + text-indent: -10000px; border: 1px solid black; - padding: 1px; background: white; cursor: pointer; position : relative; + top: 10px; + margin-left: 2px; } -.secondary-color-picker { - top : 8px; +.tool-color-picker .secondary-color-picker { + top : 18px; + margin-left: 0; } -.tool-palette { - width: auto; -} -.tool-palette .palette li { - float: left; -} - -.palette .palette-color { - cursor: pointer; - display : inline-block; - height : 20px; - width : 20px; - margin : 5px; -} .palette .palette-color.transparent-color { + position: relative; + top: 10px; + left: 10px; background-color: white; height : 16px; width : 16px; border: 2px solid #000; - + background-size: 16px 16px; + background-position: 0 0; background-image: -webkit-gradient( linear, left top, @@ -208,20 +185,27 @@ /* * Framesheet level actions: */ -.tool-icon.tool-save { - background-image: url(../img/actions/save.png); + +.tool-icon.save-icon { + background-image: url(../img/save.png); + background-position: 6px 6px; + background-size: 36px 36px; } -.tool-icon.tool-export { - background-image: url(../img/actions/image-export.png); +.tool-icon.upload-cloud-icon { + background-image: url(../img/cloud_export.png); + background-position: 4px 0px; + background-size: 36px 36px; + position: relative; } -.tool-icon.tool-upload { - background-image: url(../img/actions/image-upload.png); -} - - -.tool-icon.tool-add-frame { - background-image: url(../img/actions/add.png); +.upload-cloud-icon .label { + position: absolute; + left: 0; + bottom: 4px; + right: 0; + font-size: 11px; + text-transform: uppercase; + color: #fff; } diff --git a/img/actions/image-upload.png b/img/actions/image-upload.png deleted file mode 100644 index df9129eb..00000000 Binary files a/img/actions/image-upload.png and /dev/null differ diff --git a/img/actions/save.png b/img/actions/save.png deleted file mode 100755 index 966a19db..00000000 Binary files a/img/actions/save.png and /dev/null differ diff --git a/img/cloud_export.png b/img/cloud_export.png new file mode 100644 index 00000000..654edc8c Binary files /dev/null and b/img/cloud_export.png differ diff --git a/img/tools_legacy/circle.png b/img/icons/circle.png similarity index 100% rename from img/tools_legacy/circle.png rename to img/icons/circle.png diff --git a/img/tools_legacy/color-palette.png b/img/icons/color-palette.png similarity index 100% rename from img/tools_legacy/color-palette.png rename to img/icons/color-palette.png diff --git a/img/tools_legacy/dropper.png b/img/icons/dropper.png similarity index 100% rename from img/tools_legacy/dropper.png rename to img/icons/dropper.png diff --git a/img/tools_legacy/cursors/eraser.png b/img/icons/eraser.png similarity index 100% rename from img/tools_legacy/cursors/eraser.png rename to img/icons/eraser.png diff --git a/img/tools_legacy/cursors/hand.png b/img/icons/hand.png similarity index 100% rename from img/tools_legacy/cursors/hand.png rename to img/icons/hand.png diff --git a/img/tools_legacy/icons/mirror-pen.png b/img/icons/mirror-pen.png similarity index 100% rename from img/tools_legacy/icons/mirror-pen.png rename to img/icons/mirror-pen.png diff --git a/img/tools_legacy/cursors/paint-bucket.png b/img/icons/paint-bucket.png similarity index 100% rename from img/tools_legacy/cursors/paint-bucket.png rename to img/icons/paint-bucket.png diff --git a/img/tools_legacy/cursors/pen.png b/img/icons/pen.png similarity index 100% rename from img/tools_legacy/cursors/pen.png rename to img/icons/pen.png diff --git a/img/tools_legacy/cursors/rectangle.png b/img/icons/rectangle.png similarity index 100% rename from img/tools_legacy/cursors/rectangle.png rename to img/icons/rectangle.png diff --git a/img/tools_legacy/cursors/select.png b/img/icons/select.png similarity index 100% rename from img/tools_legacy/cursors/select.png rename to img/icons/select.png diff --git a/img/tools_legacy/icons/stroke.png b/img/icons/stroke.png similarity index 100% rename from img/tools_legacy/icons/stroke.png rename to img/icons/stroke.png diff --git a/img/tools_legacy/cursors/vertical-mirror-pen.png b/img/icons/vertical-mirror-pen.png similarity index 100% rename from img/tools_legacy/cursors/vertical-mirror-pen.png rename to img/icons/vertical-mirror-pen.png diff --git a/img/tools_legacy/cursors/wand.png b/img/icons/wand.png similarity index 100% rename from img/tools_legacy/cursors/wand.png rename to img/icons/wand.png diff --git a/img/plus.png b/img/plus.png new file mode 100644 index 00000000..6b60af79 Binary files /dev/null and b/img/plus.png differ diff --git a/img/save.png b/img/save.png new file mode 100644 index 00000000..fb044dc8 Binary files /dev/null and b/img/save.png differ diff --git a/img/tools_legacy/cursors/circle.png b/img/tools_legacy/cursors/circle.png deleted file mode 100644 index a186a26b..00000000 Binary files a/img/tools_legacy/cursors/circle.png and /dev/null differ diff --git a/img/tools_legacy/eraser.png b/img/tools_legacy/eraser.png deleted file mode 100755 index e0d4b020..00000000 Binary files a/img/tools_legacy/eraser.png and /dev/null differ diff --git a/img/tools_legacy/hand.png b/img/tools_legacy/hand.png deleted file mode 100644 index 7b47be2d..00000000 Binary files a/img/tools_legacy/hand.png and /dev/null differ diff --git a/img/tools_legacy/icons/color-palette.png b/img/tools_legacy/icons/color-palette.png deleted file mode 100755 index 6e6e8521..00000000 Binary files a/img/tools_legacy/icons/color-palette.png and /dev/null differ diff --git a/img/tools_legacy/icons/eraser.png b/img/tools_legacy/icons/eraser.png deleted file mode 100755 index e0d4b020..00000000 Binary files a/img/tools_legacy/icons/eraser.png and /dev/null differ diff --git a/img/tools_legacy/icons/hand.png b/img/tools_legacy/icons/hand.png deleted file mode 100644 index 7b47be2d..00000000 Binary files a/img/tools_legacy/icons/hand.png and /dev/null differ diff --git a/img/tools_legacy/icons/paint-bucket.png b/img/tools_legacy/icons/paint-bucket.png deleted file mode 100755 index f82a8865..00000000 Binary files a/img/tools_legacy/icons/paint-bucket.png and /dev/null differ diff --git a/img/tools_legacy/icons/pen.png b/img/tools_legacy/icons/pen.png deleted file mode 100755 index 0bfecd50..00000000 Binary files a/img/tools_legacy/icons/pen.png and /dev/null differ diff --git a/img/tools_legacy/icons/rectangle.png b/img/tools_legacy/icons/rectangle.png deleted file mode 100755 index d28dc6b1..00000000 Binary files a/img/tools_legacy/icons/rectangle.png and /dev/null differ diff --git a/img/tools_legacy/icons/select.png b/img/tools_legacy/icons/select.png deleted file mode 100644 index bf2b724d..00000000 Binary files a/img/tools_legacy/icons/select.png and /dev/null differ diff --git a/img/tools_legacy/icons/vertical-mirror-pen.png b/img/tools_legacy/icons/vertical-mirror-pen.png deleted file mode 100644 index cf2157d8..00000000 Binary files a/img/tools_legacy/icons/vertical-mirror-pen.png and /dev/null differ diff --git a/img/tools_legacy/icons/wand.png b/img/tools_legacy/icons/wand.png deleted file mode 100755 index 44ccbf81..00000000 Binary files a/img/tools_legacy/icons/wand.png and /dev/null differ diff --git a/img/tools_legacy/mirror-pen.png b/img/tools_legacy/mirror-pen.png deleted file mode 100644 index f5148946..00000000 Binary files a/img/tools_legacy/mirror-pen.png and /dev/null differ diff --git a/img/tools_legacy/paint-bucket.png b/img/tools_legacy/paint-bucket.png deleted file mode 100755 index f82a8865..00000000 Binary files a/img/tools_legacy/paint-bucket.png and /dev/null differ diff --git a/img/tools_legacy/pen.png b/img/tools_legacy/pen.png deleted file mode 100755 index 0bfecd50..00000000 Binary files a/img/tools_legacy/pen.png and /dev/null differ diff --git a/img/tools_legacy/rectangle.png b/img/tools_legacy/rectangle.png deleted file mode 100755 index d28dc6b1..00000000 Binary files a/img/tools_legacy/rectangle.png and /dev/null differ diff --git a/img/tools_legacy/select.png b/img/tools_legacy/select.png deleted file mode 100644 index bf2b724d..00000000 Binary files a/img/tools_legacy/select.png and /dev/null differ diff --git a/img/tools_legacy/stroke.png b/img/tools_legacy/stroke.png deleted file mode 100755 index 0bfecd50..00000000 Binary files a/img/tools_legacy/stroke.png and /dev/null differ diff --git a/img/tools_legacy/vertical-mirror-pen.png b/img/tools_legacy/vertical-mirror-pen.png deleted file mode 100644 index cf2157d8..00000000 Binary files a/img/tools_legacy/vertical-mirror-pen.png and /dev/null differ diff --git a/img/tools_legacy/wand.png b/img/tools_legacy/wand.png deleted file mode 100755 index 44ccbf81..00000000 Binary files a/img/tools_legacy/wand.png and /dev/null differ diff --git a/index.html b/index.html index b4739327..0fa2c994 100644 --- a/index.html +++ b/index.html @@ -17,6 +17,30 @@ + +
@@ -27,27 +51,6 @@
- -
@@ -71,14 +74,13 @@
-
    - -
  • -
  • -
  • -
  • -
+
+
+ GIF +
+
+ PNG +
diff --git a/js/controller/PreviewFilmController.js b/js/controller/PreviewFilmController.js index 2818914a..61b4fe3a 100644 --- a/js/controller/PreviewFilmController.js +++ b/js/controller/PreviewFilmController.js @@ -13,10 +13,7 @@ $.subscribe(Events.FRAMESHEET_RESET, this.refreshDPI_.bind(this)); }; - ns.PreviewFilmController.prototype.init = function() { - var addFrameButton = $('#add-frame-button')[0]; - addFrameButton.addEventListener('mousedown', this.addFrame.bind(this)); - }; + ns.PreviewFilmController.prototype.init = function() {}; ns.PreviewFilmController.prototype.addFrame = function () { this.framesheet.addEmptyFrame(); @@ -50,7 +47,15 @@ for (var i = 0, l = frameCount; i < l ; i++) { this.container.append(this.createPreviewTile_(i)); } - + // Append 'new empty frame' button + var newFrameButton = document.createElement("div"); + newFrameButton.id = "add-frame-action"; + newFrameButton.className = "add-frame-action"; + newFrameButton.innerHTML = "

Add new frame

"; + this.container.append(newFrameButton); + + $(newFrameButton).click(this.addFrame.bind(this)); + var needDragndropBehavior = (frameCount > 1); if(needDragndropBehavior) { this.initDragndropBehavior_(); diff --git a/js/controller/ToolController.js b/js/controller/ToolController.js index 921cb9af..26b008c6 100644 --- a/js/controller/ToolController.js +++ b/js/controller/ToolController.js @@ -69,11 +69,15 @@ * @private */ ns.ToolController.prototype.createToolMarkup_ = function() { - var currentTool, toolMarkup = ''; + var currentTool, toolMarkup = '', extraClass; // TODO(vincz): Tools rendering order is not enforced by the data stucture (this.toolInstances), fix that. for (var toolKey in this.toolInstances) { currentTool = this.toolInstances[toolKey]; - toolMarkup += '
  • '; } $('#tools-container').html(toolMarkup); diff --git a/js/piskel.js b/js/piskel.js index 7cb0afde..5ed585ae 100644 --- a/js/piskel.js +++ b/js/piskel.js @@ -167,41 +167,42 @@ $.namespace("pskl"); return false; }, - /** - * Open new window with spritesheet as PNG - */ - exportToPNG : function () { - (new pskl.rendering.SpritesheetRenderer(frameSheet)).render(); - }, - - uploadAsGIF : function () { - var encoder = new GIFEncoder(), - dpi = 10; - encoder.setRepeat(0); - var fps = piskel.animationController.fps; - encoder.setDelay(1000/fps); - - encoder.start(); - encoder.setSize(frameSheet.getWidth() * dpi, frameSheet.getHeight() * dpi); - for (var i = 0 ; i < frameSheet.frames.length ; i++) { - var frame = frameSheet.frames[i]; - var renderer = new pskl.rendering.CanvasRenderer(frame, dpi); - encoder.addFrame(renderer.render()); - } - encoder.finish(); - - var imageData = 'data:image/gif;base64,' + encode64(encoder.stream().getData()); + uploadToScreenletstore : function(imageData) { var xhr = new XMLHttpRequest(); var formData = new FormData(); formData.append('data', imageData); xhr.open('POST', "http://screenletstore.appspot.com/__/upload", true); + var cloudURL; + var that = this; xhr.onload = function(e) { if (this.status == 200) { - var baseUrl = window.open("http://screenletstore.appspot.com/img/" + this.responseText); + cloudURL = "http://screenletstore.appspot.com/img/" + this.responseText; + that.openWindow(cloudURL); } }; xhr.send(formData); + }, + + uploadAsAnimatedGIF : function () { + var fps = piskel.animationController.fps; + var imageData = (new pskl.rendering.SpritesheetRenderer(frameSheet)).renderAsImageDataAnimatedGIF(fps); + this.uploadToScreenletstore(imageData); + }, + + uploadAsSpritesheetPNG : function () { + var imageData = (new pskl.rendering.SpritesheetRenderer(frameSheet)).renderAsImageDataSpritesheetPNG(); + this.uploadToScreenletstore(imageData); + }, + + openWindow: function(url) { + var options = [ + "dialog=yes", "scrollbars=no", "status=no", + "width=" + frameSheet.getWidth() * frameSheet.getFrameCount(), + "height=" + frameSheet.getHeight() + ].join(","); + + window.open(url, "piskel-export", options); } }; diff --git a/js/rendering/SpritesheetRenderer.js b/js/rendering/SpritesheetRenderer.js index d7d98191..f7e61fd5 100644 --- a/js/rendering/SpritesheetRenderer.js +++ b/js/rendering/SpritesheetRenderer.js @@ -6,18 +6,34 @@ this.framesheet = framesheet; }; - /** - * Will open a new window displaying the spritesheet as a png - */ - ns.SpritesheetRenderer.prototype.render = function () { + ns.SpritesheetRenderer.prototype.renderAsImageDataSpritesheetPNG = function () { var canvas = this.createCanvas_(); for (var i = 0 ; i < this.framesheet.getFrameCount() ; i++) { var frame = this.framesheet.getFrameByIndex(i); this.drawFrameInCanvas_(frame, canvas, i * this.framesheet.getWidth(), 0); } - this.openCanvasAsPNGInWindow_(canvas); + return canvas.toDataURL("image/png"); }; + ns.SpritesheetRenderer.prototype.renderAsImageDataAnimatedGIF = function (fps) { + var encoder = new GIFEncoder(), dpi = 10; + encoder.setRepeat(0); + encoder.setDelay(1000/fps); + + encoder.start(); + encoder.setSize(this.framesheet.getWidth() * dpi, this.framesheet.getHeight() * dpi); + for (var i = 0 ; i < this.framesheet.frames.length ; i++) { + var frame = this.framesheet.frames[i]; + var renderer = new pskl.rendering.CanvasRenderer(frame, dpi); + encoder.addFrame(renderer.render()); + } + encoder.finish(); + + var imageData = 'data:image/gif;base64,' + encode64(encoder.stream().getData()); + return imageData; + }; + + /** * TODO(juliandescottes): Mutualize with code already present in FrameRenderer */ @@ -44,14 +60,4 @@ throw "Cannot render empty Spritesheet"; } }; - - ns.SpritesheetRenderer.prototype.openCanvasAsPNGInWindow_ = function (canvas) { - var options = [ - "dialog=yes", "scrollbars=no", "status=no", - "width=" + this.framesheet.getWidth() * this.framesheet.getFrameCount(), - "height=" + this.framesheet.getHeight() - ].join(","); - - window.open(canvas.toDataURL("image/png"), "piskel-export", options); - }; })(); \ No newline at end of file