# How to Make Animated Graphics for Hologram Displays
## Overview
https://youtu.be/M_8CqcYUgvY
Turn your favorite character into a hologram! Strap a PyPortal to a continuous rotation servo and watch in awe. With a few edits and some formatting, you'll have floating animations in no time.
In this guide we'll go through an example of our own animation starring Blinka, the CircuitPython mascot.
We have a custom 3D printed enclosure you can use as a "vertical holder" which attaches to the servo.
Info:
## Parts
- [Adafruit PyPortal](https://www.adafruit.com/product/4116)
- [PowerBoost 1000C](https://www.adafruit.com/product/2465)
- [3.7v 1200mAh Battery](https://www.adafruit.com/product/258)
- [2X 3-pin JST cable](https://www.adafruit.com/product/3893)
- [SPDT Slide Switch](https://www.adafruit.com/product/805)
- [M2.5 Thread Screw](https://www.adafruit.com/product/3299) (PowerBoost 1000C)
- [Continuous Rotation Servo](https://www.adafruit.com/product/154)
- [Hologram Prism for mobile devices](https://amzn.to/2BKses5)
### 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)
### PowerBoost 1000 Charger - Rechargeable 5V Lipo USB Boost @ 1A
[PowerBoost 1000 Charger - Rechargeable 5V Lipo USB Boost @ 1A](https://www.adafruit.com/product/2465)
PowerBoost 1000C is the perfect power supply for your portable project! **With a built-in load-sharing battery charger circuit, you'll be able to keep your power-hungry project running even while recharging the battery!** This little DC/DC boost converter module can...
Out of Stock
[Buy Now](https://www.adafruit.com/product/2465)
[Related Guides to the Product](https://learn.adafruit.com/products/2465/guides)
### Continuous Rotation Servo
[Continuous Rotation Servo](https://www.adafruit.com/product/154)
This servo rotates fully forward or backward instead of moving to a position. You can use any servo code, hardware, or library to control these servos. Good for making simple moving robots. Comes with four different horns, as shown.
To control with an Arduino, we suggest connecting...
In Stock
[Buy Now](https://www.adafruit.com/product/154)
[Related Guides to the Product](https://learn.adafruit.com/products/154/guides)
### Fully Reversible Pink/Purple USB A to micro B Cable - 1m long
[Fully Reversible Pink/Purple USB A to micro B Cable - 1m long](https://www.adafruit.com/product/4111)
This cable is not only super-fashionable, with a woven pink and purple Blinka-like pattern, it's also fully reversible! That's right, you will save _seconds_ a day by not having to flip the cable around.
First let's talk about the cover and over-molding. We got these...
In Stock
[Buy Now](https://www.adafruit.com/product/4111)
[Related Guides to the Product](https://learn.adafruit.com/products/4111/guides)
### STEMMA JST PH 2mm 3-Pin to Male Header Cable - 200mm
[STEMMA JST PH 2mm 3-Pin to Male Header Cable - 200mm](https://www.adafruit.com/product/3893)
This cable will let you turn a JST PH 3-pin cable port into 3 individual wires with high-quality 0.1" male header plugs on the end. We're carrying these to match up with our Hallowing, for extending and connecting sensors or LEDs - and the wires are even color coded!
In Stock
[Buy Now](https://www.adafruit.com/product/3893)
[Related Guides to the Product](https://learn.adafruit.com/products/3893/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 1200mAh
[Lithium Ion Polymer Battery - 3.7v 1200mAh](https://www.adafruit.com/product/258)
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 1200mAh for a total of about 4.5 Wh. If you need a larger battery,
In Stock
[Buy Now](https://www.adafruit.com/product/258)
[Related Guides to the Product](https://learn.adafruit.com/products/258/guides)
### Black Nylon Machine Screw and Stand-off Set – M2.5 Thread
[Black Nylon Machine Screw and Stand-off Set – M2.5 Thread](https://www.adafruit.com/product/3299)
Totaling 380 pieces, this **M2.5 Screw Set** is a must-have for your workstation. You'll have enough screws, nuts, and hex standoffs to fuel your maker tendencies for days on end! M2.5 size screws fit almost all of the Adafruit breakout/dev board mounting holes...
In Stock
[Buy Now](https://www.adafruit.com/product/3299)
[Related Guides to the Product](https://learn.adafruit.com/products/3299/guides)
# How to Make Animated Graphics for Hologram Displays
## Circuit Diagram
## Circuit Diagram
The diagram below provides a visual reference for wiring the components. This isn't true to scale, it is just meant to be used as reference. This diagrams was created using [Fritzing software](http://fritzing.org/download/).
## Adafruit Library for Fritzing
Use our Fritzing parts library to create circuit diagrams for your projects. Download the library or just grab the individual parts. Get library and parts from [GitHub Adafruit Fritzing Parts](https://github.com/adafruit/Fritzing-Library/tree/master/parts).
## Wired Connections
**Slide switch to PowerBoost**
- Switch to enable and ground
**Servo to PyPortal**
- Ground to ground (D3)
- Signal (D3)
- Voltage to voltage (D3)
**Battery to PowerBoost**
- JST to JST port
**PyPortal to PowerBoost**
- Ground to ground (D4)
- Voltage to voltage (D4)
# How to Make Animated Graphics for Hologram Displays
## Preparing the Graphic
First up, find an animation you'd like to turn into a hologram.
You can use videos or GIFs.
In order for the hologram to work properly, try and find something that is a stand alone object or character rather than a landscape etc. If you can get the subject to be against a black background, that helps too.
[Giphy](https://giphy.com/) has some great options to choose from.
If you can find multiple angles of the animation that is a huge plus, but if not, the same graphic can just be rotated for each angle.
Please make sure the animation is in GIF format.
If the animation is a video file, you can convert it to GIF format with [ezgif.com](https://ezgif.com/). Head [here](https://ezgif.com/video-to-gif) to convert video to a GIF. Simply upload the video file, make any changes you might want and output as a gif. You can right click and save the file somewhere handy.
We will be using the below GIFs to make the hologram animation featured in the guide.
## GIF placement
We're going to use Google Slides to place the GIFs the in the right orientation for the hologram.
If you have a Google account head to the [Slides site](https://www.google.com/slides/about/).
If you don't have a Google account you will need to make one to use Slides.
Under "Start a new presentation", click "Blank"
Delete the default text elements and change the background of the slide to black.
## Orient the GIFs
Drag the GIFs onto the slide.
Orient them accordingly. They must be opposite and equidistant from each other as best as possible.
## **Screen recording**
Take a screen recording of the GIFs playing for 2 seconds or so.
If you have a Mac you can use [QuickTime](https://support.apple.com/guide/quicktime-player/record-your-screen-qtp97b08e666/mac) to screen record. For PC you can use [Apowersoft's screen recorder](https://www.apowersoft.com/free-online-screen-recorder?__c=1) or another free screen recorder of your choice.
## Create the GIF
- Head to [ezgif.com](ezgif.com) and select **"Video to GIF"**
- Upload the video, and click **"Convert to GIF"**
- Next click the **"resize" tool**
- Change the size of the GIF to **320 (height) x 240 (width)** and **click "Resize image"**
- Lastly save the GIF somewhere on your computer
Below is the GIF we made for the guide, if you'd like to use for an example hologram. Right click the GIF and save it somewhere handy on your computer.
Next we'll prepare the PyPortal to upload the GIF.
# How to Make Animated Graphics for Hologram Displays
## Software
## Upgrade Firmware
Let's get the PyPortal setup with latest firmware. The simplest way is to download the UF2 file from circuitpython.org and drop it on to the **PORTALBOOT** drive.
- Plug in your PyPortal via a known good data+power USB cable.
- Double press the reset button and wait for the NeoPixel to turn green.
- The **PORTALBOOT** drive should show up on your computer.
- Download the UF2 file below and drop it onto the root of the **PORTALBOOT** drive.
[Download PyPortal Firmware](https://circuitpython.org/board/pyportal/)
## Loading GIFs
The drive will automatically reboot and load as a USB drive titled **CIRCUITPY**. Open the drive and create a new folder named **gifs**. Download our demo images and drop them into the **gifs** folder.
## Playing GIFs
Make sure you have added all of your desired gifs to the folders. After that, you will need to download the **GIF\_SERVO.UF2** file below.
- Double press the reset button and wait for the NeoPixel to turn green.
- The **PORTALBOOT** drive will show up on your computer.
- Upload the **GIF\_SERVO.UF2** file to the **PORTALBOOT** drive, making sure you rename the file to **code.py**.
[GIF_SERVO.UF2](https://cdn-learn.adafruit.com/assets/assets/000/082/567/original/GIF_SERVO.UF2?1571491408)
## GIF Configuration
The screen should turn blue with a dialog box and text. By default, the GIF player uses a configuration file that lets you specify how to play back the GIF. The configuration file can be optional, but if you'd like to use one use the link below to get it. It's not necessary, so press the TAP icon to proceed and play back your GIFs.
[GIF Playback Configuration](https://learn.adafruit.com/pyportal-animated-gif-display/customization)
# How to Make Animated Graphics for Hologram Displays
## 3D Printing
## 3D Printed Parts
Parts are designed to be 3D printed with FDM based machines. STL files are oriented to print "as is". Parts are listed below with file name and description. Parts require tight tolerances that might need adjusting slice setting. Reference the suggested settings below.
You can download the STL files below or from [Thingiverse](https://www.thingiverse.com/thing:3931442/files):
[Hologram_PyPortal.zip](https://cdn-learn.adafruit.com/assets/assets/000/110/265/original/Hologram_PyPortal.zip?1648490646)
And the Fusion 360 model, if you’d like to learn from or modify the design:
[Edit Design](https://a360.co/33RF5Vb)
## Slice Settings
Use these settings as reference. Values listed were used in [Ultimaker's CURA 3.X](https://ultimaker.com/en/products/ultimaker-cura-software) slicing software.
- 0.2mm Layer Height / 0.4mm nozzle
- 0.4mm Line Width (inner & outer widths)
- 40mm/s printing speed
- 20% infill
- Supports: No
- Brim Line Count: 5
# How to Make Animated Graphics for Hologram Displays
## Assembly
## Prep Wires
I used two [JST PH 3-Pin to Male Header Cables,](https://www.adafruit.com/product/3893) one to solder to the PowerBoost and the other cables to connect the servo.
For the PowerBoost cable, we'll only need the red and black wire. I removed the third white wire. Trim and tin the ends of the red and black wires.
## Solder PowerBoost
Solder the red wire to the + side and the black wire to the - side of the PowerBoost.
## Prep Slide Switch
We can add a slight bend to the slide switch pins so it can sit on the back of the through holes on the PowerBoost. I then trimmed off the third pin to easily fit it on the board.
## Solder Slide Switch
Tin the **EN** and **GND** on the PowerBoost and then solder the slide switch into place.
## PyPortal Standoffs
We'll need to elevate the PyPortal so it can sit over the PowerBoost and Battery. I used 8mm long nylon standoffs with 5mm M2.5 screws to the mounting tabs on the PyPortal.
## Mount PowerBoost
**Align the printed PyPortal mount to the reset button cutout.** The PowerBoost mounts with the USB port pointing out so we can easily access it for charging the battery.
I used M2.5 5mm screws to mount the PowerBoost.
## Mount Battery
Orient the battery so the wires can plug into the PowerBoost. Plug the battery into the Power Boost and the wire on the PowerBoost to the D4 port on the PyPortal.
## Mount PyPortal
Align the PyPortal with the printed mount and use four more M2.5 5mm screws to secure it to the mount.
## Servo cable
Pass the JST cable for the servo through the printed mount and connect it to the D3 port on the PyPortal.
## Mount and connect servo
Align the servo with the wire cut out on the walls on the printed mount.
Plug the male ends into the female ends of the servo. The white wire connects to the orange wire on the servo. Black connects to brown and red connect to the red wire on the servo.
## Servo horn
The servo includes a circular horn that press fits into the servo. I wrapped the excess wires around the servo body.
## Horn base
The circular servo horn is then press fitted into the larger printed circular base.
## Place Cover
To prevent light leaking on the sides of the PyPortal, we can place the front cover of the display.
## Servo Speed
If your servo has a Potentiometer, we can adjust the speed and direction with a screw driver.
## Complete!
Fit the prism in the center of the hologram graphics so the four quadrants align and reflections can project on each side of the prism.
# How to Make Animated Graphics for Hologram Displays
## Test Out the Hologram
To try out the hologram, place the projector prism on top of and in the center of the screen with the animation.
If the hologram is faint, try turning the brightness up on the screen or moving some place darker.
## Smart Phone / Tablet Examples
Here are a couple of slick examples from the Spectre website to test out your prism with a phone or tablet.
Robot
https://www.youtube.com/watch?v=MhIpGQl5g_A
Rocket
https://www.youtube.com/watch?v=MhIpGQl5g_A
Bee
https://www.youtube.com/watch?v=QsZTnSzJgDQ
Fairy
https://www.youtube.com/watch?v=dKHmq3qQY2Q
Octopus
https://www.youtube.com/watch?v=bUIwX8-uCkw
For more info, here's a video from Specre on how to use the prism:
https://www.youtube.com/watch?v=ZgtANe4Iadw&feature=youtu.be
## Featured Products
### AdaBox011 - PyPortal
[AdaBox011 - PyPortal](https://www.adafruit.com/product/4061)
Reach out beyond your desk - to the stars and beyond - with **PyPortal**! This ADABOX features a new, easy-to-use IoT device that allows you to customize and create your very own "Internet of Things" portal. We take CircuitPython to the max, pairing a SAMD51 chip with a...
No Longer Stocked
[Buy Now](https://www.adafruit.com/product/4061)
[Related Guides to the Product](https://learn.adafruit.com/products/4061/guides)
### 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)
### Fully Reversible Pink/Purple USB A to micro B Cable - 1m long
[Fully Reversible Pink/Purple USB A to micro B Cable - 1m long](https://www.adafruit.com/product/4111)
This cable is not only super-fashionable, with a woven pink and purple Blinka-like pattern, it's also fully reversible! That's right, you will save _seconds_ a day by not having to flip the cable around.
First let's talk about the cover and over-molding. We got these...
In Stock
[Buy Now](https://www.adafruit.com/product/4111)
[Related Guides to the Product](https://learn.adafruit.com/products/4111/guides)
### Continuous Rotation Servo
[Continuous Rotation Servo](https://www.adafruit.com/product/154)
This servo rotates fully forward or backward instead of moving to a position. You can use any servo code, hardware, or library to control these servos. Good for making simple moving robots. Comes with four different horns, as shown.
To control with an Arduino, we suggest connecting...
In Stock
[Buy Now](https://www.adafruit.com/product/154)
[Related Guides to the Product](https://learn.adafruit.com/products/154/guides)
### Lithium Ion Polymer Battery - 3.7v 1200mAh
[Lithium Ion Polymer Battery - 3.7v 1200mAh](https://www.adafruit.com/product/258)
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 1200mAh for a total of about 4.5 Wh. If you need a larger battery,
In Stock
[Buy Now](https://www.adafruit.com/product/258)
[Related Guides to the Product](https://learn.adafruit.com/products/258/guides)
### Black Nylon Machine Screw and Stand-off Set – M2.5 Thread
[Black Nylon Machine Screw and Stand-off Set – M2.5 Thread](https://www.adafruit.com/product/3299)
Totaling 380 pieces, this **M2.5 Screw Set** is a must-have for your workstation. You'll have enough screws, nuts, and hex standoffs to fuel your maker tendencies for days on end! M2.5 size screws fit almost all of the Adafruit breakout/dev board mounting holes...
In Stock
[Buy Now](https://www.adafruit.com/product/3299)
[Related Guides to the Product](https://learn.adafruit.com/products/3299/guides)
## Related Guides
- [Adafruit PyPortal - IoT for CircuitPython](https://learn.adafruit.com/adafruit-pyportal.md)
- [A CLI in CircuitPython](https://learn.adafruit.com/a-cli-in-circuitpython.md)
- [Ambient Sound Machine](https://learn.adafruit.com/ambient-machine.md)
- [PyPortal Reddit Stats Trophy](https://learn.adafruit.com/pyportal-reddit-stats-trophy.md)
- [NeoKey Emoji Keyboard](https://learn.adafruit.com/neokey-emoji-keyboard.md)
- [Prop-Maker Feather Talking Adabot Clock](https://learn.adafruit.com/prop-maker-feather-talking-adabot-clock.md)
- [Remote Control Candy Dispenser Ghost](https://learn.adafruit.com/ble-claw.md)
- [Creating Slideshows in CircuitPython](https://learn.adafruit.com/creating-slideshows-in-circuitpython.md)
- [32x32 Square Pixel Art Animation Display](https://learn.adafruit.com/32x32-square-pixel-display.md)
- [New Years Eve Ball Drop](https://learn.adafruit.com/new-years-eve-ball-drop.md)
- [Portable Macrodata Refinement Terminal](https://learn.adafruit.com/portable-macrodata-refinement-terminal.md)
- [Welcome to CircuitPython!](https://learn.adafruit.com/welcome-to-circuitpython.md)
- [Using Dashblock to Create Custom APIs for PyPortal](https://learn.adafruit.com/using-dashblock-to-create-custom-apis-for-pyportal.md)
- [PyPortal WFH Busy Sounds Simulator](https://learn.adafruit.com/pyportal-wfh-busy-sounds-simulator.md)
- [Arcade Bonnet Controller](https://learn.adafruit.com/arcade-bonnet-controller.md)