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

Processing for Android
1

Hi guys, beginner here. This test code aims at opening a list with 3 items and when one of them is selected, the list should close. also when tapping outside the list, it should close.
but what I am seeing is that the list opens the first time I tap it when I open the app, but if I tap outside the list while it is open, all seems to get out of sync, and I need to tap twice. after that, sometimes I also need to tap the items twice. There is obviously something I am missing and I cannot figure out why this is happening.
It seems to me that when I tap the list the first time, it might register as if an item was tapped? Anyway, here is the code, and please be gentle, as I said I am a beginner. Thank you in advance for your help.

import io.inventit.processing.android.serial.Serial;
//import java.io.File;
import controlP5.*;
import java.util.*;
ControlP5 cp5;

Serial myPort;

PFont font, font1, font2, font3, font4, font5;

//ListBox Menu1;
ScrollableList Menu1;


int read_data[];

void setup() {
  clear();
  read_data = new int[8192];
  size(1024, 2048); // Create Window

  font = createFont("Arial Bold", 18);
  font1 = createFont("Arial Bold", 10);
  font2 = createFont("Arial Bold", 13);
  font3 = createFont("Arial Bold", 12);
  font4 = createFont("Arial Bold", 19);
  font5 = createFont("Arial Bold", 26);

  cp5 = new ControlP5(this);
  //cp5.getWindow().setPositionOfTabs(71, 0);
  List l = Arrays.asList("Open  Eeprom", "Save  Eeprom", "Exit");
  //**********************  MENU LISTS  **************************


  Menu1 = cp5.addScrollableList("File Menu")
    .setType(ScrollableList.LIST)

    .setPosition(1, 1)
    .setSize(200, 500)
    .setBarHeight(100)
    //.setHeight(500)
    .setItemHeight(100)
    .addItems(l)



    .setFont(font5)

    .setColorBackground(color(216, 216, 216))
    .setColorForeground(color(232, 232, 232))
    .setColorActive(color(186, 188, 188))
    .setColorLabel(color(0, 0, 0))
    .setColorValueLabel(color(0, 0, 0))
    .setColorCaptionLabel(color(0, 0, 0))
    .setOpen(false);
  ;

  //Menu1.bringToFront();
  Menu1.getCaptionLabel().toUpperCase(true);
  //Menu1.getCaptionLabel().set("File Menu");
  Menu1.getCaptionLabel().align(CENTER, CENTER);
}

//*****************************  MAIN LOOP  *********************************

void draw() {
  background(0, 120, 255); // Background Color (r, g, b) or (0 to 255)
  textFont(font4);

  //if (Menu1.isMousePressed()) {

  //  Menu1.bringToFront();
  //}
}

void controlEvent(ControlEvent theControlEvent) {
  if (theControlEvent.isController()) {


    if (theControlEvent.isFrom(Menu1)) {

      int MenuItem = int(theControlEvent.getController().getValue());

      if (MenuItem == 0) {

        Menu1.close();
      }
      if (MenuItem == 1) {

        Menu1.close();
      }
      if (MenuItem == 2) {
        Menu1.close();

        System.exit(0);
      }
    }
  }
}


void mouseReleased() {
  if (Menu1.isMouseOver()) {
    if (!Menu1.isOpen()) {
      delay(100);  // Small delay to prevent immediate close
      Menu1.open();
    }
  } else {
    Menu1.close();
  }
}
2

It seems like you have had a problem with this before: Android controlP5 button issue - #12 by jafal
If you just can’t use it then you may want to find an alternative: roll your own or use other android controls.
More complex alternative:

import android.app.Activity;
import android.content.Context;
import android.widget.ListView;
import android.widget.TextView;
import android.view.View;
import android.view.Gravity;
import android.widget.LinearLayout;
import android.widget.FrameLayout;
import android.view.ViewGroup;
import android.view.ViewGroup.LayoutParams;
import android.widget.RelativeLayout;
import android.widget.ArrayAdapter;
import android.widget.AdapterView;
import android.R;

color WHITE = color(255, 255, 255);
Activity activity;
Context ctx;

void setup() {
 fullScreen();
 orientation(LANDSCAPE);    
  activity = this.getActivity();
  ctx = activity.getApplicationContext();
  runOnUiThread(new Runnable() {
    void run() {      
      listView(200, 300, 500, 800, WHITE, 26.0, Gravity.CENTER);
    }
  }
  );
}

void draw() {
 background(0,0,255);  

}

void listView(int x, int y, int w, int h, color txtColor, float txtSize, int alignment) {

  ListView  listView = new ListView(ctx);
  listView.setLayoutParams(new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT));
  listView.setX(x);
  listView.setY(y);
  ViewGroup.LayoutParams params = listView.getLayoutParams();
  params.width = w;
  params.height = h;
  listView.setLayoutParams(params);

  String[] osArray = {"Android", "iOS", "WindowsMobile", "WebOS", "Ubuntu", "Mac OS"};
  ArrayAdapter adapter = new ArrayAdapter<String>(activity, android.R.layout.simple_list_item_1, android.R.id.text1, osArray) {
    @Override
      public View getView(int position, View convertView, ViewGroup parent) {
      TextView textView = (TextView) super.getView(position, convertView, parent);
      textView.setTextColor(txtColor);
      textView.setTextSize(txtSize);
      textView.setGravity(alignment);
      return textView;
    }
  };
  listView.setAdapter(adapter);
  listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
    @Override
      public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
      println("position = ", position);
      println("item = ", listView.getItemAtPosition(position));
    }
  }
  );

  FrameLayout flayout = (FrameLayout)activity.findViewById(R.id.content);
  flayout.addView(listView);
}

