Introduction

In this tutorial, we are going to build a Smart Display Board based on IoT and Google Firebase by using NodeMCU8266 (or you can even use NodeMCU32) and LCD.

Generally, in shops, hotels, offices, railway stations, notice/ display boards are used. They are frequently used to display messages, notices, or for advertisement purposes. However, it is a tedious task to change it every day. So, here is the Smart Display Board. This project aims to develop a wireless display board that displays messages sent via an Android Application (Smart Display Board App). Whenever a user sends a message, it publishes in the Firebase Realtime Database. Whenever the message changes in the firebase, the NodeMCU fetches it from the firebase and displays it on the LCD screen.

Also, there are two modes in which you can send your message to LCD. The first one is Text Mode, and the second is Speech mode. In-text mode, you have to type your message manually in the app and hit the send button. Whereas in speech mode, you can vocalize your message, it will automatically send it to the firebase.

Components Required

• NodeMCU ESP8266
• Potentiometer
• 16*2 LCD
• MicroUSB Cable
• Jumper Wires (Male-to-Female and Male-to-Male)

NodeMCU ESP8266 Pin Diagram

This is the pin diagram of NodeMCU ESP8266. For more details about NodeMCU, you can click here.

16*2 LCD(Liquid Crystal Display) Pin Diagram

Circuit Diagram

The circuit of our project is quite simple. Only, you need to join the NodeMCU8266 with the potentiometer and the 16*2 Liquid Crystal Display. Furthermore, you can refer to the circuit diagram given below. In this project, we are using interfacing 16*2 LCD with Node MCU without I2C.

The adjoining table shows the pins of Liquid Crystal Display which are to be connected to the Node MCU.

Architecture

In the architecture, the software part contains the Google Firebase and Smart Display Board App, whereas LCD and NodeMCU are the hardware components.

MIT App Inventor

MIT App Inventor is a powerful tool to make android applications without prior knowledge of Java or Android Studio. Above all, it is an open-source tool to make efficient apps. Moreover, it requires only a logical block programming approach rather than actual programming. The below images are a few snippets from the app. You can download the code and app here.

You can click here to learn more about MIT App Inventor.

Google Firebase

Google Firebase provides two types of databases, the Real-time database, and the Cloud Firestore. The Firebase real-time Database lets you store and sync data between your users in realtime. The Cloud Firestore is a more intuitive data model than Realtime Database. And, Cloud Firestore is richer, faster, and more scalable than the Realtime Database.

In this project, we are using the real-time database. Since there is real-time communication between the software and the hardware.

ESP8266 Code

This is the NodeMCU Code for our project

// Created by Anupama Koley


#include "FirebaseESP8266.h"
#include<LiquidCrystal.h>
#include<ESP8266WiFi.h>

const int rs = 0, en = 2, d4 = 14, d5 = 12, d6 = 13, d7 = 15;
LiquidCrystal lcd(rs, en, d4, d5, d6, d7);

#define firebase_host "https://pythonmydb.firebaseio.com/"
#define auth_key "your_authentication_key"

#define wifi_ssid "your_wifi_name"      
#define wifi_pass "your-wifi_password"

FirebaseData fbdata;

void setup() 
{
  Serial.begin(115200);

  WiFi.begin(wifi_ssid, wifi_pass);
  Serial.print("Connecting to ");
  Serial.print(wifi_ssid);

  while(WiFi.status() != WL_CONNECTED)
  {
    Serial.print(".");
    delay(300);
  }

  Serial.println();
  Serial.print("Connected to ");
  Serial.println(wifi_ssid);
  Serial.print("IP Address is: ");
  Serial.println(WiFi.localIP());

  Firebase.begin(firebase_host, auth_key); 
  Firebase.reconnectWiFi(true);
  
  lcd.begin(16, 2);
  lcd.clear();
  lcd.setCursor(0,0);
  lcd.print("Smart Display");
}

void loop() 
{
  if (Firebase.getString(fbdata, "DisplayBoard/Message"))
  {
   String message = fbdata.stringData();
   Serial.println(message);
   lcd.clear();
   lcd.setCursor(0,0);
   lcd.print(message);
   
   for (int positionCounter = 0; positionCounter < 13; positionCounter++) 
   {
    lcd.scrollDisplayLeft();                // scroll one position left:
    delay(350);                             // wait a bit:
   }

  // scroll 29 positions (string length + display length) to the right
  // to move it offscreen right:

  for (int positionCounter = 0; positionCounter < 29; positionCounter++) 
  {
    lcd.scrollDisplayRight();               // scroll one position right:
    delay(100);                             // wait a bit:
  }

  // scroll 16 positions (display length + string length) to the left
  // to move it back to center:

  for (int positionCounter = 0; positionCounter < 16; positionCounter++) 
  {
    lcd.scrollDisplayLeft();                // scroll one position left:
    delay(350);                             // wait a bit:
  }

 }
 else
 {
    Serial.print("Error in getInt, ");
    Serial.println(fbdata.errorReason());
  }  
}

