Feature request: Add unit8_t version to "Export as C file" for single color images

[techniq]

First let me thank you for this awesome tool, it's exactly what I was looking for (simple online pixel editor).

I've just recently have been experimenting with using piskel to create some designs for an LED Matrix and currently have a manual step I was looking to remove.

The LED Matrix arduino library I'm using expects a uint8_t array with a length of 16 (since it's an 8x16 led matrix :) ). As of right now, I am able to resize Piskel's canvas to be 16x8, but exporting as a C file always returns an unit32_t array. I know this is due to color/alpha data, but since I'm creating a single (black/transparent) to turn LEDs on/off, I just need unit8_t data.

Currently what I do is export the unit32_tversion...

static const uint32_t new_piskel_data[1][128] = {
{
0x00000000, 0x00000000, 0x00000000, 0x00000000, 0x00000000, 0x00000000, 0x00000000, 0x00000000, 0x00000000, 0x00000000, 0x00000000, 0x00000000, 0x00000000, 0x00000000, 0x00000000, 0x00000000, 
0x00000000, 0x00000000, 0xff000000, 0xff000000, 0xff000000, 0x00000000, 0x00000000, 0x00000000, 0x00000000, 0x00000000, 0x00000000, 0xff000000, 0xff000000, 0xff000000, 0x00000000, 0x00000000, 
0x00000000, 0xff000000, 0x00000000, 0x00000000, 0x00000000, 0xff000000, 0x00000000, 0x00000000, 0x00000000, 0x00000000, 0xff000000, 0x00000000, 0x00000000, 0x00000000, 0xff000000, 0x00000000, 
0xff000000, 0x00000000, 0x00000000, 0x00000000, 0x00000000, 0x00000000, 0xff000000, 0x00000000, 0x00000000, 0xff000000, 0x00000000, 0x00000000, 0x00000000, 0x00000000, 0x00000000, 0xff000000, 
0xff000000, 0x00000000, 0x00000000, 0x00000000, 0x00000000, 0x00000000, 0xff000000, 0x00000000, 0x00000000, 0xff000000, 0x00000000, 0x00000000, 0x00000000, 0x00000000, 0x00000000, 0xff000000, 
0xff000000, 0x00000000, 0x00000000, 0xff000000, 0xff000000, 0x00000000, 0xff000000, 0x00000000, 0x00000000, 0xff000000, 0x00000000, 0x00000000, 0xff000000, 0xff000000, 0x00000000, 0xff000000, 
0x00000000, 0xff000000, 0x00000000, 0xff000000, 0xff000000, 0xff000000, 0x00000000, 0x00000000, 0x00000000, 0x00000000, 0xff000000, 0x00000000, 0xff000000, 0xff000000, 0xff000000, 0x00000000, 
0x00000000, 0x00000000, 0xff000000, 0xff000000, 0xff000000, 0x00000000, 0x00000000, 0x00000000, 0x00000000, 0x00000000, 0x00000000, 0xff000000, 0xff000000, 0xff000000, 0x00000000, 0x00000000
}
};

...and manually convert it to...

uint8_t frames[16] = {
  B00011100,
  B00100010,
  B01000001,
  B01000111,
  B01000111,
  B00100010,
  B00011100,
  B00000000,
  B00000000,
  B00011100,
  B00100010,
  B01000001,
  B01000111,
  B01000111,
  B00100010,
  B00011100
};

or even as integers

uint8_t frames[16] = {28,34,65,71,71,34,28,0,0,28,34,65,71,71,34,28};

Binary is quicker to perform manually, although the integers (or hex) produces a smaller result. The binary way gives a little more human readable format as well.

Lastly, along with this, it would be helpful if I could just copy the resulting array as text from Piskel instead of downloading the file, opening it in some editor, and grabbing the lines there.

I spent some time looking at software to create designs for the LCD, but many were Windows-only or would only convert a bitmap/image file, and thus would need to use a separate image editor (like Gimp) to create the images, so needless to say piskel is a much better solution for me.

