Kevin Hoyt

Phidgets RFID and JavaScript

If you like instant gratification, and you are interested in electronics hardware, then there is no better place to start than with Phidgets. These little plug-and-play USB components do not require you to know anything about resistors, capacitors, current, or anything else – just that you plug male connectors into their counterparts. Phidgets come in a variety of forms, ready to power everything from motors and servos, to temperature and light sensors. And of course there is everybody’s personal favorite, RFID.

Not to be a broken record, but let us go back to the four parts required to connect your web applications to hardware.

1. Hardware
2. Serial to Socket Server
3. Socket Library
4. Your Code and Innovation

Hardware

Obviously, in this case, the hardware is going to be the RFID reader from the Phidgets catalog. They are already all pretty much USB-ready so you have little more to do than to connect the parts and pieces. If you have a penchant for another project, much of the rest of this content will be applicable to any Phidgets you might choose to use. As for the RFID sensor, I recommend the starter kit which comes with the sensor and a few tags in a variety of forms.

One of the forms that is not in the Phidgets catalog is little stickers or the likes that you might otherwise use in books, DVDs, CDs, etc. The RFID sensor supports a standard called EM4102. If you search around the web, you’ll find compatible stickers for your project. I picked up ten a Trossen Robotics for a few bucks. Also note that this RFID sensor is designed for passive tags – tags that don’t require their own power source. Finally, the RFID sensor from Phidgets only works with a single tag at any given time.

Serial to Socket Server

In the last project with the SparkFun USB Weather Board we used Serproxy to manage this task. Because Serproxy tries to be generic, it required some additional configuration know-how. Phidgets by comparison provides what they call “drivers” which are the equivalent, but with built-in focus for Phidgets hardware. The Phidgets drivers are available for Windows, Mac (where it installs as a System Preference), Linux and even Windows Mobile/CE.

Socket Library

Once again, this is where Phidgets focus on plug-and-play really shines. With the SparkFun USB Weather Board we had to use the Socket class provided by Adobe AIR, and then write the code to read the incoming bytes. The same thing happens with Phidgets in general, but they provide pre-written libraries to manage the socket connectivity. All you have to do is register for the events you are interested in, and then do something with the data when it comes to you.

If you go to the “Programming” section of the Phidgets web site, you will find libraries for just about every popular language out there ranging from C++, to Visual Basic, to Python. One library you won’t find is JavaScript, and this pretty much makes since since there’s no socket functionality in JavaScript in the browser. There are two libraries for Flash however (one for Flex-based projects and one for non-Flex projects). That’s perfect for Adobe AIR!

Now I know at this point you might be calling foul in that I said this was connecting via JavaScript, not Flash. You’re right I did, and I intend to deliver.

Certainly you are familiar with including JavaScript libraries via the HTML SCRIPT tag, no? When you are using Adobe AIR, you can do the same thing with Flash libraries. Won’t you be programming in Flash then? Nope, still JavaScript, just to the API the library provides. Pretty cool, eh? Yeah, it’s one of my favorite AIR features that we (Adobe) never seem to talk about. Just drop the following SCRIPT tag into your HTML and you are off to the races.

<script src="lib/phidgets.swf" type="application/x-shockwave-flash"></script>

Now if you’ve downloaded the “Code Sample” for “Flash AS3” then you might have noticed that there’s no “SWF” file in the “com” directory, just a bunch of ActionScript files. Certainly these could all be ported to JavaScript, and they’d run great in AIR, but I’ve gone ahead and compiled them into a Flash library file for you to use.

This library comes in the form of a SWC file, but you may have noticed that we’re looking for the SWF behind this library. A SWC is just a Zip compressed file that contains that SWF and some metadata. Using you’re favorite decompression utility, just point it at the SWC file and decompress the contents. In those contents you’ll find a “library.swf” file. That’s what we’re after. I like to rename mine “phidgets.swf” as seen in the above code snippet.

Your Code

With the SCRIPT tag pointing at the Phidgets library in your HTML, all that is left to do is instantiate the classes you need, and register event listeners – all in JavaScript.

When you are using a Flash library, the classes are registered at the core of the AIR runtime. You’ll need to point at the runtime prior to any other class references. The Phidgets library is nicely sectioned off into packages to avoid name conflicts, and you will need to use those package names to get to the actual classes. If you want to shorten these references, you can roll your own aliases file. This is what AIR does with the “airaliases.js” file, and you can use it as a reference. Otherwise, instantiating a Phidget RFID looks like the following code snippet.

// Instantiate the Phidget RFID reference
var phidget = new runtime.com.phidgets.PhidgetRFID();

While there are a number of different events that the Phidgets interface can fire, there are only three that we are interested in to get started.

The first event is PhidgetEvent.ATTACH which gets fired when we know we have connectivity from our application, across the socket, to a Phidget (any Phidget) on the other side of the USB port. In the case of the RFID reader, we will use the event to get set up. I won’t go into the details, but grooves you see around the hole in the RFID reader is an antenna. You will want to activate the antenna once you know you are connected to the Phidget RFID. As a personal preference, I like to also turn off the LED that’s on the RFID board.

