MouseClick event for an Arc in CP5 Button

I have 4 buttons each shaped an arc.
The 4 buttons:
image

I made the buttons like this:

    button1 = cp5.addButton("A1")  // The button for the first area. The other 3 buttons will be "A2" , "A3" ,  "A4"    
    .setValue(128)
    .setPosition(pos1.x,pos1.y)     // x and y relative to the group
    .setImages(ring1_imgs[0], ring1_imgs_1[0], ring1_imgs[1])
    .updateSize()
    .moveTo(AreaRingGroup);   // add it to the group 
    ;

In this case, the mouseClick is active in a rectangular way by default, in the size of the images. But I want the buttons to be active only if the mouse is inside the arcs.

so in draw(), I wrote these:

    int dx = mouseX - centerX;  
    int dy = mouseY - centerY;
    float c_2 = sqrt(dx*dx + dy*dy);
    int r2 = (outerRadius);
    int r1 = (innerRadius);
    
         if( c_2 < r2 && c_2 > r1){
         button1.setMouseOver(true);}
         else{
         button1.setMouseOver(false);}

So; if the distance from the center is smaller than the outer and bigger than the inner radius, the button should be active, otherwise it should stay still.

I think the basic math algorithm I wrote is true, but I don’t know how to implement this condition to the cp5 button, like which parameters should I use for mouseclicks. There is setImages(); that is using 3 images for 3 mouseclick conditions so I should make sure this arc-condition is true for all the 3 images.

Collision detection for mouse circle is simple it’s a simple distance call, then using atan2 you can figure out what quadrant the mouse is in. You should from there be able to know which button you should be interacting with.

Could you be more specific and explain it using my codes? I emphasized the problem in the last paragraph; How to implement the mouse algorithm to the CP5 button functions-parameters.

Hi @seym,

So, each button is an image of this? or every single black square inside the arc is one button?

Hello, there are 4 buttons like quarters of 1 circle.
For example:
Here my mouse is over the first arc(first button):
image

Here I click on the first arc (first button):
image

But these over-and-click situations are in the rectangular form now and I want to be able to click exactly on the arcs. Using setMouseOver had no effect at all and I don’t know how to implement the math algorithm to this cp5 buttons.

I would say that you have a problem in there because when you set the images the button assumes they are squared images not arc. So the default mouseOver detection would fail.

When you set .setPosition(pos1.x,pos1.y) // x and y relative to the group,
Are they relative to which point of the image group? the middle?

if its a rect then it simple

return mouse.x>x&&mouse.x<x+width&&mouse.y>y&&mouse.y<y+h;

if its an arc

2021-09-15 11_04_03-Untitled - Paint

float theta = atan2(y-mouse.y,x-mouse.x);
//test radius
dist(mouse.x,mouse.y,x,y)<someDist&&
//test which quadrant the mouse is in
I may be wrong about the placement of the quadrants in respect to processing I forget exactly how they do it, but a quick test should inform you

//if(theta>0&&theta<pi/2) == top left
if(theta>pi/2&&theta<pi) == top right
if(theta>pi&&theta<3/2pi)==bottom left
if(theta>3/2pi&&theta<2pi)==bottom right

