Skip to content

Commit ca3c4e9

Browse files
retiututretiutut
authored
Merge pull request #1059 from OpenBCI/team-review-3-5.1.0
Team review 3 5.1.0
2 parents ae85ed2 + 3e8be4c commit ca3c4e9

24 files changed

Lines changed: 159 additions & 105 deletions

‎CHANGELOG.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,8 @@
2020
* Minor UI/UX improvements to Spectrogram widget to increase clarity for all users
2121
* Add slower options for FFT data smoothing
2222
* Fix certain Textfield and TextArea fonts not drawing correctly on some Macs
23+
* Update and enforce style guide throughout the GUI in preparation for multiple themes
24+
* Improve UI/UX for HelpWidget at the bottom of the GUI to make it more noticeable
2325

2426
# v5.0.9
2527

‎OpenBCI_GUI/ADS1299SettingsController.pde‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -104,14 +104,14 @@ class ADS1299SettingsController {
104104
pushStyle();
105105
//stroke(31,69,110, 50);
106106
stroke(OBJECT_BORDER_GREY);
107-
fill(0, 0, 0, 100);
107+
fill(GREY_100);
108108
rect(x, y - columnLabelH, w, columnLabelH);
109109
popStyle();
110110

111111
//background
112112
pushStyle();
113113
noStroke();
114-
fill(0, 0, 0, 100);
114+
fill(GREY_100);
115115
rect(x, y, w + 1, h);
116116
popStyle();
117117

@@ -142,7 +142,7 @@ class ADS1299SettingsController {
142142

143143
//Draw background behind command buttons
144144
pushStyle();
145-
fill(0, 0, 0, 100);
145+
fill(GREY_100);
146146
rect(x, y + h, w + 1, commandBarH);
147147
if (showCustomCommandUI) {
148148
rect(customCmdUI_x, y + h + commandBarH, customCmdUI_w, commandBarH); //keep above style for other command buttons
@@ -314,8 +314,8 @@ class ADS1299SettingsController {
314314
ScrollableList list = hwsCp5.addScrollableList(name)
315315
.setOpen(false)
316316
.setColorBackground(_backgroundColor) // text field bg color
317-
.setColorValueLabel(color(0)) // text color
318-
.setColorCaptionLabel(color(0))
317+
.setColorValueLabel(OPENBCI_DARKBLUE) // text color
318+
.setColorCaptionLabel(OPENBCI_DARKBLUE)
319319
.setColorForeground(color(125)) // border color when not selected
320320
.setColorActive(BUTTON_PRESSED) // border color when selected
321321
.setOutlineColor(OBJECT_BORDER_GREY)
@@ -391,7 +391,7 @@ class ADS1299SettingsController {
391391
.setFocus(false)
392392
.setColor(color(26, 26, 26))
393393
.setColorBackground(color(255, 255, 255)) // text field bg color
394-
.setColorValueLabel(color(0, 0, 0)) // text color
394+
.setColorValueLabel(OPENBCI_DARKBLUE) // text color
395395
.setColorForeground(OBJECT_BORDER_GREY) // border color when not selected
396396
.setColorActive(isSelected_color) // border color when selected
397397
.setColorCursor(color(26, 26, 26))

‎OpenBCI_GUI/ControlPanel.pde‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1006,7 +1006,7 @@ class WifiBox {
10061006
.setFocus(false)
10071007
.setColor(color(26, 26, 26))
10081008
.setColorBackground(color(255, 255, 255)) // text field bg color
1009-
.setColorValueLabel(color(0, 0, 0)) // text color
1009+
.setColorValueLabel(OPENBCI_DARKBLUE) // text color
10101010
.setColorForeground(isSelected_color) // border color when not selected
10111011
.setColorActive(isSelected_color) // border color when selected
10121012
.setColorCursor(color(26, 26, 26))
@@ -1302,7 +1302,7 @@ class SessionDataBox {
13021302
.setFocus(false)
13031303
.setColor(color(26, 26, 26))
13041304
.setColorBackground(color(255, 255, 255)) // text field bg color
1305-
.setColorValueLabel(color(0, 0, 0)) // text color
1305+
.setColorValueLabel(OPENBCI_DARKBLUE) // text color
13061306
.setColorForeground(isSelected_color) // border color when not selected
13071307
.setColorActive(isSelected_color) // border color when selected
13081308
.setColorCursor(color(26, 26, 26))
@@ -1340,7 +1340,7 @@ class SessionDataBox {
13401340
.setColor(settings.dropdownColors)
13411341
.setOutlineColor(150)
13421342
//.setColorBackground(color(31,69,110)) // text field bg color
1343-
//.setColorValueLabel(color(0)) // text color
1343+
.setColorValueLabel(OPENBCI_DARKBLUE) // text color
13441344
//.setColorCaptionLabel(color(255))
13451345
//.setColorForeground(color(125)) // border color when not selected
13461346
//.setColorActive(BUTTON_PRESSED) // border color when selected
@@ -2104,7 +2104,7 @@ class GaleaBox {
21042104
.setFocus(false)
21052105
.setColor(color(26, 26, 26))
21062106
.setColorBackground(color(255, 255, 255)) // text field bg color
2107-
.setColorValueLabel(color(0, 0, 0)) // text color
2107+
.setColorValueLabel(OPENBCI_DARKBLUE) // text color
21082108
.setColorForeground(isSelected_color) // border color when not selected
21092109
.setColorActive(isSelected_color) // border color when selected
21102110
.setColorCursor(color(26, 26, 26))
@@ -2303,7 +2303,7 @@ class BrainFlowStreamerBox {
23032303
.setFocus(false)
23042304
.setColor(color(26, 26, 26))
23052305
.setColorBackground(color(255, 255, 255)) // text field bg color
2306-
.setColorValueLabel(color(0, 0, 0)) // text color
2306+
.setColorValueLabel(OPENBCI_DARKBLUE) // text color
23072307
.setColorForeground(isSelected_color) // border color when not selected
23082308
.setColorActive(isSelected_color) // border color when selected
23092309
.setColorCursor(color(26, 26, 26))
@@ -2334,7 +2334,7 @@ class BrainFlowStreamerBox {
23342334
.setFocus(false)
23352335
.setColor(color(26, 26, 26))
23362336
.setColorBackground(color(255, 255, 255)) // text field bg color
2337-
.setColorValueLabel(color(0, 0, 0)) // text color
2337+
.setColorValueLabel(OPENBCI_DARKBLUE) // text color
23382338
.setColorForeground(isSelected_color) // border color when not selected
23392339
.setColorActive(isSelected_color) // border color when selected
23402340
.setColorCursor(color(26, 26, 26))
@@ -2534,7 +2534,7 @@ class StreamingBoardBox {
25342534
.setFocus(false)
25352535
.setColor(color(26, 26, 26))
25362536
.setColorBackground(color(255, 255, 255)) // text field bg color
2537-
.setColorValueLabel(color(0, 0, 0)) // text color
2537+
.setColorValueLabel(OPENBCI_DARKBLUE) // text color
25382538
.setColorForeground(isSelected_color) // border color when not selected
25392539
.setColorActive(isSelected_color) // border color when selected
25402540
.setColorCursor(color(26, 26, 26))
@@ -2551,7 +2551,7 @@ class StreamingBoardBox {
25512551
.setFocus(false)
25522552
.setColor(color(26, 26, 26))
25532553
.setColorBackground(color(255, 255, 255)) // text field bg color
2554-
.setColorValueLabel(color(0, 0, 0)) // text color
2554+
.setColorValueLabel(OPENBCI_DARKBLUE) // text color
25552555
.setColorForeground(isSelected_color) // border color when not selected
25562556
.setColorActive(isSelected_color) // border color when selected
25572557
.setColorCursor(color(26, 26, 26))

‎OpenBCI_GUI/Debugging.pde‎

Lines changed: 42 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,6 @@ void verbosePrint(String _string) {
4747

4848
//this class is used to create the help widget that provides system feedback in response to interactivity
4949
//it is intended to serve as a pseudo-console, allowing us to print useful information to the interface as opposed to an IDE console
50-
5150
class HelpWidget {
5251

5352
public float x, y, w, h;
@@ -56,6 +55,9 @@ class HelpWidget {
5655
//current text shown in help widget, based on most recent command
5756
String currentOutput = "Learn how to use this application and more at docs.openbci.com";
5857
OutputLevel curOutputLevel = OutputLevel.INFO;
58+
private int colorFadeCounter;
59+
private int colorFadeTimeMillis = 1000;
60+
private boolean outputWasTriggered = false;
5961

6062
HelpWidget(float _xPos, float _yPos, float _width, float _height) {
6163
x = _xPos;
@@ -99,19 +101,25 @@ class HelpWidget {
99101

100102
//draw bg of text field of widget
101103
strokeWeight(1);
102-
stroke(getBackgroundColor());
103-
// fill(200);
104-
// fill(255);
105-
fill(getBackgroundColor());
106-
// fill(57,128,204);
104+
int saturationFadeValue = 0;
105+
if (outputWasTriggered) {
106+
int timeDelta = millis() - colorFadeCounter;
107+
saturationFadeValue = (int)map(timeDelta, 0, colorFadeTimeMillis, 100, 0);
108+
if (timeDelta > colorFadeTimeMillis) {
109+
outputWasTriggered = false;
110+
}
111+
}
112+
// Color mode is switched to Hue, Saturation, Brightness in the next line
113+
color c = getBackgroundColor(saturationFadeValue);
114+
stroke(c);
115+
fill(c);
107116
rect(x + padding, height-h + padding, width - padding*2, h - padding *2);
108117

118+
// Revert color mode back to standard RGB here
119+
colorMode(RGB, 255, 255, 255);
109120
textFont(p4);
110121
textSize(14);
111-
// fill(OPENBCI_DARKBLUE);
112122
fill(getTextColor());
113-
// fill(57,128,204);
114-
// fill(OPENBCI_BLUE);
115123
textAlign(LEFT, TOP);
116124
text(currentOutput, padding*2, height - h + padding);
117125
}
@@ -135,19 +143,36 @@ class HelpWidget {
135143
}
136144
}
137145

138-
private color getBackgroundColor() {
146+
private color getBackgroundColor(int fadeVal) {
147+
//Colors in this method are calculated using Hue, Saturation, Brightness
148+
colorMode(HSB, 360, 100, 100);
149+
int sat = 0;
150+
int maxSat = 75;
139151
switch (curOutputLevel) {
140152
case INFO:
141-
return #BDE5F8;
153+
//base color - #BDE5F8;
154+
sat = 25;
155+
sat = (int)map(fadeVal, 0, 100, sat, maxSat);
156+
return color(199, sat, 97);
142157
case SUCCESS:
143-
return #DFF2BF;
158+
//base color - #DFF2BF;
159+
sat = 25;
160+
sat = (int)map(fadeVal, 0, 100, sat, maxSat);
161+
return color(106, sat, 95);
144162
case WARN:
145-
return #FEEFB3;
163+
//base color - #FEEFB3;
164+
sat = 30;
165+
sat = (int)map(fadeVal, 0, 100, sat, maxSat);
166+
return color(48, sat, 100);
146167
case ERROR:
147-
return #FFD2D2;
168+
//base color - #FFD2D2;
169+
sat = 18;
170+
sat = (int)map(fadeVal, 0, 100, sat, maxSat);
171+
return color(0, sat, 100);
148172
case DEFAULT:
149173
default:
150-
return color(255);
174+
colorMode(RGB, 255, 255, 255);
175+
return WHITE;
151176
}
152177
}
153178

@@ -157,6 +182,8 @@ class HelpWidget {
157182

158183
String outputWithPrefix = "[" + level.name() + "]: " + _output;
159184
println(outputWithPrefix); // add this output to the console log
185+
outputWasTriggered = true;
186+
colorFadeCounter = millis();
160187
}
161188
};
162189

‎OpenBCI_GUI/Extras.pde‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -380,8 +380,8 @@ class DataStatus {
380380
private double percentage;
381381
public String notificationString;
382382
private final color default_color = OPENBCI_DARKBLUE;
383-
private final color yellow = color(254,211,0,255);
384-
private final color red = color(255,0,0,255);
383+
private final color yellow = color(221, 178, 13, 255);
384+
private final color red = TURN_OFF_RED;
385385
private color colorIndicator = default_color;
386386

387387
DataStatus(double thresh_railed, double thresh_railed_warn) {
@@ -502,7 +502,7 @@ class TextBox {
502502

503503
TextBox(String s, int x1, int y1) {
504504
string = s; x = x1; y = y1;
505-
textColor = color(0);
505+
textColor = OPENBCI_DARKBLUE;
506506
backgroundColor = color(255);
507507
fontSize = 12;
508508
font = p5;

‎OpenBCI_GUI/FilterUI.pde‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -551,7 +551,7 @@ class FilterUIPopup extends PApplet implements Runnable {
551551
.setFocus(false)
552552
.setColor(color(26, 26, 26))
553553
.setColorBackground(color(255, 255, 255)) // text field bg color
554-
.setColorValueLabel(BLACK) // text color
554+
.setColorValueLabel(OPENBCI_DARKBLUE) // text color
555555
.setColorForeground(color(210)) // border color when not selected - grey
556556
.setColorActive(isSelected_color) // border color when selected - green
557557
.setColorCursor(color(26, 26, 26))
@@ -795,8 +795,8 @@ class FilterUIPopup extends PApplet implements Runnable {
795795
.setPosition(_x, _y)
796796
.setOpen(false)
797797
.setColorBackground(WHITE) // text field bg color
798-
.setColorValueLabel(color(0)) // text color
799-
.setColorCaptionLabel(color(0))
798+
.setColorValueLabel(OPENBCI_DARKBLUE) // text color
799+
.setColorCaptionLabel(OPENBCI_DARKBLUE)
800800
.setColorForeground(color(125)) // border color when not selected
801801
.setColorActive(BUTTON_PRESSED) // border color when selected
802802
.setOutlineColor(OBJECT_BORDER_GREY)

‎OpenBCI_GUI/Grid.pde‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ class Grid {
4141
public void draw() {
4242
pushStyle();
4343
textAlign(LEFT);
44-
stroke(0);
44+
stroke(OPENBCI_DARKBLUE);
4545
textFont(p5, 12);
4646

4747
if (drawTableInnerLines) {
@@ -69,7 +69,7 @@ class Grid {
6969

7070
if (drawTableBorder) {
7171
noFill();
72-
stroke(0);
72+
stroke(OPENBCI_DARKBLUE);
7373
rect(x, y, w, rowOffset[numRows - 1]);
7474
}
7575

‎OpenBCI_GUI/OpenBCI_GUI.pde‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -226,16 +226,19 @@ PFont p6; //small Open Sans
226226
boolean setupComplete = false;
227227

228228
//Starting to collect the GUI-wide color pallet here. Rename constants all caps later...
229+
final color WHITE = color(255);
230+
final color BLACK = color(0);
229231
final color OPENBCI_DARKBLUE = color(1, 18, 41);
230232
final color OPENBCI_BLUE = color(31, 69, 110);
231233
final color boxColor = color(200);
232234
final color boxStrokeColor = OPENBCI_DARKBLUE;
233235
final color isSelected_color = color(184, 220, 105);
234-
final color colorNotPressed = color(255);
236+
final color colorNotPressed = WHITE;
235237
final color buttonsLightBlue = color(57,128,204);
238+
final color GREY_125 = color(125);
239+
final color GREY_100 = color(100);
240+
final color GREY_20 = color(20);
236241
final color TURN_ON_GREEN = color(184,220,105);
237-
final color WHITE = color(255);
238-
final color BLACK = color(0);
239242
final color TURN_OFF_RED = color(224, 56, 45);
240243
final color BUTTON_HOVER = color(177, 184, 193);//color(252, 221, 198);
241244
final color BUTTON_HOVER_LIGHT = color(211, 222, 232);
@@ -346,7 +349,12 @@ void setup() {
346349

347350
//V1 FONTS
348351
f1 = createFont("fonts/Raleway-SemiBold.otf", 16);
349-
f2 = createFont("fonts/Raleway-Regular.otf", 15);
352+
if (isMac()) {
353+
f2 = createFont("Arial", 15, true);
354+
} else {
355+
f2 = createFont("fonts/Raleway-Regular.otf", 15);
356+
}
357+
350358
f3 = createFont("fonts/Raleway-SemiBold.otf", 15);
351359
f4 = createFont("fonts/Raleway-SemiBold.otf", 64); // clear bigger fonts for widgets
352360

‎OpenBCI_GUI/SignalCheckThresholds.pde‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,14 @@ class SignalCheckThresholdUI {
88
private int valuePercentage;
99
private int valuekOhms;
1010
private CytonSignalCheckMode signalCheckMode;
11-
private color textColor = color(0);
11+
private color textColor = OPENBCI_DARKBLUE;
1212
private boolean hasUpdatedTextColor = false;
1313

1414
SignalCheckThresholdUI(ControlP5 _cp5, String _name, int _x, int _y, int _w, int _h, color _textColor, CytonSignalCheckMode _mode) {
1515
signalCheckMode = _mode;
1616
name = _name;
1717
textColor = _textColor;
18-
defaultValue_Percentage = name.equals("errorThreshold") ? 90 : 75;
18+
defaultValue_Percentage = name.equals("errorThreshold") ? (int)threshold_railed : (int)threshold_railed_warn;
1919
valuePercentage = defaultValue_Percentage;
2020
defaultValue_kOhms = name == "errorThreshold" ? 2500 : 750;
2121
valuekOhms = defaultValue_kOhms;

‎OpenBCI_GUI/W_Accelerometer.pde‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ class W_Accelerometer extends Widget {
1515
//To see all core variables/methods of the Widget class, refer to Widget.pde
1616
color graphStroke = color(210);
1717
color graphBG = color(245);
18-
color textColor = color(0);
18+
color textColor = OPENBCI_DARKBLUE;
1919
color strokeColor = color(138, 146, 153);
2020
color eggshell = color(255, 253, 248);
2121

@@ -355,9 +355,16 @@ class AccelerometerBar {
355355
plot.setPointColor(0);
356356
plot.getXAxis().setAxisLabelText("Time (s)");
357357
plot.getYAxis().setAxisLabelText("Acceleration (g)");
358+
plot.getYAxis().setNTicks(3);
358359
plot.setAllFontProperties("Arial", 0, 14);
359360
plot.getXAxis().getAxisLabel().setOffset(float(accBarPadding));
360361
plot.getYAxis().getAxisLabel().setOffset(float(accBarPadding));
362+
plot.getXAxis().setFontColor(OPENBCI_DARKBLUE);
363+
plot.getXAxis().setLineColor(OPENBCI_DARKBLUE);
364+
plot.getXAxis().getAxisLabel().setFontColor(OPENBCI_DARKBLUE);
365+
plot.getYAxis().setFontColor(OPENBCI_DARKBLUE);
366+
plot.getYAxis().setLineColor(OPENBCI_DARKBLUE);
367+
plot.getYAxis().getAxisLabel().setFontColor(OPENBCI_DARKBLUE);
361368

362369
initArrays();
363370

@@ -402,12 +409,11 @@ class AccelerometerBar {
402409
pushStyle();
403410
plot.beginDraw();
404411
plot.drawBox(); //we won't draw this eventually ...
405-
plot.drawGridLines(2);
412+
plot.drawGridLines(GPlot.BOTH);
406413
plot.drawLines(); //Draw a Line graph!
407414
//plot.drawPoints(); //Used to draw Points instead of Lines
408415
plot.drawYAxis();
409416
plot.drawXAxis();
410-
plot.getXAxis().draw();
411417
plot.endDraw();
412418
popStyle();
413419
}

0 commit comments

Comments
 (0)