Baby Monitor Temperature Monitoring

Hi

This this the last in a series of posts on adding functionality to a  baby monitor. Todays posts involves getting the raspberry pi to measure ambient temperature and and display it on a web page.

I must have ready every post in existence on how to set this up but all the posts in the world wont help you with bad soldering which is what appears to be my problem in the end so I will document the solder free method that I used an worked first time when I tried it.

The post that helped me the most once I had the sensor working was this blog and the info below is mostly based on that blog (so thank you to fetchitnowuk). However, i suggest you use his post or mine as they do things slightly differently.

Firstly, go and get a keyes dsb8120 sensor off ebay (the seller was fluxworskshop and they were  was great) with prompt delivery

http://www.ebay.co.uk/itm/Keyes-DS18B20-Temperature-Sensor-KY-050-20cm-1-wire-Arduino-Pi-Flux-Workshop-/112030623151?hash=item1a158ba5af:g:eUoAAOSwzJ5XZA6~

Its a tiny bit more expensive that basic temp sensor BUT no soldering is required as it already had the resister built in. Its a simple matter to connect it to the PI and we will discuss that in a moment

I will show you how to wire it now but dont attach the wires just yet.

keyesdsb1820

The wires are clearly marked and what worked for me was

VCC – goes to pin 1 of the Pi (3.3V)

GND goes to pin 6 (GND)

DAT goes to pin 7 (GPIO4)

bplusgpio

So in order to connect I recommend doing the following:

(1) edit /boot/config.txt (sudo nan /boot/config.txt)

and add the following line

dtoverlay=w1-gpio

control-X to save.

Then  shutdown the raspberry pi and remove power (sudo init 0)

Finally, connect the wires as described above.

Now apply power to the raspberry pi while keeping your finger on the temp sensor. If it gets very hot very quickly, then you have not connected the cables correctly so quickly unplug and retry.

As old carpenters say: Measure twice – cut once

Assuming you have connected the wires correctly and the raspberry pi has booted, then login and run the following command:

ls -l /sys/bus/w1/devices

sysbus

if the /sys/bus/w1 folder does not exist then you have not added the line in /boot/config.txt correctly so recheck.

You are looking for a file/devices that starts 28-XXXXXXXXXXX. If it starts with 00 (as it did when i was using solderered dsb1820 then you have soldered incorrectly or use the wrong type of resister). Make a note of this filename as you need it in a moment.

Next we create the script that will actually get the temperature. Create a script called /var/www/html/temp/php by typing

sudo nano /var/www/html/temp.php and add the following text in it.

<?php
//File to read
$file = '/sys/bus/w1/devices/28-0416356813ff/w1_slave';

//Read the file line by line
$lines = file($file);

//Get the temp from second line
$temp = explode('=', $lines[1]);

//Setup some nice formatting (i.e. 21,3)
$temp = number_format($temp[1] / 1000, 1, '.', '');
echo "$temp\n";

Note that you must change the $file= line to match whatever is the name of your device (ie the name you made a note of above).

Save the file with control-X. The execute the script as follows:

sudo php /var/www/html/temp.php

temp2

You can see the result is the current temperature. Once you get this far, edit the file one more time to comment out the echo $temp (you dont need it now as the web page will show the temp later) so that the line looks as follows:

// echo "$temp\n";

(sudo nano /var/www/html/temp.php)

Now change the ownership of the file as follows:

sudo chown www-data:www-data /var/www/html/temp.php

Next create a file called /var/www/html/therm3.php and add the following text

 <?php

include 'temp.php';
?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
 <link rel="stylesheet" type="text/css" href="css/style3.css">
 <TITLE>Temperature Page</TITLE>
<meta http-equiv="refresh" content="5">





