# Adafruit IO Connected Animated GIF Display

## Overview

![](https://cdn-learn.adafruit.com/assets/assets/000/023/764/medium800thumb/raspberry_pi_gifio.jpg?1448316802)

Do you love Raspberry Pis, animated GIFs, and the Internet of Things? If so, this project is for you. We will show you how to easily turn your Raspberry Pi into a animated GIF display device that you can update from anywhere!

This guide requires your Raspberry Pi to be connected to Adafruit IO over the internet. If you are looking for a standalone GIF display, check out [this great animated GIF picture frame guide](../../../../raspi-animated-gif-picture-frame)!

Let's get started by setting up our new GIF feed on Adafruit IO!

# Adafruit IO Connected Animated GIF Display

## Adafruit IO Setup

## Retreiving your Adafruit IO Key

You will need your Adafruit IO key to connect your Raspberry Pi to Adafruit IO. To get your key, log in to Adafruit IO and click the **AIO KEY** button on the right hand side of the window.

![](https://cdn-learn.adafruit.com/assets/assets/000/023/751/medium800/raspberry_pi_Screen_Shot_2015-03-13_at_5.22.35_PM.png?1426282035)

A window will pop up with your Adafruit IO. Keep a copy of this in a safe place. We'll need it later.

![](https://cdn-learn.adafruit.com/assets/assets/000/023/752/medium800/raspberry_pi_Screen_Shot_2015-03-13_at_5.22.46_PM.png?1426282121)

## Creating a New Dashboard & Feed

For this project, we will be creating a new dashboard and feed. First will need to navigate to the [dashboards section](https://io.adafruit.com/dashboards) of Adafruit IO.

![](https://cdn-learn.adafruit.com/assets/assets/000/023/753/medium800/raspberry_pi_Screen_Shot_2015-03-13_at_5.18.33_PM.png?1426283070)

Once you have navigated to the dashboard section, click the **New Dashboard** button on the top right of the window. Give your dashboard a name. In this example, we will be using **Pi GIF** as the dashboard name.

![](https://cdn-learn.adafruit.com/assets/assets/000/023/754/medium800/raspberry_pi_Screen_Shot_2015-03-13_at_5.18.52_PM.png?1426283168)

You will be redirected to your new dashboard after creating it. You will now need to add a text block to your dashboard. To do that, click the **New Block** button on the top right of the window.

![](https://cdn-learn.adafruit.com/assets/assets/000/023/755/medium800/raspberry_pi_Screen_Shot_2015-03-13_at_5.19.12_PM.png?1426283344)

A menu with block options will pop up, and you will need to select the **Create New Text** (HELLO WORLD!) option at the bottom right of the list of buttons.

![](https://cdn-learn.adafruit.com/assets/assets/000/023/756/medium800/raspberry_pi_Screen_Shot_2015-03-13_at_5.19.21_PM.png?1426283419)

You will then be presented with the configuration options for the text block. First you will need to create a new feed. Enter **PiGIF**  the _Create New Feed_ text box at the bottom of the second column and click **CREATE NEW FEED**.

![](https://cdn-learn.adafruit.com/assets/assets/000/023/757/medium800/raspberry_pi_Screen_Shot_2015-03-13_at_5.20.45_PM.png?1426283519)

After creating the new feed, click on the name of that feed in the _Select Data_ section of the second column.

![](https://cdn-learn.adafruit.com/assets/assets/000/023/758/medium800/raspberry_pi_Screen_Shot_2015-03-13_at_5.21.15_PM.png?1426283638)

Enter the URL of your favorite Animated GIF in the third column under **Block Text** , and click **CREATE BLOCK**.

![](https://cdn-learn.adafruit.com/assets/assets/000/023/759/medium800/raspberry_pi_Screen_Shot_2015-03-13_at_5.21.37_PM.png?1426283804)

You can then click the **EDIT**  button on the left hand side of the dashboard and resize the text block so you can see the entire URL. Click **DONE EDITING** when you are finished.

Next we will go through the software you will need to install on your Raspberry Pi.

# Adafruit IO Connected Animated GIF Display

## Installing Software

Now that you have the Adafruit IO key and feed that you will be using, the next step will be to install the required software on your Raspberry Pi from the command line. If you need help getting started with the basics of using the command line, check out [Brennen's great series of guides](../../../../users/bpb).

If you are using a PiTFT as a display, you can refer to the [appropriate PiTFT install guide](../../../../search?q=pitft)to get your PiTFT up and running.

## Adding the apt.adafruit.com Repository

The first step will be to add the apt.adafruit.com Raspbian package repository to your Raspberry Pi if you haven't added it yet. You can do that by running the following command on your Pi.

```auto
curl -sLS https://apt.adafruit.com/add | sudo bash
```

The repo will be added, and you will see output similar to the scrolling text seen below.

![](https://cdn-learn.adafruit.com/assets/assets/000/023/760/medium800thumb/raspberry_pi_apt.jpg?1448316778)

## Installing the adafruit-io-gif Package

You are now ready to install the adafruit-io-gif package. Run the following command to install the package.

```auto
sudo apt-get install adafruit-io-gif
```

You will be asked for your Adafruit IO key and feed name. Enter those values exactly as they appear on Adafruit IO. You will be able to change the values later if necessary, but it's easier to setup if you carefully enter them correctly the first time.

![](https://cdn-learn.adafruit.com/assets/assets/000/023/765/medium800/raspberry_pi_Screen_Shot_2015-03-13_at_11.49.00_PM.png?1426307306)

After the install has completed, run **sudo reboot** to restart your Pi. This is necessary to make sure the changes to GPU memory take effect.

```auto
sudo reboot
```

# Adafruit IO Connected Animated GIF Display

## Starting the Server

Now that you have the required software installed, you can start the server so it will listen to your Adafruit IO feed for new GIF URLs. Run the following command to start the server.

```auto
aio_gif start
```

If everything works as expected, your display will be filled with the animated GIF you set during the Adafruit IO setup.

## Troubleshooting

If your GIF didn't display, but a GIF of ladyada did, we know that there must be a configuration problem with the AIO setup. Make sure you have the correct values in **/etc/adafruit-io-gif/server.conf**. To view and edit the values, run the following command.

```auto
sudo nano /etc/adafruit-io-gif/server.conf
```

Confirm that the feed and key values match up exactly as you see them on Adafruit IO. The HTTP\_PORT and DISPLAY values are for the local setup. Close and save the file when you are finished editing. If the AIO key and feed values are correct, then you should try to enter a new GIF URL in the text block on Adafruit IO. The server only accepts URLs that end in gif, png or jpg.

If you didn't see an image at all when starting the server, then you might need to edit the DISPLAY variable in  **/etc/adafruit-io-gif/server.conf** to point to the address of the X display you wish to use. If you have another service using port 8080, then you might also have to change the HTTP\_PORT to another value like 8888.

# Adafruit IO Connected Animated GIF Display

## Pushing GIF URLs

Now that your display is up and running, you can push new GIF URLs to your Pi from any web connected browser using the text block on Adafruit IO. Click on the text to change it, type or paste in the new URL, and press Return or Enter to send the new value.

![](https://cdn-learn.adafruit.com/assets/assets/000/023/762/medium800thumb/raspberry_pi_updateurl.jpg?1448316785)

![](https://cdn-learn.adafruit.com/assets/assets/000/023/763/medium800thumb/raspberry_pi_gifio.jpg?1448316793)

Your Raspberry Pi should now display the new image. If not, you may have entered the URL improperly. Keep in mind the server will only accept URLs that end in a .gif, .png, or .jpg extension.

## Client Libraries

You can also push new URLs from any of the available Adafruit IO client libraries. Refer to the library documentation for more information about pushing values to a feed.

- [Ruby](https://github.com/adafruit/io-client-ruby)
- [Node.js](https://github.com/adafruit/io-client-node)
- [Python](https://github.com/adafruit/io-client-python)


## Related Guides

- [Running TensorFlow Lite Object Recognition on the Raspberry Pi 4 or Pi 5](https://learn.adafruit.com/running-tensorflow-lite-on-the-raspberry-pi-4.md)
- [Adafruit IO Basics: ESP8266 + Arduino](https://learn.adafruit.com/adafruit-io-basics-esp8266-arduino.md)
- [Adafruit 1.14" 240x135 Color Newxie TFT Display](https://learn.adafruit.com/adafruit-1-14-240x135-color-newxie-tft-display.md)
- [No-Code Counters and Email Reports with Adafruit IO Actions](https://learn.adafruit.com/no-code-counters-and-email-reports-with-adafruit-io-actions.md)
- [Using a 5V Stepper Motor with the RasPiRobot Board V2](https://learn.adafruit.com/using-a-5v-stepper-motor-with-the-raspirobot-board-v2.md)
- [Trellis Python Library](https://learn.adafruit.com/trellis-python-library.md)
- [Running OpenGL-based Games & Emulators on Adafruit PiTFT Displays](https://learn.adafruit.com/running-opengl-based-games-and-emulators-on-adafruit-pitft-displays.md)
- [Touch Pi: Portable Raspberry Pi](https://learn.adafruit.com/touch-pi-portable-raspberry-pi.md)
- [PyPortal IoT Data Logger with Analog Devices ADT7410, Adafruit IO and CircuitPython](https://learn.adafruit.com/iot-pyportal-data-logger-adafruitio-circuitpython.md)
- [IoT Filament Sensor](https://learn.adafruit.com/iot-filament-sensor.md)
- [Metronome CLUE](https://learn.adafruit.com/metronome-clue.md)
- [Adafruit 1.3" and 1.54" 240x240 Wide Angle TFT LCD Displays](https://learn.adafruit.com/adafruit-1-3-and-1-54-240-x-240-wide-angle-tft-lcd-displays.md)
- [Running PyPortal Code on Blinka with Displayio](https://learn.adafruit.com/running-pyportal-code-on-blinka-with-displayio.md)
- [Read-Only Raspberry Pi](https://learn.adafruit.com/read-only-raspberry-pi.md)
- [Portable 5in Monitor with HDMI](https://learn.adafruit.com/portable-5in-monitor-with-hdmi.md)