posts tagged with the keyword ‘button’

2012.02.01

It’s a known problem that I take on too many projects, and that tends to make some of them drag out longer than they should… has it really been more than a month since I started this one?

Yes it has. In my UI Mockup/Diagram Apps post, I was working on a control panel for the CNC Router we have at the Milwaukee Makerspace.

First Attempt

The image above was my first attempt to hack something together. I wanted to do a layout with paper to get a good idea of the physical size of things. As you may notice, the buttons are big, and make the whole thing fairly large. Larger than I wanted. So through a few posts I connected with a fellow maker in Madison who offered me some smaller buttons…

Control Panel

Once I had the smaller buttons, I sat down with some paper and the calipers, and started measuring things, and making the new layout. These were, like the previous attempt, just some rough sketches on paper. Once my paper sketches were done, I moved on to Inkscape, and made the digital version of my control panel.

Paper Mockups

I then went back to paper, by printing out my files, to get a feel for the size and spacing of everything. I didn’t go as far as mocking up an actual 3D model, though it would have been easy with some foamcore or matte board, but it’s one more step to take if needed.

Cut Panel

And as long as I was at the makerspace for some laser-related shenanigans, I figured I’d cut a test of the control panel using acrylic. (I’d like the final done in wood, but I had some scrap clear acrylic on hand, and it’s easier/faster to cut than wood.)

As is often the case, I screwed up one bit of the file, and the lower-left cut is too large. The two holes on the right are waiting for buttons I don’t have yet. Right, make that: buttons I didn’t have yet. More buttons showed up, but they are slightly smaller, so I’ll meed to re-size things again before the next cut. Back to the old drawing application, as they say.

And hey, I better finish this project soon, because there’s talk of adding a 4th and 5th axis to the router! I don’t really mind though, because so far I’ve really enjoyed the process, and I’ve learned a lot along the way, so even if this thing is outdated by the time I finish it, I’ll just start on an upgrade. :)

2012.01.06

The Three Buttons

Always there are three: button A, button B, and button C.

2011.12.08

You probably know I’m a fan of Photo Booths, and while Sparkbooth is awesome software, you might want something free (and open source) so here’s “PhotoBooth” written in Processing.

This is all the code you need for the most minimal photo booth application:

/**
 * PhotoBooth.pde
 */ 
 
import processing.video.*;
Capture cam;

void setup() {
  size(1280, 720);
  cam = new Capture(this, 1280, 720);
}

void draw() {
  if (cam.available() == true) {
    cam.read();
    image(cam, 0, 0);
  }
} 

void keyPressed() {
    if (key == ' ') {  // space bar
      saveFrame("picture-####.jpg");
    }
}

Once you’ve got that, you can export it as an application from Processing.

(Note that I’m using a Logitech C910 webcam, so I’ve set the resolution to something that makes sense for that camera. If it looks weird with your camera, try 640×480 or something else.)

PhotoBooth Export Application

I generally use Mac OS X, but other operating systems are supported. This is one of the great things about Processing.

PhotoBooth Application

Over in the Finder you’ll see a standalone application named “PhotoBooth” that will run fullscreen when launched. (You can exit it by hitting the escape key.)

Spazz!

Once you launch it you’ll see some spazzy dude, wait, that’s me! You’ll probably see yourself instead.

Hit the space bar, and it’ll save a photo. Hit the space bar again and it’ll save another one. And on, and on.

PhotoBooth Photos

The photos will show up in the same folder as the application. They will have a random number in the name. It’s not sequential, but you can view by date created if you need them in order.

Here’s a more full version of the Processing code with a few extras commented out. Uncommenting them may prove useful for debugging or camera set-up.

/**
 * PhotoBooth.pde
 */ 
 
import processing.video.*;
Capture cam;

void setup() {
  size(1280, 720);

  // If no device is specified, will just use the default.
  cam = new Capture(this, 1280, 720);

  // To use another device (i.e. if the default device causes an error),  
  // list all available capture devices to the console to find your camera.
  //String[] devices = Capture.list();
  //println(devices);
  
  // Change devices[0] to the proper index for your camera.
  //cam = new Capture(this, width, height, devices[0]);

  // Opens the settings page for this capture device.
  //cam.settings();
}

void draw() {
  if (cam.available() == true) {
    cam.read();
    image(cam, 0, 0);
  }
} 

