# CircuitPython Animated Sprite Pendants
## Overview
https://youtu.be/2r9l1TYxcfE
## Mario Clouds & Flying Toasters
In this project we’re making retro inspired wearables!
The pendant features an IPS display with animated graphics. It uses Adafruit’s CircuitPython to create animated sprites that look like flying toasters and scrolling clouds.
We originally did these two as Pro Trinket projects, [with a monochrome OLED for the toasters](https://learn.adafruit.com/animated-flying-toaster-oled-jewelry), and [a color OLED for the clouds](https://learn.adafruit.com/scrolling-mario-clouds-tft-jewelry). To keep up with modern times, and the new high visibility IPS displays, we've upgraded both projects here to use CircuitPython instead of Arduino for easier customization. The displays also look a lot better, but the price and construction is about the same!
## 3D Printed Retro Pendant
With CircuitPython, you use the DisplayIO library to generate custom graphics and interfaces.
You can use bitmap images to create sprite sheets and palettes to generate colored pixels.
The code in this project randomly generates flying toasters that continuously scroll across the screen. We think it’s a great example for folks getting started with DisplayIO and CircuitPython.
We made two versions, one for each display, so you can use the 1.3in or 1.54in IPS display.
It’s also easy to swap out the graphics and modify the code to make your own animations.
## Parts
Select the display size you would like:
- [Adafruit 1.3" 240x240 Wide Angle TFT LCD Display with MicroSD](https://www.adafruit.com/product/4313)
or
- [Adafruit 1.54" 240x240 Wide Angle TFT LCD Display with MicroSD](https://www.adafruit.com/product/3787)
Then add these:
- [Adafruit ItsyBitsy M4 Express featuring ATSAMD51](https://www.adafruit.com/product/3800)
- [Adafruit LiIon/LiPoly Backpack Add-On for Pro Trinket/ItsyBitsy](https://www.adafruit.com/product/2124)
- [Breadboard-friendly SPDT Slide Switch](https://www.adafruit.com/product/805)
- [Lithium Ion Polymer Battery - 3.7v 150mAh](https://www.adafruit.com/product/1317)
### Adafruit 1.3" 240x240 Wide Angle TFT LCD Display with MicroSD
[Adafruit 1.3" 240x240 Wide Angle TFT LCD Display with MicroSD](https://www.adafruit.com/product/4313)
We've been looking for a display like this for a long time - it's **so small** only 1.3" diagonal but has a high density 260 ppi, 240x240 pixel display with full-angle viewing. It _looks_ a lot like our 1.44" 128x128 display, but has 4x as many pixels and...
In Stock
[Buy Now](https://www.adafruit.com/product/4313)
[Related Guides to the Product](https://learn.adafruit.com/products/4313/guides)
### Adafruit 1.54" 240x240 Wide Angle TFT LCD Display with MicroSD
[Adafruit 1.54" 240x240 Wide Angle TFT LCD Display with MicroSD](https://www.adafruit.com/product/3787)
We've been looking for a display like this for a long time - it's only 1.5" diagonal but has a high density 220 ppi, 240x240 pixel display with full-angle viewing. It _looks_ a lot like our 1.44" 128x128 display, but has 4x as many pixels and looks great at any angle....
In Stock
[Buy Now](https://www.adafruit.com/product/3787)
[Related Guides to the Product](https://learn.adafruit.com/products/3787/guides)
### Adafruit ItsyBitsy M4 Express featuring ATSAMD51
[Adafruit ItsyBitsy M4 Express featuring ATSAMD51](https://www.adafruit.com/product/3800)
What's smaller than a Feather but larger than a Trinket? It's an **Adafruit ItsyBitsy M4 Express** featuring the **Microchip ATSAMD51**! Small, powerful, with a ultra fast ATSAMD51 Cortex M4 processor running at 120 MHz - this microcontroller board is perfect...
In Stock
[Buy Now](https://www.adafruit.com/product/3800)
[Related Guides to the Product](https://learn.adafruit.com/products/3800/guides)
### Adafruit LiIon/LiPoly Backpack Add-On for Pro Trinket/ItsyBitsy
[Adafruit LiIon/LiPoly Backpack Add-On for Pro Trinket/ItsyBitsy](https://www.adafruit.com/product/2124)
If you have an ItsyBitsy or Pro Trinket you probably know it's the perfect little size for a portable project. This LiPoly backpack makes it really easy to do! Instead of wiring 2 or 3 boards together to make a charging system, this little PCB sits on top of the PCB and allows a...
In Stock
[Buy Now](https://www.adafruit.com/product/2124)
[Related Guides to the Product](https://learn.adafruit.com/products/2124/guides)
### Breadboard-friendly SPDT Slide Switch
[Breadboard-friendly SPDT Slide Switch](https://www.adafruit.com/product/805)
These nice switches are perfect for use with breadboard and perfboard projects. They have 0.1" spacing and snap in nicely into a solderless breadboard. They're easy to switch no matter what size fingers you have, but not so easy that they'll get flipped by accident. Work great as...
In Stock
[Buy Now](https://www.adafruit.com/product/805)
[Related Guides to the Product](https://learn.adafruit.com/products/805/guides)
### Lithium Ion Polymer Battery - 3.7v 150mAh
[Lithium Ion Polymer Battery - 3.7v 150mAh](https://www.adafruit.com/product/1317)
Lithium-ion polymer (also known as 'lipo' or 'lipoly') batteries are thin, light, and powerful. The output ranges from 4.2V when completely charged to 3.7V. This battery has a capacity of 150mAh for a total of about 0.6 Wh. If you need a larger battery,
Out of Stock
[Buy Now](https://www.adafruit.com/product/1317)
[Related Guides to the Product](https://learn.adafruit.com/products/1317/guides)
### Silicone Cover Stranded-Core Ribbon Cable - 10 Wire 1 Meter Long
[Silicone Cover Stranded-Core Ribbon Cable - 10 Wire 1 Meter Long](https://www.adafruit.com/product/3890)
For those who are fans of our silicone-covered wires, but are always looking to _up their wiring game_. We now have **Silicone Cover Ribbon cables!** These may look _a lot_ like
In Stock
[Buy Now](https://www.adafruit.com/product/3890)
[Related Guides to the Product](https://learn.adafruit.com/products/3890/guides)
# CircuitPython Animated Sprite Pendants
## Circuit Diagram
## Circuit Diagram
The diagram below provides a visual reference for wiring of the components. This diagrams was created using [Fritzing software](http://fritzing.org/download/).
## Adafruit Library for Fritzing
Use Adafruit's Fritzing parts library to create circuit diagrams for your projects. Download the library or just grab the individual parts. Get the library and parts from [GitHub Adafruit Fritzing Parts](https://github.com/adafruit/Fritzing-Library/tree/master/parts).
[circuit_diagram.fzz](https://cdn-learn.adafruit.com/assets/assets/000/083/586/original/circuit_diagram.fzz?1572960431)
**ItsyBItsy M4 to Lipo Backpack**
- **BAT** from ItsyBitsy M4 to **BAT** on Lipo Backpack
- **G** from ItsyBitsy M4 to **G** on Lipo Backpack
- **USB** from ItsyBitsy M4 to **5V** on Lipo Backpack
**Display**
- **VIN** from display to **Vhi** on ItsyBItsy M4
- **GND** from display to **G** on ItsyBItsy M4
- **SCK** from display to **SCK** on ItsyBItsy M4
- **SI** from display to **MO** on ItsyBItsy M4
- **D/C** from display to **7** on ItsyBItsy M4
**Switch**
- Middle from Switch to Lipo Backpack
- Left/Right from Switch to Lipo Backpack
## Power
The 150mAh lipo battery connects to the 2-pin JST port on the Lipo Backpack. The battery can be recharged over the microUSB port on the ItsyBitsy M4.
# CircuitPython Animated Sprite Pendants
## Software
## Setup ItsyBitsy M4 with CircuitPython
We'll need to get our board setup so we can run CircuitPython code. Let's walk through these steps to get the latest version of CircuitPython onto your board.
## The Mu Python Editor
Mu is a simple Python editor that works with Adafruit CircuitPython hardware. It's written in Python and works on Windows, MacOS, Linux and Raspberry Pi. The serial console is built right in so you get immediate feedback from your board's serial output! While you can use any text editor with your code, Mu makes it super simple.
[Installing and Using the Mu Editor](https://learn.adafruit.com/welcome-to-circuitpython/installing-mu-editor)
## Installing or upgrading CircuitPython
You should ensure you have CircuitPython 4.0 or greater on your ItsyBitsy M4. Plug your board in with a known good data + power cable (not the cheesy USB cable that comes with USB power packs, they are power only). You should see a new flash drive pop up.
If the drive is **CIRCUITPY** , then open the **boot\_out.txt** file to ensure the version number is 4.0 or greater.
```none
Adafruit CircuitPython 5.0.0-alpha.4 on 2019-09-15; Adafruit ItsyBitsy M4 Express with samd51j19
```
If the version is less than 4 -or- you only get a drive named **ITSYM4BOOT** then follow the steps below to update your board CircuitPython software:
- Download the CircuitPython UF2 for ItsyBitsy M4 via the green button below.
- Connect ItsyBitsy M4 to your computer over USB and press the Reset button.
- Drag-n-drop the CircuitPython **UF2** onto the **ITSYM4BOOT** drive - the drive will vanish and a new **CIRCUITPY** drive should appear.
[Download CircuitPython for ItsyBItsy M4](https://circuitpython.org/board/itsybitsy_m4_express/)
## Download the Adafruit CircuitPython Library Bundle
In order to run the code, we'll need to download a few libraries. Libraries contain code to help interface with hardware a lot easier for us.
The green button below links to a file containing all the libraries available for CircuitPython. To run the code for this project, we need the two libraries in the Required Libraries list below. Unzip the library bundle and search for the libraries. Drag and drop the files into a folder named **lib** on the **CIRCUITPY** drive (create the folder if it is not already on the ItsyBitsy M4).
[Download Circuit Python Library Bundle](https://circuitpython.org/libraries)
## Required Libraries
- **adafruit\_st7789**
- **adafruit\_imageload**
Once we have all the files we need, a directory listing will look similar to below as far as files and directories.
## Upload Code
This project offers two different **code.py** sketches. Both programs can be used with either display.
Click on the download link below to grab the main code directly from GitHub. Rename the file to **code.py** and drop it onto the **CIRCUITPY** main (root) directory. The code will run properly when all of the files have been uploaded including libraries.
Use any text editor or favorite IDE to modify the code. We suggest using Mu as noted above.
## Upload Bitmaps
Download the bitmap images below and save them to the root of the **CIRCUITPY** drive.
- **tilesheet-2x.bmp** is for the Mario Clouds code.
- **spritesheet-2x.bmp** is for the Flying Toasters code.
The bitmap images were named differently so that both files can reside in the **CIRCUITPY** drive.
**Scrolling Clouds**
https://github.com/adafruit/Adafruit_Learning_System_Guides/blob/main/CircuitPython_Scrolling_Clouds/code.py
**Flying Toasters**
https://github.com/adafruit/Adafruit_Learning_System_Guides/blob/main/CircuitPython_Flying_Toasters/code.py
## Double Check
See the directory listing above and double check that you have all the files listed to make this project function. If any are missing or in an incorrect directory, move them so they're in the right places.
# CircuitPython Animated Sprite Pendants
## 3D Printing
The parts for this project are designed to be 3D printed with FDM based machines. STL files are oriented to print "as is". Parts require tight tolerances that might need adjustment of slice settings. Reference the suggested settings below.
## CAD Files
The parts can further be separated into small pieces for fitting on printers with smaller build volumes. Note: a STEP file is included for other 3D surface modeling programs such as Onshape, Solidworks and Rhino.
[Edit Case for 1.3 Display](https://a360.co/36A80iE)
[Edit Case for 1.5 Display](https://a360.co/2qnx3oq)
[Download Button STLs](https://www.thingiverse.com/thing:3956855)
[Download Case STLs](https://www.thingiverse.com/thing:3956855)
## Settings
Use these settings as reference. Values listed were used in Cura slicing software.
0.2mm Layer Height / 0.4mm nozzle
0.4mm Line Width (inner & outer widths)
50mm/s printing speed
10% infill
Supports: No
Skirt: 3
# CircuitPython Animated Sprite Pendants
## Assemble
## Tin Display connections
I used third helping hands to aid in stabilizing the the display. Tin the connections according to the circuit diagram.
## Solder Wires
I cut the wires so they are long enough to reach the ItsyBitsy. The ribbon silicone cables are great so we can keep the bundle of wire neat inside the enclosure.
## Tin ItsyBitsy
I used a second pair of helping hands to hold the ItsyBitsy above the Display. Reference the circuit diagram and tin the connections on the ItsyBitsy.
## Solder ItsyBitsy to display
Gently pull apart each individual wire so that each can reach the connections on the ItsyBitsy. Reference the circuit diagram and solder the ItsyBitsy to the display.
## Prep Lipo Charger Backpack
Now we can prepare the LiPoly Charger Backpack. The two 0.1" holes with a box around them are the battery output line. Carefully cut the trace between them with a hobby knife and solder two wires to a slide switch.
Tin the rest of the connections on the lipo backpack. To better fit the the boards inside the enclosure, we can solder the wires from the bottom.
## Solder Lipo Backpack to ItsyBitsy
The lipo backpack is then soldered to the ItsyBitsy with ribbon cables.
## Insulate Boards
We'll need to insulate the boards so they don't touch once inside the enclosure. I used a strip of electrical tape to cover the bottom of the ItsyBitsy and the lipo backpack boards.
## Insert boards into enclosure
Insert the display board into the enclosure so the side with the connections faces the cutouts for the slide switch on the enclosure.
Arrange the ItsyBitsy so the USB port aligns with the USB cutout on the enclosure.
Arrange the lipo backpack with the JST port facing the slide switch cutout on the enclosure.
Connect a lipo battery to the JST on the backpack and coil the battery wires and fit the wires under the walls of the slide switch cutout on the enclosure.
## Press fit Lid
Align the lid so the cutout fits over the slide switch walls on the enclosure. Insert the lid at and angle so the battery is in the center and gently press fit the lid onto the enclosure.
## Glue Buttons
Test the layout of the buttons over the enclosure and then use a tiny bit of super glue to adhere in place.
## Split Ring and Necklace
A split ring fits over the loop on the lid. A necklace or lanyard can then fit through the split ring, ready to wear!
And there you have it! That’s how you can create your own retro inspired wearables!
If you have projects you’d like to share, check out [Adafruit’s Show and Tell live stream](https://learn.adafruit.com/show-and-tell).
All participants get a free vinyl sticker.
You can also check out the Adafruit Discord server so you can chat with the community!
## Featured Products
### Adafruit 1.3" 240x240 Wide Angle TFT LCD Display with MicroSD
[Adafruit 1.3" 240x240 Wide Angle TFT LCD Display with MicroSD](https://www.adafruit.com/product/4313)
We've been looking for a display like this for a long time - it's **so small** only 1.3" diagonal but has a high density 260 ppi, 240x240 pixel display with full-angle viewing. It _looks_ a lot like our 1.44" 128x128 display, but has 4x as many pixels and...
In Stock
[Buy Now](https://www.adafruit.com/product/4313)
[Related Guides to the Product](https://learn.adafruit.com/products/4313/guides)
### Adafruit 1.54" 240x240 Wide Angle TFT LCD Display with MicroSD
[Adafruit 1.54" 240x240 Wide Angle TFT LCD Display with MicroSD](https://www.adafruit.com/product/3787)
We've been looking for a display like this for a long time - it's only 1.5" diagonal but has a high density 220 ppi, 240x240 pixel display with full-angle viewing. It _looks_ a lot like our 1.44" 128x128 display, but has 4x as many pixels and looks great at any angle....
In Stock
[Buy Now](https://www.adafruit.com/product/3787)
[Related Guides to the Product](https://learn.adafruit.com/products/3787/guides)
### Adafruit ItsyBitsy M4 Express featuring ATSAMD51
[Adafruit ItsyBitsy M4 Express featuring ATSAMD51](https://www.adafruit.com/product/3800)
What's smaller than a Feather but larger than a Trinket? It's an **Adafruit ItsyBitsy M4 Express** featuring the **Microchip ATSAMD51**! Small, powerful, with a ultra fast ATSAMD51 Cortex M4 processor running at 120 MHz - this microcontroller board is perfect...
In Stock
[Buy Now](https://www.adafruit.com/product/3800)
[Related Guides to the Product](https://learn.adafruit.com/products/3800/guides)
### Adafruit LiIon/LiPoly Backpack Add-On for Pro Trinket/ItsyBitsy
[Adafruit LiIon/LiPoly Backpack Add-On for Pro Trinket/ItsyBitsy](https://www.adafruit.com/product/2124)
If you have an ItsyBitsy or Pro Trinket you probably know it's the perfect little size for a portable project. This LiPoly backpack makes it really easy to do! Instead of wiring 2 or 3 boards together to make a charging system, this little PCB sits on top of the PCB and allows a...
In Stock
[Buy Now](https://www.adafruit.com/product/2124)
[Related Guides to the Product](https://learn.adafruit.com/products/2124/guides)
### Breadboard-friendly SPDT Slide Switch
[Breadboard-friendly SPDT Slide Switch](https://www.adafruit.com/product/805)
These nice switches are perfect for use with breadboard and perfboard projects. They have 0.1" spacing and snap in nicely into a solderless breadboard. They're easy to switch no matter what size fingers you have, but not so easy that they'll get flipped by accident. Work great as...
In Stock
[Buy Now](https://www.adafruit.com/product/805)
[Related Guides to the Product](https://learn.adafruit.com/products/805/guides)
### Lithium Ion Polymer Battery - 3.7v 150mAh
[Lithium Ion Polymer Battery - 3.7v 150mAh](https://www.adafruit.com/product/1317)
Lithium-ion polymer (also known as 'lipo' or 'lipoly') batteries are thin, light, and powerful. The output ranges from 4.2V when completely charged to 3.7V. This battery has a capacity of 150mAh for a total of about 0.6 Wh. If you need a larger battery,
Out of Stock
[Buy Now](https://www.adafruit.com/product/1317)
[Related Guides to the Product](https://learn.adafruit.com/products/1317/guides)
### Silicone Cover Stranded-Core Ribbon Cable - 10 Wire 1 Meter Long
[Silicone Cover Stranded-Core Ribbon Cable - 10 Wire 1 Meter Long](https://www.adafruit.com/product/3890)
For those who are fans of our silicone-covered wires, but are always looking to _up their wiring game_. We now have **Silicone Cover Ribbon cables!** These may look _a lot_ like
In Stock
[Buy Now](https://www.adafruit.com/product/3890)
[Related Guides to the Product](https://learn.adafruit.com/products/3890/guides)
## Related Guides
- [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)
- [DotStar Fortune Necklace with Bluetooth and Touch](https://learn.adafruit.com/dotstar-fortune-necklace.md)
- [MakeCode Arcade with SAMD51 M4](https://learn.adafruit.com/makecode-arcade-with-samd51-m4.md)
- [CircuitPython OLED and Dual Knob Sketcher](https://learn.adafruit.com/circuitpython-oled-knob-sketcher.md)
- [CircuitScheme - Lisp on CircuitPython](https://learn.adafruit.com/scheme-in-circuitpython.md)
- [MASLOW: an Open WiFi Detector with Adafruit Pro Trinket and CC3000](https://learn.adafruit.com/wifi-hotspot-finder-adafruit-pro-trinket-cc3000.md)
- [How to train new TensorFlow Lite micro speech models](https://learn.adafruit.com/how-to-train-new-tensorflow-lite-micro-speech-models.md)
- [Eye of Newt](https://learn.adafruit.com/eye-of-newt.md)
- [CircuitPython Essentials](https://learn.adafruit.com/circuitpython-essentials.md)
- [Tent Lantern](https://learn.adafruit.com/tent-lantern.md)
- [Motorized Camera Slider 2-Axis](https://learn.adafruit.com/motorized-camera-slider-2-axis.md)
- [Adafruit Airlift Bitsy Add-On - ESP32 WiFi Co-Processor](https://learn.adafruit.com/adafruit-airlift-bitsy-add-on-esp32-wifi-co-processor.md)
- [Zelda: Breath of the Wild – 3D Printed Guardian Sword with NeoPixel LEDs](https://learn.adafruit.com/breath-of-the-wild-guardian-sword-led-3d-printed.md)
- [Purple People Eater](https://learn.adafruit.com/purple-people-eater.md)
- [Animated Flame Pendant](https://learn.adafruit.com/animated-flame-pendant.md)