Initial commit from dropbox
Basic features : Can create frames Can edit frames (black and white only) Can select the frame to edit Animated preview And that's it. Really tired and code is extremely ugly, just needed to do something that _works_
This commit is contained in:
Julian Descottes
parent
c14a8ff08d
commit
1b44e3fd48
4 changed files with 297 additions and 0 deletions
36
css/piskel.css
Normal file
36
css/piskel.css
Normal 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);
|
||||
}
|
||||
83
css/style.css
Normal file
83
css/style.css
Normal file
|
|
@ -0,0 +1,83 @@
|
|||
html, body {
|
||||
height : 100%;
|
||||
margin : 0;
|
||||
cursor : default;
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
ul, li {
|
||||
margin : 0;
|
||||
padding : 0;
|
||||
}
|
||||
|
||||
.debug {
|
||||
border : 1px Solid black;
|
||||
}
|
||||
|
||||
.left-nav {
|
||||
position:absolute;
|
||||
top : 0;
|
||||
bottom : 0;
|
||||
width : 200px;
|
||||
background : #000;
|
||||
padding : 10px;
|
||||
}
|
||||
|
||||
.main-panel {
|
||||
position:absolute;
|
||||
top : 0;
|
||||
bottom : 0;
|
||||
left : 200px;
|
||||
right : 0;
|
||||
background : #ccc;
|
||||
}
|
||||
|
||||
.preview-container {
|
||||
position : absolute;
|
||||
top : 30px;
|
||||
right : 0;
|
||||
height : 256px;
|
||||
width : 256px;
|
||||
background : white;
|
||||
border : 0px Solid black;
|
||||
border-radius:5px 0px 0px 5px;
|
||||
box-shadow : 0px 0px 2px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.preview-container canvas{
|
||||
border : 0px Solid transparent;
|
||||
border-radius:5px 0px 0px 5px;
|
||||
}
|
||||
|
||||
#cursorInfo {
|
||||
position : fixed;
|
||||
cursor : default;
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.action-button {
|
||||
background-color : white;
|
||||
width : 150px;
|
||||
display : inline-block;
|
||||
}
|
||||
|
||||
#preview-list li{
|
||||
margin : 10px 0;
|
||||
width : 128px;
|
||||
height : 128px;
|
||||
}
|
||||
|
||||
#preview-list li.selected{
|
||||
margin : 8px -2px;
|
||||
border : 2px Solid red;
|
||||
}
|
||||
36
index.html
Normal file
36
index.html
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
|
||||
<title>Piskel</title>
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="Julian Descottes">
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
|
||||
|
||||
</head>
|
||||
<body
|
||||
onmousedown="piskel.onCanvasMousedown(arguments[0])"
|
||||
onmouseup="piskel.onCanvasMouseup(arguments[0])">
|
||||
<div class='debug left-nav'>
|
||||
<span class="action-button"
|
||||
onclick="piskel.addFrame()">
|
||||
Add a Frame
|
||||
</span>
|
||||
<ul id="preview-list">
|
||||
</ul>
|
||||
</div>
|
||||
<div class='main-panel'>
|
||||
<div id="canvas-container"></div>
|
||||
<div class='preview-container'>
|
||||
<canvas id="animated-preview" width="256" height="256"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
<div id="cursorInfo"></div>
|
||||
<script src="js/piskel.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
142
js/piskel.js
Normal file
142
js/piskel.js
Normal file
|
|
@ -0,0 +1,142 @@
|
|||
(function ($) {
|
||||
var frames = [], isClicked = false, brushSize = 10, index = -1, animIndex = 0, button = 0;
|
||||
|
||||
|
||||
var piskel = {
|
||||
init : function () {
|
||||
this.addFrame();
|
||||
|
||||
setInterval(this.refreshAnimatedPreview, 500);
|
||||
},
|
||||
|
||||
getCurrentCanvas : function () {
|
||||
return frames[index];
|
||||
},
|
||||
|
||||
onCanvasMousemove : function (event) {
|
||||
//this.updateCursorInfo(event);
|
||||
if (isClicked) {
|
||||
var coords = this.getRelativeCoordinates(event.clientX, event.clientY);
|
||||
this.drawAt(coords.x, coords.y);
|
||||
}
|
||||
},
|
||||
|
||||
createPreviews : function () {
|
||||
var container = $('preview-list');
|
||||
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);
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
refreshAnimatedPreview : function () {
|
||||
var context = $('animated-preview').getContext('2d');
|
||||
// erase canvas, verify proper way
|
||||
context.fillStyle = "white";
|
||||
context.fillRect(0, 0, 256, 256);
|
||||
|
||||
context.drawImage(frames[animIndex++], 0, 0, 320, 320, 0, 0 , 256, 256);
|
||||
if (animIndex == frames.length) {
|
||||
animIndex = 0;
|
||||
}
|
||||
},
|
||||
|
||||
setFrame : function (frameIndex) {
|
||||
index = frameIndex;
|
||||
$('canvas-container').innerHTML = "";
|
||||
$('canvas-container').appendChild(this.getCurrentCanvas());
|
||||
this.createPreviews();
|
||||
},
|
||||
|
||||
updateCursorInfo : function (event) {
|
||||
var cursor = $('cursorInfo');
|
||||
cursor.style.top = event.clientY + 10 + "px";
|
||||
cursor.style.left = event.clientX + 10 + "px";
|
||||
|
||||
var coordinates = this.getRelativeCoordinates(event.clientX, event.clientY)
|
||||
cursor.innerHTML = [
|
||||
"X : " + coordinates.x,
|
||||
"Y : " + coordinates.y
|
||||
].join(", ");
|
||||
},
|
||||
|
||||
onCanvasMousedown : function (event) {
|
||||
isClicked = true;
|
||||
button = event.button;
|
||||
var coords = this.getRelativeCoordinates(event.clientX, event.clientY);
|
||||
this.drawAt(coords.x, coords.y);
|
||||
},
|
||||
|
||||
onCanvasMouseup : function (event) {
|
||||
isClicked = 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";
|
||||
}
|
||||
|
||||
context.fillRect(x - x%brushSize, y - y%brushSize, brushSize, brushSize);
|
||||
this.createPreviews();
|
||||
},
|
||||
|
||||
onCanvasContextMenu : function (event) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
event.cancelBubble = true;
|
||||
return false;
|
||||
},
|
||||
getRelativeCoordinates : function (x, y) {
|
||||
var canvas = this.getCurrentCanvas();
|
||||
var canvasRect = canvas.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);
|
||||
}
|
||||
};
|
||||
|
||||
window.piskel = piskel;
|
||||
piskel.init();
|
||||
|
||||
})(function(id){return document.getElementById(id)});
|
||||
Loading…
Reference in a new issue