diff --git a/OpenBCI_GUI/Debugging.pde b/OpenBCI_GUI/Debugging.pde index ecf144322..7defbc2f1 100644 --- a/OpenBCI_GUI/Debugging.pde +++ b/OpenBCI_GUI/Debugging.pde @@ -75,7 +75,7 @@ class HelpWidget { pushStyle(); - if (colorScheme == COLOR_SCHEME_DEFAULT) { + if (frontendTheme.isLightMode()) { // draw background of widget stroke(OPENBCI_DARKBLUE); fill(255); @@ -93,7 +93,7 @@ class HelpWidget { fill(255); textAlign(LEFT, TOP); text(currentOutput, padding*2, height - h + padding); - } else if (colorScheme == COLOR_SCHEME_ALTERNATIVE_A){ + } else if (frontendTheme.isLegacyMode()) { // draw background of widget stroke(OPENBCI_DARKBLUE); fill(OPENBCI_BLUE); diff --git a/OpenBCI_GUI/FifoChannelBar.pde b/OpenBCI_GUI/FifoChannelBar.pde index f9debcc13..77160c268 100644 --- a/OpenBCI_GUI/FifoChannelBar.pde +++ b/OpenBCI_GUI/FifoChannelBar.pde @@ -46,7 +46,7 @@ class FifoChannelBar { plot.setPos(x + 36 + 4 + xOffset, y); plot.setDim(w - 36 - 4 - xOffset, h); plot.setMar(0f, 0f, 0f, 0f); - plot.setLineColor((int)channelColors[(NUM_ACCEL_DIMS)%8]); + plot.setLineColor((int)CHANNEL_COLORS[(NUM_ACCEL_DIMS)%8]); plot.setXLim(-windowSeconds,0); //horizontal scale plot.setYLim(0, yLimit); //vertical scale plot.setPointColor(0); @@ -93,7 +93,7 @@ class FifoChannelBar { public void initLayers() { for (int i = 0; i < layerCount; i++) { plot.addLayer("layer" + (i + 1), new GPointsArray(windowPointsCount - 1)); - plot.getLayer("layer" + (i + 1)).setLineColor((int)channelColors[(i + 4) % 8]); + plot.getLayer("layer" + (i + 1)).setLineColor((int)CHANNEL_COLORS[(i + 4) % 8]); } } diff --git a/OpenBCI_GUI/FilterUI.pde b/OpenBCI_GUI/FilterUI.pde index 2e1c86b26..ec227b977 100644 --- a/OpenBCI_GUI/FilterUI.pde +++ b/OpenBCI_GUI/FilterUI.pde @@ -429,7 +429,7 @@ class FilterUIPopup extends PApplet implements Runnable { // Update UI objects for all channels for (int chan = 0; chan < filterSettings.getChannelCount(); chan++) { //Use same channel colors as the rest of the GUI for onOff buttons - onColor = channelColors[chan%8]; + onColor = CHANNEL_COLORS[chan%8]; switch (filterSettings.values.brainFlowFilter) { case BANDSTOP: //Fetch on/off button color @@ -480,7 +480,7 @@ class FilterUIPopup extends PApplet implements Runnable { } private void createOnOffButton(String name, final String text, final int chan, int _x, int _y, int _w, int _h) { - onOffButtons[chan] = createButton(cp5, name, text, _x, _y, _w, _h, 0, h2, 16, channelColors[chan%8], WHITE, BUTTON_HOVER, BUTTON_PRESSED, (Integer) null, -2); + onOffButtons[chan] = createButton(cp5, name, text, _x, _y, _w, _h, 0, h2, 16, CHANNEL_COLORS[chan%8], WHITE, BUTTON_HOVER, BUTTON_PRESSED, (Integer) null, -2); onOffButtons[chan].setCircularButton(true); onOffButtons[chan].onRelease(new CallbackListener() { public void controlEvent(CallbackEvent theEvent) { @@ -492,7 +492,7 @@ class FilterUIPopup extends PApplet implements Runnable { onOffButtons[chan].setColorBackground(BUTTON_PRESSED_DARKGREY); } else { filterSettings.values.bandStopFilterActive[chan] = FilterActiveOnChannel.ON; - onOffButtons[chan].setColorBackground(channelColors[chan%8]); + onOffButtons[chan].setColorBackground(CHANNEL_COLORS[chan%8]); } break; case BANDPASS: @@ -501,7 +501,7 @@ class FilterUIPopup extends PApplet implements Runnable { onOffButtons[chan].setColorBackground(BUTTON_PRESSED_DARKGREY); } else { filterSettings.values.bandPassFilterActive[chan] = FilterActiveOnChannel.ON; - onOffButtons[chan].setColorBackground(channelColors[chan%8]); + onOffButtons[chan].setColorBackground(CHANNEL_COLORS[chan%8]); } break; } diff --git a/OpenBCI_GUI/FrontendTheme.pde b/OpenBCI_GUI/FrontendTheme.pde new file mode 100644 index 000000000..f6836f5b6 --- /dev/null +++ b/OpenBCI_GUI/FrontendTheme.pde @@ -0,0 +1,284 @@ +///////////////////////////////////////////////////////////// +// Frontend Variables that used to be in OpenBCI_GUI.pde // +///////////////////////////////////////////////////////////// +PImage openbciLogoCog; +Gif loadingGIF; +Gif loadingGIF_blue; +public Gif checkingImpedanceStatusGif; + +PImage logo_black; +PImage logo_blue; +PImage logo_white; +PImage consoleImgBlue; +PImage consoleImgWhite; +PImage screenshotImgWhite; +PImage checkMark_20x20; + +PFont f1; +PFont f2; +PFont f3; +PFont f4; +PFont f5; + +PFont h1; //large Montserrat +PFont h2; //large/medium Montserrat +PFont h3; //medium Montserrat +PFont h4; //small/medium Montserrat +PFont h5; //small Montserrat + +PFont p0; //large bold Open Sans +PFont p1; //large Open Sans +PFont p2; //large/medium Open Sans +PFont p3; //medium Open Sans +PFont p15; +static PFont p4; //medium/small Open Sans +PFont p13; +static PFont p5; //small Open Sans +PFont p6; //small Open Sans +PFont p_8; +PFont p_6; +PFont p_5; + +// Never use Black!!! Use OPENBCI_DARKBLUE instead +final color WHITE = color(255); +final color OPENBCI_DARKBLUE = color(1, 18, 41); +final color OPENBCI_BLUE = color(31, 69, 110); +final color OPENBCI_BLUE_ALPHA50 = color(31, 69, 110, 50); +final color OPENBCI_BLUE_ALPHA100 = color(31, 69, 110, 100); +final color boxColor = color(200); +final color boxStrokeColor = OPENBCI_DARKBLUE; +final color isSelected_color = color(184, 220, 105); //Used for textfield borders, +final color colorNotPressed = WHITE; +final color buttonsLightBlue = color(57,128,204); +final color GREY_235 = color(235); +final color GREY_200 = color(200); +final color GREY_125 = color(125); +final color GREY_100 = color(100); +final color GREY_20 = color(20); +final color TURN_ON_GREEN = color(195, 242, 181); +final color TURN_OFF_RED = color(255, 210, 210); +final color BOLD_RED = color(224, 56, 45); +final color BUTTON_HOVER = color(177, 184, 193);//color(252, 221, 198); +final color BUTTON_HOVER_LIGHT = color(211, 222, 232); +final color BUTTON_PRESSED = color(150, 170, 200); //OPENBCI_DARKBLUE; +final color BUTTON_PRESSED_LIGHT = color(179, 187, 199); +final color BUTTON_LOCKED_GREY = color(128); +final color BUTTON_PRESSED_DARKGREY = color(50); +final color BUTTON_NOOBGREEN = color(114,204,171); +final color BUTTON_EXPERTPURPLE = color(135,95,154); +final color BUTTON_CAUTIONRED = color(214,100,100); +final color OBJECT_BORDER_GREY = color(150); +final color TOPNAV_DARKBLUE = OPENBCI_BLUE; +final color SUBNAV_LIGHTBLUE = buttonsLightBlue; +//Use the same colors for X,Y,Z throughout Accelerometer widget +final color ACCEL_X_COLOR = BOLD_RED; +final color ACCEL_Y_COLOR = color(49, 113, 89); +final color ACCEL_Z_COLOR = color(54, 87, 158); +//Signal check colors +final color SIGNAL_CHECK_YELLOW = color(221, 178, 13); //Same color as yellow channel color found below +final color SIGNAL_CHECK_YELLOW_LOWALPHA = color(221, 178, 13, 150); +final color SIGNAL_CHECK_RED = BOLD_RED; +final color SIGNAL_CHECK_RED_LOWALPHA = color(224, 56, 45, 150); +public CColor dropdownColorsGlobal = new CColor(); + +//Channel Colors -- Defaulted to matching the OpenBCI electrode ribbon cable +final color[] CHANNEL_COLORS = { + color(129, 129, 129), + color(124, 75, 141), + color(54, 87, 158), + color(49, 113, 89), + SIGNAL_CHECK_YELLOW, + color(253, 94, 52), + BOLD_RED, + color(162, 82, 49) +}; + +public enum ColorScheme implements IndexingInterface { + LEGACY(0, "Legacy"), + LIGHT(1, "Light"), + DARK(2, "Dark"); + + private int index; + private String label; + + ColorScheme(int index, String label) { + this.index = index; + this.label = label; + } + + @Override + public String getString() { + return label; + } + + @Override + public int getIndex() { + return index; + } +} + +class FrontendTheme { + private final color BLUE_0 = #030A12; + private final color BLUE_1 = #011326; + private final color BLUE_2 = #102337; + private final color BLUE_3 = #1F456E; + private final color BLUE_4 = #00A3DD; + private final color ORANGE_0 = #9F531A; + private final color ORANGE_1 = #E37625; + private final color ORANGE_2 = #F98025; + private final color ORANGE_3 = #FF9444; + private final color GREY_0 = #4C5662; + private final color GREY_1 = #78838C; + private final color GREY_2 = #C1C8CD; + private final color WHITE_0 = #E3E6E8; + private final color WHITE_1 = #FFFFFF; + + private ColorScheme colorScheme; + private WidgetTheme widgetTheme; + + public FrontendTheme(ColorScheme colorScheme) { + this.colorScheme = colorScheme; + widgetTheme = new WidgetTheme(colorScheme); + } + + public ColorScheme getColorScheme() { + return colorScheme; + } + + public void setColorScheme(ColorScheme colorScheme) { + this.colorScheme = colorScheme; + applyTheme(); + } + + public boolean isDarkMode() { + return colorScheme == ColorScheme.DARK; + } + + public boolean isLightMode() { + // COLOR_SCHEME_DEFAULT + return colorScheme == ColorScheme.LIGHT; + } + + public boolean isLegacyMode() { + // COLOR_SCHEME_ALTERNATIVE_A + return colorScheme == ColorScheme.LEGACY; + } + + public void iterateColorScheme() { + int currentIndex = colorScheme.getIndex(); + int nextIndex = (currentIndex + 1) % ColorScheme.values().length; + setColorScheme(ColorScheme.values()[nextIndex]); + applyTheme(); + output("Color scheme changed to: " + colorScheme.getString()); + } + + public void applyTheme() { + widgetTheme.setTheme(colorScheme); + topNav.updateNavButtonsBasedOnColorScheme(); + } + + public WidgetTheme getWidgetTheme() { + return widgetTheme; + } + + private class WidgetTheme { + private color backgroundColor; + private color textColor; + private color borderColor; + private color buttonColor; + private color buttonHoverColor; + private color buttonPressedColor; + + public WidgetTheme(ColorScheme colorScheme) { + setTheme(colorScheme); + } + + public void setTheme(ColorScheme colorScheme) { + switch (colorScheme) { + case LIGHT: + backgroundColor = WHITE_0; + textColor = GREY_1; + borderColor = GREY_2; + buttonColor = BLUE_4; + buttonHoverColor = ORANGE_3; + buttonPressedColor = ORANGE_2; + break; + case DARK: + backgroundColor = BLUE_0; + textColor = WHITE_1; + borderColor = GREY_0; + buttonColor = BLUE_4; + buttonHoverColor = ORANGE_3; + buttonPressedColor = ORANGE_2; + break; + case LEGACY: + default: + backgroundColor = WHITE_0; + textColor = GREY_1; + borderColor = GREY_2; + buttonColor = BLUE_4; + buttonHoverColor = ORANGE_3; + buttonPressedColor = ORANGE_2; + } + /* + switch (colorScheme) { + case LIGHT: + backgroundColor = WHITE_0; + textColor = BLACK; + borderColor = GREY_1; + buttonColor = BLUE_4; + buttonHoverColor = BLUE_3; + buttonPressedColor = BLUE_2; + break; + case DARK: + backgroundColor = BLUE_0; + textColor = WHITE_1; + borderColor = GREY_1; + buttonColor = ORANGE_3; + buttonHoverColor = ORANGE_2; + buttonPressedColor = ORANGE_1; + break; + case LEGACY: + default: + backgroundColor = WHITE_0; + textColor = BLACK; + borderColor = GREY_1; + buttonColor = BLUE_4; + buttonHoverColor = BLUE_3; + buttonPressedColor = BLUE_2; + } + */ + } + + public void apply() { + // Apply the theme to the widget + fill(backgroundColor); + stroke(borderColor); + // Other drawing code... + } + + public color getBackgroundColor() { + return backgroundColor; + } + + public color getTextColor() { + return textColor; + } + + public color getBorderColor() { + return borderColor; + } + + public color getButtonColor() { + return buttonColor; + } + + public color getButtonHoverColor() { + return buttonHoverColor; + } + + public color getButtonPressedColor() { + return buttonPressedColor; + } + } +} \ No newline at end of file diff --git a/OpenBCI_GUI/Interactivity.pde b/OpenBCI_GUI/Interactivity.pde index eba496f1c..f6f8fa110 100644 --- a/OpenBCI_GUI/Interactivity.pde +++ b/OpenBCI_GUI/Interactivity.pde @@ -15,7 +15,7 @@ //interpret a keypress...the key pressed comes in as "key" synchronized void keyPressed() { // don't allow key presses until setup is complete and the UI is initialized - if (!setupComplete) { + if (!appSetupComplete) { return; } @@ -58,17 +58,8 @@ void parseKey(char val) { drawContainers = !drawContainers; return; case '{': - /* - if(colorScheme == COLOR_SCHEME_DEFAULT){ - colorScheme = COLOR_SCHEME_ALTERNATIVE_A; - } else if(colorScheme == COLOR_SCHEME_ALTERNATIVE_A) { - colorScheme = COLOR_SCHEME_DEFAULT; - } - */ - //topNav.updateNavButtonsBasedOnColorScheme(); - output("New Dark color scheme coming soon!"); + frontendTheme.iterateColorScheme(); return; - //deactivate channels 1-4 case '1': currentBoard.setEXGChannelActive(1-1, false); @@ -249,7 +240,7 @@ void mouseDragged() { //switch yard if a click is detected synchronized void mousePressed() { // don't allow mouse clicks until setup is complete and the UI is initialized - if (!setupComplete) { + if (!appSetupComplete) { return; } // verbosePrint("OpenBCI_GUI: mousePressed: mouse pressed"); @@ -286,7 +277,7 @@ synchronized void mousePressed() { synchronized void mouseReleased() { // don't allow mouse clicks until setup is complete and the UI is initialized - if (!setupComplete) { + if (!appSetupComplete) { return; } diff --git a/OpenBCI_GUI/OpenBCI_GUI.pde b/OpenBCI_GUI/OpenBCI_GUI.pde index b6cb0cbc1..a948362e2 100644 --- a/OpenBCI_GUI/OpenBCI_GUI.pde +++ b/OpenBCI_GUI/OpenBCI_GUI.pde @@ -9,6 +9,8 @@ // Modified (v3.0) AJ Keller (Conor Russomanno & Joel Murphy & Wangshu), September 2017 // Modified (v4.0) AJ Keller (Richard Waltman), September 2018 // Modified (v5.0) Richard Waltman, August 2020 +// Modified (v6.0) Richard Waltman, September 2023 +// Modified (v7.0) Richard Waltman, April 2025 // // Requires gwoptics graphing library for processing. Built on V0.5.0 // http://www.gwoptics.org/processing/gwoptics_p5lib/ @@ -175,111 +177,13 @@ processing.serial.Serial serial_output; //set window size int win_w; //window width int win_h; //window height - -PImage openbciLogoCog; -Gif loadingGIF; -Gif loadingGIF_blue; -public Gif checkingImpedanceStatusGif; - -PImage logo_black; -PImage logo_blue; -PImage logo_white; -PImage consoleImgBlue; -PImage consoleImgWhite; -PImage screenshotImgWhite; -PImage checkMark_20x20; - -PFont f1; -PFont f2; -PFont f3; -PFont f4; -PFont f5; - -PFont h1; //large Montserrat -PFont h2; //large/medium Montserrat -PFont h3; //medium Montserrat -PFont h4; //small/medium Montserrat -PFont h5; //small Montserrat - -PFont p0; //large bold Open Sans -PFont p1; //large Open Sans -PFont p2; //large/medium Open Sans -PFont p3; //medium Open Sans -PFont p15; -static PFont p4; //medium/small Open Sans -PFont p13; -static PFont p5; //small Open Sans -PFont p6; //small Open Sans -PFont p_8; -PFont p_6; -PFont p_5; - -boolean setupComplete = false; - -//Starting to collect the GUI-wide color pallet here. Rename constants all caps later... -final color WHITE = color(255); -final color BLACK = color(0); -final color OPENBCI_DARKBLUE = color(1, 18, 41); -final color OPENBCI_BLUE = color(31, 69, 110); -final color OPENBCI_BLUE_ALPHA50 = color(31, 69, 110, 50); -final color OPENBCI_BLUE_ALPHA100 = color(31, 69, 110, 100); -final color boxColor = color(200); -final color boxStrokeColor = OPENBCI_DARKBLUE; -final color isSelected_color = color(184, 220, 105); //Used for textfield borders, -final color colorNotPressed = WHITE; -final color buttonsLightBlue = color(57,128,204); -final color GREY_235 = color(235); -final color GREY_200 = color(200); -final color GREY_125 = color(125); -final color GREY_100 = color(100); -final color GREY_20 = color(20); -final color TURN_ON_GREEN = color(195, 242, 181); -final color TURN_OFF_RED = color(255, 210, 210); -final color BOLD_RED = color(224, 56, 45); -final color BUTTON_HOVER = color(177, 184, 193);//color(252, 221, 198); -final color BUTTON_HOVER_LIGHT = color(211, 222, 232); -final color BUTTON_PRESSED = color(150, 170, 200); //OPENBCI_DARKBLUE; -final color BUTTON_PRESSED_LIGHT = color(179, 187, 199); -final color BUTTON_LOCKED_GREY = color(128); -final color BUTTON_PRESSED_DARKGREY = color(50); -final color BUTTON_NOOBGREEN = color(114,204,171); -final color BUTTON_EXPERTPURPLE = color(135,95,154); -final color BUTTON_CAUTIONRED = color(214,100,100); -final color OBJECT_BORDER_GREY = color(150); -final color TOPNAV_DARKBLUE = OPENBCI_BLUE; -final color SUBNAV_LIGHTBLUE = buttonsLightBlue; -//Use the same colors for X,Y,Z throughout Accelerometer widget -final color ACCEL_X_COLOR = BOLD_RED; -final color ACCEL_Y_COLOR = color(49, 113, 89); -final color ACCEL_Z_COLOR = color(54, 87, 158); -//Signal check colors -final color SIGNAL_CHECK_YELLOW = color(221, 178, 13); //Same color as yellow channel color found below -final color SIGNAL_CHECK_YELLOW_LOWALPHA = color(221, 178, 13, 150); -final color SIGNAL_CHECK_RED = BOLD_RED; -final color SIGNAL_CHECK_RED_LOWALPHA = color(224, 56, 45, 150); -public CColor dropdownColorsGlobal = new CColor(); - -//Channel Colors -- Defaulted to matching the OpenBCI electrode ribbon cable -//Channel Colors -- Defaulted to matching the OpenBCI electrode ribbon cable -final color[] channelColors = { - color(129, 129, 129), - color(124, 75, 141), - color(54, 87, 158), - color(49, 113, 89), - SIGNAL_CHECK_YELLOW, - color(253, 94, 52), - BOLD_RED, - color(162, 82, 49) -}; - -final int COLOR_SCHEME_DEFAULT = 1; -final int COLOR_SCHEME_ALTERNATIVE_A = 2; -// int COLOR_SCHEME_ALTERNATIVE_B = 3; -int colorScheme = COLOR_SCHEME_ALTERNATIVE_A; +boolean appSetupComplete = false; WidgetManager widgetManager; +FrontendTheme frontendTheme; + //Global variable for general navigation bar height final int NAV_HEIGHT = 22; @@ -350,6 +254,8 @@ void setup() { copyPaste = new CopyPaste(); + frontendTheme = new FrontendTheme(ColorScheme.LEGACY); + //V1 FONTS f1 = createFont("fonts/Raleway-SemiBold.otf", 16); //Account for Macs with Retina Display and textfield text being too large @@ -505,7 +411,7 @@ void delayedSetup() { // Otherwise we get a crash on launch 10% of the time controlPanel = new ControlPanel(this); - setupComplete = true; // signal that the setup thread has finished + appSetupComplete = true; // signal that the setup thread has finished println("OpenBCI_GUI::Setup: Setup is complete!"); } @@ -524,7 +430,7 @@ void delayedSetup() { synchronized void draw() { if (showStartupError) { drawStartupError(); - } else if (setupComplete && systemMode != SYSTEMMODE_INTROANIMATION) { + } else if (appSetupComplete && systemMode != SYSTEMMODE_INTROANIMATION) { systemUpdate(); //signPost("20"); systemDraw(); //signPost("30"); if (midInit) { diff --git a/OpenBCI_GUI/TimeSeriesWidgetHelperClasses.pde b/OpenBCI_GUI/TimeSeriesWidgetHelperClasses.pde index 994cba5c4..5c65b4bf6 100644 --- a/OpenBCI_GUI/TimeSeriesWidgetHelperClasses.pde +++ b/OpenBCI_GUI/TimeSeriesWidgetHelperClasses.pde @@ -69,7 +69,7 @@ class ChannelBar { plot.setPos(x + uiSpaceWidth, y); plot.setDim(w - uiSpaceWidth, h); plot.setMar(0f, 0f, 0f, 0f); - plot.setLineColor((int)channelColors[channelIndex%8]); + plot.setLineColor((int)CHANNEL_COLORS[channelIndex%8]); plot.setXLim(-5,0); plot.setYLim(yAxisLowerLim, yAxisUpperLim); plot.setPointSize(2); @@ -149,7 +149,7 @@ class ChannelBar { updatePlotPoints(); if (currentBoard.isEXGChannelActive(channelIndex)) { - onOffButton.setColorBackground(channelColors[channelIndex%8]); // power down == false, set color to vibrant + onOffButton.setColorBackground(CHANNEL_COLORS[channelIndex%8]); // power down == false, set color to vibrant } else { onOffButton.setColorBackground(50); // power down == true, set to grey @@ -356,7 +356,7 @@ class ChannelBar { } private void createOnOffButton(String name, String text, int _x, int _y, int _w, int _h) { - onOffButton = createButton(cbCp5, name, text, _x, _y, _w, _h, 0, h2, 16, channelColors[channelIndex%8], WHITE, BUTTON_HOVER, BUTTON_PRESSED, (Integer) null, -2); + onOffButton = createButton(cbCp5, name, text, _x, _y, _w, _h, 0, h2, 16, CHANNEL_COLORS[channelIndex%8], WHITE, BUTTON_HOVER, BUTTON_PRESSED, (Integer) null, -2); onOffButton.setCircularButton(true); onOffButton.onRelease(new CallbackListener() { public void controlEvent(CallbackEvent theEvent) { diff --git a/OpenBCI_GUI/TopNav.pde b/OpenBCI_GUI/TopNav.pde index 36be7ca7d..66c3fdefe 100644 --- a/OpenBCI_GUI/TopNav.pde +++ b/OpenBCI_GUI/TopNav.pde @@ -110,7 +110,7 @@ class TopNav { color _textColorNotActive = OPENBCI_DARKBLUE; color borderColor = OPENBCI_DARKBLUE; - if (colorScheme == COLOR_SCHEME_ALTERNATIVE_A) { + if (frontendTheme.isLegacyMode()) { _colorNotPressed = OPENBCI_BLUE; _textColorNotActive = WHITE; } @@ -139,7 +139,7 @@ class TopNav { color _textColorNotActive = OPENBCI_DARKBLUE; color borderColor = OPENBCI_DARKBLUE; - if (colorScheme == COLOR_SCHEME_ALTERNATIVE_A) { + if (frontendTheme.isLegacyMode()) { _colorNotPressed = SUBNAV_LIGHTBLUE; _textColorNotActive = WHITE; } @@ -203,14 +203,22 @@ class TopNav { color topNavBg; color subNavBg; - if (colorScheme == COLOR_SCHEME_ALTERNATIVE_A) { + if (frontendTheme.isLegacyMode()) { topNavBg = OPENBCI_BLUE; subNavBg = SUBNAV_LIGHTBLUE; logo = logo_white; - } else { + } else if (frontendTheme.isLightMode()) { topNavBg = WHITE; subNavBg = color(229); logo = logo_black; + } else if (frontendTheme.isDarkMode()) { + topNavBg = #030A12; + subNavBg = #102337; + logo = logo_white; + } else { + topNavBg = OPENBCI_BLUE; + subNavBg = SUBNAV_LIGHTBLUE; + logo = logo_white; } //Draw background rectangles for TopNav and SubNav @@ -258,7 +266,14 @@ class TopNav { tutorialSelector.draw(); //Draw Console Log Image on top of cp5 object - PImage _logo = (colorScheme == COLOR_SCHEME_DEFAULT) ? consoleImgBlue : consoleImgWhite; + PImage _logo; + if (frontendTheme.isLegacyMode() || frontendTheme.isDarkMode()) { + _logo = consoleImgWhite; + } else if (frontendTheme.isLightMode()) { + _logo = consoleImgBlue; + } else { + _logo = consoleImgBlue; + } image(_logo, debugButton.getPosition()[0] + 6, debugButton.getPosition()[1] + 2, 22, 22); //Draw camera image on top of cp5 object image(screenshotImgWhite, screenshotButton.getPosition()[0] + 6, screenshotButton.getPosition()[1] + 2, 22, 22); diff --git a/OpenBCI_GUI/W_Accelerometer.pde b/OpenBCI_GUI/W_Accelerometer.pde index 1fc78c17d..077fe53ac 100644 --- a/OpenBCI_GUI/W_Accelerometer.pde +++ b/OpenBCI_GUI/W_Accelerometer.pde @@ -341,7 +341,7 @@ class AccelerometerBar { plot.setPos(x + 36 + 4, y); //match Accelerometer plot position with Time Series plot.setDim(w - 36 - 4, h); plot.setMar(0f, 0f, 0f, 0f); - plot.setLineColor((int)channelColors[(NUM_ACCEL_DIMS)%8]); + plot.setLineColor((int)CHANNEL_COLORS[(NUM_ACCEL_DIMS)%8]); plot.setXLim(-numSeconds,0); //set the horizontal scale plot.setYLim(-_yLimit, _yLimit); //change this to adjust vertical scale //plot.setPointSize(2); diff --git a/OpenBCI_GUI/W_AnalogRead.pde b/OpenBCI_GUI/W_AnalogRead.pde index d2b6685af..e49f8759e 100644 --- a/OpenBCI_GUI/W_AnalogRead.pde +++ b/OpenBCI_GUI/W_AnalogRead.pde @@ -264,7 +264,7 @@ class AnalogReadBar{ plot.setPos(x + 36 + 4, y); plot.setDim(w - 36 - 4, h); plot.setMar(0f, 0f, 0f, 0f); - plot.setLineColor((int)channelColors[(auxValuesPosition)%8]); + plot.setLineColor((int)CHANNEL_COLORS[(auxValuesPosition)%8]); plot.setXLim(-3.2,-2.9); plot.setYLim(-200,200); plot.setPointSize(2); diff --git a/OpenBCI_GUI/W_BandPower.pde b/OpenBCI_GUI/W_BandPower.pde index 7043a04f6..45ba4d197 100644 --- a/OpenBCI_GUI/W_BandPower.pde +++ b/OpenBCI_GUI/W_BandPower.pde @@ -109,11 +109,11 @@ class W_BandPower extends WidgetWithSettings { ); //setting bg colors of histogram bars to match the color scheme of the channel colors w/ an opacity of 150/255 bp_plot.getHistogram().setBgColors(new color[] { - color((int)channelColors[6], 200), - color((int)channelColors[4], 200), - color((int)channelColors[3], 200), - color((int)channelColors[2], 200), - color((int)channelColors[1], 200), + color((int)CHANNEL_COLORS[6], 200), + color((int)CHANNEL_COLORS[4], 200), + color((int)CHANNEL_COLORS[3], 200), + color((int)CHANNEL_COLORS[2], 200), + color((int)CHANNEL_COLORS[1], 200), } ); //setting color of text label for each histogram bar on the x axis @@ -150,10 +150,7 @@ class W_BandPower extends WidgetWithSettings { super.draw(); pushStyle(); - //remember to refer to x,y,w,h which are the positioning variables of the Widget class - // Draw the third plot bp_plot.beginDraw(); - bp_plot.drawBackground(); bp_plot.drawBox(); bp_plot.drawXAxis(); bp_plot.drawYAxis(); @@ -161,10 +158,6 @@ class W_BandPower extends WidgetWithSettings { bp_plot.drawHistograms(); bp_plot.endDraw(); - //for this widget need to redraw the grey bar, bc the FFT plot covers it up... - fill(200, 200, 200); - rect(x, y - NAV_HEIGHT, w, NAV_HEIGHT); //button bar - popStyle(); bpChanSelect.draw(); } diff --git a/OpenBCI_GUI/W_DigitalRead.pde b/OpenBCI_GUI/W_DigitalRead.pde index 4e6272427..e8e402ece 100644 --- a/OpenBCI_GUI/W_DigitalRead.pde +++ b/OpenBCI_GUI/W_DigitalRead.pde @@ -215,15 +215,15 @@ class DigitalReadDot{ digitalInputVal = 0; if (digitalInputPin == 11) { - dot1Fill = channelColors[0]; + dot1Fill = CHANNEL_COLORS[0]; } else if (digitalInputPin == 12) { - dot1Fill = channelColors[1]; + dot1Fill = CHANNEL_COLORS[1]; } else if (digitalInputPin == 13) { - dot1Fill = channelColors[2]; + dot1Fill = CHANNEL_COLORS[2]; } else if (digitalInputPin == 17) { - dot1Fill = channelColors[3]; + dot1Fill = CHANNEL_COLORS[3]; } else { // 18 - dot1Fill = channelColors[4]; + dot1Fill = CHANNEL_COLORS[4]; } dotX = _x; diff --git a/OpenBCI_GUI/W_EMG.pde b/OpenBCI_GUI/W_EMG.pde index f53a6bc82..0d511172b 100644 --- a/OpenBCI_GUI/W_EMG.pde +++ b/OpenBCI_GUI/W_EMG.pde @@ -133,7 +133,7 @@ class W_Emg extends WidgetWithSettings { translate(currentX, currentY); //realtime - fill(channelColors[colorIndex], 200); + fill(CHANNEL_COLORS[colorIndex], 200); noStroke(); circle(2*colOffset/8, rowOffset / 2, scaleFactor * emgSettingsValues.getAverageuV(channel)); @@ -154,7 +154,7 @@ class W_Emg extends WidgetWithSettings { //draw normalized bar graph of uV w/ matching channel color noStroke(); - fill(channelColors[colorIndex], 200); + fill(CHANNEL_COLORS[colorIndex], 200); rect(_x, 3*_y + 1, _w, map(emgSettingsValues.getNormalizedChannelValue(channel), 0, 1, 0, (-1) * int((4*rowOffset/8)))); //draw background bar container for mapped uV value indication diff --git a/OpenBCI_GUI/W_EMGJoystick.pde b/OpenBCI_GUI/W_EMGJoystick.pde index 203d1e8ba..0144ccb17 100644 --- a/OpenBCI_GUI/W_EMGJoystick.pde +++ b/OpenBCI_GUI/W_EMGJoystick.pde @@ -275,7 +275,7 @@ class W_EmgJoystick extends WidgetWithSettings { pushStyle(); //Realtime - fill(channelColors[colorIndex], 200); + fill(CHANNEL_COLORS[colorIndex], 200); noStroke(); circle(circleX, circleY, scaleFactor * emgSettingsValues.averageuV[channel]); @@ -294,7 +294,7 @@ class W_EmgJoystick extends WidgetWithSettings { //Draw normalized bar graph of uV w/ matching channel color noStroke(); - fill(channelColors[colorIndex], 200); + fill(CHANNEL_COLORS[colorIndex], 200); rect(barX, barY, BAR_WIDTH, normalizedBAR_HEIGHTeight); //Draw background bar container for mapped uV value indication diff --git a/OpenBCI_GUI/W_FFT.pde b/OpenBCI_GUI/W_FFT.pde index fdf7ba292..7541fa0a9 100644 --- a/OpenBCI_GUI/W_FFT.pde +++ b/OpenBCI_GUI/W_FFT.pde @@ -161,7 +161,6 @@ class W_Fft extends WidgetWithSettings { //draw FFT Graph w/ all plots noStroke(); fftPlot.beginDraw(); - fftPlot.drawBackground(); fftPlot.drawBox(); fftPlot.drawXAxis(); fftPlot.drawYAxis(); @@ -169,17 +168,13 @@ class W_Fft extends WidgetWithSettings { //Update and draw active channels that have been selected via channel select for this widget for (int j = 0; j < fftChanSelect.getActiveChannels().size(); j++) { int chan = fftChanSelect.getActiveChannels().get(j); - fftPlot.setLineColor((int)channelColors[chan % 8]); + fftPlot.setLineColor((int)CHANNEL_COLORS[chan % 8]); //remap fft point arrays to fft plots fftPlot.setPoints(fftGplotPoints[chan]); fftPlot.drawLines(); } fftPlot.endDraw(); - //for this widget need to redraw the grey bar, bc the FFT plot covers it up... - fill(200, 200, 200); - rect(x, y - NAV_HEIGHT, w, NAV_HEIGHT); //button bar - popStyle(); fftChanSelect.draw(); diff --git a/OpenBCI_GUI/W_Spectrogram.pde b/OpenBCI_GUI/W_Spectrogram.pde index 83ab17302..31e4c31c2 100644 --- a/OpenBCI_GUI/W_Spectrogram.pde +++ b/OpenBCI_GUI/W_Spectrogram.pde @@ -143,9 +143,6 @@ class W_Spectrogram extends WidgetWithSettings { float scaleW = float(graphW) / dataImageW; float scaleH = float(graphH) / dataImageH; - - // Draw black background - drawBackground(); // Update spectrogram data if streaming if (currentBoard.isStreaming()) { @@ -162,13 +159,6 @@ class W_Spectrogram extends WidgetWithSettings { drawCenterLine(); } - private void drawBackground() { - pushStyle(); - fill(0); - rect(x, y, w, h); - popStyle(); - } - private void displaySpectrogramImage(float scaleW, float scaleH) { pushMatrix(); translate(graphX, graphY); diff --git a/OpenBCI_GUI/Widget.pde b/OpenBCI_GUI/Widget.pde index 4a0abafc3..111a22173 100644 --- a/OpenBCI_GUI/Widget.pde +++ b/OpenBCI_GUI/Widget.pde @@ -62,7 +62,8 @@ class Widget { public void draw(){ pushStyle(); noStroke(); - fill(255); + color backgroundColor = frontendTheme.getWidgetTheme().getBackgroundColor(); + fill(backgroundColor); rect(x,y-1,w,h+1); //draw white widget background popStyle();