mirror of
https://github.com/lospec/pixel-editor.git
synced 2023-08-10 21:12:51 +03:00
ported to static site, removed _ext folder, split hbs files into partials
This commit is contained in:
skeddles
10
views/about-popup.hbs
Normal file
10
views/about-popup.hbs
Normal file
@@ -0,0 +1,10 @@
|
||||
<div id="about">
|
||||
<button class="close-button">{{svg "x.svg" width="20" height="20"}}</button>
|
||||
<h1>About Lospec Pixel Editor</h1>
|
||||
<div>version 1.1.0</div>
|
||||
<p>This is a web-based tool for creating and editing pixel art.</p>
|
||||
<p>The goal of this tool is to be an accessible and intuitive tool that's simple enough for a first time pixel artist while still being usable enough for a veteran. </p>
|
||||
<p>In the future I hope to add enough features to become a full fledged pixel art editor, with everything an artist could need.</p>
|
||||
<h1>About Lospec</h1>
|
||||
<p>Lospec is a website created to host tools for pixel artists. To see more of our tools, visit our <a href="/">homepage</a>. To hear about any updates or new tools, follow us on <a href="http://twitter.com/lospecofficial">Twitter</a>.</p>
|
||||
</div>
|
||||
59
views/canvas-resize-popup.hbs
Normal file
59
views/canvas-resize-popup.hbs
Normal file
@@ -0,0 +1,59 @@
|
||||
<!--CANVAS RESIZE-->
|
||||
<div class="update" id = "resize-canvas">
|
||||
<button class="close-button">{{svg "x.svg" width="20" height="20"}}</button>
|
||||
<h1>Resize canvas</h1>
|
||||
|
||||
<!--PIVOTS-->
|
||||
<span id = "pivot-menu">
|
||||
<button class="pivot-button" value="topleft">{{svg "arrows/topleft.svg" width="20" height="20"}}</button>
|
||||
<button class="pivot-button" value="top">{{svg "arrows/top.svg" width="20" height="20"}}</button>
|
||||
<button class="pivot-button" value="topright">{{svg "arrows/topright.svg" width="20" height="20"}}</button>
|
||||
<button class="pivot-button" value="left">{{svg "arrows/left.svg" width="20" height="20"}}</button>
|
||||
<button class="pivot-button rc-selected-pivot" value="middle">{{svg "arrows/middle.svg" width="20" height="20"}}</button>
|
||||
<button class="pivot-button" value="right">{{svg "arrows/right.svg" width="20" height="20"}}</button>
|
||||
<button class="pivot-button" value="bottomleft">{{svg "arrows/bottomleft.svg" width="20" height="20"}}</button>
|
||||
<button class="pivot-button" value="bottom">{{svg "arrows/bottom.svg" width="20" height="20"}}</button>
|
||||
<button class="pivot-button" value="bottomright">{{svg "arrows/bottomright.svg" width="20" height="20"}}</button>
|
||||
</span>
|
||||
<!-- SIZE-->
|
||||
<span id = "rc-size-menu">
|
||||
<h2>Size</h2>
|
||||
<div>
|
||||
<span>
|
||||
Width: <input id="rc-width" type="number" default="0" step="1"
|
||||
value="{{#if border}}{{border}}{{else}}0{{/if}}" autocomplete="off"/>
|
||||
</span>
|
||||
|
||||
<span>
|
||||
Height: <input id="rc-height" default="0" step="1" type="number"
|
||||
value="{{#if border}}{{border}}{{else}}0{{/if}}" autocomplete="off"/>
|
||||
</span>
|
||||
</div>
|
||||
</span>
|
||||
<!--BORDERS-->
|
||||
<span id = "borders-menu">
|
||||
<h2>Borders offsets</h2>
|
||||
<div>
|
||||
<span>
|
||||
Left: <input id="rc-border-left" type="number" default="0" step="1"
|
||||
value="{{#if border}}{{border}}{{else}}0{{/if}}" autocomplete="off"/>
|
||||
</span>
|
||||
|
||||
<span>
|
||||
Right: <input id="rc-border-right" type="number" default="0" step="1"
|
||||
value="{{#if border}}{{border}}{{else}}0{{/if}}" autocomplete="off"/>
|
||||
</span>
|
||||
|
||||
<span>
|
||||
Top: <input id="rc-border-top" type="number" default="0" step="1"
|
||||
value="{{#if border}}{{border}}{{else}}0{{/if}}" autocomplete="off"/>
|
||||
</span>
|
||||
|
||||
<span>
|
||||
Bottom: <input id="rc-border-bottom" default="0" step="1" type="number"
|
||||
value="{{#if border}}{{border}}{{else}}0{{/if}}" autocomplete="off"/>
|
||||
</span>
|
||||
</div>
|
||||
<button id = "resize-canvas-confirm">Resize canvas</button>
|
||||
</span>
|
||||
</div>
|
||||
9
views/canvases.hbs
Normal file
9
views/canvases.hbs
Normal file
@@ -0,0 +1,9 @@
|
||||
<!-- CANVASES -->
|
||||
<div id="canvas-view">
|
||||
<canvas id="vfx-canvas" class = "drawingCanvas"></canvas>
|
||||
<canvas id = "tmp-canvas" class = "drawingCanvas"></canvas>
|
||||
<canvas id="pixel-canvas" class = "drawingCanvas"></canvas>
|
||||
<canvas id="checkerboard" class = "drawingCanvas"></canvas>
|
||||
<canvas id="pixel-grid" class = "drawingCanvas"></canvas>
|
||||
</div>
|
||||
<div id="canvas-view-shadow"></div>
|
||||
11
views/changelog-popup.hbs
Normal file
11
views/changelog-popup.hbs
Normal file
@@ -0,0 +1,11 @@
|
||||
<div id="changelog">
|
||||
<button class="close-button">{{svg "x.svg" width="20" height="20"}}</button>
|
||||
|
||||
<h1>Changelog</h1>
|
||||
{{#each changelog}}
|
||||
<h2>Version {{@key}}</h2>
|
||||
<ul>{{#each this}}
|
||||
<li>{{change}} <span class="weak">- {{author}}</span></li>
|
||||
{{/each}}</ul>
|
||||
{{/each}}
|
||||
</div>
|
||||
14
views/colors-menu.hbs
Normal file
14
views/colors-menu.hbs
Normal file
@@ -0,0 +1,14 @@
|
||||
<ul id="colors-menu">
|
||||
<li class="noshrink"><button title="Add Current Color To Palette" id="add-color-button">{{svg "./plus.svg" width="30" height="30"}}</button></li>
|
||||
</ul>
|
||||
|
||||
<div class="jscolor-picker-bottom">
|
||||
<span>#</span><input type="text" id="jscolor-hex-input" />
|
||||
<div id="duplicate-color-warning" title="Color is a duplicate of another in palette">{{svg "warning.svg" width="14"
|
||||
height="12" }}</div>
|
||||
<button class="delete-color-button">{{svg "trash.svg" width="20" height="20" }}</button>
|
||||
</div>
|
||||
|
||||
<div class="color-edit-button">
|
||||
{{svg "adjust.svg" width="20" height="20" }}
|
||||
</div>
|
||||
15
views/compatibility-warning.hbs
Normal file
15
views/compatibility-warning.hbs
Normal file
@@ -0,0 +1,15 @@
|
||||
<div id="compatibility-warning">
|
||||
<div>
|
||||
<div>
|
||||
<p><strong>Warning: a modern, desktop, web browser is required to use this tool.</strong></p>
|
||||
<p>We detected that you may have an out of date or unsupported web browser. This tool, like many others on
|
||||
this site and across the web uses features only available in new web browsers. We reccommend updating
|
||||
your current browser or downloading <a href="https://www.mozilla.org/en-US/firefox/new/"
|
||||
target="_blank">Firefox</a> or <a href="https://www.google.com/chrome/browser/desktop/index.html"
|
||||
target="_blank">Chrome</a>. </p>
|
||||
<button onclick="closeCompatibilityWarning()">Continue</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bowser@2.11.0/es5.min.js"></script>
|
||||
<script src="/pixel-editor/checkCompatibilityPixelEditor.js"></script>
|
||||
10
views/credits-popup.hbs
Normal file
10
views/credits-popup.hbs
Normal file
@@ -0,0 +1,10 @@
|
||||
<div id="credits">
|
||||
<button class="close-button">{{svg "x.svg" width="20" height="20"}}</button>
|
||||
<h1>Credits</h1>
|
||||
<h2>Icons</h2>
|
||||
<ul>
|
||||
<li><div>Icons made by <a href="http://www.freepik.com" title="Freepik">Freepik</a> from <a href="http://www.flaticon.com" title="Flaticon">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></div></li>
|
||||
<li><div>Font Awesome by Dave Gandy - <a href="http://fontawesome.io">http://fontawesome.io</a></div></li>
|
||||
<li><div>Icons made by <a href="http://www.flaticon.com/authors/those-icons" title="Those Icons">Those Icons</a> from <a href="http://www.flaticon.com" title="Flaticon">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></div></li>
|
||||
</ul>
|
||||
</div>
|
||||
0
views/data-asdfgasd.hbs
Normal file
0
views/data-asdfgasd.hbs
Normal file
44
views/help-popup.hbs
Normal file
44
views/help-popup.hbs
Normal file
@@ -0,0 +1,44 @@
|
||||
<div id="help">
|
||||
<button class="close-button">{{svg "x.svg" width="20" height="20"}}</button>
|
||||
<h1>Help</h1>
|
||||
<h2>Palette</h2>
|
||||
<ul>
|
||||
<li>Left Click - Choose Color</li>
|
||||
<li>Right Click - Edit Color</li>
|
||||
</ul>
|
||||
<h2>Hotkeys</h2>
|
||||
<ul>
|
||||
<li><strong>Pencil:</strong> <span class="keyboard-key">B</span> or <span class="keyboard-key">1</span></li>
|
||||
<li><strong>Eraser:</strong> <span class="keyboard-key">R</span></li>
|
||||
<li><strong>Rectangle:</strong> <span class="keyboard-key">U</span></li>
|
||||
<li><strong>Line:</strong> <span class="keyboard-key">L</span></li>
|
||||
<li><strong>Fill:</strong> <span class="keyboard-key">F</span> or <span class="keyboard-key">2</span></li>
|
||||
<li><strong>Eyedropper:</strong> <span class="keyboard-key">E</span> or <span class="keyboard-key">3</span></li>
|
||||
<li><strong>Pan:</strong> <span class="keyboard-key">P</span> or <span class="keyboard-key">M</span> or <span class="keyboard-key">4</span></li>
|
||||
<li><strong>Zoom:</strong> <span class="keyboard-key">Z</span> or <span class="keyboard-key">5</span></li>
|
||||
<li><strong>Undo:</strong> Ctrl + <span class="keyboard-key">Z</span></li>
|
||||
<li><strong>Redo:</strong> Ctrl + <span class="keyboard-key">Y</span> or Ctrl + Alt + <span class="keyboard-key">Z</span></li>
|
||||
<li><strong>Rectangular selection:</strong> <span class="keyboard-key">M</span></li>
|
||||
</ul>
|
||||
<h2>Mouse Shortcuts</h2>
|
||||
<ul>
|
||||
<li><strong>Eyedropper: </strong>Alt + Click</li>
|
||||
<li><strong>Pan: </strong>Space + Click</li>
|
||||
<li><strong>Zoom: </strong>Alt + Scroll Wheel</li>
|
||||
</ul>
|
||||
<h2>Layers</h2>
|
||||
<ul>
|
||||
<li>{{svg "visible.svg" width="15" height="15" class = "default-icon"}}: show / hide layer</li>
|
||||
<li>{{svg "lockedpadlock.svg" width="15" height="15" class = "default-icon"}}: lock / unlock layer, when a layer is locked it's not possible to draw on it</li>
|
||||
<li>Right click on a layer to open the <strong>menu</strong>:
|
||||
<ul>
|
||||
<li><strong>Rename:</strong> change the name of the layer</li>
|
||||
<li><strong>Duplicate:</strong> duplicate the layer</li>
|
||||
<li><strong>Delete:</strong> delete the layer (doesn't work if there's only one layer)</li>
|
||||
<li><strong>Merge below:</strong> merges the selected the layer with the one below it</li>
|
||||
<li><strong>Flatten visible:</strong> merges all the visible layers</li>
|
||||
<li></strong>Flatten all:</strong> merges all the layers</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
7
views/holders.hbs
Normal file
7
views/holders.hbs
Normal file
@@ -0,0 +1,7 @@
|
||||
<div id="data-holders">
|
||||
<a id="save-image-link-holder" href="#">dl</a>
|
||||
<a id="save-project-link-holder" href="#">dl</a>
|
||||
<input id="open-image-browse-holder" type="file" accept="image/png, image/gif, .lpe" />
|
||||
<input id="load-palette-browse-holder" type="file" accept="image/png, image/gif" />
|
||||
<canvas id="load-palette-canvas-holder"></canvas>
|
||||
</div>
|
||||
656
views/index.hbs
656
views/index.hbs
@@ -6,651 +6,39 @@
|
||||
<title>{{title}}</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,700,900" rel="stylesheet">
|
||||
<link rel='stylesheet' href='pixel-editor.css' />
|
||||
<link rel="stylesheet" href="/pixel-editor/pixel-editor.css" />
|
||||
<meta name="ROBOTS" content="NOINDEX, NOFOLLOW">
|
||||
{{{google-analytics}}}
|
||||
{{{favicons}}}
|
||||
</head>
|
||||
|
||||
<body oncontextmenu="return false;">
|
||||
<div id="compatibility-warning">
|
||||
<div><div>
|
||||
<p><strong>Warning: a modern, desktop, web browser is required to use this tool.</strong></p>
|
||||
<p>We detected that you may have an out of date or unsupported web browser. This tool, like many others on this site and across the web uses features only available in new web browsers. We reccommend updating your current browser or downloading <a href="https://www.mozilla.org/en-US/firefox/new/" target="_blank">Firefox</a> or <a href="https://www.google.com/chrome/browser/desktop/index.html" target="_blank">Chrome</a>. </p>
|
||||
<button onclick="closeCompatibilityWarning()">Continue</button>
|
||||
</div></div>
|
||||
</div>
|
||||
<script src="/javascripts/checkCompatibilityPixelEditor.js"></script>
|
||||
{{> compatibility-warning}}
|
||||
{{> preload}}
|
||||
|
||||
<div class="preload">
|
||||
<img src="dropdown-arrow.png" />
|
||||
<img src="dropdown-arrow-hover.png" />
|
||||
<img src="eyedropper.png" />
|
||||
<img src="fill.png" />
|
||||
<img src="pan.png" />
|
||||
<img src="pan-held.png" />
|
||||
<img src="pencil.png" />
|
||||
<img src="zoom-in.png" />
|
||||
<img src = "eraser.png"/>
|
||||
<img src = "rectselect.png"/>
|
||||
<!-- TODO: [ELLIPSE] Where is this icon used? Do we need similar one for ellipsis? -->
|
||||
<img src= "rectangle.png">
|
||||
</div>
|
||||
|
||||
<ul id="main-menu">
|
||||
<li class="logo">Lospec Pixel Editor</li>
|
||||
<li>
|
||||
<button>File</button>
|
||||
<ul>
|
||||
<li><button>New</button></li>
|
||||
<li><button>Save project</button></li>
|
||||
<li><button>Open</button></li>
|
||||
<li><button id="export-button" class="disabled">Export</button></li>
|
||||
<li><a href="/pixel-editor">Exit</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<button>Edit</button>
|
||||
<ul>
|
||||
<li><button id="resize-canvas-button" onclick = "openResizeCanvasWindow()">Resize canvas</button></li>
|
||||
<li><button id="resize-sprite-button" onclick = "openResizeSpriteWindow()">Scale sprite</button></li>
|
||||
<li><button onclick = "trimCanvas()">Trim canvas</button></li>
|
||||
<li><button id="undo-button" class="disabled">Undo</button></li>
|
||||
<li><button id="redo-button" class="disabled">Redo</button></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<button>View</button>
|
||||
<ul>
|
||||
<li><button id="toggle-pixelgrid-button" onclick="togglePixelGrid()">Show pixel grid</button></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<button id = "layer-button">Layer</button>
|
||||
<ul>
|
||||
<li><button onclick = "addLayer()">New layer</button></li>
|
||||
<li><button onclick = "duplicateLayer()">Duplicate</button></li>
|
||||
<li><button onclick = "renameLayer()">Rename</button></li>
|
||||
<li><button onclick = "deleteLayer()">Delete</button></li>
|
||||
<li><button onclick = "merge()">Merge below</button></li>
|
||||
<li><button onclick = "flatten(false)">Flatten all</button></li>
|
||||
<li><button onclick = "flatten(true)">Flatten visible</button></li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<button>Selection</button>
|
||||
<ul>
|
||||
<li><button id="copy-button">Copy</button></li>
|
||||
<li><button id="cut-button">Cut</button></li>
|
||||
<li><button id="paste-button">Paste</button></li>
|
||||
<li><button id="cancelSelection-button">Cancel</button></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<button>Editor</button>
|
||||
<ul>
|
||||
<li><button id="switch-mode-button">Switch to basic mode</button></li>
|
||||
<li><button onclick="showDialogue('splash', false)">Splash page</button></li>
|
||||
<li><button>Settings</button></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<button>Help</button>
|
||||
<ul>
|
||||
<li><button>Help</button></li>
|
||||
<li><button>About</button></li>
|
||||
<li><button>Changelog</button></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul id="tools-menu">
|
||||
<li class="selected expanded">
|
||||
<button title="Pencil Tool (B)" id="pencil-button">{{svg "pencil.svg" width="32" height="32"}}</button>
|
||||
<button title="Increase Brush Size" id="pencil-bigger-button" class="tools-menu-sub-button">{{svg "plus.svg" width="12" height="12"}}</button>
|
||||
<button title="Decrease Brush Size" id="pencil-smaller-button" class="tools-menu-sub-button">{{svg "minus.svg" width="12" height="12"}}</button>
|
||||
</li>
|
||||
|
||||
<li class = "expanded">
|
||||
<button title="Eraser tool (R)" id="eraser-button">{{svg "eraser.svg" width="32" height="32"}}</button>
|
||||
<button title="Increase Eraser Size" id="eraser-bigger-button" class="tools-menu-sub-button">{{svg "plus.svg" width="12" height="12"}}</button>
|
||||
<button title="Decrease Eraser Size" id="eraser-smaller-button" class="tools-menu-sub-button">{{svg "minus.svg" width="12" height="12"}}</button>
|
||||
</li>
|
||||
|
||||
<li class="expanded">
|
||||
<button title="Rectangle Tool (U)" id="rectangle-button">{{svg "rectangle.svg" width="32" height="32" id = "rectangle-empty-button-svg"}}
|
||||
{{svg "fullrect.svg" width="32" height="32" id = "rectangle-full-button-svg" display = "none"}}</button>
|
||||
<button title="Increase Rectangle Size" id="rectangle-bigger-button" class="tools-menu-sub-button">{{svg "plus.svg" width="12" height="12"}}</button>
|
||||
<button title="Decrease Rectangle Size" id="rectangle-smaller-button" class="tools-menu-sub-button">{{svg "minus.svg" width="12" height="12"}}</button>
|
||||
</li>
|
||||
|
||||
<!-- TODO: [ELLIPSE] Once ellipse is ready for release make it visible by default -->
|
||||
<li class="expanded" id="tools-menu--ellipse" style="display: none">
|
||||
<!-- TODO: [ELLIPSE] Decide on a shortcut to use. "S" was chosen without any in-team consultation. -->
|
||||
<!-- TODO: [ELLIPSE] Decide on icons to use. Current ones are quickly prepared drafts and display with incorrect color. -->
|
||||
<button title="Ellipse Tool (S)" id="ellipse-button">
|
||||
{{svg "ellipse.svg" width="32" height="32" id = "ellipse-empty-button-svg"}}
|
||||
{{svg "filledellipse.svg" width="32" height="32" id = "ellipse-full-button-svg" display = "none"}}
|
||||
</button>
|
||||
<button title="Increase Ellipse Size" id="ellipse-bigger-button" class="tools-menu-sub-button">{{svg "plus.svg" width="12" height="12"}}</button>
|
||||
<button title="Decrease Ellipse Size" id="ellipse-smaller-button" class="tools-menu-sub-button">{{svg "minus.svg" width="12" height="12"}}</button>
|
||||
</li>
|
||||
|
||||
<li class="expanded">
|
||||
<button title="Line Tool (L)" id="line-button">{{svg "line.svg" width="32" height="32"}}</button>
|
||||
<button title="Increase Line Size" id="line-bigger-button" class="tools-menu-sub-button">{{svg "plus.svg" width="12" height="12"}}</button>
|
||||
<button title="Decrease Line Size" id="line-smaller-button" class="tools-menu-sub-button">{{svg "minus.svg" width="12" height="12"}}</button>
|
||||
</li>
|
||||
|
||||
<li><button title="Fill Tool (F)" id="fill-button">{{svg "fill.svg" width="32" height="32"}}</button></li>
|
||||
|
||||
<li><button title="Eyedropper Tool (E)" id="eyedropper-button">{{svg "eyedropper.svg" width="32" height="32"}}</button></li>
|
||||
|
||||
<li><button title="Pan Tool (P)" id="pan-button">{{svg "pan.svg" width="32" height="32"}}</button></li>
|
||||
|
||||
<li><button title = "Rectangular Selection Tool (M)" id = "rectselect-button">{{svg "rectselect.svg" width = "32" height = "32"}}</button><li>
|
||||
</ul>
|
||||
|
||||
<ul id="colors-menu">
|
||||
<li class="noshrink"><button title="Add Current Color To Palette" id="add-color-button">{{svg "./plus.svg" width="30" height="30"}}</button></li>
|
||||
</ul>
|
||||
|
||||
<!-- LAYER MENU -->
|
||||
<ul id = "layers-menu">
|
||||
<li class = "layers-menu-entry selected-layer">
|
||||
<canvas class = "preview-canvas"></canvas>
|
||||
<ul class="layer-buttons">
|
||||
<li class = "layer-button">
|
||||
<button title="Lock layer" class="lock-layer-button">
|
||||
{{svg "unlockedpadlock.svg" width="15" height="15" class = "default-icon"}}
|
||||
{{svg "lockedpadlock.svg" width="15" height="15" class = "edited-icon" display = "none"}}
|
||||
</button>
|
||||
</li>
|
||||
<li class = "layer-button">
|
||||
<button title="Show / hide layer" class="hide-layer-button">
|
||||
{{svg "visible.svg" width="15" height="15" class = "default-icon"}}
|
||||
{{svg "invisible.svg" width="15" height="15" class = "edited-icon" display = "none"}}
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>Layer 0<div class = "gradient"></div></p>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<button id = "add-layer-button">
|
||||
{{svg "plus.svg" width="20" height="20"}} Add layer
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul id = "layer-properties-menu">
|
||||
<li>
|
||||
<button onclick = "renameLayer()">Rename</button>
|
||||
</li>
|
||||
<li>
|
||||
<button onclick = "duplicateLayer()">Duplicate</button>
|
||||
</li>
|
||||
<li>
|
||||
<button onclick = "deleteLayer()">Delete</button>
|
||||
</li>
|
||||
<li>
|
||||
<button onclick = "merge()">Merge below</button>
|
||||
</li>
|
||||
<li>
|
||||
<button onclick = "flatten(true)">Flatten visible</button>
|
||||
</li>
|
||||
<li>
|
||||
<button onclick = "flatten(false)">Flatten all</button>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!-- TOOL PREVIEWS -->
|
||||
<div id="eyedropper-preview"></div>
|
||||
<div id="brush-preview"></div>
|
||||
|
||||
<!-- CANVASES -->
|
||||
<div id="canvas-view">
|
||||
<canvas id="vfx-canvas" class = "drawingCanvas"></canvas>
|
||||
<canvas id = "tmp-canvas" class = "drawingCanvas"></canvas>
|
||||
<canvas id="pixel-canvas" class = "drawingCanvas"></canvas>
|
||||
<canvas id="checkerboard" class = "drawingCanvas"></canvas>
|
||||
<canvas id="pixel-grid" class = "drawingCanvas"></canvas>
|
||||
</div>
|
||||
<div id="canvas-view-shadow"></div>
|
||||
|
||||
<div id="data-holders">
|
||||
<a id="save-image-link-holder" href="#">dl</a>
|
||||
<a id="save-project-link-holder" href="#">dl</a>
|
||||
<input id="open-image-browse-holder" type="file" accept="image/png, image/gif, .lpe"/>
|
||||
<input id="load-palette-browse-holder" type="file" accept="image/png, image/gif"/>
|
||||
<canvas id="load-palette-canvas-holder"></canvas>
|
||||
</div>
|
||||
|
||||
<div class="jscolor-picker-bottom">
|
||||
<span>#</span><input type="text" id="jscolor-hex-input"/>
|
||||
<div id="duplicate-color-warning" title="Color is a duplicate of another in palette">{{svg "warning.svg" width="14" height="12" }}</div>
|
||||
<button class="delete-color-button">{{svg "trash.svg" width="20" height="20" }}</button>
|
||||
</div>
|
||||
|
||||
<div class="color-edit-button">
|
||||
{{svg "adjust.svg" width="20" height="20" }}
|
||||
</div>
|
||||
{{> main-menu}}
|
||||
{{> tools-menu}}
|
||||
{{> colors-menu}}
|
||||
{{> layers-menu}}
|
||||
|
||||
{{> tool-previews}}
|
||||
{{> canvases}}
|
||||
{{> holders}}
|
||||
|
||||
<div id="pop-up-container">
|
||||
<!-- NEW PIXEL -->
|
||||
<div id="new-pixel" class="update">
|
||||
<button class="close-button">{{svg "x.svg" width="20" height="20"}}</button>
|
||||
<h1>New Pixel</h1>
|
||||
|
||||
<!-- Editor mode-->
|
||||
<h2>Editor mode</h2>
|
||||
<button id = "editor-mode-button" class = "dropdown-button">Choose a mode...</button>
|
||||
<div id = "editor-mode-menu" class = "dropdown-menu"></div>
|
||||
<input id="editor-mode" value="{{#if mode}}{{mode}}{{else}}'Advanced'{{/if}}" autocomplete="off" />
|
||||
<p id = "editor-mode-info"></p>
|
||||
|
||||
<!-- Preset-->
|
||||
<h2>Preset</h2>
|
||||
<button id="preset-button" class="dropdown-button">Choose a preset...</button>
|
||||
<div id="preset-menu" class="dropdown-menu"></div>
|
||||
|
||||
<h2>Size</h2>
|
||||
<input id="size-width" value="{{#if width}}{{width}}{{else}}64{{/if}}" autocomplete="off" />{{svg "x.svg" width="16" height="16" class="dimentions-x"}}<input id="size-height" value="{{#if height}}{{height}}{{else}}64{{/if}}" autocomplete="off" />
|
||||
<h2>Palette</h2>
|
||||
<button id="palette-button" class="dropdown-button">Choose a palette...</button>
|
||||
<div id="palette-menu" class="dropdown-menu"><button id="no-palette-button">Empty Palette</button><button id="load-palette-button">Load palette...</button></div>
|
||||
|
||||
<div id="new-pixel-warning">Creating a new pixel will discard your current one.</div>
|
||||
<div>
|
||||
<button id="create-button" class="default">Create</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Splash page -->
|
||||
<div id = "splash">
|
||||
<div id="splash-news">
|
||||
<div id="latest-update">
|
||||
<h1>Latest updates</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="splash-input">
|
||||
<div id="editor-logo">
|
||||
<div id="black">
|
||||
<div id="sp-coverdata">
|
||||
<img src="https://lospec.com/brand/lospec_logo_3x.png"/> pixel editor
|
||||
<p>Version 1.4.0</p>
|
||||
<a href="https://cdn.discordapp.com/attachments/506277390050131978/795660870221955082/final.png">Art by Unsettled</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="splash-menu">
|
||||
<div id="sp-newpixel">
|
||||
<h1>New Custom Pixel</h1>
|
||||
<!-- Editor mode-->
|
||||
<h2>Editor mode</h2>
|
||||
<div class="sp-np-entry" id="sp-mode-palette">
|
||||
<div class="button-menu">
|
||||
<div class="bm-left" onclick="splashMode(event,'Basic')"><p>Basic</p></div>
|
||||
<div class="sp-interface-selected bm-right" onclick="splashMode(event,'Advanced')"><p>Advanced</p></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>Size</h2>
|
||||
<div class="sp-np-entry">
|
||||
<input id="size-width-splash" value="{{#if width}}{{width}}{{else}}64{{/if}}" autocomplete="off" />{{svg "x.svg" width="16" height="16" class="dimentions-x"}}<input id="size-height-splash" value="{{#if height}}{{height}}{{else}}64{{/if}}" autocomplete="off" />
|
||||
</div>
|
||||
|
||||
<h2>Palette</h2>
|
||||
<button id="palette-button-splash" class="dropdown-button">Choose a palette...</button>
|
||||
<div id="palette-menu-splash" class="dropdown-menu"><button id="load-palette-button-splash">Load palette...</button></div>
|
||||
|
||||
<div id="new-pixel-warning">Creating a new pixel will discard your current one.</div>
|
||||
<div class="sp-np-entry">
|
||||
<button id="create-button-splash" class="default">Create</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id = "sp-quickstart-container">
|
||||
<div id="sp-quickstart-title">
|
||||
Quickstart
|
||||
</div>
|
||||
|
||||
<div id="sp-quickstart">
|
||||
<div class="sp-template" onclick="document.getElementById('open-image-browse-holder').click()"><p>Load</p></div>
|
||||
<div class="sp-template" onclick="newFromTemplate('Gameboy Color')"><p><span>New</span> Gameboy</p></div>
|
||||
<div class="sp-template" onclick="newFromTemplate('Commodore 64')"><p><span>New</span> C64</p></div>
|
||||
<div class="sp-template" onclick="newFromTemplate('PICO-8')"><p><span>New</span> Pico8</p></div>
|
||||
<div class="sp-template" onclick="newFromTemplate('',16,16)"><p><span>New</span> 16x16</p></div>
|
||||
<div class="sp-template" onclick="newFromTemplate('',32,32)"><p><span>New</span> 32x32</p></div>
|
||||
<div class="sp-template" onclick="newFromTemplate('',64,64)"><p><span>New</span> 64x64</p></div>
|
||||
<div class="sp-template" onclick="newFromTemplate('',128,128)"><p><span>New</span> 128x128</p></div>
|
||||
<div class="sp-template" onclick="newFromTemplate('',256,256)"><p><span>New</span> 256x256</p></div>
|
||||
<div class="sp-template" onclick="newFromTemplate('',512,512)"><p><span>New</span> 512x512</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--SPRITE RESIZE-->
|
||||
<div class="update" id = "resize-sprite">
|
||||
<button class="close-button">{{svg "x.svg" width="20" height="20"}}</button>
|
||||
<h1>Scale sprite</h1>
|
||||
<!-- SIZE-->
|
||||
<h2>New size</h2>
|
||||
<span id = "rs-size-menu">
|
||||
<div>
|
||||
<span>
|
||||
Width: <input id="rs-width" type="number" default="0" step="1"
|
||||
value="{{#if border}}{{border}}{{else}}0{{/if}}" autocomplete="off"/>
|
||||
</span>
|
||||
|
||||
<span>
|
||||
Height: <input id="rs-height" default="0" step="1" type="number"
|
||||
value="{{#if border}}{{border}}{{else}}0{{/if}}" autocomplete="off"/>
|
||||
</span>
|
||||
</div>
|
||||
</span>
|
||||
<!--BORDERS-->
|
||||
<h2>Resize percentages</h2>
|
||||
<span id = "rs-percentage-menu">
|
||||
<div>
|
||||
<span>
|
||||
Width <input id="rs-width-percentage" type="number" default="0" step="1"
|
||||
value="{{#if border}}{{border}}{{else}}0{{/if}}" autocomplete="off"/> %
|
||||
</span>
|
||||
|
||||
<span>
|
||||
Height <input id="rs-height-percentage" type="number" default="0" step="1"
|
||||
value="{{#if border}}{{border}}{{else}}0{{/if}}" autocomplete="off"/> %
|
||||
</span>
|
||||
</div>
|
||||
<div id = "rs-ratio-div">
|
||||
<span>
|
||||
Keep current ratio <input type = "checkbox" id = "rs-keep-ratio"/>
|
||||
</span>
|
||||
<span>
|
||||
Scaling algorithm:
|
||||
<select name = "resize-algorithm" id = "resize-algorithm-combobox">
|
||||
<option value = "nearest-neighbor">Nearest neighbour</option>
|
||||
<option value = "bilinear-interpolation">Bilinear</option>
|
||||
</select>
|
||||
</span>
|
||||
</br>
|
||||
<button id = "resize-sprite-confirm">Scale sprite</button>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!--CANVAS RESIZE-->
|
||||
<div class="update" id = "resize-canvas">
|
||||
<button class="close-button">{{svg "x.svg" width="20" height="20"}}</button>
|
||||
<h1>Resize canvas</h1>
|
||||
|
||||
<!--PIVOTS-->
|
||||
<span id = "pivot-menu">
|
||||
<button class="pivot-button" value="topleft">{{svg "arrows/topleft.svg" width="20" height="20"}}</button>
|
||||
<button class="pivot-button" value="top">{{svg "arrows/top.svg" width="20" height="20"}}</button>
|
||||
<button class="pivot-button" value="topright">{{svg "arrows/topright.svg" width="20" height="20"}}</button>
|
||||
<button class="pivot-button" value="left">{{svg "arrows/left.svg" width="20" height="20"}}</button>
|
||||
<button class="pivot-button rc-selected-pivot" value="middle">{{svg "arrows/middle.svg" width="20" height="20"}}</button>
|
||||
<button class="pivot-button" value="right">{{svg "arrows/right.svg" width="20" height="20"}}</button>
|
||||
<button class="pivot-button" value="bottomleft">{{svg "arrows/bottomleft.svg" width="20" height="20"}}</button>
|
||||
<button class="pivot-button" value="bottom">{{svg "arrows/bottom.svg" width="20" height="20"}}</button>
|
||||
<button class="pivot-button" value="bottomright">{{svg "arrows/bottomright.svg" width="20" height="20"}}</button>
|
||||
</span>
|
||||
<!-- SIZE-->
|
||||
<span id = "rc-size-menu">
|
||||
<h2>Size</h2>
|
||||
<div>
|
||||
<span>
|
||||
Width: <input id="rc-width" type="number" default="0" step="1"
|
||||
value="{{#if border}}{{border}}{{else}}0{{/if}}" autocomplete="off"/>
|
||||
</span>
|
||||
|
||||
<span>
|
||||
Height: <input id="rc-height" default="0" step="1" type="number"
|
||||
value="{{#if border}}{{border}}{{else}}0{{/if}}" autocomplete="off"/>
|
||||
</span>
|
||||
</div>
|
||||
</span>
|
||||
<!--BORDERS-->
|
||||
<span id = "borders-menu">
|
||||
<h2>Borders offsets</h2>
|
||||
<div>
|
||||
<span>
|
||||
Left: <input id="rc-border-left" type="number" default="0" step="1"
|
||||
value="{{#if border}}{{border}}{{else}}0{{/if}}" autocomplete="off"/>
|
||||
</span>
|
||||
|
||||
<span>
|
||||
Right: <input id="rc-border-right" type="number" default="0" step="1"
|
||||
value="{{#if border}}{{border}}{{else}}0{{/if}}" autocomplete="off"/>
|
||||
</span>
|
||||
|
||||
<span>
|
||||
Top: <input id="rc-border-top" type="number" default="0" step="1"
|
||||
value="{{#if border}}{{border}}{{else}}0{{/if}}" autocomplete="off"/>
|
||||
</span>
|
||||
|
||||
<span>
|
||||
Bottom: <input id="rc-border-bottom" default="0" step="1" type="number"
|
||||
value="{{#if border}}{{border}}{{else}}0{{/if}}" autocomplete="off"/>
|
||||
</span>
|
||||
</div>
|
||||
<button id = "resize-canvas-confirm">Resize canvas</button>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- PALETTE -->
|
||||
<div id = "palette-block">
|
||||
<button class="close-button">{{svg "x.svg" width="20" height="20"}}</button>
|
||||
|
||||
<h1>Edit palette</h1>
|
||||
|
||||
<div id = "colour-picker">
|
||||
<div id = "cp-modes">
|
||||
<button id="cp-rgb" class="cp-selected-mode" onclick="changePickerMode(this, 'rgb')">RGB</button>
|
||||
<button id="cp-hsv" onclick="changePickerMode(this, 'hsv')">HSV</button>
|
||||
<button id="cp-hsl" onclick="changePickerMode(this, 'hsl')">HSL</button>
|
||||
|
||||
<div id="cp-colour-preview" class="cp-colour-preview"></div>
|
||||
<input id="cp-hex" type="text" value="#123456" onchange="hexUpdated()"/>
|
||||
</div>
|
||||
|
||||
<div id = "sliders-container">
|
||||
<div class = "cp-slider-entry">
|
||||
<label for = "first-slider">R</label>
|
||||
<input type="range" min="0" max="255" class="colour-picker-slider" id="first-slider" onmousemove="updateSliderValue(1)" onclick="updateSliderValue(1)"/>
|
||||
<input type = "text" value = "128" onchange="inputChanged(this,1)"/>
|
||||
</div>
|
||||
|
||||
<div class = "cp-slider-entry">
|
||||
<label for = "second-slider">G</label>
|
||||
<input type="range" min="0" max ="255" class="colour-picker-slider" id="second-slider" onmousemove="updateSliderValue(2)" onclick="updateSliderValue(2)"/>
|
||||
<input type = "text" value = "128" onchange="inputChanged(this,2)"/>
|
||||
</div>
|
||||
|
||||
<div class = "cp-slider-entry">
|
||||
<label for = "third-slider">B</label>
|
||||
<input type="range" min = "0" max = "255" class = "colour-picker-slider" id = "third-slider" onmousemove="updateSliderValue(3)" onclick="updateSliderValue(3)"/>
|
||||
<input type = "text" value = "128" onchange="inputChanged(this,3)"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id = "cp-minipicker">
|
||||
<input type = "range" min = "0" max = "100" id = "cp-minipicker-slider" onmousemove="miniSliderInput(event)" onclick="miniSliderInput(event)"/>
|
||||
<div id="cp-canvas-container" onmousemove="movePickerIcon(event)">
|
||||
<canvas id = "cp-spectrum"></canvas>
|
||||
<div id="cp-active-icon" class="cp-picker-icon"></div>
|
||||
</div>
|
||||
|
||||
<div id = "cp-colours-previews">
|
||||
<div class = "cp-colour-preview">
|
||||
#123456
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id = "cp-colour-picking-modes">
|
||||
<button class="cp-selected-mode" onclick="changePickingMode(event,'mono')">Mono</button>
|
||||
<button onclick="changePickingMode(event,'analog')">Nlgs</button>
|
||||
<button onclick="changePickingMode(event,'cmpt')">Cmpt</button>
|
||||
<button onclick="changePickingMode(event,'tri')">Tri</button>
|
||||
<button onclick="changePickingMode(event,'scmpt')">Scm</button>
|
||||
<button onclick="changePickingMode(event,'tetra')">Tetra</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id = "palette-container">
|
||||
<ul id = "palette-list">
|
||||
<li style = "background-color:rgb(255,0,0);width:40px;height:40px;" onmousedown="startRampSelection(event)"
|
||||
onmousemove="updateRampSelection(event)" onmouseup="endRampSelection(event)"></li>
|
||||
<li style = "background-color:rgb(0,255,0);width:40px;height:40px;"onmousedown="startRampSelection(event)"
|
||||
onmousemove="updateRampSelection(event)" onmouseup="endRampSelection(event)"></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div id="pb-options">
|
||||
<button title="Add colours to palette" onclick="pbAddColours()">Add colours</button>
|
||||
<button title="Remove colours from palette" onclick="pbRemoveColours()">Remove colours</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="help">
|
||||
<button class="close-button">{{svg "x.svg" width="20" height="20"}}</button>
|
||||
<h1>Help</h1>
|
||||
<h2>Palette</h2>
|
||||
<ul>
|
||||
<li>Left Click - Choose Color</li>
|
||||
<li>Right Click - Edit Color</li>
|
||||
</ul>
|
||||
<h2>Hotkeys</h2>
|
||||
<ul>
|
||||
<li><strong>Pencil:</strong> <span class="keyboard-key">B</span> or <span class="keyboard-key">1</span></li>
|
||||
<li><strong>Eraser:</strong> <span class="keyboard-key">R</span></li>
|
||||
<li><strong>Rectangle:</strong> <span class="keyboard-key">U</span></li>
|
||||
<li><strong>Line:</strong> <span class="keyboard-key">L</span></li>
|
||||
<li><strong>Fill:</strong> <span class="keyboard-key">F</span> or <span class="keyboard-key">2</span></li>
|
||||
<li><strong>Eyedropper:</strong> <span class="keyboard-key">E</span> or <span class="keyboard-key">3</span></li>
|
||||
<li><strong>Pan:</strong> <span class="keyboard-key">P</span> or <span class="keyboard-key">M</span> or <span class="keyboard-key">4</span></li>
|
||||
<li><strong>Zoom:</strong> <span class="keyboard-key">Z</span> or <span class="keyboard-key">5</span></li>
|
||||
<li><strong>Undo:</strong> Ctrl + <span class="keyboard-key">Z</span></li>
|
||||
<li><strong>Redo:</strong> Ctrl + <span class="keyboard-key">Y</span> or Ctrl + Alt + <span class="keyboard-key">Z</span></li>
|
||||
<li><strong>Rectangular selection:</strong> <span class="keyboard-key">M</span></li>
|
||||
</ul>
|
||||
<h2>Mouse Shortcuts</h2>
|
||||
<ul>
|
||||
<li><strong>Eyedropper: </strong>Alt + Click</li>
|
||||
<li><strong>Pan: </strong>Space + Click</li>
|
||||
<li><strong>Zoom: </strong>Alt + Scroll Wheel</li>
|
||||
</ul>
|
||||
<h2>Layers</h2>
|
||||
<ul>
|
||||
<li>{{svg "visible.svg" width="15" height="15" class = "default-icon"}}: show / hide layer</li>
|
||||
<li>{{svg "lockedpadlock.svg" width="15" height="15" class = "default-icon"}}: lock / unlock layer, when a layer is locked it's not possible to draw on it</li>
|
||||
<li>Right click on a layer to open the <strong>menu</strong>:
|
||||
<ul>
|
||||
<li><strong>Rename:</strong> change the name of the layer</li>
|
||||
<li><strong>Duplicate:</strong> duplicate the layer</li>
|
||||
<li><strong>Delete:</strong> delete the layer (doesn't work if there's only one layer)</li>
|
||||
<li><strong>Merge below:</strong> merges the selected the layer with the one below it</li>
|
||||
<li><strong>Flatten visible:</strong> merges all the visible layers</li>
|
||||
<li></strong>Flatten all:</strong> merges all the layers</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="about">
|
||||
<button class="close-button">{{svg "x.svg" width="20" height="20"}}</button>
|
||||
<h1>About Lospec Pixel Editor</h1>
|
||||
<div>version 1.1.0</div>
|
||||
<p>This is a web-based tool for creating and editing pixel art.</p>
|
||||
<p>The goal of this tool is to be an accessible and intuitive tool that's simple enough for a first time pixel artist while still being usable enough for a veteran. </p>
|
||||
<p>In the future I hope to add enough features to become a full fledged pixel art editor, with everything an artist could need.</p>
|
||||
<h1>About Lospec</h1>
|
||||
<p>Lospec is a website created to host tools for pixel artists. To see more of our tools, visit our <a href="/">homepage</a>. To hear about any updates or new tools, follow us on <a href="http://twitter.com/lospecofficial">Twitter</a>.</p>
|
||||
</div>
|
||||
<div id="changelog">
|
||||
<button class="close-button">{{svg "x.svg" width="20" height="20"}}</button>
|
||||
|
||||
<h1>Changelog</h1>
|
||||
{{#each changelog}}
|
||||
<h2>Version {{@key}}</h2>
|
||||
<ul>{{#each this}}
|
||||
<li>{{change}} <span class="weak">- {{author}}</span></li>
|
||||
{{/each}}</ul>
|
||||
{{/each}}
|
||||
</div>
|
||||
<div id="credits">
|
||||
<button class="close-button">{{svg "x.svg" width="20" height="20"}}</button>
|
||||
<h1>Credits</h1>
|
||||
<h2>Icons</h2>
|
||||
<ul>
|
||||
<li><div>Icons made by <a href="http://www.freepik.com" title="Freepik">Freepik</a> from <a href="http://www.flaticon.com" title="Flaticon">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></div></li>
|
||||
<li><div>Font Awesome by Dave Gandy - <a href="http://fontawesome.io">http://fontawesome.io</a></div></li>
|
||||
<li><div>Icons made by <a href="http://www.flaticon.com/authors/those-icons" title="Those Icons">Those Icons</a> from <a href="http://www.flaticon.com" title="Flaticon">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></div></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="settings">
|
||||
<button class="close-button">{{svg "x.svg" width="20" height="20"}}</button>
|
||||
<h1>Settings</h1>
|
||||
|
||||
<div id="settings-container">
|
||||
<h2>History</h2>
|
||||
<div class = "settings-entry">
|
||||
<label for="setting-numberOfHistoryStates">Number of History States</label> <input id="setting-numberOfHistoryStates" value="20" autocomplete="off" />
|
||||
</div>
|
||||
|
||||
<h2>Pixel grid</h2>
|
||||
<div class = "settings-entry">
|
||||
<label for="setting-pixelGridColour">Colour of the pixel grid</label><input id="setting-pixelGridColour" value = "#0000FF" autocomplete="off"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p id="cookies-disabled-warning">Your browsers cookies are disabled, settings will be lost upon closing this page.</p>
|
||||
|
||||
<div>
|
||||
<button id="save-settings" class="default">Save</button>
|
||||
</div>
|
||||
</div>
|
||||
{{> start-pixel-popup}}
|
||||
{{> splash-page-popup}}
|
||||
{{> sprite-resize-popup}}
|
||||
{{> canvas-resize-popup}}
|
||||
{{> palette-popup}}
|
||||
{{> help-popup}}
|
||||
{{> about-popup}}
|
||||
{{> changelog-popup}}
|
||||
{{> credits-popup}}
|
||||
{{> settings-popup}}
|
||||
</div>
|
||||
|
||||
<script>
|
||||
palettes = { {{#palettes}}
|
||||
'{{title}}': {
|
||||
colors: '{{colors}}'.split(',')
|
||||
},
|
||||
{{/palettes}}
|
||||
{{#specifiedPalette}}
|
||||
'{{title}}': {
|
||||
colors: '{{colors}}'.split(','),
|
||||
specified: true
|
||||
}
|
||||
{{/specifiedPalette}}
|
||||
}
|
||||
{{#if width}}
|
||||
var specifiedDimentions = true;
|
||||
{{else}}
|
||||
var specifiedDimentions = false;
|
||||
{{/if}}
|
||||
|
||||
{{#specifiedPalette}}
|
||||
var keepUrl = true;
|
||||
{{/specifiedPalette}}
|
||||
|
||||
// Set the default palettes
|
||||
palettes["Commodore 64"] = {"name":"Commodore 64","author":"","colors":["000000","626262","898989","adadad","ffffff","9f4e44","cb7e75","6d5412","a1683c","c9d487","9ae29b","5cab5e","6abfc6","887ecb","50459b","a057a3"]}
|
||||
palettes["PICO-8"] = {"name":"PICO-8","author":"","colors":["000000","1D2B53","7E2553","008751","AB5236","5F574F","C2C3C7","FFF1E8","FF004D","FFA300","FFEC27","00E436","29ADFF","83769C","FF77A8","FFCCAA"]}
|
||||
palettes["Gameboy Color"] = {"name":"Nintendo Gameboy (Black Zero)","author":"","colors":["2e463d","385d49","577b46","7e8416"]}
|
||||
|
||||
</script>
|
||||
<script src="pixel-editor.js"></script>
|
||||
<script src="/pixel-editor/pixel-editor.js"></script>
|
||||
<script src="/reload/reload.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
65
views/latestLog.hbs
Normal file
65
views/latestLog.hbs
Normal file
@@ -0,0 +1,65 @@
|
||||
Hello there, welcome to the latest version of the Lospec Pixel Editor. As you can see, we changed
|
||||
quite a lot of things. Let's go through all them, starting from this page.
|
||||
|
||||
<h2>Splash page</h2>
|
||||
|
||||
The editor now has a splash page! Besides a fancy cover image with beautiful art, on the bottom
|
||||
left of the page you'll be able to create a new custom pixel. You can also use the quickstart
|
||||
menu to quickly select a preset or load an existing file. It was designed by <a href="https://twitter.com/skeddles">Skeddles</a> himself!
|
||||
|
||||
<img src="/pixel-editor/splash.gif"/>
|
||||
|
||||
<strong>Pro tip: </strong> once you've created a new project, you can go back to the splash page
|
||||
by clicking on <strong>Editor -> Splash page</strong>
|
||||
|
||||
<h2>Canvas resizing</h2>
|
||||
|
||||
We implemented canvas resizing! If you wanted to draw a t-rex but created a 4x4 canvas, we've got you covered!
|
||||
You can now click on <strong>Edit -> Resize canvas</strong> to decrease the size of the project. Same goes if you
|
||||
drew an ant on a 1024x1024 canvas, just go to <strong>Edit -> Resize canvas</strong> and decrease
|
||||
the dimensions.
|
||||
|
||||
<img src="/pixel-editor/resize-canvas.gif"/>
|
||||
|
||||
<h2>Sprite scaling</h2>
|
||||
|
||||
In addition to the <a href="https://www.lospec.com/pixel-art-scaler">Lospec Pixel Art Scaler</a>,
|
||||
you can now take advantage of the editor's built-in scaling function. Just click on <strong>Edit -> Scale sprite</strong>
|
||||
to scale up or down your work. With the nearest-neighbour algorithm you'll be able to scale sprites
|
||||
in a pixel-perfect manner, while with bilinear interpolation it's possible to add (or remove, if you're scaling
|
||||
down a sprite) antialiasing.
|
||||
|
||||
<img src="/pixel-editor/scale-sprite.gif"/>
|
||||
|
||||
<h2>Line tool</h2>
|
||||
|
||||
Our contributor <a href="https://github.com/liamortiz">Liam</a> added a new line tool! Quality of
|
||||
life improvement are planned for it, the rectangle and the rectangular selection tools.
|
||||
|
||||
<img src="/pixel-editor/line-tool.gif"/>
|
||||
|
||||
<h2>Advanced mode: colour picker and palette block</h2>
|
||||
|
||||
If you're a proud user of the advanced mode, you'll be able to try out the new colour picker: it
|
||||
supports 3 colour models, 6 colour harmonies and multiple ways to input data. Next to it,
|
||||
you'll find the new palette block, which lets you arrange your colours however you want, add and
|
||||
remove multiple colours at once. Changes made in the palette block will update the palette list
|
||||
you've always been familiar with.
|
||||
|
||||
<img src="/pixel-editor/palette-block.gif"/>
|
||||
|
||||
<h2>Other changes:</h2>
|
||||
<ul>
|
||||
<li>You can now move colours in the palette menu</li>
|
||||
<li>Use <strong>View -> Pixel grid</strong> to show the pixel grid</li>
|
||||
<li>Fixed a bunch of bugs, made the brush preview pixel perfect</li>
|
||||
<li>Added <strong>Layer -> Duplicate</strong> to duplicate a layer</li>
|
||||
<li>Quality of life development improvements by <a href="https://github.com/nkoder">Nkoder</a> and <a href="https://github.com/JulianWebb">Pongles</a></a></li>
|
||||
<li>Canvas trimming to get rid of all the extra space you have in your sprite</li>
|
||||
</ul>
|
||||
|
||||
<h2>That's all folks!</h2>
|
||||
That's all for this update! Hope you have fun with this new release :) </br>
|
||||
- <a href="https://github.com/unsettledgames">Unsettled</a>
|
||||
</br></br>
|
||||
P.S.: we're always looking for contributors! Join the <a href="https://discord.com/invite/QjsgTQM">Lospec discord</a> to get in touch!
|
||||
49
views/layers-menu.hbs
Normal file
49
views/layers-menu.hbs
Normal file
@@ -0,0 +1,49 @@
|
||||
<!-- LAYER MENU -->
|
||||
<ul id = "layers-menu">
|
||||
<li class = "layers-menu-entry selected-layer">
|
||||
<canvas class = "preview-canvas"></canvas>
|
||||
<ul class="layer-buttons">
|
||||
<li class = "layer-button">
|
||||
<button title="Lock layer" class="lock-layer-button">
|
||||
{{svg "unlockedpadlock.svg" width="15" height="15" class = "default-icon"}}
|
||||
{{svg "lockedpadlock.svg" width="15" height="15" class = "edited-icon" display = "none"}}
|
||||
</button>
|
||||
</li>
|
||||
<li class = "layer-button">
|
||||
<button title="Show / hide layer" class="hide-layer-button">
|
||||
{{svg "visible.svg" width="15" height="15" class = "default-icon"}}
|
||||
{{svg "invisible.svg" width="15" height="15" class = "edited-icon" display = "none"}}
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>Layer 0<div class = "gradient"></div></p>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<button id = "add-layer-button">
|
||||
{{svg "plus.svg" width="20" height="20"}} Add layer
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul id = "layer-properties-menu">
|
||||
<li>
|
||||
<button onclick = "renameLayer()">Rename</button>
|
||||
</li>
|
||||
<li>
|
||||
<button onclick = "duplicateLayer()">Duplicate</button>
|
||||
</li>
|
||||
<li>
|
||||
<button onclick = "deleteLayer()">Delete</button>
|
||||
</li>
|
||||
<li>
|
||||
<button onclick = "merge()">Merge below</button>
|
||||
</li>
|
||||
<li>
|
||||
<button onclick = "flatten(true)">Flatten visible</button>
|
||||
</li>
|
||||
<li>
|
||||
<button onclick = "flatten(false)">Flatten all</button>
|
||||
</li>
|
||||
</ul>
|
||||
16
views/layout-contribute.hbs
Normal file
16
views/layout-contribute.hbs
Normal file
@@ -0,0 +1,16 @@
|
||||
<!doctype html>
|
||||
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
{{#title}}<title>{{this}}</title>{{/title}}
|
||||
{{#css}}<link rel="stylesheet" href="{{this}}">{{/css}}
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<section class="wrapper">
|
||||
{{{body}}}
|
||||
</section>
|
||||
{{#js}}<script src="{{this}}"></script>{{/js}}
|
||||
</body>
|
||||
</html>
|
||||
68
views/main-menu.hbs
Normal file
68
views/main-menu.hbs
Normal file
@@ -0,0 +1,68 @@
|
||||
<ul id="main-menu">
|
||||
<li class="logo">Lospec Pixel Editor</li>
|
||||
<li>
|
||||
<button>File</button>
|
||||
<ul>
|
||||
<li><button>New</button></li>
|
||||
<li><button>Save project</button></li>
|
||||
<li><button>Open</button></li>
|
||||
<li><button id="export-button" class="disabled">Export</button></li>
|
||||
<li><a href="https://lospec.com/pixel-editor">Exit</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<button>Edit</button>
|
||||
<ul>
|
||||
<li><button id="resize-canvas-button" onclick = "openResizeCanvasWindow()">Resize canvas</button></li>
|
||||
<li><button id="resize-sprite-button" onclick = "openResizeSpriteWindow()">Scale sprite</button></li>
|
||||
<li><button onclick = "trimCanvas()">Trim canvas</button></li>
|
||||
<li><button id="undo-button" class="disabled">Undo</button></li>
|
||||
<li><button id="redo-button" class="disabled">Redo</button></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<button>View</button>
|
||||
<ul>
|
||||
<li><button id="toggle-pixelgrid-button" onclick="togglePixelGrid()">Show pixel grid</button></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<button id = "layer-button">Layer</button>
|
||||
<ul>
|
||||
<li><button onclick = "addLayer()">New layer</button></li>
|
||||
<li><button onclick = "duplicateLayer()">Duplicate</button></li>
|
||||
<li><button onclick = "renameLayer()">Rename</button></li>
|
||||
<li><button onclick = "deleteLayer()">Delete</button></li>
|
||||
<li><button onclick = "merge()">Merge below</button></li>
|
||||
<li><button onclick = "flatten(false)">Flatten all</button></li>
|
||||
<li><button onclick = "flatten(true)">Flatten visible</button></li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<button>Selection</button>
|
||||
<ul>
|
||||
<li><button id="copy-button">Copy</button></li>
|
||||
<li><button id="cut-button">Cut</button></li>
|
||||
<li><button id="paste-button">Paste</button></li>
|
||||
<li><button id="cancelSelection-button">Cancel</button></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<button>Editor</button>
|
||||
<ul>
|
||||
<li><button id="switch-mode-button">Switch to basic mode</button></li>
|
||||
<li><button onclick="showDialogue('splash', false)">Splash page</button></li>
|
||||
<li><button>Settings</button></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<button>Help</button>
|
||||
<ul>
|
||||
<li><button>Help</button></li>
|
||||
<li><button>About</button></li>
|
||||
<li><button>Changelog</button></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
74
views/palette-popup.hbs
Normal file
74
views/palette-popup.hbs
Normal file
@@ -0,0 +1,74 @@
|
||||
<!-- PALETTE -->
|
||||
<div id = "palette-block">
|
||||
<button class="close-button">{{svg "x.svg" width="20" height="20"}}</button>
|
||||
|
||||
<h1>Edit palette</h1>
|
||||
|
||||
<div id = "colour-picker">
|
||||
<div id = "cp-modes">
|
||||
<button id="cp-rgb" class="cp-selected-mode" onclick="changePickerMode(this, 'rgb')">RGB</button>
|
||||
<button id="cp-hsv" onclick="changePickerMode(this, 'hsv')">HSV</button>
|
||||
<button id="cp-hsl" onclick="changePickerMode(this, 'hsl')">HSL</button>
|
||||
|
||||
<div id="cp-colour-preview" class="cp-colour-preview"></div>
|
||||
<input id="cp-hex" type="text" value="#123456" onchange="hexUpdated()"/>
|
||||
</div>
|
||||
|
||||
<div id = "sliders-container">
|
||||
<div class = "cp-slider-entry">
|
||||
<label for = "first-slider">R</label>
|
||||
<input type="range" min="0" max="255" class="colour-picker-slider" id="first-slider" onmousemove="updateSliderValue(1)" onclick="updateSliderValue(1)"/>
|
||||
<input type = "text" value = "128" onchange="inputChanged(this,1)"/>
|
||||
</div>
|
||||
|
||||
<div class = "cp-slider-entry">
|
||||
<label for = "second-slider">G</label>
|
||||
<input type="range" min="0" max ="255" class="colour-picker-slider" id="second-slider" onmousemove="updateSliderValue(2)" onclick="updateSliderValue(2)"/>
|
||||
<input type = "text" value = "128" onchange="inputChanged(this,2)"/>
|
||||
</div>
|
||||
|
||||
<div class = "cp-slider-entry">
|
||||
<label for = "third-slider">B</label>
|
||||
<input type="range" min = "0" max = "255" class = "colour-picker-slider" id = "third-slider" onmousemove="updateSliderValue(3)" onclick="updateSliderValue(3)"/>
|
||||
<input type = "text" value = "128" onchange="inputChanged(this,3)"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id = "cp-minipicker">
|
||||
<input type = "range" min = "0" max = "100" id = "cp-minipicker-slider" onmousemove="miniSliderInput(event)" onclick="miniSliderInput(event)"/>
|
||||
<div id="cp-canvas-container" onmousemove="movePickerIcon(event)">
|
||||
<canvas id = "cp-spectrum"></canvas>
|
||||
<div id="cp-active-icon" class="cp-picker-icon"></div>
|
||||
</div>
|
||||
|
||||
<div id = "cp-colours-previews">
|
||||
<div class = "cp-colour-preview">
|
||||
#123456
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id = "cp-colour-picking-modes">
|
||||
<button class="cp-selected-mode" onclick="changePickingMode(event,'mono')">Mono</button>
|
||||
<button onclick="changePickingMode(event,'analog')">Nlgs</button>
|
||||
<button onclick="changePickingMode(event,'cmpt')">Cmpt</button>
|
||||
<button onclick="changePickingMode(event,'tri')">Tri</button>
|
||||
<button onclick="changePickingMode(event,'scmpt')">Scm</button>
|
||||
<button onclick="changePickingMode(event,'tetra')">Tetra</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id = "palette-container">
|
||||
<ul id = "palette-list">
|
||||
<li style = "background-color:rgb(255,0,0);width:40px;height:40px;" onmousedown="startRampSelection(event)"
|
||||
onmousemove="updateRampSelection(event)" onmouseup="endRampSelection(event)"></li>
|
||||
<li style = "background-color:rgb(0,255,0);width:40px;height:40px;"onmousedown="startRampSelection(event)"
|
||||
onmousemove="updateRampSelection(event)" onmouseup="endRampSelection(event)"></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div id="pb-options">
|
||||
<button title="Add colours to palette" onclick="pbAddColours()">Add colours</button>
|
||||
<button title="Remove colours from palette" onclick="pbRemoveColours()">Remove colours</button>
|
||||
</div>
|
||||
</div>
|
||||
14
views/preload.hbs
Normal file
14
views/preload.hbs
Normal file
@@ -0,0 +1,14 @@
|
||||
<div class="preload">
|
||||
<img src="/pixel-editor/dropdown-arrow.png" />
|
||||
<img src="/pixel-editor/dropdown-arrow-hover.png" />
|
||||
<img src="/pixel-editor/eyedropper.png" />
|
||||
<img src="/pixel-editor/fill.png" />
|
||||
<img src="/pixel-editor/pan.png" />
|
||||
<img src="/pixel-editor/pan-held.png" />
|
||||
<img src="/pixel-editor/pencil.png" />
|
||||
<img src="/pixel-editor/zoom-in.png" />
|
||||
<img src = "/pixel-editor/eraser.png"/>
|
||||
<img src = "/pixel-editor/rectselect.png"/>
|
||||
<!-- TODO: [ELLIPSE] Where is this icon used? Do we need similar one for ellipsis? -->
|
||||
<img src= "/pixel-editor/rectangle.png">
|
||||
</div>
|
||||
22
views/settings-popup.hbs
Normal file
22
views/settings-popup.hbs
Normal file
@@ -0,0 +1,22 @@
|
||||
<div id="settings">
|
||||
<button class="close-button">{{svg "x.svg" width="20" height="20"}}</button>
|
||||
<h1>Settings</h1>
|
||||
|
||||
<div id="settings-container">
|
||||
<h2>History</h2>
|
||||
<div class = "settings-entry">
|
||||
<label for="setting-numberOfHistoryStates">Number of History States</label> <input id="setting-numberOfHistoryStates" value="20" autocomplete="off" />
|
||||
</div>
|
||||
|
||||
<h2>Pixel grid</h2>
|
||||
<div class = "settings-entry">
|
||||
<label for="setting-pixelGridColour">Colour of the pixel grid</label><input id="setting-pixelGridColour" value = "#0000FF" autocomplete="off"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p id="cookies-disabled-warning">Your browsers cookies are disabled, settings will be lost upon closing this page.</p>
|
||||
|
||||
<div>
|
||||
<button id="save-settings" class="default">Save</button>
|
||||
</div>
|
||||
</div>
|
||||
69
views/splash-page-popup.hbs
Normal file
69
views/splash-page-popup.hbs
Normal file
@@ -0,0 +1,69 @@
|
||||
<!-- Splash page -->
|
||||
<div id = "splash">
|
||||
<div id="splash-news">
|
||||
<div id="latest-update">
|
||||
<h1>Latest updates</h1>
|
||||
|
||||
{{> latestLog}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="splash-input">
|
||||
<div id="editor-logo">
|
||||
<div id="black">
|
||||
<div id="sp-coverdata">
|
||||
<img src="https://lospec.com/brand/lospec_logo_3x.png"/> pixel editor
|
||||
<p>Version 1.4.0</p>
|
||||
<a href="https://cdn.discordapp.com/attachments/506277390050131978/795660870221955082/final.png">Art by Unsettled</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="splash-menu">
|
||||
<div id="sp-newpixel">
|
||||
<h1>New Custom Pixel</h1>
|
||||
<!-- Editor mode-->
|
||||
<h2>Editor mode</h2>
|
||||
<div class="sp-np-entry" id="sp-mode-palette">
|
||||
<div class="button-menu">
|
||||
<div class="bm-left" onclick="splashMode(event,'Basic')"><p>Basic</p></div>
|
||||
<div class="sp-interface-selected bm-right" onclick="splashMode(event,'Advanced')"><p>Advanced</p></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>Size</h2>
|
||||
<div class="sp-np-entry">
|
||||
<input id="size-width-splash" value="{{#if width}}{{width}}{{else}}64{{/if}}" autocomplete="off" />{{svg "x.svg" width="16" height="16" class="dimentions-x"}}<input id="size-height-splash" value="{{#if height}}{{height}}{{else}}64{{/if}}" autocomplete="off" />
|
||||
</div>
|
||||
|
||||
<h2>Palette</h2>
|
||||
<button id="palette-button-splash" class="dropdown-button">Choose a palette...</button>
|
||||
<div id="palette-menu-splash" class="dropdown-menu"><button id="load-palette-button-splash">Load palette...</button></div>
|
||||
|
||||
<div id="new-pixel-warning">Creating a new pixel will discard your current one.</div>
|
||||
<div class="sp-np-entry">
|
||||
<button id="create-button-splash" class="default">Create</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id = "sp-quickstart-container">
|
||||
<div id="sp-quickstart-title">
|
||||
Quickstart
|
||||
</div>
|
||||
|
||||
<div id="sp-quickstart">
|
||||
<div class="sp-template" onclick="document.getElementById('open-image-browse-holder').click()"><p>Load</p></div>
|
||||
<div class="sp-template" onclick="newFromTemplate('Gameboy Color')"><p><span>New</span> Gameboy</p></div>
|
||||
<div class="sp-template" onclick="newFromTemplate('Commodore 64')"><p><span>New</span> C64</p></div>
|
||||
<div class="sp-template" onclick="newFromTemplate('PICO-8')"><p><span>New</span> Pico8</p></div>
|
||||
<div class="sp-template" onclick="newFromTemplate('',16,16)"><p><span>New</span> 16x16</p></div>
|
||||
<div class="sp-template" onclick="newFromTemplate('',32,32)"><p><span>New</span> 32x32</p></div>
|
||||
<div class="sp-template" onclick="newFromTemplate('',64,64)"><p><span>New</span> 64x64</p></div>
|
||||
<div class="sp-template" onclick="newFromTemplate('',128,128)"><p><span>New</span> 128x128</p></div>
|
||||
<div class="sp-template" onclick="newFromTemplate('',256,256)"><p><span>New</span> 256x256</p></div>
|
||||
<div class="sp-template" onclick="newFromTemplate('',512,512)"><p><span>New</span> 512x512</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
49
views/sprite-resize-popup.hbs
Normal file
49
views/sprite-resize-popup.hbs
Normal file
@@ -0,0 +1,49 @@
|
||||
<!--SPRITE RESIZE-->
|
||||
<div class="update" id = "resize-sprite">
|
||||
<button class="close-button">{{svg "x.svg" width="20" height="20"}}</button>
|
||||
<h1>Scale sprite</h1>
|
||||
<!-- SIZE-->
|
||||
<h2>New size</h2>
|
||||
<span id = "rs-size-menu">
|
||||
<div>
|
||||
<span>
|
||||
Width: <input id="rs-width" type="number" default="0" step="1"
|
||||
value="{{#if border}}{{border}}{{else}}0{{/if}}" autocomplete="off"/>
|
||||
</span>
|
||||
|
||||
<span>
|
||||
Height: <input id="rs-height" default="0" step="1" type="number"
|
||||
value="{{#if border}}{{border}}{{else}}0{{/if}}" autocomplete="off"/>
|
||||
</span>
|
||||
</div>
|
||||
</span>
|
||||
<!--BORDERS-->
|
||||
<h2>Resize percentages</h2>
|
||||
<span id = "rs-percentage-menu">
|
||||
<div>
|
||||
<span>
|
||||
Width <input id="rs-width-percentage" type="number" default="0" step="1"
|
||||
value="{{#if border}}{{border}}{{else}}0{{/if}}" autocomplete="off"/> %
|
||||
</span>
|
||||
|
||||
<span>
|
||||
Height <input id="rs-height-percentage" type="number" default="0" step="1"
|
||||
value="{{#if border}}{{border}}{{else}}0{{/if}}" autocomplete="off"/> %
|
||||
</span>
|
||||
</div>
|
||||
<div id = "rs-ratio-div">
|
||||
<span>
|
||||
Keep current ratio <input type = "checkbox" id = "rs-keep-ratio"/>
|
||||
</span>
|
||||
<span>
|
||||
Scaling algorithm:
|
||||
<select name = "resize-algorithm" id = "resize-algorithm-combobox">
|
||||
<option value = "nearest-neighbor">Nearest neighbour</option>
|
||||
<option value = "bilinear-interpolation">Bilinear</option>
|
||||
</select>
|
||||
</span>
|
||||
</br>
|
||||
<button id = "resize-sprite-confirm">Scale sprite</button>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
28
views/start-pixel-popup.hbs
Normal file
28
views/start-pixel-popup.hbs
Normal file
@@ -0,0 +1,28 @@
|
||||
<!-- NEW PIXEL -->
|
||||
<div id="new-pixel" class="update">
|
||||
<button class="close-button">{{svg "x.svg" width="20" height="20"}}</button>
|
||||
<h1>New Pixel</h1>
|
||||
|
||||
<!-- Editor mode-->
|
||||
<h2>Editor mode</h2>
|
||||
<button id = "editor-mode-button" class = "dropdown-button">Choose a mode...</button>
|
||||
<div id = "editor-mode-menu" class = "dropdown-menu"></div>
|
||||
<input id="editor-mode" value="{{#if mode}}{{mode}}{{else}}'Advanced'{{/if}}" autocomplete="off" />
|
||||
<p id = "editor-mode-info"></p>
|
||||
|
||||
<!-- Preset-->
|
||||
<h2>Preset</h2>
|
||||
<button id="preset-button" class="dropdown-button">Choose a preset...</button>
|
||||
<div id="preset-menu" class="dropdown-menu"></div>
|
||||
|
||||
<h2>Size</h2>
|
||||
<input id="size-width" value="{{#if width}}{{width}}{{else}}64{{/if}}" autocomplete="off" />{{svg "x.svg" width="16" height="16" class="dimentions-x"}}<input id="size-height" value="{{#if height}}{{height}}{{else}}64{{/if}}" autocomplete="off" />
|
||||
<h2>Palette</h2>
|
||||
<button id="palette-button" class="dropdown-button">Choose a palette...</button>
|
||||
<div id="palette-menu" class="dropdown-menu"><button id="no-palette-button">Empty Palette</button><button id="load-palette-button">Load palette...</button></div>
|
||||
|
||||
<div id="new-pixel-warning">Creating a new pixel will discard your current one.</div>
|
||||
<div>
|
||||
<button id="create-button" class="default">Create</button>
|
||||
</div>
|
||||
</div>
|
||||
3
views/tool-previews.hbs
Normal file
3
views/tool-previews.hbs
Normal file
@@ -0,0 +1,3 @@
|
||||
<!-- TOOL PREVIEWS -->
|
||||
<div id="eyedropper-preview"></div>
|
||||
<div id="brush-preview"></div>
|
||||
46
views/tools-menu.hbs
Normal file
46
views/tools-menu.hbs
Normal file
@@ -0,0 +1,46 @@
|
||||
<ul id="tools-menu">
|
||||
<li class="selected expanded">
|
||||
<button title="Pencil Tool (B)" id="pencil-button">{{svg "pencil.svg" width="32" height="32"}}</button>
|
||||
<button title="Increase Brush Size" id="pencil-bigger-button" class="tools-menu-sub-button">{{svg "plus.svg" width="12" height="12"}}</button>
|
||||
<button title="Decrease Brush Size" id="pencil-smaller-button" class="tools-menu-sub-button">{{svg "minus.svg" width="12" height="12"}}</button>
|
||||
</li>
|
||||
|
||||
<li class = "expanded">
|
||||
<button title="Eraser tool (R)" id="eraser-button">{{svg "eraser.svg" width="32" height="32"}}</button>
|
||||
<button title="Increase Eraser Size" id="eraser-bigger-button" class="tools-menu-sub-button">{{svg "plus.svg" width="12" height="12"}}</button>
|
||||
<button title="Decrease Eraser Size" id="eraser-smaller-button" class="tools-menu-sub-button">{{svg "minus.svg" width="12" height="12"}}</button>
|
||||
</li>
|
||||
|
||||
<li class="expanded">
|
||||
<button title="Rectangle Tool (U)" id="rectangle-button">{{svg "rectangle.svg" width="32" height="32" id = "rectangle-empty-button-svg"}}
|
||||
{{svg "fullrect.svg" width="32" height="32" id = "rectangle-full-button-svg" display = "none"}}</button>
|
||||
<button title="Increase Rectangle Size" id="rectangle-bigger-button" class="tools-menu-sub-button">{{svg "plus.svg" width="12" height="12"}}</button>
|
||||
<button title="Decrease Rectangle Size" id="rectangle-smaller-button" class="tools-menu-sub-button">{{svg "minus.svg" width="12" height="12"}}</button>
|
||||
</li>
|
||||
|
||||
<!-- TODO: [ELLIPSE] Once ellipse is ready for release make it visible by default -->
|
||||
<li class="expanded" id="tools-menu--ellipse" style="display: none">
|
||||
<!-- TODO: [ELLIPSE] Decide on a shortcut to use. "S" was chosen without any in-team consultation. -->
|
||||
<!-- TODO: [ELLIPSE] Decide on icons to use. Current ones are quickly prepared drafts and display with incorrect color. -->
|
||||
<button title="Ellipse Tool (S)" id="ellipse-button">
|
||||
{{svg "ellipse.svg" width="32" height="32" id = "ellipse-empty-button-svg"}}
|
||||
{{svg "filledellipse.svg" width="32" height="32" id = "ellipse-full-button-svg" display = "none"}}
|
||||
</button>
|
||||
<button title="Increase Ellipse Size" id="ellipse-bigger-button" class="tools-menu-sub-button">{{svg "plus.svg" width="12" height="12"}}</button>
|
||||
<button title="Decrease Ellipse Size" id="ellipse-smaller-button" class="tools-menu-sub-button">{{svg "minus.svg" width="12" height="12"}}</button>
|
||||
</li>
|
||||
|
||||
<li class="expanded">
|
||||
<button title="Line Tool (L)" id="line-button">{{svg "line.svg" width="32" height="32"}}</button>
|
||||
<button title="Increase Line Size" id="line-bigger-button" class="tools-menu-sub-button">{{svg "plus.svg" width="12" height="12"}}</button>
|
||||
<button title="Decrease Line Size" id="line-smaller-button" class="tools-menu-sub-button">{{svg "minus.svg" width="12" height="12"}}</button>
|
||||
</li>
|
||||
|
||||
<li><button title="Fill Tool (F)" id="fill-button">{{svg "fill.svg" width="32" height="32"}}</button></li>
|
||||
|
||||
<li><button title="Eyedropper Tool (E)" id="eyedropper-button">{{svg "eyedropper.svg" width="32" height="32"}}</button></li>
|
||||
|
||||
<li><button title="Pan Tool (P)" id="pan-button">{{svg "pan.svg" width="32" height="32"}}</button></li>
|
||||
|
||||
<li><button title = "Rectangular Selection Tool (M)" id = "rectselect-button">{{svg "rectselect.svg" width = "32" height = "32"}}</button><li>
|
||||
</ul>
|
||||
Reference in New Issue
Block a user