RGB Glasses part 2

Hey Guys what's up!

So here's my ESP12F Based RGB LED Glasses which are made entirely from PCBs!

I prepared a PCB with normal glasses size and put WS2812B LEDs on it, and then used an ESP12F to control the LEDs via a WEB Server.

The frame has been modeled just like actual glasses, the only difference here is that the material of these glasses is FR4 instead of Plastic.

I designed two different PCBs for this project and gave them to Seeed Studio for samples and received them after a few weeks.

Getting PCBs from SEEED STUDIO

For Getting PCBs, I used Seeed Studio's Service for both PCBs that are being used in this project.

Seed Fusion PCB Assembly Service offers one-stop prototyping for PCB manufacture, PCB assembly and as a result, they produce superior quality PCBs and Fast Turnkey PCBA from 7 working days.

I was really intrigued with their quality, especially the temple PCB.

When you prototype with Seeed Fusion, they can definitely provide Free DFA and Free functional tests for you!

Check out their website to know about their manufacturing capabilities and service.

https://www.seeedstudio.com/prototype-pcb-assembly.html

I also ordered a stencil for Frame PCB to make SMD Soldering easy as adding solder paste one by one on each pad is pretty Hard work so I used a stencil instead.

Check out this project video-

This Project is made with two different PCBs, one of them is Frame PCB and the other is Temple PCB.

Frame PCB

This PCB Houses 49 SMD WS2812B RGB LEDs and have a shape modeled like an actual glasses frame (Not exactly as they look more like party glasses)

49 LEDs are connected in WS2812 Config in which the first LED's Dout goes into the second LED's Din, the second LED's Dout then goes into the third LED's Din and this series goes on and on.

WS2812B LEDs are controlled by connecting the Temple PCB on given slots and soldering Data, VCC, and GND Pads of Frame with Temple PCB Together.

Temple PCB

This PCB is modeled after the shape of the temple of glasses and it houses the ESP12F setup with other components.

there's a battery connector for adding a small 300mA Lithium-ion battery and a USB port for charging that battery or powering the ESP12F straight from a power bank.

ESP12F is 3.3V Tolerant so supplying 5V would instantly kill the MCU so I added an AMS1117 5V-3.3V Setup which steps down the 5V into 3.3V for the MCU safe working.

(I have used a power bank to power this setup via USB Port)

Materials Required (BOM)

• Frame PCB x1
• Temple PCB x2
• Stencil
• 10K Resistance 0805 x 4
• push button x1
• Header pins
• 10uf 16V Capacitor
• 22uf 1206 Capacitor x 1
• 4.7uf 1206 Capacitor x 1
• 200R (0 Ohms can also be used instead of this)
• AMS1117 x 1
• USB Micro port
• M7 Diode
• DPDT Switch
• ESP12F
• WS2812B LEDs x 49
• NODEMCU

Schematic

This PCB is an ESP12F Breakout Board with the minimal ESP12F Config.

USB Port is the input side of this PCB which inputs 5V into the system and then the AMS1117 Circuit steps down the voltage (5V) into 3.3V for ESP12F working.

the output from AMS1117 goes into the ESP12F via a DPDT Switch which controls the ON and OFF state of this Board.

For Programming the ESP12F there's a Programming header that consists of the following pins that we need to connect with the NodeMCU Programmer

• VCC
• GND
• RESET
• GPIO0
• TX
• RX

SMT Process

First I prepared the Glasses Frame PCB, I used the stencil to apply solder paste on Frame PCB and then added the SMD LEDs one by one to it.

I did all this in part 1 of this post in Brief so you can check that out from here-

https://www.hackster.io/Arnov_Sharma_makes/yet-another-glasses-rgb-glasses-20cbd6

After that, I prepared the Temple PCB in the same way but didn't use stencil this time.

I added the solder paste on the components pad and then added all the components one by one on the PCB. after that, I just put this PCB on a Hotplate.

Hotplate heats this PCB slowly up to the required Melting Temperature of Solder paste.

After reflow, just add through-hole components which are DPDT Switch and Male Header pins and our PCB is ready to be flashed for the first time.

