Access a Serial Port Wirelessly Over Wi-Fi Using a Web Browser

In this article, I will show you how I took typical serial ports and made them available wirelessly using a web browser.

Step 1: Watch the Video

The video walks through the steps on how I built this device. Feel free to add your questions in the comment section of the YouTube video if you need any further assistance.

Step 2: Why I Made It

On multiple occasions I find myself dragging projects I am working on to access their serial port for debugging or monitoring. Sometimes I am lucky and I work on small and easy-to-carry projects. But other times, it is more challenging like this laser engraver. It is connected to a power supply and exhaust fan - and it's too big to easily move around and mount on my desk.

So I made this wireless serial gateway. It is based on a wireless micro-controller, the ESP8266, and plugs directly to the serial Rx and TX port on my projects. It is powered by USB. This wireless gateway is portable so it can easily be moved from one device to the next. Or in my case, I chose to just leave them permanently due to their low cost.

Step 3: Hardware

This is how I typically set it up: I connect Tx to Rx and Rx to Tx for the UART serial communication then I power it using the USB cable. Since I am using two different power sources, I need to connect ground from the Wemos d1 mini to the project's ground. As you can see the hardware is only a single Wemos d1 mini but any ESP8266 module or board can do the job. As long as your serial port is 3.3v then it should be plug and play. If you are working with a 5v serial then a logic shifter might be needed but from my experience so far, ESP8266 can handle 5v serial no issues.

Shopping for Wemos D1 Mini? This is the model I used: (affiliate)
■ MrDIY store = https://store.mrdiy.ca/p/wemos-d1-mini
■ Amazon.com - https://amzn.to/3v20EmR
■ AliExpress - https://s.click.aliexpress.com/e/_Af36zD
■ Amazon.ca - https://amzn.to/3p3SV3T

Step 4: Firmware

In the code, I created a web socket that sends any messages coming in from the serial port to the browser. Javascript code running on the client browser displays these messages in a text area. This was also used to get any commands sent using an input text field to the socket back to the wemos d1 mini which in return send them out over serial. I used a webserver on the ESP8266 to host the HTML, CSS and JS files.

Step 5: Setting It Up

After flashing the firmware to the Wemos d1 mini, I went through the typical portal setup to enter my Wi-fi info. I made an earlier article about this topic. Then it is all set up.

* The link to the firmware bin file is at the end of this article.

Step 6: Ready to Use

The serial port can then be accessed using a web browser and navigating to the IP address of the wemos d1 mini. This is what it looks like. If you have worked with any terminal before then the interface should be familiar. It has an auto scrolling window at the top for the console and a terminal prompt at the bottom. The baud rate can be changed at the top right corner to match the rate of the serial port. Each time this drop down menu is changed, a command is sent over the socket to change the serial speed on the ESP8266.

Step 7: Example

And to show it in action, here is an example where I installed it on my laser engraver. This CNC laser engraver runs the Grbl firmware. I can use the browser to check the settings, view the build info, move it or perform any commands I usually do over serial.

Step 8: Conclusion

This little tool came in handy on multiple occasions and made my life easier, especially when troubleshooting remote devices. Here is the firmware bin file if you want to flash it and give it a try.

Thanks for reading!

If you found this useful, maybe consider visiting my YouTube channel and say hello. I will be posting future updates about this project.