With the development of low-cost / low-power / Internet-enabled sensors that can live inside physical objects, there’s an interesting opportunity to rethink what a “button” might look like. As a recent hack, I wired up a wine bottle to act as a “thematic button” for our office’s communal music player. Here’s how it works…
A highlight of Revolution in the Valley, Andy Hertzfeld’s first-hand account of the development of the Apple Macintosh, is the window into a first attempt at designing a computer with a mouse and a graphical user interface.
When even basic concepts like “point-and-click” would be completely unfamiliar to users, the team needed a way to clearly communicate functionality within a brand new control scheme. Beyond simply slapping text on a rectangle, it was a chance to reimagine what a “button” could be.
A critical implementation was the use of the desktop metaphor. Building upon concepts developed at Xerox PARC, action buttons and item buttons were modeled after familiar office objects like folders and trashcans, which quickly made their functionality clear.
Today, low-cost / low-power / Internet-capable hardware platforms are making possible “small-batch” hardware devices capable of controlling software. And as with the first graphical user interface, there’s an opportunity to reconsider what a “button” could mean in a new control scheme.
When any physical object can be used as a control, what can a button be made out of? How could it be triggered, and how might we incorporate the button’s physical environment?
DESIGNING A “THEMATIC” BUTTON
One straightforward idea is to take visual symbols that already exist in software and recreate them in hardware. For instance, Breakfast NY created a real-world control for Pandora Radio’s feedback buttons.
A different approach – and one that I thought would make for an interesting hack – is to imagine what a “thematic” button could look like. Rather than aping visual cues, a thematic button could reinforce the purpose of the software, and be designed for the environment in which it would live.
I decided to make a thematic button for the communal music app we use at The Echo Nest, nicknamed “Prosecco” (after the Italian sparkling wine) and written by @nedjl. Prosecco is a web app that lets employee submit music to a queue; the songs stream simultaneously to our Boston headquarters, our San Francisco office, and anyone logged while working remotely. The app also shows who submitted each song and has several ways to provide feedback, such as “jamming” the current song if you like what’s playing.
Prosecco is communal. Prosecco requires accountability, as no anonymous submissions are allowed. Prosecco encourages open feedback.
So what might a thematic button for Prosecco look like?
Given those themes and the nickname of the app, the “button” I came up with was a wine bottle capable of communicating with Prosecco. The bottle should live in the kitchen, the most communal area of our office. People would be able to see what song is playing on Prosecco and who submitted it. And if someone likes the song, gently tapping the bottle on the table would trigger a “jam” within Prosecco.
CONSTRUCTING THE BUTTON
The basic components were an Arduino Uno, a 16×2 LCD screen, two Series 1 XBees each mounted on an Adafruit XBee adapter kit, a 16g accelerometer, a pair of bright LEDs (blue and white) for feedback, and a prototyping shield.
Communication between Prosecco and the wine bottle is done via the XBees. One XBee is plugged into a laptop running a Python script that regularly polls Prosecco for the currently-playing song and the person that submitted it. The other XBee is in the wine bottle, wired to the Arduino and LCD screen.
The laptop XBee transmits information on the currently-playing song, artist, and submitter to the bottle, where it is displayed on the screen.
The accelerometer feeds into the analog input pins of the Arduino and waits for swift, sudden changes along any axis of acceleration – such as the shock produced by the bottle being lifted and then tapped against a table. When triggered, the bottle XBee transmits a “jam” request back to the laptop XBee, which executes the request via the Prosecco API.
I wanted to easily be able to reuse, replace, or cannibalize parts for future projects, so I sought to make this project as plug-in / pull-out as possible. The XBee and accelerometer are plugged into female headers soldered onto the prototyping shield, and the LCD screen is mounted on a breadboard and connected to the Arduino via hookup wire. The tradeoff is bulk, though fortunately the electronics stack was just barely able to fit into the bottle.
The LEDs would live in the base, and act as as quick feedback. Each is 5mm, 1500+mcd brightness, sandpapered down for a more diffuse glow. When a new song starts, the white LED glows, then dims. When the user “jams” a song, the blue LED glows, then dims.
Finally, I removed the bottom of a wine bottle and mounted the stack inside. My initial plan was to actually use a real Prosecco bottle as the button. Unfortunately, the dark green glassed made the LCD screen difficult to read. Instead, borrowing from a Copenhagen Institute of Interaction Design project, the final button is in a clear wine glass, with a frosted base to further diffuse the light from the LEDs.
And jamming in action…
Incidentally, this was my first solo hardware hack since college. Although hardware is much more accessible than it was back then, hardware hacks are still punishing when you make a mistake. Mixing up VSS and VDD bricked an Arduino before I’d even realized what happened, and unfortunately there’s no git for hardware.
That said, it’s pretty fun when things finally work and you have a real, physical object you can hold. So if you’ve got an idea for a better hardware button or a way to take this further, let me know…
Questions, comments, or suggestions? Leave a comment below, on Twitter at @ajaymkalia,or e-mail me at skynetandebert at gmail dot com
Thanks to @nedjl for building Prosecco, and for adding new capabilities — like the ability to jam via API — pretty much instantaneously.
Skynet & Ebert 