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">
|
|
|
|
|
</head>
|
2013-06-18 01:10:35 +04:00
|
|
|
<body>
|
2014-03-30 05:12:56 +04:00
|
|
|
<div
|
|
|
|
|
id="loading-mask"
|
|
|
|
|
style="
|
|
|
|
|
position:fixed;
|
|
|
|
|
top:0;right:0;bottom:0;left:0;
|
|
|
|
|
background:black;
|
|
|
|
|
opacity:1;
|
|
|
|
|
text-align:center;
|
|
|
|
|
z-index : 20000;
|
|
|
|
|
transition:opacity 0.5s;
|
|
|
|
|
color:white;">
|
2014-03-31 00:49:14 +04:00
|
|
|
<span style="top:45%">Loading Piskel ...</span>
|
2014-03-30 05:12:56 +04:00
|
|
|
</div>
|
2014-07-08 22:07:38 +04:00
|
|
|
|
2016-01-14 02:04:44 +03:00
|
|
|
<style type="text/css">
|
|
|
|
|
#main-wrapper {
|
|
|
|
|
margin-top: 40px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.fake-piskelapp-header {
|
|
|
|
|
text-align: center;
|
|
|
|
|
height: 40px;
|
|
|
|
|
line-height: 40px;
|
|
|
|
|
font-size: 24px;
|
|
|
|
|
background: black;
|
|
|
|
|
color: gold;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.piskel-name.piskel-name-saving {
|
|
|
|
|
color: red;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
<div class="fake-piskelapp-header"><span class="piskel-name"></span></div>
|
2014-07-08 22:07:38 +04:00
|
|
|
<!-- the comment below indicates the beginning of markup reused by the editor integrated in piskelapp.com -->
|
|
|
|
|
<!-- do not delete, do not move :) -->
|
|
|
|
|
<!--body-main-start-->
|
2013-06-19 21:01:12 +04:00
|
|
|
<div id="main-wrapper" class="main-wrapper">
|
2016-01-14 02:04:44 +03:00
|
|
|
<div class="sticky-section left-sticky-section" id="tool-section">
|
|
|
|
|
<div class="sticky-section-wrap">
|
|
|
|
|
<div class="vertical-centerer">
|
|
|
|
|
<div class="pen-size-container" title="Pen size<br/>from 1 to 4 pixels" rel="tooltip" data-placement="top">
|
|
|
|
|
<div class="pen-size-option" data-size="1"></div>
|
|
|
|
|
<div class="pen-size-option" data-size="2"></div>
|
|
|
|
|
<div class="pen-size-option" data-size="3"></div>
|
|
|
|
|
<div class="pen-size-option" data-size="4"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<ul id="tools-container" class="tools-wrapper">
|
|
|
|
|
<!-- Drawing tools will be inserted here -->
|
|
|
|
|
</ul>
|
|
|
|
|
<div class="palette-wrapper">
|
|
|
|
|
<div
|
|
|
|
|
class="tool-icon tool-color-picker"
|
2016-05-08 17:07:50 +03:00
|
|
|
data-initial-title="Primary - left mouse button"
|
2016-01-14 02:04:44 +03:00
|
|
|
rel="tooltip"
|
|
|
|
|
data-placement="right"
|
|
|
|
|
>
|
|
|
|
|
<input id="color-picker" class="color" type="text"/>
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
class="tool-icon tool-color-picker"
|
2016-05-08 17:07:50 +03:00
|
|
|
data-initial-title="Secondary - right mouse button"
|
2016-01-14 02:04:44 +03:00
|
|
|
rel="tooltip"
|
|
|
|
|
data-placement="right"
|
|
|
|
|
>
|
|
|
|
|
<input id="secondary-color-picker" class="secondary-color-picker color" type="text" />
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
class="swap-colors-button icon-common-swapcolors-arrow-grey"
|
|
|
|
|
title="Swap colors (X)"
|
|
|
|
|
rel="tooltip"
|
|
|
|
|
data-placement="right"
|
|
|
|
|
></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Templates -->
|
|
|
|
|
|
|
|
|
|
<!-- Drawing tool icon-button -->
|
|
|
|
|
<script type="text/template" id="drawingTool-item-template">
|
|
|
|
|
<li rel="tooltip" data-placement="{{tooltipposition}}" class="{{cssclass}}" data-tool-id="{{toolid}}" title="{{title}}"></li>
|
|
|
|
|
</script>
|
|
|
|
|
</div>
|
2013-06-15 21:04:36 +04:00
|
|
|
|
2013-06-19 21:01:12 +04:00
|
|
|
<div id="column-wrapper" class="column-wrapper">
|
|
|
|
|
<div class='column left-column'>
|
2016-01-14 02:04:44 +03:00
|
|
|
<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>
|
|
|
|
|
</div>
|
2013-06-12 16:53:47 +04:00
|
|
|
</div>
|
2012-09-02 02:44:55 +04:00
|
|
|
|
2013-06-19 21:01:12 +04:00
|
|
|
<div class='column main-column'>
|
|
|
|
|
<div id="drawing-canvas-container" class="drawing-canvas-container canvas-container">
|
|
|
|
|
<div class="canvas-background"></div>
|
|
|
|
|
</div>
|
2013-06-12 16:53:47 +04:00
|
|
|
</div>
|
2012-09-02 02:44:55 +04:00
|
|
|
|
2013-06-19 21:01:12 +04:00
|
|
|
<div class="column right-column">
|
2016-01-14 02:04:44 +03:00
|
|
|
<div id="animated-preview-container" class="preview-container">
|
|
|
|
|
<div class="canvas-container-wrapper minimap-container">
|
|
|
|
|
<div class="preview-contextual-actions">
|
|
|
|
|
<div class="preview-contextual-action original-size-button" rel="tooltip" data-placement="bottom">1x</div>
|
|
|
|
|
<div class="preview-contextual-action open-popup-preview-button icon-minimap-popup-preview-arrow-white"
|
|
|
|
|
title="Open preview in popup" rel="tooltip" data-placement="bottom"></div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="animated-preview-canvas-container" class="canvas-container">
|
|
|
|
|
<div class="canvas-background"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<div rel="tooltip"
|
|
|
|
|
data-placement="bottom"
|
|
|
|
|
class="piskel-icon-onion preview-toggle-onion-skin"></div>
|
|
|
|
|
<span id="display-fps" class="display-fps"></span>
|
|
|
|
|
<input id="preview-fps" class="range-fps" type="range" min="0" max="24"/>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="toolbox-container layers-list-container">
|
|
|
|
|
<h3 class="toolbox-title layers-title">Layers
|
|
|
|
|
<div rel="tooltip"
|
|
|
|
|
data-placement="left"
|
|
|
|
|
class="layers-toggle-preview piskel-icon-eye"></div>
|
|
|
|
|
</h3>
|
2016-05-08 17:07:50 +03:00
|
|
|
<div class="toolbox-buttons">
|
2016-01-14 02:04:44 +03:00
|
|
|
<button data-action="add"
|
|
|
|
|
class="button layers-button piskel-icon-plus"
|
|
|
|
|
title="Create a new layer" rel="tooltip" data-placement="top" ></button>
|
|
|
|
|
|
|
|
|
|
<button data-action="up"
|
|
|
|
|
class="button layers-button piskel-icon-arrow-up-fat"
|
|
|
|
|
title="Move layer up" rel="tooltip" data-placement="top" ></button>
|
|
|
|
|
|
|
|
|
|
<button data-action="down"
|
|
|
|
|
class="button layers-button piskel-icon-arrow-down-fat"
|
|
|
|
|
title="Move layer down" rel="tooltip" data-placement="top" ></button>
|
|
|
|
|
|
|
|
|
|
<button data-action="edit"
|
|
|
|
|
class="button layers-button piskel-icon-pencil"
|
|
|
|
|
title="Edit layer name" rel="tooltip" data-placement="top"></button>
|
|
|
|
|
|
|
|
|
|
<button data-action="merge"
|
|
|
|
|
class="button layers-button piskel-icon-merge"
|
|
|
|
|
title="Merge with layer below" rel="tooltip" data-placement="top" ></button>
|
|
|
|
|
|
|
|
|
|
<button data-action="delete"
|
|
|
|
|
class="button layers-button piskel-icon-close"
|
|
|
|
|
title="Delete selected layer" rel="tooltip" data-placement="top" ></button>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<ul class="layers-list"></ul>
|
|
|
|
|
|
|
|
|
|
<script type="text/template" id="layer-item-template">
|
2016-05-08 17:07:50 +03:00
|
|
|
<li class="layer-item {{isselected:current-layer-item}}"
|
|
|
|
|
data-layer-index="{{layerindex}}">
|
|
|
|
|
{{layername}}
|
|
|
|
|
<span class="layer-item-opacity"
|
|
|
|
|
title="Layer opacity" rel="tooltip" data-placement="top">
|
|
|
|
|
{{opacity}}α
|
|
|
|
|
</span>
|
|
|
|
|
</li>
|
2016-01-14 02:04:44 +03:00
|
|
|
</script>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="toolbox-container transformations-container">
|
|
|
|
|
<h3 class="toolbox-title transformations-title">Transform</h3>
|
|
|
|
|
<ul class="tools-wrapper"></ul>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="toolbox-container palettes-list-container">
|
|
|
|
|
<h3 class="toolbox-title palettes-title">Palettes</h3>
|
2016-05-08 17:07:50 +03:00
|
|
|
<div class="toolbox-buttons">
|
2016-01-14 02:04:44 +03:00
|
|
|
<button
|
|
|
|
|
class="button palettes-list-button create-palette-button piskel-icon-plus" data-action="add"
|
|
|
|
|
title="Create a new palette" rel="tooltip" data-placement="top" ></button>
|
|
|
|
|
<select class="button palettes-list-select"></select>
|
|
|
|
|
<button
|
|
|
|
|
class="button palettes-list-button edit-palette-button piskel-icon-pencil" data-action="edit"
|
|
|
|
|
title="Manage this palette" rel="tooltip" data-placement="top"></button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="palettes-list-colors"></div>
|
|
|
|
|
<script type="text/template" id="palette-color-template">
|
|
|
|
|
<div class="palettes-list-color" data-color="{{color}}" data-color-index="{{index}}" title="{{color}}">
|
|
|
|
|
<div data-color="{{color}}" style="background:{{color}}"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<script type="text/template" id="palettes-list-no-colors-partial">
|
|
|
|
|
<div class="palettes-list-no-colors">
|
|
|
|
|
No color in the selected palette ...
|
|
|
|
|
</div>
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
2014-05-17 02:04:55 +04:00
|
|
|
<div class="pull-bottom cursor-coordinates"></div>
|
2013-11-25 22:00:19 +04:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="application-action-section" data-pskl-controller="settings" class="sticky-section right-sticky-section">
|
|
|
|
|
<div class="sticky-section-wrap">
|
2016-01-14 02:04:44 +03:00
|
|
|
<div class="vertical-centerer">
|
|
|
|
|
<div
|
|
|
|
|
data-setting="user"
|
|
|
|
|
class="tool-icon icon-settings-gear-white"
|
|
|
|
|
title="<span style='color:gold'>PREFERENCES</span></br>"
|
|
|
|
|
rel="tooltip" data-placement="left">
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div
|
|
|
|
|
data-setting="resize"
|
|
|
|
|
class="tool-icon icon-settings-resize-white"
|
|
|
|
|
title="<span style='color:gold'>RESIZE</span></br>Resize the drawing area"
|
|
|
|
|
rel="tooltip" data-placement="left">
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div
|
|
|
|
|
data-setting="save"
|
|
|
|
|
class="tool-icon icon-settings-save-white"
|
|
|
|
|
title="<span style='color:gold'>SAVE</span></br>Save to your gallery, save locally<br/>or export as a file"
|
|
|
|
|
rel="tooltip" data-placement="left" >
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div
|
|
|
|
|
data-setting="export"
|
|
|
|
|
class="tool-icon icon-settings-export-white"
|
|
|
|
|
title="<span style='color:gold'>EXPORT</span></br>Export as Image, as Spritesheet<br/>or as Animated GIF"
|
|
|
|
|
rel="tooltip" data-placement="left">
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div
|
|
|
|
|
data-setting="import"
|
|
|
|
|
class="tool-icon icon-settings-open-folder-white"
|
|
|
|
|
title="<span style='color:gold'>IMPORT</span></br>Import an existing image,<br/>an animated GIF or a .piskel file"
|
|
|
|
|
rel="tooltip" data-placement="left">
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
2013-11-25 22:00:19 +04:00
|
|
|
<div class="drawer vertical-centerer">
|
|
|
|
|
<div class="drawer-content" id="drawer-container">
|
2013-06-19 21:01:12 +04:00
|
|
|
</div>
|
2013-06-12 16:53:47 +04:00
|
|
|
</div>
|
|
|
|
|
</div>
|
2012-08-23 02:57:35 +04:00
|
|
|
</div>
|
|
|
|
|
</div>
|
2014-03-30 05:12:56 +04:00
|
|
|
|
|
|
|
|
<div id="dialog-container-wrapper">
|
|
|
|
|
<div id="dialog-container">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
2016-01-14 02:04:44 +03:00
|
|
|
<div style="display:none">
|
|
|
|
|
<script type="text/template" id="progress-bar-template">
|
|
|
|
|
<div class="progress-bar-container">
|
|
|
|
|
<div class="progress-bar-name">{{name}}</div>
|
|
|
|
|
<div class="progress-bar-item progress-bar"></div>
|
|
|
|
|
<div class="progress-bar-item progress-bar-status">{{status}}%</div>
|
|
|
|
|
</div>
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<!-- Tooltip container -->
|
|
|
|
|
<script type="text/template" id="tooltip-container-template">
|
|
|
|
|
<div class='tooltip-container'>
|
|
|
|
|
<div>{{helptext}} <span class='tooltip-shortcut'>{{shortcut}}</span></div>
|
|
|
|
|
{{descriptors}}
|
|
|
|
|
</div>
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<!-- Tooltip description with modifier -->
|
|
|
|
|
<script type="text/template" id="tooltip-modifier-descriptor-template">
|
|
|
|
|
<div class='tooltip-descriptor'>
|
|
|
|
|
<span class='tooltip-descriptor-button'>{{key}}</span>
|
|
|
|
|
{{description}}
|
|
|
|
|
</div>
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<!-- Simple tooltip description -->
|
|
|
|
|
<script type="text/template" id="tooltip-simple-descriptor-template">
|
|
|
|
|
<div class='tooltip-descriptor'>
|
|
|
|
|
{{description}}
|
|
|
|
|
</div>
|
|
|
|
|
</script>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="display:none">
|
|
|
|
|
<script type="text/template" id="popup-preview-partial">
|
|
|
|
|
<style>
|
|
|
|
|
body,
|
|
|
|
|
.popup-container ,
|
|
|
|
|
.preview-container,
|
|
|
|
|
.background-image-frame-container {
|
|
|
|
|
width : 100%;
|
|
|
|
|
height : 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
body {
|
|
|
|
|
margin: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.popup-container {
|
|
|
|
|
position: absolute;
|
|
|
|
|
background : #333;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.preview-container {
|
|
|
|
|
position: relative;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.background-image-frame-container {
|
|
|
|
|
position: relative;
|
|
|
|
|
background-repeat : no-repeat;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.canvas-container .canvas-background {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.light-picker-background,
|
|
|
|
|
.light-canvas-background .canvas-background {
|
|
|
|
|
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAABlBMVEXf39////8zI3BgAAAAHklEQVR4AWNghAIGCMDgjwgFCDDSw2M0PSCD0fQAACRcAgF4ciGUAAAAAElFTkSuQmCC') repeat;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.medium-picker-background,
|
|
|
|
|
.medium-canvas-background .canvas-background {
|
|
|
|
|
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAABlBMVEW6urr///82MBGFAAAAHUlEQVR4AWOAAUYoQOePEAUj3v9oYDQ9gMBoegAAJFwCAbLaTIMAAAAASUVORK5CYII=') repeat;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.lowcont-medium-picker-background,
|
|
|
|
|
.lowcont-medium-canvas-background .canvas-background {
|
|
|
|
|
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAABlBMVEXV1dXb29tFGkCIAAAAHklEQVR4AWNghAIGCMDgjwgFCDDSw2M0PSCD0fQAACRcAgF4ciGUAAAAAElFTkSuQmCC ') repeat;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.lowcont-dark-picker-background,
|
|
|
|
|
.lowcont-dark-canvas-background .canvas-background {
|
|
|
|
|
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAABlBMVEVMTExVVVUnhsEkAAAAHUlEQVR4AWOAAUYoQOePEAUj3v9oYDQ9gMBoegAAJFwCAbLaTIMAAAAASUVORK5CYII=') repeat;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
<div class="popup-container lowcont-dark-canvas-background ">
|
|
|
|
|
<div class="preview-container canvas-container">
|
|
|
|
|
<div class="canvas-background"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</script>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<span class="cheatsheet-link icon-common-keyboard-gold" rel="tooltip" data-placement="right" title="Keyboard shortcuts"> </span>
|
|
|
|
|
|
|
|
|
|
<!-- dialogs partials -->
|
|
|
|
|
<script type="text/template" id="templates/dialogs/create-palette.html">
|
|
|
|
|
<div class="dialog-wrapper">
|
|
|
|
|
<h3 class="dialog-head">
|
|
|
|
|
<span class="dialog-title">Create palette</span>
|
|
|
|
|
<span class="dialog-close">X</span>
|
|
|
|
|
</h3>
|
|
|
|
|
<div class="dialog-create-palette" style="font-size:1.3em">
|
|
|
|
|
<div class="create-palette-section form-section">
|
|
|
|
|
<span class="create-palette-name-label">Name</span>
|
|
|
|
|
<input type="text" class="textfield create-palette-name-input" name="palette-name" placeholder="palette name ..."/>
|
|
|
|
|
<div class="create-palette-import-section">
|
|
|
|
|
<button
|
|
|
|
|
type="button"
|
|
|
|
|
rel="tooltip" data-placement="right" title="Import palette from an existing Image or from a palette file"
|
|
|
|
|
class="button button-primary create-palette-import-button">Import from file</button>
|
|
|
|
|
<button
|
|
|
|
|
type="button"
|
|
|
|
|
rel="tooltip" data-placement="right" title="Download the palette as a GPL file"
|
|
|
|
|
class="button button-primary create-palette-download-button">Download as file</button>
|
|
|
|
|
<input style="display:none"
|
|
|
|
|
class="create-palette-import-input"
|
|
|
|
|
type="file" value="file" accept="*"/>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="colors-container">
|
|
|
|
|
<ul class="colors-list"></ul>
|
|
|
|
|
<div class="color-picker-container">
|
|
|
|
|
<div class="color-picker-spectrum"></div>
|
|
|
|
|
<div class="color-picker-input">
|
|
|
|
|
<input type="text" data-model="hex" data-dimension="*" class="textfield uppercase" value="#000000" />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="color-picker-slider">
|
|
|
|
|
<span>H</span>
|
|
|
|
|
<input type="range" data-model="hsv" data-dimension="h" value="0" min="0" max="359" tabindex="-1"/>
|
|
|
|
|
<input type="text" data-model="hsv" data-dimension="h" class="textfield" value="0" />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="color-picker-slider">
|
|
|
|
|
<span>S</span>
|
|
|
|
|
<input type="range" data-model="hsv" data-dimension="s" value="0" min="0" max="100" tabindex="-1"/>
|
|
|
|
|
<input type="text" data-model="hsv" data-dimension="s" class="textfield" value="0" />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="color-picker-slider">
|
|
|
|
|
<span>V</span>
|
|
|
|
|
<input type="range" data-model="hsv" data-dimension="v" value="0" min="0" max="100" tabindex="-1"/>
|
|
|
|
|
<input type="text" data-model="hsv" data-dimension="v" class="textfield" value="0" />
|
|
|
|
|
</div>
|
|
|
|
|
<br/>
|
|
|
|
|
<div class="color-picker-slider">
|
|
|
|
|
<span>R</span>
|
|
|
|
|
<input type="range" data-model="rgb" data-dimension="r" value="0" min="0" max="255" tabindex="-1"/>
|
|
|
|
|
<input type="text" data-model="rgb" data-dimension="r" class="textfield" value="0" />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="color-picker-slider">
|
|
|
|
|
<span>G</span>
|
|
|
|
|
<input type="range" data-model="rgb" data-dimension="g" value="0" min="0" max="255" tabindex="-1"/>
|
|
|
|
|
<input type="text" data-model="rgb" data-dimension="g" class="textfield" value="0" />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="color-picker-slider">
|
|
|
|
|
<span>B</span>
|
|
|
|
|
<input type="range" data-model="rgb" data-dimension="b" value="0" min="0" max="255" tabindex="-1"/>
|
|
|
|
|
<input type="text" data-model="rgb" data-dimension="b" class="textfield" value="0" />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="color-preview"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="create-palette-actions">
|
|
|
|
|
<button type="button" name="create-palette-cancel" data-action="cancel" class="button create-palette-cancel">Cancel</button>
|
|
|
|
|
<button type="button" name="create-palette-delete" data-action="delete" class="button button-primary create-palette-delete">Delete</button>
|
|
|
|
|
<!-- <button type="button" name="create-palette-clone" class="button button-primary create-palette-clone">Save as new</button> -->
|
|
|
|
|
<button type="button" name="create-palette-submit" data-action="submit" class="button button-primary create-palette-submit">Save</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<script type="text/template" id="create-palette-color-template">
|
|
|
|
|
<li
|
|
|
|
|
class="create-palette-color {{:selected}} {{:light-color}}"
|
|
|
|
|
style="background:{{color}}"
|
|
|
|
|
data-palette-index="{{index}}"
|
|
|
|
|
data-palette-color="{{color}}">
|
|
|
|
|
<div class="create-palette-remove-color">X</div>
|
|
|
|
|
</li>
|
|
|
|
|
</script>
|
|
|
|
|
<script type="text/template" id="templates/dialogs/import-image.html">
|
|
|
|
|
<div class="dialog-wrapper">
|
|
|
|
|
<h3 class="dialog-head">
|
|
|
|
|
Import Image
|
|
|
|
|
<span class="dialog-close">X</span>
|
|
|
|
|
</h3>
|
|
|
|
|
<div class="dialog-import-body">
|
|
|
|
|
<form action="" method="POST" name="import-image-form">
|
|
|
|
|
<div class="import-section">
|
|
|
|
|
<span class="dialog-section-title">Name :</span><span class="import-image-file-name"></span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="import-section">
|
|
|
|
|
<div class="import-section-preview-title">Preview :</div>
|
|
|
|
|
<div class="import-section-preview"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="import-section">
|
|
|
|
|
<label class="dialog-section-radio-label">
|
|
|
|
|
<input class="dialog-section-radio" name="import-type" value="single" type="radio" checked="checked">
|
|
|
|
|
Import as single image
|
|
|
|
|
</label>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="import-section import-subsection">
|
|
|
|
|
<span class="dialog-section-title">Resize to</span>
|
|
|
|
|
<input type="text" class="textfield import-size-field" name="resize-width"/>x
|
|
|
|
|
<input type="text" class="textfield import-size-field" name="resize-height"/>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="import-section import-subsection">
|
|
|
|
|
<span class="import-section-title">Smooth resize</span>
|
|
|
|
|
<input type="checkbox" class="checkbox-fix" checked="checked" name="smooth-resize-checkbox" value="1"/>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="import-section">
|
|
|
|
|
<label class="dialog-section-radio-label">
|
|
|
|
|
<input class="dialog-section-radio" name="import-type" value="sheet" type="radio">
|
|
|
|
|
Import as spritesheet
|
|
|
|
|
</label>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="import-section import-subsection">
|
|
|
|
|
<span class="dialog-section-title">Frame size</span>
|
|
|
|
|
<input type="text" class="textfield import-size-field" name="frame-size-x"/>x
|
|
|
|
|
<input type="text" class="textfield import-size-field" name="frame-size-y"/>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="import-section import-subsection">
|
|
|
|
|
<span class="dialog-section-title">Offset</span>
|
|
|
|
|
<input type="text" class="textfield import-size-field" name="frame-offset-x"/>x
|
|
|
|
|
<input type="text" class="textfield import-size-field" name="frame-offset-y"/>
|
|
|
|
|
</div>
|
|
|
|
|
<input type="submit" name="import-submit" class="button button-primary import-button" value="Import"/>
|
|
|
|
|
</form>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</script>
|
|
|
|
|
<script type="text/template" id="templates/dialogs/browse-local.html">
|
|
|
|
|
<div class="dialog-wrapper">
|
|
|
|
|
<h3 class="dialog-head">
|
|
|
|
|
Browse Local Piskels
|
|
|
|
|
<span class="dialog-close">X</span>
|
|
|
|
|
</h3>
|
|
|
|
|
<div class="dialog-content" style="padding:10px 20px; font-size:1.5em; overflow: auto;">
|
|
|
|
|
<table class="local-piskel-list">
|
|
|
|
|
<thead>
|
|
|
|
|
<tr class="local-piskel-list-head">
|
|
|
|
|
<td class="local-piskel-name">Name</td>
|
|
|
|
|
<td class="local-piskel-save-date">Date</td>
|
|
|
|
|
<td colspan=2>Actions</td>
|
|
|
|
|
</tr>
|
|
|
|
|
</thead>
|
|
|
|
|
<tbody></tbody>
|
|
|
|
|
</table>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<script type="text/template" id="local-storage-item-template">
|
|
|
|
|
<tr class="local-piskel-item">
|
|
|
|
|
<td class="local-piskel-name">{{name}}</td>
|
|
|
|
|
<td class="local-piskel-save-date">{{date}}</td>
|
|
|
|
|
<td><button type="button" data-action="load" data-name="{{name}}" class="button button-primary local-piskel-load-button">Load</button></td>
|
|
|
|
|
<td><button type="button" data-action="delete" data-name="{{name}}" class="button local-piskel-delete-button">Delete</button></td>
|
|
|
|
|
</tr>
|
|
|
|
|
</script>
|
|
|
|
|
<script type="text/template" id="templates/dialogs/cheatsheet.html">
|
|
|
|
|
<div id="cheatsheetContainer" class="dialog-wrapper">
|
|
|
|
|
<h3 class="dialog-head">
|
|
|
|
|
<span class="dialog-title">Keyboard shortcuts</span>
|
|
|
|
|
<span class="dialog-close">X</span>
|
|
|
|
|
</h3>
|
|
|
|
|
<div class="cheatsheet-container dialog-content">
|
|
|
|
|
<div class="cheatsheet-section">
|
|
|
|
|
<h3 class="cheatsheet-title">Tool shortcuts</h3>
|
|
|
|
|
<ul class="cheatsheet-tool-shortcuts"></ul>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="cheatsheet-section">
|
|
|
|
|
<h3 class="cheatsheet-title">Misc shortcuts</h3>
|
|
|
|
|
<ul class="cheatsheet-misc-shortcuts"></ul>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="cheatsheet-boxes">
|
|
|
|
|
<div class="cheatsheet-section">
|
|
|
|
|
<h3 class="cheatsheet-title">Selection shortcuts</h3>
|
|
|
|
|
<ul class="cheatsheet-selection-shortcuts"></ul>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="cheatsheet-section">
|
|
|
|
|
<h3 class="cheatsheet-title">Color shortcuts</h3>
|
|
|
|
|
<ul class="cheatsheet-color-shortcuts"></ul>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="cheatsheet-section">
|
|
|
|
|
<h3 class="cheatsheet-title">Storage shortcuts</h3>
|
|
|
|
|
<ul class="cheatsheet-storage-shortcuts"></ul>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="cheatsheet-actions">
|
|
|
|
|
<span class="cheatsheet-helptext" rel="tooltip" data-placement="top" title="!!!Set in CheatsheetController!!!"><b>Customize shortcuts ?</b></span>
|
|
|
|
|
<button type="button" name="cheatsheet-restore-defaults" data-action="restore-defaults" class="button cheatsheet-button cheatsheet-restore-defaults">Restore default shortcuts</button>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Event trap to capture keyboard remaps -->
|
|
|
|
|
<div style="position:relative; overflow:hidden; width:1px; height:1px;">
|
|
|
|
|
<input type="text" id="cheatsheetEventTrap" style="position:absolute; top:-1000px;" />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<script type="text/template" id="cheatsheet-shortcut-template">
|
|
|
|
|
<li class="cheatsheet-shortcut {{className}}" data-shortcut-id="{{id}}">
|
|
|
|
|
<div class="cheatsheet-icon {{icon}}"></div>
|
|
|
|
|
<span class="cheatsheet-key" rel="tooltip" data-placement="top" title="{{title}}">{{key}}</span>
|
|
|
|
|
<span class="cheatsheet-description">{{description}}</span>
|
|
|
|
|
</li>
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<!-- settings-panel partials -->
|
|
|
|
|
<script type="text/html" id="templates/settings/application.html">
|
|
|
|
|
<form action="" method="POST" name="application-settings-form">
|
|
|
|
|
<div class="settings-section settings-section--application-general">
|
|
|
|
|
<div class="settings-title">
|
|
|
|
|
General
|
|
|
|
|
</div>
|
|
|
|
|
<div class="settings-item">
|
|
|
|
|
<label>Background</label>
|
|
|
|
|
<div class="background-picker-wrapper">
|
|
|
|
|
<div class="background-picker light-picker-background" data-background="light-canvas-background"
|
|
|
|
|
rel="tooltip" data-placement="bottom" title="light / high contrast">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="background-picker medium-picker-background" data-background="medium-canvas-background"
|
|
|
|
|
rel="tooltip" data-placement="bottom" title="medium / high contrast">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="background-picker lowcont-medium-picker-background" data-background="lowcont-medium-canvas-background"
|
|
|
|
|
rel="tooltip" data-placement="bottom" title="medium / low contrast">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="background-picker lowcont-dark-picker-background" data-background="lowcont-dark-canvas-background"
|
|
|
|
|
rel="tooltip" data-placement="bottom" title="dark / low contrast">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="settings-item">
|
|
|
|
|
<label for="grid-width">Grid</label>
|
|
|
|
|
<select id="grid-width" class="grid-width-select">
|
|
|
|
|
<option value="0">Disabled</option>
|
|
|
|
|
<option value="1">1px</option>
|
|
|
|
|
<option value="2">2px</option>
|
|
|
|
|
<option value="3">3px</option>
|
|
|
|
|
<option value="4">4px</option>
|
|
|
|
|
</select>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="settings-item">
|
|
|
|
|
<label for="tiled-preview">Layer Preview Opacity</label>
|
|
|
|
|
<input type="range" class="layer-opacity-input" name="layer-opacity" min="0" max="1" step="0.05"/>
|
|
|
|
|
<span class="layer-opacity-text"></span>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="settings-section">
|
|
|
|
|
<div class="settings-title">
|
|
|
|
|
Preview
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="settings-item">
|
|
|
|
|
<label>
|
|
|
|
|
<input type="checkbox" value="1" class="tiled-preview-checkbox checkbox-fix" name="tiled-preview-checkbox"/>
|
|
|
|
|
Repeated preview
|
|
|
|
|
</label>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="settings-item">
|
|
|
|
|
<label for="tiled-preview">Maximum FPS </label>
|
|
|
|
|
<input type="text" class="textfield textfield-small max-fps-input" autocomplete="off" name="max-fps"/>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<input type="submit" class="button button-primary" value="Save" />
|
|
|
|
|
</div>
|
|
|
|
|
</form>
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<script type="text/html" id="templates/settings/resize.html">
|
|
|
|
|
<div class="settings-section">
|
|
|
|
|
<!-- RESIZE DRAWING SECTION -->
|
|
|
|
|
<div class="settings-title">
|
|
|
|
|
Resize
|
|
|
|
|
</div>
|
|
|
|
|
<div class="settings-item resize-canvas">
|
|
|
|
|
<form action="" method="POST" name="resize-canvas-form">
|
|
|
|
|
<div class="resize-section">
|
|
|
|
|
<span class="resize-section-title">Width</span>
|
|
|
|
|
<input type="text" class="textfield resize-size-field" autocomplete="off" name="resize-width"/>
|
|
|
|
|
<span>px</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="resize-section">
|
|
|
|
|
<span class="resize-section-title">Height</span>
|
|
|
|
|
<input type="text" class="textfield resize-size-field" autocomplete="off" name="resize-height"/>
|
|
|
|
|
<span>px</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="resize-section">
|
|
|
|
|
<label>
|
|
|
|
|
<input type="checkbox" class="resize-ratio-checkbox checkbox-fix" value="true"/>
|
|
|
|
|
<span>Maintain aspect ratio</span>
|
|
|
|
|
</label>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="resize-section">
|
|
|
|
|
<label>
|
|
|
|
|
<input type="checkbox" class="resize-content-checkbox checkbox-fix" value="true"/>
|
|
|
|
|
<span>Resize canvas content</span>
|
|
|
|
|
</label>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="resize-section">
|
|
|
|
|
<span class="resize-section-title">Anchor</span>
|
|
|
|
|
<div class="resize-origin-container">
|
|
|
|
|
<div class="resize-origin-option" title="top left" data-origin="TOPLEFT"></div>
|
|
|
|
|
<div class="resize-origin-option" title="top" data-origin="TOP"></div>
|
|
|
|
|
<div class="resize-origin-option" title="top right" data-origin="TOPRIGHT"></div>
|
|
|
|
|
<div class="resize-origin-option" title="middle left" data-origin="MIDDLELEFT"></div>
|
|
|
|
|
<div class="resize-origin-option" title="middle" data-origin="MIDDLE"></div>
|
|
|
|
|
<div class="resize-origin-option" title="middle right" data-origin="MIDDLERIGHT"></div>
|
|
|
|
|
<div class="resize-origin-option" title="bottom left" data-origin="BOTTOMLEFT"></div>
|
|
|
|
|
<div class="resize-origin-option" title="bottom" data-origin="BOTTOM"></div>
|
|
|
|
|
<div class="resize-origin-option" title="bottom right" data-origin="BOTTOMRIGHT"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<input type="submit" class="button button-primary resize-button" value="Resize" />
|
|
|
|
|
</form>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- DEFAULT SIZE SECTION -->
|
|
|
|
|
<div class="settings-title">
|
|
|
|
|
Default size
|
|
|
|
|
</div>
|
|
|
|
|
<div class="settings-item settings-default-size">
|
|
|
|
|
<form action="" method="POST" name="default-size-form">
|
|
|
|
|
<div class="resize-section">
|
|
|
|
|
<span class="resize-section-title">Width</span>
|
|
|
|
|
<input type="text" class="textfield resize-size-field" autocomplete="off" name="default-width"/>
|
|
|
|
|
<span>px</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="resize-section">
|
|
|
|
|
<span class="resize-section-title">Height</span>
|
|
|
|
|
<input type="text" class="textfield resize-size-field" autocomplete="off" name="default-height"/>
|
|
|
|
|
<span>px</span>
|
|
|
|
|
</div>
|
|
|
|
|
<input type="submit" class="button button-primary resize-button" value="Set default" />
|
|
|
|
|
</form>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<script type="text/template" id="templates/settings/save.html">
|
|
|
|
|
<div class="settings-section setting-save-section">
|
|
|
|
|
<form action="" method="POST" class="save-form" name="save-form">
|
|
|
|
|
<div class="settings-title">Sprite Information</div>
|
|
|
|
|
<div class="settings-item">
|
|
|
|
|
<div class="settings-form-section" style="overflow:hidden">
|
|
|
|
|
<label class="row" style="line-height:20px;">Title : </label>
|
|
|
|
|
<input id="save-name" type="text" class="save-field textfield" autocomplete="off" />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="settings-form-section">
|
|
|
|
|
<label class="row" style="line-height:20px;">Description : </label>
|
|
|
|
|
<textarea id="save-description" class="save-field textfield"></textarea>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="settings-form-section save-public-section">
|
|
|
|
|
<label class="row">
|
|
|
|
|
Public : <input type="checkbox" value="1" name="save-public-checkbox"/>
|
|
|
|
|
</label>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</form>
|
|
|
|
|
</div>
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<!-- save-gallery-partial -->
|
|
|
|
|
<script type="text/template" id="save-gallery-partial">
|
|
|
|
|
<div class="settings-title">Save online</div>
|
|
|
|
|
<div class="settings-item">
|
|
|
|
|
<input type="button" class="button button-primary" id="save-gallery-button" value="Save to your gallery" />
|
|
|
|
|
<div class="save-status">Your piskel will be stored online in your gallery.</div>
|
|
|
|
|
</div>
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<!-- save-gallery-unavailable-partial -->
|
|
|
|
|
<script type="text/template" id="save-gallery-unavailable-partial">
|
|
|
|
|
<div class="settings-title">Save online</div>
|
|
|
|
|
<div class="settings-item">
|
|
|
|
|
<div class="save-status">Login to <a href="http://piskelapp.com" target="_blank">piskelapp.com</a> to save and share your sprites online.</div>
|
|
|
|
|
</div>
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<!-- save-localstorage-partial -->
|
|
|
|
|
<script type="text/template" id="save-localstorage-partial">
|
|
|
|
|
<div class="settings-title">Save offline in Browser</div>
|
|
|
|
|
<div class="settings-item">
|
|
|
|
|
<input type="button" class="button button-primary" id="save-localstorage-button" value="Save in Browser" />
|
|
|
|
|
<div class="save-status">Your piskel will be saved locally and will only be accessible from this browser.</div>
|
|
|
|
|
</div>
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<!-- save-desktop-partial -->
|
|
|
|
|
<script type="text/template" id="save-desktop-partial">
|
|
|
|
|
<div class="settings-title">Save as File</div>
|
|
|
|
|
<div class="settings-item">
|
|
|
|
|
<input type="button" class="button button-primary" id="save-desktop-button" value="Save" />
|
|
|
|
|
<input type="button" class="button button-primary" id="save-desktop-as-new-button" value="Save as ..." />
|
|
|
|
|
<div class="save-status">Your sprite will be saved as a .piskel file.</div>
|
|
|
|
|
</div>
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<!-- save-file-download-partial -->
|
|
|
|
|
<script type="text/template" id="save-file-download-partial">
|
|
|
|
|
<div class="settings-title">Save offline as File</div>
|
|
|
|
|
<div class="settings-item">
|
|
|
|
|
<input type="button" class="button button-primary" id="save-file-download-button" value="Save as .piskel" />
|
|
|
|
|
<div class="save-status">Your sprite will be downloaded as a .piskel file.</div>
|
|
|
|
|
</div>
|
|
|
|
|
</script>
|
|
|
|
|
<script type="text/template" id="templates/settings/import.html">
|
|
|
|
|
<div class="settings-section">
|
|
|
|
|
<div class="settings-title">
|
|
|
|
|
Load from Browser
|
|
|
|
|
</div>
|
|
|
|
|
<div class="settings-item">
|
|
|
|
|
<span>Load a <span class="import-highlight">local piskel</span> saved in this Browser</span>
|
|
|
|
|
<div class="import-section">
|
|
|
|
|
<button type="button" class="button button-primary browse-local-button">Browse local saves</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="settings-title">
|
|
|
|
|
Load .piskel file
|
|
|
|
|
</div>
|
|
|
|
|
<div class="settings-item">
|
|
|
|
|
<span>Load a <span class="import-highlight">.piskel</span> file from your computer</span>
|
|
|
|
|
|
|
|
|
|
<div class="import-section">
|
|
|
|
|
<button type="button" class="button button-primary open-piskel-button">Browse .piskel files</button>
|
|
|
|
|
<span class="file-input-open-piskel-status"></span>
|
|
|
|
|
<input style="display:none"
|
|
|
|
|
type="file" name="open-piskel-input"
|
|
|
|
|
value="file" accept=".piskel"/>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="settings-title">
|
|
|
|
|
Import From Picture
|
|
|
|
|
</div>
|
|
|
|
|
<div class="settings-item">
|
|
|
|
|
<div style="margin-top:5px;margin-bottom:5px;">Supports <span class="import-highlight">PNG, JPG, BMP, Animated GIF</span></div>
|
|
|
|
|
<div class="import-section">
|
|
|
|
|
<button type="button" class="button button-primary file-input-button">Browse images</button>
|
|
|
|
|
<input style="display:none"
|
|
|
|
|
type="file" name="file-upload-input"
|
|
|
|
|
value="file" accept="image/*"/>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="settings-title">
|
|
|
|
|
Recover recent sessions
|
|
|
|
|
</div>
|
|
|
|
|
<div class="settings-item previous-session">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<script type="text/template" id="previous-session-info-template">
|
|
|
|
|
<div>
|
|
|
|
|
Restore a backup of <span style="color:gold">{{name}}</span>, saved at <span style="color:white">{{date}}</span> ?
|
|
|
|
|
<div style="margin-top:10px;">
|
|
|
|
|
<button type="button" class="button button-primary restore-session-button">Restore</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</script>
|
|
|
|
|
<script type="text/html" id="templates/settings/export.html">
|
|
|
|
|
<div class="settings-section">
|
|
|
|
|
<div class="settings-title">
|
|
|
|
|
Export Spritesheet
|
|
|
|
|
</div>
|
|
|
|
|
<div class="settings-item">
|
|
|
|
|
<div class="settings-description">PNG with all frames side by side.</div>
|
|
|
|
|
<div class="scaling-factor"
|
|
|
|
|
title="Scale the exported PNG spritesheet"
|
|
|
|
|
rel="tooltip"
|
|
|
|
|
data-placement="top">
|
|
|
|
|
<label for="scaling-factor">Scale</label>
|
|
|
|
|
<input type="range" class="scaling-factor-input" name="scaling-factor" min="1" max="32" step="1"/>
|
|
|
|
|
<span class="scaling-factor-text"></span>
|
|
|
|
|
</div>
|
|
|
|
|
<button type="button" class="button button-primary png-download-button">Download PNG</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="settings-title">
|
|
|
|
|
Export as ZIP
|
|
|
|
|
</div>
|
|
|
|
|
<div class="settings-item">
|
|
|
|
|
<div class="settings-description">ZIP with one PNG file per frame.</div>
|
|
|
|
|
<div class="settings-description">File names will start with the prefix below.</div>
|
|
|
|
|
<div class="settings-item">
|
|
|
|
|
<label>Prefix</label>
|
|
|
|
|
<input type="text" class="zip-prefix-name textfield" autocomplete="off" placeholder="PNG file prefix ...">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="settings-item">
|
|
|
|
|
<label>
|
|
|
|
|
<input class="zip-split-layers-checkbox checkbox-fix" type="checkbox" />
|
|
|
|
|
Split by layers
|
|
|
|
|
</label>
|
|
|
|
|
</div>
|
|
|
|
|
<button type="button" class="button button-primary zip-generate-button"/>Download ZIP</button>
|
|
|
|
|
</div>
|
2016-05-08 17:07:50 +03:00
|
|
|
<div class="settings-title">
|
|
|
|
|
Export as C File
|
|
|
|
|
</div>
|
|
|
|
|
<div class="settings-item">
|
|
|
|
|
<div class="settings-description">C file with frame rendered as array.</div>
|
|
|
|
|
<button type="button" class="button button-primary c-download-button">Download C file</button>
|
|
|
|
|
</div>
|
2016-01-14 02:04:44 +03:00
|
|
|
<div class="settings-title">
|
|
|
|
|
Export to Animated GIF
|
|
|
|
|
</div>
|
|
|
|
|
<div class="settings-item">
|
|
|
|
|
<form action="" method="POST" class="gif-export-form">
|
|
|
|
|
<div class="settings-item">
|
|
|
|
|
<label>Select resolution:</label>
|
|
|
|
|
<div class="resize-section">
|
|
|
|
|
<span class="resize-section-title">Width</span>
|
|
|
|
|
<input type="text" class="textfield export-size-field export-gif-resize-width" autocomplete="off" name="resize-width"/>
|
|
|
|
|
<span>px</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="resize-section">
|
|
|
|
|
<span class="resize-section-title">Height</span>
|
|
|
|
|
<input type="text" class="textfield export-size-field export-gif-resize-height" autocomplete="off" name="resize-height"/>
|
|
|
|
|
<span>px</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="settings-item">
|
|
|
|
|
<button type="button" class="button button-primary gif-download-button">Download GIF</button>
|
|
|
|
|
<button type="button" class="button button gif-upload-button">Get public URL</button>
|
|
|
|
|
</div>
|
|
|
|
|
</form>
|
|
|
|
|
<div class="gif-upload">
|
|
|
|
|
<div class="gif-export-preview"></div>
|
|
|
|
|
<div class="gif-upload-status"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
(function () {
|
|
|
|
|
|
|
|
|
|
/**
|
2016-05-08 17:07:50 +03:00
|
|
|
* See @Gruntfile.js => after build, -2016-05-08-04-05 is replaced by the build version
|
2016-01-14 02:04:44 +03:00
|
|
|
*/
|
2016-05-08 17:07:50 +03:00
|
|
|
var version = '-2016-05-08-04-05';
|
2016-01-14 02:04:44 +03:00
|
|
|
var versionHasNotBeenReplaced = version.indexOf('@@') === 0;
|
|
|
|
|
if (versionHasNotBeenReplaced) {
|
|
|
|
|
version = '';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
window.onPiskelReady = function () {
|
|
|
|
|
var loadingMask = document.getElementById('loading-mask');
|
|
|
|
|
loadingMask.style.opacity = 0;
|
|
|
|
|
window.setTimeout(function () {loadingMask.parentNode.removeChild(loadingMask);}, 600);
|
|
|
|
|
pskl.app.init();
|
|
|
|
|
// cleanup
|
|
|
|
|
delete window.pskl_exports;
|
|
|
|
|
delete window.loadDebugScripts;
|
|
|
|
|
delete window.done;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
var prefixPath = function (path) {
|
|
|
|
|
if (window.pskl && window.pskl.appEngineToken_) {
|
|
|
|
|
return '../' + path;
|
|
|
|
|
} else {
|
|
|
|
|
return path;
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
var loadScript = function (src, callback) {
|
|
|
|
|
src = prefixPath(src);
|
|
|
|
|
var script = window.document.createElement('script');
|
|
|
|
|
script.setAttribute('src',src);
|
|
|
|
|
script.setAttribute('onload',callback);
|
|
|
|
|
window.document.body.appendChild(script);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
var loadStyle = function (src) {
|
|
|
|
|
src = prefixPath(src);
|
|
|
|
|
var link = document.createElement('link');
|
|
|
|
|
link.setAttribute('href', src);
|
|
|
|
|
link.setAttribute('rel', 'stylesheet');
|
|
|
|
|
link.setAttribute('type', 'text/css');
|
|
|
|
|
document.head.appendChild(link);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
if (window.location.href.indexOf('debug') != -1) {
|
|
|
|
|
window.pskl_exports = {};
|
|
|
|
|
var scriptIndex = 0;
|
|
|
|
|
window.loadNextScript = function () {
|
|
|
|
|
if (scriptIndex == window.pskl_exports.scripts.length) {
|
|
|
|
|
window.onPiskelReady();
|
|
|
|
|
} else {
|
|
|
|
|
loadScript(window.pskl_exports.scripts[scriptIndex], 'loadNextScript()');
|
|
|
|
|
scriptIndex ++;
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
loadScript('piskel-script-list.js', 'loadNextScript()');
|
|
|
|
|
|
|
|
|
|
window.loadStyles = function () {
|
|
|
|
|
var styles = window.pskl_exports.styles;
|
|
|
|
|
for (var i = 0 ; i < styles.length ; i++) {
|
|
|
|
|
loadStyle(styles[i]);
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
loadScript('piskel-style-list.js', 'loadStyles()');
|
|
|
|
|
} else {
|
|
|
|
|
var script;
|
|
|
|
|
if (window.location.href.indexOf('pack') != -1) {
|
|
|
|
|
script = 'js/piskel-packaged' + version + '.js';
|
|
|
|
|
} else {
|
|
|
|
|
script = 'js/piskel-packaged-min' + version + '.js';
|
|
|
|
|
}
|
2015-02-19 03:11:30 +03:00
|
|
|
|
2016-01-14 02:04:44 +03:00
|
|
|
loadStyle('css/piskel-style-packaged' + version + '.css');
|
|
|
|
|
loadScript(script, 'onPiskelReady()');
|
|
|
|
|
}
|
|
|
|
|
})();
|
|
|
|
|
</script>
|
2014-07-08 22:07:38 +04:00
|
|
|
<!--body-main-end-->
|
|
|
|
|
<!-- the comment above indicates the end of the markup reused by the editor integrated in piskelapp.com -->
|
|
|
|
|
<!-- do not delete, do not move :) -->
|
|
|
|
|
|
2012-08-23 02:57:35 +04:00
|
|
|
</body>
|
|
|
|
|
</html>
|
