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 >
2016-07-14 12:44:03 +03:00
<!-- standalone - start -->
2016-01-14 02:04:44 +03:00
< style type = "text/css" >
2016-07-14 12:44:03 +03:00
#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 >
<!-- standalone - end -->
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
2017-01-10 18:27:38 +03: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" >
2017-05-07 00:56:43 +03:00
< div class = "preview-drop-down" >
< div class = "preview-disable-overlay" rel = "tooltip" data-placement = "left" > < / div >
< div class = "preview-contextual-action original-size-button" rel = "tooltip" data-placement = "left" > 1x< / div >
< div class = "preview-contextual-action best-size-button" rel = "tooltip" data-placement = "left" > < / div >
< div class = "preview-contextual-action full-size-button" rel = "tooltip" data-placement = "left" > Full< / div >
< / div >
2016-01-14 02:04:44 +03:00
< 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}}">
2017-01-10 18:27:38 +03:00
< span class = "layer-name" data-placement = "top" > {{layername}}< / span >
2016-05-08 17:07:50 +03:00
< 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"
2017-01-10 18:27:38 +03:00
title="< span class = 'highlight' > PREFERENCES< / span > < / br > "
2016-01-14 02:04:44 +03:00
rel="tooltip" data-placement="left">
< / div >
< div
data-setting="resize"
class="tool-icon icon-settings-resize-white"
2017-01-10 18:27:38 +03:00
title="< span class = 'highlight' > RESIZE< / span > < / br > Resize the drawing area"
2016-01-14 02:04:44 +03:00
rel="tooltip" data-placement="left">
< / div >
< div
data-setting="save"
class="tool-icon icon-settings-save-white"
2017-01-10 18:27:38 +03:00
title="< span class = 'highlight' > SAVE< / span > < / br > Save to your gallery, save locally< br / > or export as a file"
2016-01-14 02:04:44 +03:00
rel="tooltip" data-placement="left" >
< / div >
< div
data-setting="export"
class="tool-icon icon-settings-export-white"
2017-01-10 18:27:38 +03:00
title="< span class = 'highlight' > EXPORT< / span > < / br > Export as Image, as Spritesheet< br / > or as Animated GIF"
2016-01-14 02:04:44 +03:00
rel="tooltip" data-placement="left">
< / div >
< div
data-setting="import"
class="tool-icon icon-settings-open-folder-white"
2017-01-10 18:27:38 +03:00
title="< span class = 'highlight' > IMPORT< / span > < / br > Import an existing image,< br / > an animated GIF or a .piskel file"
2016-01-14 02:04:44 +03:00
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 >
2017-05-07 00:56:43 +03:00
{{!descriptors!}}
2016-01-14 02:04:44 +03:00
< / 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 >
2017-01-10 18:27:38 +03:00
< span class = "cheatsheet-link icon-common-keyboard-gold"
rel="tooltip" data-placement="right" title="Keyboard shortcuts"> < / span >
< div class = "performance-link icon-common-warning-red"
rel="tooltip" data-placement="left" title="Performance problem detected, learn more."> < / div >
2016-01-14 02:04:44 +03:00
<!-- 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/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 >
2017-05-10 02:33:22 +03:00
< span class = "cheatsheet-key" rel = "tooltip" data-placement = "top" title = "{{title}}" > {{!key!}}< / span >
2016-01-14 02:04:44 +03:00
< span class = "cheatsheet-description" > {{description}}< / span >
< / li >
< / script >
2017-05-07 00:56:43 +03:00
< script type = "text/template" id = "templates/dialogs/import.html" >
< div class = "dialog-wrapper" >
< h3 class = "dialog-head" >
Import and Merge
< span class = "dialog-close" > X< / span >
< / h3 >
< div class = "dialog-content import-wizard-container" > < / div >
< / div >
< / script >
< script type = "text/template" id = "import-image-import" >
< div class = "import-step-container import-image-container" >
< 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" > < / 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 >
< / form >
< div class = "import-step-buttons" >
< button class = "import-back-button button" > back< / button >
< button class = "import-next-button button button-primary" > next< / button >
< / div >
< / div >
< / script >
< script type = "text/template" id = "import-select-mode" >
< div class = "import-step-container" >
< div class = "import-info" >
< div class = "import-preview" > < / div >
< div class = "import-meta" > < / div >
< / div >
< div class = "import-step-content" >
< div class = "import-mode" >
< div class = "import-mode-title" > How do you want to import the new content?< / div >
2017-05-10 02:33:22 +03:00
< div class = "import-mode-section" >
< span class = "import-mode-section-description" > Combine the imported content and your existing sprite.< / span >
< button class = "import-mode-merge-button button-primary button" > Merge< / button >
< / div >
< div class = "import-mode-section" >
< span class = "import-mode-section-description" > Replace your current sprite by the imported content.< / span >
< button class = "import-mode-replace-button button-primary button" > Replace< / button >
< / div >
2017-05-07 00:56:43 +03:00
< / div >
< div class = "import-step-buttons" >
< button class = "import-back-button button" > back< / button >
2017-05-10 02:33:22 +03:00
< button style = "display: none" class = "import-next-button button button-primary" > next< / button >
2017-05-07 00:56:43 +03:00
< / div >
< / div >
< / div >
< / script >
< script type = "text/template" id = "import-meta-content" >
< div class = "import-name" >
< span class = "import-meta-label" > Name< / span >
< span class = "import-meta-value" title = "{{name}}" > {{name}}< / span >
< / div >
< div class = "import-dimensions" >
< span class = "import-meta-label" > Dimensions< / span >
< span class = "import-meta-value" > {{dimensions}}< / span >
< / div >
< div class = "import-frames" >
< span class = "import-meta-label" > Frames< / span >
< span class = "import-meta-value" > {{frames}}< / span >
< / div >
< div class = "import-layers" >
< span class = "import-meta-label" > Layers< / span >
< span class = "import-meta-value" > {{layers}}< / span >
< / div >
< / script >
< script type = "text/template" id = "import-adjust-size" >
< div class = "import-step-container" >
< div class = "import-info" >
< div class = "import-preview" > < / div >
< div class = "import-meta" > < / div >
< / div >
< div class = "import-step-content" >
< div class = "import-resize-info" > < / div >
< div class = "import-resize-anchor import-resize-section" >
< div class = "import-resize-anchor-info" > < / div >
< div class = "import-resize-anchor-container" > < / div >
< / div >
< div class = "import-step-buttons" >
< button class = "import-back-button button" > back< / button >
< button class = "import-next-button button button-primary" > next< / button >
< / div >
< / div >
< / div >
< / script >
< script type = "text/template" id = "import-resize-bigger-partial" >
< div class = "import-resize-bigger" >
< div class = "import-resize-section" >
The imported image is bigger than the current sprite.
< / div >
< div class = "import-resize-section" >
< div class = "import-resize-option-label" >
How do you want to proceed?
< / div >
< label class = "import-resize-option" >
< input type = "radio" name = "resize-mode" id = "resize-option-expand" value = "expand" { { expandChecked } } / >
< span > Expand canvas to {{newSize}}< / span >
< / label >
< label class = "import-resize-option" >
< input type = "radio" name = "resize-mode" id = "resize-option-keep" value = "keep" { { keepChecked } } / >
< span > Keep canvas size at {{size}}< / span >
< / label >
< / div >
< / div >
< / script >
< script type = "text/template" id = "import-resize-smaller-partial" >
< div class = "import-resize-smaller" >
< div class = "import-resize-section" >
The image being imported is smaller ({{newSize}}) than the canvas size ({{size}}).
< / div >
< / div >
< / script >
< script type = "text/template" id = "import-insert-location" >
< div class = "import-step-container" >
< div class = "import-info" >
< div class = "import-preview" > < / div >
< div class = "import-meta" > < / div >
< / div >
< div class = "import-step-content" >
< div > Select a frame in your current sprite:< / div >
< div class = "insert-frame-preview" > < / div >
< div class = "insert-mode-container" >
< div class = "insert-mode-option-label" >
How should the imported frames be inserted:
< / div >
< label class = "insert-mode-option" >
< input type = "radio" name = "insert-mode" id = "insert-mode-add" value = "add" checked = "checked" / >
< span > Add new frames< / span >
< / label >
< label class = "insert-mode-option" >
< input type = "radio" name = "insert-mode" id = "insert-mode-insert" value = "insert" / >
< span > Insert in existing frames< / span >
< / label >
< / div >
< div class = "import-step-buttons" >
< button class = "import-back-button button" > back< / button >
< button class = "import-next-button button button-primary" > import< / button >
< / div >
< / div >
< / div >
< / script >
< script type = "text/template" id = "import-invalid-file" >
< div class = "import-step-container" >
< div > THIS IS AN INVALID FILEZ< / div >
< div class = "import-step-buttons" >
< button class = "import-back-button button" > back< / button >
< button class = "import-next-button button button-primary" > next< / button >
< / div >
< / div >
< / script >
2017-01-10 18:27:38 +03:00
< script type = "text/template" id = "templates/dialogs/performance-info.html" >
< div class = "dialog-wrapper" >
< h3 class = "dialog-head" >
Performance issues
< span class = "dialog-close" > X< / span >
< / h3 >
< div class = "dialog-performance-info-body" >
< p > The current sprite may exceed the recommendations for Piskel.< / p >
< p > You can ignore this warning and continue working with your sprite but you might experience the following issues:< / p >
< ul >
< li > saving failures< / li >
< li > slowdowns< / li >
< li > crashes< / li >
< / ul >
< p > If you ignore this warning, please save often!< / p >
< p > To fix the issue, try adjusting your sprite settings:< / p >
< ul >
< li > sprite resolution < sup title = "recommended: lower than 256x256, max: 512x512" rel = "tooltip" data-placement = "top" > ?< / sup > < / li >
< li > number of layers < sup title = "recommended: lower than 5, max: 20" rel = "tooltip" data-placement = "top" > ?< / sup > < / li >
< li > number of frames < sup title = "recommended: lower than 25, max: 100" rel = "tooltip" data-placement = "top" > ?< / sup > < / li >
< li > number of colors < sup title = "max: 100" rel = "tooltip" data-placement = "top" > ?< / sup > < / li >
< / ul >
2017-05-07 00:56:43 +03:00
< p > We strive to improve Piskel, its performance and stability, but this is a personal project with limited time and resources.
2017-01-10 18:27:38 +03:00
We prefer to warn you early rather than having you lose your work.< / p >
< p > Feedback welcome at < a href = "https://github.com/juliandescottes/piskel" target = "_blank" > https://github.com/juliandescottes/piskel< / a > < / p >
< p >
< div class = "warning-icon icon-common-warning-red" > < / div >
2017-05-07 00:56:43 +03:00
< div class = "warning-icon-info" > This icon will remain on the bottom-right of the application until the performance issue is fixed. You can click on it at anytime to display this information again.< / div >
2017-01-10 18:27:38 +03:00
< / p >
< / div >
< / div >
< / script >
< script type = "text/template" id = "templates/dialogs/unsupported-browser.html" >
< div class = "dialog-wrapper" >
< h3 class = "dialog-head" >
Browser not supported
< span class = "dialog-close" > X< / span >
< / h3 >
< div class = "dialog-content" >
< p > Your current browser (< span id = "current-user-agent" > < / span > ) is not supported.< / p >
< p > Piskel is currently tested for:< / p >
< ul class = "supported-browser-list" >
< li > Google Chrome < a href = "https://www.google.com/chrome/browser/desktop/" target = "_blank" > https://www.google.com/chrome/browser/desktop/< / a > < / li >
< li > Mozilla Firefox < a href = "https://www.mozilla.org/en-US/firefox/" target = "_blank" > https://www.mozilla.org/en-US/firefox/< / a > < / li >
< li > Microsoft Edge < a href = "https://www.microsoft.com/en-us/windows/microsoft-edge" target = "_blank" > https://www.microsoft.com/en-us/windows/microsoft-edge< / a > < / li >
< / ul >
< p > This browser has not been tested with Piskel, you might experience unknown bugs and crashes if you decide to continue.< / p >
< / div >
< / div >
< / script >
2016-01-14 02:04:44 +03:00
<!-- settings - panel partials -->
< script type = "text/html" id = "templates/settings/application.html" >
< form action = "" method = "POST" name = "application-settings-form" >
2016-06-02 20:23:09 +03:00
< div class = "settings-section settings-section-application" >
2016-01-14 02:04:44 +03:00
< div class = "settings-title" >
General
< / div >
2016-07-14 12:44:03 +03:00
2016-01-14 02:04:44 +03:00
< 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" >
2017-01-10 18:27:38 +03:00
< label for = "grid-width" > Pixel grid< / label >
2016-01-14 02:04:44 +03:00
< 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" >
2017-01-10 18:27:38 +03:00
< label > Layer opacity< / label >
< input type = "range" class = "settings-opacity-input layer-opacity-input" name = "layer-opacity" min = "0" max = "1" step = "0.05" / >
< span class = "settings-opacity-text layer-opacity-text" > < / span >
2016-01-14 02:04:44 +03:00
< / div >
< div class = "settings-item" >
< label >
2016-07-14 12:44:03 +03:00
Seamless drawing mode
< input type = "checkbox" value = "1" class = "seamless-mode-checkbox" name = "seamless-mode-checkbox" / >
2016-01-14 02:04:44 +03:00
< / label >
< / div >
2017-01-10 18:27:38 +03:00
< div class = "settings-item" >
< label > Seamless opacity< / label >
< input type = "range" class = "settings-opacity-input seamless-opacity-input" name = "seamless-opacity" min = "0" max = "0.5" step = "0.01" / >
< span class = "settings-opacity-text seamless-opacity-text" > < / span >
< / div >
2016-01-14 02:04:44 +03:00
< div class = "settings-item" >
2016-07-14 12:44:03 +03:00
< label > Maximum FPS< / label >
2016-01-14 02:04:44 +03:00
< input type = "text" class = "textfield textfield-small max-fps-input" autocomplete = "off" name = "max-fps" / >
< / div >
2017-01-10 18:27:38 +03:00
< div class = "settings-item" >
< label for = "color-format" > Color format< / label >
< select id = "color-format" class = "color-format-select" >
< option value = "hex" > Hex< / option >
< option value = "rgb" > RGB< / option >
< / select >
< / div >
2016-07-14 12:44:03 +03:00
< input type = "submit" class = "button button-primary" value = "Apply settings" / >
2016-01-14 02:04:44 +03:00
< / div >
< / form >
< / script >
< script type = "text/html" id = "templates/settings/resize.html" >
2016-06-02 20:23:09 +03:00
< div class = "settings-section settings-section-resize" >
2016-01-14 02:04:44 +03:00
<!-- 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 >
2017-05-07 00:56:43 +03:00
< div class = "resize-anchor-container" > < / div >
2016-01-14 02:04:44 +03:00
< / 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 >
2017-01-10 18:27:38 +03:00
< input type = "submit" class = "button button-primary default-size-button" value = "Set default" / >
2016-01-14 02:04:44 +03:00
< / form >
< / div >
< / div >
< / script >
< script type = "text/template" id = "templates/settings/save.html" >
2016-06-02 20:23:09 +03:00
< div class = "settings-section settings-section-save" >
2016-01-14 02:04:44 +03:00
< 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" / >
2017-01-10 18:27:38 +03:00
< div class = "save-status save-online-status" > Your piskel will be stored online in your gallery.< / div >
2016-01-14 02:04:44 +03:00
< / div >
< / script >
2017-01-10 18:27:38 +03:00
< script type = "text/template" id = "save-gallery-warning-partial" >
< div class = "save-status-warning-icon icon-common-warning-red" > < / div >
< div class = "save-status-warning-text" > Saving to the gallery might fail due to the sprite size.< / div >
< / script >
2016-01-14 02:04:44 +03:00
<!-- 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" >
2016-06-02 20:23:09 +03:00
< div class = "settings-section settings-section-import" >
2016-01-14 02:04:44 +03:00
< 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 >
2017-01-10 18:27:38 +03:00
Restore a backup of < span class = "highlight" > {{name}}< / span > , saved at < span style = "color:white" > {{date}}< / span > ?
2016-01-14 02:04:44 +03:00
< 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" >
2016-06-02 20:23:09 +03:00
< div class = "settings-section settings-section-export" >
< div class = "settings-title" > Export< / div >
2016-07-14 12:44:03 +03:00
< div class = "settings-item export-scale" title = "Scale the animation for export"
2016-01-14 02:04:44 +03:00
rel="tooltip"
data-placement="top">
2016-06-02 20:23:09 +03:00
< label for = "scale-input" > Scale< / label >
< input type = "range" class = "scale-input" name = "scale-input" min = "1" max = "32" step = "1" / >
< span class = "scale-text" > < / span >
< / div >
< div class = "settings-item export-resize" >
< span class = "resize-label" > Resolution< / span >
< input type = "text" class = "textfield resize-field resize-width" autocomplete = "off" name = "resize-width" / >
< div class = "resize-label" > x< / div >
< input type = "text" class = "textfield resize-field resize-height" autocomplete = "off" name = "resize-height" / >
< / div >
< div class = "export-tabs" >
< div class = "export-tab" data-tab-id = "gif" > GIF< / div >
< div class = "export-tab" data-tab-id = "png" > PNG< / div >
< div class = "export-tab" data-tab-id = "zip" > Zip< / div >
< div class = "export-tab" data-tab-id = "misc" > Others< / div >
< / div >
< div class = "export-panel" > < / div >
< / div >
< / script >
< script type = "text/html" id = "templates/settings/export/png.html" >
< div class = "export-panel-png" >
2016-07-14 12:44:03 +03:00
< div class = "export-panel-header export-info" > Export your animation as a PNG spritesheet containing all frames.< / div >
2016-06-02 20:23:09 +03:00
< div class = "export-panel-section png-export-layout-section" >
2017-01-10 18:27:38 +03:00
< div class = "highlight" style = "padding-bottom: 5px;" > Spritesheet layout options:< / div >
2016-07-14 12:44:03 +03:00
< div style = "display: flex; line-height: 20px;" >
< div style = "flex: 1;" >
2016-06-02 20:23:09 +03:00
< span > Columns< / span >
2016-07-14 12:44:03 +03:00
< input type = "number" min = "1" class = "textfield" id = "png-export-columns" name = "png-export-columns" >
2016-06-02 20:23:09 +03:00
< / div >
2016-07-14 12:44:03 +03:00
< div style = "flex: 1;" >
< span > Rows< / span >
< input readonly = "true" class = "textfield" id = "png-export-rows" name = "png-export-rows" >
2016-06-02 20:23:09 +03:00
< / div >
2016-01-14 02:04:44 +03:00
< / div >
< / div >
2016-06-02 20:23:09 +03:00
< div class = "export-panel-section export-panel-row" >
< button type = "button" class = "button button-primary png-download-button" > Download< / button >
2016-07-14 12:44:03 +03:00
< span class = "png-export-dimension-info export-info" > < / span >
< / div >
< div class = "export-panel-section export-panel-row png-export-datauri-section" >
< button type = "button" style = "white-space: nowrap;" class = "button button-primary datauri-open-button" > To data-uri< / button >
< span class = "png-export-datauri-info export-info" > Open the PNG export in your browser as a data-uri< / span >
2016-01-14 02:04:44 +03:00
< / div >
2017-01-10 18:27:38 +03:00
< div class = "export-panel-section" >
< div style = "padding-bottom: 5px" >
< span class = "highlight export-panel-row" > Export for PixiJS Movie: < / span >
< / div >
< div class = "export-panel-row" >
< button type = "button" class = "button button-primary png-pixi-download-button" / > Download< / button >
< span class = "png-export-dimension-info export-info" > Spritesheet with JSON metadata< / span >
< / div >
< / div >
2016-06-02 20:23:09 +03:00
< / div >
< / script >
2017-01-10 18:27:38 +03:00
2016-06-02 20:23:09 +03:00
< script type = "text/html" id = "templates/settings/export/gif.html" >
< div class = "export-panel-gif" >
2016-07-14 12:44:03 +03:00
< div class = "export-panel-header export-info" >
2016-06-02 20:23:09 +03:00
Convert your sprite to an animated GIF. Opacity will not be preserved. Colors might be resampled.
2016-01-14 02:04:44 +03:00
< / div >
2016-06-02 20:23:09 +03:00
< div class = "export-panel-section export-panel-row" >
< button type = "button" class = "button button-primary gif-download-button" > Download< / button >
2016-07-14 12:44:03 +03:00
< div class = "export-info" > Download as an animated GIF.< / div >
2016-05-08 17:07:50 +03:00
< / div >
2016-06-02 20:23:09 +03:00
< div class = "export-panel-section export-panel-row" >
< button type = "button" class = "button button-primary gif-upload-button" > Upload< / button >
2016-07-14 12:44:03 +03:00
< div class = "export-info" > Upload as an animated GIF to a public URL.< / div >
2016-05-08 17:07:50 +03:00
< / div >
2016-06-02 20:23:09 +03:00
< div class = "gif-upload" >
< div class = "gif-export-preview" > < / div >
< div class = "gif-upload-status" > < / div >
2016-01-14 02:04:44 +03:00
< / div >
2016-06-02 20:23:09 +03:00
< / div >
< / script >
< script type = "text/html" id = "templates/settings/export/zip.html" >
< div class = "export-panel-zip" >
2016-07-14 12:44:03 +03:00
< div class = "export-panel-header export-info" > ZIP archive containing one PNG for each frame. File names will start with the prefix below.< / div >
2016-06-02 20:23:09 +03:00
< div class = "export-panel-section" >
< div style = "display: flex; line-height: 23px;" >
< label style = "flex-shrink: 0; padding-right:5px;" > Prefix< / label >
< input type = "text" style = "flex: 1;" class = "zip-prefix-name textfield"
autocomplete="off" placeholder="PNG file prefix ...">
< / div >
< div style = "margin: 5px 0;" >
< input id = "zip-split-layers" class = "zip-split-layers-checkbox checkbox-fix" type = "checkbox" / >
< label for = "zip-split-layers" > Split by layers< / label >
2016-01-14 02:04:44 +03:00
< / div >
2016-06-02 20:23:09 +03:00
< button type = "button" class = "button button-primary zip-generate-button" / > Download ZIP< / button >
< / div >
< / div >
< / script >
< script type = "text/html" id = "templates/settings/export/misc.html" >
< div class = "export-panel-misc" >
2016-07-14 12:44:03 +03:00
< div class = "export-panel-header export-info" >
2016-06-02 20:23:09 +03:00
Less usual export formats. Feedback and improvements welcome.
< / div >
< div class = "export-panel-section" >
< div style = "padding-bottom: 5px" >
2017-01-10 18:27:38 +03:00
< span class = "highlight" > Export as C File: < / span >
2016-07-14 12:44:03 +03:00
< span class = "export-info" >
2016-06-02 20:23:09 +03:00
C file with frame rendered as array.
< / span >
< / div >
< button type = "button" class = "button button-primary c-download-button" > Download C file< / button >
2016-01-14 02:04:44 +03:00
< / div >
2016-10-01 15:50:25 +03:00
< div class = "export-panel-section" >
< div style = "padding-bottom: 5px" >
2017-01-10 18:27:38 +03:00
< span class = "highlight" > Export selected frame as PNG File: < / span >
2016-10-01 15:50:25 +03:00
< span class = "export-info" >
PNG export of the currently selected frame.
< / span >
< / div >
< button type = "button" class = "button button-primary selected-frame-download-button" > Download< / button >
< / div >
2016-01-14 02:04:44 +03:00
< / div >
< / script >
< script type = "text/javascript" >
(function () {
/**
2017-05-10 02:33:22 +03:00
* See @Gruntfile.js => after build, -2017-05-10-01-32 is replaced by the build version
2016-01-14 02:04:44 +03:00
*/
2017-05-10 02:33:22 +03:00
var version = '-2017-05-10-01-32';
2016-01-14 02:04:44 +03:00
var versionHasNotBeenReplaced = version.indexOf('@@') === 0;
if (versionHasNotBeenReplaced) {
version = '';
}
2016-10-01 15:50:25 +03:00
if (!window.piskelReadyCallbacks) {
window.piskelReadyCallbacks = [];
}
window._onPiskelReady = function () {
2016-01-14 02:04:44 +03:00
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;
2016-10-01 15:50:25 +03:00
// Run Piskel ready callbacks
for (var i = 0; i < window.piskelReadyCallbacks.length ; i + + ) {
window.piskelReadyCallbacks[i]();
}
2016-01-14 02:04:44 +03:00
};
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) {
2016-10-01 15:50:25 +03:00
window._onPiskelReady();
2016-01-14 02:04:44 +03:00
} 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 < style s . 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');
2016-10-01 15:50:25 +03:00
loadScript(script, '_onPiskelReady()');
2016-01-14 02:04:44 +03:00
}
})();
< / 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 >
