mirror/piskel
1
0
Fork 0
mirror of https://github.com/piskelapp/piskel.git synced 2023-08-10 21:12:52 +03:00
Code Issues Projects Releases Wiki Activity
d1baf543c3
piskel/index.html

66 lines
2.2 KiB
HTML
Raw Normal View History

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_
2012-08-23 02:57:35 +04:00
<!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>
FrameSheet model object migration Migration to a Domain object (currently a FrameSheetModel, feel free to change its name). The model is being used by the slideshow (drawing each tiles), animation preview (drawing animation) and drawing (update model and redraw current tile). Now the rendering information are not stored in a canvas element that you paste from canvas to canvas but centralize in this model. The frame is described as an array of array: that will allow different rendering using the dpi constants and more flexibility (e.g. drawing a grid, serializing the data). Some minor modifications: - cleaning markup - adding background image to highlight transparent area
2012-08-27 04:05:13 +04:00
<body>
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_
2012-08-23 02:57:35 +04:00
<div class='debug left-nav'>
post
2012-08-30 03:16:13 +04:00
<button onclick="piskel.storeSheet()" class="action-button">Save Framesheet</button>
FrameSheet model object migration Migration to a Domain object (currently a FrameSheetModel, feel free to change its name). The model is being used by the slideshow (drawing each tiles), animation preview (drawing animation) and drawing (update model and redraw current tile). Now the rendering information are not stored in a canvas element that you paste from canvas to canvas but centralize in this model. The frame is described as an array of array: that will allow different rendering using the dpi constants and more flexibility (e.g. drawing a grid, serializing the data). Some minor modifications: - cleaning markup - adding background image to highlight transparent area
2012-08-27 04:05:13 +04:00
<button id='add-frame-button' class="action-button">
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_
2012-08-23 02:57:35 +04:00
Add a Frame
Delete/Duplicate actions for tile preview + FPS tuner for animated preview
2012-08-25 04:25:44 +04:00
</button>
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_
2012-08-23 02:57:35 +04:00
<ul id="preview-list">
</ul>
</div>
<div class='main-panel'>
Tool plugin architecture with eraser/pen/paintbucket tools.
2012-08-31 12:45:07 +04:00
<div id="drawing-canvas-container" class="drawing-canvas-container canvas-container">
FrameSheet model object migration Migration to a Domain object (currently a FrameSheetModel, feel free to change its name). The model is being used by the slideshow (drawing each tiles), animation preview (drawing animation) and drawing (update model and redraw current tile). Now the rendering information are not stored in a canvas element that you paste from canvas to canvas but centralize in this model. The frame is described as an array of array: that will allow different rendering using the dpi constants and more flexibility (e.g. drawing a grid, serializing the data). Some minor modifications: - cleaning markup - adding background image to highlight transparent area
2012-08-27 04:05:13 +04:00
<div class="canvas-background"></div>
</div>
Tool plugin architecture with eraser/pen/paintbucket tools.
2012-08-31 12:45:07 +04:00
<div id="tools-container" class="tools-container">
<div class="tool-icon tool-pen" data-tool-id="tool-pen"></div>
<div class="tool-icon tool-eraser" data-tool-id="tool-eraser"></div>
<div class="tool-icon tool-paint-bucket" data-tool-id="tool-paint-bucket"></div>
<input id="color-picker" class="color {hash:true}" type="text" value=""/>
<ul id="palette" onclick="piskel.onPaletteClick(event)"></ul>
</div>
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_
2012-08-23 02:57:35 +04:00
<div class='preview-container'>
FrameSheet model object migration Migration to a Domain object (currently a FrameSheetModel, feel free to change its name). The model is being used by the slideshow (drawing each tiles), animation preview (drawing animation) and drawing (update model and redraw current tile). Now the rendering information are not stored in a canvas element that you paste from canvas to canvas but centralize in this model. The frame is described as an array of array: that will allow different rendering using the dpi constants and more flexibility (e.g. drawing a grid, serializing the data). Some minor modifications: - cleaning markup - adding background image to highlight transparent area
2012-08-27 04:05:13 +04:00
<div id='preview-canvas-container' class="canvas-container">
<div class="canvas-background"></div>
</div>
Delete/Duplicate actions for tile preview + FPS tuner for animated preview
2012-08-25 04:25:44 +04:00
<div>
Use slider for choosing FPS
2012-08-29 15:46:57 +04:00
<input id="preview-fps" type="range" min="1" max="24" value="12" style="width:200px;"/>
<span id="display-fps">12 fps</span>
Delete/Duplicate actions for tile preview + FPS tuner for animated preview
2012-08-25 04:25:44 +04:00
</div>
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_
2012-08-23 02:57:35 +04:00
</div>
</div>
<div id="cursorInfo"></div>
Adding query 1.8.0 and pubsub bus
2012-08-30 02:48:22 +04:00
<script src="js/lib/jquery-1.8.0.js"></script>
Tool plugin architecture with eraser/pen/paintbucket tools.
2012-08-31 12:45:07 +04:00
<script src="js/lib/pubsub.js"></script>
<script src="js/Constants.js"></script>
<script src="js/Events.js"></script>
<script src="js/utils.js"></script>
Adding basic color picker
2012-08-29 00:24:58 +04:00
<script src="js/lib/jsColor_1_4_0/jscolor.js"></script>
Tool plugin architecture with eraser/pen/paintbucket tools.
2012-08-31 12:45:07 +04:00
FrameSheet model object migration Migration to a Domain object (currently a FrameSheetModel, feel free to change its name). The model is being used by the slideshow (drawing each tiles), animation preview (drawing animation) and drawing (update model and redraw current tile). Now the rendering information are not stored in a canvas element that you paste from canvas to canvas but centralize in this model. The frame is described as an array of array: that will allow different rendering using the dpi constants and more flexibility (e.g. drawing a grid, serializing the data). Some minor modifications: - cleaning markup - adding background image to highlight transparent area
2012-08-27 04:05:13 +04:00
<script src="js/frameSheetModel.js"></script>
Tool plugin architecture with eraser/pen/paintbucket tools.
2012-08-31 12:45:07 +04:00
<script src="js/drawingtools/BaseTool.js"></script>
<script src="js/drawingtools/SimplePen.js"></script>
<script src="js/drawingtools/Eraser.js"></script>
<script src="js/drawingtools/PaintBucket.js"></script>
<script src="js/ToolSelector.js"></script>
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_
2012-08-23 02:57:35 +04:00
<script src="js/piskel.js"></script>
</body>
</html>
Reference in New Issue Copy Permalink