LED Controller Using Web Serial

LED controller that interfaces through Web Serial, allowing to control LEDs from a web browser. By setting up a web page with a user interface for controlling the LEDs, the Web Serial API can communicate with the Indus board via a USB connection. The web page sends serial commands to the board, which the Arduino sketch interprets to adjust the LED states accordingly. This setup leverages the Web Serial API’s capability to provide a seamless and interactive way to manage hardware devices like LEDs directly from a web application, making it ideal for projects requiring remote or user-friendly control interfaces.

Applications of LED controllers using web serial

• Control home lighting systems remotely via a web browser.
• Manage and change LED displays in real-time for dynamic visual effects in art projects.
• Quickly prototype and test LED-based projects with an easy-to-use webinterface.
• Enhance DIY electronics projects with web-controlled lighting features.

Bill of Materials (BoM)

Coding

#include <Arduino.h>
#if defined(ESP8266)
#include <ESP8266WiFi.h>
#include <ESPAsyncTCP.h>
#elif defined(ESP32)
#include <WiFi.h>
#include <AsyncTCP.h>
#endif
#include <ESPAsyncWebServer.h>
#include <WebSerial.h>
AsyncWebServer server(80);
const char* ssid = "ESP wifi"; // Your WiFi AP SSID
const char* password = "12345678"; // Your WiFi Password
const int ledpin = 3;
/* Message callback of WebSerial */
void recvMsg(uint8_t *data, size_t len){
WebSerial.println("Received Data...");
String d = "";
for(int i=0; i < len; i++){
d += char(data[i]);
}
WebSerial.println(d);
//control LED based on received message
if (d == "ON") {
digitalWrite(ledpin, HIGH);
WebSerial.println("LED is ON");
}
else if (d == "OFF") {
digitalWrite(ledpin, LOW);
WebSerial.println("LED is OFF");
}
else {
WebSerial.println("Unknown command");
}
}
void setup() {
Serial.begin(115200);
pinMode(ledpin, OUTPUT);
WiFi.softAP(ssid, password);
IPAddress IP = WiFi.softAPIP();
Serial.print("AP IP address: ");
Serial.println(IP);
// WebSerial is accessible at "<IP Address>/webserial" in browser
WebSerial.begin(&server);
/* Attach Message Callback */
WebSerial.msgCallback(recvMsg);
server.begin();
}
void loop() {
delay(2000);
WebSerial.print(F("IP address: "));
WebSerial.println(WiFi.localIP());
WebSerial.printf("Millis=%lu\n", millis());
WebSerial.printf("Free heap=[%u]\n", ESP.getFreeHeap());
}

Connection

Testing

Now we connect the board with the USB and upload the code in the indus board and check output after giving command on web serial. To connect indus board with web serial type (192.168.4.1/webserial) in web browser. Then we give command “ON” on web serial then LED starts glowing and when we give command “OFF”, then LED becomes off. And if there is another command than “ON” or “OFF”, then it shows unknown command on web serial.

Author(s): Manjeet Vishwakarma,  Abhay Verma and Satywanti Kundu are B.Tech ECE students at GJUS&T HISAR