Introduction: Making a Bling Bag With Recycled Bubble Wrap Fabric!

By I wrote a book on wearables :)
About: eh? PhDork • #tinker #tailor #maker #breaker • I teach computer science, previously: design innovation and Interactivity • assistive technologies • forgetfulness • wearables • physical computing • popcorn •

This is an exciting Instructable, I'm not gonna lie - this makes a unique gift and uses recycled bubble wrap that often goes to waste.

You can follow the Instructable I made previously for how to make the recycled bubble wrap fabric.

Then, using that fabric created, we are going to sew a touch-activated (to change the LED colours) super cool bag that you can use for carrying your components, pens, pencils, and other small stuff.

Note: If you don't have any bubble wrap fabric made, you can still use any recycled fabric you want (old jeans, tee shirts etc) to make a bling bag- but the RGB LEDs look super amazing through the bubble wrap - and it's a great way to use up and recycle your old bubble wrap too.

Skills that we are using

For this Instructable we will be using basic sewing skills. You can sew by hand using basic stitches, and you can also use a sewing machine for part of this tutorial if you have one and prefer to sew by machine. You don't need a sewing machine to complete this project.

You might also need basic soldering skills if your strip of LEDs does not have wires attached to them.

The code will be provided so you won't need any specialist coding skills. However, I will assume that you've got the Arduino IDE installed.

Here's what you'll need to follow along.

Supplies

For this Instructable you will need two pieces of bubble wrap fabric - made from recycled bubble wrap! (or two fabric pieces, off-cuts, or repurpose from jeans or similar)

You'll also need these seven items:

  1. a circuit board, I'm using the GEMMA M0 from Adafruit because it's small, affordable, and has all the capabilities we need for this project
  2. some wires to connect our board to the RGB LED strip (soft silicone wire is best for wearables), your strip of LEDs may already have connected wires so you might not need this.
  3. the RGB LED strip - this will be embedded in your bubbles or glued to your fabric
  4. conductive thread
  5. conductive fabric, I've made mine into circle shapes
  6. sewing needles, and a needle threader
  7. a zipper

Additionally, I used a glue gun and glue to secure the wires on the inside of the bag. I also added a black fabric trim to one side of the bag. Also, if your LED strip doesn't have wires soldered, you will need soldering supplies and wires to solder it.

  • I'm also using a rechargeable battery that I'll plug into the Gemma board.

You'll also need the Arduino IDE to programme the GEMMA M0 board.

Now that we have collected these materials, let's jump in!

Step 1: Sew the Zipper to the Fabric

We will be using two pieces of fabric (in this case the bubble wrap fabric), and we will start by sewing the zipper to one edge of the fabric.

  1. Looking at the illustration, the zipper will be placed on the larger piece of fabric, along the top edge.
  2. IMPORTANT - the zipper will be face down!
  3. With the zipper facing down into the fabric, and it aligned with the top edge, clip or pin into place.
  4. Once clipped into place - sew along the zipper line, you can do this by hand or with a sewing machine.

The zipper is now sewn into place. Now we need to sew it flat so it is easier to use.

Step 2: Sewing the Zipper

We want the zipper to lay flat on this fabric piece, so press it flat - facing the correct forward direction (see the photo).

  • With the zipper flat, sew along the zipper edge so it will secure it in place.
  • This also makes it look a little more finished as it will have an edge now.

With the zipper sewn into place and flipped into the correct orientation, we will work on connecting the circuit parts before we sew the bag together.

Let's look at the circuit...

Step 3: Circuit Placement and Connections

Now that we have half of the zipper sewn into place, we will work on the circuit on the other piece of fabric. If we work on the circuit before it is sewn into a bag, it will be a lot easier to sew because you won't be sewing into a small place.

First, place your conductive fabric pieces into place. This is where you, or someone, will touch to activate the colour sequence LEDs on the bag. Also, place the GEMMA M0 into place.

Let's sew

With the GEMMA M0 and conductive fabric in place:

  1. using conductive thread, sew from the GEMMA M0 pin A2(D0) to one of the conductive pieces of fabric
  2. using conductive thread, sew from the GEMMA M0 pin A1(D2) to the other piece of conductive fabric

