-
Notifications
You must be signed in to change notification settings - Fork 144
Description
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.
- Below is the test I'm doing:
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.