Dropdown Scrollable List needs two taps to open or select an item

On my Samsung tablet it’s pretty consistent, usually just a single touch on the menu items to select one of them. If the menu is closed after a selection has been made then it sometimes takes two touches to drop the menu again. It did not trap stray touches on the window outside of the control like your demo and is less code. Whether its two touches or one touch is no big deal in the mobile device arena in my opinion. As I recall there have always been issues trying to use cp5 controls initially designed for Java mode in Android mode. That’s why we have special Android widgets created with code meant to run in Android. It’s your project so whatever widget you choose will be fine.

thanks, I just want to find something that works the way I want. another option would be to drop Processing completely and try Android Studio, but I would like to keep trying because I already know a little bit of processing and I could perhaps interact better with my arduino board, as the code is similar. perhaps I will have to leave the cp5 alone. I have been looking at that github page you linked above. it does some nice stuff. Perhaps I could use some of those examples, for example combine a button with a list. The code is a bit scary though :slight_smile:

Been having a long chat with Chat GPT :slight_smile: and we came up with this:

// Define screen scaling units
float wUnit, hUnit;

// Lists and buttons
String[] list1Items = {"Function 1", "Function 2", "Function 3"};
String[] list2Items = {"0", "1", "2"};
String[] list3Items = {"Option A", "Option B", "Option C"};

boolean isList1Visible = false;
boolean isList2Visible = false;
boolean isList3Visible = false;

int selectedList2Value = 0;
String selectedList3Value = list3Items[0];  // Default to "Option A"
String button3Text = selectedList3Value;  // Button 3 should show "Option A"
String selectedFunction = "None";  // Stores selected function from List 1

void setup() {
  fullScreen();
  
  // Define relative units for scaling
  wUnit = width / 1000.0;
  hUnit = height / 1000.0;
}

void draw() {
  background(255, 190, 10);
  
  drawButton("Open List 1", wUnit * 100, hUnit * 50, wUnit * 250, hUnit * 80);
  drawButton("Open List 2", wUnit * 375, hUnit * 50, wUnit * 250, hUnit * 80);
  drawButton(button3Text, wUnit * 650, hUnit * 50, wUnit * 250, hUnit * 80);

  textAlign(CENTER, CENTER);
  textSize(hUnit * 30);
  fill(0);
  text("Selected Function: " + selectedFunction, width / 2, hUnit * 550);
  text("Selected List 2 Value: " + selectedList2Value, width / 2, hUnit * 600);
  text("Selected List 3 Value: " + selectedList3Value, width / 2, hUnit * 650);
  
  if (isList1Visible) drawList(list1Items, wUnit * 100, hUnit * 150, wUnit * 250, hUnit * 300, 1);
  if (isList2Visible) drawList(list2Items, wUnit * 375, hUnit * 150, wUnit * 250, hUnit * 300, 2);
  if (isList3Visible) drawList(list3Items, wUnit * 650, hUnit * 150, wUnit * 250, hUnit * 300, 3);
}

void drawButton(String text, float x, float y, float w, float h) {
  fill(50, 50, 200);
  rect(x, y, w, h, 10);
  
  fill(255);
  textSize(hUnit * 25);
  textAlign(CENTER, CENTER);
  text(text, x + w / 2, y + h / 2);
}

void drawList(String[] items, float x, float y, float w, float h, int listNumber) {
  fill(255);
  rect(x, y, w, h, 10);
  
  for (int i = 0; i < items.length; i++) {
    float itemY = y + i * (h / items.length);
    
    // Commenting out the green highlight for selected items in lists 2 and 3
    
     //if (listNumber == 2 && selectedList2Value == i) fill(0, 255, 0);
     //else if (listNumber == 3 && selectedList3Value.equals(items[i])) fill(0, 255, 0);
     //else fill(255);
     fill(255);
    
    rect(x, itemY, w, h / items.length);
    
    fill(0);
    textSize(hUnit * 25);
    textAlign(CENTER, CENTER);
    text(items[i], x + w / 2, itemY + (h / items.length) / 2);
  }
}

