piskel/index.html

<!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>
  <div class='debug left-nav'>

    <!-- Frame actions: -->
    <button onclick="piskel.storeSheet()" class="action-button">Save Framesheet</button>
    <button id='add-frame-button' class="action-button">
      Add a Frame
    </button>

    <!-- List of frames: -->
    <ul id="preview-list"></ul>
  </div>
  <div class='main-panel'>

    <!-- Drawing area: -->
    <div id="drawing-canvas-container" class="drawing-canvas-container canvas-container">
      <div class="canvas-background"></div>
    </div>

    <!-- Tool section: -->
    <div id="tools-container" class="tools-container">
      <div class="tool-icon tool-pen" data-tool-id="tool-pen" title="Pen tool"></div>
      <div class="tool-icon tool-eraser" data-tool-id="tool-eraser" title="Eraser tool"></div>
      <div class="tool-icon tool-paint-bucket" data-tool-id="tool-paint-bucket" title="Bucket tool"></div>
      <div class="tool-icon tool-stroke" data-tool-id="tool-stroke" title="Stroke tool"></div>
      <div class="tool-icon tool-rectangle" data-tool-id="tool-rectangle" title="Rectangle tool"></div>
      
      <div class="color-tool">
        <input id="color-picker" class="color {hash:true}" type="text" value=""/>
        
        <ul id="palette" class="palette">
          <span class="palette-color transparent-color" data-color="TRANSPARENT" title="Transparent"></span>
        </ul>
      </div>
    </div>

    <!-- Animation preview: -->
    <div class='preview-container'>
      <div id='preview-canvas-container' class="canvas-container">
        <div class="canvas-background"></div>
      </div>
      <div>
        <input id="preview-fps" type="range" min="1" max="24" value="12" style="width:200px;"/>
        <span id="display-fps">12 fps</span>
      </div>
    </div>
  </div>
  <div id="cursorInfo"></div>
  
  <!-- Core libraries: -->
  <script src="js/lib/jquery-1.8.0.js"></script>
  <script src="js/lib/pubsub.js"></script> 
  
  <!-- Application wide configuration -->
  <script src="js/Constants.js"></script>
  <script src="js/Events.js"></script>
  
  <!-- Libraries -->
  <script src="js/utils.js"></script>
  <script src="js/lib/jsColor_1_4_0/jscolor.js"></script>

  <!-- Application libraries-->
  <script src="js/FrameSheetModel.js"></script>
  <script src="js/LocalStorageService.js"></script>
  <script src="js/Palette.js"></script>
  <script src="js/Notification.js"></script>
  <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/Stroke.js"></script>
  <script src="js/drawingtools/PaintBucket.js"></script>
  <script src="js/drawingtools/Rectangle.js"></script>
  <script src="js/ToolSelector.js"></script>

  <!-- Application controller and initialization -->
  <script src="js/piskel.js"></script>
