Tabs, Set font and position with controlP5

Guys, I am trying to set the position of the tabs in “Processing” but that doesn’t work.
Also using “.setFont(font1)” throws a “NullPointerException” error. :frowning:
This also doesn’t do anything " setPosition(float, float)".

What is happening? Thanks for your help.

João

void setup() {
  clear();
  read_data = new int[8192];
  size(800, 600); // Create Window
  cp5 = new ControlP5(this);
  font = createFont("Arial Bold", 18);
  font1 = createFont("Arial Bold", 9);
  font2 = createFont("Arial Bold", 13);
  font3 = createFont("Arial Bold", 12);
 
  cp5.addTab("default")
  .setSize(60, 20)

     .setColorBackground(color(216, 216, 216))
     .setColorForeground(color(232, 232, 232))
    .setColorActive(color(186, 188, 188))
    .setColorLabel(color(0, 0, 0))
    .getCaptionLabel().align(CENTER,CENTER)
     ;
     
     cp5.addTab("Presets")
      .setSize(60, 20)

     .setColorBackground(color(216, 216, 216))
     .setColorForeground(color(232, 232, 232))
    .setColorActive(color(186, 188, 188))
    .setColorLabel(color(0, 0, 0))
    .getCaptionLabel().align(CENTER,CENTER)
     ;
     
     cp5.addTab("Hardware")
      .setSize(60, 20)

     .setColorBackground(color(216, 216, 216))
     .setColorForeground(color(232, 232, 232))
    .setColorActive(color(186, 188, 188))
    .setColorLabel(color(0, 0, 0))
    .getCaptionLabel().align(CENTER,CENTER)
     ;
     
     cp5.addTab("Global")
      .setSize(60, 20)

     .setColorBackground(color(216, 216, 216))
     .setColorForeground(color(232, 232, 232))
    .setColorActive(color(186, 188, 188))
    .setColorLabel(color(0, 0, 0))
    .getCaptionLabel().align(CENTER,CENTER)
     ;
     
     cp5.getTab("default")     
     .activateEvent(true)
     .setLabel("Bypass")
     .setId(1)
     ;

  cp5.getTab("Presets")
     .activateEvent(true)
     .setId(2)
     ;
     
     cp5.getTab("Global")
     .activateEvent(true)
     .setId(3)
     ;
     cp5.getTab("Hardware")
     .activateEvent(true)
     .setId(4)
     ;
     
  
  // Add Button
  cp5.addButton("Open") // "Start" is the name of the Button
  .setBroadcast(false)
    .setPosition(10, 20) // x and y coordinates of upper left corner of Button
    .setSize(60, 20)     // (Width, Height)
    .setFont(font1)
    .setColorBackground(color(216, 216, 216))
    .setColorForeground(color(232, 232, 232))
    .setColorActive(color(186, 188, 188))
    .setColorLabel(color(0, 0, 0))
    .setValue(1)
     .setBroadcast(true)
     .getCaptionLabel().align(CENTER,CENTER)
    ;
    
     cp5.addButton("Save") // "Start" is the name of the Button
     .setBroadcast(false)
    .setPosition(80, 20) // x and y coordinates of upper left corner of Button
    .setSize(60, 20)     // (Width, Height)
    .setFont(font1)
    .setColorBackground(color(216, 216, 216))
    .setColorForeground(color(232, 232, 232))
    .setColorActive(color(186, 188, 188))
    .setColorLabel(color(0, 0, 0))
    .setValue(2)
     .setBroadcast(true)
     .getCaptionLabel().align(CENTER,CENTER)
    ;

    cp5.getController("Open").moveTo("global");
    cp5.getController("Save").moveTo("global");
  
}

@jhsa

this for font

import controlP5.*;

ControlP5 cp5;

PFont font ,font1,font2,font3 ;

void setup() {
  clear();
//  read_data = new int[8192];
  size(800, 600); // Create Window
  cp5 = new ControlP5(this);
 font = createFont("Arial Bold", 18);
  font1 = createFont("Arial Bold", 9);
  font2 = createFont("Arial Bold", 13);
  font3 = createFont("Arial Bold", 12);
  cp5.addTab("default")
  .setSize(60, 20)

     .setColorBackground(color(216, 216, 216))
     .setColorForeground(color(232, 232, 232))
    .setColorActive(color(186, 188, 188))
    .setColorLabel(color(0, 0, 0))
    .getCaptionLabel().align(CENTER,CENTER)
     ;
     
     cp5.addTab("Presets")
      .setSize(60, 20)

     .setColorBackground(color(216, 216, 216))
     .setColorForeground(color(232, 232, 232))
    .setColorActive(color(186, 188, 188))
    .setColorLabel(color(0, 0, 0))
    .getCaptionLabel().align(CENTER,CENTER)
     ;
     
     cp5.addTab("Hardware")
      .setSize(60, 20)

     .setColorBackground(color(216, 216, 216))
     .setColorForeground(color(232, 232, 232))
    .setColorActive(color(186, 188, 188))
    .setColorLabel(color(0, 0, 0))
    .getCaptionLabel().align(CENTER,CENTER)
     ;
     
     cp5.addTab("Global")
      .setSize(60, 20)

     .setColorBackground(color(216, 216, 216))
     .setColorForeground(color(232, 232, 232))
    .setColorActive(color(186, 188, 188))
    .setColorLabel(color(0, 0, 0))
    .getCaptionLabel().align(CENTER,CENTER)
     ;
     
     cp5.getTab("default")     
     .activateEvent(true)
     .setLabel("Bypass")
     .setId(1)
     ;

  cp5.getTab("Presets")
     .activateEvent(true)
     .setId(2)
     ;
     
     cp5.getTab("Global")
     .activateEvent(true)
     .setId(3)
     ;
     cp5.getTab("Hardware")
     .activateEvent(true)
     .setId(4)
     ;
     
  
  // Add Button
  cp5.addButton("Open") // "Start" is the name of the Button
  .setBroadcast(false)
    .setPosition(10, 20) // x and y coordinates of upper left corner of Button
    .setSize(60, 20)     // (Width, Height)
    .setFont(font1)
    .setColorBackground(color(216, 216, 216))
    .setColorForeground(color(232, 232, 232))
    .setColorActive(color(186, 188, 188))
    .setColorLabel(color(0, 0, 0))
    .setValue(1)
     .setBroadcast(true)
     .getCaptionLabel().align(CENTER,CENTER)
    ;
    
     cp5.addButton("Save") // "Start" is the name of the Button
     .setBroadcast(false)
    .setPosition(80, 20) // x and y coordinates of upper left corner of Button
    .setSize(60, 20)     // (Width, Height)
    .setFont(font1)
    .setColorBackground(color(216, 216, 216))
    .setColorForeground(color(232, 232, 232))
    .setColorActive(color(186, 188, 188))
    .setColorLabel(color(0, 0, 0))
    .setValue(2)
     .setBroadcast(true)
     .getCaptionLabel().align(CENTER,CENTER)
    ;

    cp5.getController("Open").moveTo("global");
    cp5.getController("Save").moveTo("global");
  
}
 

Thanks. I don’t think you added a font to the tabs?
Also

read_data = new int[8192];

has to stay uncommented.

import controlP5.*;

ControlP5 cp5;

PFont font ,font1,font2,font3 ;
int  read_data[];
void setup() {
  clear();
 read_data = new int[8192];
  size(800, 600); // Create Window
  cp5 = new ControlP5(this);
 font = createFont("Arial Bold", 88);

@jhsa

https://forum.processing.org/one/topic/controlp5-tabs-positioning.html

Yes, I have that on the code, but i get that “Null Exception” error when I add the font setting to the “Add Tab” code.

void setup() {
  clear();
  read_data = new int[8192];
  size(800, 600); // Create Window
  cp5 = new ControlP5(this);
  font = createFont("Arial Bold", 18);
  font1 = createFont("Arial Bold", 10);
  font2 = createFont("Arial Bold", 13);
  font3 = createFont("Arial Bold", 12);

read this

Re: controlP5 tabs positioning

I did, many times. But I cannot find out how to use that solution :frowning: I am a beginner, remember? :wink: :slight_smile:

Hello @jhsa,

I am not a controlP5 user (on my to do list) but can direct you to resources that I am aware of:

There may be something in there that helps.

:)

1 Like

Thanks, I haven’t seen that, I did look in the examples

1 Like