# How to use the Puppet Module in the Bluefruit Playground App

## Overview

https://www.youtube.com/watch?v=EhiJ-OzZh1Y

Using the puppet module in the Bluefruit Playground App, you can create the coolest virtual puppet show ever. Learn how to control the puppet, add a green screen, then record your performance.

The Circuit Playground Bluefruit (CBP) controls the orientation, mouth and other features of the puppet over Bluetooth.

Additionally, this guide walks through how to use the "green screen" mode along with video software to have more control over how you film your puppetry.

Here's a demo of what you can unleash with the hottest new digital puppet technology.&nbsp;

https://www.youtube.com/watch?v=EhaZ6qZKB8E&feature=youtu.be

Info: 

## Parts
### Circuit Playground Bluefruit - Bluetooth® Low Energy

[Circuit Playground Bluefruit - Bluetooth® Low Energy](https://www.adafruit.com/product/4333)
 **Circuit Playground Bluefruit** is our third board in the Circuit Playground series, another step towards a perfect introduction to electronics and programming. We've taken the popular Circuit Playground Express and made it even better! Now the main chip is an nRF52840...

Out of Stock
[Buy Now](https://www.adafruit.com/product/4333)
[Related Guides to the Product](https://learn.adafruit.com/products/4333/guides)
![shot of a Black woman's neon-green manicured hand holding up a Circuit Playground Bluefruit glowing rainbow LEDs.](https://cdn-shop.adafruit.com/640x480/4333-11.jpg)

### Lithium Ion Polymer Battery with Short Cable - 3.7V 420mAh

[Lithium Ion Polymer Battery with Short Cable - 3.7V 420mAh](https://www.adafruit.com/product/4236)
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 420mAh for a total of about 1.55 Wh. If you need a larger (or smaller!) battery, <a...></a...>

In Stock
[Buy Now](https://www.adafruit.com/product/4236)
[Related Guides to the Product](https://learn.adafruit.com/products/4236/guides)
![Lithium Ion Polymer Battery 3.7v 420mAh with JST 2-PH connector and short cable](https://cdn-shop.adafruit.com/640x480/4236-04.jpg)

### 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

In Stock
[Buy Now](https://www.adafruit.com/product/592)
[Related Guides to the Product](https://learn.adafruit.com/products/592/guides)
![USB cable - USB A to Micro-B - 3 foot long](https://cdn-shop.adafruit.com/640x480/592-01.jpg)

## Materials

- Some tape (double-sided is preferable) to secure the battery to the Circuit Playground Bluefruit.
- A rubber band is recommended securing the CPB to your hand during use.

## For computer connections (optional)

- [iPhone lightning cable](https://www.apple.com/shop/iphone/iphone-accessories/power-cables?page=1#!&f=cable&fh=458e%2B45c4)

## Software

A vide recording software such as [OBS](https://obsproject.com/)

# How to use the Puppet Module in the Bluefruit Playground App

## Set Up the CPB with the App

Follow the below guide on setting up the CPB to work with the app.

[Set up CPB to work with the app](https://learn.adafruit.com/bluefruit-playground-app/firmware)
Follow the directions in the guide and on the app. They will show you how to power the CPB with a battery, and then pair it with your compatible smartphone.

- It helps to tape the battery to the back of the CPB.
- This makes for more streamlined puppetry down the line!

![accel__gyro____magnetometers_IMG_7962.jpg](https://cdn-learn.adafruit.com/assets/assets/000/088/427/medium640/accel__gyro____magnetometers_IMG_7962.jpg?1581707480)

![accel__gyro____magnetometers_IMG_6467.jpg](https://cdn-learn.adafruit.com/assets/assets/000/088/428/medium640/accel__gyro____magnetometers_IMG_6467.jpg?1581707503)

# How to use the Puppet Module in the Bluefruit Playground App

## Features

## Puppet Features
To control the virtual puppet, the Bluefruit Playground app looks at the data from the CPB's onboard accelerometer and buttons. Here is a description of those features and how to navigate them.

- Tilt left/right to tilt head
- Tilt up/down to open/close mouth&nbsp;

![](https://cdn-learn.adafruit.com/assets/assets/000/088/443/medium800thumb/accel__gyro____magnetometers_tilty-sparky.jpg?1581714597)

- Tap button A to trigger the "raised eyebrows" animation
- Tap button B to trigger the "head shake" animation

![](https://cdn-learn.adafruit.com/assets/assets/000/088/442/medium800thumb/accel__gyro____magnetometers_sparky-feats.jpg?1581714006)

## Controlling the Puppet via the App

Additionally, you can control two other features of the puppet directly on the app itself.

- Touch and drag the puppet to change the orientation/direction that it is facing
- Pinch to enlarge or shrink puppet

![](https://cdn-learn.adafruit.com/assets/assets/000/088/441/medium800thumb/accel__gyro____magnetometers_resize-move-sparky.jpg?1581713502)

![](https://cdn-learn.adafruit.com/assets/assets/000/088/577/medium800/accel__gyro____magnetometers_cpb_puppet_demo.png?1582060077)

## How to hold the CPB for optimized puppetry
![](https://cdn-learn.adafruit.com/assets/assets/000/088/422/medium800/accel__gyro____magnetometers_cpb_hold.png?1581706838 Drawing from the help page on the puppets module of the app)

- To keep the CPB snug on your hand while puppeteering, it's best to use a rubber band around your index through pinky fingers, slipping the CPB under the top of the rubber band.
- If needed, make two loops with your rubber band to increase snug fit and prevent a flying CPB.

![accel__gyro____magnetometers_IMG_2947.jpg](https://cdn-learn.adafruit.com/assets/assets/000/088/423/medium640/accel__gyro____magnetometers_IMG_2947.jpg?1581707071)

![accel__gyro____magnetometers_IMG_5706.jpg](https://cdn-learn.adafruit.com/assets/assets/000/088/424/medium640/accel__gyro____magnetometers_IMG_5706.jpg?1581707117)

![accel__gyro____magnetometers_IMG_9013.jpg](https://cdn-learn.adafruit.com/assets/assets/000/088/425/medium640/accel__gyro____magnetometers_IMG_9013.jpg?1581707143)

![accel__gyro____magnetometers_IMG_4550.jpg](https://cdn-learn.adafruit.com/assets/assets/000/088/426/medium640/accel__gyro____magnetometers_IMG_4550.jpg?1581707162)

## Other App Functions
There are buttons at the bottom for accessing more capabilities

![accel__gyro____magnetometers_app_edit_cover.png](https://cdn-learn.adafruit.com/assets/assets/000/088/435/medium640/accel__gyro____magnetometers_app_edit_cover.png?1582148733)

## Recording Videos
Click the recond button in the lower-left corner of the app to begin recording.

You may get asked if you'd like to enable the camera and microphone for recording, hit yes.

Once you are finished recording, click the record button again to stop the recording.

![accel__gyro____magnetometers_record.png](https://cdn-learn.adafruit.com/assets/assets/000/088/439/medium640/accel__gyro____magnetometers_record.png?1581709051)

The app will then prompt you to either save or discard the video. Hit save to save the video to your device.

The video should now show up in your photos.

![accel__gyro____magnetometers_save_video.png](https://cdn-learn.adafruit.com/assets/assets/000/088/440/medium640/accel__gyro____magnetometers_save_video.png?1581709131)

## "Green Screen" Mode
Tap the icon with the two squares to enable green screen mode. More on how to use this in the "Connecting and Controlling" section of this guide.

![accel__gyro____magnetometers_functions_green_point_out.png](https://cdn-learn.adafruit.com/assets/assets/000/088/437/medium640/accel__gyro____magnetometers_functions_green_point_out.png?1581984128)

## Camera Flip
Tap the button with the camera icon to flip the camera back and forth.

![accel__gyro____magnetometers_flip.png](https://cdn-learn.adafruit.com/assets/assets/000/088/434/medium640/accel__gyro____magnetometers_flip.png?1581984300)

## Full Screen Toggle
Tap the icon with the arrows to enter and exit full-screen mode.

![accel__gyro____magnetometers_full_screen_mode.png](https://cdn-learn.adafruit.com/assets/assets/000/088/553/medium640/accel__gyro____magnetometers_full_screen_mode.png?1581984520)

## Help/how to
Tap the question mark icon on the top right of the screen for more info on how to best hold the CPB and more.

![accel__gyro____magnetometers_how_to.png](https://cdn-learn.adafruit.com/assets/assets/000/088/554/medium640/accel__gyro____magnetometers_how_to.png?1581984859)

# How to use the Puppet Module in the Bluefruit Playground App

## Connecting and Controlling

What if you would like to film puppets independently from your phone? Say you want a special background from another video source as the backdrop for your puppet. This page will show you how.

## Connect the phone to the computer

Using a lightning cable, connect your phone to your computer.

## Open Quicktime Player on your Computer
- Select "File" then "New Movie Recording"
- Then click the drop-down arrow next to the recording button and select your phone from the available sources.
- Now your phone screen output is connected and accessible.
- If you are getting a message on QuickTime player that it "does not have access to the camera or microphone", you must enable them.
- Go to System Preferences \> Security & Privacy \> Privacy Pane. Check that both Camera and Microphone have access through QuickTime Player.

![accel__gyro____magnetometers_Screen_Shot_2020-02-18_at_4.34.14_PM.png](https://cdn-learn.adafruit.com/assets/assets/000/088/578/medium640/accel__gyro____magnetometers_Screen_Shot_2020-02-18_at_4.34.14_PM.png?1582061945)

![accel__gyro____magnetometers_Screen_Shot_2020-02-18_at_4.34.34_PM.png](https://cdn-learn.adafruit.com/assets/assets/000/088/579/medium640/accel__gyro____magnetometers_Screen_Shot_2020-02-18_at_4.34.34_PM.png?1582062019)

![accel__gyro____magnetometers_Screen_Shot_2020-02-18_at_4.35.13_PM.png](https://cdn-learn.adafruit.com/assets/assets/000/088/580/medium640/accel__gyro____magnetometers_Screen_Shot_2020-02-18_at_4.35.13_PM.png?1582062071)

![accel__gyro____magnetometers_Screen_Shot_2020-02-18_at_4.43.02_PM.png](https://cdn-learn.adafruit.com/assets/assets/000/088/581/medium640/accel__gyro____magnetometers_Screen_Shot_2020-02-18_at_4.43.02_PM.png?1582062197)

## Download OBS

OBS or [Open Broadcaster Software](https://obsproject.com/) - this is an application that allows users to record and stream video for free. If you already have a similar software like [Wirecast](https://www.telestream.net/wirecast/overview.htm?&gclid=EAIaIQobChMIpqbdhMHZ5wIVj5OzCh1gpQ8UEAAYASAAEgKRPvD_BwE), you may use that as well.

[Click to Download OBS](https://obsproject.com/)
Download the correct version of OBS for your operating system. Next, install and open the program.

![](https://cdn-learn.adafruit.com/assets/assets/000/088/555/medium800/accel__gyro____magnetometers_Screen_Shot_2020-02-17_at_4.37.17_PM.png?1581985156)

## Add a phone as a new source

First, we must create a video source for the puppet. Connect the phone that you used to set up the Bluefruit Playground app to your computer.

- After OBS is open, on the bottom of the program, under "Sources", click the plus icon.
- Select "Video Capture Device"
- Name the source
- Choose the source from the list shown (make sure the phone is properly connected)

&nbsp;

![accel__gyro____magnetometers_Screen_Shot_2020-02-17_at_4.38.46_PM.png](https://cdn-learn.adafruit.com/assets/assets/000/088/510/medium640/accel__gyro____magnetometers_Screen_Shot_2020-02-17_at_4.38.46_PM.png?1581976758)

![accel__gyro____magnetometers_vcd.png](https://cdn-learn.adafruit.com/assets/assets/000/088/509/medium640/accel__gyro____magnetometers_vcd.png?1581976696)

![accel__gyro____magnetometers_Screen_Shot_2020-02-17_at_4.39.00_PM.png](https://cdn-learn.adafruit.com/assets/assets/000/088/511/medium640/accel__gyro____magnetometers_Screen_Shot_2020-02-17_at_4.39.00_PM.png?1581976784)

![accel__gyro____magnetometers_Screen_Shot_2020-02-18_at_4.36.12_PM.png](https://cdn-learn.adafruit.com/assets/assets/000/088/582/medium640/accel__gyro____magnetometers_Screen_Shot_2020-02-18_at_4.36.12_PM.png?1582062446)

- Verify the correct video source (you should see the phone's screen output) and hit "ok"
- Now you should see the phone screen output on the main program.
- Click and drag the source so that it fills the full screen.
- Enable the "green screen" mode within the Bluefruit app.

![accel__gyro____magnetometers_Screen_Shot_2020-02-17_at_4.39.51_PM.png](https://cdn-learn.adafruit.com/assets/assets/000/088/520/medium640/accel__gyro____magnetometers_Screen_Shot_2020-02-17_at_4.39.51_PM.png?1581977437)

![accel__gyro____magnetometers_Screen_Shot_2020-02-17_at_4.40.38_PM.png](https://cdn-learn.adafruit.com/assets/assets/000/088/521/medium640/accel__gyro____magnetometers_Screen_Shot_2020-02-17_at_4.40.38_PM.png?1581977493)

![accel__gyro____magnetometers_Screen_Shot_2020-02-17_at_4.40.29_PM.png](https://cdn-learn.adafruit.com/assets/assets/000/088/522/medium640/accel__gyro____magnetometers_Screen_Shot_2020-02-17_at_4.40.29_PM.png?1581977516)

![accel__gyro____magnetometers_Screen_Shot_2020-02-17_at_4.41.03_PM.png](https://cdn-learn.adafruit.com/assets/assets/000/088/523/medium640/accel__gyro____magnetometers_Screen_Shot_2020-02-17_at_4.41.03_PM.png?1581977540)

## Add a second video source

This second video source will be any content you may want as a background or setting for the puppet.

- Select and add the next video source.
- Move the second video source to the "bottom" by right-clicking on the source, then selecting "Order" then "move to bottom"
- You should now see the puppet video source only.

![accel__gyro____magnetometers_Screen_Shot_2020-02-17_at_4.42.01_PM.png](https://cdn-learn.adafruit.com/assets/assets/000/088/528/medium640/accel__gyro____magnetometers_Screen_Shot_2020-02-17_at_4.42.01_PM.png?1581978012)

![accel__gyro____magnetometers_Screen_Shot_2020-02-17_at_4.42.30_PM.png](https://cdn-learn.adafruit.com/assets/assets/000/088/529/medium640/accel__gyro____magnetometers_Screen_Shot_2020-02-17_at_4.42.30_PM.png?1581978102)

![accel__gyro____magnetometers_Screen_Shot_2020-02-17_at_4.44.48_PM.png](https://cdn-learn.adafruit.com/assets/assets/000/088/530/medium640/accel__gyro____magnetometers_Screen_Shot_2020-02-17_at_4.44.48_PM.png?1581978163)

![accel__gyro____magnetometers_Screen_Shot_2020-02-17_at_4.43.42_PM.png](https://cdn-learn.adafruit.com/assets/assets/000/088/531/medium640/accel__gyro____magnetometers_Screen_Shot_2020-02-17_at_4.43.42_PM.png?1581978287)

## Enabling the "green screen"

At this point, the video source from the phone is blocking the background video source. To make use of the green screen function on the Bluefruit Playground app and be able to see both the puppet and your intended background, follow the steps below.

- Right-click on the phone video source, and select "Filters".
- Click the plus button in the filters window and select "Chroma Key"
- Hit ok, then check out the default settings and hit close.
- Now you should see the puppet overlaid on the background!

![accel__gyro____magnetometers_Screen_Shot_2020-02-17_at_4.45.47_PM.png](https://cdn-learn.adafruit.com/assets/assets/000/088/536/medium640/accel__gyro____magnetometers_Screen_Shot_2020-02-17_at_4.45.47_PM.png?1581978403)

![accel__gyro____magnetometers_Screen_Shot_2020-02-17_at_4.46.04_PM.png](https://cdn-learn.adafruit.com/assets/assets/000/088/537/medium640/accel__gyro____magnetometers_Screen_Shot_2020-02-17_at_4.46.04_PM.png?1581978580)

![accel__gyro____magnetometers_Screen_Shot_2020-02-17_at_4.46.09_PM.png](https://cdn-learn.adafruit.com/assets/assets/000/088/538/medium640/accel__gyro____magnetometers_Screen_Shot_2020-02-17_at_4.46.09_PM.png?1581978602)

![accel__gyro____magnetometers_Screen_Shot_2020-02-17_at_4.46.23_PM.png](https://cdn-learn.adafruit.com/assets/assets/000/088/539/medium640/accel__gyro____magnetometers_Screen_Shot_2020-02-17_at_4.46.23_PM.png?1581978663)

![accel__gyro____magnetometers_Screen_Shot_2020-02-17_at_4.46.39_PM.png](https://cdn-learn.adafruit.com/assets/assets/000/088/540/medium640/accel__gyro____magnetometers_Screen_Shot_2020-02-17_at_4.46.39_PM.png?1581978687)

![accel__gyro____magnetometers_Screen_Shot_2020-02-17_at_4.46.52_PM.png](https://cdn-learn.adafruit.com/assets/assets/000/088/541/medium640/accel__gyro____magnetometers_Screen_Shot_2020-02-17_at_4.46.52_PM.png?1581978725)

## Cropping the puppet source

While the green screen is now enabled and the background should be visible behind the puppet, only a small percentage of the background is visible. Let's edit the cropping of the puppet source so we can get the whole background.

- Go ahead and add another filter onto the puppet source. Select "Crop/Pad".
- Edit the values of the crop area until the black border around the puppet is gone.
- Hit close once things look good.

![accel__gyro____magnetometers_Screen_Shot_2020-02-17_at_4.47.14_PM.png](https://cdn-learn.adafruit.com/assets/assets/000/088/548/medium640/accel__gyro____magnetometers_Screen_Shot_2020-02-17_at_4.47.14_PM.png?1581978958)

![accel__gyro____magnetometers_Screen_Shot_2020-02-17_at_5.39.21_PM.png](https://cdn-learn.adafruit.com/assets/assets/000/088/549/medium640/accel__gyro____magnetometers_Screen_Shot_2020-02-17_at_5.39.21_PM.png?1581979189)

![accel__gyro____magnetometers_Screen_Shot_2020-02-17_at_4.52.13_PM.png](https://cdn-learn.adafruit.com/assets/assets/000/088/550/medium640/accel__gyro____magnetometers_Screen_Shot_2020-02-17_at_4.52.13_PM.png?1581979212)

![accel__gyro____magnetometers_Screen_Shot_2020-02-17_at_4.52.32_PM.png](https://cdn-learn.adafruit.com/assets/assets/000/088/551/medium640/accel__gyro____magnetometers_Screen_Shot_2020-02-17_at_4.52.32_PM.png?1581979253)

Drag and adjust the puppet until you are satisfied with the positioning.

&nbsp;

![accel__gyro____magnetometers_Screen_Shot_2020-02-17_at_4.53.31_PM.png](https://cdn-learn.adafruit.com/assets/assets/000/088/552/medium640/accel__gyro____magnetometers_Screen_Shot_2020-02-17_at_4.53.31_PM.png?1581979456)

And that's it! You are now ready to go live with your fancy new high tech puppet show.

Stay tuned for new characters on the app!


## Featured Products

### Circuit Playground Bluefruit - Bluetooth® Low Energy

[Circuit Playground Bluefruit - Bluetooth® Low Energy](https://www.adafruit.com/product/4333)
 **Circuit Playground Bluefruit** is our third board in the Circuit Playground series, another step towards a perfect introduction to electronics and programming. We've taken the popular Circuit Playground Express and made it even better! Now the main chip is an nRF52840...

Out of Stock
[Buy Now](https://www.adafruit.com/product/4333)
[Related Guides to the Product](https://learn.adafruit.com/products/4333/guides)
### Lithium Ion Polymer Battery with Short Cable - 3.7V 420mAh

[Lithium Ion Polymer Battery with Short Cable - 3.7V 420mAh](https://www.adafruit.com/product/4236)
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 420mAh for a total of about 1.55 Wh. If you need a larger (or smaller!) battery, <a...></a...>

In Stock
[Buy Now](https://www.adafruit.com/product/4236)
[Related Guides to the Product](https://learn.adafruit.com/products/4236/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

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

## Related Guides

- [Adafruit Circuit Playground Bluefruit](https://learn.adafruit.com/adafruit-circuit-playground-bluefruit.md)
- [AdaBox 014](https://learn.adafruit.com/adabox014.md)
- [Circuit Playground-O-Phonor](https://learn.adafruit.com/circuit-playground-o-phonor.md)
- [Stained Glass Lamp](https://learn.adafruit.com/stained-glass-lamp.md)
- [Adafruit Circuit Playground Tri-Color E-Ink Gizmo](https://learn.adafruit.com/adafruit-circuit-playground-tri-color-e-ink-gizmo.md)
- [Flapping Halloween Vampire Bat](https://learn.adafruit.com/flapping-halloween-vampire-bat.md)
- [Wirelessly Code your Bluetooth Device with CircuitPython](https://learn.adafruit.com/wirelessly-code-your-bluetooth-device-with-circuitpython.md)
- [Circuit Playground Bluefruit Automatic Bike Brake Light](https://learn.adafruit.com/circuit-playground-bluefruit-brake-light.md)
- [PyLeap App](https://learn.adafruit.com/pyleap-app.md)
- [Remote Control Candy Dispenser Ghost](https://learn.adafruit.com/ble-claw.md)
- [Wireless Image Transfer with Circuit Playground Bluefruit and TFT Gizmo](https://learn.adafruit.com/wireless-image-transfer-with-circuit-playground-bluetooth-and-tft-gizmo.md)
- [PyLeap MP3 Playback for Circuit Playground Bluefruit](https://learn.adafruit.com/pyleap-mp3-playback-for-cpb.md)
- [CircuitPython BLE Advertising Beacons](https://learn.adafruit.com/circuitpython-ble-advertising-beacons.md)
- [CircuitPython Made Easy on Circuit Playground Express and Bluefruit](https://learn.adafruit.com/circuitpython-made-easy-on-circuit-playground-express.md)
- [PyLeap device enabled - In Rainbows](https://learn.adafruit.com/pyleap-device-enabled-in-rainbows.md)
