Visualizing Tyler

"Tyler" is a nickname for a set of pressure sensitive tiles we have here at the lab. Each tile contains 576 sensors and is square in shape with 2 foot sides. There are 8 in total and they can be connected in groups to make larger errors for the gathering of data. Currently, data from the tiles can only be read from a device running the appropriate library that just so happens to be Mac OSX dependent. Data is provided as a 2D array of values, each element representing a sensor in the tile(s). Each value is an integer in the range of 0 to 3000 inclusive. We don't yet know the units for these numbers however in the future we may write a calibration program to convert the values to a known metric.

My co-worker and fellow student Jeff Kinnison has been working with Tyler. He has written an application using Mongoose (and the tile driver) to read the tile data and broadcast it as a web service, just like in Claude. I am working on a web application to render the data from this web service in a web page using the HTML5 canvas. Eventually, we will be combining Claude and Tyler to visualize the location of a person's skeleton along with the pressure points of their feet. Currently, I am just trying to render Tyler in 2D. Then I will move to 3 dimensions after that, integration with the skeleton visualization.

I currently have this:

Two tiles where connected horizontally and Jeff placed his foot in the middle. The color key on the right indicates pressure levels. It ranges from low pressure which is turquoise to high pressure which is red. I am currently rendering the sensors as individual cells, note the black outline on the squares that are colored. Black sensors are those which report no pressure (0). Every value above is given a color based on its range in the color key. Each color is given an equal portion of the 0-3000 range to represent. I dynamically determine which color a value falls into so adding a color to the key is as simple as adding it to the list.

The current problem is that the data pictured above did not come directly from Tyler. It was copied and pasted from an HTTP request by the browser. Attempting to make an AJAX call directly from this webpage to Tyler throws a Cross-Domain request. For security reasons, javascript can only make ajax requests (or get requests) to pages on the same domain. Leveraging CORS, it is possible to modify the server's response header to include a value indicating to the web browser (which enforces the regulations) that cross-domain requests are ok. However, Mongoose does not support CORS directly. I worked with Jeff to try and hard code the header value into Mongoose but we were unable to change the results. We will have to look further into this in order to allow Cross-Domain requests. The reason we did not have this issue with Claude and Web-Kamehameha is because Web-Kamehameha had a server-side portion written in C# that was making the web service calls to Claude. Apparently cross-domain requests are allowed by the means with which C# accessed Claude, but not for javascript ajax requests.