void mousePressed() {
  if (isList1Visible) handleListClick(list1Items, wUnit * 100, hUnit * 150, wUnit * 250, hUnit * 300, 1);
  if (isList2Visible) handleListClick(list2Items, wUnit * 375, hUnit * 150, wUnit * 250, hUnit * 300, 2);
  if (isList3Visible) handleListClick(list3Items, wUnit * 650, hUnit * 150, wUnit * 250, hUnit * 300, 3);
  
  if (mouseX > wUnit * 100 && mouseX < wUnit * 350 && mouseY > hUnit * 50 && mouseY < hUnit * 130) toggleList(1);
  if (mouseX > wUnit * 375 && mouseX < wUnit * 625 && mouseY > hUnit * 50 && mouseY < hUnit * 130) toggleList(2);
  if (mouseX > wUnit * 650 && mouseX < wUnit * 900 && mouseY > hUnit * 50 && mouseY < hUnit * 130) toggleList(3);
}

void toggleList(int listNumber) {
  if (listNumber == 1) isList1Visible = !isList1Visible;
  if (listNumber == 2) isList2Visible = !isList2Visible;
  if (listNumber == 3) isList3Visible = !isList3Visible;
}

void handleListClick(String[] items, float x, float y, float w, float h, int listNumber) {
  if (mouseX > x && mouseX < x + w && mouseY > y && mouseY < y + h) {
    int index = int((mouseY - y) / (h / items.length));
    if (index >= 0 && index < items.length) {
      if (listNumber == 1) {
        selectedFunction = items[index];  // Update the selected function
        println("Function " + (index + 1) + " triggered");
      }
      if (listNumber == 2) selectedList2Value = index;
      if (listNumber == 3) {
        selectedList3Value = items[index];
        button3Text = selectedList3Value;
      }
    }
  }
  
  isList1Visible = false;
  isList2Visible = false;
  isList3Visible = false;
}

1 Like

Looks like AI RollYourOwn, but it works pretty well. May be a keeper.

Yeah… still needs improving. Me and my Buddy are working on it :wink: and I am learning… :grinning:

Check this one, it is the latest…

// Define screen scaling units
float wUnit, hUnit;

// Lists and buttons
String[] list1Items = {"Function 1", "Function 2", "Function 3"};
String[] list2Items = {"0", "1", "2"};
String[] list3Items = {"Option A", "Option B", "Option C"};

boolean isList1Visible = false;
boolean isList2Visible = false;
boolean isList3Visible = false;

int selectedList2Value = 0;
String selectedList3Value = list3Items[0];  // Default to "Option A"
String button3Text = selectedList3Value;  // Button 3 should show "Option A"
String selectedFunction = "None";  // Stores selected function from List 1

void setup() {
  orientation(PORTRAIT);
  fullScreen();
  
  // Define relative units for scaling
  wUnit = width / 1000.0;
  hUnit = height / 1000.0;
}

void draw() {
  background(255, 190, 10);
  
  drawButton("Open List 1", wUnit * 100, hUnit * 50, wUnit * 250, hUnit * 80, 1);
drawButton("Open List 2", wUnit * 375, hUnit * 50, wUnit * 250, hUnit * 80, 2);
drawButton(button3Text, wUnit * 650, hUnit * 50, wUnit * 250, hUnit * 80, 3);


  textAlign(CENTER, CENTER);
  textSize(hUnit * 30);
  fill(0);
  text("Selected Function: " + selectedFunction, width / 2, hUnit * 550);
  text("Selected List 2 Value: " + selectedList2Value, width / 2, hUnit * 600);
  text("Selected List 3 Value: " + selectedList3Value, width / 2, hUnit * 650);
  
  if (isList1Visible) drawList(list1Items, wUnit * 100, hUnit * 150, wUnit * 250, hUnit * 300, 1);
  if (isList2Visible) drawList(list2Items, wUnit * 375, hUnit * 150, wUnit * 250, hUnit * 300, 2);
  if (isList3Visible) drawList(list3Items, wUnit * 650, hUnit * 150, wUnit * 250, hUnit * 300, 3);
}
/*
void drawButton(String text, float x, float y, float buttonWidth, float buttonHeight, int listNumber) {
    fill(100);
    rect(x, y, buttonWidth, buttonHeight, 10);

    fill(255);
    textAlign(CENTER, CENTER);
    float textSizeFactor = 0.2;  // Adjust this value for better scaling
    textSize(buttonWidth * textSizeFactor);
    text(text, x + buttonWidth / 2, y + buttonHeight / 2);
}
*/
void drawButton(String text, float x, float y, float buttonWidth, float buttonHeight, int listNumber) {
    fill(100);
    rect(x, y, buttonWidth, buttonHeight, 10);

    fill(255);
    textAlign(CENTER, CENTER);
    
    // Set text size based on button height (so it fits well)
    textSize(buttonHeight * 0.25);  // Adjust 0.5 if text is still too big/small
    
    text(text, x + buttonWidth / 2, y + buttonHeight / 2);
}


void drawList(String[] items, float x, float y, float w, float h, int listNumber) {
  fill(255);
  rect(x, y, w, h, 10);
  
  for (int i = 0; i < items.length; i++) {
    float itemY = y + i * (h / items.length);
    
    // Commenting out the green highlight for selected items in lists 2 and 3
    
     //if (listNumber == 2 && selectedList2Value == i) fill(0, 255, 0);
     //else if (listNumber == 3 && selectedList3Value.equals(items[i])) fill(0, 255, 0);
     //else fill(255);
     fill(255);
    
    rect(x, itemY, w, h / items.length);
    
    fill(0);
    textSize(hUnit * 25);
    textAlign(CENTER, CENTER);
    text(items[i], x + w / 2, itemY + (h / items.length) / 2);
  }
}

void mousePressed() {
  if (isList1Visible) handleListClick(list1Items, wUnit * 100, hUnit * 150, wUnit * 250, hUnit * 300, 1);
  if (isList2Visible) handleListClick(list2Items, wUnit * 375, hUnit * 150, wUnit * 250, hUnit * 300, 2);
  if (isList3Visible) handleListClick(list3Items, wUnit * 650, hUnit * 150, wUnit * 250, hUnit * 300, 3);
  
  if (mouseX > wUnit * 100 && mouseX < wUnit * 350 && mouseY > hUnit * 50 && mouseY < hUnit * 130) toggleList(1);
  if (mouseX > wUnit * 375 && mouseX < wUnit * 625 && mouseY > hUnit * 50 && mouseY < hUnit * 130) toggleList(2);
  if (mouseX > wUnit * 650 && mouseX < wUnit * 900 && mouseY > hUnit * 50 && mouseY < hUnit * 130) toggleList(3);
}

void toggleList(int listNumber) {
  if (listNumber == 1) isList1Visible = !isList1Visible;
  if (listNumber == 2) isList2Visible = !isList2Visible;
  if (listNumber == 3) isList3Visible = !isList3Visible;
}

void handleListClick(String[] items, float x, float y, float w, float h, int listNumber) {
  if (mouseX > x && mouseX < x + w && mouseY > y && mouseY < y + h) {
    int index = int((mouseY - y) / (h / items.length));
    if (index >= 0 && index < items.length) {
      if (listNumber == 1) {
        selectedFunction = items[index];  // Update the selected function
        println("Function " + (index + 1) + " triggered");
      }
      if (listNumber == 2) selectedList2Value = index;
      if (listNumber == 3) {
        selectedList3Value = items[index];
        button3Text = selectedList3Value;
      }
    }
  }
  
  isList1Visible = false;
  isList2Visible = false;
  isList3Visible = false;
}

It works well also. The selection is correctly printed on the screen but usually the selection is shown as the title of the button. The third button does this, but the others do not; ie, their titles do not change when the selection changes.

That was intended. the first button is supposed to mimic those “File” tabs that open a list with "Load, Save, Exit, etc. Button 3 mimics a dropdown list…
I am still running into some problems when changing the size of the buttons. The clickable area of the items doesn’t follow the changes correctly.