Hackster is hosting Hackster Holidays, Ep. 6: Livestream & Giveaway Drawing. Watch previous episodes or stream live on Monday!Stream Hackster Holidays, Ep. 6 on Monday!
Stive H
Published

Solar-Powered color changing Jacket: Fashion Meets Function

Design a jacket embedded with LEDs that change color according to the wearer's preference or mood, while being powered with a solar panel.

IntermediateWork in progressOver 1 day924
"Palette Pioneer"
TechFashion Design Challenge 2023
Solar-Powered color changing Jacket: Fashion Meets Function

Things used in this project

Hardware components

nLiten Forward-Emitting 30 LED strip
nLITEn Tech nLiten Forward-Emitting 30 LED strip
×1
ASCA | Free Form module
ASCA | Free Form module
×1
Arduino Nano 33 BLE Sense
Arduino Nano 33 BLE Sense
×1
Adafruit NeoPixel Digital RGB LED Strip 144 LED, 1m White
Adafruit NeoPixel Digital RGB LED Strip 144 LED, 1m White
×1
Gore-Tex Fabric
×1
TPU coated fabric
×1

Hand tools and fabrication machines

Soldering iron (generic)
Soldering iron (generic)
Solder Wire, Lead Free
Solder Wire, Lead Free

Story

Read more

Code

Web APP HTML

HTML
<!DOCTYPE html>
<html>
<head>
  <title>LED Jacket Controller</title>
  <style>
    body {
      text-align: center;
      font-family: Arial, sans-serif;
      background-color: #f4f4f4;
      margin: 0;
      padding: 0;
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
    }
    h1 {
      color: #333;
    }
    #colorWheel {
      width: 60px;
      height: 60px;
      border: none;
      outline: none;
      cursor: pointer;
      margin: 20px auto;
      display: block;
    }
    #connectButton {
      padding: 10px 20px;
      font-size: 20px;
      background-color: #4CAF50;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }
    #connectButton:hover {
      background-color: #45a049;
    }
  </style>
</head>
<body>
  <h1>LED Jacket Controller</h1>
  <h3>Current Jacket color</h3>
  <input type="color" id="colorWheel" value="#ff0000">
  <button id="connectButton">Connect to Arduino</button>

  <script src="app.js"></script>
  <script>
    document.querySelector('#connectButton').addEventListener('click', onButtonClick);
    document.querySelector('#colorWheel').addEventListener('input', (event) => {
      let color = event.target.value;
      let r = parseInt(color.slice(1, 3), 16);
      let g = parseInt(color.slice(3, 5), 16);
      let b = parseInt(color.slice(5, 7), 16);
      setColor(r, g, b);
    });
  </script>
</body>
</html>

Javascipt code

JavaScript
name the file app.js
// Characteristics for the red, green, and blue color values
let redCharacteristic;
let greenCharacteristic;
let blueCharacteristic;

// Function to connect to the Arduino
async function onButtonClick() {
  let serviceUuid = "19b10000-e8f2-537e-4f6c-d104768a1214";
  let redCharacteristicUuid = "19b10001-e8f2-537e-4f6c-d104768a1214";
  let greenCharacteristicUuid = "19b10002-e8f2-537e-4f6c-d104768a1214";
  let blueCharacteristicUuid = "19b10003-e8f2-537e-4f6c-d104768a1214";

  try {
    console.log('Requesting Bluetooth Device...');
    const device = await navigator.bluetooth.requestDevice({
      filters: [{services: [serviceUuid]}]
    });

    console.log('Connecting to GATT Server...');
    const server = await device.gatt.connect();

    console.log('Getting Service...');
    const service = await server.getPrimaryService(serviceUuid);

    console.log('Getting Characteristics...');
    redCharacteristic = await service.getCharacteristic(redCharacteristicUuid);
    greenCharacteristic = await service.getCharacteristic(greenCharacteristicUuid);
    blueCharacteristic = await service.getCharacteristic(blueCharacteristicUuid);

    console.log('Ready to send color values!');
  } catch(error) {
    console.log('Argh! ' + error);
  }
}

