wbrawner/piskel
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

copied 2 pull requests from grosbouddha

Browse source
This commit is contained in:
Julian Descottes 2012-08-28 00:53:27 +02:00
parent caef231f7e
commit 817d375d8f
6 changed files with 457 additions and 107 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
css/piskel.css Normal file
View file

@ -0,0 +1,36 @@
html, body {
height : 100%;
}
.debug {
border : 1px Solid black;
}
.left-nav {
position:absolute;
top : 0;
bottom : 0;
width : 200px;
background : #000;
}
.main-panel {
position:absolute;
top : 0;
bottom : 0;
left : 200px;
right : 0;
background : #ccc;
}
.preview-container {
position : absolute;
top : 30px;
right : 0;
height : 200px;
width : 200px;
background : white;
border : 0px Solid black;
border-radius:5px 0px 0px 5px;
box-shadow : 0px 0px 2px rgba(0,0,0,0.2);
}

89
css/style.css
View file

@ -24,6 +24,7 @@ ul, li {
top : 0;
bottom : 0;
width : 200px;
overflow-y: scroll;
background : #000;
padding : 10px;
}
@ -32,7 +33,7 @@ ul, li {
position:absolute;
top : 0;
bottom : 0;
left : 200px;
left : 220px;
right : 0;
background : #ccc;
}
@ -49,7 +50,7 @@ ul, li {
box-shadow : 0px 0px 2px rgba(0,0,0,0.2);
}
.preview-container canvas{
.preview-container canvas {
border : 0px Solid transparent;
border-radius:5px 0px 0px 5px;
}
@ -66,34 +67,74 @@ ul, li {
}
.action-button {
background-color: white;
width: 118px;
padding: 5px;
text-align: center;
border-radius: 2px;
display: inline-block;
font-family: Arial;
cursor: pointer;
color: white;
background: #aaa;
text-shadow: 0 -1px 0 #888;
background-color : white;
width : 150px;
display : inline-block;
}
.action-button:hover {
background: #b0b0b0;
#preview-list {
list-style-type: none;
}
.action-button:active {
background: #9a9a9a;
.preview-tile {
padding : 10px;
overflow: hidden;
background-color: gray;
}
#preview-list li{
margin : 10px 0;
width : 128px;
height : 128px;
.preview-tile .canvas-container {
float: left;
}
#preview-list li.selected{
margin : 8px -2px;
border : 2px Solid red;
.preview-tile .tile-view {
float: left;
border: blue 1px solid;
}
.preview-tile .tile-action {
display: none;
float: right;
}
.preview-tile:hover .tile-action {
display: block;
}
.preview-tile:hover {
background-color: lightgray;
}
#preview-list .preview-tile.selected {
background-color: lightyellow;
}
.canvas-container {
position: relative;
display: block;
}
.canvas-container .canvas-background {
background: url(../img/transparent_background.png) repeat;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.canvas {
position: relative;
z-index: 1;
}
/* Force apparition of scrollbars on leopard */
::-webkit-scrollbar {
-webkit-appearance: none;
width: 7px;
}
::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: rgba(180,180,180,.7);
-webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}

BIN
img/transparent_background.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 47 KiB

21
index.html
View file

@ -13,24 +13,29 @@
</head>
<body
onmousedown="piskel.onCanvasMousedown(arguments[0])"
onmouseup="piskel.onCanvasMouseup(arguments[0])">
<body>
<div class='debug left-nav'>
<span class="action-button"
onclick="piskel.addFrame()">
<button id='add-frame-button' class="action-button">
Add a Frame
</span>
</button>
<ul id="preview-list">
</ul>
</div>
<div class='main-panel'>
<div id="canvas-container"></div>
<div id="drawing-canvas-container" class="canvas-container">
<div class="canvas-background"></div>
</div>
<div class='preview-container'>
<canvas id="animated-preview" width="256" height="256"></canvas>
<div id='preview-canvas-container' class="canvas-container">
<div class="canvas-background"></div>
</div>
<div>
<label>Preview FPS:</label><input id="preview-fps" type="text" value="12" />
</div>
</div>
</div>
<div id="cursorInfo"></div>
<script src="js/frameSheetModel.js"></script>
<script src="js/piskel.js"></script>
</body>
</html>

76
js/frameSheetModel.js Normal file
View file

@ -0,0 +1,76 @@
var FrameSheetModel = (function() {
var inst;
var frames = [];
var width;
var height;
var createEmptyFrame_ = function() {
var emptyFrame = new Array(width);
for (var columnIndex=0; columnIndex < width; columnIndex++) {
emptyFrame[columnIndex] = new Array(height);
}
return emptyFrame;
};
return {
validate: function() {
return true; // I'm always right dude
},
// Could be use to pass around model using long GET param (good enough for simple models) and
// do some temporary locastorage
serialize: function() {
throw "FrameSheet.serialize Not implemented"
},
addEmptyFrame: function() {
frames.push(createEmptyFrame_());
},
getFrameCount: function() {
return frames.length;
},
getFrameByIndex: function(index) {
if (isNaN(index)) {
throw "Bad argument value for getFrameByIndex method: <" + index + ">"
} else if (index < 0 || index > frames.length) {
throw "Out of bound index for frameSheet object."
}
return frames[index];
},
removeFrameByIndex: function(index) {
if(index < 0 || index > inst.getFrameCount()) {
throw "Bad index value for removeFrameByIndex.";
}
frames.splice(index, 1);
},
duplicateFrameByIndex: function(frameToDuplicateIndex) {
var frame = inst.getFrameByIndex(frameToDuplicateIndex);
var clonedFrame = [];
for(var i=0, l=frame.length; i<l; i++) {
clonedFrame.push(frame[i].slice(0));
}
frames.splice(frameToDuplicateIndex + 1, 0, clonedFrame);
},
getInstance: function(width_, height_) {
if (isNaN(width_) || isNaN(height_)) {
throw "Bad FrameSheetModel initialization in getInstance method.";
}
inst = this;
width = width_;
height = height_;
return inst;
}
}
})();

342
js/piskel.js
View file

@ -1,67 +1,232 @@
(function ($) {
var frames = [], isClicked = false, brushSize = 10, index = -1, animIndex = 0, button = 0;
var frameSheet,
// Constants:
TRANSPARENT_COLOR = 'tc',
//TRANSPARENT_COLOR = 'pink',
DEFAULT_PEN_COLOR = '#000',
// Configuration:
// Canvas size in pixel size (not dpi related)
framePixelWidth = 32,
framePixelHeight = 32,
// Scaling factors for a given frameSheet rendering:
// Main drawing area:
drawingCanvasDpi = 10,
// Canvas previous in the slideshow:
previewTileCanvasDpi = 4,
// Ainmated canvas preview:
previewAnimationCanvasDpi = 8,
// DOM references:
drawingAreaContainer,
drawingAreaCanvas,
previewCanvas,
// States:
isClicked = false,
isRightClicked = false,
activeFrameIndex = -1,
animIndex = 0,
penColor = DEFAULT_PEN_COLOR;
var piskel = {
init : function () {
this.addFrame();
frameSheet = FrameSheetModel.getInstance(framePixelWidth, framePixelHeight);
frameSheet.addEmptyFrame();
this.setActiveFrame(0);
setInterval(this.refreshAnimatedPreview, 500);
this.initDrawingArea();
this.initPreviewSlideshow();
this.initAnimationPreview();
},
getCurrentCanvas : function () {
return frames[index];
setActiveFrame: function(index) {
activeFrameIndex = index;
},
onCanvasMousemove : function (event) {
//this.updateCursorInfo(event);
if (isClicked) {
var coords = this.getRelativeCoordinates(event.clientX, event.clientY);
this.drawAt(coords.x, coords.y);
setActiveFrameAndRedraw: function(index) {
this.setActiveFrame(index);
// Update drawing canvas:
this.drawFrameToCanvas(frameSheet.getFrameByIndex(this.getActiveFrameIndex()), drawingAreaCanvas, drawingCanvasDpi);
// Update slideshow:
this.createPreviews();
// Update animation preview:
animIndex = 0;
},
getActiveFrameIndex: function() {
if(-1 == activeFrameIndex) {
throw "Bad active frane initialization."
}
return activeFrameIndex;
},
initDrawingArea : function() {
drawingAreaContainer = $('drawing-canvas-container');
drawingAreaCanvas = document.createElement("canvas");
drawingAreaCanvas.className = 'canvas';
drawingAreaCanvas.setAttribute('width', '' + framePixelWidth * drawingCanvasDpi);
drawingAreaCanvas.setAttribute('height', '' + framePixelHeight * drawingCanvasDpi);
drawingAreaContainer.setAttribute('style',
'width:' + framePixelWidth * drawingCanvasDpi + 'px; height:' + framePixelHeight * drawingCanvasDpi + 'px;');
drawingAreaCanvas.setAttribute('oncontextmenu', 'piskel.onCanvasContextMenu(arguments[0])');
drawingAreaContainer.appendChild(drawingAreaCanvas);
var body = document.getElementsByTagName('body')[0];
body.setAttribute('onmouseup', 'piskel.onCanvasMouseup(arguments[0])');
drawingAreaContainer.setAttribute('onmousedown', 'piskel.onCanvasMousedown(arguments[0])');
drawingAreaContainer.setAttribute('onmousemove', 'piskel.onCanvasMousemove(arguments[0])');
this.drawFrameToCanvas(frameSheet.getFrameByIndex(this.getActiveFrameIndex()), drawingAreaCanvas, drawingCanvasDpi);
},
initPreviewSlideshow: function() {
var addFrameButton = $('add-frame-button');
addFrameButton.addEventListener('mousedown', function() {
frameSheet.addEmptyFrame();
piskel.setActiveFrameAndRedraw(frameSheet.getFrameCount() - 1);
});
this.createPreviews();
},
initAnimationPreview : function() {
var scope = this;
var previewAnimationContainer = $('preview-canvas-container');
previewCanvas = document.createElement('canvas');
previewCanvas.className = 'canvas';
previewAnimationContainer.setAttribute('style',
'width:' + framePixelWidth * previewAnimationCanvasDpi + 'px; height:' + framePixelHeight * previewAnimationCanvasDpi + 'px;');
previewAnimationContainer.appendChild(previewCanvas);
previewCanvas.setAttribute('width', framePixelWidth * previewAnimationCanvasDpi);
previewCanvas.setAttribute('height', framePixelHeight * previewAnimationCanvasDpi);
var animFPSTuner = document.getElementById("preview-fps");
var animPreviewFPS = parseInt(animFPSTuner.value, 10);
var startPreviewRefresh = function() {
return setInterval(scope.refreshAnimatedPreview, 1000/animPreviewFPS);
};
var refreshUpdater = startPreviewRefresh();
animFPSTuner.addEventListener('keyup', function(evt) {
window.clearInterval(refreshUpdater);
animPreviewFPS = parseInt(animFPSTuner.value, 10);
if(isNaN(animPreviewFPS)) {
animPreviewFPS = 1;
}
if(evt.keyCode == 38) {
animPreviewFPS++;
}
else if (evt.keyCode == 40) {
animPreviewFPS--;
}
if(animPreviewFPS < 1) {
animPreviewFPS = 1;
}
if(animPreviewFPS > 100) {
animPreviewFPS = 100;
}
animFPSTuner.value = animPreviewFPS;
refreshUpdater = startPreviewRefresh();
});
},
createPreviews : function () {
var container = $('preview-list');
var container = $('preview-list'), previewTile;
container.innerHTML = "";
for (var i = 0 ; i < frames.length ; i++) {
var preview = document.createElement("li");
if (index == i) {
preview.className = "selected";
}
var canvasPreview = document.createElement("canvas");
canvasPreview.setAttribute('width', '128');
canvasPreview.setAttribute('height', '128');
canvasPreview.setAttribute('onclick', 'piskel.setFrame('+i+')');
canvasPreview.getContext('2d').drawImage(frames[i], 0, 0, 320, 320, 0, 0 , 128, 128);
preview.appendChild(canvasPreview);
container.appendChild(preview);
for (var i = 0, l = frameSheet.getFrameCount(); i < l ; i++) {
previewTile = this.createPreviewTile(i);
container.appendChild(previewTile);
}
},
refreshAnimatedPreview : function () {
var context = $('animated-preview').getContext('2d');
// erase canvas, verify proper way
context.fillStyle = "white";
context.fillRect(0, 0, 256, 256);
createPreviewTile: function(tileNumber) {
var previewTileRoot = document.createElement("li");
var classname = "preview-tile";
context.drawImage(frames[animIndex++], 0, 0, 320, 320, 0, 0 , 256, 256);
if (animIndex == frames.length) {
if (this.getActiveFrameIndex() == tileNumber) {
classname += " selected";
}
previewTileRoot.className = classname;
var canvasContainer = document.createElement("div");
canvasContainer.className = "canvas-container";
canvasContainer.setAttribute('style',
'width:' + framePixelWidth * previewTileCanvasDpi + 'px; height:' + framePixelHeight * previewTileCanvasDpi + 'px;');
var canvasBackground = document.createElement("div");
canvasBackground.className = "canvas-background";
canvasContainer.appendChild(canvasBackground);
var canvasPreview = document.createElement("canvas");
canvasPreview.className = "canvas tile-view"
canvasPreview.setAttribute('width', framePixelWidth * previewTileCanvasDpi);
canvasPreview.setAttribute('height', framePixelHeight * previewTileCanvasDpi);
previewTileRoot.addEventListener('click', function(evt) {
// has not class tile-action:
// TODO: let me know when you want to start using a framework :)
if(!evt.target.className.match(new RegExp('(\\s|^)'+ 'tile-action' +'(\\s|$)'))) {
piskel.setActiveFrameAndRedraw(tileNumber);
}
});
var canvasPreviewDuplicateAction = document.createElement("button");
canvasPreviewDuplicateAction.className = "tile-action"
canvasPreviewDuplicateAction.innerHTML = "dup"
canvasPreviewDuplicateAction.addEventListener('click', function(evt) {
piskel.duplicateFrame(tileNumber);
});
this.drawFrameToCanvas(frameSheet.getFrameByIndex(tileNumber), canvasPreview, previewTileCanvasDpi);
canvasContainer.appendChild(canvasPreview);
previewTileRoot.appendChild(canvasContainer);
previewTileRoot.appendChild(canvasPreviewDuplicateAction);
if(tileNumber > 0 || frameSheet.getFrameCount() > 1) {
var canvasPreviewDeleteAction = document.createElement("button");
canvasPreviewDeleteAction.className = "tile-action"
canvasPreviewDeleteAction.innerHTML = "del"
canvasPreviewDeleteAction.addEventListener('click', function(evt) {
frameSheet.removeFrameByIndex(tileNumber);
animIndex = 0;
piskel.createPreviews();
});
previewTileRoot.appendChild(canvasPreviewDeleteAction);
}
return previewTileRoot;
},
refreshAnimatedPreview : function () {
piskel.drawFrameToCanvas(frameSheet.getFrameByIndex(animIndex), previewCanvas, previewAnimationCanvasDpi);
animIndex++;
if (animIndex == frameSheet.getFrameCount()) {
animIndex = 0;
}
},
setFrame : function (frameIndex) {
index = frameIndex;
$('canvas-container').innerHTML = "";
$('canvas-container').appendChild(this.getCurrentCanvas());
this.createPreviews();
removeFrame: function(frameIndex) {
frameSheet.removeFrameByIndex(frameIndex);
this.setActiveFrameAndRedraw(frameIndex - 1);
},
duplicateFrame: function(frameIndex) {
frameSheet.duplicateFrameByIndex(frameIndex);
this.setActiveFrameAndRedraw(frameIndex + 1);
},
updateCursorInfo : function (event) {
@ -78,26 +243,73 @@
onCanvasMousedown : function (event) {
isClicked = true;
button = event.button;
var coords = this.getRelativeCoordinates(event.clientX, event.clientY);
this.drawAt(coords.x, coords.y);
if(event.button == 0) {
this.drawAt(coords.x, coords.y, penColor);
} else {
// Right click used to delete.
isRightClicked = true;
this.drawAt(coords.x, coords.y, TRANSPARENT_COLOR);
}
},
onCanvasMousemove : function (event) {
//this.updateCursorInfo(event);
if (isClicked) {
var coords = this.getRelativeCoordinates(event.clientX, event.clientY);
if(isRightClicked) {
this.drawAt(coords.x, coords.y, TRANSPARENT_COLOR);
} else {
this.drawAt(coords.x, coords.y, penColor);
}
}
},
onCanvasMouseup : function (event) {
if(isClicked || isRightClicked) {
// A mouse button was clicked on the drawing canvas before this mouseup event,
// the user was probably drawing on the canvas.
// Note: The mousemove movement (and the mouseup) may end up outside
// of the drawing canvas.
this.createPreviews();
}
isClicked = false;
isRightClicked = false;
},
drawAt : function (x, y) {
if (x < 0 || y < 0 || x > 320 || y > 320) return;
var context = this.getCurrentCanvas().getContext('2d');
if (button == 0) {
context.fillStyle = "black";
} else {
context.fillStyle = "white";
}
drawAt : function (x, y, color) {
var pixelWidthIndex = (x - x%drawingCanvasDpi) / 10;
var pixelHeightIndex = (y - y%drawingCanvasDpi) / 10;
// Update model:
var currentFrame = frameSheet.getFrameByIndex(this.getActiveFrameIndex());
// TODO: make a better accessor for pixel state update:
// TODO: Make pen color dynamic:
currentFrame[pixelWidthIndex][pixelHeightIndex] = color;
// Update view:
// TODO: Create a per pixel update function for perf ?
this.drawFrameToCanvas(currentFrame, drawingAreaCanvas, drawingCanvasDpi);
},
context.fillRect(x - x%brushSize, y - y%brushSize, brushSize, brushSize);
this.createPreviews();
// TODO: move that to a FrameRenderer (/w cache) ?
drawFrameToCanvas: function(frame, canvasElement, dpi) {
var pixelColor, context = canvasElement.getContext('2d');
for(var col = 0, num_col = frame.length; col < num_col; col++) {
for(var row = 0, num_row = frame[col].length; row < num_row; row++) {
pixelColor = frame[col][row];
if(pixelColor == undefined || pixelColor == TRANSPARENT_COLOR) {
context.clearRect(col * dpi, row * dpi, dpi, dpi);
} else {
context.fillStyle = pixelColor;
context.fillRect(col * dpi, row * dpi, dpi, dpi);
}
}
}
},
onCanvasContextMenu : function (event) {
@ -106,33 +318,13 @@
event.cancelBubble = true;
return false;
},
getRelativeCoordinates : function (x, y) {
var canvas = this.getCurrentCanvas();
var canvasRect = canvas.getBoundingClientRect();
var canvasRect = drawingAreaCanvas.getBoundingClientRect();
return {
x : x - canvasRect.left,
y : y - canvasRect.top
}
},
addFrame : function () {
var canvas = document.createElement("canvas");
canvas.setAttribute('width', '320');
canvas.setAttribute('height', '320');
canvas.setAttribute('onmousemove', 'piskel.onCanvasMousemove(arguments[0])');
canvas.setAttribute('oncontextmenu', 'piskel.onCanvasContextMenu(arguments[0])');
canvas.setAttribute('onclick', 'piskel.onCanvasClick(arguments[0])');
var context = canvas.getContext('2d');
context.fillStyle = "white";
context.fillRect(0, 0, 320, 320);
if(frames[index]) { //is a valid canvas
context.drawImage(frames[index], 0, 0, 320, 320, 0, 0 , 320, 320);
}
frames.push(canvas);
this.setFrame(frames.length - 1);
}
};