how to change slider colors in controlP5

sina.feue..

how to change slider colors in controlP5

in Contributed Library Questions • 1 year ago

hey! how can i change the colors of individual sliders in controlP5? so every slider has a different color?
i can only get it to work on all sliders at once :/

here's my code if it helps:
import controlP5.*;
ControlP5 cp5;
ControlWindow controlWindow;
public int Radius = 10; //Startwert
public int Anzahl = 1; //Startwert
public float Rotieren = -2; //Startwert
public int Rot = 255; //Startwert
public int Gruen = 255; //Startwert
public int Blau = 255; //Startwert
public int Glas = 255; //Startwert
void setup() {
size(900, 900,P3D);
cp5 = new ControlP5(this);
controlWindow = cp5.addControlWindow("controlP5window", 400, 400, 400, 400) //größe des Fenster
.hideCoordinates()
.setBackground(color(0))
;
cp5.addSlider("Radius")
.setRange(1, 25) //von bis
.setPosition(40, 40) //Position
.setSize(200, 29) //Größe
.setWindow(controlWindow)
.setColorValue(color(0, 0, 0))
.setColorBackground(color(156, 158, 159))
;
cp5.addSlider("Anzahl")
.setRange(1, 8) //von bis
.setPosition(40, 80) //Position
.setSize(200, 29) //Größe
.setWindow(controlWindow)
.setColorValue(color(0, 0, 0))
.setColorBackground(color(156, 158, 159))
;
cp5.addSlider("Rotieren")
.setRange(-3, 6) //von bis
.setPosition(40, 120) //Position
.setSize(200, 29) //Größe
.setWindow(controlWindow)
.setColorValue(color(0, 0, 0))
.setColorBackground(color(156, 158, 159))
;
cp5.addSlider("Rot")
.setRange(0, 255) //von bis
.setPosition(40, 160) //Position
.setSize(200, 29) //Größe
.setWindow(controlWindow)
.setColorValue(color(255, 0, 0))
.setColorBackground(color(255, 0, 0))
;
cp5.addSlider("Gruen")
.setRange(0, 255) //von bis
.setPosition(40, 189) //Position
.setSize(200, 29) //Größe
.setWindow(controlWindow)
.setColorValue(color(0, 255, 0))
.setColorBackground(color(0, 255, 0))
;
cp5.addSlider("Glas")
.setRange(100, 255) //von bis
.setPosition(40, 260) //Position
.setSize(200, 29) //Größe
.setWindow(controlWindow)
.setColorValue(color(0, 0, 0))
.setColorBackground(color(156, 158, 159))
;
cp5.addSlider("Blau")
.setRange(0, 255) //von bis
.setColorValue(color(0, 0, 255))
.setPosition(40, 218) //Position
.setSize(200, 29) //Größe
.setWindow(controlWindow)
.setColorBackground(color(0, 0, 255))
.setColorForeground(color(255))
.setColorValue(color(0, 0, 255))
;
}

thx =)

Replies(4)

amnon.owed

Re: how to change slider colors in controlP5

1 year ago

You can use .setColorForeground(color(0, 125, 0)) to set the color of the slider's bar. You can use .setColorActive(color(255, 0, 0)) to set the color of slider's bar while the mouse is over it. Note that it's a good idea to set the foreground color to something lower than 255, because the 'selected portion' is automatically displayed in a lighter variant (which you won't see if the original color is to light).

cedrickie..

Re: how to change slider colors in controlP5

1 year ago

i simplified her code and can confirm that its not working to give the sliders different colors when beeing used in a controlWindow. they all take the color of the last slider. If you draw the sliders in the main window it works. I think its a bug, i will let andreas now. He might be able to fix it.

compare :

import controlP5.*;
ControlP5 cp5;
ControlWindow controlWindow;
void setup() {
size(900, 900, P3D);
cp5 = new ControlP5(this);
cp5.addSlider("RED")
.setRange(0, 255) //von bis
.setPosition(40, 160) //Position
.setSize(200, 29) //Größe
// .setWindow(controlWindow)
.setColorValue(color(255))
.setColorActive(color(155))
.setColorForeground(color(155))
.setColorBackground(color(255, 0, 0))
;
cp5.addSlider("Green")
.setRange(0, 255) //von bis
.setPosition(40, 189) //Position
.setSize(200, 29) //Größe
// .setWindow(controlWindow)
.setColorValue(color(255))
.setColorActive(color(155))
.setColorForeground(color(155))
.setColorBackground(color(0, 255, 0))
;
cp5.addSlider("Blue")
.setRange(0, 255) //von bis
.setColorValue(color(0, 0, 255))
.setPosition(40, 218) //Position
.setSize(200, 29) //Größe
// .setWindow(controlWindow)
.setColorValue(color(255))
.setColorActive(color(155))
.setColorForeground(color(155))
.setColorBackground(color(0, 0, 255))
;
}
void draw() {
background(0);
cp5.draw();
}

with

import controlP5.*;
ControlP5 cp5;
ControlWindow controlWindow;
void setup() {
size(900, 900, P3D);
cp5 = new ControlP5(this);
controlWindow = cp5.addControlWindow("controlP5window", 400, 400, 400, 400) //größe des Fenster
.hideCoordinates()
.setBackground(color(0))
;
cp5.addSlider("RED")
.setRange(0, 255) //von bis
.setPosition(40, 160) //Position
.setSize(200, 29) //Größe
.setWindow(controlWindow)
.setColorValue(color(255))
.setColorActive(color(155))
.setColorForeground(color(155))
.setColorBackground(color(255, 0, 0))
;
cp5.addSlider("Green")
.setRange(0, 255) //von bis
.setPosition(40, 189) //Position
.setSize(200, 29) //Größe
.setWindow(controlWindow)
.setColorValue(color(255))
.setColorActive(color(155))
.setColorForeground(color(155))
.setColorBackground(color(0, 255, 0))
;
cp5.addSlider("Blue")
.setRange(0, 255) //von bis
.setColorValue(color(0, 0, 255))
.setPosition(40, 218) //Position
.setSize(200, 29) //Größe
.setWindow(controlWindow)
.setColorValue(color(255))
.setColorActive(color(155))
.setColorForeground(color(155))
.setColorBackground(color(0, 0, 255))
;
}
void draw() {
background(0);
}

andreas.s..

Re: how to change slider colors in controlP5

1 year ago

Hi, I could replicate the behavior reported above. please use moveTo(controlWindow) instead of setWindow(controlWindow) which has been deprecated.

Why does the color take on the color of the latest slider created?

setWindow returns the reference to the ControlWindow object not the reference to the Slider/Controller object therefore the color is set for all controllers inside the ControlWindow and not for a particular controller only.

cedrickie..

Re: how to change slider colors in controlP5

1 year ago

Hi Andreas, thanks for letting us know!

Top Reply