WiFi-based Garage Door Opener

by Adityadp in Circuits > Wireless

8039 Views, 87 Favorites, 0 Comments

WiFi-based Garage Door Opener

Screenshot 2022-09-02 at 11.43.40 PM.png
WhatsApp Image 2022-09-02 at 22.26.06.jpeg
WhatsApp Image 2022-09-02 at 22.26.18.jpeg

The garage door control system in my house can be opened only by a physical push of a button. This button, unfortunately, is placed inside the garage, which makes it very difficult to open the garage door if you are trying to enter from outside, for example, if you are in your car returning home.

The solution: an attachment snugly sits over the garage door control button, which houses a servo motor that can rotate its arm to physically press the button. You activate the servo by sending a wireless signal, over your local WiFi network, through your phone.

A point to note: There are a lot of houses in my neighbourhood/community, which use the same garage door control unit and face the same problem. Therefore, I designed the device with scalability in mind. More like a product that can be used from the get-go, and something that requires no technical skills to operate.

The construction of the device can be broken down into 3 parts: 3D printing for the case, the code to enable wireless control, and the mechanism to press the button. I will be focusing on each section in detail.

Supplies

  1. NodeMCU 12-E, ESP8266 x1 link
  2. Servo Motor with accesories x1 link
  3. Female to Male Jumper Cables x3 link
  4. M3 Nuts and Bolts x3 link

Tools

  1. 3D printer and 3D printer filament (recommend PLA)
  2. Screwdriver
  3. Vernier Caliper
  4. Pliers

3D Designing the Attachment's Chassis

Screenshot 2022-09-02 at 6.01.30 PM.png
Screenshot 2022-09-02 at 5.58.14 PM.png
Screenshot 2022-09-02 at 5.57.31 PM.png
WhatsApp Image 2022-09-02 at 21.25.35.jpeg
WhatsApp Image 2022-09-02 at 21.25.35 (1).jpeg
WhatsApp Image 2022-09-02 at 21.25.34.jpeg

Using a vernier calliper, I took measurements of the current garage door control unit. I used Onshape to design the attachment.

The aim was to have both halves of the attachment come together and tighten around the control unit, with the help of nuts and bolts. They would be securely held in place due to friction.

There is a slot in the middle, where the arm of the servo would move to press the button. A hole on the side wall is included so that a MicroUSB cable can be plugged into the NodeMCU to power it and the servo.

This chassis design isn't applicable to all garage door control units; however, the core concept of opening the door remotely is. The chassis design can be easily modified based on your needs and measurements.

There are some additional protrusions to help secure the servo and NodeMCU inside the attachment.

Slicing, 3D Printing, Testing Fit

Screenshot 2022-09-02 at 6.18.51 PM.png
Screenshot 2022-09-02 at 6.18.29 PM.png
WhatsApp Image 2022-09-02 at 17.33.52.jpeg
WhatsApp Image 2022-09-02 at 21.25.35 (2).jpeg
WhatsApp Image 2022-09-02 at 21.25.36 (1).jpeg
WhatsApp Image 2022-09-02 at 21.25.36.jpeg

Used Ultimaker Cura to slice the 3D CAD model, resulting time of about 7 hours 35 min. 66g of PLA filament.

I used support blockers to change the density of the infill in just specific areas which needed extra reinforcement. A video on how to do this can be found here: https://www.youtube.com/watch?v=rGGmUFz08c8

3D printed the parts on my Ender 3.

Tested the fitting on the actual garage door control uni.

Mechanism Design and Explanation

As seen in the testing images, the attachment fits tightly onto the garage door control unit. There is a slot in the middle of the attachment which allows direct access to the control button. The button is pressed through this slot, using the help of a servo and its arm.

The servo can only be activated by the NodeMCU, which in turn can only be activated by your phone after it has connected to your home WiFi. Therefore there is no chance for someone you don't know to open the garage door.