Before flashing this PCB, I soldered a Neopixel RIng on GPIO 12 along with VCC and GND so I can upload a test sketch before the final soldering process.

Flashing the ESP12F Module

For Flashing the ESP12F, I used a NodeMCU.

BUT WAIT!, don't we need an FTDI Board to flash the ESP12F manually by adding those classic reset and flash buttons?

well, that Process is pretty dumb and complex so I'm gonna use a NodeMCU instead.

First, start by wiring the NodeMCU with our setup in this Config.

we need to place a jumper between EN and GND on NodeMCU; by doing this, the esp8266 shuts down on NODEMCU and we can add our external setup instead

check out this great post by Brain Lough about ESP12F Programming

• RX to RX,
• TX to TX
• 3V to VCC
• GND to GND
• Reset to Reset
• GPIO0 to D3

Before Flashing the sketch, you need to add the Neopixel Library that is being used in this project along with the ESP8266 Boards in Arduino IDE.

//Neopixel Library
#include <Adafruit_NeoPixel.h>

// ESP8266 Boards
#include <ESP8266WiFi.h>
#include <WiFiClient.h>
#include <ESP8266WebServer.h>
#include <ESP8266mDNS.h>

Now open the sketch that you want to upload,

• Select the port number of the NodeMCU (Tools->Port)
• Select the Board type "NodeMCU 1.0 (ESP12-E Module)"
• Click upload

and that's pretty much it.

// Webserver Config
const char *ssid = "ADD YOUR DETAILS"; //put your WIFI ssid in between " "
const char *password = "ADD YOUR DETAILS"; // and password too
ESP8266WebServer server ( 80 );

Now, this sketch is a webserver sketch so we need to add our network credentials to this sketch so fill in the SSID and password before uploading...

after uploading the code, open the serial monitor and you will see the IP address of this webserver

Test Run 01

copy the IP address from your serial monitor and open that in your web browser.

the web server contains a color chart from where you can pick any color and display that on glasses, click on the black box and pick the color that you want to display, and that is pretty much what you can do with this. we can add an extra button in this webserver for animations but that is just an idea for now.

After testing the Temple PCB Thoroughly by driving a Neopixel ring, I began the final assembly process which is the merging of Frame PCB and Temple PCB.

Final Assembly

For the Final Assembly, we can directly insert the Temple PCB on slots present on the frame and solder the pads in front of it for connectivity.

Solder Temple PCB with ESP12F setup on Din side of Frame PCB and add an empty Temple PCB on another side just for support.

also, these glasses are pretty fragile as they are held together only by copper pads and the copper layer is glued on the FR4 board so it can easily tear apart, I'm gonna add few drops of super glue here to give this joint more adhesion.

#include <Adafruit_NeoPixel.h>

// ESP8266
#include <ESP8266WiFi.h>
#include <WiFiClient.h>
#include <ESP8266WebServer.h>
#include <ESP8266mDNS.h>

// Webserver Config
const char *ssid = "OneplusNord"; //put your WIFI ssid in between " "
const char *password = "12345678q"; // and password too
ESP8266WebServer server ( 80 );

// Neopixel Config
#define NeoPIN 12 //GPIOI12
#define NUM_LEDS 49 //define number of leds in your strip, mine is 49
int brightness = 150;
Adafruit_NeoPixel strip = Adafruit_NeoPixel(NUM_LEDS, NeoPIN, NEO_RGB + NEO_KHZ800);


const int led = 13; //response LED, its optional so you really dont need to add this

void setup ( void ) {

  Serial.begin ( 115200 );

  // ##############
  // NeoPixel start
  Serial.println();
  strip.setBrightness(brightness);
  strip.begin();
  strip.show(); 
  delay(50);
  Serial.println("NeoPixel started");
  
  // #########
  // Webserver
  pinMode ( led, OUTPUT );
  digitalWrite ( led, 0 );
  
  WiFi.begin ( ssid, password );
  Serial.println ( "" );

  // Wait for connection
  while ( WiFi.status() != WL_CONNECTED ) {
    delay ( 500 );
    Serial.print ( "." );
  }

  Serial.println ( "" );
  Serial.print ( "Connected to " );
  Serial.println ( ssid );
  Serial.print ( "IP address: " );
  Serial.println ( WiFi.localIP() );

  if ( MDNS.begin ( "esp8266" ) ) {
    Serial.println ( "MDNS responder started" );
  }

  // what to do with requests
  server.on ( "/", handleRoot );
  server.onNotFound ( handleNotFound );
  server.begin();

  
  
  Serial.println ( "HTTP server started" );
}

