Feature Request: GUI dark mode

[projectmentor]

Is it possible to have an alternate css color scheme? Something like solarized dark for people with TBI and concussion it is difficult to visually process bright white background. I just started here and would be willing to help once i get up to speed on the documentations.

[retiutut]

@projectmentor I am highly in favor since you have specifically requested an accommodation! Will add this to the next Software Team meeting. 💯

[retiutut]

Currently, we have an alternate color scheme.

To change to the alternate color scheme, use '{'.
https://docs.openbci.com/docs/06Software/01-OpenBCISoftware/GUIDocs#expert-mode

So, we will either be adding a third theme (dark mode), or replacing the alternate color scheme with dark mode.

Thank you for requesting this!

[Dorson]

Have a look at this simple example. Unlimited color themes possible:

https://dorson.github.io/CSS-Dark-Mode-and-color-switch/

[MaxJackson]

I'm thinking about picking this up and working on it! Would it make sense to have a 'Dark Mode' button available in the settings drop-down menu? If so, would it also make sense to move the 'alternate color scheme' configuration option over there too?

[retiutut]

Sure, but behind the scenes I think we should make a "Style" class, where the mode can change and everywhere else says style.getWidgetBackgroundColor() etc.

[retiutut]

@MaxJackson +1 priority bump. Thank you for supporting this feature request! Hopefully, this can be something everyone can enjoy and use.

[MaxJackson]

@retiutut I'm debating between

• putting the toggle functionality in the ControlPanel and having it be a setting that the user can only toggle when initializing a session
• putting the toggle functionality in with the configOptions buttons and letting the user toggle it at any time

From what I can tell the first option will be much easier to implement, since the second option will require implementing a updateNavButtonsBasedOnColorScheme() analogue touching everything with a color we want to change.

Do you have any input/considerations before I go ahead and implement the first option?

[MaxJackson]

@retiutut I added a Dark Mode / Light Mode toggle to the control panel and added dark mode functionality to every widget available in the synthetic data mode: check out https://github.com/MaxJackson/OpenBCI_GUI/tree/dark-mode-toggle to see where I'm going with this.

[retiutut]

It's kind of all over the place. This is why I mentioned making a style class.

[MaxJackson]

Great! Thanks for the feedback. I'm new to this project and to Processing in general, so I appreciate the guidance.

[MaxJackson]

I'll do my best to implement your suggestion and keep you in the loop :)

[retiutut]

I can try to get to this very soon. I can use this initial commit to get started.

[retiutut]

@MaxJackson Can you share a screenshot of what you tried? That will also help.

[MaxJackson]

Awesome, glad I could contribute :D

[MaxJackson]

Here's how it renders:

[retiutut]

Here is the commit for later:
MaxJackson@5ef61f7

[retiutut]

Awesome! Thanks for getting this started. This is a great sign that it's time to knock out this issue.

[MaxJackson]

Here's how I'm setting things up for now, generating arrays of colors or int(for black/white colors only)

Then I grab those colors in the widgets with (e.g.)

/// before the widget constructor
int thisWidgetFontColor = widgetFontColors.get(mainColorScheme);
color thisWidgetBackgroundColor = widgetBackgroundColors[mainColorScheme];
color thisGraphBackgroundColor = graphBackgroundColors[mainColorScheme];
int thisBoxLineColor = boxLineColors.get(mainColorScheme);
int thisGraphLineColor = graphLineColors.get(mainColorScheme);

// when initializing the plot
plot.setAllFontProperties("Arial", thisWidgetFontColor, 14);
plot.setBgColor(thisWidgetBackgroundColor);
plot.setBoxBgColor(thisGraphBackgroundColor);
plot.setBoxLineColor(thisBoxLineColor);
plot.setGridLineColor(thisGraphLineColor);

[MaxJackson]

I added some

fill(thisWidgetBackgroundColor);
rect(x, y, w, h);

