Hardware Reference
In-Depth Information
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 ele-
ments 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
digit-
alRead()
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:
