I often lose or forget which remote is for which device since we have so many remotes at home and it is easy to mix them up.

What it does

I created a way to record IR signals from the remotes and then play them back. This is done using the IR receiver and transmitter of the hardware part. Then, you are able to create customizable remotes on the website to play control the signals. Here are the steps to use the project:

  1. Go to
  2. Log into google (using firebase) and connect to a supported device, which takes you to the remotes page
  3. Create and customize remotes and buttons
  4. Click record for each button, and while the loading sign is there, press the button on the remote you want to record
  5. Control your devices at home
  6. Click save to save your remotes for the next time you log in

Why use it over a traditional universal remote

  • Customizability

You are able to make any type of remote since it is virtual, so you can pick whatever design you prefer. Moreover, the process is streamlined with easy copy, paste, and delete functionality with the ability to resize and move buttons, change colors, and add icons (from the semantic ui icons list) or text.

  • Cost

If a device with the same functionality was made for production, it should have a cost to produce under $3.50 according to the cost of components on Sparkfun and Digikey. This is much cheaper than the over $50 universal remote since there is no need for components for logic and buttons. All that is needed is a USB port, IR receiver, IR LED, a transistor, a printed circuit board, and a plastic outside, contributing to the cheap cost. Moreover, the signal can be sent over a distance of 12 feet.

How I built it

  1. I used IRLib2 to decode and encode IR signals from over 12 protocols.
  2. The decoded IR signal is sent over usb (using Google's webusb API) to the laptop. As a result, the website is only compatible on chrome.
  3. The website saves the signal to a button on the screen
  4. After the signal is recorded, you can click the button, which will send it back to the Arduino over USB
  5. The Arduino will play the signal over the IR LED, allowing you to control your devices

React functionality: I used a React drag and resize library to help with customizing. For the UI, I used semantic-ui-react. Though, I completely coded copy, paste, and delete functionality by using event listeners and doing the function on whatever was clicked last.

WebUSB functionality: I used ways to serialize and deserialize information when it is sent over USB cable over both devices. The API is only available on Chrome since it is a Google API.

Firebase functionality: Google Auth is managed by Firebase. Additionally, when you click the save button, a new document is created in the collection according to the email with the stringified JSON that contains all the information on the remotes page. Then when you log back in, the information is pulled from firebase to display all the remotes again.

Google Cloud functionality: The website is hosted with google cloud (first time using it).

Challenges I ran into

It was my first time using Google Cloud and Firebase. Additionally, I only started using the webusb api less than a week ago. So setting up the website on Google Cloud and using the Firebase API was extremely new to me. So, I ran into a lot of issues, and I had to do a ton of troubleshooting to get it to work. I also set them up separately, and I didn't realize that I could have just used firebase for everything.

Also, I used a few new React libraries like React drag and drop. Some bugs were there that I had to fix there too.

On the hardware side, I didn't have the correct transistors, so I wasn't able to amplify the signal as much as I could have. Additionally, I'm still pretty bad at C++, which is required for coding Arduinos, and I took a long time to figure out how to store large variables like the IR signals. I eventually happened upon long longs, which I used to stare them (the signals can be up to 12 digits long, plus the protocol). When sending the information from the client to the Arduino, it was separated into 4 longs, which had to then be combined into one long long.

Accomplishments that I'm proud of

I finally started using Google Cloud, and it was a really fun experience seeing the website go live! I thought it would take a lot longer, and I was extremely worried when I was waiting for the SSL certificates to work. However, I'm still very happy with the result!

What I learned

I learned how to use Google Cloud services like buckets in storage, a load balancer, Firebase authentication, Cloud Firestore, Firebase web hosting, and a few new React libraries. I also learned more C++ and about conversions between different types of variables.

What's next for Virtual Remote

Though most of it is coded, since I only spent two days on the project, there are a few more bugs to fix, which I will do. Additionally, I want to bring the prototype into production by making printed circuit boards. However, it will be difficult to get webusb support if I am making a prototype that doesn't contain an Arduino.

Built With

Share this project: