Displaying Animated GIFs on Interstate 75 W
This brief guide will show you how you can display your favourite animated GIFs on Interstate 75 W, using the quick and dirty method of hacking them up into individual PNG frames and cycling through them one by one.
If you're brand new to Interstate 75 W we'd recommend reading our Getting Started guide first - it shows you how to plug everything in and run the examples.
What you'll need
- An Interstate 75 W - we'd recommend using the RP2350 version. RP2040 boards don't really have the oomph to cycle through the frames quickly enough.
- A USB-C cable for programming
- One (or more) RGB LED matrix panels
Selecting your GIF
Step one, find a animated GIF that you like and download it to your computer. We'd recommend picking one that matches the aspect ratio of your LED display - our LED panels are arranged in a square, so Instagram and Tumblr provided us with lots of good ones. We especially enjoyed the retro video games ones at this site.
For this demo, we're using one of our favourites - Awkward Look Monkey Puppet. Here's what we're starting with:
Converting, cropping and resizing your GIF
Because we're all about the easy life, we'll be using the web tools at ezgif.com to crop and resize our GIF and split it into individual frames. You don't necessarily have to use an actual .GIF, it will also work with a bunch of different newfangled animated file formats such as .webp.
Cropping
This GIF is rectangular, so first we need to make it square using https://ezgif.com/crop
Even if your GIF is already the correct aspect ratio, cropping can be useful if you're doing stuff with retro video game animations or pixel art - it will look nicer and crispier if you can get the pixels to match up with the LEDs.
Resizing
Next we're resizing our image to match the dimensions of our display.
Scroll down to the bottom of the page to view the cropped version of our image, and click 'resize' (or if you skipped the cropping step, head to https://ezgif.com/resize):
Resize to 128x128 pixels:
Scroll down, and you'll see a version of the GIF that's square and resized to 128x128.
Splitting
Time to split it into individual frames - click the split button:
Under 'Split options', select 'Output images in PNG format', then 'Split to frames'.
Hit 'download frames as ZIP' button, to download all those lovely .png frames.
Extract the zip into a directory somewhere on your computer. We've renamed the directory 'monkey', to keep things neat.
Uploading the files to Interstate 75 W
Fire up Thonny and make sure the Files window is visible. If it's not, you can enable it with the 'View' menu.
Navigate to the directory with the .png frames in it using the Files window. Right click on the directory and choose 'Upload to /' to copy it to your Interstate board.
Displaying a GIF
gif.py is our example that displays a single GIF by cycling through all the .png files that are present in a directory, one by one.
You can find the code on Github here. It might already be present on your Interstate if you installed the -with-examples version of MicroPython.
The default directory that this example looks in for image files is called /gif . Our files are stored in a directory called /monkey, so we've changed that in the code.
Press the green run button in the Thonny's menu bar to run the code. If it's cycling too fast or two slow, you can adjust the INTERVAL value to change how long it pauses before switching to the next image.
Displaying lots of GIFs
If you've done that for a whole afternoon a bunch of times like we did, you'll have a collection of directories containing different converted GIFs saved to your Interstate. The obvious next step was to write some code that picked a random GIF from the collection, played it for a while, and then switched to a new one, to amuse and overstimulate our office mates.
gifs_multiple.py can be found here. Here's what the code does:
- makes a list of all the directories present on your board
- picks a random directory from the list
- checks to see if the directory has .png files in it
- if it does, it cycles through them like before.
- It also keeps track of the time, and the last time we switched to a new directory, so if the same GIF has been playing for more than two seconds it will know to switch to a new one.
You can change the FRAME_INTERVAL variable to alter the speed, or GIF_INTERVAL to alter how long it stays on the same GIF.
Batch converting GIFs
If you're splitting a lot of GIFs into frames, you may want to speed things up by batch processing them using a Python script or command line tool. Check out PIL (Python Image Library) or the ImageMagick command line software. ImageMagick also has convenient Python bindings.
Next steps
Now that you're armed with the formidable power to deploy GIFs on command, a fun next step might be to get them to trigger in response to sensor inputs. Plug a multi-sensor stick or carbon dioxide sensor into the Qw/ST connector (for environmental sensing) or solder some wires to the unpopulated headers and connect up a PIR stick for motion sensing. Alternatively, you could take it a step further and use the wireless functionality of the board to pull in data from an API like Home Assistant and bother your household with GIFs based on other sensor data.
As always, we love to hear what you're getting up to - drop us a bleat (or a skeet) on BlueSky and let us know!
Search above to find more great tutorials and guides.