Processing - Specifying exact locations for mouseclicks on image-buttons

Question

I have 4 different areas for my LED ring and I uploaded 4 image-buttons to select them. I want to be able to click exactly on the object, but it clicks on the rectangle area. So my question is,

Is there a way to specify exact locations for mouse clicks on the images?

I tried to explain in the screenshot:

And here is my code:

import controlP5.*; //import ControlP5 library
import processing.serial.*;


PFont font;
PFont font2;
PImage img1, img2, img3, img4;

Accordion accordion;
color c = color(0, 160, 100);

// Arduino serial port
Serial port;

// GUI variables
ControlP5 cp5; //create ControlP5 object
ColorPicker cp;

void setup() { //Same as setup in arduino

  img1 = loadImage("t1.png");
  img2 = loadImage("t2.png");
  img3 = loadImage("t3.png");
  img4 = loadImage("t4.png");
  

  size(750, 500);                          //Window size, (width, height)
  try {
    port = new Serial(this, "COM3", 9600);   //Change this to your port
    // buffer until new line: this plugs in nicely with serialEvent()
    port.bufferUntil('\n');
  }catch(Exception e) {
    println("error opening serial");
    e.printStackTrace();
  }
  
  cp5 = new ControlP5(this);

  font = createFont ("Georgia Bold", 13);
  font2 = createFont ("Georgia Bold", 15);

  Group SetupGroup = cp5.addGroup("SETUP")
    .setPosition(90,100)
    .setWidth(150)
    .setHeight(30)
    .setFont(font2);
    background(0); //For transparency
    noStroke();
  ;

  Group AreaRingGroup = cp5.addGroup("RINGS_AREAS")
    .setPosition(30,50)
    .setWidth(150)
    .setHeight(30)
    .setFont(font2)
    .moveTo(SetupGroup);
    background(0);
    noStroke();
    ;
    
    cp5.addButton("AREA_1")  // The button
    .setImage(img1)
    .setPosition(-16,10)     // x and y relative to the group
    .setSize(150,150)
    .setFont(font)
    .moveTo(AreaRingGroup);   // add it to the group 
    ;     
  
  
    cp5.addButton("AREA_2")  // The button
    .setImage(img2)
    .setPosition(-15,170)    // x and y relative to the group
    .updateSize()
    .setFont(font) 
    .moveTo(AreaRingGroup);   // add it to the group  
  ; 
  
    cp5.addButton("AREA_3")  // The button
    .setImage(img3)
    .setPosition(150,184)     // x and y relative to the group
    .updateSize()
    .setFont(font)
    .moveTo(AreaRingGroup);   // add it to the group 
    ;     
  
  
    cp5.addButton("AREA_4")  // The button
    .setImage(img4)
    .setPosition(148,13)    // x and y relative to the group
    .updateSize()
    .setFont(font) 
    .moveTo(AreaRingGroup);   // add it to the group  
  ;

void AREA_1(){
  println("Ring_1 & AREA_1");
  if (port != null){ 
      port.write("a\n");
      port.write("1\n");
  }    
}
.
.
.
.

score 0 · Answer 1 · answered Aug 19 '21 at 17:50

I don't think there's a way to specify a non-rectangular button shape with ControlP5.

But you can still access the mouseX and mouseY properties inside the button handler. In your case, since the shape you are trying to detect is an arc, you can measure the mouse point's distance from the center of the LED ring. If the distance is greater than the radius of the inner circle and less than the radius of the outer circle, you can register it as a click on the arc in the image.

For a non-circular image you could try getting the pixel color at the mouse point and see if it matches the background color (no hit) or not (hit). You might need to create a separate, off-screen image for this with more distinct color differences to make this more reliable.

Processing - Specifying exact locations for mouseclicks on image-buttons

1 Answers1