Categories
Uncategorized

The Button

The Button

NOTE: Need a button? Now you can buy one! Visit raster.etsy.com.

I was in need of a button, but not just any button. A USB-enabled button that could emulate a single key being pressed on a keyboard. This is that button…

It consists of the following materials:

The Button

I used a Teensy as it’s a very simple (and cheap!) way to emulate a USB HID. I do wish the Teensy had mounting holes. I ended up not mounting it at all and letting it just hang loose, which should be fine, as it’s so lightweight. There’s a bit of electrical tape wrapped around the Teensy and the solder joints.

For the box, I wanted something metal, so it would be heavier and more sturdy than the typical plastic project box. Matt Gauger of Milwaukee Makerspace suggested I check out Mammoth Electronics, as they make boxes for guitar pedals. I ended up choosing their “tall” enclosure.

For the button, I really like this button over the one I ended up using, but it was too tall to fit in the project box. Unless you’re a “button snob” you probably won’t notice much difference between the two.

If you’ve got USB cables lying around, use one… otherwise, you can get one from Monoprice for less than a dollar. I pretty much buy all my cables from Monoprice.

As for the rubber feet, I picked some up at the local hardware store… as well as some black spray paint. (Note: If you are ordering the button from Sparkfun, just get the rubber feet from them too!)

The Button

There was one more item I needed. The button needs a 27.3 mm hole to fit into, which means I needed a hole that was 1.07480315 inches wide. Well, 1.07480315 inches is pretty close to 1.0 inches, so I ended up getting an Ace Bi-Metal Variable Pitch Hole Saw. (The link is not the exact one that I got. I ended up getting mine at the local Ace Hardware store.)

As for the process, the Teensy part took a small amount of time, (see the AWESOME Button) and the drilling was a little tricky, as the 1.0 inch hole was just slightly too small. A bit of creative drilling with a regular drill bit fixed that though. The spray painting was the real time consuming part of it all. As for the assembly, I originally envisioned mounting the Teensy on the bottom plate of the box, and having a hole where the USB connector would be accessible, but I ended up going with what you see in the photo. (I just used the Dremel to cut a small groove for the cable to fit into.)

And why do I need a yellow button that can emulate a key being pressed? Well, sometimes you just need a yellow button that can emulate a key being pressed…

The Button

Note: A number of people have asked for the code I used, and even though it is in the comments, I thought I should post it in here as well. 

/*
 * Button.pde
 */

void setup() {
  Serial.begin(9600);
  pinMode(10, INPUT_PULLUP);
  delay(500);
}

void loop() {
  if (digitalRead(10) == HIGH) {
    delay(10);
  } else {
    Keyboard.print(" "); // we print a space
    delay(1000);
  }
  delay(10);
}
Categories
Uncategorized

Processing: Fader Boxes

Another Processing sketch, fairly simple. This one does introduce a function (or subroutine) named ‘makeBox’ that we pass some values into.

See it in action here!

You can also see where we used height/2 which is the proper way to center something on the screen, rather than taking the 600 we specified and just using 300 as the halfway point. 

/*
 * 20110509.pde
 */

void setup() {
  size(800, 600);
  background(0);
  stroke(255);
  noFill();
}

void draw() {
  
  for (int xVal = 5; xVal < (width - 20); xVal = xVal + 20) {
    int myWidth = 10;
    int myHeight = xVal/2;
    int yVal = (height/2) - (myHeight/2);
    int myColor = xVal/4;
    
    makeBox(xVal, yVal, myWidth, myHeight, myColor);
    
    }

}

void makeBox(int x, int y, int w, int h, int c) {
  stroke(c);
  rect(x, y, w, h);
}

(These sketches may not be all that impressive, but it’s giving me a chance to flex my programming muscles in Processing.)

Categories
Uncategorized

Another Day, Another Time Warner Fail

Time Warner Fail

After repeated attempts to register, I concluded that Time Warner really doesn’t like my mail server, so I ended up using a Gmail address (which I didn’t want to do) and found the registration in the spam folder…

After a few failed login attempts, their system let me in, and I get this awesome “Try again later” message.

Keep up the good work Time Warner!

P.S. The Moxi kicks the Mystro’s ass.

Categories
Uncategorized

Processing: Roto Petey

Roto Petey

Today’s Processing sketch isn’t really mine… It’s from the extrusion example on processing.org. It’s a cool demo showing how brightness of an image can map to height in 3D.

I took the code and put my own image into it. The image is from my profile pic, cropped a bit and posterized to 5 levels of grey.

See it in action here!

This demo uses straight-up Java, not Javascript, because Processing.js doesn’t yet support all of what Processing does. (I was hoping to make a video of this but I’m having issues with the Processing MovieMaker code.)

Regular Petey

I find it useful to take code that someone else wrote, and start tweaking things, changing the values, etc. to see the outcome. I still find this code just a little confusing, but I’ll keep hacking at it to see what I can learn from it, and hope I can come up with something original myself. 

/*
 * 20110507.pde
 */

PImage extrude;
int[][] values;
float angle = 0;

void setup() {
  size(800, 600, P3D);
  extrude = loadImage("pete.jpg");
  extrude.loadPixels();
  values = new int[extrude.width][extrude.height];
  for (int y = 0; y < extrude.height; y++) {
    for (int x = 0; x < extrude.width; x++) {
      color pixel = extrude.get(x, y);
      values[x][y] = int(brightness(pixel));
    }
  }
}

void draw() {
  background(0);
  angle += 0.01;

  translate(width/2, 0, -128);
  rotateY(angle);  
  translate(-extrude.width/2, 200, -180);
  
  for (int y = 0; y < extrude.height; y++) {
    for (int x = 0; x < extrude.width; x++) {
      stroke(values[x][y]);
      point(x, y, -values[x][y]);
    }
  }

}
Categories
Uncategorized

Processing: Mouse Droppings

OK, we’ve finally got a bit of interaction going on… This sketch presents a blank canvas, until you click the mouse button, and then you get a circle filled with some random color. As you moved the mouse (with the button held down) it’ll make more circles and before you know it, you’re drawing!

See it in action here!

You can start over by pressing the ‘Q’ key, which will blank out the canvas. You can also adjust the size of the circle by using the up and down arrow keys. 

/*
 * 20110506.pde
 */

void setup() {
  size(800,600);
  background(0);
}

color myColor = color(0,0,0);
int mySize = 50;

void draw() {
  fill(myColor);
  stroke(myColor);
  strokeWeight(1);
  
  if(keyPressed) {
    if (key == 'q' || key == 'Q') {
      background(0);
      myColor = color(0,0,0);
      mySize = 50;
    }
    if (key == CODED) {
      if (keyCode == UP) {
        mySize = mySize + 1;
      }
      else if (keyCode == DOWN) {
        mySize = mySize - 1;
      }
    }
    if (mySize < 1) {
      mySize = 1;
    }
    if (mySize > 800) {
      mySize = 800; 
    }
  }
  
}

void mouseClicked() {
  myColor = color(random(50,255), random(50,255), random(50,255));
}

void mouseDragged() {
  myColor = color(random(50,255), random(50,255), random(50,255));
  ellipse(mouseX, mouseY, mySize, mySize);
}

This is still a pretty minimal sketch. I did have to add in the upper and lower value limits on the size of the circle or things started to go in reverse if you held the key down too long.