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" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
2013-06-12 22:04:39 +00:00
< link rel = "stylesheet" type = "text/css" href = "css/reset.css" >
< link rel = "stylesheet" type = "text/css" href = "css/style.css" >
< link rel = "stylesheet" type = "text/css" href = "css/tools.css" >
< link rel = "stylesheet" type = "text/css" href = "css/bootstrap/bootstrap.css" >
< link rel = "stylesheet" type = "text/css" href = "css/bootstrap/bootstrap-tooltip-custom.css" >
< link rel = "stylesheet" type = "text/css" href = "css/preview-film-section.css" >
2012-08-22 22:57:35 +00:00
< / head >
2013-06-17 21:10:35 +00:00
< body >
2013-06-19 17:01:12 +00:00
< div id = "main-wrapper" class = "main-wrapper" >
< div class = "sticky-section left-sticky-section" id = "tool-section" >
2013-07-14 21:04:42 +00:00
< div class = "wrap" >
< ul id = "tools-container" class = "tools-wrapper" > < / ul >
< div class = "palette-wrapper" >
< div 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 = "" / >
< / div >
< div class = "tool-icon tool-palette" >
< div id = "palette" class = "palette" >
< span class = "tool-icon palette-color transparent-color" data-color = "TRANSPARENT" title = "Transparent" > < / span >
2013-06-19 17:01:12 +00:00
< / div >
2013-06-13 11:57:03 +00:00
< / div >
< / div >
< / div >
< / div >
2013-06-19 17:01:12 +00:00
< div id = "application-action-section" class = "sticky-section right-sticky-section" >
2013-07-14 21:04:42 +00:00
< div class = "wrap" >
< div id = "settings" class = "tool-icon gear-icon" title = "Preferences" rel = "tooltip" data-placement = "left" > < / div >
< a class = "tool-icon gallery-icon" title = "Visit gallery" href = "http://juliandescottes.github.io/piskel-website/" rel = "tooltip" data-placement = "left" target = "_blank" > < / a >
< div class = "tool-icon save-icon" title = "Save to gallery" onclick = "pskl.app.storeSheet()" rel = "tooltip" data-placement = "left" > < / div >
< div class = "tool-icon upload-cloud-icon" title = "Upload as an animated GIF" onclick = "pskl.app.uploadAsAnimatedGIF()" rel = "tooltip" data-placement = "left" >
< span class = "label" > GIF< / span >
2013-06-19 17:01:12 +00:00
< / div >
2013-07-14 21:04:42 +00:00
< div class = "tool-icon upload-cloud-icon" title = "Upload as a spritesheet PNG" onclick = "pskl.app.uploadAsSpritesheetPNG()" rel = "tooltip" data-placement = "left" >
< span class = "label" > PNG< / span >
< / div >
< / div >
< div class = "drawer" >
< div class = "drawer-content" >
< div class = "settings-section" >
< div class = "settings-title" >
Canvas settings:
< / div >
< div class = "settings-item" >
< label > Background:< / label >
< div id = "background-picker-wrapper" class = "background-picker-wrapper" >
< div class = "background-picker light-picker-background" data-background-class = "light-canvas-background"
rel="tooltip" data-placement="bottom" title="light / high contrast">
< / div >
< div class = "background-picker medium-picker-background" data-background-class = "medium-canvas-background"
rel="tooltip" data-placement="bottom" title="medium / high contrast">
< / div >
< div class = "background-picker lowcont-medium-picker-background" data-background-class = "lowcont-medium-canvas-background"
rel="tooltip" data-placement="bottom" title="medium / low contrast">
< / div >
< div class = "background-picker lowcont-dark-picker-background" data-background-class = "lowcont-dark-canvas-background"
rel="tooltip" data-placement="bottom" title="dark / low contrast">
2013-06-19 17:01:12 +00:00
< / div >
2013-06-17 09:36:56 +00:00
< / div >
2013-07-14 21:04:42 +00:00
< / div >
< div class = "settings-item" >
< label for = "show-grid" > Show grid:< / label > < input id = "show-grid" type = "checkbox" / >
2013-06-19 17:01:12 +00:00
< / div >
2013-06-17 08:37:23 +00:00
< / div >
2013-06-16 08:16:26 +00:00
< / div >
< / div >
2013-06-15 17:35:55 +00:00
< / div >
2013-06-15 17:04:36 +00:00
2013-06-19 17:01:12 +00:00
< div id = "column-wrapper" class = "column-wrapper" >
< div class = 'column left-column' >
<!-- List of frames: -->
< div id = "preview-list-wrapper" class = "preview-list-wrapper" >
< div id = "preview-list-scroller" class = "preview-list-scroller" >
< ul class = "preview-list" id = "preview-list" > < / ul >
< / div >
< div class = "top-overflow" > < / div >
< div class = "bottom-overflow" > < / div >
2013-06-13 20:55:19 +00:00
< / div >
2013-06-12 12:53:47 +00:00
< / div >
2012-09-01 22:44:55 +00:00
2013-06-19 17:01:12 +00:00
< div class = 'column main-column' >
<!-- Drawing area: -->
< div id = "drawing-canvas-container" class = "drawing-canvas-container canvas-container" >
< div class = "canvas-background" > < / div >
< / div >
2013-06-12 12:53:47 +00:00
< / div >
2012-09-01 22:44:55 +00:00
2013-06-19 17:01:12 +00:00
< div class = "column right-column" >
<!-- Animation preview: -->
< div class = 'preview-container' >
< div id = 'preview-canvas-container' class = "canvas-container" >
< div class = "canvas-background" > < / div >
< / div >
< div >
< span id = "display-fps" class = "display-fps" > 12 FPS< / span >
< input id = "preview-fps" class = "range-fps" type = "range" min = "1" max = "24" value = "12" / >
< / div >
2013-06-12 12:53:47 +00:00
< / div >
< / div >
2012-08-22 22:57:35 +00:00
< / div >
< / div >
2012-08-29 22:48:22 +00:00
2012-09-01 22:44:55 +00:00
<!-- Core libraries: -->
2012-08-29 22:48:22 +00:00
< script src = "js/lib/jquery-1.8.0.js" > < / script >
2013-06-12 22:04:39 +00:00
< script src = "js/lib/jquery-ui-1.10.3.custom.js" > < / script >
2012-09-16 02:33:26 +00:00
< script src = "js/lib/pubsub.js" > < / script >
< script src = "js/lib/bootstrap/bootstrap.js" > < / script >
2013-04-07 18:16:47 +00:00
2013-06-14 11:17:20 +00:00
<!-- GIF Encoding libraries -->
2013-04-07 18:16:47 +00:00
< script src = "js/lib/gif/GIFEncoder.js" > < / script >
< script src = "js/lib/gif/b64.js" > < / script >
2013-04-07 18:18:53 +00:00
< script src = "js/lib/gif/NeuQuant.js" > < / script >
2013-04-07 18:16:47 +00:00
< script src = "js/lib/gif/LZWEncoder.js" > < / script >
2012-09-01 22:44:55 +00:00
<!-- Application wide configuration -->
2012-08-31 08:45:07 +00:00
< script src = "js/Constants.js" > < / script >
< script src = "js/Events.js" > < / script >
2012-09-01 22:44:55 +00:00
<!-- Libraries -->
2012-09-12 10:01:47 +00:00
< script src = "js/utils/core.js" > < / script >
2012-09-19 22:43:39 +00:00
< script src = "js/utils/PixelUtils.js" > < / script >
< script src = "js/utils/CanvasUtils.js" > < / script >
2013-06-17 17:54:43 +00:00
< script src = "js/utils/UserSettings.js" > < / script >
2012-08-28 20:24:58 +00:00
< script src = "js/lib/jsColor_1_4_0/jscolor.js" > < / script >
2012-08-31 08:45:07 +00:00
2012-09-01 22:44:55 +00:00
<!-- Application libraries -->
2012-09-08 21:59:44 +00:00
< script src = "js/rendering/DrawingLoop.js" > < / script >
2012-09-16 10:59:47 +00:00
<!-- Models -->
2012-09-04 20:40:54 +00:00
< script src = "js/model/Frame.js" > < / script >
< script src = "js/model/FrameSheet.js" > < / script >
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 -->
2013-04-07 18:16:47 +00:00
< script src = "js/rendering/CanvasRenderer.js" > < / script >
2012-09-08 13:08:00 +00:00
< script src = "js/rendering/FrameRenderer.js" > < / script >
2012-09-19 22:43:39 +00:00
< script src = "js/rendering/SpritesheetRenderer.js" > < / script >
2012-09-16 10:59:47 +00:00
<!-- Controllers -->
2012-09-19 22:43:39 +00:00
< script src = "js/controller/DrawingController.js" > < / script >
2012-09-04 22:09:42 +00:00
< script src = "js/controller/PreviewFilmController.js" > < / script >
< script src = "js/controller/AnimatedPreviewController.js" > < / script >
2012-09-15 19:55:38 +00:00
< script src = "js/controller/ToolController.js" > < / script >
2012-09-16 11:28:53 +00:00
< script src = "js/controller/PaletteController.js" > < / script >
2012-09-16 11:53:41 +00:00
< script src = "js/controller/NotificationController.js" > < / script >
2013-06-16 08:17:50 +00:00
< script src = "js/controller/SettingsController.js" > < / script >
2012-09-16 10:59:47 +00:00
<!-- Services -->
< script src = "js/service/LocalStorageService.js" > < / script >
2012-09-16 11:10:05 +00:00
< script src = "js/service/HistoryService.js" > < / script >
2012-09-16 11:27:00 +00:00
< script src = "js/service/KeyboardEventService.js" > < / script >
2012-09-14 20:20:00 +00:00
<!-- Tools -->
2012-08-31 08:45:07 +00:00
< script src = "js/drawingtools/BaseTool.js" > < / script >
< script src = "js/drawingtools/SimplePen.js" > < / script >
2012-09-15 22:52:39 +00:00
< script src = "js/drawingtools/VerticalMirrorPen.js" > < / script >
2012-08-31 08:45:07 +00:00
< script src = "js/drawingtools/Eraser.js" > < / script >
2012-09-01 22:44:55 +00:00
< script src = "js/drawingtools/Stroke.js" > < / script >
2012-08-31 08:45:07 +00:00
< script src = "js/drawingtools/PaintBucket.js" > < / script >
2012-09-02 11:19:20 +00:00
< script src = "js/drawingtools/Rectangle.js" > < / script >
2012-09-14 20:20:00 +00:00
< script src = "js/drawingtools/Circle.js" > < / script >
2012-09-06 23:08:25 +00:00
< script src = "js/drawingtools/Move.js" > < / script >
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 >
2013-04-08 23:32:30 +00:00
< script src = "js/drawingtools/ColorPicker.js" > < / script >
2012-09-15 19:55:38 +00:00
2012-09-01 22:44:55 +00:00
<!-- Application controller and initialization -->
2012-08-22 22:57:35 +00:00
< script src = "js/piskel.js" > < / script >
< / body >
< / html >
2012-09-04 21:48:02 +00:00