Build Instructions

Collapse

• 1

  PCB Assembly Process

  • 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.
• 2

  RGB LED Circuit and XIAO- Test Setup

  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.

• 3

  Main Code

  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.

View all 5 instructions