Good afternoon, I tried to replace the menu switches in the header with pictures, icons, but I don’t know how to do it, help!
As far as I am aware, the ControlP5 Tab control does not support adding an image or a graphic. My advice would be to use a row of buttons in lieu of the tab control. ControlP5 Button controls do support adding an image.
I already thought about it, but I was looking for solutions in this particular plan, maybe there is one with dancing with a tambourine.
How can addbutton split windows? Do something like here?
How can addbutton split windows? Do something like here?
I’m not sure I understand what you mean. Are you looking for something like this button bar?
Yes, the current tab switching should work with displaying different data on each tab! How can this be done with your example?
The buttonBar only has one cp5 button as far as I can tell. Therefore, I don’t think it will work either for what you want to do. The following is code for a cp5 button grid as well as a straight Processing button grid:
int _numRows = 2;
int _numCols = 6;
PGraphics[] pg;
PImage[] img;
int id = 0;
Button[] btn;
class Button {
float x, y, w, h;
// Constructor
Button(float xpos, float ypos, float wide, float ht) {
x = xpos;
y = ypos;
w = wide;
h = ht;
}
void display(int id) {
rect(x, y, w, h);
image(img[id], x + 20, y + 20);
}
}
void btnGrid(int left, int top, int w, int h, int vg, int hg) {
for (int k = 0; k < _numRows; k++) {
for (int j = 0; j < _numCols; j++) {
int x = left + j*(w+vg);
int y = top + k*(h+hg);
stroke(255);
fill(118);
btn[id] = new Button(x, y, w, h);
id++;
}
}
}
void setup() {
size(600, 400);
btn = new Button[_numRows*_numCols];
background(0, 0, 245);
btnGrid(0, 0, 75, 75, 0, 0);
smooth();
pg = new PGraphics[_numRows*_numCols];
img = new PImage[_numRows*_numCols];
for (int i = 0; i < (_numRows*_numCols); i++) {
pg[i] = createGraphics(200, 200);
pg[i].beginDraw();
pg[i].stroke(0);
pg[i].strokeWeight(4.0);
pg[i].fill(random(255), random(255), random(255));
pg[i].triangle(20, 20, 20, 180, 180, 100);
pg[i].endDraw();
pg[i].save("arrow" + str(i)+ ".png");
img[i] = loadImage("arrow" + str(i)+ ".png");
img[i].resize(40, 0);
}
}
void draw() {
for (int i = 0; i < btn.length; i++) {
btn[i].display(i);
}
}
void mousePressed() {
for (int i = 0; i < btn.length; i++) {
if ((mouseX >= btn[i].x) && (mouseX <= btn[i].x + btn[i].w) && (mouseY >= btn[i].y) && (mouseY <= btn[i].y + btn[i].h)) {
println("btn id = ", i);
}
}
}
You would have to supply your own image array to put on the buttons.
ControlP5ButtonGrid
import controlP5.*;
ControlP5 cp5;
int _numRows = 1;
int _numCols = 4;
PImage[] img;
int id = 0;
void cp5BtnGrid(int left, int top, int w, int h, int vg, int hg) {
for (int k = 0; k < _numRows; k++) {
for (int j = 0; j < _numCols; j++) {
int x = left + j*(w+vg);
int y = top + k*(h+hg);
String name = "btn" + str(id);
cp5.addButton(name).setValue(random(255)).setPosition(x,y).setSize(w,h).setImage(img[id]) ;
id++;
}
}
}
void loadImages(){
img[0] = loadImage("img0.png");
img[1] = loadImage("img1.png");
img[2] = loadImage("img2.png");
img[3] = loadImage("img3.png");
for (int i = 0; i < (_numRows*_numCols); i++) {
// REM next line out to run without images
img[i].resize(40, 0);
}
}
void setup() {
size(600, 400);
background(209);
cp5 = new ControlP5(this);
img = new PImage[_numRows*_numCols];
loadImages();
cp5BtnGrid(5, 5, 50, 50, 0, 0);
}
void draw() {
}
public void controlEvent(ControlEvent theEvent) {
println(theEvent.getController().getName());
}
public void btn0(int theValue) {
println("button event from btn0 : " + "value = " + theValue);
}
public void btn1(int theValue) {
println("button event from btn1 : " + "value = " + theValue);
}
REM out img[i].resize(40, 0); if you try to run it without adding your own images.
1 Like
Thank you, I will check your example if it solves my problem, I will definitely let you know
[image]
Perhaps I know another solution, but how to move the tabs?