Another source you might be able to use:

1 Like
3

Thank you very much for your answer. I didn’t remember anymore that I had similar issue, I am sorry. Thanks for the links. I would like to learn more about Processing for Android. I think it might be a bit different than Processing for windows?
I had trouble making it run with my phone, but I did some research and now I can at least try the sketches. So, this is already a victory :slight_smile:
Thank you again.

4

You’re probably used to using Java mode. Mobile devices require Android mode and it’s another cat. Some of the code will transfer, but most of it is different. If you start with simple things and move your way up it’s doable.

5

I Think I need some simple things for my project. a couple Tabs, a list, a couple DropDown lists a few sliders and to write some text (Preset Names). Then I will need serial communication through USB or even BT. I am trying to communicate with an ESP32-S2 (Arduino) board. I hope I can learn to do all this…

6

you are not missing any thing thats how it’s going On touch Android screen

7

I have been looking at the skatolo library because you said on other thread that you have fixed this problem with this library. But I am still trying to create a font with it. it seems that pfont is not supported. The problem is that I cannot find any info about this library online :frowning:
Any suggestions? Thanks

8

on my topic @paulgoux wrote:

try this release and drag the jar file to your sketch

https://github.com/sojamo/controlp5/releases/download/v2.2.5/controlP5-2.2.5.zip

i didn’t try it …try it your self might be solution

edit @jhsa i meant solution for touch conflict

https://www.rubydoc.info/gems/skatolo/1.1.3/index

https://rubygems.org/gems/skatolo?locale=zh-CN

9

Hello @jhsa ,

Does this help?

:)

10

@glv Thank you. Is the Controlp5 the normal library that we can install from within Processing?

11

Well, with the help from our friend Chat GPT, and after some fighting :wink: I think we found something that is working with the ControlP5 library.

import controlP5.*;

ControlP5 cp5;
DropdownList dropdown;
boolean dropdownOpen = false; // Track if it's open

// Set font for the dropdown button (caption label)
  PFont font = createFont("Arial", 20); // Create larger font

void setup() {
  fullScreen();
  
  cp5 = new ControlP5(this);

  // Create Dropdown List
  dropdown = cp5.addDropdownList("Select an option")
    .setPosition(width / 4, height / 4)
    .setSize(200, 500) // Width, Height
    .setBarHeight(100)  // Button height
    .setItemHeight(100) // List item height
    .setFont(font) // Apply font to dropdown items
    .addItem("Option 1", 1)
    .addItem("Option 2", 2)
    .addItem("Option 3", 3);

  
  dropdown.getCaptionLabel().setFont(font); // Apply font to button text

  // Start with the dropdown closed
  dropdown.close();
}

void draw() {
  background(220);
}

void mousePressed() {
  // Check if the tap is inside the dropdown list area
  boolean clickedInsideDropdown = mouseX > dropdown.getPosition()[0] && 
                                  mouseX < dropdown.getPosition()[0] + dropdown.getWidth() &&
                                  mouseY > dropdown.getPosition()[1] && 
                                  mouseY < dropdown.getPosition()[1] + dropdown.getBarHeight();

  if (clickedInsideDropdown) {
    if (!dropdownOpen) {
      dropdown.open();
      dropdownOpen = true;
    } else {
      dropdown.close();
      dropdownOpen = false;
    }
  } else {
    dropdown.close();
    dropdownOpen = false;
  }
}

// Handle selection
void controlEvent(ControlEvent event) {
  if (event.isFrom(dropdown)) {
    int selected = (int) event.getValue();
    println("Selected: " + selected);
    dropdown.close(); 
    dropdownOpen = false;
  }
}
12

I believe so and the versions match.

The ControlP5 2.2.6 link in the Processing Contribution Manager for the library:

image
image921Ă—492 47.2 KB

These links are often overlooked!

:)

13

I never see any console output for selections made and clicking on the window closes the menu; is that the way you want it to work?

14

what about touch conflict?

15

Yes, just like when we hit the “File” button on processing for example, and select an option. The list will close.

16

Not sure what you mean, for now I have been trying to get this “List” thing to work the way I want it to. But I do remember you mentioning something about sliders?

17

@jhsa
That’s fine i thought that you are facing touch issue on Android with controlp5 upon @svan first reply. have nice time

18

I will have to add sliders as well. Will let you know if I find strange behavior. Thank you for your help.

1 Like
19

When I look at the cp5 example for DropdownList I see this:

ddlist
ddlist582Ă—116 5.31 KB

The cp5 code for ScrollableList functions like a dropdown list, won’t catch stray touches on the window, and appears to be more stable:

import controlP5.*;
import java.util.*;

ControlP5 cp5;
ScrollableList dropdown;
List mItems;

PFont font = createFont("Arial", 30); // Create larger font

void setup() {
  fullScreen();
  cp5 = new ControlP5(this);
  mItems = Arrays.asList("Option 1", "Option 2", "Option 3");
  /* add a ScrollableList, by default it behaves like a DropdownList */
  dropdown = cp5.addScrollableList("dropdown")
     .setPosition(width/4, height/4)
     .setSize(250, 400)
     .setBarHeight(100)
     .setItemHeight(100)
     .addItems(mItems)
     .setType(ScrollableList.DROPDOWN) // currently supported DROPDOWN and LIST
     ;
  dropdown.setFont(font);
}

void draw() {
  background(240);
}

void dropdown(int n) {
  /* request the selected item based on index n */
  cp5.get(ScrollableList.class, "dropdown").getItem(n);
  println("You selected ", n);
}
1 Like
20

This code doesn’t work well on android. I need to touch multiple times for it to register the touch and do something.