UX Clarity Improvements for Spectrogram

Author: retiutut

CHANGELOG.md

@@ -17,6 +17,7 @@
 * 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
 
 # v5.0.9
 

OpenBCI_GUI/SessionSettings.pde

@@ -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;

OpenBCI_GUI/W_Spectrogram.pde

@@ -93,7 +93,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 
@@ -334,20 +334,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();
     }