loading

How to make an Emoticon Jacket with LCD screen

Featured
Picture of How to make an Emoticon Jacket with LCD screen
lcdBoard.jpg
finalProduct2.jpg

Concept:

I would like to make a jacket that has a small LCD screen to create subtexts for interpersonal human interaction. The user would use a limited "keyboard" with force sensors and buttons under soft silicone keys to create computer textual subtitles to human interaction (textual emoticons, ie: :P). The dichotomy between personal interaction that occurs in physical space and that which occurs on a computer or in virtual space will be evident and reference IMing, online gaming, texting, email, and other forms of distanced interpersonal interaction. The loss of intonation and body language that occurs at the intersection of computers and textual communication is evident in today's culture.

In this application, the effort we put into replacing the nuances of personal communication with punctuation and textual cues in the virtual realm will help subtitle and enhance (or confuse) the conversation and interaction that occurs in the physical realm.  Force sensors will allow the wearer to react to the conversation in a natural way, the more tension, the more force applied, the more more intense the emoticon.  This also introduces a lack of control over the emoticon displayed and the perception of the emoticon in the context of the interaction.
 
Remove these adsRemove these ads by Signing Up

Step 1: Supplies:

Materials:
LCD Screen from Adafruit with chip: $15.25

Hookup wire (at least 3 different colors can be helpful) solid 22 Gauge
electrical tape
Jacket you would like to modify
2 force/pressure sensors $6.95 each
Breadboard or protoboard $5.95 for breadboard
Lilypad Arduino $39.95 Pro Kit or $21.95 for the board only
FTDI adapter and mini USB cord (included in the Pro Kit)
3 AAA 1.5V batteries
medium and heavy weight fusible interfacing
solder
sticky hook and loop closure dots
4 resistors 10k (brown, black, orange, gold) $.25 each
1 Lilypad button
silicone keyboard cover
Fray Check
Extra jacket fabric or cotton twill

Tools:
Wire strippers
Needle-nose Pliers
Wire Cutters
Needle and Thread
Sewing Machine (optional)
Clothes Iron
Scissors
Soldering Iron
x-acto knife
fabric cutting board
tailor's pencil or other fabric marker

Step 2: Jacket Requirements

Picture of Jacket Requirements
I made my own jacket from a pattern and design I created, but any jacket would work.  Just make sure it is loose enough to have room for your board and other electronics.  Also, having an asymmetrical cut will allow you to work with a larger space when placing and hooking up the LCD screen.

When choosing or making your own jacket, be prepared for the following:
1. The jacket should be made of a natural fiber, like cotton or wool.  Cotton is best and will allow you to attach interfacing and will handle heat from your iron well.
2. If your jacket has a lining, be ready to rip it out.  Grab a seam ripper and go for it.  Try to save the lining if you would like to reuse it after the electronics are in.

Step 3: Electronics:

Picture of Electronics:
Go to the Adafruit instructions to wire up the LCD:

1. Solder wires to LCD
2. Download the library and save to your local Arduino folder
3. Hook up the screen and chip according to the instructions
4. Solder the wires to the Lilypad (an Uno is shown in the pictures)
5. Hook up connections to all the + and - rows on the breadboard
6. Connect pin 10 to the strip that's connected to the white power wire for the backlight

Force Sensors:
1. Wire up the force sensors, directly into the breadboard for now
2. Wire one side of the sensor to ground
3. Wire the other side to the Analog Input Pin a2 (analog inputs are preceded by "a" on the board)
tip: use some tape on the back side of the Lilypad to hold the wire in place on the pad until soldered
4. Hook up a resistor to power from the pin row
5. Do the same with the other sensor, but hook up to the a4 pin

Button:
1. Solder small wires to the button and plug directly into the bread board
2. Hook up a wire to ground on one side of the button and a wire to Pin 12 of the Lilypad
3. Hook up a resistor to power from the pin row

Step 4: Code

1. Download and install the Arduino programming environment
Install the FTDI driver included in the download
2. Download the code "EmoticonJacketCode.txt" in this instructable
3. Open the text file, copy and paste all the code into a new Arduino file
4. Save to the code file to the same Arduino folder as the library folder is in
tip: the folder structure should be like this: Documents>Arduino>Library>ST7565
tip: Add the library folder to the Arduino folder if necessary
5. Plug in the mini USB into the FTDI adapter and carefully line up the pins on the Lilypad
6. Upload the code to the Lilypad
7. Test the sensors and button
tip: the button should turn the display on and off, when you hold the button for about a second
tip: once on, the sensors should each display emoticon based on the force applied to the sensor
8. You can change the emoticons to one that I have converted for you, the code has all of it.
9. If you want some totally different icons, go to this source forge project:
http://sourceforge.net/projects/bmp2glcd/
You can make the project from terminal and convert a 128x64 8 bit windows bitmap that you've made to what the board can read.


Step 5: Assembly

