piskel/index.html
Vince eb7511c721 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 15:08:00 +02:00

114 lines
4.1 KiB
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/reset.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/tools.css">
</head>
<body>
<!-- Tool section: -->
<div id="tools-container" class="tools-container">
<ul class="tools-group">
<li class="tool-icon tool-save" data-tool-id="tool-save" title="Save" onclick="piskel.storeSheet()"></li>
<li class="tool-icon tool-add-frame" id="add-frame-button" data-tool-id="tool-add-frame" title="Add a frame"></li>
</ul>
<ul class="tools-group">
<li class="tool-icon tool-pen" data-tool-id="tool-pen" title="Pen tool"></li>
<li class="tool-icon tool-eraser" data-tool-id="tool-eraser" title="Eraser tool"></li>
<li class="tool-icon tool-paint-bucket" data-tool-id="tool-paint-bucket" title="Bucket tool"></li>
<li class="tool-icon tool-stroke" data-tool-id="tool-stroke" title="Stroke tool"></li>
<li class="tool-icon tool-rectangle" data-tool-id="tool-rectangle" title="Rectangle tool"></li>
<li class="tool-icon tool-move" data-tool-id="tool-move" title="Move tool"></li>
</ul>
<ul class="tools-group">
<li class="tool-icon tool-palette" data-tool-id="tool-palette" title="Color palette">
<ul id="palette" class="palette">
<span class="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="color {hash:true}" type="text" value="" />
</li>
</ul>
<ul class="tools-group">
<li class="tool-preview-fps">
<input id="preview-fps" type="range" min="1" max="24" value="12" style="width:200px;"/>
<span id="display-fps">12 fps</span>
</li>
</ul>
</div>
<div class='left-nav'>
<!-- 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>
<!-- Animation preview: -->
<div class='preview-container'>
<div id='preview-canvas-container' class="canvas-container">
<div class="canvas-background"></div>
</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/model/Frame.js"></script>
<script src="js/model/FrameSheet.js"></script>
<script src="js/rendering/FrameRenderer.js"></script>
<script src="js/controller/DrawingController.js"></script>
<script src="js/controller/PreviewFilmController.js"></script>
<script src="js/controller/AnimatedPreviewController.js"></script>
<script src="js/LocalStorageService.js"></script>
<script src="js/HistoryManager.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/drawingtools/Move.js"></script>
<script src="js/ToolSelector.js"></script>
<!-- Application controller and initialization -->
<script src="js/piskel.js"></script>
</body>
</html>