In this DIY IoT Project, we will make IoT Based Smart Web Controlled Notice Board using NodeMCU ESP8266 & LCD Display. We have created a local web server for demonstration, and for displaying message we have used LCD.
Overview
Notice Board is the most common and primary apparatus in any institution, organization, or public utility places like a bus station, railways stations, and parks. But sticking various notices day today is a difficult process. This project deals with a wireless notice board. The main objective of the project is to develop a wireless notice board that displays messages sent from the webserver. When a user sends a message, it is received by a wifi Module through Local Web Server.
A display connected to a server system should continuously listen for the incoming messages from the user, process it, and display it on the LCD screen. The message displayed should be updated every time the user sends new information. Only authenticated people should update the data to be displayed on the LCD.
Bill of Materials
Following are the comoponents required for making IoT Based Web Controlled Smart Notice Board. All the components can be easily purchased from Amazon. The component purchase link is given below.
| S.N. | Components | Quantity | Purchase Links |
|---|---|---|---|
| 1 | NodeMCU ESP8266 Board | 1 | Amazon | AliExpress |
| 2 | 16x2 LCD Display | 1 | Amazon | AliExpress |
| 3 | Connecting Wires | 10 | Amazon | AliExpress |
| 4 | Potentiometer 10K | 1 | Amazon | AliExpress |
| 5 | Breadboard | 1 | Amazon | AliExpress |
Circuit Diagram for Web Controlled Notice Board with ESP8266
To make IoT Based Web Controlled Smart Notice Board, we need to interface 16X2 LCD Display with Nodemcu ESP8266 Board. So the circuit diagram with detailed connection is given below.
We need following connections between NodeMCU & LCD Display.
RS pin of LCD — D0 pin of NodeMCU
EN pin of LCD — D1 pin of NodeMCU
D4 pin of LCD — D2 pin of NodeMCU
D5 pin of LCD — D3 pin of NodeMCU
D6 pin of LCD — D4 pin of NodeMCU
D7 pin of LCD — D5 pin of NodeMCU
Similarly connect pin 1, 5, 16 of LCD to GND & Pin 2, 15 to 5V VCC. A 10K Potentiometer should be used at pin 3 of LCD to adjust the contrast. The whole device operates at 5V.
Source Code/Program
Copy the code given below and upload it to Nodemcu board. But before that you need install two libraries to make the local web server. Download these libraries from the given links:
1. ESPAsyncTCP Library: Download
2. ESPAsycnWebServer Library: Download
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 |
#include <ESP8266WiFi.h> #include <ESPAsyncTCP.h> #include <ESPAsyncWebServer.h> #include <LiquidCrystal.h> LiquidCrystal lcd(D0, D1, D2, D3, D4, D5); AsyncWebServer server(80); const char* ssid = "Sri Krishna 2."; //wifi ssid const char* password = "subbu@123"; //wifi password const char* PARAM_INPUT_1 = "input1"; const char index_html[] PROGMEM = R"rawliteral( <!DOCTYPE HTML><html><head> <title>Smart Notice Board</title> <meta name="viewport" content="width=device-width, initial-scale=5"> <p> <font size="9" face="sans-serif"> <marquee> Smart Notice Board </marquee> </font> </p> </head><body><center> <form action="/get"> Enter Text to Display: <input type="text" name="input1"> <input type="submit" value="Send"> </form><br> </center></body></html>)rawliteral"; void notFound(AsyncWebServerRequest *request) { request->send(404, "text/plain", "Not found"); } void setup() { Serial.begin(115200); lcd.begin(16, 2); lcd.clear(); lcd.setCursor(0, 0); lcd.print("Smart Notice Board"); WiFi.mode(WIFI_STA); WiFi.begin(ssid, password); if (WiFi.waitForConnectResult() != WL_CONNECTED) { Serial.println("WiFi Failed!"); return; } Serial.println(); Serial.print("IP Address: "); Serial.println(WiFi.localIP()); server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){ request->send_P(200, "text/html", index_html); }); server.on("/get", HTTP_GET, [] (AsyncWebServerRequest *request) { String message; String inputParam; if (request->hasParam(PARAM_INPUT_1)) { message = request->getParam(PARAM_INPUT_1)->value(); inputParam = PARAM_INPUT_1; lcd.clear(); lcd.setCursor(0,0); lcd.print(message); } else { message = "No message sent"; inputParam = "none"; } Serial.println(message); request->send(200, "text/html", index_html); }); server.onNotFound(notFound); server.begin(); } void loop() { for (int positionCounter = 0; positionCounter < 29; positionCounter++) { lcd.scrollDisplayLeft(); delay(500); } } |
Code Explanation
|
1 2 3 4 |
#include <ESP8266WiFi.h> #include <ESPAsyncTCP.h> #include <ESPAsyncWebServer.h> #include <LiquidCrystal.h> |
First we need to include all the libraries. ESP8266Wifi library is used for TCP/IP Communication. ESPAsyncTCP & ESPAsycnWebServer are used for creating local webserver. LiquidCrystal is used for interfacing LCD Display with NodeMCU.
|
1 2 3 |
LiquidCrystal lcd(D0, D1, D2, D3, D4, D5); const char* ssid = “*********”; const char* password = “************”; |
Then we declare all the required pins for LCD and make an instance to use in the program. SSID & Password is used for connecting to wifi network.
|
1 2 3 4 5 6 7 8 |
const char index_html[] PROGMEM = R”rawliteral( <!DOCTYPE HTML><html><head> <title>Smart Notice Board</title> …………………………………………………………………………. …………………………………………………………………………. <input type=”submit” value=”Send”> </form><br> </center></body></html>)rawliteral”; |
These lines are used to make a simple HTML page to enter. Here you can enter the message and hit the send button to send the message on LCD. The send message is stored in the memory of NodeMCU.
|
1 2 3 |
server.on(“/”, HTTP_GET, [](AsyncWebServerRequest *request){ request->send_P(200, “text/html”, html_page); }); |
This command is used to send the webpage with input fields to the client computer.
|
1 2 3 4 5 6 7 8 |
<ESP_IP>/get?input1=<Message> server.on(“/get”, HTTP_GET, [] (AsyncWebServerRequest *request) { .. if (request->hasParam(input1)) { message = request->getParam(input1)->value(); inputParam = input1; lcd.print(message); |
This command will send a GET request & and print the received message on the LCD Screen.
|
1 2 3 4 5 |
void loop() { for (int positionCounter = 0; positionCounter < 29; positionCounter++) { lcd.scrollDisplayLeft(); delay(500); } |
Under the loop function we print the scrolling value of the text without a break.
IoT Web Controlled Smart Notice Board with ESP8266 Demonstration
Once the code is uploaded to NodeMCU board, you can open the Serial Monitor. The serial monitor will display the local ip address after getting connected to wifi.
Copy the ip address and paste it in your webs browser and hit enter. It will display the webpage.
Now you can enter the message here and send it by clicking on the send button.
Once the message is sent, the serial monitor will display whatever is sent.
You can now see the same message on LCD Screen.
Check some more Iot Based Project here: DIY IoT Projects
Video Tutorial: IoT Based Notice Board using ESP8266
A better version of this project is a Smart Notice Board with Dot Matrix LED Display which has more features and wider range for display.
1 Comment
Hi, thanks for this post. everything works well but display is not coming on what may I be missing? can you please help, also for now we check the ip via Serial Monitor what if I am going to new location and we have other Wifi connection and now I want to set the Wifi credentials without writing code as well can we set our own predefined ip address to ESP8266? Looking forward. Thanks 🙂