Code Explanation

#include "FirebaseESP8266.h"
#include<LiquidCrystal.h>
#include<ESP8266WiFi.h>

Firstly, we need to include the most suitable libraries as per our requirements. Here, the FirebaseESP8266.h library provides the most reliable operations for read, store, update, delete, backup, and restore the Firebase Realtime Database data. To use this library, you first need to install it. For installation, go to Tools -> Manage Libraries then, search FirebaseESP866 library. LiquidCrystal.h allows us to control the LCD, and this is a pre-installed library. Also, for enabling the wifi connection, we are using ESP8266WiFi.

const int rs = 0, en = 2, d4 = 14, d5 = 12, d6 = 13, d7 = 15;
LiquidCrystal lcd(rs, en, d4, d5, d6, d7);

Then, do the initialization of the library with the LCD interfacing pin with NodeMCU.

#define firebase_host "https://pythonmydb.firebaseio.com/"
#define auth_key "your_authentication_key"

#define wifi_ssid "your_wifi_name"      
#define wifi_pass "your-wifi_password"

FirebaseData fbdata;

By using #define macros, we are declaring all credentials. The macros are constant values that we use throughout the code. An object of FirebaseESP8266 is also created here for sending and receiving data.

Inside setup() function

void setup() 
{
  Serial.begin(115200);

  WiFi.begin(wifi_ssid, wifi_pass);
  Serial.print("Connecting to ");
  Serial.print(wifi_ssid);

  while(WiFi.status() != WL_CONNECTED)
  {
    Serial.print(".");
    delay(300);
  }

Inside the setup function, baud rate is fixed to 115200 baud and the WiFi Connection is established.

  Serial.println();
  Serial.print("Connected to ");
  Serial.println(wifi_ssid);
  Serial.print("IP Address is: ");
  Serial.println(WiFi.localIP());

When we run this code a message will be displayed on the serial monitor about the information of WiFi network with NodeMCU’s Local IP.

  Firebase.begin(firebase_host, auth_key); 
  Firebase.reconnectWiFi(true);

Then the conncetion of NodeMCU’s is being established with Google Firebase by passing Firebase Credentials as argument in function Firebase.begin(). The Firebase.reconnectWiFi() is enabled so that it will auto reconnect to the WiFi when connection is lost.

  lcd.begin(16, 2);
  lcd.clear();
  lcd.setCursor(0,0);
  lcd.print("Smart Display");

Here, the LCD’s number of columns and rows are being setup. lcd.clear function clears the LCD screen if there is any previous character or text is present. Then, the setCursor function sets the cursor to 0,0 position of LCD. A message “Smart Display” then prints on the LCD screen.

Inside loop() function

if (Firebase.getString(fbdata, "DisplayBoard/Message"))
  {
   String message = fbdata.stringData();
   Serial.println(message);
   lcd.clear();
   lcd.setCursor(0,0);
   lcd.print(message);
   

With the help of, Firebase.getString() function, we are fetching the data from firebase. Inside this function, we are passing the object of FirebaseESP8266 and the path of the firebase as an argument. Afterward, we are storing the data, fetched from the firebase with the stringData() function, inside the message variable of type String .and prints on the LCD Screen.

   for (int positionCounter = 0; positionCounter < 13; positionCounter++) 
   {
    lcd.scrollDisplayLeft();                
    delay(350);                            
   }

  for (int positionCounter = 0; positionCounter < 29; positionCounter++) 
  {
    lcd.scrollDisplayRight();               
    delay(100);                             
  }

  for (int positionCounter = 0; positionCounter < 16; positionCounter++) 
  {
    lcd.scrollDisplayLeft();                 
    delay(350);                             
  }

We are using these for loops to shift the whole string of the LCD Display. The scrollDisplayLeft() and scrollDisplayRight() functions are moving a single character left and right respectively. When we run this code, then the characters will appear as they are moving continuously, because we are using a small delay inside every for loop.

else
 {
    Serial.print("Error in getInt, ");
    Serial.println(fbdata.errorReason());
  }  

Lastly, an error message with error reason prints on the serial monitor, in case the establishment of a connection between NodeMCU and GoogleFirebase fails.

Demo Video

Here is my demo video of my project.

I hope you all enjoyed a lot throughout this project ;). If you have any doubt, feel free to comment.