shuhei / pixelm

A pixel art editor written in Elm

Pixelm

A pixel art editor written in Elm

Features

• Usable on mobile devices
• Tools: pencil, eraser, bucket, move, clear
• Undo
• Animation
• Export to PNG, GIF and animated GIF

Development

Install:

npm install
elm-package install

cd tests
elm-package install

Start dev server:

npm start

Run unit tests:

npm test

Build assets for production:

npm run build

Deploy to GitHub Pages:

npm run deploy

This project is bootstrapped with Create Elm App. Check out its README template for the structure of this project.

pixelm's Issues

Pencil tool doesn't work well on Android

Continuous drawing with pencil tool doesn't work on Android phone.

Configure image export

• pixel size
• background color (transparent or white)

Move tool

Fix the position of the animation preview

https://iamsteve.me/blog/entry/horizontal-scrolling-responsive-menu

Double tap on iOS devices

Show the frame modal on iOS devices

Animation

GIF spec

• https://en.wikipedia.org/wiki/GIF
• https://en.wikipedia.org/wiki/Lempel%E2%80%93Ziv%E2%80%93Welch

Libaries

• https://github.com/jnordberg/gif.js
• https://github.com/antimatter15/jsgif

Redo

Swap frames

With drag & drop

• HTML5 drag & drop in Elm https://medium.com/elm-shorts/html5-drag-and-drop-in-elm-88d149d3558f
• HTML 5 drag & drop https://www.w3schools.com/html/html5_draganddrop.asp

Drag & drop of frames don't work on touch devices

Higher resolution

Probably zooming on mobile devices is necessary.

• Zoom (#30)
• Change resolution
  • Resize pixel grid
  • Handle resolution change with undo/redo

Palette

Show used colors.

Select frame properly

Selecting frame doesn't work properly if there are exactly same frames.

Put unique IDs?

Animated GIF is not exported on Safari

Blob is created properly, but cannot download an object URL...

https://stackoverflow.com/questions/35512864/download-a-file-using-a-blob-url-in-safari

Pausing animation preview

Continuous animation preview could be stopped on click in case it becomes a distracting element.

Paused stated could be reflected in the UI with a faded out overlay or through border color.

Horizontal scroll of frames for narrow devices

iPhone 6 can show only 4 frames

History tool

Go back.

Layout

Put the main canvas in the middle and tools on the sides.

Change frame rate

10 FPS is sometimes too fast.

Layers

Wrong animation preview

Currently it's using mod to get a frame to show, but timer is not always accurate. Should have a current frame number in model and increment it with Tick. Also, it should be updated when frame count changes (add & delete).

Delete frame

Interpolate with the pencil tool

If you draw a line with the pencil tool very quickly, not all the pixels on the line are drawn.

This is happening because mousemove or touchmove event are not fired frequently enough. Performance is not the problem here. I confirmed it by checking another performance app with Chrome DevTool.

It would be nice to interpolate pixels.

Canvas state is lost when leaving the page

Leaving the app resets the current state of the canvas which can result in the loss of hours of work.

Maybe the app could save the current canvas to local storage and/or prompt the user about saving changes before leaving.

Duplicate frame

Import/Export drawings

It would be nice to be able to import and export pixelm drawings to a format like json.

Use cases for this would be:

• Saving changes to continue work later
• Savepoints, version control
• Saving and loading your own templates
• Sharing artwork
• Loading and viewing other people's artwork
• Maybe save user palettes (when supported) along with drawing?

Choose file format

Some browsers don't support multiple downloads without giving permissions. Also downloading multiple files at once can open consecutive download dialogs which can be confusing.

I suggest showing a dialog for picking the desired download format