{"id":145749,"date":"2024-08-08T18:52:38","date_gmt":"2024-08-08T13:22:38","guid":{"rendered":"https:\/\/www.electronicsforu.com\/?p=145749"},"modified":"2025-03-18T11:59:58","modified_gmt":"2025-03-18T06:29:58","slug":"sensor-data-sending-over-web-serial","status":"publish","type":"post","link":"https:\/\/www.electronicsforu.com\/electronics-projects\/sensor-data-sending-over-web-serial","title":{"rendered":"Sensor Data Sending Over WebSerial"},"content":{"rendered":"<div class=\"wp-block-image\">\n<figure class=\"alignright size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"400\" height=\"152\" src=\"https:\/\/www.electronicsforu.com\/wp-contents\/uploads\/2016\/12\/Screen-Shot-2016-12-24-at-15.19.33-e1644389186872.png\" alt=\"\" class=\"wp-image-28226\" style=\"width:458px;height:auto\"\/><figcaption class=\"wp-element-caption\">Comment errors or corrections found for this circuit, and get the chance to win big!<\/figcaption><\/figure><\/div>\n\n\n<p>An Arduino IDE project using the <a href=\"https:\/\/shop.electronicsforu.com\/product\/indusboard-iot-development-board\/\">Indusboard<\/a> can send sensor data over Web Serial to a web browser, allowing real-time monitoring and analysis. <\/p>\n\n\n\n<p>By creating a web page with the Web Serial API, it can establish a serial connection to the Indus board, which collects data from various sensors (e.g. temperature, humidity, light). The web page receives and displays this sensor data dynamically, providing a user-friendly interface for visualizing environmental conditions or other sensor readings. <\/p>\n\n\n\n<p>This setup is ideal for applications requiring remote sensor monitoring, data logging, and interactive data visualization, making it useful for smart home systems, environmental monitoring, and educational projects.<\/p>\n\n\n\n<p><strong>Applications of sensor data sending over web serial:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Real-time tracking of environmental conditions in smart home systems and agricultural setups.<\/li>\n\n\n\n<li>Collecting and storing sensor data for analysis in research and industrial applications.<\/li>\n\n\n\n<li>Monitoring air quality, temperature, and other parameters to ensure safe and healthy living or working environments<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Bill of Materials (BoM)<\/strong><\/h2>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><strong>Components<\/strong><\/td><td><strong>Description<\/strong><\/td><td><strong>Quantity<\/strong><\/td><\/tr><tr><td>IndusBoard<\/td><td>3cm sized dev board<\/td><td>1<\/td><\/tr><tr><td>LED<\/td><td>5mm LED<\/td><td>1<\/td><\/tr><tr><td>Resistor<\/td><td>1k ohm resistor<\/td><td>1<\/td><\/tr><tr><td>Switch<\/td><td>Pushbutton-2 Pin<\/td><td>1<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Coding<\/strong><\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>#include &lt;Arduino.h&gt;\n#if defined(ESP8266)\n#include &lt;ESP8266WiFi.h&gt;\n#include &lt;ESPAsyncTCP.h&gt;\n#elif defined(ESP32)\n#include &lt;WiFi.h&gt;\n#include &lt;AsyncTCP.h&gt;\n#endif\n#include &lt;ESPAsyncWebServer.h&gt;\n#include &lt;WebSerial.h&gt;\nAsyncWebServer server(80);\nconst char* ssid = \"ESP Wifi\"; \/\/ Your WiFi AP SSID\nconst char* password = \"12345678\"; \/\/ Your WiFi Password\nconst int ledpin = 2;\nconst int sensorpin = 4;\n\/* Message callback of WebSerial *\/\nvoid recvMsg(uint8_t *data, size_t len){\nWebSerial.println(\"Received Data...\");\nString d = \"\";\nfor(int i=0; i &lt; len; i++){\nd += char(data&#91;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);\npinMode(sensorpin, INPUT_PULLUP);\nWiFi.softAP(ssid, password);\nIPAddress IP = WiFi.softAPIP();\nSerial.print(\"AP IP address: \");\nSerial.println(IP);\n\/\/ WebSerial is accessible at \"&lt;IP Address&gt;\/webserial\" in browser\nWebSerial.begin(&amp;server);\n\/* Attach Message Callback *\/\nWebSerial.msgCallback(recvMsg);\nserver.begin();\n}\nvoid loop() {\ndelay(2000);\nint val = digitalRead(sensorpin);\nWebSerial.print(F(\"IP address: \"));\nWebSerial.println(WiFi.localIP());\nWebSerial.printf(\"Millis=%lu\\n\", millis());\nWebSerial.printf(\"Free heap=&#91;%u]\\n\", ESP.getFreeHeap());\nWebSerial.printf(\"val1=&#91;%d\\n\",val);\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Connection<\/strong><\/h2>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"804\" height=\"618\" src=\"https:\/\/www.electronicsforu.com\/wp-contents\/uploads\/2024\/08\/conn01.jpg\" alt=\"Circuit for Sensor Data Sending Over WebSerial\" class=\"wp-image-145774\" style=\"width:467px;height:auto\" srcset=\"https:\/\/www.electronicsforu.com\/wp-contents\/uploads\/2024\/08\/conn01.jpg 804w, https:\/\/www.electronicsforu.com\/wp-contents\/uploads\/2024\/08\/conn01-500x384.jpg 500w, https:\/\/www.electronicsforu.com\/wp-contents\/uploads\/2024\/08\/conn01-546x420.jpg 546w, https:\/\/www.electronicsforu.com\/wp-contents\/uploads\/2024\/08\/conn01-80x60.jpg 80w, https:\/\/www.electronicsforu.com\/wp-contents\/uploads\/2024\/08\/conn01-696x535.jpg 696w\" sizes=\"auto, (max-width: 804px) 100vw, 804px\" \/><\/figure><\/div>\n\n\n<h2 class=\"wp-block-heading\"><strong>Testing<\/strong><\/h2>\n\n\n\n<p>Now we connect the board with the USB and upload the code in the indusboard and check output after giving command on web serial. To connect indusboard with web serial type (192.168.4.1\/webserial) in web browser. <\/p>\n\n\n\n<p>Then we can press the button on breadboard, then at web serial, we get the value 1 which shows that the sensor we connect is working. If we release the button then we get the value 0 at web serial.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"749\" src=\"https:\/\/www.electronicsforu.com\/wp-contents\/uploads\/2024\/08\/breadboard-and-indusboard-1024x749.jpg\" alt=\"Project for Sending Sensor Data Over WebSerial\" class=\"wp-image-145776\" style=\"width:434px;height:auto\" srcset=\"https:\/\/www.electronicsforu.com\/wp-contents\/uploads\/2024\/08\/breadboard-and-indusboard-1024x749.jpg 1024w, https:\/\/www.electronicsforu.com\/wp-contents\/uploads\/2024\/08\/breadboard-and-indusboard-500x366.jpg 500w, https:\/\/www.electronicsforu.com\/wp-contents\/uploads\/2024\/08\/breadboard-and-indusboard-574x420.jpg 574w, https:\/\/www.electronicsforu.com\/wp-contents\/uploads\/2024\/08\/breadboard-and-indusboard-80x60.jpg 80w, https:\/\/www.electronicsforu.com\/wp-contents\/uploads\/2024\/08\/breadboard-and-indusboard-696x509.jpg 696w, https:\/\/www.electronicsforu.com\/wp-contents\/uploads\/2024\/08\/breadboard-and-indusboard.jpg 1242w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"713\" height=\"1024\" src=\"https:\/\/www.electronicsforu.com\/wp-contents\/uploads\/2024\/08\/Wen-Serial-713x1024.jpg\" alt=\"Sensor Data Sending Over Web Serial\" class=\"wp-image-145775\" style=\"width:434px;height:auto\" srcset=\"https:\/\/www.electronicsforu.com\/wp-contents\/uploads\/2024\/08\/Wen-Serial-713x1024.jpg 713w, https:\/\/www.electronicsforu.com\/wp-contents\/uploads\/2024\/08\/Wen-Serial-348x500.jpg 348w, https:\/\/www.electronicsforu.com\/wp-contents\/uploads\/2024\/08\/Wen-Serial-292x420.jpg 292w, https:\/\/www.electronicsforu.com\/wp-contents\/uploads\/2024\/08\/Wen-Serial-696x1000.jpg 696w, https:\/\/www.electronicsforu.com\/wp-contents\/uploads\/2024\/08\/Wen-Serial.jpg 891w\" sizes=\"auto, (max-width: 713px) 100vw, 713px\" \/><\/figure><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p><em>Author(s): Manjeet Vishwakarma, &nbsp;Abhay Verma and Satywanti Kundu are B.Tech ECE students at GJUS&amp;T HISAR<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>An Arduino IDE project using the Indusboard can send sensor data over Web Serial to a web browser, allowing real-time monitoring and analysis. By creating a web page with the Web Serial API, it can establish a serial connection to the Indus board, which collects data from various sensors (e.g. temperature, humidity, light). The web [&hellip;]<\/p>\n","protected":false},"author":55758,"featured_media":145776,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[22,23,776,11851],"tags":[110],"class_list":{"0":"post-145749","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","11":"tag-electronics-projects"},"_links":{"self":[{"href":"https:\/\/www.electronicsforu.com\/wp-json\/wp\/v2\/posts\/145749","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=145749"}],"version-history":[{"count":2,"href":"https:\/\/www.electronicsforu.com\/wp-json\/wp\/v2\/posts\/145749\/revisions"}],"predecessor-version":[{"id":159643,"href":"https:\/\/www.electronicsforu.com\/wp-json\/wp\/v2\/posts\/145749\/revisions\/159643"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.electronicsforu.com\/wp-json\/wp\/v2\/media\/145776"}],"wp:attachment":[{"href":"https:\/\/www.electronicsforu.com\/wp-json\/wp\/v2\/media?parent=145749"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.electronicsforu.com\/wp-json\/wp\/v2\/categories?post=145749"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.electronicsforu.com\/wp-json\/wp\/v2\/tags?post=145749"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}