I'm trying to use a diy controller from de controlP5 library examples for controlling the camera in OpenGL. The diy controller works fine without adding the camera function and prints nicely on top of 3d. Only once I add the camerafunction it doesn't print the diy controller on top of 3d but inside 3d. How can I correct this?

I used the following code:

2. /*
3. 
   
4. Gemaakt door Willem den Hollander
5. */
6. import processing.opengl.*;
7. import controlP5.*;          //library for graphic interface
8. 
   
9. //declaring a datafield
10. Datafield field;
11. 
    
12. //declaring controlpad and controlP5 (concept!!!)
13. ControlPad cp;
14. ControlP5 controlP5;
15. 
    
16. void setup() {
17.   size(800, 600, OPENGL);
18.   frameRate(30);
19.   controlP5 = new ControlP5(this);
20.   
21.   // create a new instance of the ControlPad controller.
22.   cp = new ControlPad(controlP5,"DIY",60,40,100,100);
23.   // register the newly created ControlPad with controlP5
24.   controlP5.register(cp);
25.   
26.   //initializing the datafield
27.   field = new Datafield();
28.   
29.   
30.   //add 5 datacubes
31.   field.addcube("Cube #1", 20, 20, 0);
32.   field.addcube("Cube #2", 20, 50, 0);
33.   field.addcube("Cube #3", 20, 80, 0);
34.   field.addcube("Cube #4", 20, 110, 0);
35.   field.addcube("Cube #5", 20, 140, 0);
36.   
37.   //print the data of all datacubes inside the field 
38.   //to the terminal
39.   field.printcubes();
40. }
41. 
    
42. void draw() {
43.   background(0);
44.   
45.   //camera control (concept!!!)
46.   camera(20 , 20 , 220,   // eyeX, eyeY, eyeZ
47.          20 , 20 , 0,   // centerX, centerY, centerZ
48.          0.0, 1.0, 0.0  ); // upX, upY, upZ
49.       
50.   hint(ENABLE_DEPTH_TEST);
51.   
52.   //printing 3d images
53.   field.displaycubes();
54.   field.displayfield();
55.   
56.   hint(DISABLE_DEPTH_TEST);
57. }
58. 
    
59. void controlEvent(ControlEvent theEvent) {
60.   println(theEvent.arrayValue());
61. }

I am trying to create a graphbar that i can chance by value by using a varslide (don't know the right name for it ). I have created 2 functions in order to do that, to be able to add more graphbars and varslides. The problem is that when I want to add a varslide all the varslides will get the same value. The problem lies whit global declaring the integer data. I just started programming so I could not find a sulution for this. You can find the code below. Comments are in dutch (sorry ). I could translate if you want to.

Thanks,

Willem

2. 
   
3. int data=0;                                                           // Variabele die veranderd wanneer er op de knoppen wordt gedrukt.
4. int tempdata=1;
5. 
   
6. long tempMillis = 0;                                                  // Variabelen die worden gebruikt om ervoor te zorgen dat wanneer er op een knop gedrukt wordt de variabele
7. long interval = 80;                                                   // "data" maar met 1 wordt verlaagd of verhoogd.
8. 
   
9. 
   
10. void setup() {
11.   size(500,500);                                                      // Groote van het aplicatie scherm. 
12.   background(#D1E5FF);                                                // Kleur van de achtergrond van de aplicatie. Is in dit geval blauw.
13.   
14.   PFont fontA;
15.   fontA = loadFont("Calibri-48.vlw");
16.   textFont(fontA, 16);
17.   }
18. 
    
19. void draw() {
20.   long Millis = millis();
21.     
22.   if(Millis - tempMillis > interval) {                                // Wanneer er op een knop gedrukt wordt zullen de volgende acties pas na de ingestelde tijdinterval weer
23.     tempMillis = Millis;                                              // meedoen met het programma.
24.     
25.     int Varslide1 = Varslide(80, 80);
26.     graphbar(50, 50, Varslide1);
27.   }
28.   
29.   
30. }
31. 
    
32. int Varslide(int tempX, int tempY) {
33.   boolean Plus = false;                                               // Plus wordt geinitieerd als "false".
34.   boolean Min = false;                                                // Min wordt geinitieerd als "false".
35.   
36.   //---------------------------- Plus
37.   if(mouseX>tempX && mouseX <tempX+40 && mouseY>tempY && mouseY <tempY+20) {
38.     if(mousePressed) {                                                // Wanneer de muis cursor over de knop wordt gesleept zal deze grijs kleuren.
39.       Plus =true;                                                     // Wanneer de muis cursor over de knop wordt gesleept en de muisknop wordt bediend zal buttonp "true" worden.
40.       stroke(0);
41.       fill(0);
42.     }
43.     else {
44.       stroke(0);
45.       fill(#A6A6A7);
46.     }
47.   }
48.   else {                                                              // Wanneer er niet op de button wordt gedrukt zal de buttonp logisch "0" worden en zal de kleur van de button
49.     stroke(0);                                                        // blauw worden.
50.     fill(#25C9F5);
51.   }
52.   
53.   rect(tempX, tempY, 40, 20);                                         // Een "rect" dat de button voorstelt.
54.   fill(0); 
55.   text("+", tempX+16, tempY+15);
56.   
57.   if(Plus == true && data <= 99 ) {                                  // Wanneer "Plus" bediend wordt zal de variabele "data" veranderen.
58.     data++;                        // De waarde opgeslagen in "data" kan niet hoger worden dan 100 en lager dan 0.
59.   }
60.   
61.   //---------------------------- Min
62.   if(mouseX>tempX && mouseX <tempX+40 && mouseY>tempY+20 && mouseY <tempY+20+20) {
63.     if(mousePressed) {                                                // Wanneer de muis cursor over de knop wordt gesleept zal deze grijs kleuren.
64.       Min=true;                                                       // Wanneer de muis cursor over de knop wordt gesleept en de muisknop wordt bediend zal buttonp "true" worden.
65.       stroke(0); 
66.       fill(0);
67.     }
68.     else {
69.       stroke(0);
70.       fill(#A6A6A7);
71.     }
72.   }
73.   else {                                                              // Wanneer er niet op de button wordt gedrukt zal de buttonp logisch "0" worden en zal de kleur van de button
74.     stroke(0);                                                        // blauw worden.
75.     fill(#25C9F5);
76.   }
77. 
    
78.   rect(tempX, tempY+20, 40, 20);                                      // Een "rect" dat de button voorstelt.
79.   fill(0); 
80.   text("-", tempX+18, tempY+34);
81.   
82.   if(Min == true && data >= 1 ) {
83.     data--;
84.   }
85.   
86.   //---------------------------- Weergave van data.
87.   if(data!=tempdata) {                                                // Wanneer de waarde data veranderd zal de variabele "data" op het scherm vernieuwen.
88.     stroke(0);
89.     fill(#25C9F5);
90.     rect(tempX+40, tempY, 40, 40);  
91.     fill(0);
92.     text(data + "%", tempX+44, tempY+25);
93.     tempdata=data;
94.   }
95.   return data;
96. }
97. 
    
98. void graphbar(int tempX, int tempY, int tempData) {
99.   stroke(0);              // Buitenbalk.
100.   fill(255);
101.   rect(tempX, tempY, 200, 10);
102.   
103.   stroke(#25C9F5);        // Binnenbalk.
104.   fill(#25C9F5);
105.   
106.   rect(tempX+1, tempY+1, tempData*1.98, 8);
107. }