# Arcada Animated GIF Display

## Overview

Animated GIFs are a staple of the Internet - and thanks to the speedy SAMD51 chip and our Arcada display library, we can show animated GIFs right from the onboard filesystem for keeping your favorite memes with you all the time even when the Internet is down!

https://youtu.be/rbINZkvm6f4

In this project we'll show you how to use some nifty Arduino C++ code that can decode GIF files, and display them on a TFT display. Behind the scenes we use DMA for fast display updates so you don't see any flickering.

Info: 

We recommend sticking to GIFs that don't have high frame rates, lots of colors, or need to run at full-speed to look good. Plenty of GIFs will look just fine, just don't expect highest quality / high definition!

## Supported Boards

The GIF decoder builds on Adafruit Arcada which supports the SAMD51 chipset and color GFX displays. At this time we recommend the following boards which 'just work' and also have touch/joypad controls:

### Adafruit PyPortal - CircuitPython Powered Internet Display

[Adafruit PyPortal - CircuitPython Powered Internet Display](https://www.adafruit.com/product/4116)
 **PyPortal** , our easy-to-use IoT device that allows you to create all the things for the “Internet of Things” in minutes. Make custom touch screen interface GUIs, all open-source, and Python-powered using tinyJSON / APIs to get news, stock, weather, cat photos,...

In Stock
[Buy Now](https://www.adafruit.com/product/4116)
[Related Guides to the Product](https://learn.adafruit.com/products/4116/guides)
![Front view of a Adafruit PyPortal - CircuitPython Powered Internet Display with a pyportal logo image on the display. ](https://cdn-shop.adafruit.com/640x480/4116-00.jpeg)

### Adafruit PyGamer Starter Kit

[Adafruit PyGamer Starter Kit](https://www.adafruit.com/product/4277)
**Please note: you may get a royal blue _or_ purple case with your starter kit (they're both lovely colors)**

What fits in your pocket, is fully Open Source, and can run CircuitPython, MakeCode Arcade or Arduino games you write yourself? That's right,...

Out of Stock
[Buy Now](https://www.adafruit.com/product/4277)
[Related Guides to the Product](https://learn.adafruit.com/products/4277/guides)
![Adafruit PyGamer Starter Kit with PCB, enclosure, buttons, and storage bag](https://cdn-shop.adafruit.com/640x480/4277-08.jpg)

### Adafruit PyGamer for MakeCode Arcade, CircuitPython or Arduino

[Adafruit PyGamer for MakeCode Arcade, CircuitPython or Arduino](https://www.adafruit.com/product/4242)
What fits in your pocket, is fully Open Source, and can run CircuitPython, MakeCode Arcade or Arduino games you write yourself? That's right, it's the **Adafruit PyGamer!** We wanted to make an entry-level gaming handheld for DIY gaming, and maybe a little...

Out of Stock
[Buy Now](https://www.adafruit.com/product/4242)
[Related Guides to the Product](https://learn.adafruit.com/products/4242/guides)
![Angled shot of Adafruit PyGamer for MakeCode Arcade, CircuitPython or Arduino.](https://cdn-shop.adafruit.com/640x480/4242-00.jpg)

### Adafruit PyBadge for MakeCode Arcade, CircuitPython, or Arduino

[Adafruit PyBadge for MakeCode Arcade, CircuitPython, or Arduino](https://www.adafruit.com/product/4200)
What's the size of a credit card and can run CircuitPython, MakeCode Arcade or Arduino? That's right, its the **Adafruit PyBadge!** We wanted to see how much we could cram into a ​3 3⁄8 × ​2 1⁄8 inch rounded rectangle, to make an all-in-one dev board with...

In Stock
[Buy Now](https://www.adafruit.com/product/4200)
[Related Guides to the Product](https://learn.adafruit.com/products/4200/guides)
![Angled shot of a Adafruit PyBadge for MakeCode Arcade, CircuitPython, or Arduino. ](https://cdn-shop.adafruit.com/640x480/4200-01.jpg)

### Adafruit PyBadge LC - MakeCode Arcade, CircuitPython, or Arduino

[Adafruit PyBadge LC - MakeCode Arcade, CircuitPython, or Arduino](https://www.adafruit.com/product/3939)
What's the size of a credit card and can run CircuitPython, MakeCode Arcade or Arduino even when you're on a budget? That's right, it's the  **Adafruit PyBadge LC!**  We wanted to see how much we could cram into a ​3 3⁄8 × ​2 1⁄8 inch...

In Stock
[Buy Now](https://www.adafruit.com/product/3939)
[Related Guides to the Product](https://learn.adafruit.com/products/3939/guides)
![Angled Shot of Adafruit PyBadge - Low Cost. ](https://cdn-shop.adafruit.com/640x480/3939-05.jpg)

# Arcada Animated GIF Display

## 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 320 wide, 240 tall for PyPortal, and 160x128 for PyBadge or PyGamer (check your hardware to see the size you want to target)
- 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!

# GIF by Example

Lets show an example GIF conversion so you can see how the process happens.

[We will convert this BadgerBadger GIF from Giphy](https://giphy.com/gifs/badger-zXHZWGLWNQkrS)

You can download it via this zip link:

[badger.zip](https://cdn-learn.adafruit.com/assets/assets/000/073/445/original/badger.zip?1553047844)
# Step one - Resize GIF

We'll use [ezgif.com](https://ezgif.com/) for these steps, its free and we find it works really well!

Click on **Resize**

![](https://cdn-learn.adafruit.com/assets/assets/000/073/444/medium800/arduino_compatibles_image.png?1553047768)

Upload the original GIF and click **Upload!**

![arduino_compatibles_image.png](https://cdn-learn.adafruit.com/assets/assets/000/073/446/medium640/arduino_compatibles_image.png?1553047919)

Now its uploaded,

- Set the **width** and **height** to be 320 and 240 (you can also set just one, as long as the other is no-greater than the max size)
- Use **ImageMagick + coalesce** as the resize method. **Don't use Gifsicle!**
- For the aspect ratio, you can stretch, center or force-aspect.

If you're not sure which one you want, keep going to resize and look at the preview, if you don't like it, change and resize again!

![](https://cdn-learn.adafruit.com/assets/assets/000/073/448/medium800/arduino_compatibles_image.png?1553048031)

Click resize to get your preview! Check the width is no more than 320, and the height is no more than 240 pixels

![](https://cdn-learn.adafruit.com/assets/assets/000/073/449/medium800/arduino_compatibles_image.png?1553048215)

You can use the GIF as is, but we found that you can do some optimizations on it to make smaller and faster-running

# Step 2 - Optimize

You can make a backup of the smaller GIF now. Then click **Optimize**

![](https://cdn-learn.adafruit.com/assets/assets/000/073/450/medium800/arduino_compatibles_image.png?1553048322)

The first and easiest is color reduction and dithering. The fewer colors we have, the less decompression we have to do. Especially with a cartoony GIF like this, we can set the colors to be 32 and its not terribly noticable

![](https://cdn-learn.adafruit.com/assets/assets/000/073/451/medium800/arduino_compatibles_image.png?1553048448)

The new GIF has banded colors on the grass but overall is pretty similar!

![](https://cdn-learn.adafruit.com/assets/assets/000/073/452/medium800/arduino_compatibles_image.png?1553048483)

# Reduce Frames

Another very effective way to reduce the size and increase speed is to remove duplicate frames. Fewer frames means its easier to decode!

Try **Remove duplicate frames** and start with a **Fuzz** factor of around 25%, you can preview the GIF to see if you can fuzz higher (more savings but maybe it starts to look stuttery)

![](https://cdn-learn.adafruit.com/assets/assets/000/074/128/medium800/arduino_compatibles_image.png?1554575150)

Whatever you do, **don't add transparency** because it will make the file smaller but the decoding bigger!

OK here's our new final GIF:

![](https://cdn-learn.adafruit.com/assets/assets/000/073/453/medium800thumb/arduino_compatibles_badger.jpg?1553048642)

[optimized_badger.zip](https://cdn-learn.adafruit.com/assets/assets/000/073/454/original/optimized_badger.zip?1553048593)
# Arcada Animated GIF Display

## Quickstart

You can get started instantly with these UF2's - doubleclick Reset to put your board into **BOOT** mode, and drag these **UF2** files over!

If you are using SD card storage, make a directory called **gifs** on the SD card and put your GIFs in there

If you are using QSPI storage, and at some point you had CircuitPython loaded, use a USB cable, click reset to have it show up as a disk drive. Make a directory called **gifs** on the SD card and put your GIFs in there. If you've never loaded CircuitPython, check the Loading GIFs page up ahead.

For boards that have both SD and QSPI storage, the gif player will default to SD if its found, and if not, fall back to QSPI

## PyBadge or EdgeBadge using QSPI for storage
[PYBADGE_QSPI.UF2](https://cdn-learn.adafruit.com/assets/assets/000/076/103/original/PYBADGE_QSPI.UF2?1558924960)
## PyGamer using QSPI or SD for storage
[PYGAMER_GIFPLAYER.UF2](https://cdn-learn.adafruit.com/assets/assets/000/077/848/original/PYGAMER_GIFPLAYER.UF2?1562536723)
## PyPortal using QSPI or SD for storage
[PYPORTAL_SD.UF2](https://cdn-learn.adafruit.com/assets/assets/000/076/108/original/PYPORTAL_SD.UF2?1558925777)
[PYPORTAL_QSPI.UF2](https://cdn-learn.adafruit.com/assets/assets/000/076/109/original/PYPORTAL_QSPI.UF2?1558925787)
# CLUE using QSPI for storage
[CLUE_gifplayer.UF2](https://cdn-learn.adafruit.com/assets/assets/000/088/446/original/CLUE_gifplayer.UF2?1581796491)
# Arcada Animated GIF Display

## Loading GIFs

# Getting GIFs onto the Filesystem
Alright so now you want your own favorite animations to show up, right? The fun part is getting those files onto your Arcada board. There's two options

- In the previous step, select using SD card storage UF2 then create a folder called **/gifs** on an SD card that is FAT formatted, and put your GIFs in there. Pop it into your SD card slot and you're good to go!
- Use the default QSPI flash storage, which you can access via the computer USB port if you use our pre-compiled code or compile with TinyUSB support

# Format QSPI with CircuitPython

For QSPI, you need to have it 'formatted' as a CircuitPython filesystem. The easiest way to do that is to load CircuitPython. You only have to do this once, then you can load more gifs or remove them over USB

(If you have an SD Card just format it with an SD card writer/reader on your computer)

Info: 

Start with your folder of GIFs

![arduino_compatibles_image.png](https://cdn-learn.adafruit.com/assets/assets/000/073/460/medium640/arduino_compatibles_image.png?1553060028)

With your board running the animated GIF Arduino code, plug it into USB and then double-click to launch the bootloader.

 

Grab **CURRENT.UF2** from the **xxxxBOOT** drive and drag onto your **gifs** folder on your computer, making a backup of your Arduino firmware

![arduino_compatibles_image.png](https://cdn-learn.adafruit.com/assets/assets/000/073/461/medium640/arduino_compatibles_image.png?1553060107)

Visit [https://circuitpython.org/downloads](https://circuitpython.org/downloads) and download the latest firmware for your board as a **UF2**

![arduino_compatibles_image.png](https://cdn-learn.adafruit.com/assets/assets/000/073/462/medium640/arduino_compatibles_image.png?1553060226)

Now drag the **circuitpython.UF2** onto **xxxxBOOT** , which will replace the Arduino code with CircuitPython runtime.

![arduino_compatibles_image.png](https://cdn-learn.adafruit.com/assets/assets/000/073/464/medium640/arduino_compatibles_image.png?1553060409)

Your **gifs** folder now has two UF2s - **CURRENT.UF2** and **circuitpython.UF2** (with the version info)

![arduino_compatibles_image.png](https://cdn-learn.adafruit.com/assets/assets/000/073/463/medium640/arduino_compatibles_image.png?1553060329)

In a few moments you'll get a **CIRCUITPY** drive, this may contain circuitpython code, files, etc. This is the 8 MB Flash storage on the board, available as a disk drive

 

Now's a good time to create a folder called **gifs** on the **CIRCUITPY** drive if you have not done so

![arduino_compatibles_image.png](https://cdn-learn.adafruit.com/assets/assets/000/073/465/medium640/arduino_compatibles_image.png?1553060495)

Drag all the GIFs you want to display into the **CIRCUITPY/gifs** folder

![arduino_compatibles_image.png](https://cdn-learn.adafruit.com/assets/assets/000/073/466/medium640/arduino_compatibles_image.png?1553060603)

Once you're done, you can re-load the GIF code by double-clicking the reset button again, to launch the **PORTALBOOT** bootloader drive, then dragging the backup you made before, **CURRENT.UF2** back on.

 

The board will automatically reboot into GIF playing mode!

![arduino_compatibles_image.png](https://cdn-learn.adafruit.com/assets/assets/000/073/467/medium640/arduino_compatibles_image.png?1553060752)

# Loading GIFs onto QSPI / SD over USB

Arduino doesn't have the ability to access both the SD and QSPI at the same time (because they both have a File type and are incompatible) so we can't copy files from SD to QSPI easily.

However Arduino can be convinced to show the QSPI or SD as USB mass storage, so you can have it show up as a disk drive.

For QSPI, you need to have it 'formatted' as a CircuitPython filesystem. The easiest way to do that is to load CircuitPython. You only have to do this once, as shown above.

For SD, format using any USB SD card formatter dongle.

You must have the board plugged into USB **with a Data/Sync Cable** then press the reset button. You should see a disk drive appear. It may be called `CIRCUITPY` or `USB Disk` (you can rename it if you like)

![](https://cdn-learn.adafruit.com/assets/assets/000/076/098/medium800/arduino_compatibles_image.png?1558924524)

You can explore the disk, if it doesn't yet contain a **gifs** folder, please make one now - then put a bunch of gifs in it!

![](https://cdn-learn.adafruit.com/assets/assets/000/076/099/medium800/arduino_compatibles_image.png?1558924600)

When you're done, be sure to **Eject** the disk - it wont disappear but it will flush/save all your gif data so it doesn't get corrupted

![](https://cdn-learn.adafruit.com/assets/assets/000/076/101/medium800/arduino_compatibles_image.png?1558924671)

# Arcada Animated GIF Display

## Arcada Libraries

OK now that you have Arduino IDE set up, drivers installed if necessary and you've practiced uploading code, you can start installing all the Libraries we'll be using to program it.

**There's a lot of libraries!**

# Install Libraries

Open up the library manager...

![](https://cdn-learn.adafruit.com/assets/assets/000/073/288/medium800/circuitpython_managelib.png?1552873775)

And install the following libraries:

## Adafruit Arcada

This library generalizes the hardware for you so you can read the joystick, draw to the display, read files, etc. without having to worry about the underlying methods

![](https://cdn-learn.adafruit.com/assets/assets/000/075/990/medium800/adafruit_products_image.png?1558676193)

Warning: 

## If you aren't running Arduino IDE 1.8.10 or later, you'll need to install _all_ of the following!

 

## Adafruit NeoPixel

This will let you light up the status LEDs on the front/back

![](https://cdn-learn.adafruit.com/assets/assets/000/073/289/medium800/circuitpython_adafruit_products_image.png?1552873804)

# Adafruit FreeTouch

This is the open source version of QTouch for SAMD21 boards

![](https://cdn-learn.adafruit.com/assets/assets/000/081/517/medium800/adafruit_products_image.png?1569566140)

# Adafruit Touchscreen

Used by Adafruit Arcada for touchscreen input (required even if your Arcada board does not have a touchscreen)

![](https://cdn-learn.adafruit.com/assets/assets/000/076/086/medium800/adafruit_products_image.png?1558904134)

## Adafruit SPIFlash

This will let you read/write to the onboard FLASH memory with super-fast QSPI support

![](https://cdn-learn.adafruit.com/assets/assets/000/073/292/medium800/circuitpython_adafruit_products_SPIFlash_lib.jpg?1552873977)

## Adafruit Zero DMA

This is used by the Graphics Library if you choose to use DMA

![](https://cdn-learn.adafruit.com/assets/assets/000/073/291/medium800/circuitpython_adafruit_products_zeroDMA_lib.jpg?1552873858)

## Adafruit GFX

This is the graphics library used to draw to the screen

![](https://cdn-learn.adafruit.com/assets/assets/000/073/293/medium800/circuitpython_image.png?1552874131)

If using an older (pre-1.8.10) Arduino IDE, locate and install **Adafruit\_BusIO** (newer versions do this one automatically).

## Adafruit ST7735

The display on the PyBadge/PyGamer & other Arcada boards

![](https://cdn-learn.adafruit.com/assets/assets/000/075/987/medium800/adafruit_products_image.png?1558675936)

## Adafruit ILI9341

The display on the PyPortal & other Arcada boards

![](https://cdn-learn.adafruit.com/assets/assets/000/076/110/medium800/adafruit_products_image.png?1558926181)

## Adafruit LIS3DH

For reading the accelerometer data, required even if one is not on the board

![](https://cdn-learn.adafruit.com/assets/assets/000/075/988/medium800/adafruit_products_image.png?1558676020)

## Adafruit Sensor

Needed by the LIS3DH Library, required even if one is not on the board

![](https://cdn-learn.adafruit.com/assets/assets/000/075/989/medium800/adafruit_products_image.png?1558676086)

# Adafruit ImageReader

For reading bitmaps from SPI Flash or SD and displaying

![](https://cdn-learn.adafruit.com/assets/assets/000/073/298/medium800/circuitpython_image.png?1552874434)

# ArduinoJson

We use this library to read and write configuration files

![](https://cdn-learn.adafruit.com/assets/assets/000/076/085/medium800/adafruit_products_image.png?1558840996)

# Adafruit ZeroTimer

We use this library to easily set timers and callbacks on the SAMD processors

![](https://cdn-learn.adafruit.com/assets/assets/000/076/181/medium800/adafruit_products_image.png?1559138259)

# Adafruit TinyUSB

This lets us do cool stuff with USB like show up as a Keyboard or Disk Drive

![](https://cdn-learn.adafruit.com/assets/assets/000/078/489/medium800/adafruit_products_image.png?1563856960)

# Adafruit WavePlayer

Helps us play .WAV sound files.

![](https://cdn-learn.adafruit.com/assets/assets/000/083/175/medium800/adafruit_products_waveplayer-install.png?1572322178)

## SdFat (Adafruit Fork)

The Adafruit fork of the really excellent SD card library that gives a lot more capability than the default SD library

![](https://cdn-learn.adafruit.com/assets/assets/000/083/166/medium800/adafruit_products_image.png?1572315153)

# Audio - Adafruit Fork

Our fork of the Audio library provides a toolkit for building streaming audio projects.

![](https://cdn-learn.adafruit.com/assets/assets/000/087/841/medium800/adafruit_products_audio.png?1580397029)

# Arcada Animated GIF Display

## Build In Arduino

# Compiling the Code

If you don't want to use the pre-compiled code, you can build it yourself to load onto your Arcada board. This project requires using the Arduino IDE because it needs every bit of computational energy!

[Visit the PyPortal Arduino Setup page to install the Arduino IDE (or update it), install PyPortal support](https://learn.adafruit.com/adafruit-pyportal/setup) or ditto for whatever hardware you're using. [Also make sure you installed all the Arduino Libraries](https://learn.adafruit.com/pyportal-animated-gif-display/arduino-libraries) (and you need quite a lot!)

# Download the Animated GIF Demo code

Open up the Arduino library manager

![](https://cdn-learn.adafruit.com/assets/assets/000/084/042/medium800/arduino_compatibles_library_manager_menu.png?1573525413)

Search for the  **Adafruit Arcada GifDecoder**  library and install it

![](https://cdn-learn.adafruit.com/assets/assets/000/084/043/medium800/arduino_compatibles_gifdecoder.png?1573525479)

Verify you have the [**latest version of all the libraries on this page**](https://learn.adafruit.com/pyportal-animated-gif-display/arduino-libraries) via the Arduino Library Manager. The code will not compile with earlier versions.

We also have a great tutorial on Arduino library installation at:  
[http://learn.adafruit.com/adafruit-all-about-arduino-libraries-install-use](http://learn.adafruit.com/adafruit-all-about-arduino-libraries-install-use "Link: http://learn.adafruit.com/adafruit-all-about-arduino-libraries-install-use")

## Configuring SdFat

If you plan to use the SD card to play GIFs you'll need to update `SDFatConfig.h` in the SdFat library you installed, and change the following #define's:

```
//------------------------------------------------------------------------------
/**
 * If the symbol ENABLE_EXTENDED_TRANSFER_CLASS is nonzero, the class SdFatEX
 * will be defined. If the symbol ENABLE_SOFTWARE_SPI_CLASS is also nonzero,
 * the class SdFatSoftSpiEX will be defined.
 *
 * These classes used extended multi-block SD I/O for better performance.
 * the SPI bus may not be shared with other devices in this mode.
 */
#define ENABLE_EXTENDED_TRANSFER_CLASS 1
//------------------------------------------------------------------------------
/**
 * If the symbol USE_STANDARD_SPI_LIBRARY is zero, an optimized custom SPI
 * driver is used if it exists.  If the symbol USE_STANDARD_SPI_LIBRARY is
 * one, the standard Arduino SPI.h library is used with SPI. If the symbol
 * USE_STANDARD_SPI_LIBRARY is two, the SPI port can be selected with the
 * constructors SdFat(SPIClass* spiPort) and SdFatEX(SPIClass* spiPort).
 */
#define USE_STANDARD_SPI_LIBRARY 2
```

# Initial Test

Let's make sure you can get the basics going before we customize it

Make sure you have the **Adafruit PyPortal** type of board selected or whatever board you're looking to use, and pick the right COM port. It may or may not have Adafruit PyPortal next to the serial port name. If you can't find it, double-click the reset button to put it into bootloader mode, then select the serial port when it appears.

![](https://cdn-learn.adafruit.com/assets/assets/000/073/455/medium800/arduino_compatibles_image.png?1553050899)

Under **USB Stack** select **TinyUSB** - this will let the board show the filesystem up as a disk drive

![](https://cdn-learn.adafruit.com/assets/assets/000/076/094/medium800/arduino_compatibles_image.png?1558923231)

In order to really be able to display GIFs at full speed, we need to overclock a bit...Make sure that before you continue, you have the following selected:

- **CPU Speed: 180 MHz** (you can also try 200)
- **Optimize: fast**
- **Cache: Enabled**

![](https://cdn-learn.adafruit.com/assets/assets/000/076/095/medium800/arduino_compatibles_image.png?1558923312)

Click **Upload** to upload the sketch to the PyPortal

![](https://cdn-learn.adafruit.com/assets/assets/000/073/456/medium800/arduino_compatibles_image.png?1553050986)

You may get a notice that there's not configuration file found, and also likely

![](https://cdn-learn.adafruit.com/assets/assets/000/076/093/medium800/arduino_compatibles_adafruit_products_IMG_2068.jpg?1558923183)

# Arcada Animated GIF Display

## Customization

There are a few settings you can change

## Loop Time & Brightness

First is how long to display a GIF, second is how bright the backlight is. We can display multiple images, by default waiting 10 seconds until continuing to the next one. You can change this by creating or replacing a text file called **arcada\_config.json** in the _root_ directory of the QSPI flash or SD card. If you have the Arcada board plugged in and press reset, it will appear in the filesystem for you to access

Here's an example of the contents of the file you can use

```
    {"volume":255,"brightness":255,"seconds_per_gif":5}
  
```

`volume` is not used in this project. `brightness` ranges from 0 (display off) to 255 (all the way max brightness). `seconds_per_gif` is what you expect

And here's where it resides, remember its _not in the **gifs** folder!_ Place it in the 'root' directory

![](https://cdn-learn.adafruit.com/assets/assets/000/076/097/medium800/arduino_compatibles_image.png?1558923852)

When you're done, be sure to **Eject** the disk - it wont disappear but it will flush/save your config data so it doesn't get corrupted

![](https://cdn-learn.adafruit.com/assets/assets/000/076/102/medium800/arduino_compatibles_image.png?1558924857)

## Storage Locations

Of course you want to change the built in GIFs! You can store GIFs in _one of two places_ - either an SD card you insert **OR** on the internal QSPI Flash

You cannot pick or choose in one compiled version due to some unavoidable constraints on how Arduino handles Files - so you have to pick one!

By default we use QSPI, because almost all our boards have it built in for free.

However, if you'd like to use SD cards for storage, go to the `Adafruit_Arcada` library and look in `Adafruit_Arcada.h` for a section starting with `#elif defined(ADAFRUIT_PYPORTAL)`

![](https://cdn-learn.adafruit.com/assets/assets/000/076/096/medium800/arduino_compatibles_image.png?1558923498)

Find the lines within that section that look like:

```
#define ARCADA_USE_QSPI_FS
//#define ARCADA_USE_SD_FS
```

And change it to

```
//#define ARCADA_USE_QSPI_FS
#define ARCADA_USE_SD_FS
```

Then save and re-upload

**Displaying GIFs from SD cards is easier to move big files on and off the device because you can use an SD card reader, but they will display slower than when stored on the QSPI internal memory!** That's because QSPI is a much faster storage system, we can read the data a few seconds faster!

# Arcada Animated GIF Display

## Example GIFs

## Animation Demos

Looking for some cool GIFs to get the creative juices flowing? We put together some neat ones we think you'll like. Download the zip file and drop the files into your GIFs folder.

- **blinka-wipe.gif** – Blinka transition for project videos 
- **cpython-logo.gif** – The circuit python logo
- **mu-editor.gif** – Our favorite python editor
- **pyportal-blinka.gif** – PyPortal logo featuring Blinka

[GIFs.zip](https://cdn-learn.adafruit.com/assets/assets/000/073/477/original/GIFs.zip?1553097048)
And here's a pack with them resized to 160x128 for 1.8" Displays

[160x128_GIFs.zip](https://cdn-learn.adafruit.com/assets/assets/000/074/127/original/160x128_GIFs.zip?1554573992)

## Featured Products

### Adafruit PyPortal - CircuitPython Powered Internet Display

[Adafruit PyPortal - CircuitPython Powered Internet Display](https://www.adafruit.com/product/4116)
 **PyPortal** , our easy-to-use IoT device that allows you to create all the things for the “Internet of Things” in minutes. Make custom touch screen interface GUIs, all open-source, and Python-powered using tinyJSON / APIs to get news, stock, weather, cat photos,...

In Stock
[Buy Now](https://www.adafruit.com/product/4116)
[Related Guides to the Product](https://learn.adafruit.com/products/4116/guides)
### Adafruit PyPortal Desktop Stand Enclosure Kit

[Adafruit PyPortal Desktop Stand Enclosure Kit](https://www.adafruit.com/product/4146)
PyPortal is our easy-to-use IoT device that allows you to create all the things for the “Internet of Things” in minutes. Create little pocket universes of joy that connect to something good.

And now that you've made a cool internet-connected project...

In Stock
[Buy Now](https://www.adafruit.com/product/4146)
[Related Guides to the Product](https://learn.adafruit.com/products/4146/guides)
### Adafruit PyGamer Starter Kit

[Adafruit PyGamer Starter Kit](https://www.adafruit.com/product/4277)
**Please note: you may get a royal blue _or_ purple case with your starter kit (they're both lovely colors)**

What fits in your pocket, is fully Open Source, and can run CircuitPython, MakeCode Arcade or Arduino games you write yourself? That's right,...

Out of Stock
[Buy Now](https://www.adafruit.com/product/4277)
[Related Guides to the Product](https://learn.adafruit.com/products/4277/guides)
### Adafruit PyGamer for MakeCode Arcade, CircuitPython or Arduino

[Adafruit PyGamer for MakeCode Arcade, CircuitPython or Arduino](https://www.adafruit.com/product/4242)
What fits in your pocket, is fully Open Source, and can run CircuitPython, MakeCode Arcade or Arduino games you write yourself? That's right, it's the **Adafruit PyGamer!** We wanted to make an entry-level gaming handheld for DIY gaming, and maybe a little...

Out of Stock
[Buy Now](https://www.adafruit.com/product/4242)
[Related Guides to the Product](https://learn.adafruit.com/products/4242/guides)
### Adafruit PyBadge for MakeCode Arcade, CircuitPython, or Arduino

[Adafruit PyBadge for MakeCode Arcade, CircuitPython, or Arduino](https://www.adafruit.com/product/4200)
What's the size of a credit card and can run CircuitPython, MakeCode Arcade or Arduino? That's right, its the **Adafruit PyBadge!** We wanted to see how much we could cram into a ​3 3⁄8 × ​2 1⁄8 inch rounded rectangle, to make an all-in-one dev board with...

In Stock
[Buy Now](https://www.adafruit.com/product/4200)
[Related Guides to the Product](https://learn.adafruit.com/products/4200/guides)
### Adafruit PyBadge LC - MakeCode Arcade, CircuitPython, or Arduino

[Adafruit PyBadge LC - MakeCode Arcade, CircuitPython, or Arduino](https://www.adafruit.com/product/3939)
What's the size of a credit card and can run CircuitPython, MakeCode Arcade or Arduino even when you're on a budget? That's right, it's the  **Adafruit PyBadge LC!**  We wanted to see how much we could cram into a ​3 3⁄8 × ​2 1⁄8 inch...

In Stock
[Buy Now](https://www.adafruit.com/product/3939)
[Related Guides to the Product](https://learn.adafruit.com/products/3939/guides)
### Adafruit EdgeBadge - TensorFlow Lite for Microcontrollers

[Adafruit EdgeBadge - TensorFlow Lite for Microcontrollers](https://www.adafruit.com/product/4400)
Machine learning has come to the 'edge' - small microcontrollers that can run a very miniature version of TensorFlow Lite to do ML computations. 

But you don't need super complex hardware to start developing your own TensorFlow models! We've adapted our popular...

Out of Stock
[Buy Now](https://www.adafruit.com/product/4400)
[Related Guides to the Product](https://learn.adafruit.com/products/4400/guides)
### USB cable - USB A to Micro-B

[USB cable - USB A to Micro-B](https://www.adafruit.com/product/592)
This here is your standard A to micro-B USB cable, for USB 1.1 or 2.0. Perfect for connecting a PC to your Metro, Feather, Raspberry Pi or other dev-board or microcontroller

Approximately 3 feet / 1 meter long

Out of Stock
[Buy Now](https://www.adafruit.com/product/592)
[Related Guides to the Product](https://learn.adafruit.com/products/592/guides)

## Related Guides

- [Adafruit PyPortal - IoT for CircuitPython](https://learn.adafruit.com/adafruit-pyportal.md)
- [Adafruit PyBadge and PyBadge LC](https://learn.adafruit.com/adafruit-pybadge.md)
- [Introducing Adafruit PyGamer](https://learn.adafruit.com/adafruit-pygamer.md)
- [Playing Gamebuino META Games on Arcada](https://learn.adafruit.com/playing-gamebuino-meta-games-on-arcada.md)
- [PyBadger Event Badge](https://learn.adafruit.com/pybadger-event-badge.md)
- [Pathfinder Robot Companion](https://learn.adafruit.com/pathfinder.md)
- [PyPaint Drawing Program In CircuitPython](https://learn.adafruit.com/pypaint.md)
- [Twin Peaks Light Reactive Picture Frame](https://learn.adafruit.com/twin-peaks-light-reactive-pyportal-picture-frame.md)
- [PyGamer Marble Labyrinth in MakeCode Arcade](https://learn.adafruit.com/pygamer-marble-labyrinth-in-makecode-arcade.md)
- [PyGamer Thermal Camera with AMG8833](https://learn.adafruit.com/pygamer-thermal-camera-amg8833.md)
- [How to Hack NES ROMs to Add Your Own Sprites](https://learn.adafruit.com/how-to-hack-roms-to-add-your-own-sprites.md)
- [Trash Panda 2: Garbage Day](https://learn.adafruit.com/trash-panda-2-dumpster-dive.md)
- [Where's My Friend? A Location-Aware Display with PyPortal and ItsASnap](https://learn.adafruit.com/where-s-my-friend-a-location-display-frame-with-pyportal.md)
- [PyPortal Weather Station](https://learn.adafruit.com/pyportal-weather-station.md)
- [PyPortal IoT Data Logger with Analog Devices ADT7410, Adafruit IO and CircuitPython](https://learn.adafruit.com/iot-pyportal-data-logger-adafruitio-circuitpython.md)
- [AdaBox 012](https://learn.adafruit.com/adabox012.md)
- [Creating Your First Tilemap Game with CircuitPython](https://learn.adafruit.com/creating-your-first-tilemap-game-with-circuitpython.md)
- [Playing Arduboy Games on Arcada](https://learn.adafruit.com/playing-arduboy-games-on-arcada.md)