fsckd

SVGs, Microcontrollers, and Xbees

16.4.2009

I brought back and old project this afternoon. I had previously constructed a temperature regulated refrigerator using an Arduino and 5A Omron SSR to toggle the compressor, but had no good way of plotting the results to make sure my refrigeration algorithms were working correctly. The refrigerator was not near a PC, so uploading the live results to a database was out of the question.

However, I recently purchased some XBee modules to play with wireless serial communication, and decided to give them a try with a datalogging application. I picked up an XBee shield for the Arduino and a XBee explorer to plug into my OpenBSD router. The Arduino samples the temperature at about 1 Hz and sends the data to my router, which then relays the information to the SQL database used by this site.

I have created a simple graph that auto-updates every 15 seconds by using jQuery to update the inline SVG image. I have run into some trouble inlining the SVG image, and it currently only displays correctly on recent Webkit or Gecko based browsers (possibly others). I believe that the "application/xhtml+xml" header that I have to send has something to do with it.

It is also worth nothing that the holes in the graph are due to the distance between the Xbees in my apartment. You can also see small gaps in the Y plane of the graph due to the 12-bit resolution of the DS18B20 [PDF] temperature sensor I'm using. I currently have the 1 mW TX revisions hooked up, and they don't like to transmit through walls very well. I had to create small aluminum parabolic dishes to get a more reliable signal between them.

Edit: I now understand a little better how the SVGs are embedded into the page, and have come to the conclusion that I will not be supporting FF or IE for now. The only good way to get the image to refresh without flickering (a-la JS image preloading) requires use of the SVG inside an IMG tag. I could not get the JS to properly preload the SVG when it was inside an object tag, and FF doesn't support proper SVG IMG tag embedding yet (if you're interested in implementing this, the relevant Bugzilla page is here. In the mean time, you can visit a static copy of the graph here or use a Webkit/Presto based browser to view the page. Also, I am correct in embedding the graph in an IMG tag, as it is a valid use of markup as shown in the spec. If anyone has suggestions on a cross-browser solution to refresh the image (without flickering!) please let me know.

• AJAX,
• Arduino,
• Python

  __ _     _   _ _   _ 
 / _| |   | | | | | | |
| |_| |   | |_| | |_| |
|  _| |___|  _  |  _  |
|_| |_____|_| |_|_| |_|
                       

  __ _     _   _ _   _ 
 / _| |   | | | | | | |
| |_| |   | |_| | |_| |
|  _| |___|  _  |  _  |
|_| |_____|_| |_|_| |_|
                       

  __ _     _   _ _   _ 
 / _| |   | | | | | | |
| |_| |   | |_| | |_| |
|  _| |___|  _  |  _  |
|_| |_____|_| |_|_| |_|