if(you wanted to only interact with the arc area you would need to do another radius test
the first one would give you the max dist then you would need another one

also please note that at this point the center of the circle you are testing is the center where all your images meet, the radius is the width of the images

2021-09-15 11_13_32-Untitled - Paint

2 Likes

Thank you for the answer.

But my problem is implementing this solution to cp5. addButton methods, I don’t know how to use these calculations within the controlP5 Button. You are showing the algorithm but I am struggling with implementing these algorithms to the controlP5 Button.

Let’s say I made the calculations just like you showed. There is a .setMouseOver() method within the controlP5 Button, right? So if use an if statement with your calculations and set the .setMouseOver() accordingly, it should work. But it does not work like this. My problem is how to implement these new mouseClick conditions to the cp5 Button methods.

OK I understand your problem. Unfortunately I’m not familiar with controlp5 or how the setMouseOver() method works, have you checked their github to look at the underlying code?

The class is this:
https://github.com/sojamo/controlp5/blob/master/src/controlP5/Button.java

I tried to write the if statement to the part where I thought was about the MouseClick conditions for image-button:

//Constant definitions like c_2, r2_2, etc.

 public class ButtonImageView implements ControllerView<Button> { 
 
  public void display(PGraphics theApplet, Button theController) { 
   if ( c_2 < r2_2 && c_2 > r1_2){  //THE LINE I ADDED
   if (isOn && isSwitch) { 
    theApplet.image((availableImages[HIGHLIGHT] == true) ? images[HIGHLIGHT] : images[DEFAULT], 0, 0); 
    return; 
   } 
   
    if (isPressed) { 
     theApplet.image((availableImages[ACTIVE] == true) ? images[ACTIVE] : images[DEFAULT], 0, 0); 
    } else { 
     theApplet.image((availableImages[OVER] == true) ? images[OVER] : images[DEFAULT], 0, 0); 
    } 
   } else { 
    theApplet.image(images[DEFAULT], 0, 0); 
   } 
  } 
 }

But it didn’t work. I don’t get any errors but the program keeps working as before, nothing changes.

ok but the standard mouseOver detection works right?

Why can we not just use the regular button logic here?

Again not familiar with cp5 I have my own gui lib.
In mine I would be able to do what you suggest

I have a toggle() function which returns true one mouseHover && mouseClicked. I could then combine that with any logic I needed first

so
if(someBool&&button.toggle())--->> do someThing

Is this deffo not possible in cp5, it seems like a fairly simple functionality that should be possible…

I’m looking through the cp5 contributed examples and I honestly dont know how to assign the logic you are looking for, everything is handled under the hood.


/**
* ControlP5 Toggle
*
*
* find a list of public methods available for the Toggle Controller
* at the bottom of this sketch.
*
* by Andreas Schlegel, 2011
* www.sojamo.de/libraries/controlp5
*
*/


import controlP5.*;

ControlP5 cp5;

int col = color(255);

boolean toggleValue = false;

void setup() {
  size(400,400);
  smooth();
  cp5 = new ControlP5(this);
  
  // create a toggle
  cp5.addToggle("toggleValue")
     .setPosition(40,100)
     .setSize(50,20)
     ;
  
  // create a toggle and change the default look to a (on/off) switch look
  cp5.addToggle("toggle")
     .setPosition(40,250)
     .setSize(50,20)
     .setValue(true)
     .setMode(ControlP5.SWITCH)
     ;
     
}
  

void draw() {
  background(0);
  
  pushMatrix();
  
  if(toggleValue==true) {
    fill(255,255,220);
  } else {
    fill(128,128,110);
  }
  translate(280,100);
  ellipse(0,0,100,100);
  
  
  translate(0,150);
  fill(col);
  ellipse(0,0,40,40);
  
  popMatrix();
}



void toggle(boolean theFlag) {
  if(theFlag==true) {
    col = color(255);
  } else {
    col = color(100);
  }
  println("a toggle event.");
}






/*
a list of all methods available for the Toggle Controller
use ControlP5.printPublicMethodsFor(Toggle.class);
to print the following list into the console.

You can find further details about class Toggle in the javadoc.

Format:
ClassName : returnType methodName(parameter type)


controlP5.Controller : CColor getColor() 
controlP5.Controller : ControlBehavior getBehavior() 
controlP5.Controller : ControlWindow getControlWindow() 
controlP5.Controller : ControlWindow getWindow() 
controlP5.Controller : ControllerProperty getProperty(String) 
controlP5.Controller : ControllerProperty getProperty(String, String) 
controlP5.Controller : ControllerView getView() 
controlP5.Controller : Label getCaptionLabel() 
controlP5.Controller : Label getValueLabel() 
controlP5.Controller : List getControllerPlugList() 
controlP5.Controller : Pointer getPointer() 
controlP5.Controller : String getAddress() 
controlP5.Controller : String getInfo() 
controlP5.Controller : String getName() 
controlP5.Controller : String getStringValue() 
controlP5.Controller : String toString() 
controlP5.Controller : Tab getTab() 
controlP5.Controller : Toggle addCallback(CallbackListener) 
controlP5.Controller : Toggle addListener(ControlListener) 
controlP5.Controller : Toggle addListenerFor(int, CallbackListener) 
controlP5.Controller : Toggle align(int, int, int, int) 
controlP5.Controller : Toggle bringToFront() 
controlP5.Controller : Toggle bringToFront(ControllerInterface) 
controlP5.Controller : Toggle hide() 
controlP5.Controller : Toggle linebreak() 
controlP5.Controller : Toggle listen(boolean) 
controlP5.Controller : Toggle lock() 
controlP5.Controller : Toggle onChange(CallbackListener) 
controlP5.Controller : Toggle onClick(CallbackListener) 
controlP5.Controller : Toggle onDoublePress(CallbackListener) 
controlP5.Controller : Toggle onDrag(CallbackListener) 
controlP5.Controller : Toggle onDraw(ControllerView) 
controlP5.Controller : Toggle onEndDrag(CallbackListener) 
controlP5.Controller : Toggle onEnter(CallbackListener) 
controlP5.Controller : Toggle onLeave(CallbackListener) 
controlP5.Controller : Toggle onMove(CallbackListener) 
controlP5.Controller : Toggle onPress(CallbackListener) 
controlP5.Controller : Toggle onRelease(CallbackListener) 
controlP5.Controller : Toggle onReleaseOutside(CallbackListener) 
controlP5.Controller : Toggle onStartDrag(CallbackListener) 
controlP5.Controller : Toggle onWheel(CallbackListener) 
controlP5.Controller : Toggle plugTo(Object) 
controlP5.Controller : Toggle plugTo(Object, String) 
controlP5.Controller : Toggle plugTo(Object[]) 
controlP5.Controller : Toggle plugTo(Object[], String) 
controlP5.Controller : Toggle registerProperty(String) 
controlP5.Controller : Toggle registerProperty(String, String) 
controlP5.Controller : Toggle registerTooltip(String) 
controlP5.Controller : Toggle removeBehavior() 
controlP5.Controller : Toggle removeCallback() 
controlP5.Controller : Toggle removeCallback(CallbackListener) 
controlP5.Controller : Toggle removeListener(ControlListener) 
controlP5.Controller : Toggle removeListenerFor(int, CallbackListener) 
controlP5.Controller : Toggle removeListenersFor(int) 
controlP5.Controller : Toggle removeProperty(String) 
controlP5.Controller : Toggle removeProperty(String, String) 
controlP5.Controller : Toggle setArrayValue(float[]) 
controlP5.Controller : Toggle setArrayValue(int, float) 
controlP5.Controller : Toggle setBehavior(ControlBehavior) 
controlP5.Controller : Toggle setBroadcast(boolean) 
controlP5.Controller : Toggle setCaptionLabel(String) 
controlP5.Controller : Toggle setColor(CColor) 
controlP5.Controller : Toggle setColorActive(int) 
controlP5.Controller : Toggle setColorBackground(int) 
controlP5.Controller : Toggle setColorCaptionLabel(int) 
controlP5.Controller : Toggle setColorForeground(int) 
controlP5.Controller : Toggle setColorLabel(int) 
controlP5.Controller : Toggle setColorValue(int) 
controlP5.Controller : Toggle setColorValueLabel(int) 
controlP5.Controller : Toggle setDecimalPrecision(int) 
controlP5.Controller : Toggle setDefaultValue(float) 
controlP5.Controller : Toggle setHeight(int) 
controlP5.Controller : Toggle setId(int) 
controlP5.Controller : Toggle setImage(PImage) 
controlP5.Controller : Toggle setImage(PImage, int) 
controlP5.Controller : Toggle setImages(PImage, PImage, PImage) 
controlP5.Controller : Toggle setImages(PImage, PImage, PImage, PImage) 
controlP5.Controller : Toggle setLabel(String) 
controlP5.Controller : Toggle setLabelVisible(boolean) 
controlP5.Controller : Toggle setLock(boolean) 
controlP5.Controller : Toggle setMax(float) 
controlP5.Controller : Toggle setMin(float) 
controlP5.Controller : Toggle setMouseOver(boolean) 
controlP5.Controller : Toggle setMoveable(boolean) 
controlP5.Controller : Toggle setPosition(float, float) 
controlP5.Controller : Toggle setPosition(float[]) 
controlP5.Controller : Toggle setSize(PImage) 
controlP5.Controller : Toggle setSize(int, int) 
controlP5.Controller : Toggle setStringValue(String) 
controlP5.Controller : Toggle setUpdate(boolean) 
controlP5.Controller : Toggle setValue(float) 
controlP5.Controller : Toggle setValueLabel(String) 
controlP5.Controller : Toggle setValueSelf(float) 
controlP5.Controller : Toggle setView(ControllerView) 
controlP5.Controller : Toggle setVisible(boolean) 
controlP5.Controller : Toggle setWidth(int) 
controlP5.Controller : Toggle show() 
controlP5.Controller : Toggle unlock() 
controlP5.Controller : Toggle unplugFrom(Object) 
controlP5.Controller : Toggle unplugFrom(Object[]) 
controlP5.Controller : Toggle unregisterTooltip() 
controlP5.Controller : Toggle update() 
controlP5.Controller : Toggle updateSize() 
controlP5.Controller : boolean isActive() 
controlP5.Controller : boolean isBroadcast() 
controlP5.Controller : boolean isInside() 
controlP5.Controller : boolean isLabelVisible() 
controlP5.Controller : boolean isListening() 
controlP5.Controller : boolean isLock() 
controlP5.Controller : boolean isMouseOver() 
controlP5.Controller : boolean isMousePressed() 
controlP5.Controller : boolean isMoveable() 
controlP5.Controller : boolean isUpdate() 
controlP5.Controller : boolean isVisible() 
controlP5.Controller : float getArrayValue(int) 
controlP5.Controller : float getDefaultValue() 
controlP5.Controller : float getMax() 
controlP5.Controller : float getMin() 
controlP5.Controller : float getValue() 
controlP5.Controller : float[] getAbsolutePosition() 
controlP5.Controller : float[] getArrayValue() 
controlP5.Controller : float[] getPosition() 
controlP5.Controller : int getDecimalPrecision() 
controlP5.Controller : int getHeight() 
controlP5.Controller : int getId() 
controlP5.Controller : int getWidth() 
controlP5.Controller : int listenerSize() 
controlP5.Controller : void remove() 
controlP5.Controller : void setView(ControllerView, int) 
controlP5.Toggle : Toggle linebreak() 
controlP5.Toggle : Toggle setMode(int) 
controlP5.Toggle : Toggle setState(boolean) 
controlP5.Toggle : Toggle setValue(boolean) 
controlP5.Toggle : Toggle setValue(float) 
controlP5.Toggle : Toggle toggle() 
controlP5.Toggle : Toggle update() 
controlP5.Toggle : boolean getBooleanValue() 
controlP5.Toggle : boolean getState() 
controlP5.Toggle : int getMode() 
java.lang.Object : String toString() 
java.lang.Object : boolean equals(Object) 

created: 2015/03/24 12:21:35

*/
1 Like