Published November 17, 2020

IoT Enabled 16x2 LCD screen

This project allows any Bolt user to control an LCD display via the internet.

BeginnerFull instructions provided1 hour2,975

Things used in this project

Hardware components

Arduino UNO

Bolt IoT Bolt WiFi Module

DFRobot I2C 16x2 Arduino LCD Display Module

Jumper wires (generic)

Breadboard (generic)

Software apps and online services

Arduino IDE

Bolt IoT Bolt Cloud

Brackets

Github Pages

Story

This project will enable us to control an LCD screen over the internet with the help of Bolt WiFi Module. So, first of all, to address the major uses, this project can be that this model can be kept at your desk so that you can set your daily reminder or goal to achieve. Also, we can print some news for all to take a glance on; therefore, news such as the game score, stock prices etc. can be printed.

Here, we have used a Bolt WiFi module to convert an ordinary 16x2 LCD to a smart IoT enabled display which you can control via the internet.

Connections:

Note: Please make sure to use an I2C enabled LCD display because this reduces the effort required to connect the LCD to half (i.e. there will be only 4 connection to do instead 16).

Connecting LCD to the Arduino

1) A5 pin of the Arduino to the SCL of the LCD display.

2) A4 pin of the Arduino to the SDA of the LCD display.

3) 5V pin of the Arduino to the Vcc of the LCD display.

4) GND pin of the Arduino the GND of the LCD display.

Connecting Bolt WiFi Module to the Arduino

1) Tx pin of Arduino to Rx of the Bolt WiFi Module

1) Rx pin of Arduino to Tx of the Bolt WiFi Module

1) GND pin of Arduino to GND of the Bolt WiFi Module

1) 5V pin of Arduino to Vcc of the Bolt WiFi Module

(Note: You can refer to the circuit diagram in the Schematics section)

Setup:

HTML Code

Here, for this project, I have created a website, and to this, I have used Github Pages (Websites get hosted directly from your GitHub repository) to host my Website.

Link for the website: https://anshpatel02.github.io/boltsmartbanner/

So, for any Bolt user can just follow the simple hardware connections and then use this website to print on their LCDs by entering the Bolt ID of their Bolt module and the API key.

I have added both the HTML code and the CSS under the coding section if you want to create your own website.

Note: For more understanding about how to use GitHub pages you can refer to this video

Arduino setup:

The function of this code is to enable the Arduino UNO to print the message which you typed on the website.

Also, I have attached the Arduino code below which you would have to upload on your Arduino UNO.

(Important Note: Please remove the Bolt WiFi module while uploading the code to the Arduino)

Working:

1) Enter the Bolt ID of your Bolt WiFi Module and your key from your Bolt Cloud.

2) Type the message which you want to print on the LCD screen and then press the Send button.

Note: Please check the API key and the Bolt ID if you don't see the message printed on the LCD screen.

The way forward:

This is just the start to the limitless possibilities which the Bolt WiFi Module creates. This project helped me to understand the basics of IoT and how to control a device through the internet. I hope to extend my knowledge in the future by interfacing with many more devices.

Code

<!DOCTYPE html>
<html>
    <head>
        <title>Lcd Display Interface</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="style.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
    </head>
    <body>
        <label>
            <input id="nightmode" type="checkbox">
            <span class="check"></span>
        </label>
        <script>
            document.getElementById("nightmode").addEventListener("change", function() {
  if (document.getElementById("nightmode").checked == false) {
    document.body.style.transition = "all 0.75s";
    document.body.style.backgroundColor = "#57afab";
    document.body.style.color="#000000";
    document.body.style.fontFamily="Apercu, Source Sans Pro, system, system-ui, -apple-system, BlinkMacSystemFont, Roboto, Helvetica, sans-serif, Arial";
    document.body.style.fontSize="30px";
  } else {
    document.body.style.transition = "all 0.75s";
    document.body.style.backgroundColor = "#122736";
    document.body.style.color="#3878a0";
    document.body.style.fontFamily="Apercu, Source Sans Pro, system, system-ui, -apple-system, BlinkMacSystemFont, Roboto, Helvetica, sans-serif, Arial";
    document.body.style.fontSize="30px";
  }
});
        </script>
        <div id="headings">Bolt IoT Smart LCD</div>
        <div>Bolt ID:<input type="Text" id="boltid" placeholder="xxxx"></div>
        <div>API key:<input type="Text" id="apikey" placeholder="xxxxxxxx-xxxx-xxxx-xxxx-xxxx"></div>
        <div>Enter the message you want to display below  <span style="font-size:30px"> &#128071;</span></div>
        <input id="command" type="text" size="40">
        <div style="margin-top: 10px;">
            <button onclick="SendCommand()" class="button">Send</button>
        </div>
        <div id="display"></div><br>
        <div id="commandstatus"></div><br>
        <div id="commandvalue"></div><br>
        <script>
            link="";
            function SendCommand(){
                var apikey=document.getElementById('apikey').value;
                var devicename=document.getElementById("boltid").value;
                var command=document.getElementById('command').value;
                link="https://cloud.boltiot.com/remote/"+apikey+"/serialWrite?data="+command+"&till=10&baud=9600&deviceName=BOLT"+devicename;
                if(apikey==""){
                    document.getElementById('commandstatus').innerHTML="Please enter an api key"
                    return;
                }
                if(devicename==""){
                    document.getElementById('commandstatus').innerHTML="Please enter a device name"
                    return;
                }
                if(command==""){
                    document.getElementById('commandstatus').innerHTML="Please enter some data"
                    return;
                }
                $.get(link,function(success,value){
                    if(value=="success"){
                        if(success['success']==1){
                            document.getElementById('commandstatus').innerHTML="The task was successful";
                        }else{
                            document.getElementById('commandstatus').innerHTML=success['value'];
                        }
                    }else{
                        document.getElementById('commandstatus').innerHTML="Please check the api key entered"
                    }
                });
            }
        </script>
    </body>
