sojamo / controlp5

A gui library for processing.org
GNU Lesser General Public License v2.1
490 stars 142 forks source link

I'm trying to create a custom rounded toggle switch, but the program says the function doesn't exist #186

Open MMPB027 opened 10 months ago

MMPB027 commented 10 months ago

I'm trying to create a custom rounded toggle switch, but I'm encountering the second error:

The function add(CustomToggleButton) does not exist.

//

The main code of the program that I named TESTE_ControlP5_SWITCH is the following:

import controlP5.*;

public class TESTE_ControlP5_SWITCH extends PApplet {

ControlP5 cp5; CustomToggleButton toggleButton;

void setup() { size(500, 500); cp5 = new ControlP5(this);

 toggleButton = new CustomToggleButton(cp5, "toggleButton");
 toggleButton.setPosition(width / 2 - 30, height / 2 - 15);

 cp5.add(toggleButton);

}

void draw() { // No need to draw the background here }

void controlEvent(ControlEvent theEvent) { if (theEvent.isAssignableFrom(CustomToggleButton.class)) { // Change the background color based on the button state background(toggleButton.isActive() ? 0 : 255); } }

public static void main(String[] args) { PApplet.main("TESTE_ControlP5_SWITCH"); } }

//

While the CustomToggleButton class code is:

import controlP5.*;

public class CustomToggleButton extends Controller { public CustomToggleButton(ControlP5 cp5, String theName) { super(cp5, theName); setWidth(60).setHeight(30); //setPosition(width / 2 - 30, height / 2 - 15); }

public void draw(PGraphics g) { g.noStroke();

 // Determines the background color based on the button state
 g.background(isActive ? 255 : 0);

 // Button background color (opposite to background)
 g.fill(isActive ? 0 : 255);

 // Draw the button
 g.rect(width/2, height/2, 60, 30, 100);

 // Indicator circle color
 g.fill(148, 56, 173);

 // Indicator circle position
 float indicatorX = isActive ? width/2 + 15 : width/2 + width - 15;
 float indicatorY = height/2 + height / 2;

 // Draw the indicator circle
 g.ellipse(indicatorX, indicatorY, height - 10, height - 10);

} }

//

Please help me if possible, I don't know if I'm making some stupid mistake, but I would really appreciate a solution

My goal is to create something like the one in the image.

toggle a slider switch