Monday, 11 January 2010

A Digg Button for the Arduino

After Chris uploaded the TButton library, he and I got to talking about what other button apps would be neat to pull together for the Slide. With a little inspiration from Ladyada’s Digg Button (thanks Limor!), Chris and I started writing an Arduino-based Digg Button for the TouchShield.

Digg button kit - Click Image to Close

I guess it’s a little ironic that a completely virtual, digital button on a website became a distinct physical button on a dedicated device…and now I’m turning that physical button back to a virtual one- but still on a dedicated device. Well, here goes!

SONY DSC

Mark, Thom, and Alain all used image-based icons as buttons, which is the first thing I decided to do. So I went over to Digg

image

…zoomed in, and used WinSnap to grab the screenshots of the iconic Digg button into a bitmap for the counter:

digg1

and the “digg button” itself:

digg2

These are the exact bitmaps I used, so they’ll work perfectly when placed in the same folder as the Gadget file, or where the code is located.

Using the latest Antipasto Arduino IDE, I coded the following and uploaded it onto the TouchShield Slide.

Antipasto Arduino Slide Digg Button Code

The first chunk uploads the two images to the slide, and sets the rest of the background to white:

PImage digg1;
PImage digg2;
int count = 0;
POINT p;

void setup() {
    digg1 = loadImage("digg1.bmp");
    digg2 = loadImage("digg2.bmp");

    background(255);
    image(digg1,80,0);
    image(digg2,80,160);
    drawNumber(count, 120, 35);
}

Here’s what it should look like when the pictures are uploading correctly: DiggButton_IDE_Screenshot_uploading_images

Then I added a few lines to pick up the button presses, and have that increment the counter accordingly.

void loop() {
  if (touch_get_cursor(&p)) {
    count++;
    drawNumber(count, 120, 35);
    delay(50);
  }
}

Finally, the last part of the code reads out the state of the counter in 7-segment font.

void drawNumber(int number, int xPos, int yPos) {
  int counter;
  int16_t h,t,o;

    h = number / 100;
    t = (number - (h*100) ) / 10;
    o = number - (h*100) - (t*10);
    stroke(115, 105, 38);
    fill(255,241,159);
    if (h) {
       Display7SegmentDigit(xPos,yPos,h,25);
    }
    if (t) {
    Display7SegmentDigit(xPos+32,yPos,t,25);
    }
    Display7SegmentDigit(xPos+32+32,yPos,o,25); 
}

The finished project looks something like this:

SONY DSCSONY DSC

And here’s a video of the whole thing in action:

It’s a simple project to get started on using images as buttons on the Slide. The full code can be downloaded over at the App Store.

0 comments:

Post a Comment