// Function to send color values to the Arduino
async function setColor(r, g, b) {
  if (redCharacteristic && greenCharacteristic && blueCharacteristic) {
    await redCharacteristic.writeValue(new Uint8Array([r]));
    await greenCharacteristic.writeValue(new Uint8Array([g]));
    await blueCharacteristic.writeValue(new Uint8Array([b]));
  }
}

Arduino Code

Arduino
Make sure to use neopixel library
#include <Adafruit_NeoPixel.h>
#include <ArduinoBLE.h>

#define PIN 6 // The pin your NeoPixel is connected to
#define NUMPIXELS 1 // The number of NeoPixels you're using

Adafruit_NeoPixel pixels(NUMPIXELS, PIN, NEO_GRB + NEO_KHZ800);

BLEService ledService("19B10000-E8F2-537E-4F6C-D104768A1214"); // BLE LED Service

// RGB characteristics
BLEUnsignedCharCharacteristic redCharacteristic("19B10001-E8F2-537E-4F6C-D104768A1214", BLERead | BLEWrite);
BLEUnsignedCharCharacteristic greenCharacteristic("19B10002-E8F2-537E-4F6C-D104768A1214", BLERead | BLEWrite);
BLEUnsignedCharCharacteristic blueCharacteristic("19B10003-E8F2-537E-4F6C-D104768A1214", BLERead | BLEWrite);

void setup() {
  Serial.begin(9600);
  while (!Serial);

  pixels.begin(); // Initialize NeoPixel
  pixels.show(); // Initialize all pixels to 'off'

  // Initialize BLE
  if (!BLE.begin()) {
    Serial.println("Starting BLE failed!");
    while (1);
  }

  BLE.setLocalName("LED Controller"); // Set name for connection
  BLE.setAdvertisedService(ledService); // Advertise LED service
  ledService.addCharacteristic(redCharacteristic); // Add red characteristic
  ledService.addCharacteristic(greenCharacteristic); // Add green characteristic
  ledService.addCharacteristic(blueCharacteristic); // Add blue characteristic
  BLE.addService(ledService); // Add LED service

  // Set initial value for characteristics
  redCharacteristic.writeValue(0);
  greenCharacteristic.writeValue(0);
  blueCharacteristic.writeValue(0);

  // Start advertising
  BLE.advertise();

  Serial.println("Bluetooth device active, waiting for connections...");
}

void loop() {
  // Listen for BLE connections
  BLEDevice central = BLE.central();

  // If a device has connected
  if (central) {
    Serial.print("Connected to central: ");
    Serial.println(central.address());
    // While the device is still connected
    while (central.connected()) {
      // If the red value has been updated
      if (redCharacteristic.written()) {
        pixels.setPixelColor(0, pixels.Color(redCharacteristic.value(), greenCharacteristic.value(), blueCharacteristic.value()));
        pixels.show();
      }
      // If the green value has been updated
      if (greenCharacteristic.written()) {
        pixels.setPixelColor(0, pixels.Color(redCharacteristic.value(), greenCharacteristic.value(), blueCharacteristic.value()));
        pixels.show();
      }
      // If the blue value has been updated
      if (blueCharacteristic.written()) {
        pixels.setPixelColor(0, pixels.Color(redCharacteristic.value(), greenCharacteristic.value(), blueCharacteristic.value()));
        pixels.show();
      }
    }
    // Device disconnected
    Serial.print("Disconnected from central: ");
    Serial.println(central.address());
  }
}

Credits

Stive H

Stive H

1 project • 1 follower

Comments

Awards
"Palette Pioneer"
TechFashion Design Challenge 2023
Related channels and tags
  • Arduino
  • ASCA
  • nLITEn Tech