Overlay on gif frame


Im trying to overlay some numbers on top of the background layer while gifs are playing on it… Ive managed to achieve this but with every new gif frame the overlayed numbers are deleted, as a result the numbers are there on the background layer on top of the gif frames but flickering due to them being overwritten with each gif frame…

What i need to do is draw the string of numbers on top of the gif frame before the gif frame is displayed, that way the numbers will appear with each frame of the gif and will not flicker…
Can someone point me to where the gif frame is created as i think if i put my string there it would eliminate the flicker…


Hi Daniel,

Best to use an indexed color layer for that, follow the MatrixClock example, and add the indexed color layer to your GIF sketch

Gday Louis

Im already using the indexed layer for a clock display over the gifs, i would use it for this but i want to have a different colour at the same time as the clock…id use the scrolling layer but i have not enough resources left to include it…

Is it possible to draw a string onto the gif frames so i dont get the flicker…

Do you have enough resources to use a second indexed layer? The MultipleTextLayers example shows an example of using multiple transparent layers.

If you want to draw directly to the background layer, add your code inside updateScreenCallback() in the AnimatedGIFs example sketch. Put it before the backgroundLayer.swapBuffers() call

No i didnt have enough to add another layer, but with your advice i have it working displayed on the background layer…

Thanks again Louis

1 Like

Hi Louis’

Just a quick question…

Drawing directly on the background layer has the side effect that if i say draw the number 2 and then draw the number 1 in its place the remnants of the number 2 are still displayed and will be until i either clear the screen which is not suitable as the gif goes black for a frame, or over a few frames the gif will clean up the remnants of the number… As only the changing parts of the gif are updated each frame remnants are left behind until that part of the gif changes and sometimes certain gifs have parts of the screen that are static so it never updates that part of the frame…

Is there a way to just clear a string or character by itself? so if i print “1” can i clear that “1” in any way that doesnt clear the entire screen and just clears the “1”?

I realize i should be using another layer to do what im doing but resources only allow me to use the background layer…

Hope that makes sense.


Hi Daniel,

When you write the number to the screen, you replace the GIF frame data, so it’s lost. You can draw the same number of characters each time, and use the drawString() option to clear the background. You’ll have a solid color behind the text, which you may not want:

void SmartMatrix::drawString(int16_t x, int16_t y, const rgb24& charColor, const rgb24& backColor, const char text[])

You could use repeated calls to getPixel() to read the GIF frame data from behind the text, store it somewhere, then put it back when you’re done with drawPixel().

Thanks Louis’

I had started to use getpixel(), almost have it working correctly just a few tweeks i think…

While i have you, im sure ive missed it but is there a page or site that lists all of the functions and syntax for smart matrix somewhere?

Hi Daniel,

There’s no API doc, but you can use the example code in FeatureDemo which uses pretty much all of the features in the SmartMatrix Library as a reference.

Gday Louis
No problem thats what ive been referencing… Are there any functions that are not used in that example?
Also what reason would it be or what am i doing wrong that when i use indexedLayer drawstring im limited to 10 characters?

If there are functions not in FeatureDemo, I’m not aware of them. I tried to be complete, but could have overlooked something.

void SMLayerIndexed<RGB, optionFlags>::drawString(int16_t x, int16_t y, uint8_t index, const char text []) {
    // limit text to 10 chars, why?
    for (int i = 0; i < 10; i++) {

The code limits drawString to 10 characters, and both the code and I don’t know why. You can increase that if you want. If you want it to be longer, can you open an GitHub Issue so this gets into a future release? Thanks!

Wow i looked for ages trying to find that and couldn’t, i must be blind thank you for advising…Will do…