{"id":144648,"date":"2024-08-06T16:33:11","date_gmt":"2024-08-06T11:03:11","guid":{"rendered":"https:\/\/www.electronicsforu.com\/?p=144648"},"modified":"2025-03-18T11:19:16","modified_gmt":"2025-03-18T05:49:16","slug":"led-controller-using-web-serial","status":"publish","type":"post","link":"https:\/\/www.electronicsforu.com\/electronics-projects\/led-controller-using-web-serial","title":{"rendered":"LED Controller Using WebSerial"},"content":{"rendered":"
\n
\"\"
Comment errors or corrections found for this circuit, and get the chance to win big!<\/figcaption><\/figure><\/div>\n\n\n

LED controller that interfaces through WebSerial, 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. <\/p>\n\n\n\n

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.<\/p>\n\n\n\n

Applications of LED Controllers using Webserial<\/strong><\/h3>\n\n\n\n
    \n
  • Control home lighting systems remotely via a web browser.<\/li>\n\n\n\n
  • Manage and change LED displays in real-time for dynamic visual effects in art projects.<\/li>\n\n\n\n
  • Quickly prototype and test LED-based projects with an easy-to-use web interface.<\/li>\n\n\n\n
  • Enhance DIY electronics projects with web-controlled lighting features.<\/li>\n<\/ul>\n\n\n\n

    Bill of Materials (BoM)<\/strong><\/h2>\n\n\n\n
    Components <\/strong><\/td>Description <\/strong><\/td>Quantity<\/strong><\/td><\/tr>
    IndusBoard<\/a><\/td> 3cm sized dev board <\/td>1<\/td><\/tr>
    LED<\/td> 5mm LED <\/td>1<\/td><\/tr>
    Resistor<\/td> 1k ohm resistor <\/td>1<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

    Code for LED Controller Using WebSerial<\/strong><\/h2>\n\n\n\n
    #include <Arduino.h>\n#if defined(ESP8266)\n#include <ESP8266WiFi.h>\n#include <ESPAsyncTCP.h>\n#elif defined(ESP32)\n#include <WiFi.h>\n#include <AsyncTCP.h>\n#endif\n#include <ESPAsyncWebServer.h>\n#include <WebSerial.h>\nAsyncWebServer server(80);\nconst char* ssid = \"ESP wifi\"; \/\/ Your WiFi AP SSID\nconst char* password = \"12345678\"; \/\/ Your WiFi Password\nconst int ledpin = 3;\n\/* Message callback of WebSerial *\/\nvoid recvMsg(uint8_t *data, size_t len){\nWebSerial.println(\"Received Data...\");\nString d = \"\";\nfor(int i=0; i < len; i++){\nd += char(data[i]);\n}\nWebSerial.println(d);\n\/\/control LED based on received message\nif (d == \"ON\") {\ndigitalWrite(ledpin, HIGH);\nWebSerial.println(\"LED is ON\");\n}\nelse if (d == \"OFF\") {\ndigitalWrite(ledpin, LOW);\nWebSerial.println(\"LED is OFF\");\n}\nelse {\nWebSerial.println(\"Unknown command\");\n}\n}\nvoid setup() {\nSerial.begin(115200);\npinMode(ledpin, OUTPUT);\nWiFi.softAP(ssid, password);\nIPAddress IP = WiFi.softAPIP();\nSerial.print(\"AP IP address: \");\nSerial.println(IP);\n\/\/ WebSerial is accessible at \"<IP Address>\/webserial\" in browser\nWebSerial.begin(&server);\n\/* Attach Message Callback *\/\nWebSerial.msgCallback(recvMsg);\nserver.begin();\n}\nvoid loop() {\ndelay(2000);\nWebSerial.print(F(\"IP address: \"));\nWebSerial.println(WiFi.localIP());\nWebSerial.printf(\"Millis=%lu\\n\", millis());\nWebSerial.printf(\"Free heap=[%u]\\n\", ESP.getFreeHeap());\n}<\/code><\/pre>\n\n\n\n
    Connection<\/strong><\/h2>\n\n\n
    \n
    \"LED<\/figure><\/div>\n\n\n
    Testing<\/strong><\/h2>\n\n\n\n
    Now we connect the board with the USB and upload the code in the indusboard and check output after giving command on web serial. <\/p>\n\n\n\n
    To connect the indusboard with web serial, type (192.168.4.1\/webserial) in web browser. <\/p>\n\n\n\n
    Then we give command \u201cON\u201d on web serial, then LED starts glowing and when we give command \u201cOFF\u201d, then LED becomes off. And if there is another command than \u201cON\u201d or \u201cOFF\u201d, then it shows unknown command on web serial.<\/p>\n\n\n
    \n
    \"LED<\/figure><\/div>\n\n\n
    \n
    \"LED<\/figure>\n\n\n\n
    \"WebSerial<\/figure>\n\n\n\n
    \"Control<\/figure>\n<\/figure>\n\n\n\n
    \n\n\n\n
    Author(s): Manjeet Vishwakarma,  Abhay Verma and Satywanti Kundu are B.Tech ECE students at GJUS&T HISAR<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"
    LED controller that interfaces through WebSerial, 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 […]<\/p>\n","protected":false},"author":55758,"featured_media":144655,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[22,23,776,11851],"tags":[],"class_list":{"0":"post-144648","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-electronics-projects","8":"category-hardware-diy","9":"category-prototypes","10":"category-super-innovative-projects"},"_links":{"self":[{"href":"https:\/\/www.electronicsforu.com\/wp-json\/wp\/v2\/posts\/144648","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.electronicsforu.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.electronicsforu.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.electronicsforu.com\/wp-json\/wp\/v2\/users\/55758"}],"replies":[{"embeddable":true,"href":"https:\/\/www.electronicsforu.com\/wp-json\/wp\/v2\/comments?post=144648"}],"version-history":[{"count":2,"href":"https:\/\/www.electronicsforu.com\/wp-json\/wp\/v2\/posts\/144648\/revisions"}],"predecessor-version":[{"id":159615,"href":"https:\/\/www.electronicsforu.com\/wp-json\/wp\/v2\/posts\/144648\/revisions\/159615"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.electronicsforu.com\/wp-json\/wp\/v2\/media\/144655"}],"wp:attachment":[{"href":"https:\/\/www.electronicsforu.com\/wp-json\/wp\/v2\/media?parent=144648"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.electronicsforu.com\/wp-json\/wp\/v2\/categories?post=144648"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.electronicsforu.com\/wp-json\/wp\/v2\/tags?post=144648"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}