I'm trying to create a test program to better understand how ControlP5 works before applying it to my project. I want the button to have a certain color and when I hover over it it has another color, but when I try to choose the button colors using the command ".setColorForeground(color)" , ".setColorCaptionLabel(color)" or I try to make the toggle rounded using ".setRadius(radius)" it says that the function does not exist, I would like to know what I can do to get the desired result or if I am doing something wrong.
If possible, I would also like to know how I can perfectly align and center the writing on the button.
I apologize if I'm making any silly mistakes, but I'm still learning.
I'm trying to create a test program to better understand how ControlP5 works before applying it to my project. I want the button to have a certain color and when I hover over it it has another color, but when I try to choose the button colors using the command ".setColorForeground(color)" , ".setColorCaptionLabel(color)" or I try to make the toggle rounded using ".setRadius(radius)" it says that the function does not exist, I would like to know what I can do to get the desired result or if I am doing something wrong.
If possible, I would also like to know how I can perfectly align and center the writing on the button.
I apologize if I'm making any silly mistakes, but I'm still learning.
import controlP5.*;
ControlP5 b1; ControlP5 b2; ControlP5 b3; ControlP5 s1; PFont customFont;
int themeColor = color(255); boolean darkTheme = false;
void setup() { size(800, 600);
b1 = new ControlP5(this); b2 = new ControlP5(this); b3 = new ControlP5(this); s1 = new ControlP5(this);
customFont = createFont("GatsbyFLF-Bold", 50); textAlign(CENTER, CENTER);
// Menu button b1.addButton("menuButton") .setPosition(width/2, 20) .setSize(200, 50) .setCaptionLabel("MENU") .setFont(customFont) .getCaptionLabel() .align(ControlP5.CENTER, ControlP5.CENTER) .setColorForeground(color(100, 100, 200)) .setColorBackground(color(50, 50, 150)) .setColorCaptionLabel(color(255));
// Level buttons b2.addButton("level1Button") .setPosition(width/2, 80) .setSize(200, 50) .setCaptionLabel("LEVEL 1") .setFont(customFont) .getCaptionLabel() .align(ControlP5.CENTER, ControlP5.CENTER) .setColorForeground(color(100, 100, 200)) .setColorBackground(color(50, 50, 150)) .setColorCaptionLabel(color(255));
b3.addButton("level2Button") .setPosition(width/2, 140) .setSize(200, 50) .setCaptionLabel("LEVEL 2") .setFont(customFont) .getCaptionLabel() .align(ControlP5.CENTER, ControlP5.CENTER) .setColorForeground(color(100, 100, 200)) .setColorBackground(color(50, 50, 150)) .setColorCaptionLabel(color(255));
// Theme toggle s1.addToggle("themeToggle") .setPosition(width/2, 200) .setSize(60, 30) .setValue(0)
.setMode(ControlP5.SWITCH)
.setLabel("") .setColorForeground(color(192, 192, 192))
.setColorBackground(color(81, 81, 81))
.setColorActive(color(192, 192, 192))
.setRadius(15)
.setColorCaptionLabel(color(255)) .plugTo(this, "updateTheme"); }
void draw() { background(themeColor); }
// Event handler for menu button void menuButton(int value) { println("Menu button clicked!"); }
// Event handlers for level buttons void level1Button(int value) { println("Level 1 button clicked!"); }
void level2Button(int value) { println("Level 2 button clicked!"); }
// Event handler for theme toggle void updateTheme(boolean value) { // Update darkTheme based on the toggle value darkTheme = value;
// Update theme color themeColor = darkTheme ? color(0) : color(255); }
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.