sojamo / controlp5

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

I can't use certain functions like ".setColorForeground(color)" , ".setColorCaptionLabel(color)" or ".setRadius(radius)" #185

Open MMPB027 opened 10 months ago

MMPB027 commented 10 months ago

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.

image