controlp5: setting visibility of tab items

aroonkriss

controlp5: setting visibility of tab items

in Contributed Library Questions • 10 months ago

Hi ,

I was programming with processing 1.2.1 using controlp5 controllers. i need to develop an application with multiple tab widgets. i have created 'labels' , 'textfields' and 'buttons'. i want to customize each tab such that one button shown in one tab should not be visible in another tab. i have used the following codes to move each items to various tabs.

cp5.getController("label1").moveTo("tab1");
     cp5.getController("Select COM").moveTo("tab2");
     cp5.getController("Read").moveTo("tab3");

When the application starts, it looks fine. the default tab is not displaying controllers from other tabs. But after selecting other tabs, when the controllers come, they wouldn't go even after selecting another tab. They are permanently visible. I used "hide()' and 'setVisible(false)' to hide the items. in that case, they are not accessible from other widgets, but they are visible. please someone help me to manage the visibilty of each tab items.

ANY HELP WOULD BE APPRECIATED.   THANK YOU..... PLEASE REPLY, IT MAY BE SIMPLE FOR YOU, BUT I AM STUCK WITH. HELP ME

Replies(3)

amnon.owed

Re: controlp5: setting visibility of tab items

10 months ago

Removed your other post, because this is a double post but has a better description.

As I suggested there, are you using a background() call in draw()? In the past people have reported the same problem, but they were just not clearing the canvas.

Have you tried the Tab example that comes with ControlP5? Does that work?

aroonkriss

Re: controlp5: setting visibility of tab items

10 months ago

hi,

thank you for responding

i have tried the example with controlp5 and i coded my application based on that example. but it is not working. and i am calling background() in setup() as background(myColor) not in draw(). actually i am new to processing and i am coding an application by analyzing the examples and reference in processing help. now i am coding without tabs which makes my application crowded. so if you have any suggestion, please help me

andreas.s..

Re: controlp5: setting visibility of tab items

10 months ago

Hi, as amnon already suggested, drawing the background with a plain color inside draw will override all existing pixels, hence the controllers drawn inside a tab will disappear when the tab is inactive. if background() is not called, the content of the display will not be cleared or overwritten, but each element that gets drawn will be add to the existing content - this is why the controllers remain visible although the corresponding tab is not active.

in case you need to avoid a background call due to for example a trails effect, i suggest you use an OffscreenBuffer, draw your content into the buffer and then draw the buffer into the display, after that the controller elements will be drawn on top of the buffer, inactive controller element will disappear, see example below.

import controlP5.*;
ControlP5 cp5;
PGraphics buffer;
float slider;
void setup() {
size(600,400);
// use the P2D or P3D renderer for better performance when using processing 2+ (2.0b7+)
// size(800,600,P2D);
// init controlP5 and add 1 controller, a slider, to tab 'myTab'
cp5 = new ControlP5(this);
cp5.addTab("myTab");
cp5.addSlider("slider")
.setPosition(10,100)
.setSize(100,20)
.setRange(0.1, 40)
.setValue(10)
.moveTo("myTab")
;
// create and init the offscreenbuffer 'buffer'
buffer = createGraphics(width,height);
buffer.beginDraw();
background(0);
buffer.noStroke();
buffer.endDraw();
}
void draw() {
background(0);
// start updating the buffer
buffer.beginDraw();
// slightly tint the background of the buffer with black
buffer.fill(0,5);
buffer.rect(0,0,buffer.width, buffer.height);
int w2 = buffer.width/2;
int h2 = buffer.height/2;
float value = frameCount*0.01;
buffer.translate( w2, h2 );
// lets draw something into our buffer
// (these are just some random procedures)
for(int i=0;i<10;i++) {
buffer.fill(255,100);
buffer.pushMatrix();
buffer.translate(sin(value) * w2 + i , cos(value) * i );
buffer.rotate(value);
buffer.rect( 0 , 0 , i*slider , i*slider );
buffer.popMatrix();
}
// finish the buffer updates
buffer.endDraw();
// draw the buffer into the display
image(buffer,0,0);
}

Top Reply