Skip to content

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

@MMPB027

Description

@MMPB027

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.

image

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions