Add labels to spectrogram channel select aka DualChannelSelect

Author: retiutut

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;
@@ -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();
     }

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() {