Home Automation-Webopi

Er. Manoj S. Kavedia

www.kavediasir.yolasite.com
www.kaizenfuturetech.com
9324258878 / 8329988738
HA - Pin Layout of RPi
HA - Installation WebIOPi
WebIOPi framework which will help us handle communication from the
webpage to the raspberry pi

To update the raspberry Pi below commands and then reboot the RPi

$sudo apt-get update

$sudo apt-get upgrade
$sudo reboot

To install the webIOPi framework. Make sure you are in home directory
using

$cd ~

Use wget to get the file from their sourceforge page

$wget http://sourceforge.net/projects/webiopi/files/WebIOPi-0.7.1.tar.gz
HA - Installation WebIOPi
Extract the file and go into the directory

$tar xvzf WebIOPi-0.7.1.tar.gz

$cd WebIOPi-0.7.1/

Install a patch as this version of the WebIOPi does not work with the raspberry
pi 3.Below commands are used to install patch while still in the WebIOPi
directory, run

$wget https://raw.githubusercontent.com/doublebind/raspi/master/webiopi-
pi2bplus.patch
$patch -p1 -i webiopi-pi2bplus.patch

Run the setup installation for the WebIOPi using

$sudo ./setup.sh

Keep saying yes if asked to install any dependencies during setup installation.
When done, reboot your pi

$sudo reboot
 HA - Test Installation of WebIOPi
Run the command;

$sudo webiopi -d -c /etc/webiopi/config

Issuing the command on the pi, will take you the web browser of your computer
connected to the raspberry pi to http://raspberrypi.mshome.net:8000 or
http;//thepi’sIPaddress:8000. Enter username and password when prompted.

$Username : webiopi
$Password : raspberry
HA - Test Installation of WebIOPi
After the login, look around, and then click on the GPIO header link.
HA - Test Installation of WebIOPi
Connecting an LED to GPIO 17 for testing
HA - Circuit Diagram

Do the connection, go to the webpage and click the pin 11 button to turn
on or off the LED. The Raspberry Pi GPIO using WebIOPi can Control
LED or device or Buzzer or Relay. Stop the program with CTRL + C
HA - Building Web Application
The first thing we will do is get filezilla or anyother FTP/SCP copy software
installed on our PC
Create the folder webapp, Inside webapps create html folder in the directory

$cd ~
$mkdir webapp
$cd webapp
$mkdir html

Create a folder for scripts, CSS and images inside the html folder

$mkdir html/css
$mkdir html/img
$mkdir html/scripts

With our files created lets move to writing

the codes on our PC and from then move
to the Pi via filezilla.
HA - The Java Script Code
Javascript is a simple script to communicate with the WebIOPi service.

webiopi().ready(function() {
webiopi().setFunction(17,"out");
webiopi().setFunction(18,"out");
webiopi().setFunction(22,"out");
webiopi().setFunction(23,"out");
var content, button;
content = $("#content");
button = webiopi().createGPIOButton(17," Relay 1");
content.append(button);
button = webiopi().createGPIOButton(18,"Relay 2");
content.append(button);
button = webiopi().createGPIOButton(22,"Relay 3");
content.append(button);
button = webiopi().createGPIOButton(23,"Relay 4");
content.append(button);
});
HA - The Java Script Code
webiopi().ready(function():
This just instructs our system to create this function and run it when the webiopi is
ready.

webiopi().setFunction(23,"out");
This helps us tell the WebIOPi service to set GPIO23 as output. We Have four
buttons here, you could have more of it if you are implementing more buttons.

var content, button;

This line tells our system to create a variable named content and make the variable a
button.

content = $("#content");
The content variable is still going to be used across our html and css. So when we
refer to #content, the WebIOPi framework creates everything associated with it.
HA - The Java Script Code
button = webiopi().createGPIOButton(17,"Relay 1");
WebIOPi can create different kinds of buttons. The piece of code above helps us to
tell the WebIOPi service to create a GPIO button that controls the GPIO pin in this
case 17 labeled “Relay 1”. Same goes for the other ones.

content.append(button);
Append this code to any other code for the button created either in the html file or
elsewhere. More buttons can be created and will all have the same properties of this
button. This is especially useful when writing the CSS or Script.

After creating the JS files, we save it and then copy it using filezilla to
webapp/html/scripts

Whole download the code from the link given

https://circuitdigest.com/sites/default/files/code-files-for-IoT-web-controlled-
Home-automation-using-raspberry-pi.zip
HA - The CSS Code
The CSS Code:
The CSS helps us make our IoT Raspberry Pi home automation webpage look
pretty.

The script represent the stylesheet for the body of the web app

body {
background-color:#ffffff;
background-image:url('/img/smart.png');
background-repeat:no-repeat;
background-position:center;
background-size:cover;
font: bold 18px/25px Arial, sans-serif;
color:LightGray;
}
HA - The CSS Code

CSS for buttons

button {
display: block;
position: relative;
margin: 10px;
padding: 0 10px;
text-align: center;
text-decoration: none;
width: 130px;
height: 40px;
font: bold 18px/25px Arial, sans-serif; color: black;
text-shadow: 1px 1px 1px rgba(255,255,255, .22);
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
HA - The CSS Code
Code is for the WebIOPi service to tell it that this is an input to the WebIOPi service.
input[type="range"]
{
display: block;
width: 160px;
height: 45px;
}

To give some sort of indication when button has been pressed. So you can sort of
look at the screen and the color of the buttons let us know the current state. To do
this, the line of code below was implemented for every single button.

#gpio17.LOW {
background-color: Gray;
color: Black;
}
#gpio17.HIGH {
background-color: Red;
color: LightGray;
}
HA - The HTML Code
The html code pulls everything together, javascript and the style sheet.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="mobile-web-app-capable" content="yes">
<meta name="viewport" content = "height = device-height, width = device-
width, user-scalable = no" />
<title>Smart Home</title>
<script type="text/javascript" src="/webiopi.js"></script>
<script type="text/javascript" src="/scripts/smarthome.js"></script>
<link rel="stylesheet" type="text/css" href="/styles/smarthome.css">
<link rel="shortcut icon" sizes="196x196" href="/img/smart.png" />
</head>
HA - The HTML Code
<body>
</br>
</br>
<div id="content" align="center"></div>
</br>
</br>
</br>
<p align="center">Push button; receive bacon</p>
</br>
</br>
</body>
</html>
HA - WebIOPi Edits
To edit the configuration run the following with root permission;

$sudo nano /etc/webiopi/config

Find the http section of the config file, check under the section where you have
something like, #Use doc-root to change default HTML and resource files
location
Comment out anything under it using # then if your folder is setup like mine,
point your doc-root to the path of your project file

$doc-root = /home/pi/webapp/html
Save and exit. The port from 8000 can be changed, if another server running on
the pi using that port. If not save and quit, as we move on.

Change the password of the WebIOPi service using the command;

$sudo webiopi-passwd
It will prompt you for a new username and password. This can also be removed
HA - Running WebIOPi Services
Run the WebIOPi service using command:

$sudo /etc/init.d/webiopi start

The server status can be checked using;

$sudo /etc/init.d/webiopi status

It can be stopped from running using;

$sudo /etc/init.d/webiopi stop

To setup WebIOPi to run at boot, use;

$sudo update-rc.d webiopi defaults

If needed to reverse and stop it from running at boot, use;

$sudo update-rc.d webiopi remove

HA - Circuit Diagram

Note : to Changes is the pins or

hardwarew as needed
 Enjoy
Home Automation
WEBIOPi