void loop ( void ) {
  // waiting fo a client
  server.handleClient();
}


void handleRoot() {
  Serial.println("Client connected");
  digitalWrite ( led, 1 );
  
  // data from the colorpicker (e.g. #FF00FF)
  String color = server.arg("c");
  Serial.println("Color: " + color);
  // setting the color to the strip 
  setNeoColor(color);

  // building a website
  char temp[5000];
  int sec = millis() / 1000;
  int min = sec / 60;
  int hr = min / 60;
  char clr [7];
  color.toCharArray(clr, 7);
  snprintf ( temp, 5000,

"<!DOCTYPE html>\n<html>\n\
  <head>\n\
    <title>Esp8266 NeoPixel Controler</title>\n\
    <style>\
      body { background-color: #cccccc; font-family: Arial; Color: #008; }\
    </style>\n\
    <meta name=\"viewport\" content=\"width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0\" />\n\
  </head>\n\
  <body>\n\
    <h1>R G B  Glasses BRO</h1>\n\
    <p>Uptime: %02d:%02d:%02d</p>\n\
    \n\
    <form action=\"\" name=\"pick\" method=\"post\">\n\
    <input type=\"color\" name=\"c\" value=\"%02d\" onchange=\"document.forms['pick'].submit();\" />\n\
    &nbsp;<span onclick=\"document.forms['pick'].submit();\" style=\"font-size:16pt;\"> CHANGE </span>\n\
    </form>\n\
    \n\
  </body>\
</html>",

    hr, min % 60, sec % 60, clr
  );
  server.send ( 200, "text/html", temp );
  digitalWrite ( led, 0 );
}

void handleNotFound() {
  digitalWrite ( led, 1 );
  String message = "File Not Found\n\n";
  message += "URI: ";
  message += server.uri();
  message += "\nMethod: ";
  message += ( server.method() == HTTP_GET ) ? "GET" : "POST";
  message += "\nArguments: ";
  message += server.args();
  message += "\n";

  for ( uint8_t i = 0; i < server.args(); i++ ) {
    message += " " + server.argName ( i ) + ": " + server.arg ( i ) + "\n";
  }

  server.send ( 404, "text/plain", message );
  digitalWrite ( led, 0 );
}



void setNeoColor(String value){
  Serial.print("Setting Neopixel...");
  // converting Hex to Int
  int number = (int) strtol( &value[1], NULL, 16);
  
  // splitting into three parts
  int r = number >> 16;
  int g = number >> 8 & 0xFF;
  int b = number & 0xFF;
  
  // DEBUG
  Serial.print("RGB: ");
  Serial.print(r, DEC);
  Serial.print(" ");
  Serial.print(g, DEC);
  Serial.print(" ");
  Serial.print(b, DEC);
  Serial.println(" ");
  
  // setting whole strip to the given color
  for(int i=0; i < NUM_LEDS; i++) {
    strip.setPixelColor(i, strip.Color( g, r, b ) );
  }
  // init
  strip.show();
  
  Serial.println("on.");
}

CODE for the final glasses will remain the same, we just need to change the number of WS2812B LEDs which would be 49.

// Neopixel Config
#define NeoPIN 12 //GPIOI12
#define NUM_LEDS 49 //define number of leds in your strip, mine is 49

Connect this setup with NodeMCU and flash the ESP12F like before.

Result

After Flashing the final sketch, I disconnected this setup from NodeMCU and added the USB Cable directly on the USB Port, and turned on the setup.

I already know the IP address of the webserver so I open that up on my iPad and put on the glasses.