Picture of Assembly
buttonSolder.jpg
forceSensorButton.jpg
interfacing.jpg
installInside.jpg
InstallInsideCloseup.jpg
Finish connections:
1. Once everything is working, solder the button and force sensor wires to the input pins on the lilypad
2. Pull out those pliers, don't cut the wire yet, from the spool, strip the open end a little less than 1/2 inch
3. Spin the open end of the wire into a small circle and crimp the wire on one pin of the sensor
4. Put a little tape on the pin and wire to isolate it from the other pin.
5. Do the same to the other pin of the sensor with another color wire, wrap both pins with a little tape to keep the connections in place.
6. Cut the wires to length, enough to go up the sleeve, around the back neck and to the board.  Leave extra.
7. Do the same with the other sensor, but only leave enough wire to go up the sleeve and plug in the board.  Leave extra.
8. Now cut enough wire to hook up the button, leaving extra.
9. Twist the wires tightly together to complete the button wire and wrap a little tape around each of the wires to isolate them

Sew in the buttons :
1. Cut out the ctrl, space, and command buttons.  Leave a little extra around the edges to sew into.
2. Cut off an inch of the ends of the space bar to hold the sensors in place.
3. Sew the lilypad button with some thread into the cuff, on the inside. 
tip: keep the button on the underarm part of the cuff to allow access but not interfere with the sensors
4. Sew in the ctrl button over the button area on the outside, so you can feel where the button is.
5. See where your thumb and forefinger naturally squeeze the cuff on each arm, mark it, sew the command buttons on the outside over the marks
6. With one of the space bar pieces, sew it on the inside cuff, matching up with the command button with the opening pointing up the sleeve.  Don't sew the top closed, it's going to keep the force sensor in place.

Keep the wires in place:
1. Cut out light interfacing to match the front pieces of the jacket.  Follow the manufacturer instructions to iron the interfacing into the jacket.
2. Cut up some strips of heavy interfacing, approximately 1.5 in wide x .5 tall
3. Flip the jacket inside out
4. Run the wires around the jacket and iron the strips of interfacing over the wire to create a track for them to stay in place. 
tip: keep the fabric taut and don't iron over the wire, only on the edges of the interfacing, using the tip of the iron

Install:
1. Cut out where you would like to place the LCD using the knife and cutting board, just so the screen comes through.  Sew around the opening and fray check the edges.
2. On extra cotton fabric, trace out the shapes of the battery pack, Lilypad, breadboard and LCD.
3. Sew on the fabric pieces where you would like to place the items on the inside of the jacket.  i recommend the following (layout as if facing the garment):

     <lilypad>
<breadboard>
<LCD>
    <batterypack>

4.  Cut the hook and loop dots in half and place them on back of the pieces, stick the other side to the corresponding places on the inside of the jacket front.
5. Hook up all your remaining connections to the force sensors and button, only plug in the battery when everything else is hooked up.
tip: plug in the ground (black) first to the - strip on the breadboard and the power (red) to the + strip


Step 6: Create a Battery Pack

Picture of Create a Battery Pack
batterypack1a.jpg
batterypack2.jpg
batterypack2a.jpg
batterypack3.jpg
Caution!  Wiring improperly in this step can cause burns and battery explosion, no joke!
1. Line up the 3 AAAs side-by-side and going alternating directions: + - +
2. Put some tape on the middle to keep the pack together, keeping the ends open
3. Cut 2 pieces of 3/4 inch wire.  Strip the ends and twirl the ends into a circle.
4. Place one wire on the end of the batteries so that the metal makes contact with a - end and a + end of the batteries.
One end of the wire should be in contact with 1 and the other with 2.  Put some tape on to keep it in place, keeping the tape taut and watching that the wire doesn't move.

battery diagram:
1 2 3
+  - +
l   l   l
-  + -
4 5 6

5. Do the same on the other side, putting the wire in contact with ends 5 and 6.
6. Cut enough wire to connect the battery pack to the breadboard, about 10 inches, one red wire and one black
7. Strip the ends of the wires.
8. Curl one end of each of the wires
9. Put the black curled wire end in contact with position 4 and tape.
10. Put the red curled wire end in contact with position 3 and tape.
11. Make sure all wires are in contact and tape up more to reduce any movement.
12. Test your connections by plugging the pack into your breadboard to see if the LCD behaves properly. 
tip: if your LCD is flashing and acting weird, the connections on your pack are not strong enough.  Check them and re-tape if necessary.

Step 7: Final Product

Picture of Final Product
finalProductCloseup.jpg

Watch a video of the jacket in action:

Try it out and enjoy!
If you have issues with the LCD, make sure all your connections are strong and nothing has loosened from the breadboard.
You may sew/re-sew in the lining, but put nylon snaps when connecting to the front of the jacket so that you can get to your connections.
D_mon3 years ago
i really like the jacket you used. any idea where it was from by any change? very interesting project too, from a social and philosophical standpoint.
kstran07 (author)  D_mon3 years ago
Thanks, I appreciate it! Actually I designed and sewed/constructed the jacket myself. Unfortunately that means you can't buy it anywhere. Thanks for checking out my instructable!
Treknology4 years ago
I actually did this with an LCD clock back in the 80s.

A friend also made a similar one, but it was surrounded by flashing LEDs, and simply said "RATBAG". It was his way of protesting the Company's idea of name tagging everyone because management had no idea who did what, how or when.
kstran07 (author)  Treknology4 years ago
Very cool, I would love to see any images from your jackets you may have. It would be interesting to see an approach to a name tag jacket from the 80s.
No photos, sorry. But both of them looked like standard pinned-on name tags with the necessary wires passing through a small hole with the battery inside the breast pocket.
This fantastic project was made as part of the Tangible Interaction course in Digital Media Studies at the University of Denver.