The DARE Button
When DARE needed a unique solution to select the $40,000 grand prize winner for their 2013 awareness campaign, we knew it would be a great opportunity to build a fun interactive experience. DARE’s requirements were that it work with their brand identity, be easy to use and ready to go in less than 30 days! Wait – 30 days? Nope. Less than 30 days…
With time of the essence, we decided the best approach was to lockdown the core functionality and expand from there. We knew DARE would be live-streaming the event and the full list of entrants would be delivered as a CSV file late the night before. This posed some technical challenges and we wanted the physical device to be fully separate from the entrant data and only act as a trigger to select the winner.
After some functionality tests, we decided to create an HTML5 front-end using jQuery with the CSV plugin. We wanted to keep the code and entrant data offline and not have to worry about network connections. Opening the local code in the browser and maximizing the window provides the perfect full-screen experience. The program randomly displays entrant names at 50 millisecond intervals creating a sense of urgency. Now we just needed a way to select the winner…
That was easy?
Who doesn’t like pressing big red buttons? And what better way to connect a button than with an Arduino Leonardo. The Leonardo uses an ATmega32u4 chip which has built-in USB communication allowing it to function as a keyboard and mouse. Our program simply looks for a key press via Javascript – The Arduino detects the button press and sends the correct key code to the laptop over USB.
With our core functionality in place it was time to make things interesting. We went with the Big Dome Button from Sparkfun which is a great button, but is pretty poor in terms of LED power. Modding the button with a high-powered LED worked great – To keep things simple, we went with a single LED that could be powered over USB. A key switch was added to provide security and the right amount of drama when enabling the button. Turning the key starts the onscreen sequence and powers the LED which cycles through a pulsating, breathing pattern.
To house the button we hacked an electrical junction box. Rubber feet were added to the bottom, a hole was drilled for the USB cable and an inner frame was made from OpenBeam. The faceplate and Arduino mount were laser cut from wood and acrylic. A breakout board routed power to the high-powered LED’s three inputs and connected the button and key switch. The breakout board is attached by a 3D printed mount with recesses to accommodate nuts underneath. Finally, the faceplate is attached with screws into threads tapped into the OpenBeam.
Less than 30 days later…
The DARE Button was on location at the DARE headquarters! With the DARE mascot supervising, an ecstatic kid carefully opened the heavy lid of the enclosure. The key was inserted and turned, powering the device. The button pulsated to life as entrant names flashed across the screen at a blistering pace. With a satisfying CLICK, the button was pressed. The screen flashed white and, as the room held their breath and live-stream viewers around the country anxiously watched, the $40,000 winner slowly faded in and appeared on the screen.
Mission accomplished!
Inspiration & Resources
- Matt Richardson’s AWESOME Button
- Hack the SparkFun Big Red Dome Button!
- Re-creating the “breathing” LED
- OpenBeam
- Arduino Leonardo
- Arduino Mouse and Keyboard Libraries
- jQuery CSV Plugin
