This Codebox explores how to use a web server to collect sensor data from a Processing sketch. As an example, we’ll use OpenCV to periodically detect and report number of faces that appear in your webcam’s field of view. You might use something like this at a conference or art show to see how many people are interested in a particular session or exhibit. Using this data feed, you might then create a mobile app that would show you where the most people are at a conference at any given time.
Set up the web server
You’ll need access to a web server with PHP to do this project. (PHP is a scripting language for creating web sites is offered by almost every hosting company.) If you don’t have an account with a hosting company, you can simply set up a web server on your own machine. In fact, most new Macs come with Apache, one of the most popular web servers, pre-installed. All you have to do is activate it, which you can do through your computer’s “System Preferences” panel. Just open the preferences, click “Sharing,” and then check the “Web Sharing” from the list at the left. (If you’re on Windows, you’ll need to install an external server. I’ve had great success with XAMPP, which has everything you’ll need.)
If all goes well, you’ll see the “Web Sharing: On” status indicator light up in green. You’ll also see the address you can use in your browser to access the “root” of your web site. (Make a note of this address, as we’ll need it later in the Processing sketch.) The following figure shows you more detail:
Once sharing is enabled, you’re ready to set up the PHP script that will log the data. This is done by adding a few files in the web server’s root directory. On a Mac, this is usually the “Sites” directory, which is in the same spot as your Music, Movies, and Documents directories.
To start setting up the script, drop into a terminal and type these commands:
cd ~/Sites/ mkdir face_sensor cd face_sensor touch sensor_log.txt chmod 777 sensor_log.txt
In this sequence of commands, we’re changing to the “root” directory where the Mac’s webserver expects to find files, creating a new directory called “face_sensor,” and then adding a blank log file that our PHP script can write to. This last step happens in two parts: the first is the use of the touch command to create a new, empty log file. The second step is to use the chmod command to set the permissions on the file so that PHP can write data to the file.
Next, you need to configure your system so that the server can execute PHP scripts. SerpicoLugNut on Stackoverflow has a great description of how to do this at Easiest way to activate PHP and MySQL on Mac OS 10.6 (Snow Leopard)?. Here’s what he says to do:
Open a good text editor (I'd recommend TextMate, but the free TextWrangler or vi or nano will do too), and open: /etc/apache2/httpd.conf Find the line: "#LoadModule php5_module libexec/apache2/libphp5.so" And uncomment it (remove the #).
Once the directory is ready, save the following PHP to a file called record.php:
Once you’ve copied the file, go to your browser and enter the following URL:
http://your personal website address from the sharing panel/face_sensor/record.php?face_count=5&room_name=ballroom&interval=2000
Your browser should say “OK.” If you open the sensor_log.txt file, you should see a line that looks like this:
01-12-2010 06:01:41 EST ballroom 5 2000
So, what’s happening? Basically, the PHP script is simply pulling out the values we’re put in the URL’s query string (e.g., face_count, room_name, and interval) and writing them out to a tab-delimited file. That’s it. (Well, OK, it’s also adding the date and time.)
In a “real” system, you’d most likely write these values to a database, but that’s beyond the scope of this post — what mainly want to do is show you how to use Processing to send data to a web site, not the particulars of how that web site records the data. If you’re interested in going further on the back end piece, Kevin Yank’s article Build Your Own Database Driven Web Site Using PHP & MySQL, Part 1: Installation is a good place to start.
Set up the sketch
Now that the web server is set up and is able to log data, the next step is to build the Processing sketch that detects faces and reports them back to your server. Before you start, make sure that you’ve installed the controlP5 and the OPENCV Processing external libraries. (If you’re unfamiliar with external libraries, check out How to Import Libraries in Processing on O’Reilly Answers.) Once the libraries are installed, fire up Processing and paste the code for networked_face_sensor.pde into the sketch window:
In addition, you’ll need to modify the transmission_url to set it to the address of your PHP script. The line
String transmission_url = "http://MacOdewahn.home/~odewahn/face_sensor/record.php";
must be updated to
String transmission_url = "http://your personal website address from the sharing panel/face_sensor/record.php";
When you start the sketch, you’ll notice that you must first pick the source video you want to use, which is done with the command cam.settings();. This allows you to hook up an external web camera, rather than just use the built-in webcam. After you’ve selected the source, you should see the video feed.
The face detection and reporting process occurs every 2 seconds, as specified in the interval variable. You can also enter a “room name” so that you you can distinguish the multiple data sources. For example, you might have one camera running in your living room, and one in your kitchen, with both reporting back to the same central server.
After a few seconds or so, you can open the log in your web browser and see the data that your sensors have reported. The URL for this is:
http://your personal website address from the sharing panel/face_sensor/sensor_log.txt
It will look something like this:
Discussion
As you can see, the Processing code is very similar to the projects we’ve explored in other posts. Basically, all we’re doing here is adding a new method, called transmit(), to report the data back to the server. transmit()‘s job is to create a URL with all information that is required by our PHP script. Note how each field name in the query string — face_count, interval, and room_name — is consistently used in both the Processing and PHP script:
Once we have this URL, Processing’s built in loadStrings() command executes the PHP script on our server to save the information. Note that we don’t actually care about the results in this example; only that the page is called. However, if we wanted to get more sophisticated, we could have the PHP script return a status code or some other information.
The final point worth noting is how we’ve used Java’s URLEncoder utility class to encode each of the fields. This ensures that the data is correctly transmitted to the server. Once again, we’re taking advantage of some of the powerful goodies that are available in Java to make our life in Processing much easier!
In the Maker Shed:
Getting Started with Processing
Learn computer programming the easy way with Processing, a simple language that lets you use code to create drawings, animation, and interactive graphics. Programming courses usually start with theory,but this book lets you jump right into creative and fun projects. It’s ideal for anyone who wants to learn basic programming, and serves as a simple introduction to graphics for people with some programming skills.
ADVERTISEMENT
