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

143 lines
6 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-22 22:57:35 +00: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-01 22:44:55 +00: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-22 22:57:35 +00:00
<meta name="viewport" content="width=device-width, initial-scale=1.0">
series of tiny improvements to the ui
2012-09-04 21:48:02 +00:00
<link rel="stylesheet" href="css/reset.css">
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-22 22:57:35 +00:00
<link rel="stylesheet" href="css/style.css">
series of tiny improvements to the ui
2012-09-04 21:48:02 +00:00
<link rel="stylesheet" href="css/tools.css">
UI cleanup
2012-09-16 02:33:26 +00:00
<link rel="stylesheet" href="css/bootstrap/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap/bootstrap-tooltip-custom.css">
Small css cleaning for preview film
2012-09-07 21:24:48 +00:00
<link rel="stylesheet" href="css/preview-film-section.css">
UI cleanup
2012-09-16 02:33:26 +00:00
<link rel="stylesheet" href="css/preview-animation-section.css">
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-22 22:57:35 +00:00
</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 00:05:13 +00:00
<body>
Stroke tool Add stroke tool new icons for tools started some refactoring to help having a big redraw loop
2012-09-01 22:44:55 +00:00
UI cleanup
2012-09-16 02:33:26 +00:00
<div class='left-section'>
<div class="menubar">
<ul class="tools-group">
<!-- TODO: Remove that from here or change CSS class naming since
they are framesheet level actions, not tools -->
<li class="tool-icon tool-save" data-tool-id="tool-save" title="Save" onclick="piskel.storeSheet()" rel="tooltip" data-placement="bottom" ></li>
Basic export - opening new window with concatenated spritesheet in PNG format
2012-09-19 22:43:39 +00:00
<li class="tool-icon tool-export" data-tool-id="tool-export" title="Export" onclick="piskel.exportToPNG()" rel="tooltip" data-placement="bottom" ></li>
Changed icons
2013-04-07 19:14:37 +00:00
<li class="tool-icon tool-upload" data-tool-id="tool-upload" title="Upload as GIF" onclick="piskel.uploadAsGIF()" rel="tooltip" data-placement="bottom" ></li>
UI cleanup
2012-09-16 02:33:26 +00:00
<li class="tool-icon tool-add-frame" id="add-frame-button" data-tool-id="tool-add-frame" title="Add a frame" rel="tooltip" data-placement="bottom" ></li>
</ul>
</div>
Stroke tool Add stroke tool new icons for tools started some refactoring to help having a big redraw loop
2012-09-01 22:44:55 +00:00
<!-- List of frames: -->
UI cleanup
2012-09-16 02:33:26 +00:00
<div class="preview-list-wrapper">
<ul class="preview-list" id="preview-list"></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-22 22:57:35 +00:00
</div>
Stroke tool Add stroke tool new icons for tools started some refactoring to help having a big redraw loop
2012-09-01 22:44:55 +00:00
series of tiny improvements to the ui
2012-09-04 21:48:02 +00:00
<div class='main-panel'>
UI cleanup
2012-09-16 02:33:26 +00:00
<div id="menubar" class="menubar">
<ul id="tools-container" class="tools-group"></ul>
<ul class="tools-group">
<li class="tool-icon tool-palette">
<ul id="palette" class="palette">
<span class="tool-icon palette-color transparent-color" data-color="TRANSPARENT" title="Transparent"></span>
</ul>
</li>
<li class="tool-icon tool-color-picker">
<input id="color-picker" class="color {hash:true}" type="text" value="" />
<input id="secondary-color-picker" class="secondary-color-picker color {hash:true}" type="text" value="" />
</li>
</ul>
<ul class="tools-group">
<li class="tool-grid">
<input id="show-grid" type="checkbox"/>
<label for="show-grid">Show grid</label>
</li>
</ul>
</div>
Stroke tool Add stroke tool new icons for tools started some refactoring to help having a big redraw loop
2012-09-01 22:44:55 +00:00
<!-- Drawing area: -->
Tool plugin architecture with eraser/pen/paintbucket tools.
2012-08-31 08:45:07 +00: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 00:05:13 +00: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-01 22:44:55 +00: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-22 22:57:35 +00:00
<div class='preview-container'>
UI cleanup
2012-09-16 02:33:26 +00:00
<input id="preview-fps" type="range" min="1" max="24" value="12" style="width:200px;"/>
<span id="display-fps">12 FPS</span>
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 00:05:13 +00:00
<div id='preview-canvas-container' class="canvas-container">
<div class="canvas-background"></div>
</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-22 22:57:35 +00:00
</div>
</div>
Adding query 1.8.0 and pubsub bus
2012-08-29 22:48:22 +00:00
Stroke tool Add stroke tool new icons for tools started some refactoring to help having a big redraw loop
2012-09-01 22:44:55 +00:00
<!-- Core libraries: -->
Adding query 1.8.0 and pubsub bus
2012-08-29 22:48:22 +00:00
<script src="js/lib/jquery-1.8.0.js"></script>
Implementing interstitial tiles Interstitial tiles are fake slides and allow us to insert drag n drop tiles between two other.
2012-09-08 00:50:59 +00:00
<script src="js/lib/jquery-ui-1.8.23.custom.js"></script>
UI cleanup
2012-09-16 02:33:26 +00:00
<script src="js/lib/pubsub.js"></script>
<script src="js/lib/bootstrap/bootstrap.js"></script>
Export to GIF
2013-04-07 18:16:47 +00:00
Adding simple color picker Left click colorpicker tool: - Create PRIMARY/SECONDARY_COLOR_SELECTED/UPDATED events - remove isPrimary arguments
2013-04-08 23:32:30 +00:00
<!-- GIF Encoding DEVICES ! OH YEAY! -->
Export to GIF
2013-04-07 18:16:47 +00:00
<script src="js/lib/gif/GIFEncoder.js"></script>
<script src="js/lib/gif/b64.js"></script>
Typo in dependency
2013-04-07 18:18:53 +00:00
<script src="js/lib/gif/NeuQuant.js"></script>
Export to GIF
2013-04-07 18:16:47 +00:00
<script src="js/lib/gif/LZWEncoder.js"></script>
Stroke tool Add stroke tool new icons for tools started some refactoring to help having a big redraw loop
2012-09-01 22:44:55 +00:00
<!-- Application wide configuration -->
Tool plugin architecture with eraser/pen/paintbucket tools.
2012-08-31 08:45:07 +00: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-01 22:44:55 +00:00
<!-- Libraries -->
Basic cut implementation SelectionManager implmentaiton Rectangular seleciton impl Utils refacoring Event manager refactoring basic cut implmentation
2012-09-12 10:01:47 +00:00
<script src="js/utils/core.js"></script>
Basic export - opening new window with concatenated spritesheet in PNG format
2012-09-19 22:43:39 +00:00
<script src="js/utils/PixelUtils.js"></script>
<script src="js/utils/CanvasUtils.js"></script>
Adding basic color picker
2012-08-28 20:24:58 +00:00
<script src="js/lib/jsColor_1_4_0/jscolor.js"></script>
Tool plugin architecture with eraser/pen/paintbucket tools.
2012-08-31 08:45:07 +00:00
Stroke tool Add stroke tool new icons for tools started some refactoring to help having a big redraw loop
2012-09-01 22:44:55 +00:00
<!-- Application libraries-->
Added drawing loop, unplugged traditional renderers
2012-09-08 21:59:44 +00:00
<script src="js/rendering/DrawingLoop.js"></script>
Cleaning JavaScript includes in index.html
2012-09-16 10:59:47 +00:00
<!-- Models -->
moved Frame and FrameSheet to model package
2012-09-04 20:40:54 +00:00
<script src="js/model/Frame.js"></script>
<script src="js/model/FrameSheet.js"></script>
Cleaning JavaScript includes in index.html
2012-09-16 10:59:47 +00:00
<script src="js/selection/SelectionManager.js"></script>
<script src="js/selection/BaseSelection.js"></script>
<script src="js/selection/RectangularSelection.js"></script>
<script src="js/selection/ShapeSelection.js"></script>
<!-- Rendering -->
Export to GIF
2013-04-07 18:16:47 +00:00
<script src="js/rendering/CanvasRenderer.js"></script>
Encapsulate canvas element in FrameRenderer From this change set, the HTML canvas element, which is the frame view, is encapsulated inside the FrameRenderer. You won't need to give the view handle from the controller layer anymore. It will make view alteration implementations much easier (like grid for instance)
2012-09-08 13:08:00 +00:00
<script src="js/rendering/FrameRenderer.js"></script>
Basic export - opening new window with concatenated spritesheet in PNG format
2012-09-19 22:43:39 +00:00
<script src="js/rendering/SpritesheetRenderer.js"></script>
Cleaning JavaScript includes in index.html
2012-09-16 10:59:47 +00:00
<!-- Controllers -->
Basic export - opening new window with concatenated spritesheet in PNG format
2012-09-19 22:43:39 +00:00
<script src="js/controller/DrawingController.js"></script>
Finished first step of refactor.
2012-09-04 22:09:42 +00:00
<script src="js/controller/PreviewFilmController.js"></script>
<script src="js/controller/AnimatedPreviewController.js"></script>
fixing include for toolcontroller.js
2012-09-15 19:55:38 +00:00
<script src="js/controller/ToolController.js"></script>
moving palette.js to controller directory
2012-09-16 11:28:53 +00:00
<script src="js/controller/PaletteController.js"></script>
move notification to controller directory
2012-09-16 11:53:41 +00:00
<script src="js/controller/NotificationController.js"></script>
Cleaning JavaScript includes in index.html
2012-09-16 10:59:47 +00:00
<!-- Services -->
<script src="js/service/LocalStorageService.js"></script>
Move HistoryManager to a service
2012-09-16 11:10:05 +00:00
<script src="js/service/HistoryService.js"></script>
fix keyboard eventservice
2012-09-16 11:27:00 +00:00
<script src="js/service/KeyboardEventService.js"></script>
Simplified Rectangle.js and pixelUtils
2012-09-14 20:20:00 +00:00
<!-- Tools-->
Tool plugin architecture with eraser/pen/paintbucket tools.
2012-08-31 08:45:07 +00:00
<script src="js/drawingtools/BaseTool.js"></script>
<script src="js/drawingtools/SimplePen.js"></script>
Renaming to VerticalMirrorPen
2012-09-15 22:52:39 +00:00
<script src="js/drawingtools/VerticalMirrorPen.js"></script>
Tool plugin architecture with eraser/pen/paintbucket tools.
2012-08-31 08:45:07 +00:00
<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-01 22:44:55 +00:00
<script src="js/drawingtools/Stroke.js"></script>
Tool plugin architecture with eraser/pen/paintbucket tools.
2012-08-31 08:45:07 +00:00
<script src="js/drawingtools/PaintBucket.js"></script>
Adding rectangle tool
2012-09-02 11:19:20 +00:00
<script src="js/drawingtools/Rectangle.js"></script>
Simplified Rectangle.js and pixelUtils
2012-09-14 20:20:00 +00:00
<script src="js/drawingtools/Circle.js"></script>
Added simple move tool
2012-09-06 23:08:25 +00:00
<script src="js/drawingtools/Move.js"></script>
Basic lasso tool
2012-09-14 18:12:21 +00:00
<script src="js/drawingtools/selectiontools/BaseSelect.js"></script>
<script src="js/drawingtools/selectiontools/RectangleSelect.js"></script>
<script src="js/drawingtools/selectiontools/ShapeSelect.js"></script>
Adding simple color picker Left click colorpicker tool: - Create PRIMARY/SECONDARY_COLOR_SELECTED/UPDATED events - remove isPrimary arguments
2013-04-08 23:32:30 +00:00
<script src="js/drawingtools/ColorPicker.js"></script>
fixing include for toolcontroller.js
2012-09-15 19:55:38 +00:00
Stroke tool Add stroke tool new icons for tools started some refactoring to help having a big redraw loop
2012-09-01 22:44:55 +00: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-22 22:57:35 +00:00
<script src="js/piskel.js"></script>
</body>
</html>
series of tiny improvements to the ui
2012-09-04 21:48:02 +00:00
Reference in a new issue Copy permalink