Building a graphical interface for your XBee motion detectors

Now that the hardware is completely configured, you can build the server-side code to read data from all your motion sensor modules. For this project, I used two modules only, but you can use more modules for the project.

As for many web applications, our control center for the XBee motion detectors will be built using four different languages: HTML, CSS, JavaScript, and PHP. We are going to use HTML and CSS to design the interface itself, JavaScript to handle the different elements of the interface and make the link with PHP, and finally use PHP to communicate directly with the XBee modules.

The first step is to design the interface. We'll basically have several blocks on our page, one block corresponding to one XBee module. For example, this is the HTML code for the first block:

<div class="sensorBlock"><span class="sensorTitle">Sensor 1</span>
     <span class="display" id="display_1"></span>
</div>

Now, you can have a look at the JavaScript code that will handle the different elements of the interface. Note that all this code is included inside a dedicated JavaScript file. What we are going to do here is check the value of the sensor at regular intervals via a digitalRead() command. To do this, we have to call a PHP file with the correct command as an argument:

$.get( "xbee.php", {command: "/digital/8/r"}, function( data ) {

The result from the PHP file is some string data formatted in the JSON format. To actually create a usable object from this string, we can use the parseJSON() function of jQuery:

json_data = jQuery.parseJSON(data);

Now, we have a JavaScript object that has the same properties as the data fields inside the JSON container. For example, to get the ID of the sensor module, you can just type:

var sensorID = json_data.id;

Now that we know which sensor returned some data, we can read the return_value field inside the JSON object to know the status of the motion sensor on this module. If this value is equal to 0, we set the background color of the display block of this sensor to gray. If it is equal to 1, it means that some motion was detected. If this is the case, we change the background color to orange as follows:

if (json_data.return_value == 0){
  $("#display_" + sensorID).css("background-color","gray");
}
else {
  $("#display_" + sensorID).css("background-color","orange");
}

Let's now see the details of this PHP file that is called every time. We saw in the JavaScript code that the PHP file also receives an argument called command. This variable is retrieved inside the PHP file by:

$command = $_GET['command'];

Inside this file, we also need to include the php_serial class:

include "php_serial.class.php";

We also need to declare the right serial port for your XBee explorer device:

$serial_port = "/dev/cu.usbserial-A702LF8B";

Note

You will have to change this according to your own settings. To know which serial port the XBee explorer board is using, simply search for devices starting with cu inside your /dev folder if you are using Linux or OS X. If you are using Windows, you will see the list of the serial ports in your Configuration Panel.

You now need to configure the different settings of the serial connection we are about to open with the board:

$serial = new phpSerial;
$serial->deviceSet($serial_port);
$serial->confBaudRate(9600);
$serial->confParity("none");
$serial->confCharacterLength(8);
$serial->confStopBits(1);

Now, you can actually open the connection:

$serial->deviceOpen();

We can now send the command and read the answer:

$serial->sendMessage($command . "\r");
$answer = $serial->readPort();

Now, we close the serial connection:

$serial->deviceClose();

Finally, we send back the data that was read:

echo $answer;

We are now ready to test our project. You can of course find all the code for this part on the GitHub repository of the project at the following website:

https://github.com/openhomeautomation/arduino-home-automation/tree/master/chapter1

Make sure that your web server is running, and that all the files of the project are placed inside a folder in your web server's main folder. You can now head over to this folder, usually accessible by typing localhost in your favorite web browser. Open the HTML file, and you should see something similar to the following screenshot:

Note that on this example screenshot, the second sensor I had in my system already detected some motion. Now try with your sensors by waving your hand in front of them; you should instantly see that the state of the sensor changes on the interface.

Of course, by modifying the HTML and JavaScript code, you can easily modify this interface to adapt it for more sensors.

Also, be aware that these modules don't need to be connected to your computer directly once the code is loaded onto them. You can just disconnect them from your computer and power them using a simple battery pack (the Arduino Uno board, for example, accepts up to 12 V of power on its jack input).

Note that you can also access this interface from a mobile phone or tablet, just by accessing the localhost folder on your computer. Of course, your computer has to be powered (and the web server running) to access the interface.