when the widget was more complex than the graph itself.

[MaxJackson]

Consolidating the structure that contains the colors is certainly do-able; what also remains is

• evaluating the color scheme and checking consistency across widgets
• implementing dark mode in non-synthetic data mode widgets
• highlighting "LIGHT MODE" as the default when initializing the app for the first time

[MaxJackson]

Thank you for your patience in reviewing and considering this! I'm happy to do the heavy lifting on this if you provide feedback and guidance. Let me know if you guys have a contributor slack/discord where there could be more real-time communication around this work.

[retiutut]

Sure, but behind the scenes I think we should make a "Style" class, where the mode can change and everywhere else says style.getWidgetBackgroundColor() etc.

But there are some UI changes I'm working on already. So I was going to say this fits with what I was already working on. v5.0.2 should be the "UI update", and this issue would be a great fit. Control Panel is very messy and is being cleaned up some. The main culprit are the buttons. Global variables are only being removed not added.... there's a lot to get into...

To be more specific, the following ui's are about to change: ControlPanel, HardwareSettingsController, and Removed FPS Button.

I think it would fit better in the "Settings" tab off to the top-right, and it could be a ScrollableList or MenuList. "Settings" tab was not coded well (my fault) and needs to be cleaned up, and this could be added. Might have time to do it this week, and I we can jam on the Pull Request together once I can get a framework in place.

Historically, the GUI had many components that were "thrown together" by many different people at different times. Now, the software team wants to go for "bug free, fully functional". So let's try to do this in a clean and efficient manner. I'll point out the specifics in the code in the Pull Request.

FYI: A low priority and WIP issue is replacing button_obci with ControlP5.Button class. It's much nicer, and it's possible to modify ControlP5 and build new version if we really have to at some point.

[MaxJackson]

Got it, that all sounds good. It sounds like I picked this up at a time of transition for a lot of the UI. Keep me in the loop, I'll be looking forward to collab-ing on this if it's something that makes sense to do :)

In the meantime I'll check out the button_obci->ControlP5.Button issue. Thanks again for the thoughtful feedback, I really appreciate the work you're putting in to make this project amazing.

[retiutut]

In the meantime I'll check out the button_obci->ControlP5.Button issue. Thanks again for the thoughtful feedback, I really appreciate the work you're putting in to make this project amazing.

Here is the a example of a self-contained cp5 instance in the SessionDataBox. This was recently converted, and will help me convert the rest of Control Panel classes. It removes practically all of the mousePressed() mouseReleased() code.

OpenBCI_GUI/OpenBCI_GUI/ControlPanel.pde

Line 1585 in 44e8993

class SessionDataBox {

There is also a tooltip that needs to be added to buttons for Help text.

You'll notice a callback listener is assigned close to the code where the button is created, and inside the class where it is drawn. In this way, the code is "more together" rather than "spread out".

[retiutut]

GUI v5.0.2 "The UI Update" now has almost the entire GUI's style defined in one place now (OpenBCI_GUI.pde). This was a significant effort to unify the UI objects into the ControlP5 library (which I updated, now v2.3.1 will show on GUI startup).

It is now possible to try and complete this ticket.

[retiutut]

GUI v5.0.4 has almost all of the colors used consolidated as global variables in OpenBCI_GUI.pde.

I would like to add this as a feature for GUI v5.1.0 on the grounds of increasing accessibility for all users.

• Create new "Style" class with themes: "OpenBCI" (default), "OpenBCI Dark", "OpenBCI Light".
• Make it possible for GUI to load user preferred theme on App start. This might involve making a new class caledl "GUI Settings", which is quite separate from Hardware and Session settings.
• Apply Style class to TopNav
• Apply Style class to ControlPanel
• Apply Style class to Popup window class
• Apply Style class to Widgets.

[retiutut]

It's become obvious that this should be a higher priority for GUI v7 as it could help with readability and accessibility.

[retiutut]

Use code from #1063