Gaurav Harchwani
Published © 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,084
DIY Home of the Future (Smart Home using Raspberry Pi)

Things used in this project

Hardware components

Android device
Android device
×1
Raspberry Pi 1 Model B+
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.
×1
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.
×3
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.
×3
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.
×1
Jumper wires (generic)
Jumper wires (generic)
These are needed for connecting Raspberry Pi and the circuit we will make to drive the Relays.
×20
Dotted PCB
Dotted PCB will be required to solder the components to make the circuit
×1
Berg Strips
These are needed to make Actual connection with Rpi and our Circuit. Female to Female Wires are used to making the connection.
×12
Adapter For Raspberry Pi
×1
2 Metre MultiStranded Wire
For Connection of Sockets to A.C Mains. [Obviously we cannot drive a 240V appliance using only Rpi]
×1
Resistor 1k ohm
Resistor 1k ohm
×3
BC 547 NPN Transistor
×3
1N4007 – High Voltage, High Current Rated Diode
1N4007 – High Voltage, High Current Rated Diode
×3
9V battery (generic)
9V battery (generic)
×1

Software apps and online services

Weaved Rpi Cloud Service For IOT

Hand tools and fabrication machines

Soldering iron (generic)
Soldering iron (generic)
Router for WLAN Internet

Story

Read more

Schematics

Circuit Diagram

This is the circuit for automating 1 electrical appliance.You can duplicate the circruit thrice to automate three appliances.Instead of Bulb you can use a Socket and then whatever appliance you plug into that socket,you can control it over the internet

Code

Smart Home Code Running on the Webiopi Raspberry Pi Server

HTML
<!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>

CSS File for UI

Plain text
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

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

Comments

Related channels and tags
  • Android
  • Home Automation
  • Internet of Things
  • Linux
  • Microsoft
  • Raspberry Pi