Categories
Uncategorized

Accelerometer Art

Accelerometer Art

Accelerometer Art

Accelerometer Art

At MilwaukeeDevHouse5 Matt and I played with Arduinos, so here, with the fairly uninspiring name of “Accelerometer Art” I present three screen shots of a Processing application displaying data from an ADXL335 accelerometer connected to my MacBook via an Arduino.

Here’s the code that runs on the Arduino…

/*
 * Accelerometer.pde
 */

#define aref_voltage 3.3

int xpin = 1;
int ypin = 2;
int zpin = 3;

void setup(void) {
  Serial.begin(9600);   
  analogReference(EXTERNAL);
}

void loop(void) {
  int xval = (analogRead(xpin));
  int yval = (analogRead(ypin));
  int zval = (analogRead(zpin));

  Serial.print (xval);
  Serial.print (" ");
  Serial.print (yval);
  Serial.print (" ");
  Serial.print (zval);
  Serial.print (" \n");
  
  delay(10);
}

And here’s the code that runs in Processing…

/*
 * Accelerometer_Graph.pde
 */

import processing.serial.*;

Serial myPort;
int xPos = 0;
int yPos = 0;
int zPos = 0;

void setup () {
  size(1024, 768);
  println(Serial.list());
  myPort = new Serial(this, Serial.list()[0], 9600);
  myPort.bufferUntil('\n');
  background(0);
}

void draw () {
  // everything happens in the serialEvent()
}

void serialEvent (Serial myPort) {
  String inString = myPort.readStringUntil('\n');

  String[] nums = split(inString, ' ');
  String inStringx = nums[0];
  String inStringy = nums[1];
  String inStringz = nums[2];


  if (inStringx != null) {
    inStringx = trim(inStringx);
    float inBytex = float(inStringx);
    inBytex = map(inBytex, 0, 1023, 0, height);

    stroke(255,0,0);
    point(xPos, height - inBytex);
    strokeWeight(3);

    if (xPos >= width) {
      xPos = 1;
      background(0);
    }
    else {
      xPos = xPos + 1;
    }
  }

  if (inStringy != null) {
    inStringy = trim(inStringy);
    float inBytey = float(inStringy);
    inBytey = map(inBytey, 0, 1023, 0, height);

    stroke(0,255,0);
    point(yPos, height - inBytey);
    strokeWeight(3);

    if (yPos >= width) {
      yPos = 2;
      background(0);
    }
    else {
      yPos = yPos + 1;
    }
  }

  if (inStringz != null) {
    inStringz = trim(inStringz);
    float inBytez = float(inStringz);
    inBytez = map(inBytez, 0, 1023, 0, height);

    stroke(0,0,255);
    point(zPos, height - inBytez);
    strokeWeight(3);

    if (zPos >= width) {
      zPos = 3;
      background(0);
    }
    else {
      zPos = zPos + 1;
    }
  }
}

void keyPressed() {
  if (int(key) == 113) {
    exit();
  }
}

The Processing code was based on an example from Tom Igoe which he placed in the public domain. (Thanks Tom!)

I heavily violated the DRY rule with this code, so it should really be re-written to be more efficient. Besides all that, it does actually work, as you can see from the awesome graphics above. (Thanks to Matt Gauger for helping with the code, and yes, he scolded me for violating the DRY rule.)

This was a great first step into Processing for me, and I look forward to improving this code, as well as explore some other ideas I have for graphing data.

(If you’ve got any pointers to great tutorials, blogs, or web sites focusing on Processing, let me know!)

Categories
Uncategorized

Charts & Graphs

I’m in need of graphing some data, and since I looked at the Google Chart Tools long ago but never did anything interesting with it, I figured I’d give it a spin.

Google’s API is pretty simple to use, you feed it a URL, and you get an image in return. Here’s an example expanded out a bit:

http://chart.apis.google.com/chart?
  cht=lc&
  chs=600x400&
  chg=10,5,5,5&
  chco=ff0000&
  chxt=x,y&
  chxr=1,0,100,5|0,0,24,1&
  chd=t:3,3,3,3,3,3,3,65,38,46,60,59,56,58,36,21,13,62,2,3,3,3,3,2

Each parameter controls some part of the image you get returned. (Want to see it? View the URL.)

You should get something that looks like this:

Chart

Wow… but not really. This is probably one of the simplest examples of a chart, but it serves my purpose.

Of course, since I’m not always content relying on others to host my data, I wanted a way to generate and store the image. You can do that too…

