# Circuit Playground Bike Glove ## Overview ![](https://cdn-learn.adafruit.com/assets/assets/000/042/279/medium800/force___flex_banner.jpg?1496523152) In this guide we will use the Circuit Playground to create a bike turn signal indicator. By sewing the Circuit Playground to a bike glove and using the accelerometer to detect hand position the standard hand turn signals are enhanced with some nice NeoPixel animations. # Required Parts In addition to a Circuit Playground, you will need some form of battery power. The 500mAh battery is a nice low profile option and is recommended for this build. However, you may be able to also use the AAA battery pack if you can incorporate it into your bike gloves. Oh yeah, you'll also need bike gloves and some needle and thread to sew everything together. - Circuit Playground - [Classic](https://www.adafruit.com/products/3000) - [Express](https://www.adafruit.com/products/3333) ![force___flex_cp.jpg](https://cdn-learn.adafruit.com/assets/assets/000/042/241/medium640/force___flex_cp.jpg?1496363440) [Lithium Ion Polymer Battery - 3.7v 500mAh](https://www.adafruit.com/products/1578) ![force___flex_lipo.jpg](https://cdn-learn.adafruit.com/assets/assets/000/042/240/medium640/force___flex_lipo.jpg?1496363330) Bike Gloves ![force___flex_bike_gloves.jpg](https://cdn-learn.adafruit.com/assets/assets/000/042/261/medium640/force___flex_bike_gloves.jpg?1496432632) Also check out [these options](https://www.adafruit.com/categories/575) for charging the LiPo battery. # Before Starting If you are new to the Circuit Playground, you may want to first read these overview guides. ## Circuit Playground Classic - [Overview](../../../introducing-circuit-playground) - [Lesson #0](../../../circuit-playground-lesson-number-0) ## Circuit Playground Express - [Overview](../../../adafruit-circuit-playground-express/) # Circuit Playground Bike Glove ## Bike Hand Signals When riding a bicycle various hand signals are used to communicate your intentions to others sharing the road with you. This can be other bike riders, but also, and more importantly, to cars and trucks. There are all kinds of bicycle hand signals, and they may vary from location to location. For a good overview, read the discussion on this web page: [Rules of the Road: When and How to Use Hand Signals When Riding](http://roadbike.io/rules-road-use-hand-signals-riding/) For this project, we will focus on only two hand signals - the ones used to indicate turning direction. The ones we will use are shown below. ![](https://cdn-learn.adafruit.com/assets/assets/000/042/273/medium800/force___flex_hand_signals.png?1496507723) # Circuit Playground Bike Glove ## Bike Glove Assembly Let's start by actually making the bike glove. This way you can upload programs to it as you work through the rest of the guide. Use some double sided tape to attach the battery to the back of the Circuit Playground. ![force___flex_battery_and_tape.jpg](https://cdn-learn.adafruit.com/assets/assets/000/042/262/medium640/force___flex_battery_and_tape.jpg?1496432824) Attach the battery to the back of the Circuit Playground as shown.   ([battery chargers](https://www.adafruit.com/category/575)) ![force___flex_battery_and_tape2.jpg](https://cdn-learn.adafruit.com/assets/assets/000/042/263/medium640/force___flex_battery_and_tape2.jpg?1496432872) Now get some needle and thread ready for sewing the Circuit Playground to the glove. ![force___flex_glove_and_thread.jpg](https://cdn-learn.adafruit.com/assets/assets/000/042/264/medium640/force___flex_glove_and_thread.jpg?1496432948) Sew the thread through the pad holes. Make several loops and then tie it off in a knot.   Two locations should be enough. I used the **SCL #3** and **#12** pad holes. ![force___flex_glove_and_thread2.jpg](https://cdn-learn.adafruit.com/assets/assets/000/042/265/medium640/force___flex_glove_and_thread2.jpg?1496432997) Done! ![force___flex_glove_assy.jpg](https://cdn-learn.adafruit.com/assets/assets/000/042/266/medium640/force___flex_glove_assy.jpg?1496433102) If you want, you can continue to wear the glove as you work through the guide. Just jack in to upload the sketches. You'll look totally cyberpunk! ![](https://cdn-learn.adafruit.com/assets/assets/000/042/267/medium800/force___flex_glove_coder.jpg?1496433191) # Circuit Playground Bike Glove ## Hand Position and Accelerometer We will use the accelerometer to determine the hand position. For a good overview of the basics of how an accelerometer works, check out the [How Tall Is It?](../../../../how-tall-is-it/hello-accelerometer) guide. You can also read some technical details in the [Lesson #0 Guide](../../../../circuit-playground-lesson-number-0/accelerometer). With the Circuit Playground sewn on the bike glove as in the previous section, the three main axis line up as shown in the image below. Warning: ![](https://cdn-learn.adafruit.com/assets/assets/000/042/270/medium800/force___flex_hand_axis.jpg?1496433766) Let's start by looking at the accelerometer output in the various hand positions. You can use the simple sketch below which will send the three accelerometer values to the serial port. ```auto #include float X, Y, Z; void setup() { Serial.begin(9600); CircuitPlayground.begin(); } void loop() { X = CircuitPlayground.motionX(); Y = CircuitPlayground.motionY(); Z = CircuitPlayground.motionZ(); Serial.print(X); Serial.print(","); Serial.print(Y); Serial.print(","); Serial.println(Z); delay(100); } ``` With this sketch loaded and running on the Circuit Playground, open the Serial Plotter: **Tools -\> Serial Plotter** You should see three lines being drawn, one for each axis of the accelerometer. Now move the glove into the three main positions: - **HAND DOWN** (on bike grip) - **RIGHT TURN** - **LEFT TURN** ![](https://cdn-learn.adafruit.com/assets/assets/000/042/326/medium800/force___flex_accel_plot.png?1496589334) Note how in each position there is one reading that stands out. For the hand down position it is the **Z axis** as reported by `motionZ()`. For the right turn position it is the **X axis** as reported by `motionX()`. For the left turn position it is the **Y axis** as reported by `motionY()`. So we can see a strong correlation between the hand positions of interest and the main axis of the accelerometer as: - **HAND DOWN**   --\> `motionZ()` - **RIGHT TURN** --\> `motionX()` - **LEFT TURN** --\> `motionY()` So by simply checking the values of the various accelerometer readings, we can determine hand position. Let's see how next. # Circuit Playground Bike Glove ## Hand Position Detection The basic idea for detecting hand position is to check if the accelerometer values of each of the three axis exceed a preset level. This level is called a threshold. We will use three separate threshold values for the three separate axis values. This idea is shown in the image below. Note that for the left turn, the value is negative. ![](https://cdn-learn.adafruit.com/assets/assets/000/042/325/medium800/force___flex_threshold_plot.png?1496589311) Here is a program to demonstrates this. The threshold checks are done using `if` statements. Note that the `if` statements for the left turn/right turn checks are nested within the `if` statement for the hand down check. This is because the only time it makes sense to check for left/right is if the hand is up. We don't want the turn signal lights to turn on while the hand is down on the handle bars. ```auto /////////////////////////////////////////////////////////////////////////////// // Circuit Playground Bike Glove - Hand Position Detection // // Author: Carter Nelson // MIT License (https://opensource.org/licenses/MIT) #include #define THRESHOLD_UP 5 // threshold for hand up test #define THRESHOLD_RIGHT 5 // threshold for right turn #define THRESHOLD_LEFT -5 // threshold for left turn /////////////////////////////////////////////////////////////////////////////// void setup() { Serial.begin(9600); CircuitPlayground.begin(); } /////////////////////////////////////////////////////////////////////////////// void loop() { // check for hand up or down if (CircuitPlayground.motionZ() > THRESHOLD_UP) { Serial.println("HAND DOWN"); } else { // check for right turn if (CircuitPlayground.motionX() > THRESHOLD_RIGHT) { Serial.println("RIGHT TURN"); // check for left turn } else if (CircuitPlayground.motionY() < THRESHOLD_LEFT) { Serial.println("LEFT TURN"); } } delay(500); } ``` With this sketch loaded and running on the Circuit Playground, open up the Serial Monitor. **Tools -\> Serial Monitor** You should see the current hand position printed out twice a second. Try moving to the various hand positions and see how they are printed out as shown below. ![](https://cdn-learn.adafruit.com/assets/assets/000/042/272/medium800/force___flex_position_detection.png?1496435663) Pretty simple, but it works. # Circuit Playground Bike Glove ## Turn Signal Animations OK, we got hand position detection working. However, car drivers aren't going to have the Serial Monitor running on their dashboards. So we should do something other than serial output. How about the NeoPixels? We can replace the `Serial.println()` commands with code that will activate the NeoPixels. Even better, since this code will be in the main `loop()` function, it will be called over and over again. That way we can create some simple animations and let the main `loop()` function drive them. # Right Turn Animation When the glove is in the 'right turn' orientation, the NeoPixels are arranged as shown in the image below. ![](https://cdn-learn.adafruit.com/assets/assets/000/042/274/medium800/force___flex_neopixels_up.png?1496509009) What would be neat is if we could make an arrow pointing to the right. Something like this: ![](https://cdn-learn.adafruit.com/assets/assets/000/042/275/medium800/force___flex_neopixels_right_arrow.png?1496514737) It won't be a perfect arrow, but what about using NeoPixels 2, 5, 6, 7, 8, and 9? Here's the code to test this out. ```auto /////////////////////////////////////////////////////////////////////////////// // Circuit Playground Bike Glove - Right Turn Animation // // Author: Carter Nelson // MIT License (https://opensource.org/licenses/MIT) #include #define BRIGHTNESS 255 #define RIGHT_COLOR 0xFFFFFF #define ANIM_DELAY 200 /////////////////////////////////////////////////////////////////////////////// void rightTurnAnimation() { // just to be sure, turn off all NeoPixels CircuitPlayground.clearPixels(); // turn on NeoPixels to make an arrow shape CircuitPlayground.setPixelColor(2, RIGHT_COLOR); CircuitPlayground.setPixelColor(5, RIGHT_COLOR); CircuitPlayground.setPixelColor(6, RIGHT_COLOR); CircuitPlayground.setPixelColor(7, RIGHT_COLOR); CircuitPlayground.setPixelColor(8, RIGHT_COLOR); CircuitPlayground.setPixelColor(9, RIGHT_COLOR); // wait a little bit delay(ANIM_DELAY); // turn them all off CircuitPlayground.clearPixels(); // wait again delay(ANIM_DELAY); } /////////////////////////////////////////////////////////////////////////////// void setup() { CircuitPlayground.begin(BRIGHTNESS); } /////////////////////////////////////////////////////////////////////////////// void loop() { rightTurnAnimation(); } ``` The functions `rightTurnAnimation()` does one 'frame' of the animation. Then, it is called over and over again by being placed in the `loop()` function. Does this look like an arrow to you? Maybe. Kind of? Well, for now we'll just go ahead and use this as our right turn animation. # Left Turn Animation When the glove is in the 'left turn' orientation, the NeoPixels are arranged as shown in the image below. ![](https://cdn-learn.adafruit.com/assets/assets/000/042/276/medium800/force___flex_neopixels_left.png?1496514783) This is rotated from the right turn orientation, so the NeoPixels are arranged differently. In this arrangement, trying to make a left arrow is a bit of an issue. ![](https://cdn-learn.adafruit.com/assets/assets/000/042/277/medium800/force___flex_neopixels_left_arrow.png?1496514813) Hmmmm. There are only a couple of the NeoPixels that seem to form an arrow. Maybe it would be enough to just use 8, 9, 0, and 1. But let's try something different for the left turn animation. We can make a neat chaser effect and light up the NeoPixels one at a time, moving from right to left. So first 5 & 4, then 6 & 3, then 7 & 2, then 8 & 1, and finally 9 & 0. Something like this: ![](https://cdn-learn.adafruit.com/assets/assets/000/042/278/medium800/force___flex_neopixels_left_chase.png?1496516694) Here's the code to test this out. ```auto /////////////////////////////////////////////////////////////////////////////// // Circuit Playground Bike Glove - Left Turn Animation // // Author: Carter Nelson // MIT License (https://opensource.org/licenses/MIT) #include #define BRIGHTNESS 255 #define LEFT_COLOR 0xFFFFFF #define ANIM_DELAY 200 /////////////////////////////////////////////////////////////////////////////// void leftTurnAnimation() { // just to be sure, turn off all NeoPixels CircuitPlayground.clearPixels(); // Turn on 5 & 4 CircuitPlayground.setPixelColor(5, LEFT_COLOR); CircuitPlayground.setPixelColor(4, LEFT_COLOR); delay(ANIM_DELAY); CircuitPlayground.clearPixels(); // Turn on 6 & 3 CircuitPlayground.setPixelColor(6, LEFT_COLOR); CircuitPlayground.setPixelColor(3, LEFT_COLOR); delay(ANIM_DELAY); CircuitPlayground.clearPixels(); // Turn on 7 & 2 CircuitPlayground.setPixelColor(7, LEFT_COLOR); CircuitPlayground.setPixelColor(2, LEFT_COLOR); delay(ANIM_DELAY); CircuitPlayground.clearPixels(); // Turn on 8 & 1 CircuitPlayground.setPixelColor(8, LEFT_COLOR); CircuitPlayground.setPixelColor(1, LEFT_COLOR); delay(ANIM_DELAY); CircuitPlayground.clearPixels(); // Turn on 9 & 0 CircuitPlayground.setPixelColor(9, LEFT_COLOR); CircuitPlayground.setPixelColor(0, LEFT_COLOR); delay(ANIM_DELAY); CircuitPlayground.clearPixels(); } /////////////////////////////////////////////////////////////////////////////// void setup() { CircuitPlayground.begin(BRIGHTNESS); } /////////////////////////////////////////////////////////////////////////////// void loop() { leftTurnAnimation(); } ``` Just like before, the `leftTurnAnimation()` function does one pass through the animation. Then it is called over and over by the main `loop()`. This looks pretty cool, so let's use it for our left turns. # Circuit Playground Bike Glove ## Bike Glove Software Now let's bring it all together into our final code. We just add our animation functions to the Hand Position Detection code and then replace the `Serial.println()` statements with calls to our left/right turn animations. And here it is: ```auto /////////////////////////////////////////////////////////////////////////////// // Circuit Playground Bike Glove - With "On/Off" // // Author: Carter Nelson // MIT License (https://opensource.org/licenses/MIT) #include #define THRESHOLD_UP 5 // threshold for hand up test #define THRESHOLD_RIGHT 5 // threshold for right turn #define THRESHOLD_LEFT -5 // threshold for left turn #define BRIGHTNESS 255 #define LEFT_COLOR 0xFFFFFF #define RIGHT_COLOR 0xFFFFFF #define ANIM_DELAY 200 /////////////////////////////////////////////////////////////////////////////// void leftTurnAnimation() { // just to be sure, turn off all NeoPixels CircuitPlayground.clearPixels(); // Turn on 5 & 4 CircuitPlayground.setPixelColor(5, LEFT_COLOR); CircuitPlayground.setPixelColor(4, LEFT_COLOR); delay(ANIM_DELAY); CircuitPlayground.clearPixels(); // Turn on 6 & 3 CircuitPlayground.setPixelColor(6, LEFT_COLOR); CircuitPlayground.setPixelColor(3, LEFT_COLOR); delay(ANIM_DELAY); CircuitPlayground.clearPixels(); // Turn on 7 & 2 CircuitPlayground.setPixelColor(7, LEFT_COLOR); CircuitPlayground.setPixelColor(2, LEFT_COLOR); delay(ANIM_DELAY); CircuitPlayground.clearPixels(); // Turn on 8 & 1 CircuitPlayground.setPixelColor(8, LEFT_COLOR); CircuitPlayground.setPixelColor(1, LEFT_COLOR); delay(ANIM_DELAY); CircuitPlayground.clearPixels(); // Turn on 9 & 0 CircuitPlayground.setPixelColor(9, LEFT_COLOR); CircuitPlayground.setPixelColor(0, LEFT_COLOR); delay(ANIM_DELAY); CircuitPlayground.clearPixels(); } /////////////////////////////////////////////////////////////////////////////// void rightTurnAnimation() { // just to be sure, turn off all NeoPixels CircuitPlayground.clearPixels(); // turn on NeoPixels to make an arrow shape CircuitPlayground.setPixelColor(2, RIGHT_COLOR); CircuitPlayground.setPixelColor(5, RIGHT_COLOR); CircuitPlayground.setPixelColor(6, RIGHT_COLOR); CircuitPlayground.setPixelColor(7, RIGHT_COLOR); CircuitPlayground.setPixelColor(8, RIGHT_COLOR); CircuitPlayground.setPixelColor(9, RIGHT_COLOR); // wait a little bit delay(ANIM_DELAY); // turn them all off CircuitPlayground.clearPixels(); // wait again delay(ANIM_DELAY); } /////////////////////////////////////////////////////////////////////////////// void setup() { CircuitPlayground.begin(BRIGHTNESS); } /////////////////////////////////////////////////////////////////////////////// void loop() { // check slide switch position if (CircuitPlayground.slideSwitch()) { // check for hand up or down if (CircuitPlayground.motionZ() > THRESHOLD_UP) { // do nothing } else { // check for right turn if (CircuitPlayground.motionX() > THRESHOLD_RIGHT) { rightTurnAnimation(); // check for left turn } else if (CircuitPlayground.motionY() < THRESHOLD_LEFT) { leftTurnAnimation(); } } } } ``` # "ON/OFF" Switch You may have noticed one extra feature added to this final code. Within the `loop()` function, everything is wrapped in an `if` statement that checks the position of the slide switch using `CircuitPlayground.slideSwitch()`. Like this: ```auto void loop() { // check slide switch position if (CircuitPlayground.slideSwitch()) { // MAIN CODE HERE } } ``` This was done to provide a simple on/off capability. If the Circuit Playground had an on/off switch for power, then we could just use that and turn it off for real. But since it doesn't we can use the slide switch. The Circuit Playground is still powered, but the code that makes the bike glove work is only run if the slide switch is in the **+** position. Therefore: Info: Maybe you want to stop and pet a cute kitty you see, but don't want to freak it out with flashing lights. So you can just disable the lights real quick by sliding the switch to **-** position. Slide bike to **+** position when you're ready to go. Happy riding! # Circuit Playground Bike Glove ## Bike Glove CircuitPython Here is a [CircuitPython](../../../../adafruit-circuit-playground-express/adafruit2-circuitpython) version of the Bike Glove software. Info: ```auto # Circuit Playground Express Bike Glove - With "On/Off" # # Author: Carter Nelson # MIT License (https://opensource.org/licenses/MIT) import time from adafruit_circuitplayground.express import cpx THRESHOLD_UP = 5 # threshold for hand up test THRESHOLD_RIGHT = 5 # threshold for right turn THRESHOLD_LEFT = -5 # threshold for left turn LEFT_COLOR = 0xFFFFFF RIGHT_COLOR = 0xFFFFFF ANIM_DELAY = 0.200 RIGHT_TURN = ( (2, 5, 6, 7, 8, 9), ) LEFT_TURN = ( (5, 4), (6, 3), (7, 2), (8, 1), (9, 0) ) def animate_glove(animation, color, delay=ANIM_DELAY): for frame in animation: cpx.pixels.fill(0) for pixel in frame: cpx.pixels[pixel] = color time.sleep(delay) cpx.pixels.fill(0) time.sleep(ANIM_DELAY) # Loop forever while True: # Check slide switch position if cpx.switch: # Get acceleration values X, Y, Z = cpx.acceleration # Check if glove is down or up if Z < THRESHOLD_UP: # Determine glove orienation and animate if Y > THRESHOLD_RIGHT: animate_glove(RIGHT_TURN, RIGHT_COLOR) elif X > THRESHOLD_LEFT: animate_glove(LEFT_TURN, LEFT_COLOR) ``` # Circuit Playground Bike Glove ## Questions and Code Challenges The following are some questions related to this project along with some suggested code challenges. The idea is to provoke thought, test your understanding, and get you coding! While the sketches provided in this guide work, there is room for improvement and additional features. Have fun playing with the provided code to see what you can do with it. Or do something new and exciting! # Questions - Is it possible for multiple hand positions to be reported at the same time? - Is it possible for hand positions to be falsely reported? - Why was a value of 5 used for the thresholds? # Code Challenges - Use the light sensor to automatically adjust the NeoPixel brightness. - Change the color of the NeoPixels. - Change the `if/else` block for the hand up/down check into a single `if` statement. (hint: invert logic) - Use the speaker to add an audio cue that the turn signals are active. This let's the rider know the signals are engaged without needing to look at the glove. - Add additional hand position detections and animations, for example slow down/stop. ## Featured Products ### Circuit Playground Express [Circuit Playground Express](https://www.adafruit.com/product/3333) **Circuit Playground Express** is the next step towards a perfect introduction to electronics and programming. We've taken the original Circuit Playground Classic and made it even better! Not only did we pack even more sensors in, we also made it even easier to... In Stock [Buy Now](https://www.adafruit.com/product/3333) [Related Guides to the Product](https://learn.adafruit.com/products/3333/guides) ### Circuit Playground Classic [Circuit Playground Classic](https://www.adafruit.com/product/3000) Would you like to learn electronics, with an all-in-one board that has sensors and LEDs built in? **Circuit Playground** is here - and it's the best way to practice programming on real hardware with no soldering or sewing required! This is the **Classic**... In Stock [Buy Now](https://www.adafruit.com/product/3000) [Related Guides to the Product](https://learn.adafruit.com/products/3000/guides) ### Lithium Ion Polymer Battery - 3.7v 500mAh [Lithium Ion Polymer Battery - 3.7v 500mAh](https://www.adafruit.com/product/1578) 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 500mAh for a total of about 1.9 Wh. If you need a larger (or smaller!) battery, In Stock [Buy Now](https://www.adafruit.com/product/1578) [Related Guides to the Product](https://learn.adafruit.com/products/1578/guides) ### Adafruit Micro-Lipo Charger for LiPo/LiIon Batt w/MicroUSB Jack [Adafruit Micro-Lipo Charger for LiPo/LiIon Batt w/MicroUSB Jack](https://www.adafruit.com/product/1904) Oh so handy, this little lipo charger is so small and easy to use you can keep it on your desk or mount it easily into any project! Simply plug it via any MicroUSB cable into a USB port and a 3.7V/4.2V lithium polymer or lithium ion rechargeable battery into the JST plug on the other end.... In Stock [Buy Now](https://www.adafruit.com/product/1904) [Related Guides to the Product](https://learn.adafruit.com/products/1904/guides) ## Related Guides - [Introducing Circuit Playground](https://learn.adafruit.com/introducing-circuit-playground.md) - [Adafruit Circuit Playground Express](https://learn.adafruit.com/adafruit-circuit-playground-express.md) - [Personal UV HotSpot Parasol](https://learn.adafruit.com/personal-blacklight-uv-parasol.md) - [UFO Flying Saucer with Circuit Playground Express](https://learn.adafruit.com/ufo-circuit-playground-express.md) - [Meeting Time Keeper Stick](https://learn.adafruit.com/meeting-time-keeper-stick-with-cpx.md) - [CircuitPython Sin Complicaciones para la Circuit Playground Express y la Bluefruit](https://learn.adafruit.com/circuitpython-sin-complicaciones-para-la-circuit-playground-express.md) - [¡Bienvenido a CircuitPython!](https://learn.adafruit.com/bienvenido-a-circuitpython-2.md) - [Dancing Inflatables: Make your Holiday Display Move](https://learn.adafruit.com/dancing-inflatables-make-your-holiday-display-move.md) - [Labo RC Car Action Lights](https://learn.adafruit.com/labo-rc-car-underglow.md) - [Easter Egg Light Stand](https://learn.adafruit.com/easter-egg-light-stand.md) - [CircuitPython Hardware: SD Cards](https://learn.adafruit.com/micropython-hardware-sd-cards.md) - [Scratch 3 Walkthrough and Demo](https://learn.adafruit.com/guide-to-scratch-3.md) - [DIY Circuit Playground Shields](https://learn.adafruit.com/circuit-playground-shields.md) - [Glowing Neopixel Resin River Table](https://learn.adafruit.com/glowing-neopixel-resin-river-table.md) - [Circuit Playground Express Compass](https://learn.adafruit.com/circuit-playground-express-compass.md) - [Cardboard Circuit Playground Express Inchworm Robot](https://learn.adafruit.com/cardboard-robot-inchworm.md) - [Circuit Playground Combadge](https://learn.adafruit.com/circuit-playground-combadge.md)