Arduboy Image Converter Web Application


#1

###Description
Convert monochrome images to hex strings compatible with arduboy.drawBitmap.

###Instructions
Use your favorite image editor to produce a monochrome image. Copy the image to your clipboard, and paste into the web page. Click on the pasted image to copy the hex string to your clipboard. Finally, just paste the hex string in your game source code and call arduboy.drawBitmap!

###Installation

  • No extra software required, just go to the web page.
  • (Well… It was really designed to use Chrome features, so you might have to install Chrome.)

###Tips

  • Anything you paste stays in the web page until you refresh. Don’t be scared of being messy, its fun!
  • This is open source software (MIT license, baby!) If you want a feature, you can fork it, add features, pull request, and all that other good stuff!
  • Or, you can just leave a feature request reply in this thread. I want new features too!

All The Arduboy Image Converters
ToChars - Online Tool For Converting Spritesheets To Character Codes
First IMAGE - a very small demo for people to show their first image
What does PROGMEM mean?
(Ross) #2

{
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x80, 0x80, 0x40, 0xa0,
0xa0, 0x90, 0xd0, 0xd0, 0xd0, 0xd0, 0xd0, 0xd0,
0x90, 0xa0, 0xa0, 0x40, 0x00, 0x80, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0xf8, 0x0e, 0xf8, 0xfe, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xfe, 0xfd, 0xfa,
0xf6, 0xec, 0xd0, 0x60, 0xc0, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0xff, 0x00, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xfe, 0xf0, 0x0e, 0xf0, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0xff, 0x00, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0x00, 0xff, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0xc0, 0xbf, 0xd0, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0x7f, 0x07, 0x3c, 0x03, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0xc0, 0x30, 0xd8, 0xf6, 0xfb,
0xfe, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0x03, 0xfc, 0x03, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x80, 0x40, 0xb0,
0xd8, 0xf6, 0xfb, 0xfe, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xaf, 0xa0, 0xaf, 0xd0, 0xd0, 0xd0, 0xd0, 0xd0,
0xc0, 0xc0, 0xe0, 0xe0, 0xe0, 0xe0, 0xe0, 0xe0,
0xe0, 0xe0, 0xe0, 0xe0, 0xc0, 0xc0, 0xc0, 0xd0,
0xd0, 0xd0, 0xd0, 0xd0, 0xa0, 0xa0, 0xa0, 0x40,
0x00, 0x80, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x80, 0x40, 0xa0, 0xd0, 0xe8, 0xf4, 0xf4, 0xf8,
0xfa, 0xfa, 0xfa, 0xfa, 0xfa, 0xfa, 0xfa, 0xfa,
0xfa, 0xfa, 0xfa, 0xf8, 0xf0, 0xf4, 0xf4, 0xe8,
0xe8, 0xe8, 0xf4, 0xfa, 0xfd, 0xfe, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xfe, 0xfd, 0xfe, 0x0c, 0x38, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0xf0, 0x06,
0xf1, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xdf, 0xbf, 0x10, 0xce, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x80, 0x7f, 0x00, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xfe, 0x03, 0xfc,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0xff, 0x00, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0x9f, 0x6f, 0x97, 0x0d, 0x03, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x7f, 0xc0, 0x3f, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0x1f, 0x60, 0x1f, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x0f, 0x70, 0x0f,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xc5, 0x1e, 0xe1, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x03,
0x0c, 0x17, 0x2f, 0x5f, 0xbf, 0xbf, 0x7f, 0x7f,
0x7f, 0x7f, 0x7f, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0x7f, 0x7f, 0x7f, 0x3f, 0xbf, 0x5f,
0x5f, 0x5f, 0xbf, 0xbf, 0xbf, 0x7f, 0x7f, 0x7f,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0x7f, 0x7f, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0x7f, 0x7f, 0x7f,
0x7f, 0x7f, 0xbf, 0xbf, 0x5f, 0x5f, 0x2f, 0x17,
0x04, 0x03, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x01, 0x01,
0x01, 0x00, 0x00, 0x00, 0x00, 0x02, 0x02, 0x02,
0x02, 0x02, 0x02, 0x02, 0x02, 0x02, 0x02, 0x02,
0x00, 0x00, 0x00, 0x01, 0x01, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x01, 0x01, 0x00,
0x00, 0x00, 0x02, 0x02, 0x02, 0x05, 0x05, 0x05,
0x05, 0x05, 0x0b, 0x0b, 0x0b, 0x0b, 0x0b, 0x0b,
0x0b, 0x0b, 0x0b, 0x0b, 0x0b, 0x0b, 0x0b, 0x0b,
0x0b, 0x0b, 0x05, 0x05, 0x05, 0x05, 0x02, 0x02,
0x02, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x01,
0x01, 0x01, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,

};


