IoT Remote Gate Opener

I am helping my brother to make a remote Gate opener. He have a remote that can open the gate, but being in this day and age, we would like to connect everything to the Internet. So the concept can be seen in the following picture:

The brain consist of ESP8266, which is connected to relay that will trigger the remote. The original idea is to have some sort of sensor (magnetic) that can be detected using Hall Effect sensor to detect when the gate had been closed or opened. Then to be able to access this remotely from anywhere in the world, we can connect this to Node-RED and subsequently able to access this via Apple Homekit.

To start off as the proof of concept and to reduce the complexity, we revert back to the basics, by just connecting the ESP8266 to a relay that will activate the remote to open and close the Gate door. To start off follow the following steps:

Step 1. Gather the components

We will need ESP8266, Relay module, and PCB to connect the two together. You can connect the two module together by soldering it on to the PCB. Connect the 3.3 Volt pin from ESP8266 to VCC of the Relay module, and GND from the ESP8266 to the GND of the Relay module, and finally for this example, I am connecting the pin D5 to the IN pin of the Relay module. Note that the Relay IN is active LOW, this means that the relay will be activated (Green LED on Relay board turn ON) when IN is LOW. The fully assembled board looks like the following picture.

Step 2. Modify the Remote

In the image above, we solder 2 wire across the button that can activate the Gate. This two wire will be connected by the Relay module later on.

Step 3. Uploading the Arduino Code

The idea is to use ESP8266 as a webserver. This will allow us to show a setting page to connect the ESP8266 to the WiFi without having to hardcode the WiFi access points in the code. The website will also serve as the command to turn the Relay ON and OFF. Thanks for the handy work of Martyn Currey on how to create JavaScipt and AJAX within the ESP8266, and also some AJAX code to update ESP8266 from Circuits4you, I was able to massage the AJAX code into my previous Arduino code for the Temperature sensor. The final result looks like the following picture.

Once the ESP8266 is connected to the WiFi, only then the “Switch” button will appear in the webserver interface. When the ESP8266 is not connected to the WiFi, by default it will revert to be an Access Point, this will allow you to connect and configure the WiFi settings.

When you click on the “Switch” it will turn the relay ON, and thus simulating the press of the remote button to open the gate. Because we don’t have any feedback from the Gate in this solution, we will need to turn the “Switch” off manually, otherwise the button on the gate remote will be pressed and the battery will drain.

In the next section we will dive in a bit deeper into the Arduino code. If you are not interested in the code, you can skip this section and just upload the code straight away into the ESP8266. When the ESP8266 load up the first time you will be able to see the AP as coded in “settings.h” file. The AP name is “ESP-Gate” with the default password defined in the file. You can change this to make sure it is much more secure.

define CLOCK_NAME "ESP-Gate"
define WIFI_AP_NAME CLOCK_NAME
define WIFI_APPSK "DefaultAPPassword"  // default AP password

Step 4. Arduino Code deep dive

The Arduino code comes in 5 files, and here are the list of the files:

1. ESP8266GateSwitchV2: This is the main file where the magic happens. Pay special attention to the following sections (void setup(), void handleLED(), void handleRoot(), void loop()).
2. Clock.h: This file is the header file for the CLOCK
3. mainPage.h: This file is the webserver html file which get served when you connect to the ESP8266 web server
4. ntp: This file consist of the function to connect to the ntp server to synchronise the clock
5. settings.h: This file contain most of the settings for the project.

Void setup() section

#include <ESP8266WebServer.h>
// Create an instance of the server
 // specify the port to listen on as an argument
ESP8266WebServer server(80);

void setup() {
   DebugStart();
   timer = 200;
   pinMode(LED_BUILTIN, OUTPUT);
   pinMode(LEDpin, OUTPUT);    // setup LED
   digitalWrite(LEDpin, HIGH);  // Relay Active LOW
   setupWiFi(1);               // SetupAP mode
   setupTime();
   server.on("/", handleRoot);
   server.on("/form", handleForm);
   server.on("/setLED", handleLED);
   server.begin();
 }

