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
66d19cf9ca
piskel/index.html

183 lines
8.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">
Fixing DnD, removing LESS, cleaning code - Updating DnD to use Sortable instead of draggable/dropppable (updating deps as well). - much simpler logic for DnD - Remove LESS for now since it's a bit yet overkill - fix moveFrame function
2013-06-13 02:04:39 +04: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">
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
</head>
Plug canvas background settings on UserSettings storage Canvas background class are now manager at the FrameRenderer level instead of CSS classes at the top of the DOM.
2013-06-18 01:10:35 +04:00
<body>
Fix canvas size when grid display is active - Dynamic resizing of canvas when display_grid is activated/deactivated - Adding a main-wrapper to get a perfect alignement at the top and bottom the application screen - fix DPI update on page load (independent of grid option). - fix available width for DPI calculation (using margin-box, was using only content before)
2013-06-19 21:01:12 +04:00
<div id="main-wrapper" class="main-wrapper">
<div class="sticky-section left-sticky-section" id="tool-section">
<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>
</div>
Make tools sticky on screen's left edge So that the drawing canvas can expend full height
2013-06-13 15:57:03 +04:00
</div>
</div>
</div>
</div>
Fix canvas size when grid display is active - Dynamic resizing of canvas when display_grid is activated/deactivated - Adding a main-wrapper to get a perfect alignement at the top and bottom the application screen - fix DPI update on page load (independent of grid option). - fix available width for DPI calculation (using margin-box, was using only content before)
2013-06-19 21:01:12 +04:00
<div id="application-action-section" class="sticky-section right-sticky-section">
<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="piskel.storeSheet()" rel="tooltip" data-placement="left" ></div>
<div class="tool-icon upload-cloud-icon" title="Upload as an animated GIF" onclick="piskel.uploadAsAnimatedGIF()" rel="tooltip" data-placement="left">
<span class="label">GIF</span>
</div>
<div class="tool-icon upload-cloud-icon" title="Upload as a spritesheet PNG" onclick="piskel.uploadAsSpritesheetPNG()" rel="tooltip" data-placement="left">
<span class="label">PNG</span>
</div>
New layout: application actions sticking to the right edge
2013-06-15 21:04:36 +04:00
</div>
Fix canvas size when grid display is active - Dynamic resizing of canvas when display_grid is activated/deactivated - Adding a main-wrapper to get a perfect alignement at the top and bottom the application screen - fix DPI update on page load (independent of grid option). - fix available width for DPI calculation (using margin-box, was using only content before)
2013-06-19 21:01:12 +04:00
<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">
</div>
Adding simple backgorund picker (without persistence)
2013-06-17 13:36:56 +04:00
</div>
</div>
Fix canvas size when grid display is active - Dynamic resizing of canvas when display_grid is activated/deactivated - Adding a main-wrapper to get a perfect alignement at the top and bottom the application screen - fix DPI update on page load (independent of grid option). - fix available width for DPI calculation (using margin-box, was using only content before)
2013-06-19 21:01:12 +04:00
<div class="settings-item">
<label for="show-grid">Show grid:</label> <input id="show-grid" type="checkbox"/>
</div>
Small settings panel styles update
2013-06-17 12:37:23 +04:00
</div>
Moving settings markup to drawer
2013-06-16 12:16:26 +04:00
</div>
</div>
Adding drawer prototype
2013-06-15 21:35:55 +04:00
</div>
New layout: application actions sticking to the right edge
2013-06-15 21:04:36 +04:00
Fix canvas size when grid display is active - Dynamic resizing of canvas when display_grid is activated/deactivated - Adding a main-wrapper to get a perfect alignement at the top and bottom the application screen - fix DPI update on page load (independent of grid option). - fix available width for DPI calculation (using margin-box, was using only content before)
2013-06-19 21:01:12 +04: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>
Adding overflow markers for preview frame scroller
2013-06-14 00:55:19 +04:00
</div>
proto init implementation + less
2013-06-12 16:53:47 +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
Fix canvas size when grid display is active - Dynamic resizing of canvas when display_grid is activated/deactivated - Adding a main-wrapper to get a perfect alignement at the top and bottom the application screen - fix DPI update on page load (independent of grid option). - fix available width for DPI calculation (using margin-box, was using only content before)
2013-06-19 21:01:12 +04: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>
proto init implementation + less
2013-06-12 16:53:47 +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
Fix canvas size when grid display is active - Dynamic resizing of canvas when display_grid is activated/deactivated - Adding a main-wrapper to get a perfect alignement at the top and bottom the application screen - fix DPI update on page load (independent of grid option). - fix available width for DPI calculation (using margin-box, was using only content before)
2013-06-19 21:01:12 +04: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>
proto init implementation + less
2013-06-12 16:53:47 +04:00
</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-23 02:57:35 +04:00
</div>
</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>
Fixing DnD, removing LESS, cleaning code - Updating DnD to use Sortable instead of draggable/dropppable (updating deps as well). - much simpler logic for DnD - Remove LESS for now since it's a bit yet overkill - fix moveFrame function
2013-06-13 02:04:39 +04:00
<script src="js/lib/jquery-ui-1.10.3.custom.js"></script>
UI cleanup
2012-09-16 06:33:26 +04:00
<script src="js/lib/pubsub.js"></script>
<script src="js/lib/bootstrap/bootstrap.js"></script>
Export to GIF
2013-04-07 22:16:47 +04:00
Code cleanup + unsued images removal
2013-06-14 15:17:20 +04:00
<!-- GIF Encoding libraries -->
Export to GIF
2013-04-07 22:16:47 +04:00
<script src="js/lib/gif/GIFEncoder.js"></script>
<script src="js/lib/gif/b64.js"></script>
Typo in dependency
2013-04-07 22:18:53 +04:00
<script src="js/lib/gif/NeuQuant.js"></script>
Export to GIF
2013-04-07 22:16:47 +04: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-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 -->
Basic cut implementation SelectionManager implmentaiton Rectangular seleciton impl Utils refacoring Event manager refactoring basic cut implmentation
2012-09-12 14:01:47 +04:00
<script src="js/utils/core.js"></script>
Basic export - opening new window with concatenated spritesheet in PNG format
2012-09-20 02:43:39 +04:00
<script src="js/utils/PixelUtils.js"></script>
<script src="js/utils/CanvasUtils.js"></script>
Add basic UserSettings persistence static utility. Based on localStorage for now.
2013-06-17 21:54:43 +04:00
<script src="js/utils/UserSettings.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-->
Added drawing loop, unplugged traditional renderers
2012-09-09 01:59:44 +04:00
<script src="js/rendering/DrawingLoop.js"></script>
Cleaning JavaScript includes in index.html
2012-09-16 14:59:47 +04:00
<!-- Models -->
moved Frame and FrameSheet to model package
2012-09-05 00:40:54 +04:00
<script src="js/model/Frame.js"></script>
<script src="js/model/FrameSheet.js"></script>
Cleaning JavaScript includes in index.html
2012-09-16 14:59:47 +04: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 22:16:47 +04: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 17:08:00 +04:00
<script src="js/rendering/FrameRenderer.js"></script>
Basic export - opening new window with concatenated spritesheet in PNG format
2012-09-20 02:43:39 +04:00
<script src="js/rendering/SpritesheetRenderer.js"></script>
Cleaning JavaScript includes in index.html
2012-09-16 14:59:47 +04:00
<!-- Controllers -->
Basic export - opening new window with concatenated spritesheet in PNG format
2012-09-20 02:43:39 +04:00
<script src="js/controller/DrawingController.js"></script>
Finished first step of refactor.
2012-09-05 02:09:42 +04:00
<script src="js/controller/PreviewFilmController.js"></script>
<script src="js/controller/AnimatedPreviewController.js"></script>
fixing include for toolcontroller.js
2012-09-15 23:55:38 +04:00
<script src="js/controller/ToolController.js"></script>
moving palette.js to controller directory
2012-09-16 15:28:53 +04:00
<script src="js/controller/PaletteController.js"></script>
move notification to controller directory
2012-09-16 15:53:41 +04:00
<script src="js/controller/NotificationController.js"></script>
Adding SettingsController
2013-06-16 12:17:50 +04:00
<script src="js/controller/SettingsController.js"></script>
Cleaning JavaScript includes in index.html
2012-09-16 14:59:47 +04:00
<!-- Services -->
<script src="js/service/LocalStorageService.js"></script>
Move HistoryManager to a service
2012-09-16 15:10:05 +04:00
<script src="js/service/HistoryService.js"></script>
fix keyboard eventservice
2012-09-16 15:27:00 +04:00
<script src="js/service/KeyboardEventService.js"></script>
Simplified Rectangle.js and pixelUtils
2012-09-15 00:20:00 +04:00
<!-- Tools-->
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>
Renaming to VerticalMirrorPen
2012-09-16 02:52:39 +04:00
<script src="js/drawingtools/VerticalMirrorPen.js"></script>
Tool plugin architecture with eraser/pen/paintbucket tools.
2012-08-31 12:45:07 +04: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-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>
Simplified Rectangle.js and pixelUtils
2012-09-15 00:20:00 +04:00
<script src="js/drawingtools/Circle.js"></script>
Added simple move tool
2012-09-07 03:08:25 +04:00
<script src="js/drawingtools/Move.js"></script>
Basic lasso tool
2012-09-14 22:12:21 +04: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-09 03:32:30 +04:00
<script src="js/drawingtools/ColorPicker.js"></script>
fixing include for toolcontroller.js
2012-09-15 23:55:38 +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 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>
series of tiny improvements to the ui
2012-09-05 01:48:02 +04:00
Reference in New Issue Copy Permalink