A servo was chosen as it could provide the necessary force (torque) to press the button. Additionally, it is very reliable and specific with the degree of rotation. Therefore, the servo could be programmed to perform a quick controlled tap of the button and to return to the exact same position every time. The same precision could not be achieved with a DC motor.

The NodeMCU was chosen as it was the cheapest available on the market and met all the design criteria.

Circuit Setup

Screenshot 2022-09-02 at 6.42.34 PM.png
WhatsApp Image 2022-09-02 at 21.25.38 (1).jpeg
Screenshot 2022-09-02 at 6.44.40 PM.png

The circuit is really simple for this project. It only has 3 connections required as seen in the photos attached.

Please note, that you will have to use additional Female to Male jumper cables between the Servo and NodeMCU as the wires coming out of the servo cannot be easily connected to the NodeMCU board.

The red and brown wires of the servo motor are the Vcc (power source) and ground pins, respectively. The orange pin receives the PWM signal from the NodeMCU (Pin D4 of the board) to adjust the servo's degree of rotation.

Higher duty cycle PWM = a larger degree of rotation of the servo.

PLEASE NOTE: if you apply resistance to the motion of a servo, it will draw a very large current from whatever it is connected to. Therefore, if the NodeMCU is connected to your laptop, the servo may draw a large current from your laptop through the NodeMCU, and potentially fry your motherboard. Be careful while testing the servo. Only let the servo press the button, once it's being powered by a direct connection to a power socket

Constructing the Attachment

WhatsApp Image 2022-09-02 at 21.25.36 (2).jpeg
WhatsApp Image 2022-09-02 at 21.25.37 (1).jpeg
WhatsApp Image 2022-09-02 at 21.25.37 (2).jpeg
WhatsApp Image 2022-09-02 at 21.25.38.jpeg

Servo's will usually come with a packet containing a couple of arms and 3 screws. Two screws to secure the servo to an object, and one to secure an arm to the servo.

Use the smallest arm and the smallest of the three screws to attach the arm to the servo. Secure the servo onto the attachment's blocks as seen in the image, using the remaining two screws.

Press the NodeMCU's screw holes into the pins on the walls of the attachment to hold it in place. Make sure to not accidentally disconnect any of the cable connections.

Make sure the port of the NodeMCU, lines up with the hole designed into the chassis.

WiFi Connection Explanation

server.png

Before getting into the code structure there are a few key concepts that have to be explained related to how your WiFi system works.

When your phone or laptop connects to your WiFi router at home, it is actually connecting to a wireless network created by that router. All devices connected to your wifi will be on the same wireless network. To help differentiate between the devices on the wireless network, the router assigns an IP address (e.g. 192.168.1.5) to each device. Essentially 'naming' each device. A good link to understand internal and external IP addresses (not necessary for this project).

The internet works on a 'ask for and get the principle. Understanding the internet. While connected to your wifi, if you search up www.instructables.com, you are essentially asking to see what information is stored at that metaphysical address. Very similar to how register arrays work in electronics engineering. The request to view the address is sent to your router, and then your router then sends it to a set of servers, which, like a hard drive, physically hold all the information that is there on the website.

Upon receiving this request, the server, as the name implies, serves the data it has stored on itself back to the router, which then sends your device the information you requested. Very similar to how a waiter receives your meal order request and then serves you your food. Another crucial point, just as how it is the customer who orders the food, similarly, the device from which the request to view the webpage is generated is known as a 'client'. This is known as the client-server system.

Now to see how the simple NodeMCU board replicates this complicated process. The NodeMCU, acts as a device, just like a phone or laptop, and it is configured to connect to your WiFi. It requires the WiFi name and password to be able to connect to the WiFi network of your choosing. The WiFi credentials are usually written into the code that's uploaded to the board.

Once the NodeMCU has connected to the WiFi, it joins the local wireless network that all of your other wifi-connected devices are on. The NodeMCU is also assigned an IP address ('name') by the router as mentioned before. Now, similar to how the server has the data stored for a particular website, which the client requests, the NodeMCU, also has HTML code for a webpage stored on it, which a client can request for. Essentially the NodeMCU also acts as a server and can be called a webserver.

