9
Wearable Timing Bracer by Mike Hord
In this project, you’ll make a glowing wrist timer that’s perfect for a LARP costume.
I have a lot of friends who participate in live action roleplaying (LARP) games. As a concept it’s similar to tabletop roleplaying, except there are no turns, there’s no dice, and everything happening around you has a component of reality to it.
One of the elements of the game is timed effects; for instance, a spell may put you to sleep for 10 minutes, pin you in place for 1 minute, or make you laugh uncontrollably for 5 minutes. Since the game takes place in a fantasy wonderland, using a wristwatch to time an effect is an anachronism that detracts from the sense of the game. Players need a way to keep time that’s aesthetically unobtrusive. To address this, in this project we’ll build a bracer (or wristguard) with mystical glowing gems that also tells you how much longer an effect will last. As a bonus, we’ll make it connectable to your smartphone, so you can set the timer duration without reprogramming the project!
The bracer has four gems on it, each of which, when pressed, starts a timer. By default the timers last for one, five, or ten minutes. The gems pulse-glow for the duration of the effect, turning off when the timer runs out.
GET THE PARTS
This project includes both sewing and electronics. I’ve separated the supplies into two lists for convenience. You can find the craft supplies at any reasonably well-stocked sewing supply or fabric store.
Components
- LilyPad Simblee board (SparkFun P/N 13633)
- 4 LilyPad pixel boards (SparkFun P/N 13264)
- 4 LilyPad button boards (SparkFun P/N 08776)
- 1,000 mAh lithium polymer ion battery pack (SparkFun P/N 13813)
- LilyPad FTDI basic board (SparkFun P/N 10275)
- Mini-B USB cable (SparkFun P/N 11301)
- Conductive thread (SparkFun P/N 13814)
Crafting Supplies
- Grommet kit
- Ribbon, lace, or other attractive string-like material; I’m using parachute cord
- Sundry sewing supplies, like thread and a sewing needle
- Flexible fabric glue
- Clear or translucent gemstones or beads, about 1/2 to 1 inch in size
- Used gift card or expired credit card
- 5 to 10 precut sheets of felt (9 × 12 inches)
- 1/3 yard of faux leather
Tools
- Hammer (for setting grommets)
- Scissors
BUILD IT
Since the measurements for the crafting portion will vary according to preference and the wearer’s size, much of this project requires a “try it and see” approach.
I’m also assuming that you’re comfortable enough with sewing that I don’t need to explain every step of the sewing portion. If you’ve never done an e-textiles project before, I suggest that you first check out these excellent tutorials to help with the fundamentals:
- https://www.sparkfun.com/tutorials/313 This very useful video tutorial explains basic e-textile stitching practice.
- https://www.sparkfun.com/tutorials/306 We’ll use the technique in this tutorial to make the buttons that activate our timers.
- https://learn.sparkfun.com/tutorials/dungeons-and-dragons-dice-gauntlet This project makes a similar style of costume garment, but uses it to conceal a dice-rolling mechanism instead of a timer.
The final bracer will have three layers: the top layer is the leather-like material, the middle layer contains the piece of material with the circuitry, and the bottom layer is another layer of felt or fabric. Let’s get started.
Cut out the fabric pieces. Figure 9-1 shows the approximate shape you need. The exact measurements depend on how big you want your bracer to be, although you should try to make it as big as possible to accommodate the electronics. Try a few different shapes and dimensions using paper or scrap fabric until you find one that feels right.
Once you find the shape and size you like, cut out two pieces of that shape from felt and one piece from faux leather. Make the leather piece slightly bigger all around, so it conceals the felt pieces beneath it.
FIGURE 9-1: The approximate shape to cut out of the felt and faux leather
Lay out some electronics. Now you’ll experiment with how to place your electronics on the felt bracer shape. You need to find a position that feels comfortable for you.
First, you need to orient the LilyPad Simblee board with the six-pin header pointing toward an edge, so you can access these pins for programming and charging. Second, the pixel boards (I’ll refer to them as LEDs for short) should form a straight line down the center of the bracer, for aesthetic reasons. Figure 9-2 shows how I set up mine.
At this stage, you’re laying out only the LEDs, the battery, and the Simblee board. You’ll add the buttons later.
FIGURE 9-2: Line up the electronics in the middle of the form.
Sew in the conducting power threads for the LEDs. Using conductive thread, first you’ll sew in place the positive (+) and negative (–) power threads for the LEDs. You’ll need one power thread along one side of the electronics connected to all the positive pads, and one along the other side connected to all the negative pads. See Figure 9-3 for an idea of the threading.
FIGURE 9-3: The positive and negative power threads for the LEDs
Pay attention to the orientation of the LEDs! Make sure you sew the negative pad on the Simblee to the negative pads on the LEDs. When you’re certain you have everything laid out correctly, sew the pads in place with the conductive thread, making sure the stitches are long and have a fair amount of space between them like in Figure 9-3. In the next step you’ll have to pass another thread over the negative thread, and it’s easiest to do that by passing it between two stitches. The piece of felt that you sew the electronics onto is going to be the middle layer, just under the faux leather piece.
Sew the data thread from the Simblee board to the LEDs. Now you’ll need to link the LEDs to the Simblee board, so the Simblee can control them. Figure 9-4 shows how to sew the conductive thread.
FIGURE 9-4: Connecting the Simblee board to the LEDs
In Figure 9-4 I’ve used dashed yellow lines to more clearly show the path of the data thread from the Simblee board pad, labeled pad 3 on the board, to the first LED, and the threads that connect the LEDs consecutively.
Note that the data thread crosses over the negative power thread, as I mentioned in the previous step. You must make sure that the two threads don’t touch, or your project will short out. To accomplish this, pass the data thread over the negative power thread in the space between two stitches.
Cut holes in the felt under each LED board. Each LED needs one button under it so that when you press down on the LED it actuates the switch. To make the best connection, cut a small hole in the felt under the center of each LED so the LED board touches the button directly, without any felt between. But take care not to cut too large a hole; you don’t want to accidentally cut through one of the threads you’ve already placed, or weaken the felt around one so that it tears through!
Place, sew down, and thread the button boards. Place one button board beneath each LED so the button is facing the back of the LED board. There should be exactly one button board under each LED, as shown in Figure 9-5.
Again, I’ve highlighted the thread paths with yellow. The long thread across the top is the negative power thread from the other side of the felt, which you laid down earlier.
FIGURE 9-5: Threading the button boards to the bracer
Stitch conductive thread from one side of each button board to the negative power thread that you laid down earlier. Unlike LED boards, the button boards don’t have polarity, so you can thread either end to the negative power thread.
Next, run a thread from the other side of each button to the Simblee board, as shown in Figure 9-5. Stitch the closest button to pad 15, the next to pad 12, the next to 11, and the last to 9. Be extremely careful about where these threads cross the positive power thread from earlier. You need to make very certain that the threads don’t touch; otherwise that button won’t work, and it’ll be a huge inconvenience to fix.
Glue the backing material to the button boards. Now cut up the old gift card, or some similar stiff material, into squares approximately the size of the LED boards’ diameter. Glue one of these to the back of each button board, as shown in Figure 9-6.
FIGURE 9-6: The squares of card material glued to the back of each button board
I used a fabric glue specially designed to flex. These squares provide a solid backing for the buttons to press against so they will actuate rather than sinking into the layers below them. This step is important and should not be skipped.
Stitch together the layers and place the grommets. The piece of material you’ve been working with forms the middle layer; the top layer is the leather-like material, and the bottom layer is another layer of felt or fabric. Stitch the three layers together along one edge, as shown in Figure 9-7. Be sure to use regular, nonconductive thread.
FIGURE 9-7: Sewing the layers together and placing the grommets
Once you’ve stitched the edge of the layers together, you can place the grommets on that edge. Follow the instructions on the grommet kit package for these. Then repeat the sewing and grommeting on the other side.
Cut holes over the LEDs. Expose the LEDs by cutting a small hole in the leather over each one. If you’d like, you can also glue down a translucent gemstone or bead over each hole for a flashier appearance. I used 3D-printed gemstones with a mushroom backing. If you want to 3D-print these gemstones yourself, you can find the files in the book’s resources at https://nostarch.com/LEDHandbook/. Thanks to Youmagine user jensa (https://www.youmagine.com/jensa/designs) for providing the original “emerald gemstone” design. Figure 9-8 shows the completed project.
FIGURE 9-8: The complete bracer with gemstones in place over the LEDs
When the bracer is ready to wear, thread your ribbon or cord through the grommets to lace the bracer onto your wrist.
Pressing on an LED, or a translucent decoration if you’ve added them, should produce a nice “click” as the button actuates. If it doesn’t, add more layers of card to the back of the button board until the button is sufficiently sturdy.
CODE IT
Let’s take a look at the code. The full code is quite long—more than 500 lines—so I’ve included only the most interesting parts of it here. Download the code in the book’s resources at https://nostarch.com/LEDHandbook/, and read the comments in the following code listing to see how it works in general.
Support for the Simblee is not built into the Arduino IDE, so you’ll need to add it yourself. Follow the instructions for doing so in the Setting Up Arduino tutorial at https://learn.sparkfun.com/tutorials/simblee-concepts. That page will walk you through all the pertinent steps for programming the Simblee. This is where you’ll need the FTDI basic board and the USB cable.
The code is a lot simpler than its length would suggest. It sets up four independent timers, which can be triggered or reset by pressing the buttons hiding under the LEDs, then creates a pulsing effect on the LED corresponding to a running timer. The lion’s share of the code is actually the same code, replicated four times, once for each timer. At the end is all the necessary UI setup code.
#include <SimbleeForMobile.h>
#define SFM SimbleeForMobile // A macro to shorten our later
// library calls to a
// reasonable length.
// Aliases for the pin assignments for each button.
#define BUTTON1 15
#define BUTTON2 12
#define BUTTON3 11
#define BUTTON4 9
// Linearize the output of the LED in 16 steps. Because of the
// nonlinear response of the human eye, for the LED to look
// like it is fading in a linear fashion, nonlinear steps
// of brightness are needed.
const int LEDSteps[16] = {255, 191, 154, 128, 107, 90, 76, 64,
53, 43, 34, 26, 19, 12, 6, 0};
// Timer variable definitions.
int timer1 = 60; // timer1 defaults to 60 seconds
int t1Default = 60;
long t1last = 0;
int t1LEDIndex = 0;
int t1LEDDir = 1;
int t1LEDVal = 255;
long LEDUpdateLast = 0;
// Timer active definitions.
bool t1active = false;
// Flash storage definitions and variables.
#define FLASH_PAGE 251
unsigned long *t1p = ADDRESS_OF_PAGE(FLASH_PAGE);
void setup()
{
// Our buttons need to be inputs, with pullups.
pinMode(BUTTON1, INPUT_PULLUP);
pinMode(BUTTON2, INPUT_PULLUP);
pinMode(BUTTON3, INPUT_PULLUP);
pinMode(BUTTON4, INPUT_PULLUP);
// This is the output pin for the LEDs. I didn't
// make a #define for it because this is the only
// place we use it.
pinMode(3, OUTPUT);
// This function is defined farther down in the
// code. It handles writing the current values
// of LED brightness to the four LEDs.
updateLEDs();
// Serial is only used during debugging.
Serial.begin(115200);
// SFM.deviceName and SFM.advertisementData must,
// together, contain fewer than 16 characters.
// These strings put us at 15. Whew!
SFM.deviceName = "Bracer of Time";
SFM.advertisementData = " ";
SFM.begin();
// If we have values in the flash memory, we want to
// extract them and use those as our defaults. If we
// don't have values in flash, the flash value will
// read as -1, so we can check that to see whether we
// want to use the value in flash or not.
if ((int)*t1p > 0) t1Default = (int)*t1p;
timer1 = t1Default;
}
void loop()
{
// SFM.process() handles the UI processing, if a phone
// is connected to the device.
SFM.process();
// Timer 1 section
// Start the timer when the button is pressed and the timer
// isn't running.
if ((digitalRead(BUTTON1) == LOW) && (t1active == false))
{
delay(25); // Debounce the input.
t1active = true; // Start the timer.
t1last = millis(); // Start counting from now.
timer1 = t1Default; // Use the current default value for
// the timer.
while (digitalRead(BUTTON1) == LOW)
{/*Wait for the button to be released*/}
}
// Stop the timer if it's running.
if ((digitalRead(BUTTON1) == LOW) && t1active)
{
delay(25); // Debounce the input.
t1active = false; // Stop the timer.
while (digitalRead(BUTTON1) == LOW)
{/*Wait for the button to be released*/}
}
// Activates every 1000ms while the timer is running to
// keep the time updating.
if ((millis() - t1last > 1000) && t1active)
{
t1last = millis();
timer1--;
Serial.println(timer1);
if (timer1 == 0)
{
timer1 = t1Default;
t1active = false;
t1LEDVal = 255;
updateLEDs();
Serial.println("Timer 1 expired!");
}
}
// LED blinking section
// Updates 10 times a second, to update the LED of any
// timer that is running.
if (millis() - LEDUpdateLast > 100)
{
// First, take a note on the current time, so we
// know when to next enter this subsection of code.
LEDUpdateLast = millis();
// Update the values being displayed on the LEDs.
updateLEDs();
// Now, calculate the values that we'll display on
// the LEDs next time through the loop.
// T1 LED section
if (t1active)
{
// Adjust the LED value for this LED by changing
// the index we use from the LEDSteps array.
t1LEDVal = LEDSteps[t1LEDIndex+=t1LEDDir];
// "Bounce" the direction of adjustment when we
// reach one end or the other of the array.
if (t1LEDIndex == 0)
{
t1LEDDir = 1;
}
else if (t1LEDIndex == 15)
{
t1LEDDir = -1;
}
}
}
}
// UI Element object handles
// We could have put this stuff up at the top, but I
// wanted it closer to the UI function.
uint8_t t1Input;
uint8_t getValuesButton;
uint8_t updateButton;
// This function is a Simblee library function that
// defines the UI elements that we'll see on the phone.
void ui()
{
SFM.beginScreen();
// We need to refetch these values every time we
// reconnect to the phone, in case they changed.
if ((int)*t1p > 0) t1Default = (int)*t1p;
timer1 = t1Default;
// These are the text boxes that display the name of
// the timer the text field will be controlling.
SFM.drawText(40,80, "Timer 1:");
// These are the text fields that allow the user to input
// a number to be used for the default value of each timer.
int temp = -1;
t1Input = SFM.drawTextField(100, 70, 50, temp);
// Define two buttons: one to get the values from flash and
// populate the text fields, and one to store the values to
// flash.
getValuesButton = SFM.drawButton(40,240,150, "Get settings");
updateButton = SFM.drawButton(40, 300, 150, "Store settings");
SFM.endScreen();
}
// This is a Simblee library function that handles events caused
// by objects in the UI. We have two types of events in this
// application: text field entry events and button events.
void ui_event(event_t &event)
{
// First, handle the text field entry events. These occur when
// the "enter" key is pressed while the cursor is in a text
// field.
if (event.id == t1Input)
{
t1Default = event.value;
Serial.println(event.value);
}
// Now, the update stored values button. This records
// the values in the fields to flash memory so they
// persist through power loss or reset.
if (event.id == updateButton)
{
int rc = flashPageErase(FLASH_PAGE);
Serial.println(rc);
rc = flashWrite(t1p, (unsigned long)t1Default);
Serial.println(*t1p);
timer1 = t1Default;
}
// This button fetches the current values and puts them
// into the text fields.
if (event.id == getValuesButton)
{
SFM.updateValue(t1Input, timer1);
}
}
// Put the current intensity on each LED.
void updateLEDs()
{
RGB_Show(t1LEDVal,0,0,3);
}
USE IT
You’ll need to download the Simblee For Mobile app to your smartphone to change the timing settings. This app acts like a browser for Simblee-based projects. It’s available for both iPhone and Android and is free to download.
Using the app is pretty simple: when your bracer is powered up and your Simblee has been programmed with the project code, open the For Mobile app and you should see a list item titled “Bracer of Time.” Touch that list item to bring up the interface for the bracer, shown in Figure 9-9, where you can enter the desired delay in seconds for each timer, as well as store the values in flash memory on the bracer so they persist after power down.
FIGURE 9-9: The bracer interface
SUMMARY
You should now have a complete magical timing bracer! I hope you find some need for it.
I recommend looking through the full code and the comments left there. You’ll find some useful tricks for linearizing the output of an LED, so that it appears to fade smoothly and evenly from all the way off to all the way on, as well as some goodies about executing code in a loop without a lot of busy waiting. You can find a lot more information on the GitHub page for this project at http://www.github.com/mhord/bracer_of_time/. All the resources, including the full code, are available at https://nostarch.com/LEDHandbook/.