</body>
</html>
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">`
Stroke tool Add stroke tool new icons for tools started some refactoring to help having a big redraw loop 2012-09-02 02:44:55 +04:00
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			`<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'>`
Stroke tool Add stroke tool new icons for tools started some refactoring to help having a big redraw loop 2012-09-02 02:44:55 +04:00
			`<!-- Frame actions: -->`
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>`
Stroke tool Add stroke tool new icons for tools started some refactoring to help having a big redraw loop 2012-09-02 02:44:55 +04:00
			`<!-- List of frames: -->`
			`<ul id="preview-list"></ul>`
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 class='main-panel'>`
Stroke tool Add stroke tool new icons for tools started some refactoring to help having a big redraw loop 2012-09-02 02:44:55 +04:00
			`<!-- Drawing area: -->`
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>`
Stroke tool Add stroke tool new icons for tools started some refactoring to help having a big redraw loop 2012-09-02 02:44:55 +04:00
			`<!-- Tool section: -->`
Tool plugin architecture with eraser/pen/paintbucket tools. 2012-08-31 12:45:07 +04:00			`<div id="tools-container" class="tools-container">`
Stroke tool Add stroke tool new icons for tools started some refactoring to help having a big redraw loop 2012-09-02 02:44:55 +04:00			`<div class="tool-icon tool-pen" data-tool-id="tool-pen" title="Pen tool"></div>`
			`<div class="tool-icon tool-eraser" data-tool-id="tool-eraser" title="Eraser tool"></div>`
			`<div class="tool-icon tool-paint-bucket" data-tool-id="tool-paint-bucket" title="Bucket tool"></div>`
			`<div class="tool-icon tool-stroke" data-tool-id="tool-stroke" title="Stroke tool"></div>`
Adding rectangle tool 2012-09-02 15:19:20 +04:00			`<div class="tool-icon tool-rectangle" data-tool-id="tool-rectangle" title="Rectangle tool"></div>`
Stroke tool Add stroke tool new icons for tools started some refactoring to help having a big redraw loop 2012-09-02 02:44:55 +04:00
Adding support for transparent color 2012-09-02 03:41:49 +04:00			`<div class="color-tool">`
			`<input id="color-picker" class="color {hash:true}" type="text" value=""/>`

Cleanup of piskel.js Partial cleanup of piskel: new events and constant move palette and color picker in ToolSelector create Notifcation.js and move user message in it create LocalStorageService and move LS stuff in it 2012-09-03 03:24:55 +04:00			`<ul id="palette" class="palette">`
Adding support for transparent color 2012-09-02 03:41:49 +04:00			`<span class="palette-color transparent-color" data-color="TRANSPARENT" title="Transparent"></span>`
			`</ul>`
			`</div>`
Tool plugin architecture with eraser/pen/paintbucket tools. 2012-08-31 12:45:07 +04:00			`</div>`
Stroke tool Add stroke tool new icons for tools started some refactoring to help having a big redraw loop 2012-09-02 02:44:55 +04:00
			`<!-- Animation preview: -->`
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
Stroke tool Add stroke tool new icons for tools started some refactoring to help having a big redraw loop 2012-09-02 02:44:55 +04:00			`<!-- Core libraries: -->`
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>`

Stroke tool Add stroke tool new icons for tools started some refactoring to help having a big redraw loop 2012-09-02 02:44:55 +04:00			`<!-- Application wide configuration -->`
Tool plugin architecture with eraser/pen/paintbucket tools. 2012-08-31 12:45:07 +04:00			`<script src="js/Constants.js"></script>`
			`<script src="js/Events.js"></script>`
Stroke tool Add stroke tool new icons for tools started some refactoring to help having a big redraw loop 2012-09-02 02:44:55 +04:00
			`<!-- Libraries -->`
Tool plugin architecture with eraser/pen/paintbucket tools. 2012-08-31 12:45:07 +04:00			`<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
Stroke tool Add stroke tool new icons for tools started some refactoring to help having a big redraw loop 2012-09-02 02:44:55 +04:00			`<!-- Application libraries-->`
Cleanup of piskel.js Partial cleanup of piskel: new events and constant move palette and color picker in ToolSelector create Notifcation.js and move user message in it create LocalStorageService and move LS stuff in it 2012-09-03 03:24:55 +04:00			`<script src="js/FrameSheetModel.js"></script>`
			`<script src="js/LocalStorageService.js"></script>`
Create palette component Create Palette component (was inside the ToolSelector before) Fix the palette generation as well. 2012-09-04 00:30:53 +04:00			`<script src="js/Palette.js"></script>`
Cleanup of piskel.js Partial cleanup of piskel: new events and constant move palette and color picker in ToolSelector create Notifcation.js and move user message in it create LocalStorageService and move LS stuff in it 2012-09-03 03:24:55 +04:00			`<script src="js/Notification.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>`
Stroke tool Add stroke tool new icons for tools started some refactoring to help having a big redraw loop 2012-09-02 02:44:55 +04:00			`<script src="js/drawingtools/Stroke.js"></script>`
Tool plugin architecture with eraser/pen/paintbucket tools. 2012-08-31 12:45:07 +04:00			`<script src="js/drawingtools/PaintBucket.js"></script>`
Adding rectangle tool 2012-09-02 15:19:20 +04:00			`<script src="js/drawingtools/Rectangle.js"></script>`
Tool plugin architecture with eraser/pen/paintbucket tools. 2012-08-31 12:45:07 +04:00			`<script src="js/ToolSelector.js"></script>`
Stroke tool Add stroke tool new icons for tools started some refactoring to help having a big redraw loop 2012-09-02 02:44:55 +04:00
			`<!-- Application controller and initialization -->`
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>`