# CLUE Custom CircuitPython Badge
## Overview
It's easy to turn your CLUE into a custom conference or event badge using the Adafruit CircuitPython PyBadger library. The custom badge feature of PyBadger makes it simple to display multiple lines of text over a colored background or image. **This guide will show you how to create a badge displaying your Twitter handle, name, job title and pronouns with a color-block or even an image background!**
CircuitPython's Blinka is off to another conference with her friend PyBadger, and is looking forward to showing off her custom badge on her CLUE. Let's take a look!
## Parts
### Adafruit CLUE - nRF52840 Express with Bluetooth® LE
[Adafruit CLUE - nRF52840 Express with Bluetooth® LE](https://www.adafruit.com/product/4500)
Do you feel like you just don't have a CLUE? Well, we can help with that - get a CLUE here at Adafruit by picking up this sensor-packed development board. We wanted to build some projects that have a small screen and a lot of sensors. To make it compatible with existing projects, we made...
In Stock
[Buy Now](https://www.adafruit.com/product/4500)
[Related Guides to the Product](https://learn.adafruit.com/products/4500/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
Out of Stock
[Buy Now](https://www.adafruit.com/product/592)
[Related Guides to the Product](https://learn.adafruit.com/products/592/guides)
# CLUE Custom CircuitPython Badge
## Prepare Your Badge
Adafruit CircuitPython PyBadger makes it easy to create an interactive conference or event badge with PyBadge or PyGamer. Blinka is headed to a fun conference, and is excited to create a badge. Let's take a look!
# Download PyBadger
Adafruit CircuitPython PyBadger requires the latest CircuitPython and a number of libraries to work.
To download CircuitPython, visit the following link for CLUE, PyBadge or PyGamer, depending on what you're using, and download the latest CircuitPython version for your board.
[Download CircuitPython for CLUE from circuitpython.org](https://circuitpython.org/board/clue_nrf52840_express/)
[Download CircuitPython for PyBadge from circuitpython.org](https://circuitpython.org/board/pybadge/)
[Download CircuitPython for PyGamer from circuitpython.org](https://circuitpython.org/board/pygamer/)
Next visit the following link and download the library bundle that matches your CircuitPython version.
[Download the CircuitPython Library Bundle from circuitpython.org](https://circuitpython.org/libraries)
PyBadger requires the following libraries to work. Download the library bundle and unzip the file. Open the folder, find the **lib** folder within, and open the **lib** folder. Copy the following folders and files to the **lib** folder on your **CIRCUITPY** drive:
- **adafruit\_bitmap\_font**
- **adafruit\_bus\_device**
- **adafruit\_display\_shapes**
- **adafruit\_display\_text**
- **adafruit\_miniqr.mpy**
- **adafruit\_pybadger**
- **neopixel.mpy**
If you are using **PyBadge or PyGamer,** copy the following library:
- **adafruit\_lis3dh.mpy**
If you are using **CLUE** , copy the following library:
- **adafruit\_lsm6ds.mpy**
- **adafruit\_register**
Once you have the listed files and folders copied to the lib folder on your **CIRCUITPY** drive, you're ready to go!
# CLUE Custom CircuitPython Badge
## CLUE Badge
Now that you have everything installed, we can get started with making a custom badge for CLUE!
Save the following example code as **code.py** on your **CIRCUITPY** drive.
https://github.com/adafruit/Adafruit_CircuitPython_PyBadger/blob/main/examples/pybadger_clue_custom_badge.py
Let's take a look at the code.
First, we import the PyBadger library.
```python
from adafruit_pybadger import pybadger
```
Then we create the color-block badge background.
We set the background to white. Then we create a purple rectangle that is 60% of the display in height, and is located centered vertically, with the background being 20% of the display above and below the rectangle.
```python
pybadger.badge_background(background_color=pybadger.WHITE,
rectangle_color=pybadger.PURPLE,
rectangle_drop=0.2, rectangle_height=0.6)
```
Next, we'll add the lines of text. We're going to include Blinka's Twitter handle, name, job title and preferred pronoun. You can include any info you like!
```python
pybadger.badge_line(text="@circuitpython", color=pybadger.BLINKA_PURPLE, scale=2, padding_above=2)
pybadger.badge_line(text="Blinka", color=pybadger.WHITE, scale=5, padding_above=3)
pybadger.badge_line(text="CircuitPythonista", color=pybadger.WHITE, scale=2, padding_above=2)
pybadger.badge_line(text="she/her", color=pybadger.BLINKA_PINK, scale=4, padding_above=4)
```
Then we call `show_custom_badge()` to display the badge background and badge lines we set up.
```python
pybadger.show_custom_badge()
```
We call it before the loop so it displays on startup and we can display other things inside the loop.
Inside our loop, we're looking for button presses on button A and button B.
First, we check button A. If button A is pressed, we show a customisable QR code.
```python
while True:
if pybadger.button.a:
pybadger.show_qr_code("https://circuitpython.org")
```
To change the target of the QR code, include a URL as a string (e.g. in quotation marks: `"https://circuitpython.org"`).
Finally, we check button B. If button B is pressed, we show the badge again.
```python
[...]
if pybadger.button.b:
pybadger.show_custom_badge()
```
That's all there is to using creating a custom badge with a color-block background!
Now that you've seen how it works, let's take a more detailed look at the custom badge features of PyBadger.
# CLUE Custom CircuitPython Badge
## PyBadger Colors
PyBadger includes a set of colors available for use in your code. Each color is equivalent to an `(r, g, b)` value, e.g. `RED` is equal to `(255, 0, 0)`, and `GREEN` is equal to `(0, 255, 0)`. Pybadger colors can take the place of anything that expects an `(r, g, b)` tuple, including controlling the on-board NeoPixel! To use the PyBadger colors, simply include `pybadger.COLOR_NAME` in your code in place of a color tuple.
For example, to turn the NeoPixel on your CLUE red, you could save the following as **code.py** :
```python
from adafruit_pybadger import pybadger
while True:
pybadger.pixels.fill(pybadger.RED)
```
To create the color-block badge background as a white background with a purple rectangle over it, we included the following line in the custom badge code:
```python
pybadger.badge_background(background_color=pybadger.WHITE,
rectangle_color=pybadger.PURPLE,
rectangle_drop=0.2, rectangle_height=0.6)
```
PyBadger makes a variety of colors super simple to use!
The colors available in PyBadger are:
- `RED`
- `YELLOW`
- `ORANGE`
- `GREEN, TEAL`
- `CYAN, BLUE`
- `PURPLE`
- `MAGENTA`
- `WHITE`
- `BLACK`
- `GOLD`
- `PINK`
- `AQUA`
- `JADE`
- `AMBER`
- `VIOLET`
- `SKY`
- `DEEP_PURPLE`
- `PYTHON_YELLOW`
- `PYTHON_BLUE`
- `BLINKA_PURPLE`
- `BLINKA_PINK`
# CLUE Custom CircuitPython Badge
## Badge Background
The first thing we did was create the badge background.
```python
pybadger.badge_background(background_color=pybadger.WHITE,
rectangle_color=pybadger.PURPLE,
rectangle_drop=0.2, rectangle_height=0.6)
```
There are four aspects of the badge background you can customise:
- **background\_color:** The color that fills the background on the display. Expects a tuple (e.g. `(r, g, b)`) or a `pybadger.COLOR`. Defaults to white. Check out the PyBadger Colors page for a list of available colors.
- **rectangle\_color:** The color of a rectangle color-block that displays over the background. Expects a tuple (e.g. `(r, g, b)`) or a `pybadger.COLOR`. Defaults to red. Check out the PyBadger Colors page for a list of available colors.
- **rectangle\_drop:** The distance from the top of the display that the rectangle begins. This expects a decimal number between 0 and 1 representing a percentage of the display, e.g. `0.2` means the rectangle will begin at a point 20% of the display height from the top of the display. Defaults to `0.4`.
- **rectangle\_height:** The height of the rectangle. This expects a decimal number between 0 and 1 representing a percentage of the display, e.g. `0.4` means the rectangle height will be 40% of the display. Defaults to `0.5`.
The `rectangle_drop` and `rectangle_height` values are used to place the color-block rectangle on the display by using a decimal number (known as a float in Python) between 0 and 1 representing 0% to 100%. You specify the `rectangle_drop` to determine how far from the top the rectangle is located. That percentage of the display is filled with the background color above the rectangle. You specify the `rectangle_height` to determine its height. The remaining percentage of the display is background color shown below the rectangle. In our example, we set `rectangle_height` to `0.2` meaning 20%, and `rectangle_height` to `0.6` meaning 60%. 60% + 20% is 80%, leaving 20% left to display below the rectangle, resulting in it being centered vertically on the display.
If you would rather have the badge background be a single color, set `rectangle_color` to the desired color, `rectangle_drop=0`, and `rectangle_height=1`. This will make the background a single color.
# CLUE Custom CircuitPython Badge
## Badge Lines
Next, we added the lines of text.
```python
pybadger.badge_line(text="@circuitpython", color=pybadger.BLINKA_PURPLE, scale=2, padding_above=2)
pybadger.badge_line(text="Blinka", color=pybadger.WHITE, scale=5, padding_above=3)
pybadger.badge_line(text="CircuitPythonista", color=pybadger.WHITE, scale=2, padding_above=2)
pybadger.badge_line(text="she/her", color=pybadger.BLINKA_PINK, scale=4, padding_above=4)
```
There are six aspects of each line of text you can customise:
- **text:** The text to display. Expects a string (text surrounded by quotation marks, e.g. `"Blinka"`).
- **color:** The color of the text. Expects a tuple (e.g. `(r, g, b)`), or a `pybadger.COLOR`. Check out the PyBadger Colors page for a list of available colors. If you set the text `color` to the same color as the part of the badge background it is displayed over, your text will not show up on the display.
- **scale:** The scale of the text. Expects a whole number 1 or higher. Defaults to `1`. Each increment multiplies the height of the text by the scale value, e.g. a scale of 3 means the text will be 3x higher than a scale of 1.
- **font:** The font used to display the text. Expects a string (e.g. the name of the font in quotation marks: `"Arial-16.bdf"`). Defaults to the built in `terminalio.FONT`. Custom fonts require additional files - check out [this guide](https://learn.adafruit.com/custom-fonts-for-pyportal-circuitpython-display) for more information.
- **padding\_above:** The amount of space to include before the line of text. Expects a whole number. Defaults to `0`. For example, setting `padding_above=1` includes an amount of space before the line equal to the height of the current font at scale 1, and setting `padding_above=2` includes an amount of space before the line equal to twice the height of the current font at scale 1, etc.
- **left\_justify:** Set to `True` to left justify the text. Defaults to `False`. Text is centered by default.
Use `scale` to increase the size of the text. Use `padding_above` to space out your lines of text by increasing or decreasing the space above each line of text. Try changing the values to see how it affects the displayed text.
When substituting your own text, you may find it doesn't fit with the current values. It can take some experimenting with different values to get your text sized and placed exactly where you want it. The possibilities are endless!
# CLUE Custom CircuitPython Badge
## Show Custom Badge
Finally, you must call `show_custom_badge()` to display the badge background and badge lines we set up.
```python
pybadger.show_custom_badge()
```
Following the set up of `badge_background` and `badge_line`, you **MUST** include this line of code! `show_custom_badge()` triggers the background and text lines to display. Without it, nothing will display.
If you have no other code in your `while True:` loop, you should call `show_custom_badge()` inside the loop. For example, if all you wanted to do was show the badge, you could use the following code:
```python
from adafruit_pybadger import pybadger
pybadger.badge_background(background_color=pybadger.WHITE,
rectangle_color=pybadger.PURPLE,
rectangle_drop=0.2, rectangle_height=0.6)
pybadger.badge_line(text="@circuitpython", color=pybadger.BLINKA_PURPLE,
scale=2, padding_above=2)
[...]
while True:
pybadger.show_custom_badge()
```
If you have other code in the loop, you can call `show_custom_badge()` before the loop to display the badge on startup and allow for the code to display different things in the loop.
That's all there is to using creating a custom badge with a color-block background!
# CLUE Custom CircuitPython Badge
## Image Background
Perhaps the color-block badge background doesn't suit your needs and you'd rather have the background be an image. This is easy with the PyBadger custom badge!
First, you'll need a compatible bitmap image. We've included one below. A couple more are available [here](https://learn.adafruit.com/adafruit-clue/clue-slideshow#blinka-bitmaps-32-1). For information on how to create your own compatible bitmaps, check out [the Customization section of the Notifcation Icons page in this guide](https://learn.adafruit.com/ancs-gizmo/notification-icons#customization-5-21).
Copy the desired bitmap to your **CIRCUITPY** drive.
Once the bitmap is copied to your **CIRCUITPY** drive, simply replace the `badge_background` line(s) with the following code.
```python
pybadger.image_background("Blinka_CLUE.bmp")
```
You must provide the name of a compatible bitmap as a string (e.g. in quotation marks: `"Blinka.bmp"`).
The rest of the badge set up is the same. Add your lines of text using `badge_line()` and then call `show_custom_badge()`.
https://github.com/adafruit/Adafruit_CircuitPython_PyBadger/blob/main/examples/pybadger_clue_custom_image_badge.py
That's all there is to using creating a custom badge with an image background!
## Featured Products
### Adafruit CLUE - nRF52840 Express with Bluetooth® LE
[Adafruit CLUE - nRF52840 Express with Bluetooth® LE](https://www.adafruit.com/product/4500)
Do you feel like you just don't have a CLUE? Well, we can help with that - get a CLUE here at Adafruit by picking up this sensor-packed development board. We wanted to build some projects that have a small screen and a lot of sensors. To make it compatible with existing projects, we made...
In Stock
[Buy Now](https://www.adafruit.com/product/4500)
[Related Guides to the Product](https://learn.adafruit.com/products/4500/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
Out of Stock
[Buy Now](https://www.adafruit.com/product/592)
[Related Guides to the Product](https://learn.adafruit.com/products/592/guides)
### Adafruit Circuit Playground Lanyard
[Adafruit Circuit Playground Lanyard](https://www.adafruit.com/product/3987)
We've got our Circuit Playground friends on [lunchboxes](https://www.adafruit.com/product/3437), [posters](https://www.adafruit.com/?q=posters), [puzzle](https://www.adafruit.com/product/3817),
In Stock
[Buy Now](https://www.adafruit.com/product/3987)
[Related Guides to the Product](https://learn.adafruit.com/products/3987/guides)
### Double-Hook Lanyard in Adafruit Black
[Double-Hook Lanyard in Adafruit Black](https://www.adafruit.com/product/3982)
What did the lanyard say to the hat? _"You go on ahead, I'll hang around."_
Terribly good puns aside, we've got a **Double-Hook Lanyard** in classic Adafruit black.
This lanyard is a fantastic accessory for turning your
In Stock
[Buy Now](https://www.adafruit.com/product/3982)
[Related Guides to the Product](https://learn.adafruit.com/products/3982/guides)
### 3 x AAA Battery Holder with On/Off Switch, JST, and Belt Clip
[3 x AAA Battery Holder with On/Off Switch, JST, and Belt Clip](https://www.adafruit.com/product/3286)
This battery holder connects 3 AAA batteries together in series for powering all kinds of projects. We spec'd these out because the box is slim, and 3 AAA's add up to about 3.3-4.5V, a very similar range to Lithium Ion/polymer (Li-Ion) batteries, plus it has a nifty on-off...
In Stock
[Buy Now](https://www.adafruit.com/product/3286)
[Related Guides to the Product](https://learn.adafruit.com/products/3286/guides)
### 3 x AAA Battery Holder with On/Off Switch and 2-Pin JST
[3 x AAA Battery Holder with On/Off Switch and 2-Pin JST](https://www.adafruit.com/product/727)
This battery holder connects 3 AAA batteries together in series for powering all kinds of projects. We spec'd these out because the box is slim, and 3 AAA's add up to about 3.3-4.5V, a very similar range to Lithium Ion/polymer (Li-Ion) batteries and have an on-off switch. That makes...
In Stock
[Buy Now](https://www.adafruit.com/product/727)
[Related Guides to the Product](https://learn.adafruit.com/products/727/guides)
### Alkaline AAA batteries - 3 pack
[Alkaline AAA batteries - 3 pack](https://www.adafruit.com/product/3520)
Battery power for your portable project! These batteries are good quality at a good price, and work fantastic with any of the kits or projects in the shop that use AAA's. This is a pack of **3 AAA batteries**.
These batteries are Alkaline (MnO2) chemistry, with a...
In Stock
[Buy Now](https://www.adafruit.com/product/3520)
[Related Guides to the Product](https://learn.adafruit.com/products/3520/guides)
## Related Guides
- [Introducing Adafruit CLUE](https://learn.adafruit.com/adafruit-clue.md)
- [Bluetooth CLUE Robot Car using CircuitPython](https://learn.adafruit.com/bluetooth-clue-robot-car-using-circuitpython.md)
- [AdaBox 015](https://learn.adafruit.com/adabox015.md)
- [CircuitPython CLUE I Ching Caster](https://learn.adafruit.com/clue-i-ching-caster.md)
- [Welcome to CircuitPython!](https://learn.adafruit.com/welcome-to-circuitpython.md)
- [Karel The Robot In CircuitPython](https://learn.adafruit.com/karel-the-robot-in-circuitpython.md)
- [How to Fuse Motion Sensor Data into AHRS Orientation (Euler/Quaternions)](https://learn.adafruit.com/how-to-fuse-motion-sensor-data-into-ahrs-orientation-euler-quaternions.md)
- [Digital Nose Milk Freshness Checker](https://learn.adafruit.com/digital-nose-gas-sensor-milk-freshness-checker.md)
- [CLUE BLE MIDI Glove](https://learn.adafruit.com/clue-midi-glove.md)
- [Adafruit Bonsai Buckaroo](https://learn.adafruit.com/adafruit-bonsai-buckaroo.md)
- [CLUE case](https://learn.adafruit.com/clue-case.md)
- [Clue And MagTag Pep Talk Generator](https://learn.adafruit.com/clue-and-magtag-pep-talk-generator.md)
- [Chauncey the Flower Care Bot with CLUE and Bonsai Buckaroo](https://learn.adafruit.com/chauncey-flower-watering-bot-clue.md)
- [MIDI for Makers](https://learn.adafruit.com/midi-for-makers.md)
- [Wirelessly Code your Bluetooth Device with CircuitPython](https://learn.adafruit.com/wirelessly-code-your-bluetooth-device-with-circuitpython.md)
- [LIS3MDL Triple-axis Magnetometer](https://learn.adafruit.com/lis3mdl-triple-axis-magnetometer.md)