652 lines
34 KiB
Handlebars
652 lines
34 KiB
Handlebars
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<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/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>
|
|
|
|
<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"/>
|
|
<img src= "/pixel-editor/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>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 = "empty-button-svg"}}
|
|
{{svg "fullrect.svg" width="32" height="32" id = "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>
|
|
|
|
<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 class="expanded">
|
|
<button title="Zoom Tool (Z)" id="zoom-button">{{svg "zoom.svg" width="32" height="32"}}</button>
|
|
<button title="Zoom In" id="zoom-in-button" class="tools-menu-sub-button">{{svg "plus.svg" width="12" height="12"}}</button>
|
|
<button title="Zoom Out" id="zoom-out-button" class="tools-menu-sub-button">{{svg "minus.svg" width="12" height="12"}}</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>
|
|
|
|
<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 class="splash-news">
|
|
<div id="latest-update">
|
|
<h1>Latest updates</h1>
|
|
<strong>Hey! Unsettled here.</strong><br><br>
|
|
Welcome to the features-log.html! From now on, it will show all the
|
|
latest features that have been added to the editor, so that everyone knows what's going on.
|
|
|
|
<h2>Canvas and sprite resizing</h2>
|
|
Canvas and sprite resizing are here! You started a 4x4 sprite but realized it was a bit too small of
|
|
a resolution to draw a fight against dinosaurs? Now you can go to Edit->Resize canvas and specify a higher
|
|
canvas size. At the same time, if you drew an ant on a 1000x1000 canvas you can also reduce the canvas size.
|
|
I'll tell you more, you can even use Edit->Trim to make the borders of the canvas to perfectly include
|
|
the sprite you're drawing.
|
|
<br><br>
|
|
Let's say you'd like to ask for feedback on a piece. You go on Discord and post it, but it's so small!
|
|
We've got you covered. Besides using the Lospec Pixel Art Scaler, you can also use the Edit->Scale sprite
|
|
menu to...well...scale your sprite. It's also very useful when you'd like to edit a sprite that was previously
|
|
scaled. Just scale it down and have a look at how your favourite artist draws those great clouds.
|
|
|
|
<h2>Layers and palette sorting</h2>
|
|
Changing the layer sorting is now easier and has some nice animations. Because you can never have enough juice.
|
|
<br><br>
|
|
You can also change the ordering of the colours in the palette menu: just drag a colour and place it in the right position.
|
|
|
|
<h2>Advanced mode: advanced palette editor</h2>
|
|
If you are a proud user of the advanced mode (Edit->Switch to advance mode if you want to experience the thrill),
|
|
we (and with we I mean I) have great news: right click on a colour to open the old picker, click on the edit
|
|
colour button if you want to try out the new palette editor. In it, you'll find:
|
|
|
|
<h2>Advanced mode: advanced colour picker</h2>
|
|
It supports 3 (three) different colour models, it has sliders, it has a mini colour picker if you hate sliders and
|
|
it also supports 6 (six) different colour harmonies. The Lospec Advanced Colour Picker will make you feel like a
|
|
pro!
|
|
|
|
<h2>Advanced mode: advanced palette block</h2>
|
|
Part of the new palette editor, it lets you add and remove multiple colours at once. Use the right mouse click to
|
|
select a bunch of colours that you want to delete. The changes that you make will be propagated to the old
|
|
palette.
|
|
|
|
<h2>But wait, there's more!</h2>
|
|
We also added a few quality of life improvements!
|
|
<ul>
|
|
<li>The brush preview now snaps to the pixel grid! (I'd dare to say "finally!")</li>
|
|
<li>We added the pixel grid! Click on View->Pixel grid to toggle it, change its colour
|
|
in the settings, maybe you really like Endesga pink grids.
|
|
</li>
|
|
<li>Have fun duplicating layers ;D (Layers->Duplicate or Duplicate from the layer menu)</li>
|
|
<li>When you hover on a layer in the layer menu (on the right), the editor will temporarily hide
|
|
the other ones, so you can easily see what's in the current layer.
|
|
</li>
|
|
</ul>
|
|
|
|
<h2>That's all folks!</h2>
|
|
Don't forget to follow Lospec on all the social media pages. If you like the site,
|
|
please consider becoming a Patron or giving a tip. It helps a lot :)
|
|
<br><br>
|
|
Hope you all have fun creating pixel art, see you next update!
|
|
<br><br>
|
|
P.S.: you can find this page in Help->Latest update
|
|
</div>
|
|
</div>
|
|
|
|
<div id="splash-input">
|
|
<div class="splash-menu">
|
|
<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 id="sp-quickstart">
|
|
<div class="sp-template"><p>Load</p></div>
|
|
<div class="sp-template"><p><span>New</span> custom</p></div>
|
|
<div class="sp-template"><p><span>New</span> 32x32</p></div>
|
|
<div class="sp-template"><p><span>New</span> 64x64</p></div>
|
|
<div class="sp-template"><p><span>New</span> 128x128</p></div>
|
|
<div class="sp-template"><p><span>New</span> 256x256</p></div>
|
|
<div class="sp-template"><p><span>New</span> 512x512</p></div>
|
|
<div class="sp-template"><p><span>New</span> Gameboy</p></div>
|
|
<div class="sp-template"><p><span>New</span> C64</p></div>
|
|
<div class="sp-template"><p><span>New</span> Pico8</p></div>
|
|
</div>
|
|
|
|
<div id="sp-mode-palette">
|
|
<span>Interface mode:</span>
|
|
<span>Palette: </span>
|
|
</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>Pencil: <span class="keyboard-key">B</span> or <span class="keyboard-key">1</span></li>
|
|
<li>Fill: <span class="keyboard-key">F</span> or <span class="keyboard-key">2</span></li>
|
|
<li>Eyedropper: <span class="keyboard-key">E</span> or <span class="keyboard-key">3</span></li>
|
|
<li>Pan: <span class="keyboard-key">P</span> or <span class="keyboard-key">M</span> or <span class="keyboard-key">4</span></li>
|
|
<li>Zoom: <span class="keyboard-key">Z</span> or <span class="keyboard-key">5</span></li>
|
|
<li>Undo: Ctrl + <span class="keyboard-key">Z</span></li>
|
|
<li>Redo: Ctrl + <span class="keyboard-key">Y</span> or Ctrl + Alt + <span class="keyboard-key">Z</span></li>
|
|
</ul>
|
|
<h2>Mouse Shortcuts</h2>
|
|
<ul>
|
|
<li>Alt + Click - Eyedropper</li>
|
|
<li>Space + Click - Pan</li>
|
|
<li>Alt + Scroll Wheel - Zoom</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>
|
|
</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/pixel-editor.js"></script>
|
|
</body>
|
|
</html> |