Update UI and UX for popup windows across GUI

Author: retiutut

OpenBCI_GUI/ConsoleLog.pde

@@ -60,9 +60,13 @@ static class ConsoleWindow extends PApplet implements Runnable {
 
         logApplet = this;
 
-        surface.setAlwaysOnTop(true);
+        surface.setAlwaysOnTop(false);
         surface.setResizable(true);
 
+        Frame frame = ( (PSurfaceAWT.SmoothCanvas) ((PSurfaceAWT)surface).getNative()).getFrame();
+        frame.toFront();
+        frame.requestFocus();
+
         clipboardCopy = new ClipHelper();
         cp5 = new ControlP5(this);
         PFont textAreaFont = createFont("Arial", 12, true);

OpenBCI_GUI/EmgSettingsUI.pde

@@ -13,7 +13,7 @@ class EmgSettingsUI extends PApplet implements Runnable {
 
     private ControlP5 emgCp5;
     private int x, y, w, h;
-    private final int HEADER_PADDING = 22;
+    private final int HEADER_HEIGHT = 55;
     private final int FOOTER_PADDING = 80;
     private final int PADDING_3 = 3;
     private final int PADDING_12 = 12;
@@ -32,6 +32,10 @@ class EmgSettingsUI extends PApplet implements Runnable {
     private int footerObjY = 0;
     private int[] footerObjX = new int[NUM_FOOTER_OBJECTS];
 
+    private final color HEADER_COLOR = OPENBCI_BLUE;
+    private final color BACKGROUND_COLOR = GREY_235;
+    private final color LABEL_COLOR = WHITE;
+
     private final int defaultWidth = 600;
     private final int defaultHeight = 600;
 
@@ -79,7 +83,7 @@ class EmgSettingsUI extends PApplet implements Runnable {
         x = 0;
         y = 0;
         w = defaultWidth;
-        h = HEADER_PADDING + (channelCount * ROW_HEIGHT) + FOOTER_PADDING;
+        h = HEADER_HEIGHT + (channelCount * ROW_HEIGHT) + FOOTER_PADDING;
     }
 
     @Override
@@ -96,6 +100,10 @@ class EmgSettingsUI extends PApplet implements Runnable {
         surface.setAlwaysOnTop(false);
         surface.setResizable(false);
 
+        Frame frame = ( (PSurfaceAWT.SmoothCanvas) ((PSurfaceAWT)surface).getNative()).getFrame();
+        frame.toFront();
+        frame.requestFocus();
+
         //Instantiate local cp5 for this box. This allows extra control of drawing cp5 elements specifically inside this class.
         emgCp5 = new ControlP5(ourApplet);
         emgCp5.setGraphics(ourApplet, 0,0);
@@ -109,6 +117,11 @@ class EmgSettingsUI extends PApplet implements Runnable {
         clear();
         scene();
 
+        // Draw header
+        noStroke();
+        fill(HEADER_COLOR);
+        rect(0, 0, width, HEADER_HEIGHT);
+
         emgSettingsValues = dataProcessing.emgSettings.values;
 
         checkIfSessionWasClosed();
@@ -139,7 +152,7 @@ class EmgSettingsUI extends PApplet implements Runnable {
 
         int colWidth = (width / NUM_COLUMNS);
         int colOffset = colWidth / 2;
-        int labelY = y + HEADER_PADDING / 2;
+        int labelY = y + HEADER_HEIGHT / 2;
         channelColumnLabel.setPosition(x + colOffset, labelY);
         smoothLabel.setPosition(x + colOffset + colWidth, labelY);
         uvLimitLabel.setPosition(x + colOffset + colWidth*2, labelY);
@@ -153,10 +166,7 @@ class EmgSettingsUI extends PApplet implements Runnable {
 
     private void scene() {
         // Draw background
-        background(OPENBCI_DARKBLUE);
-        stroke(204);
-        fill(238);
-        rect(0, 0, width, height);
+        background(BACKGROUND_COLOR);
     }
 
     @Override
@@ -231,7 +241,7 @@ class EmgSettingsUI extends PApplet implements Runnable {
 
         for (int i = 0; i < channelCount; i++) {
             int dropdownX = x + DROPDOWN_SPACER * 2 + dropdownWidth;
-            dropdownYPositions[i] = HEADER_PADDING + int(y + ((ROW_HEIGHT) * i) + (((ROW_HEIGHT) - DROPDOWN_HEIGHT) / 2));
+            dropdownYPositions[i] = HEADER_HEIGHT + int(y + ((ROW_HEIGHT) * i) + (((ROW_HEIGHT) - DROPDOWN_HEIGHT) / 2));
             final int buttonXIncrement = DROPDOWN_SPACER + dropdownWidth;
 
             smoothLists[i].setPosition(dropdownX, dropdownYPositions[i]);
@@ -277,17 +287,17 @@ class EmgSettingsUI extends PApplet implements Runnable {
 
         //Create column labels
         color labelBG = color(255,255,255,0);
-        color labelTxt = OPENBCI_DARKBLUE;
+        color labelTxt = WHITE;
         int colWidth = (w / NUM_COLUMNS);
         int colOffset = colWidth / 2;
-        int labelY = y + HEADER_PADDING / 2;
-        channelColumnLabel = new TextBox("Channel", x + colOffset, labelY, labelTxt, labelBG, 12, h5, CENTER, TOP);
-        smoothLabel = new TextBox("Smooth", x + colOffset + colWidth, labelY, labelTxt, labelBG, 12, h5, CENTER, TOP);
-        uvLimitLabel = new TextBox("uV Limit", x + colOffset + colWidth*2, labelY, labelTxt, labelBG, 12, h5, CENTER, TOP);
-        creepIncLabel = new TextBox("Creep +", x + colOffset + colWidth*3, labelY, labelTxt, labelBG, 12, h5, CENTER, TOP);
-        creepDecLabel = new TextBox("Creep -", x + colOffset + colWidth*4, labelY, labelTxt, labelBG, 12, h5, CENTER, TOP);
-        minDeltaUvLabel = new TextBox("Min \u0394uV", x + colOffset + colWidth*5, labelY, labelTxt, labelBG, 12, h5, CENTER, TOP);
-        lowLimitLabel = new TextBox("Low Limit", x + colOffset + colWidth*6, labelY, labelTxt, labelBG, 12, h5, CENTER, TOP);
+        int labelY = y + HEADER_HEIGHT / 2;
+        channelColumnLabel = new TextBox("Channel", x + colOffset, labelY, labelTxt, labelBG, 12, h3, CENTER, TOP);
+        smoothLabel = new TextBox("Smooth", x + colOffset + colWidth, labelY, labelTxt, labelBG, 12, h3, CENTER, TOP);
+        uvLimitLabel = new TextBox("uV Limit", x + colOffset + colWidth*2, labelY, labelTxt, labelBG, 12, h3, CENTER, TOP);
+        creepIncLabel = new TextBox("Creep +", x + colOffset + colWidth*3, labelY, labelTxt, labelBG, 12, h3, CENTER, TOP);
+        creepDecLabel = new TextBox("Creep -", x + colOffset + colWidth*4, labelY, labelTxt, labelBG, 12, h3, CENTER, TOP);
+        minDeltaUvLabel = new TextBox("Min \u0394uV", x + colOffset + colWidth*5, labelY, labelTxt, labelBG, 12, h3, CENTER, TOP);
+        lowLimitLabel = new TextBox("Low Limit", x + colOffset + colWidth*6, labelY, labelTxt, labelBG, 12, h3, CENTER, TOP);
 
         createAllDropdowns();
     }

OpenBCI_GUI/FilterUI.pde

@@ -37,6 +37,7 @@ class FilterUIPopup extends PApplet implements Runnable {
 
     private color headerColor = OPENBCI_BLUE;
     private color buttonColor = OPENBCI_BLUE;
+    private color backgroundColor = GREY_235;
 
     private ControlP5 cp5;
 
@@ -135,6 +136,10 @@ class FilterUIPopup extends PApplet implements Runnable {
         surface.setAlwaysOnTop(false);
         surface.setResizable(false);
 
+        Frame frame = ( (PSurfaceAWT.SmoothCanvas) ((PSurfaceAWT)surface).getNative()).getFrame();
+        frame.toFront();
+        frame.requestFocus();
+
         cp5 = new ControlP5(this);
         cp5.setGraphics(this, 0, 0);
         cp5.setAutoDraw(false);
@@ -169,10 +174,7 @@ class FilterUIPopup extends PApplet implements Runnable {
         pushStyle();
 
         // Draw background
-        background(OPENBCI_DARKBLUE);
-        stroke(204);
-        fill(238);
-        rect(0, 0, width, height);
+        background(backgroundColor);
 
         // Draw visual feedback that a channel was modified
         // When a user interacts with an object for a channel, it will highlight blue and fade out

OpenBCI_GUI/OpenBCI_GUI.pde

@@ -1030,7 +1030,7 @@ void drawStartupError() {
     pushStyle();
     background(OPENBCI_DARKBLUE);
     stroke(204);
-    fill(238);
+    fill(GREY_235);
     rect((width - w)/2, (height - h)/2, w, h);
     noStroke();
     fill(217, 4, 4);