What is your prefered UI library for your sketches?

Processing
1

hey all,
For the last couple of years that I’ve been coding with Processing, I used only ControlP5 for UI stuff.
It’s been great but I am very curious what other people are using for UI these days.

Thanks,
Yair
:grinning:

2

Hey there !
Control P5 is great and G4P works nice too !

2 Likes
3

For me it depends – G4P is very nice for the interface builder / tools, especially if you are doing a lot of rapid UI prototyping. If the UI design is not going to iterate rapidly, I like ControlP5 for aesthetic reasons – I’m personally a fan of its default clean look, although it is documented through examples in a way that I sometimes find frustrating.

For small sketches, I actually like just building one-off controls – a simple button function or class object. This can reduce install dependencies and the complexity when sketches are used for teaching or demonstrate concepts in the forum – as learners may find the ControlP5 message passing model and method chaining style difficult to read in a way that is intimidating.

1 Like
4

Not sure why, but I never really got around to use G4P or ControlP5. Guess I should look into those at some point. I haven’t really made lots of UI intensive programs though so far.

I did get inspired by the Topics - GUI - Scrollbar and -Buttons examples years ago though, and made some simplistic versions of those, without really knowing what I was doing. I have sometimes improved(?) them now and then years later (guess I’m a rather periodical processing user). It’s just a scrollbar, a couple of buttons and a tab control. So that’s what I use. Anything more complicated, I would have to look into the aforementioned libraries.

5

can you show an example just for completeness…?

1 Like
6

You mean, an example of a simple control with no class / library?

Sure, here is a basic toggle button.

boolean toggle;
void setup(){
  toggle=false;
}
void draw(){
  // draw toggle
  if(toggle){
    fill(0,0,255);
  } else {
    fill(255);
  }
  rect(20,40,60,20);
}
void mouseClicked(){
  // switch toggle
  toggle = !toggle;
}
1 Like
7

For completeness, here is a simple example of a toggle with a one-off class.

Toggle toggle;
void setup() {
  toggle = new Toggle(20, 40);
}
void draw() {
  toggle.render();
}
void mouseClicked() {
  toggle.flip();
}
class Toggle {
  boolean state;
  float x;
  float y;
  Toggle(float x, float y) {
    this.state = false;
    this.x = x;
    this.y = y;
  }
  boolean flip() {
    state = !state;
    return state;
  }
  void render() {
    if (state) {
      fill(0,0,255);
    } else {
      fill(255);
    }
    rect(x, y, 60, 20);
  }
}

Honestly, as soon as you need multiple UI elements, or they interact, or you are activating and deactivating them etc. etc… one of the mature GUI libraries for Processing is the way to go, rather than reinventing any number of wheels (and reinventing any number of mistakes). You may have to study a big API, but everything is already there, and the subtleties have been worked through and ironed out.

3 Likes
8

I should note one additional thing – these examples are so very simple that they don’t even include collision detection for the toggle – any click anywhere switches it.

To add point-rect collision, plug the numbers into the formula:

void mouseClicked(){
  float px = mouseX;
  float py = mouseY;
  float rx = 20;
  float ry = 40;
  float rw = 60,
  float rh = 20;
  if (px >= rx && px <= rx + rw && py >= ry && py <= ry + rh) {
    toggle = !toggle;
  }
}

…or for the class, define a class w and h, then call flip(mouseX, mouseY) and redefine flip like this:

  boolean flip(float px, float py) {
    if (px >= x && px <= x + w && py >= y && py <= y + h) {
      state = !state;
    }
    return state;
  }
3 Likes