I've sewn these by hand. Always make sure to create a secure connection and sew several times over and through the sew holes on the GEMMA M0 board to ensure there is a secure connection made.

Tie a knot when you have finished sewing the connection. I also dab a little clear nail varnish orfray checkon the knot to be sure it won't come undone.

Top Tip: when sewing with conductive thread, the thread can easily unravel, or be difficult to thread through a standard needle. I usually choose a needle with a wider hole, but I use a needle threader to make threading conductive thread super quick and easy.

We will be using the pins A2 and A1 in our code later, to make them touch-enabled!

With our conductive areas sewn into place, we only need to add our connections to the RGB LED strip.

Let's do that now.

Step 4: Connecting the RGB LED Strip

If you followed the previous Instructable (recycling bubble wrap into fabric) we embedded the RGB LED strip into the recycled bubble wrap. You will have the strip in place and you will have tested it with a GEMMA M0 connected with croc clips.

Now, we need to make this connection more permanent - because we want to use this as a bag or case for our things.

Note: If your LED strip has pre-soldered wires you won't need to follow this step. You can use the wires and sew directly to them with conductive thread if you prefer not to solder.

Let's follow some steps to solder:

  1. start by soldering wires to the end of your RGB LED strip
  2. using three wires, we need to solder a ground (GND), power (+5V), and data in (Din) wire to our RGB LED strip
  3. I usually add a little solder first to the pads I'll be soldering to
  4. then I add a little solder to the stripped wire ends
  5. after the solder is on both parts, I soldered them together
  6. once I finished soldering, I added heat shrink to these wires to help reduce the strain
  7. now you can solder these connections to the GEMMA M0 board, or you can loop the wire ends and sew them with conductive thread, as we did with the conductive fabric touch pieces

With our electronic components connected, we can now start to program our microprocessor.

Step 5: Programming the GEMMA M0

Now that you've connected up all the electronic components, we should code our GEMMA M0 board so that it senses and responds as we want.

We've sewn two touch sensors by using conductive fabric, so to get them to work we need to add a library to Arduino.

  1. In the Library Manager in Arduino, search for Free touch. This is a library written by Adafruit, click Install when you've found it.
  2. After the library has been installed, let's open the sample code file.
  3. Open File | Examples | Adafruit FreeTouch Library | freetouch
  4. Once opened we need to modify the code a little because we are using two touch pads, and the code is written for four touch inputs:

At the beginning of the code, we see the following lines:

Adafruit_FreeTouch qt_1 = Adafruit_FreeTouch(A1, OVERSAMPLE_4, RESISTOR_50K, FREQ_MODE_NONE);
Adafruit_FreeTouch qt_2 = Adafruit_FreeTouch(A2, OVERSAMPLE_4, RESISTOR_50K, FREQ_MODE_NONE);
Adafruit_FreeTouch qt_3 = Adafruit_FreeTouch(A2, OVERSAMPLE_4, RESISTOR_50K, FREQ_MODE_NONE);
Adafruit_FreeTouch qt_4 = Adafruit_FreeTouch(A3, OVERSAMPLE_4, RESISTOR_50K, FREQ_MODE_NONE);

We can comment out the lines we don't need. You can also delete them, but commenting them out means we can use them later if we want more touch pins.

Amend it to:

Adafruit_FreeTouch qt_1 = Adafruit_FreeTouch(A1, OVERSAMPLE_4, RESISTOR_50K, FREQ_MODE_NONE);
Adafruit_FreeTouch qt_2 = Adafruit_FreeTouch(A2, OVERSAMPLE_4, RESISTOR_50K, FREQ_MODE_NONE);
// Adafruit_FreeTouch qt_3 = Adafruit_FreeTouch(A2, OVERSAMPLE_4, RESISTOR_50K, FREQ_MODE_NONE);
// Adafruit_FreeTouch qt_4 = Adafruit_FreeTouch(A3, OVERSAMPLE_4, RESISTOR_50K, FREQ_MODE_NONE);

Also, change the pin numbers to reflect what we have sewn. We are using pins A1 and A2. Modify the code to reflect these pins:

Adafruit_FreeTouch qt_1 = Adafruit_FreeTouch(A1, OVERSAMPLE_4, RESISTOR_50K, FREQ_MODE_NONE);

