Focus Widget

Focus widget is a scalable widget I created for OpenBCI to visualize my focus algorithm, and provide functionalities.

DateAugust 2017
RoleUI/UX Designer, Developer
MembersWangshu Sun

Focus Widget


Focus widget is a scalable widget for visualizing my EEG focus algorithm, and allowing end users to change threshold and get access to other functionalities.

Focus algorithm is an algorithm I designed to tell whether or not you are concentrating, by looking at the FFT characteristics of EEG signals.

Focus = 1 && 2

  1. (threshold_alpha_low < alpha_avg < threshold_alpha_high) == true
  2. (0 < beta_avg < threshold_beta_high) == true

UI Design – 1st version 

The main concept:

  • “meditation”, “cool”, “focused”, “energy”, etc.

“meditation”, “cool”, “focused”:

  • a dark background is chosen to make the focus light feel like “focus in the dark”. Since OpenBCI brand color is blue and techy, I chose the same color scheme.


  • As for alpha energy and beta energy, bright blue gradient was chosen to make a cool and satisfying feeling as if you are filled with energy.

I designed the widget in Illustrator so that there are two bars indicating whether first and second condition is satisfied.

Bar1 = (threshold_alpha_low < alpha_avg < threshold_alpha_high)

Bar2 = (0 < beta_avg < threshold_beta_high)

1st ver of design (converted to flat design later)

Because that the overall design of OpenBCI GUI is flat color, so in the end I didn’t use this gradient design but instead used basic flat color as well.

Development – 1st version

The widget was developed in Processing, a Java based language.

The first version was developed using % measurement from the Illustrator design file so as to make it scalable and accurate.

UI Design – 2nd version 

Many people asked if the thresholds could be adjustable to suit different people. Thus I added new visual features for the 2nd version.

  • Yellow color is chosen to make a slightly warm feeling against the dark background.
  • The threshold areas are lit up if the conditions satisfied.

Because alpha meter has two threshold, I added some triangle sliders to set the thresholds, with top slider staying in place, while the other middle silders moving through the meter.

2nd ver of design (added sliders and better indications)

Scalable design

All measurement are in portion to enable scalability.


Development – 2nd version

In order to dynamically set the thresholds, little triangles were added as controllers. I designed a general slider class and extends the two sliders as two different child class.

class W_Focus extends Widget: The Focus Widget class, contains the visual display and various functions.

public abstract class BasicSlider: Abstract basic slider class.

public class FocusSlider extends BasicSlider: Movable slider that can set a value between valMin and valMax.

public class FocusSlider_Static extends BasicSlider: A slider that stays in place and can set a value between valMin and valMax.

External Links