Computers and the Internet

Family Clock

When I first watched the Harry Potter movies I fount the Weasly Family clock fasinating. It told where everyone in the family was all the time. A while back I decided I wanted to design my own.

I knew I wanted to:
* write the clock in PHP and store the current location in a text file.
* Track 3 people: My wife, son and myself.
* Support the following locations (which I refer to as status here and in my code): Dentist, Home, Lost, Mortal Peril, Prison, Quidditch, School, Travelling

Building the Basic Frontend
First I created a folder to hold my project files and withen that one I created an ‘images’ folder.
In the root folder I created 3 text tiles, one for each person status location would be tracked (these files will be refered to as Person1.txt, Person2.txt and Person3.txt). I decided to store the status in text files insted of a database is due to my limited knowledge of PHP and MySQL. I have used text files in the past for other projects so I knew it would be a simple way to implement what I wanted.
I then went and created some small images, one for each status and placed them in the images folder. The file names were important as the scripts I will be making will use the status EXACTLY how it is written to the text file in oder to form the URLs to call the correct image.

I then went a created a basic website (index.php). This page is to see what everyone is doing.
I added a 3 column table with 2 rows. In the top row I filled in the names of the 3 people and in the bottom row I used the following code:

<img src=”https://example.net/clock/Images/<?php
$f = fopen(“/var/www/html/clock/Person1.txt”, “r”);
while(!feof($f)) {
echo fgets($f);
}
fclose($f);
?>.jpg”>

What this does is added a image whos name is whatever text is containted in the persons text file.

Building the Basic Backend
I created a new file called status.php. This is where I will set the status of each person.

<?php
$myfile = fopen(“/var/www/html/net.HackerLabs/wp-content/uploads/net.HackerLabs.clock/Michael.txt”, “c”) or die(“Unable to open file!”);
if (isset($_POST[‘Btn_Michael_School’]))
{
ftruncate($myfile, 0);
$txt = “School”;
fwrite($myfile, $txt);    }

if (isset($_POST[‘Btn_Michael_Home’]))
{
ftruncate($myfile, 0);
$txt = “Home”;
fwrite($myfile, $txt);    }

if (isset($_POST[‘Btn_Michael_Dentist’]))
{
ftruncate($myfile, 0);
$txt = “Dentist”;
fwrite($myfile, $txt);    }

if (isset($_POST[‘Btn_Michael_Prison’]))
{
ftruncate($myfile, 0);
$txt = “Prison”;
fwrite($myfile, $txt);    }

if (isset($_POST[‘Btn_Michael_Lost’]))
{
ftruncate($myfile, 0);
$txt = “Lost”;
fwrite($myfile, $txt);    }

if (isset($_POST[‘Btn_Michael_Quid’]))
{
ftruncate($myfile, 0);
$txt = “Quidditch”;
fwrite($myfile, $txt);    }

if (isset($_POST[‘Btn_Michael_Travel’]))
{
ftruncate($myfile, 0);
$txt = “Travelling”;
fwrite($myfile, $txt);    }

if (isset($_POST[‘Btn_Michael_Peril’]))
{
ftruncate($myfile, 0);
$txt = “Mortal Peril”;
fwrite($myfile, $txt);    }

fclose($myfile);

?>

<h3 align=”center”>Person1</h3>
<form method=”post”>
<table border=”0″ cellspacing=”0″ cellpadding=”0″ align=”center”>
<tbody>
<tr>
<td><button name=”Btn_Person1_School”>School</button></td>
<td><button name=”Btn_Person1_Home”>Home</button></td>
<td><button name=”Btn_Person1_Dentist”>Dentist</button></td>
<td><button name=”Btn_Person1_Prison”>Prison</button></td>
<td><button name=”Btn_Person1_Lost”>Lost</button></td>
<td><button name=”Btn_Person1_Quid”>Quidditch</button></td>
<td><button name=”Btn_Person1_Travel”>Travelling</button></td>
<td><button name=”Btn_Person1_Peril”>Mortal Peril</button></td>
</tr>
</tbody>
</table>
</form>

The secont block of code creates a set of buttons. When clicked the first block of code will write the status to the persons text file. These blocks are repeated for each person (with updated to the persons name as needed.
In to this file I also copied the table showing all the people’s statuses that I used in the front end.

Building the API
I created the file ‘Clock_API.php’ and in it I added:
<?php $myfile = fopen($_GET[“file”], “c”) or die(“Unable to open file!”); { ftruncate($myfile, 0); fwrite($myfile, $_GET[“status”]); } fclose($myfile); ?>

https://example.net/clock/Clock_API.php?file=[NAME].txt&staus=[STATUS]
Replace [NAME] with: Person1, Person2, Person3
Replace [STATUS] with: Dentist, Home, Lost, Mortal Peril, Prison, Quidditch, School, Travelling
Remember: both NAME and Status are case sensitive.

Moving to WordPress
After a few days of tinkering with my code and trouble shooting I was pretty happy with what I had and I was ready to move my code into WordPress. This move will make it easier to integrate the clock into a future project that I am starting to plan out.
I installed and activated the WordPress plugin ‘Insert PHP’.
I signed in to the WordPress dashboard and created 2 new pages: one to replace each PHP file currently had. I copied my code over and updated as needed to reflect where the text files and imaged will be stored in my WordPress install. The API was not moved into WordPress but was left as a basic PHP page.
After a few minutes of work it was all moved over and working.

GPS support
My next task is figuring out GPS suppost. I am currently looking at the Android app Automate. I’ll post an update when I have more to report.

Jedite83

Jedite83 is a professional geek-of-all-trades and founder of Hacker Labs - The Geek and Otaku Blog. www.hackerlabs.net