(Ross) #3

It would be kind of neat to see the image displayed in the black and white format, as you would see it on screen. Maybe an overlay to show the screen size.

Great tool! :100:/:100:


(Ross) #4

#5

If you want to test @fuopy his converter, we made a very small demo, where you can paste the converted code and upload to see the result.

http://community.arduboy.com/t/first-image-a-very-small-demo-for-people-to-show-their-first-image/983


#6

@JO3RI
Awesome test sketch! It looks like a pretty good way of putting an image onto your Arduboy. I was pretty happy to see you post that, and it inspired me to add an .ino generator to the app. :grin:

@ekem
At this point, I’m not quite sure how to approach changing the pixel colors. When I designed this app, the workflow I pictured was to paste a proper monochrome image straight from your pixel art editor tool. With it, you could get code from an image, almost as fast as a fancy autohotkey script. Before adding image modification, I think it would be good to think about the domain of problems that are going to be solved with it. If anyone’s got suggestions, I’m all ears!


(Ross) #7

I might think about offering a slider that can effect the cutoff for applying the choma key effect. So convert the image to greyscale, then apply the cutoff. You can see how a simlair function works as far as parameters in the mathlab API. This can all be done with a JS canvas element.

http://www.mathworks.com/help/images/ref/im2bw.html

And then an implementation from Octave Forge
https://sourceforge.net/p/octave/image/ci/default/tree/inst/im2bw.m


#8

Although that is a nice feature, real 1-bit pixel art is best drawn as 1-bit pixel art, not converted.
(just saying) :smiley:


(Ross) #9

Lies! It depends on how good your algorithm is to go back and forth. There is a use for every tool, it depends on what you are creating.


#10

Well … not from an artistic point of view …
But indeed code wise you can achieve a great result with the correct tools.

anyway, not the point of @fuopy his post.


(Ross) #11

Moving conversation to new topic, “Art and the meaning of everything”.


#12

Sorry for the late reply, yesterday was pretty eventful for me!

@JO3RI, while it is true that the application is designed for a specific image-conversion workflow, I’d like to restate that I think new features are cool! I appreciate that you understand the project’s original vision, however!

@ekem, I checked out that binary image conversion page; pretty awesome!

I think that, once editing tools are added, this will become more of an editing program. While I’m still not sure exactly how the specific tool suggested would be used in an effective workflow for the current design of the application, I know it will be 100% clear when the application is redesigned to include editing tools.

I am interested in making an online image editor, however designing an editor has more caveats than a simple conversion program. One fun issue is going to be introducing a clean layout that provides a fast workflow for modifying images. Another sizable issue that’s a bit troubling is deciding what to do with persistent data. Losing a work in progress can be rough! Before tackling this, I’m looking up more about the options offered for saving data in client-side Javascript.

Introducing persistent sessions brings up some interesting new issues. One is cleaning up after you’re done. I’d like for the data to be cleared completely when the tab is closed, but that doesn’t work well in the situation of a browser crashing, or accidentally closing a tab. At least for now, I think that can just be labelled as design issue, as there seem to be a lot of ways to store data.

