Project

PWA Universal Controller

iot

mqtt

pwa

automation

opensource

webdev

Raghav Dhingra , Web Developer
13th Aug 2021

#Control anything around the world

Surprising? Obvio not, all the traditional machines and software are being replaced with modernized technology.
Therefore, my concepts and belief also substitute with new ideas.

I am really fascinated by the world being changed so rapidly with up-to-date designs, plans, structures in terms of software as well as hardware. Not long ago, I have been engrossed in electronics and communication.
P.S. I am not an electronics or electrical student (^_^)/
Being from a software background, it kick-starts the ability to integrate my software skills with the hardware.

I am wandering around IoT stuffs for few months, and playing with different components and modules in my leisure time.
Begin to test out the knowledge while developing some astonishing devices, may not be the as good insight as others. But yeah, will share it soon.

Inspiration for the project

The project where I have taken inspiration from, a simple remote control car. I wish to try out a different approach of controlling through a mobile, again ordinary, but not for me.
I had built a car using simple components, NodeMCU (ESP8266), and a motor driver bridge (L298N).
Along with it, I had used the Blynk android application as a medium for controlling. That was my first incredible experience in the field of IoT. Though already made some small projects, it was just insane.

Still, want to take it to a higher level. It has a major dependency on an application - Blynk, which I have not developed. I wish to have some personal up-gradation but have no control over it. Also, it has a limitation of connection. The device and the mobile have to be connected over the same wifi network. Again, we can operate through an android mobile application.
#restrictions ヽ(ಠ_ಠ)ノ

Hence, after days of research, got upon a distinct process of communication via MQTT protocol.
I had some experimentation and exploration about the protocol. This is a very lightweight protocol for messaging transmission that follows a pattern of pub/sub.

Again, analysis over the scalability factor, efforts for integration over the web. Subsequently, initiated the react application, and set up the MQTT broker over the EC2, again, I don't want to use publicly available brokers due to configuration restrictions.
Finalized the flow, and implemented within few weeks. Cumulatively, it's not more than a week task, but due to other activities alongside, and the research part took more than a month.
After weeks-long work, got the application and the device ready for use.
Currently, anyone around the world can control the IoT device in my room. The only restriction is that the device/car should be connected to the internet.
The current application is a PWA, hence can be installed as a native application over any platform, whether it's Windows, Mac, Linux, Android, Ios, and any other.
For PWA, I have used the service workers to cache all the application data inside and serves when the browser is offline. (But can't control the device)

Multiple controllers can control the device at one time, hence can have disturbance seen, if so (≧∇≦)/.
I have tested the controller and car with some friends over a meet. A delay of 120 ms can be seen while controlling the device due to the internet and the network latency.

Test out the controller at controller.raghavdhingra.com
Username: raghavdhingra
Password: qwerty1234

Now you have the master control for the car and all my future devices. But will change the password soon 😜

If you wish to have a live demo and play with it, you can mail me at admin@raghavdhingra.com

Do give it a like and follow me up on GitHub: github.com/raghavdhingra

Watch Up the Video At:

https://youtu.be/R8n5rWj3dGc

Tech Stack

Frontend - ReactJsRecoil
Broker - Mosquitto MQTT broker
IoT - C++

Broker deployed on AWS EC2
Frontend deployed on Netlify

Open-Source

Frontend code
github.com/raghavdhingra/React-MQTT

IoT device code
github.com/raghavdhingra/Arduino-Cpp/blob/main/mqtt_car_controller-with-react/mqtt_car_controller-with-react.ino

Do check out my other blogs

#Control stuff around the world

PWA Universal Controller
PWA Universal Controller
PWA Universal Controller
PWA Universal Controller
PWA Universal Controller
PWA Universal Controller

2

Give a star to encourage!

Discussion

Ashwin
Aug 18 '21
Cool project!