Board Prep and Overview

This project uses the typical procedure for prepping the MONSTER M4SK, plus, it follows the basic process for playing animated GIFs on a SAMD51 board with Arcada display.

Our MONSTER M4SK guide walks through the process of setting up the board for the first time. And, our Arcada Animated GIF Display guide goes over the specifics of GIF playback. There are a few steps to these processes:

  1. Get the onboard flash filesystem working. If your MONSTER M4SK board already shows up as a flash drive called “CIRCUITPY,” you can skip these next steps and go straight to converting your GIFs!
  2. Create a directory on the CIRCUITPY drive called /gifs
  3. Add animated .gif files to the /gifs directory you just made
  4. Bootload the M4SK with the animated GIF code .uf2

Convert your GIF

The good news is that you do not have to do any particularly hairy transformations with your GIFs to get them to display - you don't have to make them into header files or anything. However, we do have to perform some steps to make them appear nicely on the TFT you're using

  • Reduce size to no larger than 240 wide x 240 tall
  • Remove transparent pixels (sometimes called de-optimization) because it slows down our decoding
  • Reduce colors so we don't have to work as hard to decode
  • Reduce frames if it makes sense to

This GIF viewer isn't good for detailed, high-frame-rate GIFs. Keep it simple and you'll be happy with the results!

This page from the Arcada GIF Display guide walks you through the entire process!

Here's an example GIF file you can check out if you like. Download and uncompress the .zip file below.

Good and Bad Candy GIFs

With the exception of everyone knowing that candy corn is the best Halloween candy in the whole entire world, there may be some allowances for personal preference.

So, you may want to customize your Good and Bad Candy GIFs. But if you want to get started with my picks, here are the GIFs! Download and uncompress the .zip file below.

UF2 File

Once you've got a GIF (or a few GIFs) ready, it's time to add the code that will play them for you, and then put the GIFs on the board. Get back to bootloader mode on your board by double clicking the reset button. You'll see the MASKM4BOOT drive appear.

Then, download the UF2 file linked here and drag onto the board.

GIF Drag

Once the file finishes copying, the board will automatically reboot, now running the GIF player code! Plus, it will show up as a CIRCUITPY drive.

Create a directory on the CIRCUITPY drive called /gifs

Then, simply drag the GIF files into the /gifs directory you made on the M4SK's CIRCUITPY drive.

Config File

The last step is to save this configuration file to the root directory of CIRCUITPY drive. It is the arcada_config.json file. You can make adjustments here to settings such as brightness and GIF playback time.

Download: file
    {"volume":255,"brightness":255,"seconds_per_gif":5}

See this page for more details on the configuration file.

You can press the A button (S10 on the PCB) on the MONSTER M4SK and it will start playing your animated GIFs! Press the Up button (S11 on the PCB) to advance to the next GIF, or Down button (S9 on the PCB) to go back to the previous one.

If you want to get even fancier, you can build the code in Arduino using the Arcada libraries. Have a look at this guide for details.

Next, we'll mount the MONSTER M4SK to the candy bucket.

This guide was first published on Sep 18, 2019. It was last updated on Sep 18, 2019.

This page (Add GIFs to your MONSTER M4SK) was last updated on Oct 30, 2020.