• Using a solder paste dispenser needle, we first apply solder paste to each component to begin the PCB assembly process. In this case, standard 63/37 Sn/PB solder paste is being used.
• next, we added all the SMD Components in their location using an ESD Tweezer.
• We lifted the circuit board and placed it on our Miniware MHP50 Hotplate which heats the circuit from below up to the solder paste melting temperate, as soon as solder paste reaches that temperature it melts and all the components are connected to the pads.
• The through-hole components, which are used to add XIAO to this circuit and only include two CON7 Female header pins, were then added.

In order to prepare the RGB LED Circuit and XIAO Board assembly, we connect the GND and D0 of the XIAO Board to the Din of the RGB LED Circuit, as well as the 5V of the XIAO Board to the VCC of the RGB Circuit.

Next, in order to verify that our setup is operational, we uploaded the test sketch below.

#include <FastLED.h>
#define NUM_LEDS 7 
#define DATA_PIN D1
#define CLOCK_PIN 13

CRGB leds[NUM_LEDS];

void setup() { 
    Serial.begin(57600);
    Serial.println("resetting");
    FastLED.addLeds<WS2812,DATA_PIN,RGB>(leds,NUM_LEDS);
    FastLED.setBrightness(84);
}

void fadeall() { for(int i = 0; i < NUM_LEDS; i++) { leds[i].nscale8(250); } }

void loop() { 
    static uint8_t hue = 0;
    Serial.print("x");
    for(int i = 0; i < NUM_LEDS; i++) {
        leds[i] = CHSV(hue++, 255, 255);
        FastLED.show(); 
        fadeall();
        delay(10);
    }
    Serial.print("x");

    for(int i = (NUM_LEDS)-1; i >= 0; i--) {
        leds[i] = CHSV(hue++, 255, 255);
        FastLED.show();
        fadeall();
        delay(10);
    }
}

 Once the setup was tested, we connected a 2000mAh 3.7V lithium cell to the XIAO Board, which also has connectors for battery.

The next step is to attach a rocker switch to the switch terminals on the circuit. In this case, we are using a unique kind of rocker switch called a bell type rocker switch, which is essentially a push button that resembles a standard rocker on-off switch.

Before starting the assembly process, we uploaded the primary code onto the XIAO Board before securing it in place as once its secured in place, we can no longer program it.

Before starting the assembly process, we uploaded the main code into the XIAO Board before securing it in place as once its secured in place, we can no longer program it.

