Turn ON/OFF a LED from a HTML web site Using Firebase

7 min readDec 21, 2020

Hello, I’m Senura Jayadeva. In this article, I will show you how to turn on /off a LED blub from a HTML web app using Firebase.

Requirement

Nodemcu ESP8266
Firebase Account
Red LED ( Any )
Jumper wires
Breadboard ( optional )
100 ohm resistor ( optional )

First of all, we have to set up the circuit mentioned above. Here I'm using a red LED and connected Cathode( — ) with the Ground Pin ( GND ) and Anode( + ) with the D2 pin. You can use breadboard and jumper wires to setup all those things. It makes it easier.

The next thing we have to do is write an Arduino program to control the LED and connect it with the firebase realtime database. To continue, first, we have to install the drivers and packages ( ex: Firebase Library) which we need, and create a real-time database on Firebase. Let's go...

Here I’m not going to explain how to install drivers & setup Arduino IDE for the Nodemcu ESP8266 board. If you have a problem with that please refer following links

Use esp8266 module in board manager > click “ESP-12E module”.

Install Arduino JSON Library

Make sure to install ArduinoJson version 5.13.5

Install Firebase Library

After installing the ArduinoJson library, we have to install the Firebase library to connect with the firebase.

you can download it from this link — https://github.com/FirebaseExtended/firebase-arduino/releases

choose v0.3 Bi-directional streaming support

After downloading it go to Arduino IDE and go to Add .Zip library option and import the downloaded zip file

There is a small bug in this library. First, you have to fix this.

Go to C:\Users\Your PC Name\Documents\Arduino\libraries\firebase-arduino-0.3\src

Here you will see a file called FirebaseHttpClient.h

Open that file and change the fingerprint code as mentioned below.

03 D6 42 23 03 D1 0C 06 73 F7 E2 BD 29 47 13 C3 22 71 37 1B

Make sure to fix this otherwise you will not connect with the firebase

Check the latest fingerprint code before continue
I used the website https://www.grc.com/fingerprints.htm
and type in “test.firebaseio.com” and got the new fingerprint.

Create a Real-Time Database on Firebase

Now go to firebase and create a project.

First, click on Go to console

2. Click on Add Project

3. Give a name for the project

After creating a project you will see an interface like below.

The next thing we have to do is create a real-time database. For that, you can see an option called Realtime Database on the left sidebar. Click on that and then click on the Create Database.

Then we have to do some modifications. Go to Rules and change the read and write as true. Finally, publish those changes.

All the things with the firebase real-time database were done. Now go to Arduino IDE and copy the following code.

#include <ESP8266WiFi.h>
#include <SoftwareSerial.h>
#include <FirebaseArduino.h>
#include <ArduinoJson.h>
#include <ESP8266HTTPClient.h>
 
// Set these to run example.
#define FIREBASE_HOST "ledonoff-a3d11-default-rtdb.firebaseio.com"
#define FIREBASE_AUTH "7O2d5R7LJNON6d41GoXcq0DiKy4uLtfYU6a8oa5L"
#define WIFI_SSID "TP-LINK_04F390"
#define WIFI_PASSWORD "123JAYADEVA"
 
const int LED_1_SLOT = D2;void setup()
{
  
  // Debug console
  Serial.begin(9600);
  
  pinMode(LED_1_SLOT, OUTPUT);  // connect to wifi.
  WiFi.begin(WIFI_SSID, WIFI_PASSWORD);
  Serial.print("connecting");
  while (WiFi.status() != WL_CONNECTED)
  {
    Serial.print(".");
    delay(500);
  }
  Serial.println();
  Serial.print("connected: ");
  Serial.println(WiFi.localIP());
  
  Firebase.begin(FIREBASE_HOST, FIREBASE_AUTH);if(Firebase.failed())
  {
    Serial.print(Firebase.error());
  }
  else{
  
    Serial.print("Firebase Connected");
 
  }}
 
void loop()
{
 
    String path = "/LED/";
    FirebaseObject object = Firebase.get(path);    String LED_1 = object.getString("status");
    Serial.println("LED_1 : " + LED_1); 
 
    if(LED_1 == "ON"){
      
      digitalWrite(LED_1_SLOT, HIGH);
      
    }
    else if (LED_1 == "OFF"){      digitalWrite(LED_1_SLOT, LOW);    }
     
   
}

Here you can see a word called FIREBASE_HOST. You can find it from the Realtime Database.

Make sure to set the FIREBASE_HOST without “ https:// ” part.
Instead of https://nodemcu-XXXXX-XXXXX-rtdb.firebaseio.com use nodemcu-XXXXX-XXXXX-rtdb.firebaseio.com

Next, you have to set the FIREBASE_AUTH. To get that, go to project settings and click on the Service accounts. Then go to Database secrets. There you can see the key for FIREBASE_AUTH.

After setting FIREBASE_HOST and FIREBASE_AUTH we have to set the WIFI_SSID and WIFI_PASSWORD.

WIFI_SSID means your wifi name.

Here you can see first I declared a variable called LED_1_SLOT and initialized it to the D2 pin of the Nodemcu board.

Then I initialized the digital pin LED_1_SLOT as an output using the pinMode function.

Within the void loop function, you can see I declared a variable called LED_1 and it gets the value ( “ON” / “ OFF” )from the path LED/status in the firebase realtime database.

Then I used a conditional operator and if the value of LED_1 is ON, it sets the digital pin D2 ON which means the LED will turn on. If the value of LED_1 is OFF, it sets the digital pin D2 OFF.

Creating the HTML Web Page

After that, I’m going to create a very simple HTML page with two buttons to turn on and off the LED. First, create an index.html file and open it with Notepad, Visual Code Studio, or Sublime Text. Then copy the following HTML code into your file.

<!DOCTYPE html><html lang=”en”><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><h1> LED TURN ON / OFF APP </h1><button onclick="ledOn()">ON</button><button onclick="ledOff()">OFF</button></body></html>

This is a very simple HTML website with two buttons. Here I used a javascript event called onclick. When you click the ON button it will call the ledOn javascript function. ledOn and ledOff functions will be implemented later in this article.

Add Firebase to your project (index.html)

We already created a Firebase project. Now we have to register our app with Firebase.

Go to firebase project settings.

2. Bottom of the page you can see a Web icon ( </> ). Click the Web icon (plat_web) to launch the setup workflow.

3. Enter your app’s nickname.
(This nickname is an internal, convenience identifier and is only visible to you in the Firebase console.)

4. Next page they will give some scripts. Copy those scripts and paste them after the body tag.

5. Import following Firebase JavaScript SDK above Line 10

Make sure to import the following codes otherwise our web application wouldn’t work correctly.

<! — The core Firebase JS SDK is always required and must be listed first →<script src="https://www.gstatic.com/firebasejs/8.2.0/firebase-app.js"></script><script src="https://www.gstatic.com/firebasejs/8.2.0/firebase-auth.js"></script><script src="https://www.gstatic.com/firebasejs/8.2.0/firebase-database.js"></script>

Add ledOn and ledOff javascript functions in the script tag as mentioned below.

When you click the ON and OFF buttons it will call the ledOn and ledOff javascript functions and change the value of status in real-time database ON and OFF respectively.

function ledOn(){  firebase.database().ref("LED").set({  status:"ON"  })}function ledOff(){  firebase.database().ref("LED").set({  status:"OFF"  })}

Testing

Connect your NodeMCU ESP8266 with your personal computer via standard USB cable and upload code in it. While uploading the code into NodeMCU, the device continuously blinks.