A Colorful CLUE Slideshow Purse With Bright Wearables
2024-06-07 | By Adafruit Industries
License: See Original Project Displays LCD / TFT Programmers Wearables
Courtesy of Adafruit
Guide by Anne Barela
Overview
Wearable electronics clothing and accessories continue to remain very popular with designers and fashion lovers alike. Adafruit has featured a great number of wearable projects. Many of them have required sewing skills, electronic skills, or both.
Bright Wearables is a recent company that has designed a board which interfaces with a BBC micro:bit or Adafruit CLUE board. The Bright Board may be incorporated into one's own designs or paired with a number of backpack and handbag styles specifically designed to highlight the multicolored, programmable LEDs and the board's display.
This project pairs a Bright Wearables crossbody bag and Bright Board with the Adafruit CLLE to provide a colorful, changeable picture display surrounded by lights. It would look great shopping, socializing or for nightlife.
Adafruit Parts
- Adafruit CLUE - nRF52840 Express with Bluetooth LE
- USB cable - USB A to Micro-B
- Alkaline AA batteries (LR6) - 3 pack
Bags
- 1 x Bright Wearables Bright Board
- 1 x Bright Wearables Grace Bag
This project uses the Bright Board by BrightWearables.com. The board works with both the BBC micro:bit and Adafruit CLUE. It contains 12 nice RGB DotStar LEDs in a circle, an on/off switch, and a battery pack.
You can place the Bright Board into your own purse or wearable with the knowledge that all the electronics are safe from jostling (no finicky metallic thread like in some projects).
Bright Wearables sells purses and backpacks specifically made to have the Bright Board snap in. This project uses the Grace crossbody phone bag (which comes in three colors). All the bags allow the LEDs and the micro:bit/CLUE display to show through the bag.
The bags and the Bright Board may be purchased as a bundle. For this project, selecting a bundle with the bag of your choice + the Bright Board without the micro:bit board may be what you want.
Other products on BrightWearables.com
CircuitPython on CLUE
CircuitPython is a derivative of MicroPython designed to simplify experimentation and education on low-cost microcontrollers. It makes it easier than ever to get prototyping by requiring no upfront desktop software downloads. Simply copy and edit files on the CIRCUITPY flash drive to iterate.
The following instructions will show you how to install CircuitPython. If you've already installed CircuitPython but are looking to update it or reinstall it, the same steps work for that as well!
Set up CircuitPython Quick Start!
Follow this quick step-by-step for super-fast Python power :)
Download the latest version of CircuitPython for CLUE from circuitpython.org
Click the link above to download the latest version of CircuitPython for the CLUE.
Download and save it to your desktop (or wherever is handy).
Plug your CLUE into your computer using a known-good 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 Reset button on the top (magenta arrow) on your board, and you will see the NeoPixel RGB LED (green arrow) turn green. If it turns red, check the USB cable, try another USB port, etc. Note: The little red LED next to the USB connector will pulse red. That's ok!
If double-clicking doesn't work the first time, try again. Sometimes it can take a few tries to get the rhythm right!
You will see a new disk drive appear called CLUEBOOT.
Drag the adafruit-circuitpython-clue-etc.uf2 file to CLUEBOOT.
The LED will flash. Then, the CLUEBOOT drive will disappear, and a new disk drive called CIRCUITPY will appear.
If this is the first time, you're installing CircuitPython or you're doing a completely fresh install after erasing the filesystem, you will have two files - boot_out.txt, and code.py, and one folder - lib on your CIRCUITPY drive.
If CircuitPython was already installed, the files present before reloading CircuitPython should still be present on your CIRCUITPY drive. Loading CircuitPython will not create new files if there was already a CircuitPython filesystem present.
That's it, you're done! :)
Code
Text Editor
Adafruit recommends using the Mu editor for using your CircuitPython code with the CLUE boards. You can get more info in this guide.
Alternatively, you can use any text editor that saves files.
Installing Project Code
To use with CircuitPython, you need to first install a few libraries, into the lib folder on your CIRCUITPY drive. Then you need to update code.py with the example script.
Thankfully, we can do this in one go. In the example below, click the Download Project Bundle button below to download the necessary libraries and the code.py file in a zip file. Extract the contents of the zip file, open the directory CLUE_Purse_Slideshow/ and then click on the directory that matches the version of CircuitPython you're using and copy the contents of that directory to your CIRCUITPY drive.
Your CIRCUITPY drive should now look similar to the following image:
# SPDX-FileCopyrightText: 2020 Anne Barela for Adafruit Industries
#
# SPDX-License-Identifier: MIT
# Bright Wearables Purse Slideshow with FancyLED
# Anne Barela for Adafruit Industries, February 2020
# MIT License
import board
import adafruit_dotstar as dotstar
from adafruit_clue import clue
from adafruit_slideshow import SlideShow, PlayBackDirection
import adafruit_fancyled.adafruit_fancyled as fancy
# Set the LED ring speed and brightness
LED_SPEED = 0.2 # pick a number from 0 (no motion) to 1.0 (fastest!)
BRIGHTNESS = 0.2 # pick a number from 0 (dark) to 1.0 (bright!)
# colors available are RED, YELLOW, ORANGE, GREEN, TEAL
# CYAN, BLUE, PURPLE, MAGENTA, WHITE, BLACK, GOLD, PINK
# AQUA, JADE, AMBER, VIOLET, SKY - pick any color set!
# 3 to 5 colors looks best...
palette = [clue.PINK, clue.GOLD, clue.JADE]
# For the Bright Wearables DotStar LED Ring
num_leds = 12
pixels = dotstar.DotStar(board.P13, board.P15, num_leds, auto_write=False)
offset = 0
# Create the BMP displayer
slideshow = SlideShow(clue.display, None, folder="/",
auto_advance=False)
# turn palette to fancytype
for i, color in enumerate(palette):
palette[i] = fancy.CRGB(*[x / 255 for x in color])
while True:
if clue.button_b:
slideshow.direction = PlayBackDirection.FORWARD
slideshow.advance()
if clue.button_a:
slideshow.direction = PlayBackDirection.BACKWARD
slideshow.advance()
# spin the LEDs
for i in range(num_leds):
# Load each pixel's color from the palette using an offset, run it
# through the gamma function, pack RGB value and assign to pixel.
color = fancy.palette_lookup(palette, offset + i / num_leds)
color = fancy.gamma_adjust(color, brightness=BRIGHTNESS)
pixels[i] = color.pack()
pixels.show()
offset += LED_SPEED / 10
Assembly
Place the Bright Board into Your Wearable
Follow the instructions on brightwearables.com on assembly of the Bright Board with your wearable. This includes:
- Installing batteries in the battery case
- Plugging in the battery connector into the bottom of the Bright Board
- Inserting the Bright Board into your purse/backpack
- Securing the Bright Board with the built-in snaps
Inserting CLUE into the Bright Board
Insert the CLUE into the slot in the Bright Board, so the CLUE display is facing the transparent window in the wearable (facing out) and the electronics laden side of CLUE faces in towards the bag. Please double check, as the CLUE can be inserted the other way around and that's not going to work. Also be sure the CLUE board is pressed firmly on both sides into the Bright Board slot, so all the connections are made.
Use
The Bright Board has a handy on/off switch on the board. When switched on, the screen should show some brief boot information before displaying the first picture on screen and making the DotStar LEDs light up.
LED Ring Display
The DotStars cycle through three colors selected in the code. Up to five may be selected to look best:
# colors available are RED, YELLOW, ORANGE, GREEN, TEAL
# CYAN, BLUE, PURPLE, MAGENTA, WHITE, BLACK, GOLD, PINK
# AQUA, JADE, AMBER, VIOLET, SKY - pick any color set!
# 3 to 5 colors looks best...
palette = [clue.PINK, clue.GOLD, clue.JADE]
You may use Mu or a text editor to change the colors you like. The pictures you select, and the color of the bag may guide your choice as to colors.
The colors will cycle through those chosen. Kind of an "Amberlite" type effect but the lights are not dependent on the picture chosen.
Picture Slideshow
The code will display the first bitmap it sees in the root directory of the CIRCUITPY drive. You may have as many pictures as you like, up to the capacity of the CIRCUITPY drive. All pictures should be 240 x 240 pixels square and saved in bitmap (BMP) format with a .bmp file extension.
The three sample bitmap files are in the GitHub repo and if you selected Download: Project Zip on the code page, the three files are in the zip file (or get them in the link in the line above).
To change the displayed image, you use the CLUE A and B buttons: B on the right side of the display advances to the next image, A on the left of the display goes back to the previous image. The buttons are not visible on the outside of the purse but are easily pressed through the material. Only you will know the magic.
Power
The Bright Board has a convenient slide switch on it for power (circled in blue below). To turn on the lights, slide the switch on and turn it off to conserve power. If you decide to remove your CLUE board from the Bright Wearables board, please be sure to turn the power off to protect the electronics.
Enjoy
Enjoy your colorful wearable!
Have questions or comments? Continue the conversation on TechForum, DigiKey's online community and technical resource.
Visit TechForum