#include <WiFi.h>
#include <FastLED.h>
#define LED_PIN     D1
#define NUM_LEDS 50
CRGB leds[NUM_LEDS];
const char *ssid = "UR SSID";
const char *password = "UR PASS";
WiFiServer server(80);
String redString = "0";
String greenString = "0";
String blueString = "0";
int pos1 = 0;
int pos2 = 0;
int pos3 = 0;
int pos4 = 0;
String header;
unsigned long currentTime = millis();
unsigned long previousTime = 0;
// Define timeout time in milliseconds (example: 2000ms = 2s)
const long timeoutTime = 2000;
void setup() {
Serial.begin(115200);
FastLED.addLeds<WS2812, LED_PIN, GRB>(leds, NUM_LEDS);
// Connect to Wi-Fi network with SSID and password
Serial.print("Connecting to ");
Serial.println(ssid);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
// Print local IP address and start web server
Serial.println("");
Serial.println("WiFi connected.");
Serial.println("IP address: ");
Serial.println(WiFi.localIP());
server.begin();
}
void loop(){
WiFiClient client = server.available();   // Listen for incoming clients
if (client) {                             // If a new client connects,
currentTime = millis();
previousTime = currentTime;
Serial.println("New Client.");          // print a message out in the serial port
String currentLine = "";                // make a String to hold incoming data from the client
while (client.connected() && currentTime - previousTime <= timeoutTime) {            // loop while the client's connected
currentTime = millis();
if (client.available()) {             // if there's bytes to read from the client,
char c = client.read();             // read a byte, then
Serial.write(c);                    // print it out the serial monitor
header += c;
if (c == '\n') {                    // if the byte is a newline character
if (currentLine.length() == 0) {
// HTTP headers always start with a response code (e.g. HTTP/1.1 200 OK)
// and a content-type so the client knows what's coming, then a blank line:
client.println("HTTP/1.1 200 OK");
client.println("Content-type:text/html");
client.println("Connection: close");
client.println();
// Display the HTML web page
client.println("<!DOCTYPE html><html>");
client.println("<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">");
client.println("<link rel=\"icon\" href=\"data:,\">");
client.println("");
client.println("");
client.println("</head><body><div class=\"container\"><div class=\"row\"><h1>XIAO ESP32 C3 WEB LED</h1></div>");
client.println("<a class=\"btn btn-primary btn-lg\" href=\"#\" id=\"change_color\" role=\"button\">Change Color</a> ");
client.println("<input class=\"jscolor {onFineChange:'update(this)'}\" id=\"rgb\"></div>");
client.println("<script>function update(picker) {document.getElementById('rgb').innerHTML = Math.round(picker.rgb[0]) + ', ' +  Math.round(picker.rgb[1]) + ', ' + Math.round(picker.rgb[2]);");
client.println("document.getElementById(\"change_color\").href=\"?r\" + Math.round(picker.rgb[0]) + \"g\" + Math.round(picker.rgb[1]) + \"b\" + Math.round(picker.rgb[2]) + \"&\";}</script></body></html>");
// The HTTP response ends with another blank line
client.println();
// Request sample: /?r201g32b255&
// Red = 201 | Green = 32 | Blue = 255
if(header.indexOf("GET /?r") >= 0) {
pos1 = header.indexOf('r');
pos2 = header.indexOf('g');
pos3 = header.indexOf('b');
pos4 = header.indexOf('&');
redString = header.substring(pos1+1, pos2);
greenString = header.substring(pos2+1, pos3);
blueString = header.substring(pos3+1, pos4);
// Update all 7 LEDs with the new color
for (int i = 0; i < NUM_LEDS; i++) {
leds[i] = CRGB(redString.toInt(), greenString.toInt(), blueString.toInt());
}
FastLED.show();
delay(500);
}
break;
} else {
currentLine = "";
}
} else if (c != '\r') {  // if you got anything else but a carriage return character,
currentLine += c;      // add it to the end of the currentLine
}
}
}
// Clear the header variable
header = "";
// Close the connection
client.stop();
Serial.println("Client disconnected.");
Serial.println("");
}
}

 Ensure that the necessary libraries for this sketch are installed before uploading. Additionally, in order to link the XIAO with your router, you had to enter the SSID and password into the sketch.

Open the serial monitor after uploading the sketch, then copy the IP address that is generated. You may use this IP address to launch a web application in any browser.

• The rocker switch from the main assembly circuit must first be desoldered before being inserted into the slot on the main body to begin the assembly process.
• Then, we installed the Barrel DC Jack and tightened it using the included nut.
• The barrel DC jack is connected to the circuit is charging IN by using the wires that we attached to the positive and negative ends of the DC jack.
• The wiring procedure is now complete after we reconnected the rocker switch's wires to the circuit.
• Now, we position the lithium cell in the center and insert the main circuit into the main body at its designated spot.
• After that, the RGB LED Circuit is positioned above the cell and secured in place with hot glue.
• next, the lid is fitted on top of the main body and is fixed in place using four M2 Screws.

Assembly is now completed.

Here's the result of this simple build, a WEB RGB LED made from scratch, user can use a WEB APP to control the color of the LEDs.

To further boost the aesthetics, we have included Voronoi patterns in this project which was developed utilizing a Voronoi generator extension in Fusion360 throughout the Cad process.

This project contains a lithium cell as a power source, which can last up to 4-5 hours of constant use. To charge the lithium cell, the user can use a 5V adaptor plugged into the barrel jack to charge the setup.

All the details regarding this project, including files, are attached, which you can download.

Leave a comment if you need any help regarding this project. This is it for today, folks.

Thanks to Seeed Studio Fusion for supporting this project.

You guys can check them out if you need great PCB and stencil service for less cost and great quality.

And I'll be back with a new project pretty soon!