Web development is usually confined to the browser. But what happens when you connect a web app to a physical robot?
I recently built a Smart 360° Navigation System, and I wanted to share the architecture of how I bridged the gap between a web-based virtual tour and physical IoT hardware.
🌐 The Virtual Tour (Frontend)
To create the immersive experience, I used Panolens.js (built on top of Three.js). It allowed me to stitch together 360° images into a seamless virtual tour of a campus.
Users can look around, click on hotspots, and navigate through the digital space. But I didn't want to stop there.
🤖 The Physical Robot (IoT)
I integrated the web app with a physical IoT robotic guide.
When a user selects a destination in the 360° web app, the frontend sends an HTTP request to a Node server, which then communicates with the robot's microcontroller (via WebSockets/MQTT).
The physical robot then physically guides the user to the location they selected in the virtual tour!
🔗 The Magic of WebSockets
To make the communication instant, traditional HTTP requests were too slow. Upgrading to WebSockets allowed the web app to maintain a persistent connection with the IoT device, meaning the robot reacted the millisecond a button was clicked on the screen.
If you are a web developer looking to get into hardware, I highly recommend experimenting with WebSockets and a simple ESP32 microcontroller. The possibilities are endless!