2. ControlP5 cp5;
3. 
   
4. controlP5.Button b1,b2,b3;
5. 
   
6. //(Button A)
7. controlP5.Range r1,r2,r3,r4;
8. controlP5.Group g1;  
9. controlP5.Group g2;  
10. controlP5.Group g3;   
11. controlP5.Group g4;   
12. 
    
13. //(Button B)
14. controlP5.Slider s1;  
15. controlP5.Knob k1;   
16. controlP5.Slider s2;  
17. controlP5.Slider s3;  
18. controlP5.Group g5;  
19. controlP5.Group g6;  
20. controlP5.Group g7;  
21. controlP5.Group g8;  
22. 
    
23. int w_barra = 37;
24. int h,w;
25. int k_x,k_y,c1,c2,f1,f2,g_w,g_h,r_x,r_y,t_x,t_y,h_size;
26. 
    
27. void setup() {
28.   size(displayWidth, displayHeight);
29.   
30.   //define heights and positions
31.   h = (height - w_barra);
32.   w = width;
33.   c1 = 6*w/24;                 //Posicion columna izquierda en x 
34.   c2 = 16*w/24;                //   ''    columna derecha en x
35.   f1 = (h/2+w_barra)/2-w/12;   //   ''    fila 1 en y
36.   f2 = (h/2+w_barra)+w/24;     //   ''    fila 2 en y
37.   g_w = w/4;                   //Ancho de los grupos
38.   g_h = 5*w/24;                //Alto de los grupos
39.   
40.   r_x = 55; r_y = g_h/2-w/48; t_x = 315; t_y = 40; h_size = 20;
41.   
42.   PImage[] imgs = {loadImage("botona.png"),loadImage("botonb.png"),loadImage("botonc.png")};
43.  
44.   cp5 = new ControlP5(this);
45.     
46.   // SETTING page     
47.   g1 = makeGroup("Seteo de Temperatura", c1 , f1 , g_w , g_h , w_barra);  
48.   g2 = makeGroup("Seteo de Humedad", c2 , f1 , g_w , g_h , w_barra);
49.   g3 = makeGroup("Seteo de Dioxido de Carbono", c1 , f2 , g_w , g_h , w_barra);
50.   g4 = makeGroup("Seteo de Luminosidad", c2 , f2 , g_w , g_h , w_barra);
51. 
    
52.   r1 = makeRange("Rango de Temperatura deseada", r_x , r_y , t_x , t_y , h_size , -55 , 150 , 55 , 55 , g1 );     
53.   r2 = makeRange("Rango de Humedad deseada", r_x , r_y , t_x , t_y , h_size , 0 , 100 , 50 , 50 , g2 );
54.   r3 = makeRange("Rango de Dioxido de Carbono deseado", r_x , r_y , t_x , t_y , h_size , 350 , 10000 , 4825 , 4825 , g3 );       
55.   r4 = makeRange("Rango de Luminosidad deseado", r_x , r_y , t_x , t_y , h_size , 0 , 40000 , 20000 , 20000 , g4);
56.          
57.   // SHOWING page
58.   g5 = makeGroup("Medicion de Temperatura", c1 , f1 , g_w , g_h , w_barra);            
59.   g6 = makeGroup("Medicion de Humedad", c2 , f1 , g_w , g_h , w_barra);
60.   g7 = makeGroup("Medicion de Dioxido de Carbono", c1 , f2 , g_w , g_h , w_barra);
61.   g8 = makeGroup("Medicion de Luminosidad", c2 , f2 , g_w , g_h , w_barra);
62.   
63.   s1 = makeSlider("Temperatura", -55 , 150 , 0 , r_y , r_x , t_y , t_x , g5 , 0 , 0); 
64.   s2 = makeSlider("Dioxido de Carbono", 350 , 10000 , 0 , r_x , r_y , t_x , t_y , g7 , -210 , -40);
65.   s3 = makeSlider("Luminosidad", 0 , 40000 , 0 , r_x , r_y , t_x , t_y , g8 , -210 , -40);
66.           
67.   k1 = cp5.addKnob("Humedad", 0 , 100 , 0 , r_x , r_y , 200) 
68.           .setGroup(g6)
69.           .setDragDirection(Knob.VERTICAL);
70.    
71.   // Control pannel button
72.   b1 = makeButton("colorA", 0 , w_barra , displayWidth/6 , h/3 , 0 , imgs );          //Menu seteo de valores    
73.   b2 = makeButton("colorB", 0 , w_barra+h/3 , displayWidth/6 , h/3 , 0 , imgs );   //Menu muestra valores    
74.   b3 = makeButton("colorC", 0, w_barra+2*h/3 , displayWidth/6, h/3 , 0 , imgs );  //Menu grafica valores 
75. }
76. 
    
77. void draw() {
78.   background(0);
79. 
    
80.   fill(255);
81.   rect(0,0,displayWidth,w_barra);
82.   String f = getFechaActual();
83.   String h = getHoraActual();
84.   fill(0);
85.   text("Día del sistema: " + f,19*w/24,0.35*w_barra);
86.   text("Hora del sistema: " + h,19*w/24,0.8*w_barra);
87.   textAlign(CENTER, LEFT);
88. }
89. 
    
90. void controlEvent(ControlEvent theEvent) {
91. 
    
92.   if (theEvent.isController()) {
93.     if (theEvent.controller().name() == "colorA") {
94.       g1.show(); g2.show(); g3.show(); g4.show();
95.       g5.hide(); g6.hide(); g7.hide(); g8.hide();
96.       
97.     }
98.     if (theEvent.controller().name() == "colorB") {
99.       g1.hide(); g2.hide(); g3.hide(); g4.hide();
100.       g5.show(); g6.show(); g7.show(); g8.show();
101.     }
102. //  if (theEvent.controller().name() == "colorC") {
103. //  }
104.   }
105. }

I will explain the idea. It is like a control pannel, with 3 buttons:

A) Show te page where we can stablish the requires ranges.

B) Show the page, where we can read the sensors trough an Arduino.

C) I want to add graphs about the evolution of the different measures of the sensors.

Now i tell you about my problems. I have 2 problems. 

1) I want to add like a Log In page, with the name of the project and an username field. But it is impossible to make another window. I see libraries like g4p, gicentre (slides)..bu i cant make exactly like i want. What is the easiest way to add a window that when i ''click'' in log in button, dissappear the page and appear the other detail before?

2) I have a problem with button C. The thing is the other 2 buttons, is easy because i only have to show or hide some of the knobd, slides and ranges. But with this is different because it have another configuration. So, how ca i fix it? using Extend?? or PAplet??

OK, i hope someone can help me...and sorry for disturb!

I send an image of the idea..