Therefore, whenever a device on the same WiFi network wants to access the NodeMCU's webpage, the device sends a request to view the information at the NodeMCU's IP address (which it needs to know), and the NodeMCU, acting as a server, sends the information that's been stored on it over to the client device.

Explanation of DNS

Screenshot 2022-09-02 at 6.47.27 PM.png

Suppose you don't know the NodeMCU's IP address or it a very difficult to remember the long number, there is an easier way to get the 'address' of the NodeMCU and its webpage. DNS (Domain Name System) is a way to give the IP address an easy-to-remember 'nickname', instead of remembering and typing in the long IP address number every time.

For example, www.google.com's IP address is 142.250.217.78 (try copy-pasting it into your browser). However, it would be a nightmare if you had to remember and type the string of numbers out every time you wanted to go to google.com. Therefore instead they've set up an easy-to-remember 'nickname': google.com.

How does this apply to the NodeMCU? Instead of remembering the IP address for the board, you can program the board to respond to a 'nickname', which for this project was OpenSesame. Whenever a request to view opensesame.local/ is initiated by a device on your WiFi network, the device sends out a mass message to all the devices on the same local network asking if they have the DNS name opensesame. Once the NodeMCU receives this message, it responds back to the client device by saying yes, and also sends its own IP address so that the client device can view the webpage.

Notice how the suffix is .local/ and not something else like .com/. This specifies the message is only cast to the devices connected on the same local network.

https://tttapa.github.io/ESP8266/Chap08%20-%20mDNS.html

WiFi Manager and Soft Access Points (AP)

Screenshot 2022-09-02 at 6.53.30 PM.png
Screenshot 2022-09-02 at 6.53.23 PM.png
wifimanager.jpeg

For this project, I was looking to produce a scalable product that could be distributed to all the houses in my neighbourhood. Therefore, it could not require the user to need any technical Arduino skills to operate the device.

Conventional code to establish the NodeMCU as a device and connect it to the local WiFi requires the WiFi SSID (name) and password to be written into the code during uploading. However, while building the device and uploading the code, I would not know the WiFi SSID and password of the end user. Therefore, I would not be able to pre-program this information into the NodeMCU.

Additionally, I can't expect the user to know how to upload an updated version of the code, with their required WiFi details, as that requires a lot of pre-requisite technical skills. Hence, I needed a way for the end user to remotely, and easily, upload their WiFi details to the NodeMCU, which would then allow the board to connect to their local WiFi network.

Thankfully there is a Arduino library called WiFi Manager by tzapu, which does exactly that. I'll be going into a brief overview of how the library works. Additional link on WiFi Manager Application.

Before that, an understanding about access points and stations is necessary. In a local WiFi network all the devices would be connected to one router, which then can access the internet. In this case, each device would be called a station, and the router, which connects to them all would be called an access point (AP).

The NodeMCU has the ability to act both as a station and as an AP. In station mode it would mimic a device, connecting to a WiFi network. But in AP mode, it acts like a router and creates its own local WiFi network that other devices can connect to. Very similar to how hotspot works. Naturally, this WiFi network would not be able to access the internet, and thus it is also known as a soft-AP.

If a device is connected to the NodeMCU's AP network, it can communicate with the NodeMCU, and even remotely change the code on the NodeMCU. This is what the WiFiManager library does.

When the NodeMCU detects that it hasn't connected to any WiFi network, it turns itself into an AP. Now, the NodeMCU's own WiFi network would be discoverable and open to join by all nearby devices. The user's device would then connect to the NodeMCU's 'hotspot', where afterwards it is prompted to a sign-in page which displays all the WiFi networks the NodeMCU has detected in the area. The user would then have to select a their own WiFi network, enter its password, and if everything is right, the NodeMCU goes back to Station mode and connects to the wifi, whose details its just received and stored into it's memory.