[juliandescottes]

Hi, that sounds really cool!

I think we can easily come up with a script that will generate the text you want and let you store it as a bookmarklet for now.

Your example doesn't take additional frames into account. Are you only ever interested in single frame images?

[techniq]

@juliandescottes bookmarklet would work, especially to test things out.

I've only just started experimenting with the LED matrix and Piskel and thus have only been using a single frame, but I plan to create and use multiple frames soon. So far I've only displayed a static image but it won't be too difficult to change the image from user input on the mBot I'm using as it has an IR remote (but also takes commands over bluetooth / phone app)

[juliandescottes]

@techniq Have a look at the two following gists:

https://gist.github.com/juliandescottes/67627f1e2ea093cd9fd25deebd7a6135 https://gist.github.com/juliandescottes/b2a027d3daf9827e538c235e85c0fdac

Both contain a bookmarklet that will hopefully open a new tab containing the text you need. Was not sure about where was the width supposed to go, so I made a "natural" version and a rotated one.

Give it a try and let me know if you need modifications.

[techniq]

@juliandescottes Thanks for the quick turnaround. I gave it a quick test using the rotated one and it looks to provide what I need, with a minor tweak (array size):

Current produces:

uint8_t frames[8] = {  B00000000,  B00000000,  B00000000,  B00000000,  B01111110,  B00001000,  B00001000,  B01111110,  B00000000,  B00000000,  B00101110,  B00000000,  B00000000,  B00000000,  B00000000,  B00000000 }; 

but should be

uint8_t frames[16] = {  B00000000,  B00000000,  B00000000,  B00000000,  B01111110,  B00001000,  B00001000,  B01111110,  B00000000,  B00000000,  B00101110,  B00000000,  B00000000,  B00000000,  B00000000,  B00000000 }; 

which stems from the following line

var str = 'uint8_t frames[' + height + '] = {' + HTML_NEW_LINE;

should be

var str = 'uint8_t frames[' + width + '] = {' + HTML_NEW_LINE;

(opposite should be done for the non-rotated version)

I updated my bookmarklet, but thought you might want to update your gists.

Thanks again.

[juliandescottes]

Ah sure makes sense, thanks for the feedback. I of course only tested with square sprites, which is not great to spot this kind of issues :)

Updated the gists and bookmarklets.

Glad it's working for you. In the long run, I need to decide if we need something extra for maintenance here My main issue with custom export formats is that I can't just have a button in the UI for each one of them, and they usually need a pretty big description. But it would still be nice to be able to access them from the application.

Maybe something as simple as having a link to a page on Github that would list existing custom exports that can be used.

[machinaeXlasse]

Hello, for creating images for a 200x200px e-ink display run by a wemos (arduino IDE able) micro controller I am as well very much interested in this feature! Though concerning the format I would need a 8bit Hex array (Hope I'm right with the vocabulary) i.e. like this for a 32x32px one color b/w picture:

const unsigned char testimage[128] {
0x00,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,0x20,0x00,0x01,0x40,0x50,0x00
,0x00,0x80,0x20,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x08,0x00,0x00
,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x08,0x00,0x18,0x00
,0x04,0x00,0x70,0x00,0x03,0xc0,0x80,0x00,0x00,0x3f,0x00,0x00,0x00,0x00,0x00,0x00
,0x00,0x00,0x00,0x00,0x00,0x00,0x02,0x20,0x00,0x00,0x05,0x50,0x00,0x00,0x08,0x88
,0x00,0x00,0x08,0x08,0x00,0x00,0x04,0x10,0x00,0x00,0x02,0x20,0x00,0x00,0x01,0x40
,0x00,0x00,0x00,0x80,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00
};

And I don't seem to be clever enough to adjust your nice export snippet.

Exporting more then one frame would be very helpful too to create several "pages".

Thanks for this beautiful tool! Seems to be perfect for creating small resolution display images.

[GaDalamar]

Any chance this could be used to create a uint16_t version?