Bitmaps on Indexed layer

Dann · November 13, 2016, 7:22am

Hi everyone’

Was wondering if its possible to display colored bitmaps on the indexed layer?

Thanks
Daniel

Louis · November 15, 2016, 10:36pm

Hi Dann,

Currently the indexed layer only supports a single color (and transparent). In the future it should support up to 8-bit color, which might work for displaying multi-color bitmaps. That’s not going to be in the next couple releases though, where I’m focusing on adding support for APA102 LED strips and more chipsets (e.g. Particle Photon)

Dann · November 16, 2016, 4:06am

Cool, no problem just hoping… Wanted to add some shading to text on the indexed layer to stop it from being lost in the background but not a big deal i can work around…
Thanks for the update.

Dann · February 18, 2018, 7:59am

Is the indexed layer able to support multiple colors yet ?
Also im playing with bitmaps on the indexed layer and was wondering if there is a converter that will output the required format that is used as below ?

        _______X, ________,
        ______XX, X_______,
        ______XX, X_______,
        ______XX, X_______,
        _____XXX, XX______,

Thanks
Daniel

Louis · February 18, 2018, 8:39am

Hi Daniel, sorry, no progress on this.

That format isn’t required, it’s just added as a convenience to make simple bitmaps with text instead of numbers. You can see in MatrixFontCommon.h how those macros convert to numbers, e.g.:

0x01, 0x00,
0x03, 0x80,
0x03, 0x80,
0x03, 0x80,
0x07, 0xC0

You can probably find a converter that outputs bitmaps in numbers like that.

Dann · February 18, 2018, 10:42am

cool, thanks for that Louis.

Dann · March 3, 2018, 3:09pm

Ok i found a good converter and i now can display mono bitmaps but im a little stuck. I have multiple bitmaps ( 60 ) which form animations when displayed one after another and rite now im just drawing them one after the other with: indexedLayer.drawMonoBitmap

Is there a way to select each bitmap without having 60 seperate drawMonoBitmap lines ??

Thanks
Daniel

Louis · March 3, 2018, 5:53pm

Hi Daniel,

I’m not exactly sure how you’re defining the bitmaps, but if you put them in an array then you could access them by index with code. If that doesn’t help, maybe post your code (through Github Gist), and I’ll take a look.

Dann · March 4, 2018, 5:08am

Hi Louis’
Im sure its something simple that im just not cluing on too.
They are stored as arrays just like in your examples. Im simply calling them one after the other like below:

indexedLayer.drawMonoBitmap(0, 0, ZeroBitmapWidth, ZeroBitmapHeight, 1, ZeroBitmap60);

uint8_t ZeroBitmap60[]=
{
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x0F, 0xF0, 0x0F, 0xF0, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x03, 0xF0, 0x03, 0xF0, 0xF0, 0x30, 0xF0, 0x30, 0xFC, 0x00, 0xFC, 0x00, 0xF0, 0xC0, 0xF0, 0xC0, 0xF0, 0xF0, 0xF0, 0xF0, 0xF0, 0xF0, 0xF0, 0xF0, 0xF0, 0xF0, 0xF0, 0xF0, 0xF0, 0xF0, 0xF0, 0xF0, 0xF0, 0xF0, 0xF0, 0xF0, 0xF0, 0xF0, 0xF0, 0xF0, 0xFF, 0xF0, 0xFF, 0xF0, 0xFF, 0xF0, 0xFF, 0xF0,
};

Any help would be appreciated.
Thanks
Daniel

Louis · March 4, 2018, 11:47am

Hi Daniel,

I think you want an array of arrays, or combine all bitmaps into one big array and use an offset multiplied by the frame number to find the frame you want to display.

Dann · March 4, 2018, 1:48pm

Thanks Louis’

I started looking into using one big array when i first started like you suggest but i couldnt work out how to change the below line to allow for the offset.

indexedLayer.drawMonoBitmap(0, 0, ZeroBitmapWidth, ZeroBitmapHeight, 1, ZeroBitmap60);

I’ll look into your array of arrays idea.
Thanks again
Daniel

Louis · March 4, 2018, 4:05pm