Adafruit_FreeTouch qt_2 = Adafruit_FreeTouch(A2, OVERSAMPLE_4, RESISTOR_50K, FREQ_MODE_NONE);

Amending the code in setup()

Now, look a little further into the code. In the setup() function, we see the code for four touch inputs:

if (! qt_1.begin())  
    Serial.println("Failed to begin qt on pin A0");
  if (! qt_2.begin())  
    Serial.println("Failed to begin qt on pin A1");
  if (! qt_3.begin())  
    Serial.println("Failed to begin qt on pin A2");
  if (! qt_4.begin())  
    Serial.println("Failed to begin qt on pin A3");

Let's amend it to comment out the code, using //, we don't need as well by amending the lines to read:

if (! qt_1.begin())  
    Serial.println("Failed to begin qt on pin A0");
  if (! qt_2.begin())  
    Serial.println("Failed to begin qt on pin A1");
  //if (! qt_3.begin())  
  //  Serial.println("Failed to begin qt on pin A2");
  //if (! qt_4.begin())  
  //  Serial.println("Failed to begin qt on pin A3");

With the code amended, let's modify the code in loop().

Amending the code in loop()

Next, we now look to the loop() function in the code and we will comment out a larger block of the code, using the multiline comment to remove it. It will read as the following:

 counter = millis();
  result = qt_1.measure(); 
  Serial.print("QT 1: "); Serial.print(result);
  Serial.print(" (");  Serial.print(millis() - counter); Serial.println(" ms)");

  counter = millis();
  result = qt_2.measure(); 
  Serial.print("QT 2: "); Serial.print(result);
  Serial.print(" (");  Serial.print(millis() - counter); Serial.println(" ms)");

  counter = millis();
  result = qt_3.measure(); 
  Serial.print("QT 3: "); Serial.print(result);
  Serial.print(" (");  Serial.print(millis() - counter); Serial.println(" ms)");
  
  counter = millis();
  result = qt_4.measure(); 
  Serial.print("QT 4: "); Serial.print(result);
  Serial.print(" (");  Serial.print(millis() - counter); Serial.println(" ms)");
 


We will amend it with /* and */ for a multiline comment, to read:

 counter = millis();
  result = qt_1.measure(); 
  Serial.print("QT 1: "); Serial.print(result);
  Serial.print(" (");  Serial.print(millis() - counter); Serial.println(" ms)");

  counter = millis();
  result = qt_2.measure(); 
  Serial.print("QT 2: "); Serial.print(result);
  Serial.print(" (");  Serial.print(millis() - counter); Serial.println(" ms)");

/*
  counter = millis();
  result = qt_3.measure(); 
  Serial.print("QT 3: "); Serial.print(result);
  Serial.print(" (");  Serial.print(millis() - counter); Serial.println(" ms)");
  
  
  counter = millis();
  result = qt_4.measure(); 
  Serial.print("QT 4: "); Serial.print(result);
  Serial.print(" (");  Serial.print(millis() - counter); Serial.println(" ms)");
  */


Now that the code is amended, we can check our board and port are correct, and then upload it to the GEMMA M0.

With the code uploaded, open the Serial Monitor where you should now see a stream of data relating to the touch sensing. When you touch the conductive fabric, these values should change, to indicate that the touch is being registered.

  • I've uploaded a photo of touching the circle of conductive fabric we've sewn earlier, next to my screen where the code is running, and in the Serial Monitor, the value jumps to 1000+ when touched. This registers our touch so now we can code the behaviour in response to that touch.,
Top Reuse Tip: You can also reuse your GEMMA M0 and other sewable circuit boards by using metal sewable snaps to sew them to the fabric. If you sew the snaps into place and solder the corresponding snap top to your circuit board. Then you only need to 'snap' it into place, and snap it to another circuit when you need it!

Now that we have set up the touch to work, we can code the outputs as a response to these touches.

Step 6: Coding Reactions

Now that we have working code to sense our touch, let's code the reaction.

I'd like the RGB LED strip to display two different patterns. For simplicity, in this example, I'm going to pull code from the Adafruit NeoPixel Library examples. I'll choose two that look different to each other so we can see the differences.

There are a lot of code examples online if you do a search, so you can alter the code to suit the LED styling effect you want for your bag.