This section will initialise the LEDpin, which is the trigger connected to the IN input of the Relay module. We will need to set the LEDpin to HIGH, because the relay module is active LOW. Initially setupWiFi will be called to try to connect to the WiFi, if this fail the program will defaulted to AP mode. SetupTime() will attempt to setup the time by synchonising the time with ntp server. The next couple of line define what function will be called when the webserver is being invoked. For example, handleRoot function will be called when the root of the webserver is being accessed. The handleForm function will be callled when the “/form” is being called, this is called when we setting up the Wifi parameter as well a a few other settings of the clock, daylight savings, etc. Finally “/setLED” will be called when we “button” is being pressed to activate the Relay.

void handleLED() section

void handleLED() {
  String ledState = "OFF";
  String t_state = server.arg("LEDstate"); //Refer  xhttp.open("GET", "setLED?LEDstate="+led, true);
  Serial.println(t_state);
  if(t_state == "1"){
   digitalWrite(LEDpin,LOW); //LED ON
   ledState = "ON"; //Feedback parameter
  }
  else {
   digitalWrite(LEDpin,HIGH); //LED OFF
   ledState = "OFF"; //Feedback parameter  
  }
   server.send(200, "text/plane", ledState); //Send web page
 }

If we look at the handleLED function above, this is where the Relay is being activated. When the AJAX code post the LEDstate parameters back to the webserver, this section will check whether the LEDState parameter value is equal to 1 or 0, if it is 1, the code will write LEDpin output to LOW, and activate the Relay, and if the parameter value is 0, the code will write LEDpin output to HIGH, and deactivated the Relay. The ledState feedback parameter is just to make our life easier when debugging the code, this will show on the website whether the ledState is ON or OFF via AJAX return code.

void loop() section

void loop() {
     server.handleClient();
     if (timeStatus() != timeNotSet){
       time_t t = now();
     }
 }

This section of the code is very simple, all it needs to do is to make sure the server.handleClient() function is called, to ensure that ESP8266 will allow client to connect to it’s webserver.

void handleRoot() section

void handleRoot() {
   DebugLn("handleRoot");
 String s = MAIN_page;
   if (WiFi.status() == WL_CONNECTED) {
     s +=  ButtonControl;
     // check led state
     boolean pinStatus = digitalRead(LEDpin);
     if (pinStatus==LOW) {
       s.replace("@@NA@@", "ON");
       s.replace("@@SW@@", "ON");
       s.replace("@@Checked@@", "checked");
     }
     else {
       s.replace("@@NA@@", "OFF");
       s.replace("@@SW@@", "OFF");
       s.replace("@@Checked@@", "");
     }
   }
   s+= WifiSetting;
   time_t t = now();
   s.replace("@@SSID@@", settings.ssid);
   s.replace("@@PSK@@", settings.psk);
   s.replace("@@TZ@@", String(settings.timezone));
   s.replace("@@USDST@@", settings.usdst?"checked":"");
   s.replace("@@HOUR@@", String(adjustedHour(t)));
   s.replace("@@MIN@@", String(minute(t)));
   s.replace("@@NTPSRV@@", settings.timeserver);
   s.replace("@@NTPINT@@", String(settings.interval));
   s.replace("@@SYNCSTATUS@@", timeStatus() == timeSet ? "OK" : "Overdue");
   s.replace("@@CLOCKNAME@@", settings.name);
   s.replace("@@UPDATERESPONSE@@", httpUpdateResponse);
   httpUpdateResponse = "";
   server.send(200, "text/html", s);
 }

This section deals on how the root of the webserver should look like. It will first get the MAIN_page content from mainPage.h file, and then substitute the checkbox status based on the reading of the LEDpin. If the currently the LEDpin is LOW, that means the switch is active, so it will need to show the “switch” as on. And if the reading is HIGH, this means that the switch is not active, so it will need to show the “switch” as off. Then the rest of the code is to display the WiFi SSID, time zone, ntp server, update interval, device name.

I hope you like this post, and please subscribe if you haven’t done so. And let me know if you have any questions.