|
@ -72,7 +72,7 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
.canvas-container .canvas-background {
|
.canvas-container .canvas-background {
|
||||||
background: url(../img/medium_canvas_background.png) repeat;
|
background: url(../img/canvas_background/medium_canvas_background.png) repeat;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
|
@ -80,6 +80,23 @@ body {
|
||||||
left: 0;
|
left: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.light-canvas-background .canvas-background {
|
||||||
|
background: url(../img/canvas_background/light_canvas_background.png) repeat;
|
||||||
|
}
|
||||||
|
|
||||||
|
.medium-canvas-background .canvas-background {
|
||||||
|
background: url(../img/canvas_background/medium_canvas_background.png) repeat;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lowcont-medium-canvas-background .canvas-background {
|
||||||
|
background: url(../img/canvas_background/lowcont_medium_canvas_background.png) repeat;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lowcont-dark-canvas-background .canvas-background {
|
||||||
|
background: url(../img/canvas_background/lowcont_dark_canvas_background.png) repeat;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
.canvas.canvas-overlay {
|
.canvas.canvas-overlay {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
|
|
@ -186,6 +186,12 @@
|
||||||
* Framesheet level actions:
|
* Framesheet level actions:
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
.tool-icon.gallery-icon {
|
||||||
|
background-image: url(../img/gallery.png);
|
||||||
|
background-position: 3px 3px;
|
||||||
|
background-size: 39px 39px;
|
||||||
|
}
|
||||||
|
|
||||||
.tool-icon.save-icon {
|
.tool-icon.save-icon {
|
||||||
background-image: url(../img/save.png);
|
background-image: url(../img/save.png);
|
||||||
background-position: 6px 6px;
|
background-position: 6px 6px;
|
||||||
|
|
Before Width: | Height: | Size: 631 B |
Before Width: | Height: | Size: 608 B |
Before Width: | Height: | Size: 634 B |
Before Width: | Height: | Size: 602 B |
Before Width: | Height: | Size: 223 B After Width: | Height: | Size: 223 B |
Before Width: | Height: | Size: 431 B After Width: | Height: | Size: 431 B |
BIN
img/canvas_background/lowcont_medium_canvas_background.png
Normal file
After Width: | Height: | Size: 278 B |
Before Width: | Height: | Size: 418 B After Width: | Height: | Size: 418 B |
BIN
img/gallery.png
Normal file
After Width: | Height: | Size: 305 B |
14
index.html
|
@ -38,6 +38,15 @@
|
||||||
<label for="show-grid">Show grid</label>
|
<label for="show-grid">Show grid</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div style="float: left; margin-top: 20px; color: #fff;">
|
||||||
|
Canvas background:
|
||||||
|
<select id="canvas-picker" style="width:100px;">
|
||||||
|
<option value="light-canvas-background">Light</option>
|
||||||
|
<option value="lowcont-medium-canvas-background">Medium - low contrast</option>
|
||||||
|
<option value="medium-canvas-background" selected="selected">Medium - high contrast</option>
|
||||||
|
<option value="lowcont-dark-canvas-background">Dark - low constrast</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -55,7 +64,6 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class='main-column'>
|
<div class='main-column'>
|
||||||
|
|
||||||
<!-- Drawing area: -->
|
<!-- Drawing area: -->
|
||||||
<div id="drawing-canvas-container" class="drawing-canvas-container canvas-container">
|
<div id="drawing-canvas-container" class="drawing-canvas-container canvas-container">
|
||||||
<div class="canvas-background"></div>
|
<div class="canvas-background"></div>
|
||||||
|
@ -73,8 +81,8 @@
|
||||||
<input id="preview-fps" class="range-fps" type="range" min="1" max="24" value="12"/>
|
<input id="preview-fps" class="range-fps" type="range" min="1" max="24" value="12"/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="application-actions">
|
<div class="application-actions">
|
||||||
|
<a class="tool-icon gallery-icon" title="Visit gallery" href="http://juliandescottes.github.io/piskel-website/" rel="tooltip" data-placement="bottom" target="_blank"></a>
|
||||||
<div class="tool-icon save-icon" title="Save to gallery" onclick="piskel.storeSheet()" rel="tooltip" data-placement="bottom" ></div>
|
<div class="tool-icon save-icon" title="Save to gallery" onclick="piskel.storeSheet()" rel="tooltip" data-placement="bottom" ></div>
|
||||||
<div class="tool-icon upload-cloud-icon" title="Upload as an animated GIF" onclick="piskel.uploadAsAnimatedGIF()" rel="tooltip" data-placement="bottom" >
|
<div class="tool-icon upload-cloud-icon" title="Upload as an animated GIF" onclick="piskel.uploadAsAnimatedGIF()" rel="tooltip" data-placement="bottom" >
|
||||||
<span class="label">GIF</span>
|
<span class="label">GIF</span>
|
||||||
|
@ -92,7 +100,7 @@
|
||||||
<script src="js/lib/pubsub.js"></script>
|
<script src="js/lib/pubsub.js"></script>
|
||||||
<script src="js/lib/bootstrap/bootstrap.js"></script>
|
<script src="js/lib/bootstrap/bootstrap.js"></script>
|
||||||
|
|
||||||
<!-- GIF Encoding DEVICES ! OH YEAY! -->
|
<!-- GIF Encoding libraries -->
|
||||||
<script src="js/lib/gif/GIFEncoder.js"></script>
|
<script src="js/lib/gif/GIFEncoder.js"></script>
|
||||||
<script src="js/lib/gif/b64.js"></script>
|
<script src="js/lib/gif/b64.js"></script>
|
||||||
<script src="js/lib/gif/NeuQuant.js"></script>
|
<script src="js/lib/gif/NeuQuant.js"></script>
|
||||||
|
|
|
@ -71,13 +71,15 @@
|
||||||
body.mouseup($.proxy(this.onMouseup_, this));
|
body.mouseup($.proxy(this.onMouseup_, this));
|
||||||
|
|
||||||
// Deactivate right click:
|
// Deactivate right click:
|
||||||
//body.contextmenu(this.onCanvasContextMenu_);
|
body.contextmenu(this.onCanvasContextMenu_);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
ns.DrawingController.prototype.startDPIUpdateTimer_ = function () {
|
ns.DrawingController.prototype.startDPIUpdateTimer_ = function () {
|
||||||
if (this.dpiUpdateTimer) window.clearInterval(this.dpiUpdateTimer);
|
if (this.dpiUpdateTimer) {
|
||||||
|
window.clearInterval(this.dpiUpdateTimer);
|
||||||
|
}
|
||||||
this.dpiUpdateTimer = window.setTimeout($.proxy(this.updateDPI_, this), 200);
|
this.dpiUpdateTimer = window.setTimeout($.proxy(this.updateDPI_, this), 200);
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -215,10 +217,13 @@
|
||||||
* @private
|
* @private
|
||||||
*/
|
*/
|
||||||
ns.DrawingController.prototype.onCanvasContextMenu_ = function (event) {
|
ns.DrawingController.prototype.onCanvasContextMenu_ = function (event) {
|
||||||
|
if ($(event.target).closest('#drawing-canvas-container').length) {
|
||||||
|
// Deactivate right click on drawing canvas only.
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
event.stopPropagation();
|
event.stopPropagation();
|
||||||
event.cancelBubble = true;
|
event.cancelBubble = true;
|
||||||
return false;
|
return false;
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
ns.DrawingController.prototype.render = function () {
|
ns.DrawingController.prototype.render = function () {
|
||||||
|
@ -258,25 +263,10 @@
|
||||||
leftSectionWidth = $('.left-column').width(),
|
leftSectionWidth = $('.left-column').width(),
|
||||||
rightSectionWidth = $('.right-column').width(),
|
rightSectionWidth = $('.right-column').width(),
|
||||||
availableViewportWidth = $('body').width() - leftSectionWidth - rightSectionWidth,
|
availableViewportWidth = $('body').width() - leftSectionWidth - rightSectionWidth,
|
||||||
//previewHeight = $(".preview-container").height(),
|
|
||||||
//previewWidth = $(".preview-container").width(),
|
|
||||||
framePixelHeight = this.framesheet.getCurrentFrame().getHeight(),
|
framePixelHeight = this.framesheet.getCurrentFrame().getHeight(),
|
||||||
framePixelWidth = this.framesheet.getCurrentFrame().getWidth();
|
framePixelWidth = this.framesheet.getCurrentFrame().getWidth();
|
||||||
var dpi = pskl.PixelUtils.calculateDPI(availableViewportHeight, availableViewportWidth, framePixelHeight, framePixelWidth);
|
var dpi = pskl.PixelUtils.calculateDPI(availableViewportHeight, availableViewportWidth, framePixelHeight, framePixelWidth);
|
||||||
/*
|
|
||||||
var drawingCanvasHeight = dpi * framePixelHeight;
|
|
||||||
var drawingCanvasWidth = dpi * framePixelWidth;
|
|
||||||
*/
|
|
||||||
// Check if preview and drawing canvas overlap
|
|
||||||
/*
|
|
||||||
var heightGap = drawingCanvasHeight + previewHeight - availableViewportHeight,
|
|
||||||
widthGap = drawingCanvasWidth + previewWidth - availableViewportWidth;
|
|
||||||
if (heightGap > 0 && widthGap > 0) {
|
|
||||||
// Calculate the DPI change needed to bridge height and width gap
|
|
||||||
var gapDPI = pskl.PixelUtils.calculateDPI(heightGap, widthGap, framePixelHeight, framePixelWidth);
|
|
||||||
// substract gap dpi to initial dpi
|
|
||||||
dpi -= (gapDPI + 1);
|
|
||||||
}*/
|
|
||||||
return dpi;
|
return dpi;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -70,6 +70,13 @@ $.namespace("pskl");
|
||||||
$('body').tooltip({
|
$('body').tooltip({
|
||||||
selector: '[rel=tooltip]'
|
selector: '[rel=tooltip]'
|
||||||
});
|
});
|
||||||
|
|
||||||
|
$('#canvas-picker').change(function(evt) {
|
||||||
|
$('#canvas-picker option:selected').each(function() {
|
||||||
|
console.log($(this).val());
|
||||||
|
$('html')[0].className = $(this).val();
|
||||||
|
});
|
||||||
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
render : function (delta) {
|
render : function (delta) {
|
||||||
|
|