Taking your earlier example code:

uint8_t ZeroBitmap60[]=
{
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x0F, 0xF0, 0x0F, 0xF0, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x03, 0xF0, 0x03, 0xF0, 0xF0, 0x30, 0xF0, 0x30, 0xFC, 0x00, 0xFC, 0x00, 0xF0, 0xC0, 0xF0, 0xC0, 0xF0, 0xF0, 0xF0, 0xF0, 0xF0, 0xF0, 0xF0, 0xF0, 0xF0, 0xF0, 0xF0, 0xF0, 0xF0, 0xF0, 0xF0, 0xF0, 0xF0, 0xF0, 0xF0, 0xF0, 0xF0, 0xF0, 0xF0, 0xF0, 0xFF, 0xF0, 0xFF, 0xF0, 0xFF, 0xF0, 0xFF, 0xF0,
};

uint8_t ZeroBitmap61[]=
{
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x0F, 0xF0, 0x0F, 0xF0, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x03, 0xF0, 0x03, 0xF0, 0xF0, 0x30, 0xF0, 0x30, 0xFC, 0x00, 0xFC, 0x00, 0xF0, 0xC0, 0xF0, 0xC0, 0xF0, 0xF0, 0xF0, 0xF0, 0xF0, 0xF0, 0xF0, 0xF0, 0xF0, 0xF0, 0xF0, 0xF0, 0xF0, 0xF0, 0xF0, 0xF0, 0xF0, 0xF0, 0xF0, 0xF0, 0xF0, 0xF0, 0xF0, 0xF0, 0xFF, 0xF0, 0xFF, 0xF0, 0xFF, 0xF0, 0xFF, 0xF0,
};

indexedLayer.drawMonoBitmap(0, 0, ZeroBitmapWidth, ZeroBitmapHeight, 1, ZeroBitmap60);
indexedLayer.drawMonoBitmap(0, 0, ZeroBitmapWidth, ZeroBitmapHeight, 1, ZeroBitmap61);

You could put into one big array and use an offset:

uint8_t ZeroBitmapCombined[]=
{
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x0F, 0xF0, 0x0F, 0xF0, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x03, 0xF0, 0x03, 0xF0, 0xF0, 0x30, 0xF0, 0x30, 0xFC, 0x00, 0xFC, 0x00, 0xF0, 0xC0, 0xF0, 0xC0, 0xF0, 0xF0, 0xF0, 0xF0, 0xF0, 0xF0, 0xF0, 0xF0, 0xF0, 0xF0, 0xF0, 0xF0, 0xF0, 0xF0, 0xF0, 0xF0, 0xF0, 0xF0, 0xF0, 0xF0, 0xF0, 0xF0, 0xF0, 0xF0, 0xFF, 0xF0, 0xFF, 0xF0, 0xFF, 0xF0, 0xFF, 0xF0,

0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x0F, 0xF0, 0x0F, 0xF0, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x03, 0xF0, 0x03, 0xF0, 0xF0, 0x30, 0xF0, 0x30, 0xFC, 0x00, 0xFC, 0x00, 0xF0, 0xC0, 0xF0, 0xC0, 0xF0, 0xF0, 0xF0, 0xF0, 0xF0, 0xF0, 0xF0, 0xF0, 0xF0, 0xF0, 0xF0, 0xF0, 0xF0, 0xF0, 0xF0, 0xF0, 0xF0, 0xF0, 0xF0, 0xF0, 0xF0, 0xF0, 0xF0, 0xF0, 0xFF, 0xF0, 0xFF, 0xF0, 0xFF, 0xF0, 0xFF, 0xF0,
};

indexedLayer.drawMonoBitmap(0, 0, ZeroBitmapWidth, ZeroBitmapHeight, 1, ZeroBitmapCombined + (70 * 0));
indexedLayer.drawMonoBitmap(0, 0, ZeroBitmapWidth, ZeroBitmapHeight, 1, ZeroBitmapCombined + (70 * 1));

Dann · March 5, 2018, 11:22am

Your a legend Louis, i went back and added the offset and all works as planned…

Thanks for the help
Daniel