Using the code we amended previously, make a new file and paste the working code into it. I've made a file called RecycleTouch.ino and added the code.

  1. In the Arduino IDE, Check that you have the Adafruit NeoPixel Library installed.
  2. Open the example file from File | Examples | Adafruit NeoPixel | RGBWstrandtest
  3. From the RGBWstrandtest file we need to copy some code and paste it into our RecycleTouch file
  4. Copy the code:
// On a Trinket or Gemma we suggest changing this to 1:
#define LED_PIN     6

// How many NeoPixels are attached to the Arduino?
#define LED_COUNT  60

// NeoPixel brightness, 0 (min) to 255 (max)
#define BRIGHTNESS 50 // Set BRIGHTNESS to about 1/5 (max = 255)

// Declare our NeoPixel strip object:
Adafruit_NeoPixel strip(LED_COUNT, LED_PIN, NEO_GRBW + NEO_KHZ800);

Paste this into the start of the code on the RecycleTouch file:

Also copy the library include line at the very top of the example file:

#include <Adafruit_NeoPixel.h>

This will be pasted at the top of our new file. Your file should look like the following:

#include <Adafruit_NeoPixel.h>
#include "Adafruit_FreeTouch.h"

Adafruit_FreeTouch qt_1 = Adafruit_FreeTouch(A1, OVERSAMPLE_4, RESISTOR_50K, FREQ_MODE_NONE);
Adafruit_FreeTouch qt_2 = Adafruit_FreeTouch(A2, OVERSAMPLE_4, RESISTOR_50K, FREQ_MODE_NONE);

// On a Trinket or Gemma we suggest changing this to 1:
#define LED_PIN     6
// How many NeoPixels are attached to the Arduino?
#define LED_COUNT  60
// NeoPixel brightness, 0 (min) to 255 (max)
#define BRIGHTNESS 50 // Set BRIGHTNESS to about 1/5 (max = 255)
// Declare our NeoPixel strip object:
Adafruit_NeoPixel strip(LED_COUNT, LED_PIN, NEO_GRBW + NEO_KHZ800);

With the code added, we need to alter a few values.

Changing the variable values to match our LED strip

We need to alter the variables to match our GEMMA M0 board and the connections we made.

We have the LEDs on pin 1, and I have 17 LEDs, you may have a different number. Edit the code to reflect what you have.

My code now reads:

// On a Trinket or Gemma we suggest changing this to 1:
#define LED_PIN     1

// How many NeoPixels are attached to the Arduino?
#define LED_COUNT  17

Now that we have started the initialization process we need to add the code to our setup().

Adding the setup() code

We need to add code to the setup() function from the example file to initialise the RGB LEDs. Copy the code in setup():

  strip.begin();           // INITIALIZE NeoPixel strip object (REQUIRED)
  strip.show();            // Turn OFF all pixels ASAP
  strip.setBrightness(BRIGHTNESS);

and paste it into the setup() of our RecycleTouch code file.

Lastly, we can head over to the loop() function to add the code to be performed.

Adding the code to loop()

I'm now going to select two of the functions for displaying colour that I like, I'm choosing the:

  • colorWipe(strip.Color(0, 0, 255), 50); // Blue because I love the look of blue LEDs,
  • and also the rainbowFade2White(3, 3, 1); function because the rainbow effect is pretty cool!

I'll add these 2 lines into my loop() function - you then need to add the corresponding function definition - that is - the code that actually tells our GEMMA M0 what to do when either of these functions are loaded.

Scroll to the lower part of the code where the function definitions are.

You'll be looking for both of the functions you want to use, so I'm looking for: colorWipe(strip.Color( 0, 0, 255), 50); // Blue as void colorWipe which is the function name. I've found it:

void colorWipe(uint32_t color, int wait) {
  for(int i=0; i<strip.numPixels(); i++) { // For each pixel in strip...
    strip.setPixelColor(i, color);         //  Set pixel's color (in RAM)
    strip.show();                          //  Update strip to match
    delay(wait);                           //  Pause for a moment
  }
}

Copy the entire function definition and paste it at the very bottom of your code.

  • Do this again for the other function you want.

Now, I only want these effects to be displayed if I have touched the conductive fabric. Let's amend the code to make this happen.

