Ravin Jangra
Published © GPL3+

Home automation system with temperature Monitoring

Control your home appliances using web app or google assistant with this home automation system.

IntermediateShowcase (no instructions)5 hours45
Home automation system with temperature Monitoring

Things used in this project

Hardware components

Bolt WiFi Module
Bolt IoT Bolt WiFi Module
×1
Temperature Sensor
Temperature Sensor
×1
Jumper wires (generic)
Jumper wires (generic)
×1
Grove - 4-Channel SPDT Relay
Seeed Grove - 4-Channel SPDT Relay
×1
Solid State Relay, 25 A
Solid State Relay, 25 A
×1

Software apps and online services

Bolt Cloud
Bolt IoT Bolt Cloud
google cloud platform
SmartThings service
IFTTT SmartThings service

Hand tools and fabrication machines

Multitool, Screwdriver
Multitool, Screwdriver

Story

Read more

Schematics

Circuit Diagram

This will help you to make hardware connections

Code

Home Automation system with Temperature monitoring

HTML
This is the HTML page that we use as user interface
<!DOCTYPE html>
<html>
<head>
<title>Home Automation</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script>
var debug = 0
var temp=0;
var api_key = "";
var d_name = "";
var base_url = "https://cloud.boltiot.com/remote/";
var b1=0,b2=0,b3=0,b4=0,b5=0,b6=0;
function digitalWrite(pin,val){
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200 && debug == 1) {
alert(xmlhttp.responseText);
var obj = JSON.parse(xmlhttp.responseText);
if(obj.success=="1"){
alert(obj.value);
}
}
};
xmlhttp.open("GET", base_url+api_key+"/digitalWrite?pin="+pin+"&state="+val+"&deviceName="+d_name,true);
xmlhttp.send();
}
function digitalRead(pin,element_id) {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
alert(xmlhttp.responseText);
var obj = JSON.parse(xmlhttp.responseText);
if(obj.success=="1"){
document.getElementById(element_id).innerHTML = "Pin Val = "+obj.value;
}
else{
document.getElementById(element_id).innerHTML = "Error = "+xmlhttp.responseText;
}
}
};
xmlhttp.open("GET",base_url+api_key+"/digitalRead?pin="+pin+"&deviceName="+d_name,true);
xmlhttp.send();
}
function analogRead(pin,element_id) {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var obj = JSON.parse(xmlhttp.responseText);
if(obj.success=="1"){
temp = obj.value;
temp= temp/10.24;
temp=Math.round(temp);
document.getElementById(element_id).innerHTML=temp+ "ºC";
if(temp<20)
document.getElementById(element_id).style.color= "#6699ff";
else if(temp>28)
document.getElementById(element_id).style.color= "#ff1a1a";
else
document.getElementById(element_id).style.color="#33cc33";
}
else{
document.getElementById(element_id).innerHTML = "Module Offline";
document.getElementById(element_id).style.color="red";
}
}
};
xmlhttp.open("GET",base_url+api_key+"/analogRead?pin="+pin+"&deviceName="+d_name,true);
xmlhttp.send();
}
function setKey(key,dev_name){
api_key = key;
d_name = dev_name;
}
function setDebug(bool){
if (bool == true){
debug = 1;
}
else{
debug = 0;
}
}
setKey('API KEY','Device id');//Enter here your API key and device ID
function fan(){
if(b1==0){
digitalWrite(0,'HIGH');
document.getElementById("btn1").style.background= "green";
b1=1;
}
else{
digitalWrite(0,'LOW');
document.getElementById("btn1").style.background= "#ff1a1a";
b1=0;
}
}
function LED1(){
if(b2==0){
digitalWrite(1,'HIGH');
document.getElementById("btn2").style.background= "green";
b2=1;
if(b3==1)
document.getElementById("btn6").style.background= "green";
}
else{
digitalWrite(1,'LOW');
document.getElementById("btn2").style.background= "#ff1a1a";
document.getElementById("btn6").style.background= "#ff1a1a";
b6=0;
b2=0;
}
}
function LED2(){
if(b3==0){
digitalWrite(2,'HIGH');
document.getElementById("btn3").style.background= "green";
b3=1;
if(b2==1)
document.getElementById("btn6").style.background= "green";
}
else{
digitalWrite(2,'LOW');
document.getElementById("btn3").style.background= "#ff1a1a";
document.getElementById("btn6").style.background= "#ff1a1a";
b6=0;
b3=0;
}
}
function Load4(){
if(b4==0){
digitalWrite(3,'HIGH');
document.getElementById("btn4").style.background= "green";
b4=1;
}
else{
digitalWrite(3,'LOW');
document.getElementById("btn4").style.background= "#ff1a1a";
b4=0;
}
}
function Load5(){
if(b5==0){
digitalWrite(4,'HIGH');
document.getElementById("btn5").style.background= "green";
b5=1;
}
else{
digitalWrite(4,'LOW');
document.getElementById("btn5").style.background= "#ff1a1a";
b5=0;
}
}
function Lights(){
if(b6==0){
digitalWrite(1,'HIGH');
digitalWrite(2,'HIGH');
document.getElementById("btn2").style.background= "green";
document.getElementById("btn3").style.background= "green";
document.getElementById("btn6").style.background= "green";
b6=1;
b2=1;
b3=1;
}
else{
digitalWrite(1,'LOW');
digitalWrite(2,'LOW');
document.getElementById("btn2").style.background= "#ff1a1a";
document.getElementById("btn3").style.background= "#ff1a1a";
document.getElementById("btn6").style.background= "#ff1a1a";
b6=0;
b2=0;
b3=0;
}
}
</script>
<style>
#btn1,#btn2,#btn3,#btn4,#btn5,#btn6{
color:white;
}
</style>
</head>
<body onload="analogRead('A0','temp1');" style="background-color:lightgray;">
<div class="w3-panel w3-cyan w3-center w3-xlarge">
<p style="color:white;">Home Automation System</p>
</div>
<h1 id="temp1" style="text-align:center;"></h1>
<div class="w3-container w3-center">
<a onclick="analogRead('A0','temp1');" class="w3-btn w3-cyan w3-round-xlarge">Refresh</a>
</div>
<br>
<div class="w3-container">
<button id="btn1" onclick="fan();" class="w3-btn w3-round-xlarge w3-card-4" style="background-color:#ff1a1a;width:48%;font-size:35px;">Fan</button>
<button id="btn2" onclick="LED1();" class="w3-btn w3-round-xlarge w3-right w3-card-4" style="background-color:#ff1a1a;width:48%;font-size:35px;">LED1</button>
<br>
<br>
</div>
<div class="w3-container">
<button id="btn3" onclick="LED2();" class="w3-card-4 w3-btn w3-round-xlarge" style="background-color:#ff1a1a;width:48%;font-size:35px;">LED2</button>
<button id="btn4" onclick="Load4();" class="w3-btn w3-round-xlarge w3-right w3-card-4" style="background-color:#ff1a1a;width:48%;font-size:35px;">Load4</button>
<br>
<br>
</div>
<div class="w3-container">
<button id="btn5" onclick="Load5();" class="w3-card-4 w3-btn w3-round-xlarge" style="background-color:#ff1a1a;width:48%;font-size:35px;">Load5</button>
<button id="btn6" onclick="Lights();" class="w3-btn w3-round-xlarge w3-right w3-card-4" style="background-color:#ff1a1a;width:48%;font-size:35px;">Lights</button>
<br>
<br>
</div>
<div class="w3-panel w3-cyan w3-center" style="margin-top:25px;">
<p style="color:white;">Build by Ravinder</p>
</div>
</body>
</html>

Credits

Ravin Jangra

Ravin Jangra

1 project • 0 followers

Comments

Add projectSign up / Login