Published August 14, 2015 © GPL3+

DIY Home of the Future (Smart Home using Raspberry Pi)

We will make 3 Smart Switches in this Project to which whatever appliances when connected will become smart and can be controlled over web.

BeginnerShowcase (no instructions)3,089

DIY Home of the Future (Smart Home using Raspberry Pi)

Things used in this project

Hardware components

Android device

Raspberry Pi 1 Model B+

I have used Raspberry Pi B+ but Any Raspberry Pi Model will do as long as it supports the Library WebioPi(). So Be sure to check the compatibility. As far as the knowledge I have All the Raspberry Pi Models can be used to follow this Tutorial except Raspberry Pi 2. It does not supports Webiopi. So Sorry for inconvenience Rpi 2 Users. But Once you get the Rpi 2 Support you can follow the project without any hesitation.

Solid State Relay [3-32v,10Amps]

I am using an SSR but any relay will do. If your Relay has input of greater than 3V then you have to use a Transistor circuit to Drive it. We will Discuss the same method of driving the relays using transistors since this is the method which makes sense electronically and can be followed by everyone irrespective of the input voltage rating of the relay you buy.

Wall Socket

The Component to which you plug an electrical appliance. I am using the sockets which are used generally in my country. If you are from U.S or U.K or anywhere else you can buy sockets which are used in your country. The sockets I used are 5 amp sockets, not the 15 Amp Sockets which are much bigger and thicker in size. 3 Sockets if you want 3 automated Electrical Appliances running simultaneously.

Enclosure

You will need some kind of enclosure to which sockets can be fixed to. In my case i am using a simple white colored enclosure which is commonly used in my country to fix sockets and buttons. You can see the enclosure in the project display picture itself.

Jumper wires (generic)

These are needed for connecting Raspberry Pi and the circuit we will make to drive the Relays.

Dotted PCB

Dotted PCB will be required to solder the components to make the circuit

Berg Strips

These are needed to make Actual connection with Rpi and our Circuit. Female to Female Wires are used to making the connection.

Adapter For Raspberry Pi

2 Metre MultiStranded Wire

For Connection of Sockets to A.C Mains. [Obviously we cannot drive a 240V appliance using only Rpi]

Resistor 1k ohm

BC 547 NPN Transistor

1N4007 – High Voltage, High Current Rated Diode

9V battery (generic)

Software apps and online services

Weaved Rpi Cloud Service For IOT

Hand tools and fabrication machines

Soldering iron (generic)

Router for WLAN Internet

Story

In this project we will make 3 smart sockets, to which, when an electrical appliance is connected it can be controlled from anywhere in the world through the Internet. This is a basic example of home automation which can be extended to a much bigger level.

On the software side we will use:

Html/CSS for the UI

JavaScript to turn the GPIO's On/OFF

To Make things easier we have used a library called WebIOPi by the developer Eric Ptak. For further information check out the webiopi library here: https://code.google.com/p/webiopi/.

To build this project you must first install the webIOPi library on Raspberry Pi. Check out the video to know what will the end result be like:

Code

<!Doctype html>
<html lang="en">
	
	<head>
			<meta charset = "UTF-8">
			<title>Smart Home</title> 
			<link rel="stylesheet" type="text/css" href="main.css">
			<link href="http://fonts.googleapis.com/css?family=Amatic+SC" rel="stylesheet" >
			<meta name="viewport" content="width = device-width, inital-scale=1">

	</head>

	<body>
			<script type="text/javascript" src="/webiopi.js"></script>
			<script type="text/javascript">
				
				webiopi().ready(function(){
			
					webiopi().setFunction(21,"OUT");
					webiopi().setFunction(20,"OUT");
					webiopi().setFunction(16,"OUT");
					webiopi().refreshGPIO(true);

				});

				function onFan(){
					webiopi().digitalWrite(21,1);
				}

				function offFan(){
					webiopi().digitalWrite(21,0);
				}

				function onLights(){
					webiopi().digitalWrite(20,1);				
				}
		
				function offLights(){
					webiopi().digitalWrite(20,0);
				}
	
				function onCharger(){
					webiopi().digitalWrite(16,1);
				}

				function offCharger(){
					webiopi().digitalWrite(16,0);					
				}

			</script>


			<h1 class="top-header">Welcome to your Smart home Menu</h1>

			<div id="fanButtons">
				<input id="round" type="submit" value="Fan On"  onclick="onFan()"/>
				<input id="round" type="submit" value="Fan Off" onclick="offFan()"/>
			</div>	

			<div id="lightButtons">
				<input id="round" type="submit" value="Lights On" onclick="onLights()"/>
				<input id="round" type="submit" value="Lights Off" onclick="offLights()"/>
			</div>

			<div id="chargingButtons">
				<input id="round" type="submit" value="Charging On" onclick="onCharger()"/>
				<input id="round" type="submit" value="Charging Off" onclick="offCharger()"/>
			</div>
						
	</body>

</html>

body,html {
	min-height:100%;
}

body  {
	background-image: url("smartHome.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	background-attachment: fixed;
	text-align: center;
}

/*This is for the heading font of webpage.Font is used from googleFonts*/
.top-header {
	width: 100%;
	max-width: 900px;
	font: 4em "Amatic SC" , cursive;
	color: #fff;
	text-shadow:1px 1px 0 rgba(0,0,0,.2);
	margin: 20px auto;
	text-align: center;
}

#fanButtons, #lightButtons, #chargingButtons {
	margin-bottom: 3%;
}

input#round{
	
	width:6.2em; /*same as the height*/
	height:6.2em; /*same as the width*/
	background-color:rgba(0,0,0,0.4);
	border:1px solid #fff; /*same colour as the background*/
	color:#fff;
	font-size:0.9em;
	margin-right: 3%;
	max-width: auto;
	max-height: auto;
	
		
	/*set the border-radius at half the size of the width and height*/
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	
	/*give the button a small drop shadow*/
	-webkit-box-shadow: 0 0 10px rgba(0,0,0, .75);
	-moz-box-shadow: 0 0 10px rgba(0,0,0, .75);
	box-shadow: 2px 2px 15px rgba(0,0,0, .75);
}

/***NOW STYLE THE BUTTON'S HOVER STATE***/
input#round:hover{
	
	background:transparent;
	border:1px solid #fff;
	/*reduce the size of the shadow to give a pushed effect*/
	-webkit-box-shadow: 0px 0px 5px rgba(0,0,0, .75);
	-moz-box-shadow: 0px 0px 5px rgba(0,0,0, .75);	
	box-shadow: 0px 0px 5px rgba(0,0,0, .75);
}

input#round:active{
	color: #000;
	border:5px solid #000;

}

Credits

Gaurav Harchwani

2 projects • 5 followers

Well the world has witnessed Superman, Batman, He-Man and many other man's but they haven't seen one man who is changing the world.I am that Man.I am Maker MAn

Contact