curl -o 20101130.png 'http://chart.apis.google.com/chart?cht=lc&chs=600x400&chg=10,5,5,5&chco=ff0000&chxt=x,y&chxr=1,0,100,5|0,0,24,1&chd=t:3,3,3,3,3,3,3,65,38,46,60,59,56,58,36,21,13,62,2,3,3,3,3,2'

Just use curl to make the request and store the image in a file named 20101130.png (or whatever the date is, or file name you’d prefer.) Obviously you’ll need curl installed. If you need to generate a new chart everyday this is ripe for automating.

I also looked at jQuery Visualize as an option. It’s quite different than the Google Chart API as to how it functions.

Chart

With jQuery Visualize you don’t actually create a chart. Well, you do create a table of data, and jQuery Visualize does all the heavy lifting and creates the chart based entirely on your well-formed tabular data.

I sort of like this approach because there’s no external image files to generate, host, or worry about. You just make a table, and include a bit of Javascript. (Of course there are other concerns/issues, but simplicity is pretty high.)

I’m still evaluating what my final choice will be for my current project. If this were 10 years ago, I probably would have used Perl to generate the image files. If it were 5 years ago, I probably would have used Perl to generate some SVG files…

jQuery Visualize uses the HTML 5 Canvas element, so they get some points in the “innovation” column I guess… Also, jQuery Visualize requires less math, and in my world, the less math I have to do, the better!

Categories
Uncategorized

Visitor Stats

I’m typically not one to obsess over statistics related to the visitors of this web site, but I figured I’d take a look and see what the numbers might tell me.

Stats by Browser

Firefox is the winner here, which wasn’t too surprising to me. I was surprised to see Chrome ahead of Safari though, even if by a small percentage. Of course I’m saddened that Internet Explorer even shows up at all. At least Chrome beat IE. Also, welcome SeaMonkey user!

Stats by Operating System

Too many Windows users! I’m kidding… sort of. I mean, I tend to write about things related to Macs, Linux, and open source… none of which are Windows. My assumption is that the people with corporate jobs who are forced to use Windows machines at work (but use Macs and Linux machines at home) tend to browse this site while on the job. Yeah, that makes sense. Also, welcome to both Android users, and that lone Playstation Portable user!

Stats by Browser / Operating System

Firefox / Windows users take the lead! So at least some Windows users are smart enough to install Firefox. Not surprising, as I think it’s been at least a few years since even die-hard Microsoft fans realized that Firefox is a better/safer browsing experience than Internet Explorer. As for IE being second? Those are obviously the corporate drones who do not have privs to install Firefox. At least Safari made it into the list once… Also, welcome Mozilla Compatible Agent / iPhone (what is that exactly!?) and your friend using Mozilla / Linux!

Stats by Screen Resolution

Hooray for more pixels! Is no one visiting this site on their shiny new Netbook? I spent so much time optimizing for 800×600 when I got my Eee PC.. all for naught! Those 1920×1080 screens must be all the designers I know. And that 320×396? That’d be the iPhone.

So join me in welcoming all visitors to the site… be they Chrome / Windows users, or iPad users, 1024×600 screen resolution users. Welcome!

Categories
Uncategorized

Fun with SVG Graphs

[Editor’s Note: If your browser does not support SVG images, you should be seeing PNG images instead, which will not look as good as the SVG versions. If you don’t see any images, let me know what browser, version, etc. you are using. It seems some of the popular browsers out there don’t “do the right thing” hmph!]

[Editor’s Note Part 2: Seems that RSS 2.0 can’t handle the <object> tag properly? At least that’s what the validator tells me. The Atom feed seems ok though…]

I’ve been working on some simple graphing utilities in Perl to create SVG graphs… Here’s a few samples…

graph

Our cost for phone service seems to have gone down.

graph

Local utilities continue to rise. Ugh…

graph

We’re spending less on food, well, most of the time. ;)

I like the fact that these are very simple, showing just the trend and not going into details like month, amount, etc. In fact, to create one of these just takes the following:

perl ggraph2.pl "Phone" "44 54 50 53 44 41 43 53 42 42 44" >phone.svg

Run the script passing in the name you want on it, and a string of numbers space separated, and output it to a file. It’s still a bit fragile, and only does some basic normalizing, so wacky things will break it, but it’s a start. Like all other quick little hacks, in the hands of the guy who wrote it, it “gets the job done” while users would break it in less than 10 minutes and start yelling.

I really like SVG. It reminds me of the old days of plotting out graphics on the Apple ][+ and that’s a good thing! It’s another one of those “edge technologies” I keep hoping will finally catch on big one of these years…