{"id":377,"date":"2009-03-07T12:24:19","date_gmt":"2009-03-07T17:24:19","guid":{"rendered":"http:\/\/www.tigoe.net\/pcomp\/code\/?p=377"},"modified":"2009-03-07T12:29:10","modified_gmt":"2009-03-07T17:29:10","slug":"rfid-to-web-interface","status":"publish","type":"post","link":"https:\/\/www.tigoe.com\/pcomp\/code\/PHP\/377\/","title":{"rendered":"RFID to Web Interface"},"content":{"rendered":"

This tutorial introduces a Processing<\/a> interface sketch provides a GUI for the command-line interface written into the Arduino RFID example<\/a>. You should read that tutorial first. The sketch shown here also allows you to upload tags it reads to O’Reilly’s Emerging Technology Conference<\/a> attendee portal<\/a>, and retrieves the resulting profile. The API for this was written by Edd Dumbill. The Processing sketch retrieves RFID tags from the Arduino reader serially, then\u00a0 passes the tag via a HTTP request to a PHP script on a remote server, shown below,\u00a0 that adds an authorized login to the O’Reilly site.<\/p>\n

Caveat: this tutorial was written specifically for the RFID workshop at Etech 2009<\/a>.\u00a0 If you’re doing this on your own, the uploader won’t work because your tags won’t be associated with records in the O’Reilly database, and the PHP script that it calls probably won’t be active on my site anymore.\u00a0 But you could build your own version on your own server. The PHP code that follows below gives you a start on that process, and the Processing code below can make a HTTP call to any web address you give it.<\/p>\n

The entire sketch can be downloaded here:<\/p>\n

rfid_uploader_0002<\/a><\/p>\n

<\/h2>\n

The Processing Interface<\/h2>\n

Attach the Arduino-based RFID reader to your computer before you start, because this sketch interfaces with it via a USB-to-serial link.\u00a0 When you run the Processing sketch that follows, you’ll get a graphic interface that allows you to read tags, delete and print the reader’s database, and upload the tags to the O’Reilly Emerging Tech database and retrieve the user associated with the tag.<\/p>\n

Initially, the screen looks like Figure 1:<\/p>\n

\"Figure<\/a>
Figure 1. The Processing sketch GUI for the SM130 reader<\/figcaption><\/figure>\n

After you scan a few tags, you’ll see a list in the Tags to upload field:<\/p>\n

\"Figure<\/a>
Figure 2. Scanning tags in the Processing GUI<\/figcaption><\/figure>\n

Finally, if you click upload, the GUI will retrieve a record from the O’Reilly site, like so:<\/p>\n

\"picture-3\"<\/a>
Figure 3. retrieved user record<\/figcaption><\/figure>\n

The Processing Code<\/h2>\n

Now that you’ve got a picture of the basic functionality, here’s the code. It’s divided into three tabs in the Processing sketch.\u00a0 The main tab provides functionality to communicate with the Arduino module.\u00a0 The buttons tab provides methods for making and drawing user buttons on the screen.\u00a0 It’s basically the same as the buttons tab in the RFID writer tutorial. The profiler tab provides the functions necessary to make the HTTP request to the PHP scrips below, and to parse the XML record that comes back from the request.<\/p>\n

You’ll need to import the serial library to access the serial port.\u00a0 In addition, there are a few global variables at the top of the main tab to do some housekeeping, like manage the text in teh screen, keep track of the tags you’ve read from the reader, and save your own tag to a file on your computer so the sketch knows who you are.<\/p>\n

import processing.serial.*;\r\n\r\nSerial myPort;                \/\/ the serial port\r\nint fontHeight = 14;          \/\/ font for drawing on the screen\r\nString messageString;         \/\/ the main display string\r\nint lineCount = 0;            \/\/ count of lines in messageString\r\nint maxLineCount = 5;         \/\/ largest that lineCount can be\r\n\r\nString tagsToUpload = \"\";     \/\/ CSV string of hex-encoded RFID tags\r\n\r\nboolean identifyingSelf = false;  \/\/ whether you're scanning your own tag\r\nString myTagId = \"\";              \/\/ your tag ID<\/pre>\n
The setup() method initializes the serial port and the font for drawing text on the screen, makes the user interface buttons, and checks to see if there’s a file with your RFID tag saved in the sketch folder.<\/p>\n
void setup() {\r\n  \/\/ set  the window size:\r\n  size(600,400);\r\n  \/\/ list all the serial ports:\r\n  println(Serial.list()); \r\n\r\n  \/\/ based on the list of serial ports printed from the\r\n  \/\/previous command, change the 0 to your port's number:\r\n  String portnum = Serial.list()[0];\r\n  \/\/ initialize the serial port:\r\n  myPort = new Serial(this, portnum, 9600);\r\n  \/\/ clear the serial buffer:\r\n  myPort.clear();\r\n  \/\/ only generate a serialEvent() when you get a newline:\r\n  myPort.bufferUntil('n');\r\n\r\n  \/\/ create a font with the second font available to the system:\r\n  PFont myFont = createFont(PFont.list()[2], fontHeight);\r\n  textFont(myFont);\r\n\r\n  \/\/ initalize the message string:\r\n  messageString = \"waiting for reader to resetn\";\r\n  \/\/ make the UI buttons:\r\n  makeButtons();\r\n\r\n  \/\/ get the user's ID if it's saved:\r\n  String[] savedData = loadStrings(\"yourID.txt\");\r\n  if (savedData != null) {\r\n    if (savedData.length > 0) {\r\n      myTagId = savedData[0];\r\n    }\r\n  }\r\n}<\/pre>\n
The draw() method is very simple. It calls two routines to draw the user interface buttons and the user profile if one has been retrieved from the web, and draws the text on the screen to let you know what’s been communicated to and from the reader.<\/p>\n
void draw() {\r\n  \/\/ clear the screen:\r\n  background(0);\r\n  \/\/ draw the UI buttons:\r\n  drawButtons();\r\n  \/\/ show the last obtained user profile:\r\n  showProfile();\r\n  \/\/ draw the message string and tags to upload:\r\n  textAlign(LEFT);\r\n  text(\"Your tag ID:\" + myTagId, 10, 30);\r\n  text(messageString, 10, 50,300, 130);\r\n  text(\"Tags to upload:\", 10, 220);\r\n  text(tagsToUpload, 10, 240,500, 130);\r\n}<\/pre>\n
The serialEvent() method is called automatically every time there is new serial data available. The serial library buffers the serial data until a newline character (n) is received, then it generates the serialEvent(). The method itself calls another method called parseForTag() to look for an RFID tag string in the incoming data.\u00a0 If it finds one, it checks to see if you requested that this be saved as your own tag.\u00a0 If so, it saves the tag to a file in the sketch folder. If not, it adds it to a string of received tags:<\/p>\n
void serialEvent(Serial myPort) {\r\n  \/\/ read the serial buffer:\r\n  String inputString = myPort.readStringUntil('n');\r\n\r\n  \/\/ if there's something there, act:\r\n  if (inputString != null) {\r\n    \/\/ see if the newest line contains an RFID tag:\r\n    String newTag = parseForTag(inputString);\r\n\r\n    \/\/ if you got a tag, add it to the list to upload:\r\n    if (newTag != null) {\r\n      if (identifyingSelf) {\r\n        myTagId = newTag;\r\n        identifyingSelf = false;\r\n        String[] dataToSave = new String[1];\r\n        dataToSave[0] = myTagId;\r\n        saveStrings(\"yourID.txt\", dataToSave);\r\n      }\r\n      else {\r\n        \/\/ add a comma if there's already text in the string:\r\n        if (tagsToUpload != \"\") {\r\n          tagsToUpload += \",\";\r\n        }\r\n        tagsToUpload += newTag;\r\n      }\r\n    }\r\n\r\n    \/\/ display the incoming lines, 5 lines at a time:\r\n    if (lineCount < maxLineCount) {\r\n      messageString +=  inputString;\r\n      lineCount++;\r\n    }\r\n    else {\r\n      messageString = inputString;\r\n      lineCount = 0;\r\n    }\r\n  }\r\n}<\/pre>\n
The aforementioned parseForTag() method scans each line of text received and looks for a colon.\u00a0 It assumes anything after the colon is an RFID tag string. When it finds a tag, it returns it:<\/p>\n
String parseForTag(String thisString) {\r\n  String thisTag = null;\r\n  \/\/ separate the string on the colon:\r\n  String[] tagElements = split(thisString, \":\");\r\n  \/\/ if you have at least 2 elements, extract the parts:\r\n  if (tagElements.length > 1) {\r\n    \/\/ get the record number:\r\n    int recordNumber = int(tagElements[0]);\r\n\r\n    \/\/ if the tag ID is not \"0000\", get it:\r\n    if (!tagElements[1].substring(0,4).equals(\"0000\")) {\r\n      thisTag = tagElements[1];\r\n      thisTag = trim(thisTag);\r\n    }\r\n  }\r\n  return thisTag;\r\n}<\/pre>\n
A method called buttonPressed() is called when the user releases the mouse button over one of the user interface buttons. It determines which button was pressed and takes the appropriate action:<\/p>\n
void buttonPressed(RectButton thisButton) {\r\n  \/\/ get the button number from the button passed to you:\r\n  int buttonNumber = buttons.indexOf(thisButton);\r\n\r\n  \/\/ do different things depending on the button number:\r\n  switch (buttonNumber) {\r\n  case 0: \/\/ get tags from reader:\r\n    tagsToUpload = \"\";\r\n    myPort.write(\"p\");\r\n    break;\r\n  case 1:  \/\/ upload tags to net:\r\n    if (tagsToUpload.equals(\"\")) {\r\n      messageString = \"No tags to upload.\";\r\n    }\r\n    else {\r\n      String[] theseTags = split(tagsToUpload, \",\");\r\n      for (int thisTag = 0; thisTag< theseTags.length; thisTag++) {\r\n        makeRequest(theseTags[thisTag]);\r\n      }\r\n\r\n      \/\/ after you upload, clear tagsToUpload:\r\n      tagsToUpload = \"\";\r\n    }\r\n    break;\r\n  case 2:   \/\/ delete tags from reader:\r\n    messageString = \"deleting reader databasen\";\r\n    myPort.write(\"c\");\r\n    break;\r\n  case 3:    \/\/ scan your own tag\r\n    identifyingSelf = true;\r\n    messageString = \"Waiting for your personal tag\";\r\n  }\r\n}<\/pre>\n
That’s the end of the main tab.<\/p>\n
The profiler tab contains the functions necessary to upload a tag to the web and retrieve the results. It starts with some global variables to store the URL of the PHP script and the results of the retrieved user record:<\/p>\n
\/\/ the URL of the PHP script that passes the tag to the database:\r\nString myUrl = \"http:\/\/tigoe.net\/workshops\/etech09\/lookupTag.php?tag=\";\r\n\r\nPImage photo;        \/\/ String containing the photo URL\r\nString[] profile;    \/\/ String array containing the HTML of the profile\r\nString username;     \/\/ String of the username\r\nString affiliation;  \/\/ String of the affiliation\r\nString twitter;      \/\/ String of the twitter username\r\nString tagNumber;    \/\/ String of the user tag number\r\nString country;      \/\/ String of the country\r\n\r\nint profileX = 350;  \/\/ horizontal position of the profile\r\nint profileY = 150;  \/\/ vertical position of the profile<\/pre>\n
The makeRequest() method adds the RFID tag string to the end of the URL string, makes the HTTP call, and waits for the results. Then it saves the results in a file. Finally, it parses the results for a valid XML record using the parseRecord() method:<\/p>\n
\/\/ This method makes the HTTP request to the PHP script\r\n\/\/ that calls the O'Reilly database and stores it\r\n\/\/ in a file:\r\nvoid makeRequest(String whichTag) {\r\n  \/\/ make HTTP call:\r\n  String thisUrl = myUrl + whichTag;\r\n  \/\/ save the resulting file in an array:\r\n  String[] httpRequest = loadStrings(thisUrl);\r\n  saveStrings(\"person.xml\", httpRequest);\r\n  \/\/ parse the results:\r\n  parseRecord(\"person.xml\");\r\n}<\/pre>\n
The parseRecord() method does just that: it opens the file created by the previous method and parses it for the XML data.\u00a0 Processing’s XMLElement object always reads from a file, so that’s why the two methods use a file to exchange the record. Before parsing the XML, this method checks to see that the file begins with an XML header.\u00a0 If it doesn’t, the method stops, clears the record variables and returns. It does this because the O’Reilly API sometimes returns HTTP error messages instead of XML, for example, if you give it a tag that’s not in the database.<\/p>\n
void parseRecord(String filename) {\r\n  \/\/ get the first line, make sure it's an XML file.\r\n  \/\/ if not, skip the rest of the substring and return:\r\n  String firstLine = loadStrings(filename)[0];\r\n  if (!(firstLine.substring(0, 5).equals(\"<?xml\"))) {\r\n    \/\/ clear the profile variables:\r\n    photo = null;\r\n    profile = null;\r\n    username = null;\r\n    affiliation= null;\r\n    twitter = null;\r\n    tagNumber = null;\r\n    country = null;\r\n    return;\r\n  }\r\n\r\n  \/\/ open the XML record:\r\n  XMLElement xml = new XMLElement(this, filename);\r\n  int lines = xml.getChildCount();\r\n  \/\/ parse the record line by line:\r\n  for (int i = 0; i < lines; i++) {\r\n    XMLElement thisRecord = xml.getChild(i);\r\n    String fieldName = thisRecord.getName();\r\n    String content = thisRecord.getContent();\r\n\r\n    if (fieldName.equals(\"photo\")) {\r\n      photo = loadImage(content);\r\n    }   \r\n\r\n    if (fieldName.equals(\"profile\")) {\r\n      profile = loadStrings(content);\r\n    }    \r\n\r\n    if (fieldName.equals(\"name\")) {\r\n      username = content;\r\n    }      \r\n\r\n    if (fieldName.equals(\"affiliation\")) {\r\n      affiliation = content;\r\n    }   \r\n\r\n    if (fieldName.equals(\"twitter\")) {\r\n      twitter = content;\r\n    }\r\n    if (fieldName.equals(\"rfid\")) {\r\n      tagNumber = content;\r\n    }\r\n    if (fieldName.equals(\"country\")) {\r\n      country = content;\r\n    }\r\n  }\r\n}<\/pre>\n
The final method in the profiler tab, showProfile(), draws the profile information to the screen. It’s called by the draw() method:<\/p>\n
void showProfile() {\r\n    \/\/ text color:\r\n  fill(0);\r\n  int  lineNumber = profileY;\r\n  textAlign(LEFT);\r\n\r\n  \/\/ show profile results if the profile variables are populated:\r\n  if (photo != null) {\r\n    image(photo, profileX, lineNumber);\r\n    lineNumber = lineNumber + 130;\r\n  }\r\n\r\n  \/\/ not displaying profile because it's all HTML and I'm too lazy to\r\n  \/\/ strip out  the bio div. It's a good goal for someone else\r\n  if (username != null) {\r\n    text(username, profileX, lineNumber);\r\n    \/\/ increment the line vertical position:\r\n    lineNumber = lineNumber + fontHeight+4;\r\n  }\r\n  if (affiliation != null) {\r\n    text(affiliation, profileX, lineNumber, width - profileX, 40);\r\n    \/\/ increment the line vertical position:\r\n    lineNumber = lineNumber + 3*(fontHeight+4);\r\n  }\r\n  if (twitter != null) {\r\n    text(twitter, profileX, lineNumber);\r\n    \/\/ increment the line vertical position:\r\n    lineNumber = lineNumber + fontHeight+4;\r\n  }\r\n  if (tagNumber != null) {\r\n    text(tagNumber, profileX, lineNumber);\r\n    \/\/ increment the line vertical position:\r\n    lineNumber = lineNumber + fontHeight+4;\r\n  }\r\n  if (country != null) {\r\n    text(country, profileX, lineNumber);\r\n    \/\/ increment the line vertical position:\r\n    lineNumber = lineNumber + fontHeight+4;\r\n  }\r\n}<\/pre>\n
That’s the main code for the sketch.\u00a0 The final tab in the sketch that generates the buttons. It’s based on Processing<\/a>‘s buttons example (in the File menu –> Examples –> Topics –> GUI –> Buttons). For more details, see that example.<\/p>\n
Here’s the sketch in its entirety:<\/p>\n
rfid_uploader_0002<\/a><\/p>\n
The PHP script<\/h2>\n
The PHP script that the Processing sketch is pretty simple.\u00a0 It uses PHP’s cURL library to access the O’Reilly database and return the results.\u00a0 It doesn’t do any parsing, just passes the results straight back to the Processing sketch.\u00a0 It’s divided up into two files, to keep the password and username more secure. The access file looks like this:<\/p>\n
<?php\r\n\t$username=urlencode('you@yourserver.com'; \/\/ the email address you registered with\r\n\t$password=urlencode('l33+-h4x0r');\t  \/\/ your password\r\n?><\/pre>\n
The main PHP script is as follows:<\/p>\n
<?php\r\n\tinclude_once('access.php');\r\n\r\n\t\/\/ Where's the database:\r\n\t$url=\"https:\/\/en.oreilly.com\/event\/20\/admin\/api\/rfid\/show\/\";\r\n\r\n\t\/\/ get the tag from the call to this script:\r\n\t$url .= $_GET[\"tag\"];\r\n\r\n\t\/\/ initialize curl:\r\n\t$ch = curl_init();\r\n\t\/\/ set up the URL:\r\n\tcurl_setopt($ch, CURLOPT_URL, $url);\r\n        curl_setopt ($ch, CURLOPT_SSL_VERIFYHOST, 0);\r\n\tcurl_setopt ($ch, CURLOPT_SSL_VERIFYPEER, 0);\r\n\r\n\t\/\/ prepare to make a POST call:\r\n\tcurl_setopt($ch, CURLOPT_POST, 1);\r\n\t\/\/ set up authentication:\r\n\tcurl_setopt($ch, CURLOPT_HTTPAUTH, CURLAUTH_BASIC);\r\n\tcurl_setopt($ch, CURLOPT_USERPWD, \"$username:$password\");\r\n\r\n        \/* censored line goes here  *\/\r\n\r\n\t\/\/ print the result:\r\n\tif (curl_errno($ch)) {\r\n\t\techo \"CURL Error: \" . curl_error($ch);\r\n\t} else {\r\n\t\t\/\/ Show the result\r\n\t\tvar_dump($response);\r\n\t\tcurl_close($ch);\r\n\t}\r\n?><\/pre>\n
You may notice a comment there that says \/*\u00a0\u00a0 censored line goes here\u00a0\u00a0 *\/.\u00a0 For reasons beyond my control, I cannot enter the curl command that goes there. It could be that WordPress<\/a> censors this line, or it could be that dreamhost<\/a> does it. Either way, you’ll have to work out the line for yourself, but here’s a hint:<\/p>\n
$response equals curl underscore exec ($ch) semicolon<\/pre>\n
If you want to duplicate this on your own server, you’ll need to change the URLs in the Processing sketch and the PHP script, of course, and you’ll have to make a database to replace the O’Reilly one that generates its own XML records.\u00a0 The XML records look like this:<\/p>\n
<?xml version=\"1.0\" encoding=\"UTF-8\"?><\/span>\r\n<attendee<\/span>>\r\n  <photo<\/span>>http:\/\/assets.en.oreilly.com\/1\/eventprovider\/1\/_@user_2071.jpg<\/photo<\/span>>\r\n  <profile<\/span>>http:\/\/en.oreilly.com\/et2009\/profile\/2071<\/profile<\/span>>\r\n  <name<\/span>>Tom Igoe<\/name<\/span>>\r\n  <affiliation<\/span>>Interactive Telecommunications Program, NYU<\/affiliation<\/span>>\r\n  <twitter<\/span>>tigoe<\/twitter<\/span>>\r\n  <rfid<\/span>>66bd00c0<\/rfid<\/span>>\r\n  <country<\/span>>US<\/country<\/span>>\r\n<\/attendee<\/span>><\/pre>\n
That’s it!\u00a0 Happy tagging.<\/p>\n","protected":false},"excerpt":{"rendered":"
This tutorial introduces a Processing interface sketch provides a GUI for the command-line interface written into the Arduino RFID example. You should read that tutorial first. The sketch shown here also allows you to upload tags it reads to O’Reilly’s Emerging Technology Conference attendee portal, and retrieves the resulting profile. The API for this was … <\/p>\n
Continue reading “RFID to Web Interface”<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9,3,7],"tags":[50,47,48,49],"class_list":["post-377","post","type-post","status-publish","format-standard","hentry","category-arduinowiring","category-PHP","category-Processing","tag-mifare","tag-rfid","tag-sm130","tag-sonmicro"],"_links":{"self":[{"href":"https:\/\/www.tigoe.com\/pcomp\/code\/wp-json\/wp\/v2\/posts\/377","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.tigoe.com\/pcomp\/code\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tigoe.com\/pcomp\/code\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tigoe.com\/pcomp\/code\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tigoe.com\/pcomp\/code\/wp-json\/wp\/v2\/comments?post=377"}],"version-history":[{"count":22,"href":"https:\/\/www.tigoe.com\/pcomp\/code\/wp-json\/wp\/v2\/posts\/377\/revisions"}],"predecessor-version":[{"id":413,"href":"https:\/\/www.tigoe.com\/pcomp\/code\/wp-json\/wp\/v2\/posts\/377\/revisions\/413"}],"wp:attachment":[{"href":"https:\/\/www.tigoe.com\/pcomp\/code\/wp-json\/wp\/v2\/media?parent=377"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tigoe.com\/pcomp\/code\/wp-json\/wp\/v2\/categories?post=377"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tigoe.com\/pcomp\/code\/wp-json\/wp\/v2\/tags?post=377"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}