Step 7: Adding Code in Loop() to React to Touch

Let's add the code to register the touches! The exciting part.

We want the touches to register an action so we first need to create a variable to 'catch' our touches. When I looked at the Serial Monitor, I could see that one of the conductive touch areas registered a touch around 1000+ as a value, and the other was around 600+. So to register the touches, I created a variable, that is an integer called threshold, to set our minimum value to be registered as a touch:

int threshold = 500;

This will need to be added near the top of your code, above setup() as we want it to be accessible throughout the code. We will use this variable to register our touches. Also, we want to compare it to the measurements we are taking, we will create a result variable that is the measurement recorded. This will be at the top of our loop():

 int counter, result = 0, result2 = 0;

We can do this a number of ways, and not use threshold at all for example, and just compare result directly to a value, e.g. value > 400, but if we use a variable it is quicker to change it once at the top of our code, and we can also be sure it is changed throughout the code. This becomes useful if we are writing more code or adding other touch inputs.

With our variables created, we will now create the comparisons and what should happen if the condition is met. We do this with an if statement:

  if (result > threshold) {
   rainbowFade2White(3, 3, 1);
   strip.show();            // Turn OFF all pixels ASAP
  }

  if (result2 > threshold) {
   colorWipe(strip.Color(  0,   0, 255)     , 50); // Blue
   strip.show();            // Turn OFF all pixels ASAP
  }

Which we add at the end of, and inside the loop() code.

I've then added a little delay at the end of this too.

Now with the code complete, upload it to your GEMMA M0.

After the code is uploaded, touch the conductive fabric areas, you should now have two different configurations for your touches!

WOOP well done!!

Step 8: Complete the Zipper on Your Bag/case

With the connections complete, and the coding finished, it's time to sew the bag together.

We have already sewn part of the zipper, so now we will finish up with sewing the zipper and base of the bag, and lastly, sewing the sides to complete our project!

  1. First, I used a glue gun to secure the wires to the bubble wrap fabric surface that will be inside the bag.
  2. I added a battery at this stage so that I could glue the battery wires down as well.
  3. Then, lay the smaller piece of fabric, with the electronics, on top of the other piece of fabric (the piece with the zipper). Align the fabric edge with the top of the zipper.
  4. There is a video to show this.
  5. Once aligned, sew along the edge of the fabric to secure the zipper in place.
  6. After it has been sewn, open and lay flat.
  7. Press the zipper flat and sew the edge down to secure it and give it an edge, as we did when we first sewed the zipper.

Step 9: Sew the Bottom of the Bag

Now that the zipper has been sewn, we will sew the bottom of the bag.

  1. Align the two bottom edges of the fabric together.
  2. When aligned, sew along the bottom.
  3. I added a zigzag stitch after sewing along the bottom to give it additional strength.

With the bottom of the bag sewn, let's sew the sides... almost there!

Step 10: Sewing the Sides of the Bag

With the zipper and bottom now sewn, we only need to sew the sides.

  1. Looking at the zipper, sew the side with the closed zipper end (not the end where you pull the zip to open it).
  2. Sew all the way along this edge, and over the zipper.
  3. Turn the bag inside out now.
  4. With the edge that is not yet sewn - unzip the zipper an inch or two, and then using a straight stitch, sew all the way along the edge to close it.
  5. after it is sewn, cut the ends of the zipper

Then I added some black fabric trim to the edge to cover it. You don't need to do this step but it adds a nice finish to it.

  1. Using a strip of black fabric, fold it together and add it on top of the edge of your bag
  2. Sew a straight stitch on top of the folded edge to add the trim

That is the last part to complete this project! Well done!

Step 11: FINISHED: Fill It With Your Stuff or Give It to a Friend!

Now that your bag is done, fill it with your stuff or give it to a friend as a gift! You'll find it's pretty sturdy. Don't forget you can alter the thickness of the bubble wrap fabric if you want a softer or more firm bag. This is just one example. You can make change purses, book covers, glasses cases, and so much more.

I hope you've enjoyed this Instructable and please have a look at my other Instructables!

--------- thanks ----------

To see more of my projects and wearables, visit http://christinefarion.com, follow me on Instagram, and Twitter is useful if you have any questions or comments!