# Bluefruit TFT Gizmo ANCS Notifier for iOS

## Overview

https://youtu.be/RZaTX1vdOWs

Circuit Playground Bluefruit displays your notification icons so you know when there's fresh activity!

Using the Apple Notification Center Service ( **ANCS** ), this project displays app icons on your TFT Gizmo display whenever there's an important alert from one of your apps, such as Slack, Basecamp, Discord, SMS messages, calendar events and more!

![graphic_tfts_demoancs.gif](https://cdn-learn.adafruit.com/assets/assets/000/085/739/medium640thumb/graphic_tfts_demoancs.jpg?1576117279)

You can even use the A and B buttons on the CPB to scroll between current notification icons.

Once you dismiss a notification on your phone, the associated icon will disappear from the Gizmo screen.

Warning: 

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

### Circuit Playground TFT Gizmo - Bolt-on Display + Audio Amplifier

[Circuit Playground TFT Gizmo - Bolt-on Display + Audio Amplifier](https://www.adafruit.com/product/4367)
Extend and expand your Circuit Playground projects with a bolt on TFT Gizmo that lets you add a lovely color display in a sturdy and reliable fashion. This PCB looks just like a round TFT breakout but has permanently affixed M3 standoffs that act as mechanical and electrical...

In Stock
[Buy Now](https://www.adafruit.com/product/4367)
[Related Guides to the Product](https://learn.adafruit.com/products/4367/guides)
![Hand pressing buttons on circuit playground, then turning over to show TFT gizmo display an image of a friendly robot or snake](https://cdn-shop.adafruit.com/product-videos/640x480/4367-05.jpg)

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

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

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

### USB A/Micro Cable - 2m

[USB A/Micro Cable - 2m](https://www.adafruit.com/product/2185)
This is your standard USB A-Plug&nbsp;to Micro-USB cable. It's 2 meters long so you'll have plenty of cord to work with for those longer extensions.

Out of Stock
[Buy Now](https://www.adafruit.com/product/2185)
[Related Guides to the Product](https://learn.adafruit.com/products/2185/guides)
![USB Cable with Type A and Micro B ends](https://cdn-shop.adafruit.com/640x480/2185-00.jpg)

# Bluefruit TFT Gizmo ANCS Notifier for iOS

## CircuitPython on Circuit Playground Bluefruit

# Install or Update CircuitPython

Follow this quick step-by-step to install or update CircuitPython on your Circuit Playground Bluefruit.

[Download the latest version of CircuitPython for this board via circuitpython.org](https://circuitpython.org/board/circuitplayground_bluefruit/)
 **Click the link above and download the latest UF2 file**

Download and save it to your Desktop (or wherever is handy)

![adafruit_products_CPB_Download_UF2.png](https://cdn-learn.adafruit.com/assets/assets/000/080/530/medium640/adafruit_products_CPB_Download_UF2.png?1567715178)

Plug your Circuit Playground Bluefruit into your computer using a known-good data-capable USB cable.

**A lot of people end up using charge-only USB cables and it is very frustrating! So make sure you have a USB cable you know is good for data sync.**

Double-click the small **Reset** button in the middle of the CPB (indicated by the red arrow in the image). The ten NeoPixel LEDs will all turn red, and then will all turn green. If they turn all red and stay red, check the USB cable, try another USB port, etc. The little red LED next to the USB connector will pulse red - this is ok!

If double-clicking doesn't work the first time, try again. Sometimes it can take a few tries to get the rhythm right!

(If double-clicking doesn't do it, try a single-click!)

![adafruit_products_CPB_Front_Reset_Button_Arrow.jpg](https://cdn-learn.adafruit.com/assets/assets/000/080/532/medium640/adafruit_products_CPB_Front_Reset_Button_Arrow.jpg?1567715535)

You will see a new disk drive appear called **CPLAYBTBOOT**.

&nbsp;

&nbsp;

&nbsp;

Drag the **adafruit\_circuitpython\_etc.uf2** file to **CPLAYBTBOOT.**

![adafruit_products_CPB_CPLAYBTBOOT.png](https://cdn-learn.adafruit.com/assets/assets/000/080/533/medium640/adafruit_products_CPB_CPLAYBTBOOT.png?1567715858)

![adafruit_products_CBP_drag_UF2.png](https://cdn-learn.adafruit.com/assets/assets/000/080/534/medium640/adafruit_products_CBP_drag_UF2.png?1567715871)

The LEDs will turn red. Then, the **CPLAYBTBOOT** drive will disappear and a new disk drive called **CIRCUITPY** will appear.

That's it, you're done! :)

![adafruit_products_CBP_CIRCUITPY.png](https://cdn-learn.adafruit.com/assets/assets/000/080/535/medium640/adafruit_products_CBP_CIRCUITPY.png?1567716034)

# Bluefruit TFT Gizmo ANCS Notifier for iOS

## Circuit Playground Bluefruit CircuitPython Libraries

The Circuit Playground Bluefruit is packed full of features like Bluetooth and NeoPixel LEDs. Now that you have CircuitPython installed on your Circuit Playground Bluefruit, you'll need to install a base set of CircuitPython libraries to use the features of the board with CircuitPython.

Follow these steps to get the necessary libraries installed.

# Installing CircuitPython Libraries on Circuit Playground Bluefruit

If you do not already have a **lib** folder on your **CIRCUITPY** drive, create one now.

Then, download the CircuitPython library bundle that matches your version of CircuitPython from CircuitPython.org.

[Download the latest library bundle from circuitpython.org](https://circuitpython.org/libraries)
The bundle download as a .zip file. Extract the file. Open the resulting folder.

![adafruit_products_CPB_Download_extract_bundle.png](https://cdn-learn.adafruit.com/assets/assets/000/085/257/medium640/adafruit_products_CPB_Download_extract_bundle.png?1575320201)

Open the **lib** folder found within.

![adafruit_products_CPB_open_lib_folder_in_bundle.png](https://cdn-learn.adafruit.com/assets/assets/000/085/258/medium640/adafruit_products_CPB_open_lib_folder_in_bundle.png?1575320665)

Once inside, you'll find a lengthy list of folders and .mpy files. To install a CircuitPython library, you drag the file or folder from the **bundle lib folder** to **the lib folder on your CIRCUITPY drive**.

![adafruit_products_CPB_bundle_lib_folder_contents.png](https://cdn-learn.adafruit.com/assets/assets/000/085/259/medium640/adafruit_products_CPB_bundle_lib_folder_contents.png?1575320747)

Copy the following folders and files **from the bundle lib folder** to **the**  **lib folder on your CIRCUITPY drive** :

- **adafruit\_ble**
- **adafruit\_bluefruit\_connect**
- **adafruit\_bus\_device**
- **adafruit\_circuitplayground**
- **adafruit\_gizmo**
- **adafruit\_hid**
- **adafruit\_lis3dh.mpy**
- **adafruit\_thermistor.mpy**
- **neopixel.mpy**

Your lib folder should look like the image on the left.

![adafruit_products_Circuit_Playground_Bluefruit_Libraries_List.png](https://cdn-learn.adafruit.com/assets/assets/000/085/694/medium640/adafruit_products_Circuit_Playground_Bluefruit_Libraries_List.png?1576092065)

Now you're all set to use CircuitPython with the features of the Circuit Playground Bluefruit!

# Bluefruit TFT Gizmo ANCS Notifier for iOS

## Code with CircuitPython

The Apple Notification Center Service (ANCS) allows iOS devices to act as a provider of notification alerts to Bluetooth Low Energy (BLE) accessories, such as the Apple Watch, or in our case, the Circuit Playground Bluefruit!

We've created a simple program that allows the CPB to pair with your iOS device over Bluetooth and then it will receive ANCS notifications to display on the TFT Gizmo.

In general, we recommend installing the libraries mentioned on the previous page for your Circuit Playground Bluefruit projects, however you can get away with a subset of them for this one. You can see them listed in the image here.

You'll also need to add the **adafruit\_ble\_apple\_notification\_center.mpy** file from the library bundle as seen in the image here.

Once you save the **code.py** , graphics, and .wav file to your **CIRCUITPY** drive as directed below, this image is what your drive should look like.

![circuitpython_notificationlib.jpg](https://cdn-learn.adafruit.com/assets/assets/000/086/231/medium640/circuitpython_notificationlib.jpg?1576888762)

Click the **"** Download: **Project Zip"** link in the code block below to get all the files from the project's GitHub repo.

Then, uncompress the zip file and open the **code.py** file in Mu, then save it to your CPB's **CIRCUITPY** drive as **code.py.&nbsp;**

https://github.com/adafruit/Adafruit_Learning_System_Guides/blob/main/CPB_ANCS/code.py

## Code Explaination
Apple devices centralize the management of notifications into the "Notification Center", which is accessed on the lock screen or after swiping down from the top of the screen. Since this info is centralized, Apple provides access to the current notifications through a Bluetooth Low Energy Service on the device. Bluetooth Services are a collection of data referred to as Characteristics. In CircuitPython libraries we provide definitions for common services like the Apple Notification Center Service (or ANCS for short) so that they are easier to use.

The ANCS library is designed for two main uses. First, it allows one to list all currently active notifications. This is done by reading the `active_notifications` attribute of the service. Second, it allows you to wait for new notifications to come in and react to them. This is done by looping over `wait_for_new_notifications()`.

Both of these uses provide a Notification object for each active notification. Reading the attributes of these objects will load the data from the peer device as needed. This can make printing slow but it conserves data which in turn saves battery. So, only read the attributes you need to know. Printing the object is useful for debugging but it loads many attributes and therefore, takes time.

The most useful attribute for this project is the `app_id`. The `app_id` identifies which app generated the notification. It is not the app name, but may be derived from it or the name of the folks who created the app. In the example code.py we've already added a few `app_id`s. For example, Twitter is `com.atebits.Tweetie2`, Slack is `com.tinyspeck.chatlyio` and GMail is `com.google.Gmail`. To add support for an app you use, connect to the serial terminal while running the example the Apple Notification Center library's simple test, which prints out all of the current notification's app_ids and title. 

# Bluefruit TFT Gizmo ANCS Notifier for iOS

## Notification Icons

## Graphics

In keeping with the nature of a simple alert system, we decided to use graphic icons rather than text for these notifications. If you see a logo pop up, you can then go look at the actual notification on your iOS device. This is a great place to read the details of your message or alert, and this action will also clear the notification from the CPB!

By using the **"** Download: **&nbsp;Project Zip"** in the code window on the previous pages, you also got all the graphics files from the project GitHub repo. Copy these .bmp files to the root directory of your CIRCUITPY drive.

### Connect to Bluetooth

This icon lets you know you need to pair your iOS device (from the Bluetooth settings page) with the CPB.

![](https://cdn-learn.adafruit.com/assets/assets/000/085/695/medium800/graphic_tfts_ancs_connect.bmp?1576099754)

### No Notifications

This bell icon lets you know that the CPB is connected over to an iOS device and awaiting new notifications.

![](https://cdn-learn.adafruit.com/assets/assets/000/085/696/medium800/graphic_tfts_ancs_none.bmp?1576099765)

## Notification Icons

Here are some icons we made for popular notifications that are also included in the code.

## Discord
![](https://cdn-learn.adafruit.com/assets/assets/000/085/697/medium800/graphic_tfts_ancs_discord.bmp?1576099779)

### Slack
![](https://cdn-learn.adafruit.com/assets/assets/000/085/698/medium800/graphic_tfts_ancs_slack.bmp?1576099785)

### SMS
![](https://cdn-learn.adafruit.com/assets/assets/000/085/700/medium800/graphic_tfts_ancs_sms.bmp?1576099798)

### Phone
![](https://cdn-learn.adafruit.com/assets/assets/000/085/701/medium800/graphic_tfts_ancs_phone.bmp?1576099805)

### iCal
![](https://cdn-learn.adafruit.com/assets/assets/000/085/702/medium800/graphic_tfts_ancs_ical.bmp?1576099810)

### Basecamp

Here's the old style Basecamp logo, in case you want to go that way...

![](https://cdn-learn.adafruit.com/assets/assets/000/085/699/medium800/graphic_tfts_ancs_basecamp.bmp?1576099794)

CircuitPython is so fast and easy,[pleasing clients with logo changes in minutes is possible](https://twitter.com/adafruit/status/1204862635587620869), so here's the new logo, too! You can just change the icon name in code and use the one you want!

![](https://cdn-learn.adafruit.com/assets/assets/000/085/709/medium800/graphic_tfts_ancs_basecamp_new.bmp?1576100887)

## Customization

If you'd like to make new icons for other notifications, you'll need to create 16-bit .bmp files at 240x240 pixels.

You can use image software such as [Photoshop](https://www.adobe.com/products/photoshop.html), [Affinity Photo](https://affinity.serif.com/en-us/photo/), [GIMP](https://www.gimp.org/), or others to mask and layer an application icon on top of the black background and inside the white circle. Below you'll find a blank version of our design to use as a starting point.

Or, you can use any image you like, so long as you save or convert it first to the 240x240 .bmp file format first. You can use an [online image converter](https://image.online-convert.com/convert-to-bmp) for this.

![](https://cdn-learn.adafruit.com/assets/assets/000/085/894/medium800/circuitpython_ANCS_icon_blank.bmp?1576596034)

## Audio

We will trigger the playback of a .wav file when the Bluetooth connection is made. Get the file **triode\_rise.wav** from the Project Zip noted above and move it to the root level of your **CIRCUITPY** drive.

# Bluefruit TFT Gizmo ANCS Notifier for iOS

## ANCS Simple Demo

## REPL Print Only Version

If you want to add more icon pairings, you'll need to know what sort of data ANCS is sending from the phone so you can match your icon to the app type.

This version of the code will give you just the emitted data! It's very informative to see what info comes along with your notifications. Just download the `print_code.py` file and paste it into your Mu window, then save it to your Circuit Playground Bluefruit as `code.py`.

Pair your iOS device with the CIRCUITPY BLE device and you'll see lots of great notification info!

https://github.com/adafruit/Adafruit_Learning_System_Guides/blob/main/CPB_ANCS/print_code/code.py

![](https://cdn-learn.adafruit.com/assets/assets/000/086/232/medium800/circuitpython_repl.jpg?1576889393)

# Bluefruit TFT Gizmo ANCS Notifier for iOS

## Assembly

## Assemble the Notifier

Now, you can use your iOS Notification Gizmo! I assembled the board with a battery between the TFT Gizmo and the CPB [as shown here](https://learn.adafruit.com/cyberpunk-santa-eye/assemble-the-board).

I decided to print one of the the 3D cases designed by the Ruiz Bros.[in this guide](https://learn.adafruit.com/display-ornaments-with-circuit-playground/tft-gizmo-ornament) so I can use it as a sort of pocket watch style alert device!

![graphic_tfts_demoancs_discord.jpg](https://cdn-learn.adafruit.com/assets/assets/000/085/796/medium640/graphic_tfts_demoancs_discord.jpg?1576196575)

## Use the Notifier

To use the notifier, the first step is to connect to Bluefruit.

First, make sure the Notifier is powered on. You'll see the connect to Bluetooth device screen.

On your iOS device, make sure Bluetooth is turned on and go to Settings \> Bluetooth.

Pick the Circuit Playground Bluefruit device that shows up, and then press the " **Pair**" button.

&nbsp;

&nbsp;

![graphic_tfts_IMG_7020_2k.jpg](https://cdn-learn.adafruit.com/assets/assets/000/085/800/medium640/graphic_tfts_IMG_7020_2k.jpg?1576201041)

![graphic_tfts_IMG_7021_2k.jpg](https://cdn-learn.adafruit.com/assets/assets/000/085/802/medium640/graphic_tfts_IMG_7021_2k.jpg?1576201173)

![graphic_tfts_IMG_7022_2k.jpg](https://cdn-learn.adafruit.com/assets/assets/000/085/803/medium640/graphic_tfts_IMG_7022_2k.jpg?1576201183)

![graphic_tfts_IMG_7023_2k.jpg](https://cdn-learn.adafruit.com/assets/assets/000/085/804/medium640/graphic_tfts_IMG_7023_2k.jpg?1576201194)

![graphic_tfts_IMG_7024_2k.jpg](https://cdn-learn.adafruit.com/assets/assets/000/085/805/medium640/graphic_tfts_IMG_7024_2k.jpg?1576201239)

![graphic_tfts_IMG_7025_2k.jpg](https://cdn-learn.adafruit.com/assets/assets/000/085/806/medium640/graphic_tfts_IMG_7025_2k.jpg?1576201249)

Once connected, you'll see the default notifications bell screen. This indicates that there is a Bluetooth connection to your iOS device and no new notifications are in your notification center.

![](https://cdn-learn.adafruit.com/assets/assets/000/085/808/medium800/graphic_tfts_IMG_7026_2k.jpg?1576202334)

## Notifications

Hey look! An SMS notification came in! Now I now to look at my phone and read the message.Oh, it's an Arrested Development GIF from my friend Tod featuring Tobias Fünke, awesome!

Now, I can clear the message from the iOS Notification screen and this will also clear it from the Gizmo screen.

![graphic_tfts_IMG_7031_2k.jpg](https://cdn-learn.adafruit.com/assets/assets/000/085/809/medium640/graphic_tfts_IMG_7031_2k.jpg?1576202540)

![graphic_tfts_IMG_7032_2k.jpg](https://cdn-learn.adafruit.com/assets/assets/000/085/810/medium640/graphic_tfts_IMG_7032_2k.jpg?1576202755)

![graphic_tfts_IMG_7034_2k.jpg](https://cdn-learn.adafruit.com/assets/assets/000/085/811/medium640/graphic_tfts_IMG_7034_2k.jpg?1576202820)

## Multiple Notifications

By pressing the A and B buttons on the CPB we can see there are notifications from a couple of different applications, in this case Basecamp and Discord.

&nbsp;

&nbsp;

![graphic_tfts_IMG_7029_2k.jpg](https://cdn-learn.adafruit.com/assets/assets/000/085/825/medium640/graphic_tfts_IMG_7029_2k.jpg?1576203230)

![graphic_tfts_IMG_7035_2k.jpg](https://cdn-learn.adafruit.com/assets/assets/000/085/824/medium640/graphic_tfts_IMG_7035_2k.jpg?1576203178)

https://youtu.be/RZaTX1vdOWs


## 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)
### Circuit Playground TFT Gizmo - Bolt-on Display + Audio Amplifier

[Circuit Playground TFT Gizmo - Bolt-on Display + Audio Amplifier](https://www.adafruit.com/product/4367)
Extend and expand your Circuit Playground projects with a bolt on TFT Gizmo that lets you add a lovely color display in a sturdy and reliable fashion. This PCB looks just like a round TFT breakout but has permanently affixed M3 standoffs that act as mechanical and electrical...

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

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

Out of Stock
[Buy Now](https://www.adafruit.com/product/4237)
[Related Guides to the Product](https://learn.adafruit.com/products/4237/guides)
### USB A/Micro Cable - 2m

[USB A/Micro Cable - 2m](https://www.adafruit.com/product/2185)
This is your standard USB A-Plug&nbsp;to Micro-USB cable. It's 2 meters long so you'll have plenty of cord to work with for those longer extensions.

Out of Stock
[Buy Now](https://www.adafruit.com/product/2185)
[Related Guides to the Product](https://learn.adafruit.com/products/2185/guides)
### Adafruit Circuit Playground Bluefruit Express Starter Kit

[Adafruit Circuit Playground Bluefruit Express Starter Kit](https://www.adafruit.com/product/4504)
If you missed out on ADABOX 014, its not too late for you to pick up the parts necessary to build many of the projects! This kit pack doesn't come with tissue paper or the nifty extras, but it does have all the electronic goodies you need  
  
This project pack features...

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

## Related Guides

- [Adafruit Circuit Playground Bluefruit](https://learn.adafruit.com/adafruit-circuit-playground-bluefruit.md)
- [Adafruit Circuit Playground TFT Gizmo](https://learn.adafruit.com/adafruit-tft-gizmo.md)
- [Now Playing: Bluetooth Apple Media Service Display](https://learn.adafruit.com/now-playing-bluetooth-apple-media-service-display.md)
- [Circuit Playground TFT Gizmo Dreidel](https://learn.adafruit.com/circuit-playground-tft-gizmo-dreidel.md)
- [CLUE Rock, Paper, Scissors Game using Bluetooth](https://learn.adafruit.com/rock-paper-scissors-circuitpython.md)
- [Remote Control Candy Dispenser Ghost](https://learn.adafruit.com/ble-claw.md)
- [Bluefruit Playground Hide and Seek](https://learn.adafruit.com/hide-n-seek-bluefruit-ornament.md)
- [Bluetooth Turtle Bot with CircuitPython and Crickit](https://learn.adafruit.com/bluetooth-turtle-bot-with-circuitpython-and-crickit.md)
- [TFT Gizmo Turtle](https://learn.adafruit.com/tft-gizmo-turtle.md)
- [TFT Gizmo Animated Eye](https://learn.adafruit.com/tft-gizmo-animated-eye.md)
- [No-Solder LED Disco Tie with Bluetooth](https://learn.adafruit.com/no-solder-circuit-playground-bluetooth-disco-tie.md)
- [BLE Synth with the Feather nRF52840 and Circuit Playground Bluefruit](https://learn.adafruit.com/ble-synth-with-the-feather-nrf52840-and-circuit-playground-bluefruit.md)
- [Neopixel Crystal Chandelier with CircuitPython Animations and Speed Control](https://learn.adafruit.com/neopixel-crystal-chandelier-with-circuitpython-animations-and-speed-control.md)
- [Adafruit 1.14" 240x135 Color Newxie TFT Display](https://learn.adafruit.com/adafruit-1-14-240x135-color-newxie-tft-display.md)
- [PyLeap App](https://learn.adafruit.com/pyleap-app.md)
- [CLUE Vertical Garden Weather Visualizer](https://learn.adafruit.com/clue-vertical-garden-weather-visualizer.md)
