Skip to main content

Creating Drumless - Thinking About UX - Single Button User Interface

Designing a reliable and intuitive single push-button user interface for a production-ready device is a challenging task. This article provides an easily integrable reference design and a sample Arduino code.

Parts list

Qty Product Part number
4 KEMET, 0603 (1608M) 1μF Multilayer Ceramic Capacitor MLCC 10V dc ±10% , SMD C0603C105K8PACTU 461-2708
1 KEMET, 0603 (1608M) 100nF Multilayer Ceramic Capacitor MLCC 16V dc ±10% , SMD C0603C104K4RACTU 264-4630
1 JST, PH, S2B, 2 Way, 1 Row, Right Angle PCB Header 820-1494
1 Molex, C-Grid III, 90120, 4 Way, 1 Row, Straight Pin Header 360-6314
1 Res SMD 0603 0.1% 0.10W T.C.10ppm 10K 182-9211
1 IP40 Black Button Tactile Switch, Single Pole Single Throw (SPST) 50 mA 3.5 (Dia.)mm Surface Mount 135-9400
1 STMicroelectronics LD39015M33R, LDO Regulator, 150mA, 3.3 V, ±2% 5-Pin, SOT-23 795-8965
1 STMicroelectronics, STM6601CM2DDM6F 189-2069

In a recent article, I presented my air-drumming project - Drumless. While most attention was focused on its ability to detect drum strikes in the air, another essential feature of this project didn't get much attention. That is the single push button that gives full control over the device including powering it on/off and entering over-the-air update mode (see figure 1). While this functionality might not be important during the prototyping phase of a project, it can be essential when designing production-ready consumer devices that should feel nice to use and be intuitive. Some examples of other products in which this functionality can be seen are mobile phones, wireless speakers, laptops and computer monitors.

inside the drumstick

stick2_ab38a98c6df8c77ccab26c5d50c3f028410ea984.png

Figure 1. The Drumless drum stick with a single push-button for user interaction.

This article serves as a tutorial for creating a single-button system and provides a reference PCB schematic and layout and sample Arduino code. Before continuing to the technical part, however, let's take a look at the exact functionality that the button of Drumless provides.

When the device is switched off:

  • A single click powers the device on and starts the firmware on the chip.

  • A long press powers the device on and puts it into over-the-air update mode.

When the device is switched on:

  • A single click recenters the drumstick orientation to the user's frame of reference.

  • A double click puts the device in sensor calibration mode.

  • A long press powers the device off.

  • A 10-second hold forcefully powers the device off in case the firmware freezes.

Technical Implementation

The tricky part of this project is how to switch the device off, such that it drains virtually no current, and then switch it back on using only a push-button. The first hint to the problem comes from the fact that most voltage regulators have an enable pin. When the voltage at this pin is above a certain threshold, the voltage regulator is turned on and the rest of the circuitry receives power; the opposite is true when the voltage is below the threshold. The STM6600/1 is a smart push-button on/off controller which stays between the microcontroller and the voltage regulator and enables the functionality described above.

While the datasheet of the STM6600/1 might look intimidating with an overwhelming amount of figures and tables, the functionality of the chip can be easily understood by looking at the reference breakout board that is provided with this article (see figure 2). On the left, a battery is connected to the J1 connector. On the right, the J2 connector outputs the regulated voltage on the 5V pin. The PBO output pin is, roughly, a debounced pass-through of the SW1 push-button and the PSH input pin gives control over the power to the microcontroller.

To understand how the circuit below operates, consider the following scenario. Initially, the voltage regulator is off. When a user presses the push-button, the STM6600/1 powers on the voltage regulator and in turn the microcontroller. It is then the job of the microcontroller to set the PSH pin high, which will keep the power supply on even after the user releases the push-button. Once the microcontroller is on, it is up to the firmware to decide when to power off the device by setting the PSH pin low. Simple, right?

drumstick connection diagram inc Arduino Nano

Figure 2. A connection diagram of the STM6600/1 breakout board and an Arduino Nano.

One problem that we haven't considered yet is what happens if the firmware on the microcontroller freezes, for example in an infinite loop. In that case, the PSH pin will remain high and the user will not be able to switch the device off. The STM6600/1 provides a solution to that too. If the push-button is held for more than tsrd seconds, the STM6600/1 chip will forcefully disable the voltage regulator. The value of tsrd is determined by the capacitance of C5 according to 107/C5 seconds. For example, a value of 1 μF will yield tsrd of 10 seconds.

Testing

The project files include a basic Arduino code with the following functionality. A single click when the power is off will power the Arduino on. A single click when the power is on will turn the on-board LED on; a double click will turn it off. A long click when the power is on will power the device off. This is visualised in the animation below:

4fqnv65_c5a084ada558fd5f7c27be11881ac851fd103af5.gif

Figure 3. Animation of the STM6600/1 breakout board functionality with an Arduino Nano.

Conclusion

This article was a tutorial for creating a single-button system and provided a reference PCB schematic and layout and sample Arduino code. The provided breakout board can be used as an off-the-shelf product or integrated into a custom PCB. The Arduino code can be easily integrated into most Arduino-based projects. While project files are attached to the article, a more recent version could be available in the GitHub repository here.

I have a BEng in Electrical & Electronic Engineering and an MSc in Artificial Intelligence. I like to combine knowledge from both fields in my work. In short, I make computers walk, talk, hear, see and understand.