</html>

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    margin-left: 30px;
    text-align: left;
    background-color: #57afab;
    font-family: Apercu, Source Sans Pro, system, system-ui, -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
    font-size: 30px;
}
.button{
  background-color: rgb(76, 175, 80);
  cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'  width='40' height='48' viewport='0 0 100 100' style='fill:black;font-size:24px;'><text y='50%'></text></svg>") 16 0,auto;
  border: none;
  border-radius: 30px;
  margin-left: 110px;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}
input[type="text"]
{
    font-size: 20px;
    margin-bottom: 70px;
    margin-left: 20px;
    border: 2px solid red;
    border-radius: 4px;
    width: 300px;
}
input[type="checkbox"]
{
    -webkit-appearance: none;
    visibility: hidden;
    display: none;
}
.check
{
    margin-top: 60px;
    margin-bottom: 60px;
    margin-right: auto;
    position: relative;
    display: block;
    width: 53px;
    height: 25px;
    background: #092c3e;
    cursor: pointer;
    border-radius: 20px;
    overflow: hidden;
    transition: ease-in 0.75s;
}
input[type="checkbox"]:checked ~ .check
{
    background-color: #57afab;
    box-shadow:  0 0 0 0px #092c3e;
}
.check:before
{
    content: '';
    position: absolute;
    top: 3px;
    left: 2px;
    background: #fff;
    width: 19px;
    height: 19px;
    border-radius: 59%;
    transition: 0.75s;
    
}
input[type="checkbox"]:checked ~ .check:before
{
    transform: translateX(-50px);
}
.check:after
{
    content: '';
    position: absolute;
    top: 2px;
    right:  2px;
    background: #092c3e;
    width: 19px;
    height: 21px;
    border-radius: 60%;
    transition: 0.75s;
    transform: translateX(50px);
}
input[type="checkbox"]:checked ~ .check:after
{
    transform: translateX(0px);
}
#headings{
    color: aliceblue;
    font-weight: 600;
    margin-top: 50px;
    margin-bottom: 50px;
}
#commandstatus{
    color: #9b0b0b;
    margin-left: 20px;
}

#include <BoltDeviceCredentials.h>
#include <BoltIoT-Arduino-Helper.h>
#include <Wire.h>
#include <LiquidCrystal_I2C.h>


long previous_print_time=millis();
LiquidCrystal_I2C lcd(0x27, 16, 2);

void setup()
{
  Serial.begin(9600);
  lcd.init();
  lcd.backlight();
  lcd.print("Welcome");
}

void loop() {
  long current_time=millis();
  if((current_time-previous_print_time)>=1000){
    previous_print_time+=1000;
    if(Serial.available()>0){
      int start=0;
      lcd.clear();
    while(Serial.available()>0){
      char data=Serial.read();
      if(start==16){
        lcd.setCursor(0,1);
      }
      if(start==32){
        lcd.setCursor(0,0);
        start=0;
      }
      lcd.print(data);
      start++;
    }
    }
  }
}

Credits

Ansh

1 project • 0 followers

IoT Enabled 16x2 LCD screen

Things used in this project

Hardware components

Software apps and online services

Story

Connections:

Setup:

Working:

The way forward:

Schematics

Circuit Diagram

Working Model

Code

HTML Code

CSS Code

Arduino Code

GitHub Repository

Credits

Ansh

Comments

Embed the widget on your own site

IoT Enabled 16x2 LCD screen

IoT Enabled 16x2 LCD screen

Things used in this project

Hardware components

Software apps and online services

Story

Connections:

Setup:

Working:

The way forward:

Schematics

Circuit Diagram

Working Model

Code

HTML Code

CSS Code

Arduino Code

GitHub Repository

Credits

Ansh

Comments

Related channels and tags