window.onload = function setBackground() {
var temp = document.getElementById('temperature').innerHTML;
 temp = temp -15
 var hue = 216-(temp * 20);
 if (hue 
 </HEAD>

 <BODY>
<h1 style="text-align: center;">Temperature Page</h1>


<p>
<p>
<a href="./index.php?run=true">Go Home</a><br>

°c
</div> </div>

Save the file with control-X and change the ownership as follows:

sudo chown www-data:www-data /var/www/html/therm3.php

Finally create styles3.css in /var/www/html/css subfolder (which should already exist from the earlier posts). Its a lot of css but you get a lot from it as you will see below

h1
{
color: white;
}

body
{
background-size:cover;
/* background: -webkit-radial-gradient(circle, #CCCCCC, #2F2727); */
/* background: -webkit-radial-gradient(circle, #1a82f7, #2F2727); */
color: white;
padding:50px;
margin:0px;
width:100%;
height:50%;
}
div
{
display:block;
}


.button {
 border-top: 1px solid #96d1f8;
 background: #65a9d7;
 background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
 background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
 background: -moz-linear-gradient(top, #3e779d, #65a9d7);
 background: -ms-linear-gradient(top, #3e779d, #65a9d7);
 background: -o-linear-gradient(top, #3e779d, #65a9d7);
 padding: 5px 10px;
 -webkit-border-radius: 8px;
 -moz-border-radius: 8px;
 border-radius: 8px;
 -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
 -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
 box-shadow: rgba(0,0,0,1) 0 1px 0;
 text-shadow: rgba(0,0,0,.4) 0 1px 0;
 color: white;
 font-size: 14px;
 font-family: Georgia, serif;
 text-decoration: none;
 vertical-align: middle;
 }
 border-top-color: #28597a;
 background: #28597a;
 color: #ccc;
 }
.button:active {
 border-top-color: #1b435e;
 background: #1b435e;
 }
#content
{
height: auto:
width: auto:
}

h1
{
color: white;
}

body
{
background-size:cover;
/* background: -webkit-radial-gradient(circle, #FFFFFF, #BBBBBB); */
color: white;
padding:50px;
margin:0px;
width:100%;
height:50%;
}
div
{
display:block;
}


.button {
 border-top: 1px solid #96d1f8;
 background: #65a9d7;
 background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
 background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
 background: -moz-linear-gradient(top, #3e779d, #65a9d7);
 background: -ms-linear-gradient(top, #3e779d, #65a9d7);
 background: -o-linear-gradient(top, #3e779d, #65a9d7);
 padding: 5px 10px;
 -webkit-border-radius: 8px;
 -moz-border-radius: 8px;
 border-radius: 8px;
 -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
 -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
 box-shadow: rgba(0,0,0,1) 0 1px 0;
 text-shadow: rgba(0,0,0,.4) 0 1px 0;
 color: white;
 font-size: 14px;
 font-family: Georgia, serif;
 text-decoration: none;
 vertical-align: middle;
 }
.button:hover {
 border-top-color: #28597a;
 background: #28597a;
 color: #ccc;
 }
.button:active {
 border-top-color: #1b435e;
 background: #1b435e;
 }
#content
{
height: auto:
width: auto:
}

@import url(http://fonts.googleapis.com/css?family=Dosis:200,400,500,600);
html, body { height: 100%; }

.container { width: 300px; margin: 10px auto 0; }
.de .den, .de .dene, .de .denem, .de .deneme { position: absolute; left: 50%; top: 50%; }
.de {
 position: relative;
 width: 240px;
 height: 240px;
 border-radius: 100%;
 box-shadow: 0 0 10px rgba(0, 0, 0, .1);
 background-color: transparent;
}
.den {
 position: relative;
 width: 210px;
 height: 210px;
 margin: -105px 0 0 -105px;
 border-radius: 100%;
 box-shadow: inset 0 2px 10px rgba(0, 0, 0, .5), 0 2px 20px rgba(255, 255, 255, 1);
 background: #df3341;
 background: -moz-linear-gradient(left, #df3341 0%, #d4f355 50%, #61c0ec 100%);
 background: -webkit-gradient(linear, left top, right top, color-stop(0%,#df3341), color-stop(50%,#d4f355), color-stop(100%,#61c0ec));
 background: -webkit-linear-gradient(left, #df3341 0%,#d4f355 50%,#61c0ec 100%);
 background: linear-gradient(to right, #df3341 0%,#d4f355 50%,#61c0ec 100%);
 position:relative;
}
.dene {
 width: 180px;
 height: 180px;
 margin: -90px 0 0 -90px;
 border-radius: 100%;
 box-shadow: inset 0 2px 2px rgba(255, 255, 255, .4), 0 3px 13px rgba(0, 0, 0, .85);
 background: #f2f6f5;
 background: -moz-linear-gradient(top, #f2f6f5 0%, #cbd5d6 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f2f6f5), color-stop(100%, #cbd5d6));
 background: -webkit-linear-gradient(top, #f2f6f5 0%, #cbd5d6 100%);
 background: -o-linear-gradient(top, #f2f6f5 0%, #cbd5d6 100%);
}
.denem {
 width: 160px;
 height: 160px;
 margin: -80px 0 0 -80px;
 border-radius: 100%;
 background: #cbd5d6;
 background: -moz-linear-gradient(top, #cbd5d6 0%, #f2f6f5 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #cbd5d6), color-stop(100%, #f2f6f5));
 background: -webkit-linear-gradient(top, #cbd5d6 0%, #f2f6f5 100%);
}

.deneme {
 padding: 3px 10px 0 10px;
 width: 120px;
 height: 137px;
 display: inline-block;
 margin: -60px 0 0 -60px;
 color: #555;color: #555;
 text-shadow: 1px 1px 1px white;
 font-family: 'Dosis';
 font-size: 50px;
 font-weight: 400;
 text-align: center;
}
.deneme span { position: absolute; left: 1px; top: 27px; font-size: 58px; font-weight: 200; }
.deneme strong { position: absolute; right: 10px; top: 15px; font-size: 28px; }

After you have saved your file, you should be able to point your browser to therm.php and see the following:

temphtml

Note the the background colour of the page changes depending on the temp (thanks Marc)

Please note that pages refresh automatically every 5 seconds ( I recommend changing this to a minimum of 60 seconds by changing the following line in therm3.php

meta http-equiv="refresh" content="60">

 

and finally a little video if it in action

 

 

WhereThingsAreBorn 🙂

 

 

 

 

 

 

 

 

 

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s