This post assumes you followed the last post, already have your temperature sensor working and you are able to display sensor readings on the command line. It also assumes you have set up your Raspberry Pi 3 to function as a web server with the correct permissions.
Get Sensors number
We are going to need the sensors number, follow the steps below if you do not have it to hand and write down the number for your sensor.
Log on to the Raspberry Pi 3 and initialise the sensor with the two commands below
sudo modprobe w1-gpio
sudo modprobe w1-therm
Navigate to the devices directory
cd /sys/bus/w1/devices
List the directorys contents - we will see our Temperature sensor show up as a directory something like 28-0115905491ff, write this number down, we are going to need it further on.
Create webpage that reads the sensor
Navigate to the directory for our web server /var/www/html
cd /var/www/html
In this folder we are going to make a new folder named php
mkdir php
Navigate in to your new folder
cd php
In our new folder we need to create a new php file, call the file temp.php
sudo nano temp.php
Code to copy
<?php //Where the sensor file is $file = '/sys/bus/w1/devices/CHANGETHISBIT/w1_slave'; //Read the sensor file line by line $lines = file($file); //Get the temp from second line $temp = explode('=', $lines[1]); //Format the output $temp = number_format($temp[1] / 1000, 1, '.', ''); echo $temp; ?>
Save
Press Ctrl+X followed by y and enter to save the file.
Test
To test your new "temperature sensor reading mini web page", navigate to your Raspberry Pi 3`s address in a browser with the files location added on the end.
For me the address I need to visit is 192.168.0.11/php/temp.php
We will be returned a plain text sensor reading, if you are returned 0.0 or 85.0 your sensor is not working. Check your wiring is right and test the sensor using the temperature.py script we made in the last post that is in your home/pi directory. Once it is working return to the webpage and you will see your reading displayed similar to below.
We do not want to have to navigate to a different page for each sensor reading we take, and we want something that looks a bit better than this to look at as well!
If you already have your own web page set up then the code below is what you need to put where you want the sensor reading to show in your web page.
<?php include 'php/temp.php'; ?>
This will display exactly what you would see if you navigated to the temp.php file within a browser where ever you place this code within your own web page.
If you have been following along with this blog your index.php file will currently look something like below
<!DOCTYPE html> <html> <head> <title>Hello World!</title> </head> <body> <h1>Hello World!</h1> </body> </html>
If we want to display the temperature sensor reading on this simple index page then we can change the code on this page to include the sensor reading. The code with the sensor included is below.
<!DOCTYPE html> <html> <head> <title>Hello World!</title> </head> <body> <h1>Hello World!</h1> The temperature sensor reading is: <?php include 'php/temp.php';?>°C </body> </html>
That code would display the web page below when the Raspberry Pi 3`s address is visited in a browser
Bit better than before but we can improve on this.
CSS
Head back to your Raspberry Pi 3 command line and return to the web sites directory
cd /var/www/html
This time we are going to make a new folder called css
mkdir css
Navigate in to your new folder
cd css
In here we are going to create a new file named aquaponic.css
sudo nano aquaponic.css
body,html { margin:0; font:1em "Open Sans", sans-serif; } /* unvisited link */ a:link { color: #088A08; } /* visited link */ a:visited { color: #088A08; } .toppanel { width:100%; background-color:#088A08; height:65px; color:#fff; position: fixed; } .uptime { text-align:center; } .content { padding:65px; } .footer { bottom:0; width:100%; height: 65px; background:#088A08; color:#fff; position: fixed; padding:0; }
Images
Navigate back up one directory
cd ..
Now back in your web pages main directory we will create a directory called images
mkdir images
The images we are going to use here are the ones I use for my own personal interface, you can use anything that you like.
As an example, one image that will be required for the code that we are going to use is shown below.
 |
| This image is used as the logo |
To download this image within our new images directory in the terminal type
wget http://54.171.176.203/images/pilogo.jpg
(The host for these images is not my Raspberry Pi 3)
Follow this with these image downloads below, these are all the images that the code below will require.
wget http://54.171.176.203/images/refresh.png
These images will eventually become links pointing to the social networking sites linked with aquaponicpi, you can obviously change them to your own links.
wget http://54.171.176.203/images/instagram.png
wget http://54.171.176.203/images/twitter.png
wget http://54.171.176.203/images/facebook.png
Now if we list the images directory contents we will see all four images
ls
New index.php with extra features
The code to replace the current index.php file is below, remove the index file and create a new one.
Go back to the main directory for the website.
cd ..
Remove the index.php file
sudo rm index.php
Create a new index.php
sudo nano index.php
Paste the code below in to the new file
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>AquaponicPi</title> <link rel="stylesheet" href="css/aquaponic.css"> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="description" content="AquaponicPi" /> <meta name="viewport" content="width=device-width,initial-scale=0.8, user-scalable=no" /> <meta name="theme-color" content="#088A08" /> </head> <body> <?php $uptime_array = explode(" ", exec("cat /proc/uptime")); $seconds = round($uptime_array[0], 0); $minutes = $seconds / 60; $hours = $minutes / 60; $days = floor($hours / 24); $hours = floor($hours - ($days * 24)); $minutes = floor($minutes - ($days * 24 * 60) - ($hours * 60)); $seconds = floor($seconds - ($days * 24 * 60 * 60) - ($hours * 60 * 60) - ($minutes * 60)); $uptime_array = array($days, $hours, $minutes, $seconds); $uptime = ($days . " days " . $hours . " hours " . $minutes . " minutes" ); ?> <div class="toppanel"><br> <div class="uptime"><strong>aquaponicPi is up and has been running <?php echo $uptime; ?></strong></div> </div> <div> <div class="content"> <center> <img src="images/pilogo.jpg" alt="Raspberry PI Logo"> <p> <strong><u>Sensor Readings</u></strong> <br> <br> <br> <span><strong> Water Temperature <?php include 'php/temp.php'; ?> </span>°c</strong> </p> <?php $cputemp = (exec("cat /sys/class/thermal/thermal_zone0/temp ")); $cputemp2 = $cputemp / 1000; $cputempfinal = substr($cputemp2, 0, 4); ?> <p><span><strong>CPU Temperature <?php echo $cputempfinal; ?> </span>°c</strong> </p> <?php // Get the kernel info, and grab the cool stuff $output1 = null; $output2 = null; // First output of /proc/stat exec("cat /proc/stat", $output1); // Set the time interval sleep(1); // Second output of /proc/stat exec("cat /proc/stat", $output2); // CPU total load $cpu_load_total = 0; for ( $i=0 ; $i < 1 ; $i++ ) { // Get informations from first row of /proc/stat $cpu_stat_1 = explode(" ", $output1[ $i + 1 ]); $cpu_stat_2 = explode(" ", $output2[ $i + 1 ]); // Init arrays $info1 = array( "user" => $cpu_stat_1[1], "nice" => $cpu_stat_1[2], "system" => $cpu_stat_1[3], "idle" => $cpu_stat_1[4] ); $info2 = array( "user" => $cpu_stat_2[1], "nice" => $cpu_stat_2[2], "system" => $cpu_stat_2[3], "idle" => $cpu_stat_2[4] ); // Information that should involve the calculation $idlesum = $info2["idle"]-$info1["idle"] + $info2["system"]-$info1["system"]; // Sum the outputvalues $sum1 = array_sum( $info1 ); $sum2 = array_sum( $info2 ); // Calculate the cpu-load $load = ( 1 - ( $idlesum / ( $sum2 - $sum1 ) ) ) *100; $cpu_load_total += $load; } // Round it to 2 decimals $cpuload = (round( $cpu_load_total, 2 )); ?> <p><span><strong> CPU Usage <?php echo $cpuload . "%"; ?> </p> </span> </div> <div class="footer"><center><br> <a href="http://www.instagram.com/aquaponicpi"><img src="images/instagram.png" alt="instagram.com/aquaponicpi" width="30" height="30" border="0" align="center"></a> <a href="http://www.twitter.com/aquaponicpi"><img src="images/twitter.png" alt="twitter.com/aquaponicpi" width="30" height="30" border="0" align="center"></a> <a href="https://www.facebook.com/aquaponicpi"><img src="images/facebook.png" alt="facebook.com/aquaponicpi" width="30" height="30" border="0" align="center"></a> <a href="index.php"><img src="images/refresh.png" alt="Refresh Page" width="30" height="30" border="0" align="center"></a> </p></center> </div> </body> </html>
Using this code we now have something that looks like this below when visited using a mobile, and basically the same thing in a web browser on desktop computer. The desktop version can be improved using bootstrap and may be explored here at a later date, for now the focus is mobile.
This is the basis for our interface and the rest of our sensor readings. The intention is to keep this as clean and simple as possible. Many improvements can be made to this, it is up to you what you want your interface to look like.
Code Breakdown
The aquaponic.css file we made is styling the web page. The image below shows which parts in the code of aquaponic.css relate to which parts of the website. The first part of the code with no red line coming away from it is is the set-up of the font type, size and link colours.
The index.php file the main page of the web site is slightly more complicated.
The first part the "head" contains the title that will be show in browser
Below the title is the code linking to the aquaponic.css file followed by some meta tags which tell a visiting browser some details and how to display the page. These meta tags control the scale the page is displayed at, disallow the user to zoom on a mobile device and colour an Android devices task bar.
The next part is the code required to get a reading of how long the Raspberry Pi 3 has been on and to display it within the top panel.
The next part is an image and the temperature sensor reading in the content section.
Next is code that displays the Raspberry Pi 3`s processor temperature.
This is followed by the long and complicated looking part of the code that gets and displays the Raspberry Pi 3`s current processor usage.
The final part of the index.php file is the footer of the webpage, which has all the images and links to the relevant social network sites and a refresh button.
This web page being used is just a basic page there is the potential to create anything you like limited only by your own imagination and coding skills.
In future posts we will start collecting the sensor reading, add an option to view the readings as a graph and add more sensors! The more sensors the better! Webcams and on and off switches for powered devices will also be added.
Thanks for reading this, all work for you? any question? leave a comment below.
Show support for aquaponicpi and like the Facebook page!
Click on the icon below to be taken to aquaponicpi on Facebook!
No comments:
Post a Comment