After its connected to the WiFi network, the user can test the garage opener webpage by searching up the pre-set DNS of the NodeMCU (opensesame.local/). With the DNS set up, the user doesn't need to know the IP address of the NodeMCU. Thus, the entire process is very user friendly and only has to be done the first time the user receives the product.

NOTE: For Android devices, you may need to search up 192.168.4.1 on your browser to access the WiFi Manager page and set the WiFi credentials. It may not automatically redirect you to a sign-in page.

HTML Code for the Website

Screenshot 2022-09-02 at 5.31.06 PM.png
Screenshot 2022-09-02 at 5.32.04 PM.png
WhatsApp Image 2022-09-02 at 17.33.45.jpeg

Time to look at how the webpage is created. The code for the website is on the NodeMCU (it's hosted on the NodeMCU's webserver)

This step looks at how the code for the webpage is set up. Websites are coded in HTML, which is its own coding language. While python, java, or C++ are used to develop functions with an end purpose, HTML is more for aesthetics. It is sort of similar to LaTeX, where coding can be used to prepare what a document looks like.

There is an easy way to set up the HTML code for a webpage, which doesn't require you to start from scratch.

  1. Go to this website and select a webpage template you like
  2. Once you open up the template, you would be given the option to make edits to the template's code. With some basic coding skills in HTML, you can add some customisation to the template site.
  3. After you are done with the editing, copy all of the code and paste it into the text box on tomeko. This website converts code in HTML into the language required for Arduino programming (Cpp).
  4. Once you have converted the code, copy it and paste it into your Arduino program as shown in the code in the next step.

There is a video in Hindi for your reference: link


It is important to also know how the HTML webpage detects when the 'activate' button is pressed and sends that information over to the NodeMCU to activate the servo motor.

Each webpage has its main page. In the case of this project, it's www.opensesame.local/. However, you can also code it to have subpages which can be indicated by the text after the backslash. E.g. www.opensesame.local/activate. The only way the URI can change is if the webpage receives some kind of input from the client. e.g. a button being pressed.

The NodeMCU knows whenever a client visits a webpage or any of the subpages it is hosting. When the user presses the activate button, the web URI handle changes to '/activate' instead of just '/'. The NodeMCU detects someone is trying to visit its www.opensesame.local/activate webpage. Hence, it would know that the button has been pressed, and execute the necessary code to activate the servo.

The concept sort of works like an if statement. If the webpage URI ends with /activate, the NodeMCU runs a specific function. Therefore, you could have many different subpages, each triggering a different function.


The press to activate image is the HTML website coded for this project. In laptop view and for viewing on the phone.

Board Manager and Setting Up Libraries

Screenshot 2022-09-02 at 5.18.47 PM.png
tzapu.png

Before uploading the code, you have to make sure that your Arduino IDE can interface with your NodeMCU board. Additionally, there are a couple of libraries that you will have to install to ensure the code can run.

This website will explain to you how to set up the board configuration for the NodeMCU

You will have to have to go to Tools --> Library Manager and install the following library

  1. WiFi Manager by tzapu

Overall Code

Screenshot 2022-09-02 at 5.06.42 PM.png
Screenshot 2022-09-02 at 5.06.58 PM.png
Screenshot 2022-09-02 at 5.07.11 PM.png
Screenshot 2022-09-02 at 5.07.30 PM.png

All the pieces of the code, that have been explained previously come together in the .ino file below. There are comments explaining what each line of the code does. If you have any questions, please feel to comment them down below.

I was having some trouble attaching the code onto Instructables so here is a link to a google drive folder with the Arduino code: https://drive.google.com/drive/folders/1iaJKmTd9DY90uriRRBPOtlrkFWPOxq3L?usp=sharing

Setting Up Physical Attachment and Testing

WhatsApp Image 2022-09-02 at 22.26.18.jpeg
WhatsApp Image 2022-09-02 at 22.26.28.jpeg
WhatsApp Image 2022-09-02 at 22.26.06.jpeg

Using some nuts and bolts, tightened the attachment around the garage door control unit.

Tested if the servo motor could press the button and activate the garage door through remote control.