void keyPressed() {
    if (key == ' ') {  // space bar
      saveFrame("picture-####.jpg");
    }
}

And hey, I know that hitting the space bar ain’t cool… so you might want to use an awesome button instead.

This is a super-simple application, which basically takes some example code that ships with Processing and adds a bit to it. I hope to have a few more posts that talk about some changes you can make to this application. Stay tuned!

2011.10.17

One of the promises of 3D printing is being able to print replacement parts to things around the house that break. Since I’ve got access to a MakerBot Cupcake at Milwaukee Makerspace, I figured I’d give this a try, not just downloading some object from Thingiverse, but actually going through the entire process of measuring, designing and printing a part.

Light Switch v1
Light Switch Button v1

I got out the calipers and measured the light switch to determine the size of the replacement part I’d need to create, and then I used Sketchup to design the actual object at the correct width, height and depth per my measurements. Since the original part was long gone, I had to estimate how it should be designed, so I just used my best guess.

My first attempt (version 1 above) may have looked good, but even if it was a perfect match to the original, the fact that it was a very small part, and had to be printed on a older model MakerBot meant that the actual print was terrible. The part was just 10mm x 12mm x 6.7mm. That’s pretty damn small.

Light Switch v2
Light Switch Button v2

Version 1 just didn’t work. The hole that was meant to slide over the shaft of the light switch was too short, ill formed, and not even close to round in the inside. So for version 2 I changed the circular structure to a rectangle with a hole in it, as well as making it a bit thicker all around.

Version 2 was definitely better than version 1, but the hole still wasn’t looking too good, and the top (where the MakerBot finishes printing) was pretty ragged. I figured I could sand it down flat though if needed, which is why I ended up making it taller.

(Oh, I should mention that with version 1 I just printed it at the makerspace and then brought it home to test it out. It would have been awesome to have a 3D printer in the house, because I probably could have just kept tweaking it until I got it right, but as it were, I printed one, took it home, and then there was a week before I could try the next version. So yeah, this is why you need a 3D printer at home!)

Light Switch v3
Light Switch Button v3

So right after I printed up version 2, I was concerned it still might not work, so I quickly tweaked the file a bit to make it taller, and to remove the hole completely, with the idea that I could drill a nice clean hole at the appropriate size. Version 3 looked pretty good out of the Cupcake. Not great, not amazing, but pretty good… at least in comparison to the others.

Light Switch
Printed Light Switch Button

So here’s our actual printed object. Yeah, it looks pretty rough around the edges, at least from this view. I ended up using the Dremel on the top to get it a bit shorter and smoother, and then drilling a hole that would allow it to fit on the shaft. Of course, I don’t have metric drill bits, so I tried to find something close. This was my first real attempt at using the Dremel or a drill on a printed part. It wasn’t great. The Dremel doesn’t react the same way it does to metal or wood. Do I go slower or faster or what? I’m not sure… As for the drill, I tried to just hold the piece in one hand while drilling it. That was not ideal. Perhaps next time I’ll use the vice.

I know that in the photo it looks pretty sad, but it actually worked, so cosmetic beauty aside, this was mostly a success.

Light Switch
Light Switch Button in place

Here’s the light switch button in place. We can actually use the light switch without pushing the tiny shaft anymore, which is good.

So in the end, this part, even with the failed attempts, probably consists of less than 5 cents worth of plastic. This is the beauty of 3D printing at home. To get a replacement from the manufacturer would have involved me contacting them, ordering or asking for a replacement, and then having that replacement shipped to me. Even if I ended up talking to some nice person who could put one in an envelope and mail it to me at no charge, the postage stamp alone would have cost more than the raw materials needed to make the part.

Oh, you may have noticed the hole in the button. Yeah, I drilled it a bit too much. Also, the red doesn’t really match very well. I’ll probably print it again in white, or maybe glow in the dark plastic, which would make even more sense.

2011.10.13

Dual Button

Could the rumors be true? Supposedly, deep in the basement laboratory workshop of the secretive “2XL Makerspace” they’ve been hard at work on a dual button system the likes of which have not been seen before in this geographical area.

At least, that’s what all the rumor sites keep saying…

We don’t know if this photo has anything to do with some stealthy dual button device, but as soon as we find out, we’ll let you know.

See Also: The (Original) Button.

« Older Entries | Newer Entries »


buy the button:

Buy The Button