iFixit Grab Bag

Coding can be hard. But it can be made easier by writing out the designs beforehand. What follows is some designs for a current project.

The Project

iFixit is an awesome website about repair. This idea is a tiny web app for new users to see what sort of content iFixit has. The user will put their phone, laptop, and other devices they own into a “Grab Bag”. Then the app will display repair guides and parts for sale that match those devices. Sounds simple enough.

Requirements

During an internship with iFixit, I got to travel to Makerfaire. I stood in front of a monitor, explaining the website to people. I want this webapp to offer that experience, without me as a developer having to stand there and do the explaining.

This gives me several requirements to consider

  • Inviting – If this app was open on a monitor at a convention, I want it to look like it’s meant to be spontaneously used. It should look like a demo, not a product ordering page.
  • Self-explanatory – There shouldn’t have to be a representative explaining what iFixit does. Though, I’m not against having light text direction inside the app.
  • No typing – It would be nice if the app was mouse-based. People at conventions don’t always have both hands free. They might be carrying a drink or a swag bag.
  • Quickness over Thoroughness – The demo should be succinct. It’s okay if the user doesn’t find their exact phone brand in the grab bag. The main iFixit web page already has a great hierarchy system for finding specific devices.  I don’t want to attempt a rewrite of what already works.

Specification

First Draft

device pics from iFixit.com
Device icons from iFixit.com

Here’s what I thought about the design.

  • Checkboxes aren’t very interactive. This looks like a form.
  • I really should put everything on the same screen. It might be harder to design though.
  • Having to wait till the end to see the relevant statistics is no good.
  • The sum total of guides doesn’t strike me as useful. The guides and parts have interesting titles and pictures that I’d like to show that.

Second Draft

device pics from iFixit.com
Logo and device icons used from iFixit.com

Oh gosh, this ended up looking very confusing.

  •  My idea was to have the left side of the screen be devices orbiting around the logo, and the right side be content rising out of the grab bag for the user’s selected devices.
  • It’s extremely cluttered. More white space is needed to make this divide more obvious.
  • Maybe the grab bag should be on the top instead of bottom, with the repair guides falling down out of it?
  • I’m not sure how to decide which devices to show, and likewise which repair guides to show. I was thinking of allowing the user to scroll through them. But if I’m worried about clutter, I don’t think I need more buttons.

Even so there are 3 features here that I like:

  1. The devices continuously floating onto the screen. That way the page could be left open to be used at a whim. There’s no need to reset the page after a user is done.
  2. The drag and drop for selecting devices. Who doesn’t like drag and drop?
  3. The repair guides folding out from the grab bag after the user drops a device into it. Confetti is optional.

I’m going to start coding, keeping in mind I want those features. Once I have a working prototype, I hope it’s more obvious how to rearrange things to reduce clutter.

Final Thoughts

Sharing this process helps me stay grounded in the scope of the project. Maybe I’ll even get some feedback before it’s completed. And best of all, the motivation and accountability to work quickly.

Graphing Brainwaves with the Mindflex

The Mindflex is marketed as a concentration game. It’s a toy that connects to a fan and moves a ball through an obstacle course. While wearing the Mindflex, the power of the fan relates to the power of one’s concentration.

My friend Sterling and I changed the wiring to a USB connection in order to graph our brainwaves on a computer screen.

We used an Arduino to facilitate communication between the Mindflex and the computer.

What the Mindflex Can Do

The Mindflex works by sensing a voltage difference across several metal contacts. When playing around with the MindFlex, one gets a sense of the intensity of concentration. It turns out the Mindflex sensors pick up 7 different brainwave frequencies, not just one. By hacking it, we got access to all these pieces of data.

Ben’s Brain While Playing Violin
Sterling’s Brain While Juggling

There’s no limit to the sort of things could be controlled with the Mindflex once it’s hacked.

Troubleshooting

Before we managed to print these graphs, we ran into connection quality issues. The connection to the PC was affecting the Mindflex’s ability to sense a slight voltage difference in the brain. This was due to the PC being plugged into the wall outlet.

We fixed this problem by introducing a new component to the circuit, an Optoisolator, also known as an Optical Coupler.

The Optoisolator keeps the Mindflex and Arduino electrically isolated from each other. It does this by transferring data through an LED and a Photosensor instead of through a wire. Our connection quality improved greatly with this new addition.

We added LEDs for testing purposes as well as looking neat. We notice a worsened connection with red LEDs compared to green LEDs. Perhaps the voltage drop across certain LEDs interferes with the data transmission. A final product might want to exclude them.

Final Thoughts

For my first Arduino project, I’m happy with the results, but there’s a lot more the Mindflex could do. I would like to play an instrument controlled by one’s thoughts, or a video game that used the Mindflex as a controller. I also wonder if there’s any practical applications to these graphs. Would analyzing them help someone practice meditation?  Perhaps a Psychology study could be designed around using the Mindflex.

Resources

Here’s the program we used for gathering the input data from the Mindflex to the Arudino: https://github.com/kitschpatrol/Brain

Here’s the program for displaying the inputs over time in a graph on the computerhttps://github.com/kitschpatrol/BrainGrapher