This is looking like it’s going to turn into a really fun project!

Anyway, another reason it took a while for me to reply was because I had to think about how tools could be added to the application. I wasn’t sure whether this application would get too complicated if tools were added, and spent most of the day thinking back to it. I decided that it would be easier to make a separate application which includes the editing tools, rather than to integrate them into this one. That decision is based on the issues brought up above. In what I have written, I still haven’t touched even a quarter of potential pros and cons to this decision, so I’m interested in any input! (And thanks for your suggestions, too! :smiley: )


(Ross) #13

You can store images in cookies as base64, or in localStorage, or you can ask the client to download a zip, or store the image on the server and attach it to a hash to link it to a specific user. There are a lot of ways to do it, but this SO should offer some opinions/approaches.

If you need some suggestions on how to host this, I can offer some clues there.

Because this is a javascript app, I would totally look at npm node.js as your web framework.


#14

I think a real online drawing program would be very cool indeed.

I’m using “sprite something” a lot on my iPhone and it has all the basic needs for sprite drawing (sprites, sprites with frames, tilemaps, drawing functions). As far as needed function, you might have a look at it.

I also think javascript is the way to go.

Although it is tempting to make something useable for other formats, I’m really convinced an app specifically designed for Arduboy and it’s functions would be the best option.

The most important function will be the export to data function.


(Ross) #15

If ya’ll are serious about putting an image editor online, I would look at forking an existing one.

There is a possible example. I haven’t researched all that is out there, but it would be a matter of adding an “Export for Arduboy” option, and then hosting the application somewhere.


(Matt) #16

I’ve been using @fuopy 's online image converter to generate the array of constants required for drawBitmap(); But I would like some way to test this without uploading and running code on an Arduboy. I’d also like to understand the format of data required for drawBitmap(); so that I can programatically generate image data ready for drawBitmap();. Does anyone know if there is a “reverse” arduboy-image-converter? i.e. you type (or paste) in an array of hex values and get an image drawn.

Cheers.


(Matt) #17

…so i’ve just had a hunt for more information and it looks like the online image converter can only be used with drawSlowXYBitmap();. I dont see much point in saving data to program memory in a format that only uses the slow draw method.

I guess what i’m looking for is a concise description of the image data format used for fast drawing using drawBitmap();. :yum:


#18

Hey, the image converter uses the fast DrawBitmap, not the slow DrawXYBitmap! Try downloading the test sketch it generates to see for yourself! :slight_smile:

Here’s a description of the format I posted in another thread:
How would one create “Graphics, Sprites, Tilesets”?


(Matt) #19

Thanks, I ended up working through the drawBitmap(); code and a little trial and error and worked out the format for myself. It seems pretty simple now. Bitmaps of varying width (specifically non-divisible by 8) seem straight forward but I haven’t yet got my head around heights that are non-divisible by 8.

I’m assuming a bitmap 8 pixels wide and 9 pixels high would end up “wasting” some program memory as there would be a set of 8 bytes to represent the last 8 pixels (9th row)… am i right?


#20

You pretty much got it. Basically you can think of an image as broken up into horizontal pages. Each page is made up of one pixel wide columns. A column of a page is one byte, where each bit represents a pixel vertically. This means that the minimum image size you can store is 1 pixel wide and 8 pixels tall. The horizontal page can extend to whatever size you need, be it 8 pixels wide, or a full 128 pixels wide.

Up until now this makes sense for images that aren’t taller than 8 pixels, but what happens when you want to store an image that is 9 pixels tall? You have to store the data for the second horizontal page, which means you are now storing data for an image 16 pixels tall and however wide you want.

The stored image format is simply an array of 8 pixel tall column bytes; it doesn’t contain any information on how wide or tall the image is. When you call the DrawBitmap function, you pass it the size of the image so it can decide when to add a sort of “line break” to the image when drawing.