Merge pull request #1054 from OpenBCI/5.1.0-second-team-review

retiutut · web-flow · commit 124ca353b6bd · 2022-05-11T15:05:10.000-05:00
5.1.0 second team review
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -17,6 +17,9 @@
 * Update Band Power widget and add Average Band Power data type to Networking Widget
 * Update ControlP5 Library to 2.3.3 and change ScrollableList behavior to be more consistent with other front-end libraries
 * Remove old multi-line filter buttons in TopNav that draw incorrectly on some PCs #1013
+* Minor UI/UX improvements to Spectrogram widget to increase clarity for all users
+* Add slower options for FFT data smoothing
+* Fix certain Textfield and TextArea fonts not drawing correctly on some Macs
 
 # v5.0.9
 
diff --git a/OpenBCI_GUI/ADS1299SettingsController.pde b/OpenBCI_GUI/ADS1299SettingsController.pde
@@ -387,7 +387,7 @@ class ADS1299SettingsController {
             .setPosition(0, 0)
             .setCaptionLabel("")
             .setSize(120, 20)
-            .setFont(f2)
+            .setFont(createFont("Arial", 15, true))
             .setFocus(false)
             .setColor(color(26, 26, 26))
             .setColorBackground(color(255, 255, 255)) // text field bg color
diff --git a/OpenBCI_GUI/ConsoleLog.pde b/OpenBCI_GUI/ConsoleLog.pde
@@ -65,11 +65,11 @@ static class ConsoleWindow extends PApplet implements Runnable {
 
         clipboardCopy = new ClipHelper();
         cp5 = new ControlP5(this);
-
+        PFont textAreaFont = createFont("Arial", 12, true);
         consoleTextArea = cp5.addTextarea("ConsoleWindow")
             .setPosition(0, headerHeight)
             .setSize(width, height - headerHeight)
-            .setFont(p5)
+            .setFont(textAreaFont)
             .setLineHeight(18)
             .setColor(color(242))
             .setColorBackground(color(42, 100))
diff --git a/OpenBCI_GUI/ControlPanel.pde b/OpenBCI_GUI/ControlPanel.pde
@@ -492,6 +492,7 @@ class SerialBox {
 
     private void createAutoConnectButton(String name, String text, int _x, int _y, int _w, int _h) {
         autoConnectButton = createSBButton(name, text, _x, _y, _w, _h);
+        autoConnectButton.setColorBackground(TURN_ON_GREEN);
         autoConnectButton.onRelease(new CallbackListener() {
             public void controlEvent(CallbackEvent theEvent) {
                 controlPanel.comPortBox.attemptAutoConnectCyton();
@@ -999,7 +1000,7 @@ class WifiBox {
             .setPosition(x + 90, y + 100)
             .setCaptionLabel("")
             .setSize(w - padding*2, 26)
-            .setFont(f2)
+            .setFont(createFont("Arial", 15, true))
             .setFocus(false)
             .setColor(color(26, 26, 26))
             .setColorBackground(color(255, 255, 255)) // text field bg color
@@ -1295,7 +1296,7 @@ class SessionDataBox {
             .setPosition(x + 60, y + 32)
             .setCaptionLabel("")
             .setSize(187, 26)
-            .setFont(f2)
+            .setFont(createFont("Arial", 15, true))
             .setFocus(false)
             .setColor(color(26, 26, 26))
             .setColorBackground(color(255, 255, 255)) // text field bg color
@@ -2097,7 +2098,7 @@ class GaleaBox {
             .setPosition(x + w - padding*2 - 60*2, y + 16 + padding*2)
             .setCaptionLabel("")
             .setSize(120 + padding, 26)
-            .setFont(f2)
+            .setFont(createFont("Arial", 15, true))
             .setFocus(false)
             .setColor(color(26, 26, 26))
             .setColorBackground(color(255, 255, 255)) // text field bg color
@@ -2296,7 +2297,7 @@ class BrainFlowStreamerBox {
             .setPosition(x + padding * 3, y + HEADER_H + padding*2)
             .setCaptionLabel("")
             .setSize(120, OBJECT_H)
-            .setFont(f2)
+            .setFont(createFont("Arial", 15, true))
             .setFocus(false)
             .setColor(color(26, 26, 26))
             .setColorBackground(color(255, 255, 255)) // text field bg color
@@ -2327,7 +2328,7 @@ class BrainFlowStreamerBox {
             .setPosition(x + padding*5 + w/2, y + HEADER_H + padding*2)
             .setCaptionLabel("")
             .setSize(50, OBJECT_H)
-            .setFont(f2)
+            .setFont(createFont("Arial", 15, true))
             .setFocus(false)
             .setColor(color(26, 26, 26))
             .setColorBackground(color(255, 255, 255)) // text field bg color
@@ -2527,7 +2528,7 @@ class StreamingBoardBox {
             .setPosition(x + padding * 3, y + headerH + padding*2)
             .setCaptionLabel("")
             .setSize(w / 3, objectH)
-            .setFont(f2)
+            .setFont(createFont("Arial", 15, true))
             .setFocus(false)
             .setColor(color(26, 26, 26))
             .setColorBackground(color(255, 255, 255)) // text field bg color
@@ -2544,7 +2545,7 @@ class StreamingBoardBox {
             .setPosition(x + padding*5 + w/2, y + headerH + padding*2)
             .setCaptionLabel("")
             .setSize(w / 5 + padding, objectH)
-            .setFont(f2)
+            .setFont(createFont("Arial", 15, true))
             .setFocus(false)
             .setColor(color(26, 26, 26))
             .setColorBackground(color(255, 255, 255)) // text field bg color
diff --git a/OpenBCI_GUI/FilterUI.pde b/OpenBCI_GUI/FilterUI.pde
@@ -315,9 +315,9 @@ class FilterUIPopup extends PApplet implements Runnable {
     private void createAllCp5Objects() {
         calculateXYForHeaderColumnsAndFooter();
         
-        createFilterSettingsSaveButton("saveFilterSettingsButton", "Save Settings", footerObjX[0], footerObjY, headerObjWidth, uiObjectHeight);
-        createFilterSettingsLoadButton("loadFilterSettingsButton", "Load Settings", footerObjX[1], footerObjY, headerObjWidth, uiObjectHeight);
-        createFilterSettingsDefaultButton("defaultFilterSettingsButton", "Reset Settings", footerObjX[2], footerObjY, headerObjWidth, uiObjectHeight);
+        createFilterSettingsSaveButton("saveFilterSettingsButton", "Save", footerObjX[0], footerObjY, headerObjWidth, uiObjectHeight);
+        createFilterSettingsLoadButton("loadFilterSettingsButton", "Load", footerObjX[1], footerObjY, headerObjWidth, uiObjectHeight);
+        createFilterSettingsDefaultButton("defaultFilterSettingsButton", "Reset", footerObjX[2], footerObjY, headerObjWidth, uiObjectHeight);
         
         createOnOffButtons();
         createTextfields();
diff --git a/OpenBCI_GUI/PopupMessage.pde b/OpenBCI_GUI/PopupMessage.pde
@@ -74,7 +74,9 @@ class PopupMessage extends PApplet implements Runnable {
             .setFont(p1)
             .toUpperCase(false)
             .setSize(20)
-            .setText(buttonMessage);
+            .setText(buttonMessage)
+            .getStyle()
+            .setMarginTop(-2);
     }
 
     @Override
diff --git a/OpenBCI_GUI/SessionSettings.pde b/OpenBCI_GUI/SessionSettings.pde
@@ -129,7 +129,7 @@ class SessionSettings {
     String[] fftMaxFrqArray = {"20 Hz", "40 Hz", "60 Hz", "100 Hz", "120 Hz", "250 Hz", "500 Hz", "800 Hz"};
     String[] fftVertScaleArray = {"10 uV", "50 uV", "100 uV", "1000 uV"};
     String[] fftLogLinArray = {"Log", "Linear"}; //share this with spectrogram also
-    String[] fftSmoothingArray = {"0.0", "0.5", "0.75", "0.9", "0.95", "0.98"};
+    String[] fftSmoothingArray = {"0.0", "0.5", "0.75", "0.9", "0.95", "0.98", "0.99", "0.999"};
     String[] fftFilterArray = {"Filtered", "Unfilt."};
 
     //Used to set text in dropdown menus when loading Accelerometer settings
@@ -159,7 +159,7 @@ class SessionSettings {
 
     //Used to set text in dropdown menus when loading Spectrogram Setings
     String[] spectMaxFrqArray = {"20 Hz", "40 Hz", "60 Hz", "100 Hz", "120 Hz", "250 Hz"};
-    String[] spectSampleRateArray = {"1 Hz", "5 hz", "10 Hz", "20 Hz", "40 Hz"};
+    String[] spectSampleRateArray = {"30 Min.", "6 Min.", "3 Min.", "1.5 Min.", "1 Min."};
 
     //Load Accel. dropdown variables
     int loadAccelVertScale;
diff --git a/OpenBCI_GUI/TopNav.pde b/OpenBCI_GUI/TopNav.pde
@@ -97,7 +97,7 @@ class TopNav {
         if (needToMakeSmoothingButton) {
             int pos_x = (int)filtersButton.getPosition()[0] + filtersButton.getWidth() + PAD_3;
             //Make smoothing button wider than most other topnav buttons to fit text comfortably
-            createSmoothingButton(getSmoothingString(), pos_x, SUBNAV_BUT_Y, SUBNAV_BUT_W + 40, SUBNAV_BUT_H, h4, 14, SUBNAV_LIGHTBLUE, WHITE);
+            createSmoothingButton(getSmoothingString(), pos_x, SUBNAV_BUT_Y, SUBNAV_BUT_W + 48, SUBNAV_BUT_H, h4, 14, SUBNAV_LIGHTBLUE, WHITE);
         }
         
         
diff --git a/OpenBCI_GUI/W_HeadPlot.pde b/OpenBCI_GUI/W_HeadPlot.pde
@@ -12,7 +12,7 @@
 ///////////////////////////////////////////////////,
 
 
-float[] smoothFac = new float[]{0.0, 0.5, 0.75, 0.9, 0.95, 0.98}; //used by FFT & Headplot
+float[] smoothFac = new float[]{0.0, 0.5, 0.75, 0.9, 0.95, 0.98, 0.99, 0.999}; //used by FFT & Headplot
 int smoothFac_ind = 3;    //initial index into the smoothFac array = 0.75 to start .. used by FFT & Head Plots
 
 class W_HeadPlot extends Widget {
diff --git a/OpenBCI_GUI/W_Networking.pde b/OpenBCI_GUI/W_Networking.pde
@@ -496,7 +496,7 @@ class W_Networking extends Widget {
         cp5_networking.addTextfield(name)
             .align(10,100,10,100)                   // Alignment
             .setSize(120,20)                         // Size of textfield
-            .setFont(f2)
+            .setFont(createFont("Arial", 15, true))
             .setFocus(false)                        // Deselects textfield
             .setColor(color(26,26,26))
             .setColorBackground(color(255,255,255)) // text field bg color
diff --git a/OpenBCI_GUI/W_Spectrogram.pde b/OpenBCI_GUI/W_Spectrogram.pde
@@ -14,6 +14,7 @@ class W_Spectrogram extends Widget {
     public ChannelSelect spectChanSelectTop;
     public ChannelSelect spectChanSelectBot;
     private boolean chanSelectWasOpen = false;
+    List<controlP5.Controller> cp5ElementsToCheck = new ArrayList<controlP5.Controller>();
 
     int xPos = 0;
     int hueLimit = 160;
@@ -70,7 +71,11 @@ class W_Spectrogram extends Widget {
         spectChanSelectTop = new ChannelSelect(pApplet, this, x, y, w, navH, "Spectrogram_Channels_Top");
         spectChanSelectBot = new ChannelSelect(pApplet, this, x, y + navH, w, navH, "Spectrogram_Channels_Bot");
         activateDefaultChannels();
-        spectChanSelectBot.hideChannelText();
+        spectChanSelectTop.setIsDualChannelSelect(true);
+        spectChanSelectBot.setIsDualChannelSelect(true);
+        spectChanSelectBot.setIsFirstRowChannelSelect(false);
+        cp5ElementsToCheck.addAll(spectChanSelectTop.getCp5ElementsForOverlapCheck());
+        cp5ElementsToCheck.addAll(spectChanSelectBot.getCp5ElementsForOverlapCheck());
 
         xPos = w - 1; //draw on the right, and shift pixels to the left
         prevW = w;
@@ -93,7 +98,7 @@ class W_Spectrogram extends Widget {
         //Note that these 3 dropdowns correspond to the 3 global functions below
         //You just need to make sure the "id" (the 1st String) has the same name as the corresponding function
         addDropdown("SpectrogramMaxFreq", "Max Freq", Arrays.asList(settings.spectMaxFrqArray), settings.spectMaxFrqSave);
-        addDropdown("SpectrogramSampleRate", "Samples", Arrays.asList(settings.spectSampleRateArray), settings.spectSampleRateSave);
+        addDropdown("SpectrogramSampleRate", "Window", Arrays.asList(settings.spectSampleRateArray), settings.spectSampleRateSave);
         addDropdown("SpectrogramLogLin", "Log/Lin", Arrays.asList(settings.fftLogLinArray), settings.spectLogLinSave);
 
         //Resize the height of the data image using default 
@@ -115,8 +120,10 @@ class W_Spectrogram extends Widget {
             //Allow spectrogram to flex size and position depending on if the channel select is open
             flexSpectrogramSizeAndPosition();
         }
-        
-        
+
+        if (spectChanSelectTop.isVisible()) {
+            lockElementsOnOverlapCheck(cp5ElementsToCheck);
+        }
         
         if (currentBoard.isStreaming()) {
             //Make sure we are always draw new pixels on the right
@@ -226,7 +233,6 @@ class W_Spectrogram extends Widget {
 
         spectChanSelectTop.draw();
         spectChanSelectBot.draw();
-        //if (spectChanSelectTop.isVisible()) spectChanSelectBot.forceDrawChecklist(dropdownIsActive);
         drawAxes(scaleW, scaleH);
         drawCenterLine();
     }
@@ -334,20 +340,27 @@ class W_Spectrogram extends Widget {
 
     void drawColorScaleReference() {
         int colorScaleHeight = 128;
+        //Dynamically scale the Log/Lin amplitude-to-color reference line. If it won't fit, don't draw it.
+        if (graphH < colorScaleHeight) {
+            colorScaleHeight = int(h * 1/2);
+            if (colorScaleHeight > graphH) {
+                return;
+            }
+        }
         pushStyle();
             //draw color scale reference to the right of the spectrogram
             for (int i = 0; i < colorScaleHeight; i++) {
-                float hueValue = hueLimit - map(i * 2, 0, 256, 0, hueLimit);
+                float hueValue = hueLimit - map(i * 2, 0, colorScaleHeight*2, 0, hueLimit);
                 if (settings.spectLogLinSave == 0) {
                     hueValue = map(log(hueValue) / log(10), 0, 2, 0, hueLimit);
                 }
                 //println(hueValue);
                 // colorMode is HSB, the range for hue is 256, for saturation is 100, brightness is 100.
                 colorMode(HSB, 256, 100, 100);
                 // color for stroke is specified as hue, saturation, brightness.
-                stroke(int(hueValue), 100, 80);
+                stroke(ceil(hueValue), 100, 80);
                 strokeWeight(10);
-                point(x + w - paddingRight/2 + 1, y + paddingTop + midLineY - colorScaleHeight/3 - 14 - i);
+                point(x + w - paddingRight/2 + 1, midLineY + colorScaleHeight/2 - i);
             }
         popStyle();
     }
diff --git a/OpenBCI_GUI/Widget.pde b/OpenBCI_GUI/Widget.pde
@@ -287,7 +287,7 @@ class Widget{
         }
     }
     
-    //For use with one Cp5 controller per class/widget
+    //For use with one Cp5 controller per class/widget. Can only be called once per widget during update loop.
     protected void lockElementOnOverlapCheck(controlP5.Controller c) {
         if (dropdownIsActive != previousDropdownIsActive) {
             //println(c.getName(), " lock == ", dropdownIsActive);
@@ -296,7 +296,7 @@ class Widget{
         }
     }
 
-    //For use with multiple Cp5 controllers per class/widget
+    //For use with multiple Cp5 controllers per class/widget. Can only be called once per widget during update loop.
     protected void lockElementsOnOverlapCheck(List<controlP5.Controller> listOfControllers) {
         if (dropdownIsActive != previousDropdownIsActive) {
             for (controlP5.Controller c : listOfControllers) {
@@ -382,6 +382,7 @@ void WidgetSelector(int n){
 // This is a helpful class that will add a channel select feature to a Widget
 class ChannelSelect {
     protected Widget widget;
+    private List<controlP5.Controller> cp5ElementsToCheck = new ArrayList<controlP5.Controller>();
     protected int x, y, w, h, navH, butToggleY;
     public float tri_xpos = 0;
     protected float chanSelectXPos = 0;
@@ -395,7 +396,13 @@ class ChannelSelect {
     protected boolean isVisible;
     public List<Integer> activeChan;
     public String chanDropdownName;
-    protected boolean showChannelText = true;
+    protected boolean isFirstRowChannelSelect = true;
+    protected boolean isDualChannelSelect = false;
+
+    private int labelWidth = 0;
+    private int labelSpacer = 0;
+    private String firstRowLabel = "Top";
+    private String secondRowLabel = "Bottom";
 
     ChannelSelect(PApplet _parent, Widget _widget, int _x, int _y, int _w, int _navH, String checkBoxName) {
         widget = _widget;
@@ -427,23 +434,23 @@ class ChannelSelect {
         }
         //Update position of buttons on every update and check for UI overlap
         for (int i = 0; i < nchan; i++) {
-            channelButtons.get(i).setPosition(x + (button_spacer*(i+1)) + (buttonW*i), y + offset);
-            widget.lockElementOnOverlapCheck(channelButtons.get(i));
+            channelButtons.get(i).setPosition(x + labelWidth + labelSpacer + (button_spacer*(i+1)) + (buttonW*i), y + offset);
         }
     }
 
     public void draw() {
+        chanSelectXPos = x + 2;
         pushStyle();
         noStroke();
-        if (showChannelText) {
+        if (isFirstRowChannelSelect) {
             //change "Channels" text color and triangle color on hover
             if (channelSelectHover) {
                 fill(OPENBCI_BLUE);
             } else {
                 fill(0);
             }
             textFont(p5, 12);
-            chanSelectXPos = x + 2;
+            
             text("Channels", chanSelectXPos, y - 6);
             tri_xpos = x + textWidth("Channels") + 7;
 
@@ -468,20 +475,27 @@ class ChannelSelect {
         if (isVisible) {
             //Draw channel select buttons
             cp5_chanSelect.draw();
-        }
-        
-        //Draw a border around toggle buttons to indicate if channel is on or off
-        if (isVisible) {
+            //Draw a border around toggle buttons to indicate if channel is on or off
             pushStyle();
             int weight = 1;
             strokeWeight(weight);
             noFill();
             for (int i = 0; i < nchan; i++) {
                 color c = currentBoard.isEXGChannelActive(i) ? color(0,255,0,255) : color(255,0,0,255);
                 stroke(c);
-                rect(x + (button_spacer*(i+1)) + (buttonW*i) - weight, y + offset - weight, channelButtons.get(i).getWidth() + weight, channelButtons.get(i).getHeight() + weight);
+                rect(x + labelWidth + labelSpacer + (button_spacer*(i+1)) + (buttonW*i) - weight, y + offset - weight, channelButtons.get(i).getWidth() + weight, channelButtons.get(i).getHeight() + weight);
             }
             popStyle();
+            //Draw label 
+            if (isDualChannelSelect) {
+                pushStyle();
+                fill(0);
+                textFont(p5, 12);
+                textAlign(CENTER, TOP);
+                String label = isFirstRowChannelSelect ? firstRowLabel : secondRowLabel;
+                text(label, x + labelSpacer + labelWidth/2, y + offset);
+                popStyle();
+            }
         }
     }
 
@@ -514,6 +528,7 @@ class ChannelSelect {
             channelButtons.add(
                 createButton("ch"+(i+1), (i+1), true, x + (button_spacer*(i+2)) + (buttonW*i), y + offset, buttonW, buttonH)
             );
+            cp5ElementsToCheck.add((controlP5.Controller)channelButtons.get(i));
         }
     }
 
@@ -550,12 +565,28 @@ class ChannelSelect {
         return myButton;
     }
 
-    public void showChannelText() {
-        showChannelText = true;
+    public void setIsFirstRowChannelSelect(boolean b) {
+        isFirstRowChannelSelect = b;
+    }
+
+    public void setIsDualChannelSelect(boolean b) {
+        isDualChannelSelect = b;
+        if (isDualChannelSelect) {
+            labelWidth = 36;
+            labelSpacer = 4;
+        }
+    }
+
+    public List<controlP5.Controller> getCp5ElementsForOverlapCheck() {
+        return cp5ElementsToCheck;
+    }
+
+    public void setFirstRowLabel(String s) {
+        firstRowLabel = s;
     }
 
-    public void hideChannelText() {
-        showChannelText = false;
+    public void setSecondRowLabel(String s) {
+        secondRowLabel = s;
     }
 
     public boolean isVisible() {

Original file line number	Diff line number	Diff line change
`@@ -97,7 +97,7 @@ class TopNav {`
`97`	`97`	`if (needToMakeSmoothingButton) {`
`98`	`98`	`int pos_x = (int)filtersButton.getPosition()[0] + filtersButton.getWidth() + PAD_3;`
`99`	`99`	`//Make smoothing button wider than most other topnav buttons to fit text comfortably`
`100`		`- createSmoothingButton(getSmoothingString(), pos_x, SUBNAV_BUT_Y, SUBNAV_BUT_W + 40, SUBNAV_BUT_H, h4, 14, SUBNAV_LIGHTBLUE, WHITE);`
	`100`	`+ createSmoothingButton(getSmoothingString(), pos_x, SUBNAV_BUT_Y, SUBNAV_BUT_W + 48, SUBNAV_BUT_H, h4, 14, SUBNAV_LIGHTBLUE, WHITE);`
`101`	`101`	`}`
`102`	`102`
`103`	`103`