// Listen for when the application is connected to the driver (socket)
phidget.addEventListener( runtime.com.phidgets.events.PhidgetEvent.ATTACH, function( evt ) {
 
  // Turn on the Phidget RFID antenna
  // Turn off the indicator LED that is on the board
  phidget.Antenna = true;
  phidget.LED = false;
} );

The next event you will probably want to register for is when the reader detects a tagged item. In a passive RFID system this is actually a pretty interesting display of physics. The antenna creates an electro-magnetic field. When the tag passes into that field it gets enough power to broadcast a short string – the RFID tag number. Back on the board, the Phidget reads that number and passes it over USB to the socket, and in turn, your application. All you have to do is display it, or if you prefer, take some action.

// Listen for when there is a tagged item near the RFID reader
phidget.addEventListener( runtime.com.phidgets.events.PhidgetDataEvent.TAG, function( evt ) {
 
  // Turn on the LED to let the user know we have acquisition
  // Show the tag that is near the reader
  phidget.LED = true;
  $( '#tag' ).html( evt.Data );																					
} );

The final event that we will worry about for the purposes of getting started is when the tagged item is no longer in the vicinity of the Phidget RFID reader – the tag is lost. Here again you might choose to modify your user interface in some fashion. Personally, I like the user to be able to know that the tag has been acquired/lost visually without having to actually look at the computer, so I turn on/off the LED that’s on the board itself when a tag is detected/lost respectively.

// Listen for when the tagged item is removed
phidget.addEventListener( runtime.com.phidgets.events.PhidgetDataEvent.TAG_LOST, function( evt ) {
 
  // Turn off the LED to let the user know we lost acquisition
  // Clear the user interface
  phidget.LED = false;
  $( '#tag' ).html( "" );																					
} );

And Innovation

I’ve made two examples available with this blog post entry. The first is a bare bones complete example for you to review. Note that the whole library SWC-to-SWF thing has already been done in the project, so it serves as a good baseline to get started without any additional work. The second example is a bit more involved inventory display application.

This ends up being a hybrid of some of my favorite things. The first is the cataloging software Delicious Library, from Delicious Monster. It has a really nice bookcase display metaphor I’ve always wanted to implement on other projects. The second is my beloved iPhone (fan boy, guilty as charged). The result is a little iPhone sized application that shows you a picture of the tagged item near the reader on a book shelf. I’ve even used Ariel Flesler’s jQuery.scrollTo() plugin for some slick animations from book to book as the tags are read.

The inventory of tagged items sits on a server for this application in the form of images in a specific directory. The names of the images are tag numbers. When the application starts, it reaches out to a ColdFusion Component, which in turn reads the directory and creates a structure based off the images that are present. ColdFusion Components can act as JSON endpoints without any modification, so a little jQuery action gets me the data I want to display in the application.

<cfcomponent displayname="Media" hint="Display media in the directory">
 
  <cffunction 
    access="remote" 
    name="readAll" 
    returntype="array" 
    displayname="readAll" 
    returnformat="json"
    description="Reads all the products in the directory">
 
      <cfset var local = StructNew() />
 
      <cfset local.result = ArrayNew( 1 ) />
 
      <cfdirectory 
        directory="#ExpandPath( '.' )#" 		
        action="list" 
        name="media" 
        filter="*.jpg" 
        sort="ASC" 
        type="file"
        recurse="no" />
 
      <cfloop query="media">
 
        <cfimage action="read" name="img" source="#ExpandPath( media.name )#" />
 
        <cfset local.rfid = Left( media.name, Len( media.name ) - 4 ) & "_" />
 
        <cfset local.item = StructNew() />
        <cfset local.item.rfid = local.rfid />
        <cfset local.item.path = media.name />
        <cfset local.item.width = ImageGetWidth( img ) />
        <cfset local.item.height = ImageGetHeight( img ) />
 
        <cfset success = ArrayAppend( local.result, local.item ) />        
 
      </cfloop>
 
      <cfreturn local.result />
 
    </cffunction>
 
</cfcomponent>

I build all the book shelfs at the start of the application, which probably isn’t going to scale long term, but it gets the point across. Note also that the user interface sports a handy “+” button to add more items. I ran out of time to implement this the way I wanted, but you’ll get the idea of where I was going. I think more realistically you would want to leverage the SQLite engine provided by AIR and a virtual list pattern to manage scalability.

Conclusion

From here the sky is the limit. The Phidget RFID board comes with two digital outputs that you might use to drive additional LED lights, relays, or otherwise extend the functionality. Just unscrew the ports, drop a wire in and screw it back down. If you need more inspiration, you might check out the Phidgets project forum. I think my favorite is an RFID equipped suction dart. The sender uses associates a message with the tag, and then fires it over to the recipient who can then activate the tag and retrieve the message. Fun!