Skip to content

9. Wearables

Research

Wearable technology refers to any kind of electronic device designed to be worn on the user's body. This devises can have different purposes, esthetical, medical, educational, etc., They can be jewelry, elements in clothing or the whole clothing, accessories, medical devises

It was in the decade of the 70s that wearables became popular with the calculator wristwatch of Pulsar. It quickly became a fashion statement as more celebrities starting wearing them. After that other companies started to release their own, the technology wearable became more and more know, I think it is interesting to notice how wearables have change with the pass of the time, and how they were once just sci-fi and now an everyday accessory.

And a perfect example are the NIKE shoes of the movie Back to the future. In the film the automatic movements of “self lacing” sneakers were performed by people holding the laces and pulling them to tighten them "with just the push of a button," and for many years that project was on standby, as the technology and designers did not exist to make them a reality, but today there is a version that has these features.

References & Inspiration

@cnetdotcom This fabric comes to life. Would you wear it? 😱👗 #projectprimrose #tech #digitaldress #fabric #futuretech #wearabletechnology #adobemax #max2023 #interactivedress #cooltech #adobeprojectprimrose #smartdisplay #smartdisplayfabric #techdress #adobe ♬ original sound - CNET
@dazed Would you wear a moving dress? 🤯⁠ ⁠ In our latest Self Made tutorial for #DazedFashion ♬ original sound - dazed

I got inspiration by Imogen 's Mi.Mu Gloves. They are portable, gesture-controlled musical instruments/interfaces that allow musicians to produce and manipulate music with hand and arm movements, without the need for a keyboard or controller. Artists like Ariana Grande used them not only to record their music, but also during her Honeymoon Tour.

@annamcbabee gives me goosebumps every time: in honor of it being her birthday, heres one of the greatest of her performances, using mimu gloves. #arianagrande #mimugloves #hideandseek #imogenheap #liveperformance #fyp ♬ original sound - Anna McBabe

Tools

All the documentation of how to download Arduino, and the necessary libraries are in the week E-textiles, go check it out!

Process and workflow

Invisible piano

Wanting to experiment with different inputs and outputs, I decided to go for something musical. In the week e-textiles I used a buzzer to play a simple melody and made a soft button using conductive fabric and foam, so this time I wanted to actually program the buzzer with a specific task with using an input and use the soft switch as it.

The idea is to make kind of like an invisible piano since the notes would be in the fingertips and palm of the hand, but to activate the sound of the musical notes one must simulate the action of playing a piano.

First test

To do an initial test, I used ChatGTP to help me develop the code. I didn't really write a prompt at first; I asked, "Hey Chat, is it possible to write code for Arduino where I create a kind of 'button' that interrupts the connection by connecting and disconnecting wires, and each time I connect it, a buzzer makes a sound?" It then told me that it was possible and immediately provided an example code. So I added a prompt asking for the code in C++, specifying the microcontroller I will use, and a lilypad buzzer.

Here is a first test of how all the musical tunes will work:

int boton = D2;    // Pin donde conectas tu botón/cables
int buzzer = D8;   // Pin del buzzer

void setup() {
  pinMode(boton, INPUT_PULLUP); // Activamos pull-up interna
  pinMode(buzzer, OUTPUT);
}

void loop() {
  // LOW = el botón/cables están conectados
  if (digitalRead(boton) == LOW) {
    tone(buzzer, 1000); // Suena a 1 kHz
    delay(200);         // Suena un instante
    noTone(buzzer);     // Se apaga
    delay(200);         // Pausa para evitar repetidos
  }
}

Prototypes

To begin, I used my hand as a template to trace the basic of the schematic, figuring out the path of each of the connections. Then I use a piece of paper with my hand traced, to make it more technical, using the dimensions of the microcontroller, also assigning a pin to each note (finger) , once I had the connections figured out, I made a second paper prototype, but this time for the design of the wearable, following the connections paths of the last prototype. Finally, I made a prototype in foam to verify the dimensions of each part, observing how it behave when flexing and extending the hand.

describe what you see in this image describe what you see in this image

Laser cut

To make the pieces I trace them in Rhinoceros 3d and laser cut them.

The parameters where:

  • Max power %: 15

  • Min power %: 8

  • Work Speed (mm/s): 75

describe what you see in this image

(I didn’t make a prototype of the piece that goes inside the hand, in the palm, and it turn out that the one I laser cut didn't work, so I had to trace it and cut it by hand, here the importance of making prototypes)

Conductive materials

Once I had all the pieces, I made the spaces to generate the soft sensors in each fingerprint by cutting the second layer of foam, making the hole that separates both walls (top and bottom) and when pressing allow them to touch and make the connection. I also added the cupper tape in the two sections that go on the palm, repeting the process in the other piece.

describe what you see in this image

Electronics

Schematic

describe what you see in this image

Microcontroller-Xiao

Something that I learned from the last wearable is that if I sew directly all the connections to the microcontroller, when I need it for other project, I will have to cut them all, and to use it again I will have to resew all; so, I wanted to make this time something more practical, that I can use and use.

That is why I decided to use the things we use to place the Xiao to the breadboard, and this way I could take the controller without breaking all the system.

I made all the connections with conductive thread. describe what you see in this image describe what you see in this image

Code

To get to this final code, i asked Chatgpt to simply add more notes, specifying the pins that i would connect:

int botonDo  = D1;
int botonRe  = D3;
int botonMi  = D5;
int botonFa  = D6;
int botonSol = D7;
int botonLa  = D8;
int botonSi  = D10;

int buzzer = D0;

void setup() {
  pinMode(botonDo,  INPUT_PULLUP);
  pinMode(botonRe,  INPUT_PULLUP);
  pinMode(botonMi,  INPUT_PULLUP);
  pinMode(botonFa,  INPUT_PULLUP);
  pinMode(botonSol, INPUT_PULLUP);
  pinMode(botonLa,  INPUT_PULLUP);
  pinMode(botonSi,  INPUT_PULLUP);

  pinMode(buzzer, OUTPUT);
}

void loop() {
  if (digitalRead(botonDo) == LOW) {
    tone(buzzer, 262); // DO
    delay(200);
    noTone(buzzer);
    delay(200);
  }

  if (digitalRead(botonRe) == LOW) {
    tone(buzzer, 294); // RE
    delay(200);
    noTone(buzzer);
    delay(200);
  }

  if (digitalRead(botonMi) == LOW) {
    tone(buzzer, 330); // MI
    delay(200);
    noTone(buzzer);
    delay(200);
  }

  if (digitalRead(botonFa) == LOW) {
    tone(buzzer, 349); // FA
    delay(200);
    noTone(buzzer);
    delay(200);
  }

  if (digitalRead(botonSol) == LOW) {
    tone(buzzer, 392); // SOL
    delay(200);
    noTone(buzzer);
    delay(200);
  }

  if (digitalRead(botonLa) == LOW) {
    tone(buzzer, 440); // LA
    delay(200);
    noTone(buzzer);
    delay(200);
  }

  if (digitalRead(botonSi) == LOW) {
    tone(buzzer, 494); // SI
    delay(200);
    noTone(buzzer);
    delay(200);
  }
}

Building

Here are both parts, front and back, with all the respective sewed connections. The one that have the part where the fingers go through is where the microcontroller goes. And the other one is where all GND connections go.

describe what you see in this image

describe what you see in this image

I added some fasteners so that it would be easier to take out and put it on, and it also makes the connection of GND between one part and the other.

describe what you see in this image

Here you can see all the points of contact that will generate the tunes, and then how it looks when putting both parts together:

describe what you see in this image

Demonstration

Fisrt test:

Second test:

Birthday song!

Outcome

describe what you see in this image describe what you see in this image

Luminous Necklace

Inspired by how lamps reflect shadows depending on their external shape, I wanted to recreate this effect but in a wearable.

describe what you see in this image

I started by designing the necklace in rhinoceros, making the holes where i wanted the light to go through, also modeling the space to put the controler of the ligths. describe what you see in this image describe what you see in this image

Once I had my model I export it as stl. and printed in PLA describe what you see in this image

Since the LEDs come in a long strip, I decided to measure the length I needed to cover the entire necklace and twist it around, making sure there were no gaps without LEDs. I then inserted it into the necklace, and at the end, I placed the controller box in its designated space.

describe what you see in this image

Demonstration

Outcome

describe what you see in this image describe what you see in this image

Hand harness

To use a Pulse Sensor it is needed to download the library PulseSensor Playground.

describe what you see in this image

I wanted to use this sensor to control some LEDs. So, first, I started by testing everything using a breadboard and only hard connection before passing it to the fabric.

I used the code of one of my instructors, Raul, as a starting point, then asking ChatGPT to help me modify it to use LEDs instead of neo pixels.

Prompt:

Hi chat, please modify this code,so that instead of controlling a neo pixel strip, it controls a led.
#include <Adafruit_NeoPixel.h>

// Define the pins and parameters
#define PIN_NEOPIXELS D10       // Pin where the Neopixels are connected
#define NUMPIXELS 4            // Number of Neopixels
#define PULSE_SENSOR_PIN D3    // Pin where the Pulse Sensor is connected

// Pulse sensor variables
int pulseValue = 0;         // Value of the pulse reading
int threshold = 550;        // Detection threshold for beats (adjustable)
bool lastPulseState = false; // Previous pulse state (detected/not detected)
int pulseRate = 0;          // Heart rate (BPM)

// Initialize the Neopixel strip
Adafruit_NeoPixel strip = Adafruit_NeoPixel(NUMPIXELS, PIN_NEOPIXELS, NEO_GRB + NEO_KHZ800);

void setup() {
  Serial.begin(115200);  // To monitor the pulse via the serial port
  strip.begin();
  strip.show();  // Initially turn off the Neopixels
}

void loop() {
  pulseValue = analogRead(PULSE_SENSOR_PIN);  // Read the sensor value

  // If a heartbeat is detected (exceeds the threshold), turn on the Neopixels
  if (pulseValue > threshold && !lastPulseState) {
    pulseRate++;  // Count a heartbeat
    lastPulseState = true;  // Mark that a heartbeat has been detected
    Serial.print("Heartbeat detected! Pulse rate: ");
    Serial.println(pulseRate);

    // Map the heart rate (BPM) to a blink interval
    int blinkInterval = map(pulseRate, 60, 120, 1000, 200);  // Map the BPM to an interval from 1000ms to 200ms

    // Ensure the interval is within a reasonable range
    blinkInterval = constrain(blinkInterval, 200, 1000);  // Don't allow the interval to be less than 200ms or greater than 1000ms

    // Neopixel blink: Turn on the LEDs
    strip.fill(strip.Color(255, 0, 0));  // Turn the Neopixels red
    strip.show();
    delay(blinkInterval);  // Wait for the blink interval determined by the BPM

    // Turn off the Neopixels
    strip.clear();
    strip.show();
    delay(blinkInterval);  // Wait for the off interval determined by the BPM
  } 
  else if (pulseValue < threshold) {
    lastPulseState = false;  // Reset the state if the value falls below the threshold
  }

  // If there is no signal, keep the Neopixels off
  else {
    strip.clear();
    strip.show();  // Ensure the Neopixels are off
  }
}

The final code I used with three LEDs:

// Definición de pines
#define LED_PIN_1 D1            // LED 1
#define LED_PIN_2 D3            // LED 2
#define LED_PIN_3 D6            // LED 3

#define PULSE_SENSOR_PIN A0     // Sensor de pulso conectado a A0

// Variables del sensor de pulso
int pulseValue = 0;            // Valor leído del sensor
int threshold = 180;           // Umbral ajustado para lecturas alrededor de 230
bool lastPulseState = false;   // Estado anterior del pulso
int pulseRate = 0;             // Contador de latidos

void setup() {
  Serial.begin(115200);

  pinMode(LED_PIN_1, OUTPUT);
  pinMode(LED_PIN_2, OUTPUT);
  pinMode(LED_PIN_3, OUTPUT);

  digitalWrite(LED_PIN_1, LOW);
  digitalWrite(LED_PIN_2, LOW);
  digitalWrite(LED_PIN_3, LOW);

  Serial.println("Iniciando detector de pulso con 3 LEDs...");
}

void loop() {
  pulseValue = analogRead(PULSE_SENSOR_PIN);

  // Mostrar la lectura actual
  Serial.print("Lectura del sensor: ");
  Serial.println(pulseValue);

  // Detectar un latido
  if (pulseValue > threshold && !lastPulseState) {
    pulseRate++;
    lastPulseState = true;

    Serial.print("❤️ Latido detectado! Conteo: ");
    Serial.println(pulseRate);

    // Encender los 3 LEDs en el latido
    digitalWrite(LED_PIN_1, HIGH);
    digitalWrite(LED_PIN_2, HIGH);
    digitalWrite(LED_PIN_3, HIGH);

    delay(120);  // tiempo visible del destello

    digitalWrite(LED_PIN_1, LOW);
    digitalWrite(LED_PIN_2, LOW);
    digitalWrite(LED_PIN_3, LOW);
  }

  // Resetear cuando baja del umbral
  else if (pulseValue < threshold) {
    lastPulseState = false;
  }

  delay(20);  // lectura suave
}

After it worked with one LED, I added a second to verify that I could add at the end a total of three LEDs. Once they all worked, I started testing it with the pulse directly form my wrist, finding the spot where it had the best reading, it could be either where the radial or ulnar artery is.

One led

Test between arteries

Two LEDs

I made a fast prototype of paper to determine the design of the hand harness, and how I would arrange all the components in it. To close it I decided to use some metal pins, both closing the harness and the circuits connections

describe what you see in this image describe what you see in this image

Schematic

describe what you see in this image

Fabrication

Using the paper prototype as the pattern I cut the fabric, then I sew the metal snaps to have the starting point for the LEDs and be able to place them on the fabric with the design I wanted them to have.

describe what you see in this image describe what you see in this image

I secured them by sewing around them, then I did the same with all the other components. Even though the microcontroller was going to be on the outside; I did the connections of the LEDs with their resistance on the inside and covering them with insulating tape to both prevent them form touching and to avoid that when It was being use it would be uncomfortable. All the connections to the XIAO were made with conductive thread.

describe what you see in this image

Demonstration

Outcome

describe what you see in this image describe what you see in this image