Web Controlled IoT Notice Board using Raspberry Pi
In this Tutorial, we learn how to create Web Controlled IoT Notice Board using Raspberry Pi. We are using Internet to wirelessly send the message from Web Browser to the LCD which is connected to Raspberry Pi. As message is sent through the web browser.
We create a server over internet. At the Raspberry Pi, we have used 16×2 LCD to display message and Flask for receiving the message over network. Whenever Raspberry receives any wireless message from Web browser, it displays on the LCD.
Components Required:
- Raspberry Pi 3 (any model)
- 16×2 LCD
- Bread Board
- Connecting wires
- 10K Pot
Web Controlled IoT Notice Board using Raspberry Pi
Creating Webpage
We have created a web server for send notice message to RPi using Flask. Webpage is given below. This very simple and written in HTML.
<h1> Notice Board IoTbyHVM.OOO</h1>
<p> Bits and Bytes of IoT</p>
</div>
<div data-role="content">
<form method="post" action="change">
<label for="slider-1">Notice Message:</label>
<input type="text" name="lcd" id="lcd" />
<br />
<input type="submit" value="Submit" />
</form>
{% if value %}
<p>Notice Submitted Successfully: {{ value }}</p>
{% endif %}
</div>
Just copy above code and paste into any text editor and save with .html extension. Then put this HTML file in the same folder where you have put your Python Code file (given at the end) for this Web Controlled Notice Board.
Now you can just run the Python code in Raspberry Pi, open the IP_address_of_your_Pi:8080 in web Browser (like 192.168.1.14:8080) and input the message and click submit, as soon as you submit the message, you will get the message on LCD connected to Raspberry Pi.
The webpage is created using HTML language, which contain a form having a textbox and submit button, with Heading (h1 tag) Web Control Notice Board. The form has “change” is the action that will be performed in code using post method, when we click on Submit button. The slider is block with label “Notice Message”.
After it, we can add an optional line to show the text which we have sent to the Raspberry Pi via the server.
{% if value %}
<p>Notice Submitted Successfully: {{ value }}</p>
{% endif %}
It checks the value in the text box and if there is some value in the textbox then it prints the text on webpage itself, so that user can also see the submitted message. Here ‘value’ is “input text or notice message” that we will type in slider box or text box.
Circuit connection
Connections for this Wireless Message Board are very easy; we only need to connect LCD with the Raspberry Pi board by using some connectors over bread board. The user may use zero PCB for connections. RS, RW and EN pins of LCD are directly connected to pin 18, GND and 23. And data pins of LCD D4, D5, D6, D7 are directly connected to Raspberry Pi’s GPIO 24, 16, 20, 21. A 10K pot is used to control the brightness of LCD.
Programming Explanation and Flask:
Before program Raspberry Pi, user needs to install a flask support package into the Raspberry Pi by using given commands:
$ pip install Flask
The programming part of this project plays a very important role to perform all the operations. First of all, we include required libraries for Flask, initialize variables and define pins for LCD.
from flask import Flask from flask import render_template, request import RPi.GPIO as gpio import os, time app = Flask(__name__) RS =18 EN =23 D4 =24 D5 =16 D6 =20 D7 =21 ... ...... ..... ......
For LCD, def lcd_init() function is used to initialize LCD in four bit mode, def lcdcmd(ch) function is used for sending command to LCD, def lcddata(ch) function is used for sending data to LCD and def lcdstring(Str) function is used to send data string to LCD. You can check all these functions in Code given afterwards.
Below part of the Program is used to send the message from the web browser to Raspberry Pi using Flask. You can learn more about the programming using Flask here.
@app.route("/")
def index():
return render_template('web.html')
@app.route("/change", methods=['POST'])
def change():
if request.method
== 'POST':
# Getting the value from the webpage
data1 = request.form['lcd']
lcdcmd(0x01)
lcdprint(data1)
return render_template('web.html', value=data1)
if __name__ == "__main__":
app.debug = True
app.run('192.168.1.10', port=8080,debug=True)
So this is how we can send the message from our computer or smartphone to the Raspberry Pi LCD and can make a Web Controlled IoT Notice Board using Raspberry Pi. Check the Full Python Code and Demonstration Video below.
Code
from flask import Flask
from flask import render_template, request
import RPi.GPIO as gpio
import os, time
app = Flask(__name__)
RS =18
EN =23
D4 =24
D5 =16
D6 =20
D7 =21
HIGH=1
LOW=0
OUTPUT=1
INPUT=0
gpio.setwarnings(False)
gpio.setmode(gpio.BCM)
gpio.setup(RS, gpio.OUT)
gpio.setup(EN, gpio.OUT)
gpio.setup(D4, gpio.OUT)
gpio.setup(D5, gpio.OUT)
gpio.setup(D6, gpio.OUT)
gpio.setup(D7, gpio.OUT)
def begin():
lcdcmd(0x33)
lcdcmd(0x32)
lcdcmd(0x06)
lcdcmd(0x0C)
lcdcmd(0x28)
lcdcmd(0x01)
time.sleep(0.0005)
def lcdcmd(ch):
gpio.output(RS, 0)
gpio.output(D4, 0)
gpio.output(D5, 0)
gpio.output(D6, 0)
gpio.output(D7, 0)
if ch&0x10==0x10:
gpio.output(D4, 1)
if ch&0x20==0x20:
gpio.output(D5, 1)
if ch&0x40==0x40:
gpio.output(D6, 1)
if ch&0x80==0x80:
gpio.output(D7, 1)
gpio.output(EN, 1)
time.sleep(0.0005)
gpio.output(EN, 0)
# Low bits
gpio.output(D4, 0)
gpio.output(D5, 0)
gpio.output(D6, 0)
gpio.output(D7, 0)
if ch&0x01==0x01:
gpio.output(D4, 1)
if ch&0x02==0x02:
gpio.output(D5, 1)
if ch&0x04==0x04:
gpio.output(D6, 1)
if ch&0x08==0x08:
gpio.output(D7, 1)
gpio.output(EN, 1)
time.sleep(0.0005)
gpio.output(EN, 0)
def lcdwrite(ch):
gpio.output(RS, 1)
gpio.output(D4, 0)
gpio.output(D5, 0)
gpio.output(D6, 0)
gpio.output(D7, 0)
if ch&0x10==0x10:
gpio.output(D4, 1)
if ch&0x20==0x20:
gpio.output(D5, 1)
if ch&0x40==0x40:
gpio.output(D6, 1)
if ch&0x80==0x80:
gpio.output(D7, 1)
gpio.output(EN, 1)
time.sleep(0.0005)
gpio.output(EN, 0)
# Low bits
gpio.output(D4, 0)
gpio.output(D5, 0)
gpio.output(D6, 0)
gpio.output(D7, 0)
if ch&0x01==0x01:
gpio.output(D4, 1)
if ch&0x02==0x02:
gpio.output(D5, 1)
if ch&0x04==0x04:
gpio.output(D6, 1)
if ch&0x08==0x08:
gpio.output(D7, 1)
gpio.output(EN, 1)
time.sleep(0.0005)
gpio.output(EN, 0)
def lcdprint(Str):
l=0;
l=len(Str)
for i in range(l):
lcdwrite(ord(Str[i]))
begin()
lcdprint("Circuit Digest")
lcdcmd(0xc0)
lcdprint("Welcomes You")
time.sleep(5)
@app.route("/")
def index():
return render_template('web.html')
@app.route("/change", methods=['POST'])
def change():
if request.method == 'POST':
# Getting the value from the webpage
data1 = request.form['lcd']
lcdcmd(0x01)
lcdprint(data1)
return render_template('web.html', value=data1)
if __name__ == "__main__":
app.debug = True
app.run('192.168.1.10', port=8080,debug=True)
Thanks for reading. If you like this post “Enviro+ for Raspberry Pi” probably you might like my next ones, so please support me by subscribing my blog.
You may like also:
- ATOMIC Pi – A high power alternative to Raspberry Pi
- TinyPICO Development Board (Mini ESP32)
- Espressif Announces the Release of ESP32-S2 Secure Wi-Fi MCU
- ATTO Board – The World’s Smallest Arduino Compatible Board
Explore Some more Raspberry Pi Tutorials :
- Raspberry Pi – Introduction | Overview | Setup and Management | Tutorials
- How to Install Mosquitto Broker on Raspberry Pi
- Setting up SPI on Raspberry Pi
- Getting Started with The Sense HAT – Raspberry Pi
- Raspberry Pi GPIO Basics
- Controlling LED with Raspberry Pi PART-2
- How To Setup Static IP Address on Raspberry Pi
- Controlling LED with Raspberry Pi
- Interfacing a light Sensor (LDR) with Raspberry Pi
- Remote control your Raspberry Pi from your PC with VNC!
- ROCK Pi 4 : Overview | Installation
- Best OS for Raspberry Pi
- How to setup Bluetooth on a Raspberry Pi 3
- Simple Raspberry Pi Home Security System
- Raspbian – OS For Raspberry Pi
- Setting up a Raspberry Pi headless
Pingback: Web Controlled IoT Notice Board using Raspberry Pi — IoTbyHVM – Bits & Bytes of IoT – hashstacks