# Tabs, Set font and position with controlP5

**URL:** https://discourse.processing.org/t/tabs-set-font-and-position-with-controlp5/31925
**Category:** Libraries
**Created:** [August 25, 2021, 8:13pm UTC](https://discourse.processing.org/t/tabs-set-font-and-position-with-controlp5/31925 "2021-08-25T20:13:24Z")
**Posts on this page:** 10
**Page:** 1

<div class="post-metadata">

### Author: ![jhsa](https://avatars.discourse-cdn.com/v4/letter/j/e47c2d/32.png) [@jhsa](https://discourse.processing.org/u/jhsa)
#### Post date: [August 25, 2021, 8:13pm UTC](https://discourse.processing.org/t/tabs-set-font-and-position-with-controlp5/31925/1 "2021-08-25T20:13:25Z")

</div>

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. ☹  
This also doesn’t do anything " setPosition(float, float)".

What is happening? Thanks for your help.

João

```auto
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");
  
}

```

---

<div class="post-metadata">

### Author: ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)
#### Post date: [August 26, 2021, 12:36am UTC](https://discourse.processing.org/t/tabs-set-font-and-position-with-controlp5/31925/2 "2021-08-26T00:36:51Z")

</div>

@jhsa

this for font

```auto
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");
  
}
 

```

---

<div class="post-metadata">

### Author: ![jhsa](https://avatars.discourse-cdn.com/v4/letter/j/e47c2d/32.png) [@jhsa](https://discourse.processing.org/u/jhsa)
#### Post date: [August 26, 2021, 12:42am UTC](https://discourse.processing.org/t/tabs-set-font-and-position-with-controlp5/31925/3 "2021-08-26T00:42:08Z")

</div>

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

```auto
read_data = new int[8192];

```

has to stay uncommented.

---

<div class="post-metadata">

### Author: ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)
#### Post date: [August 26, 2021, 1:02am UTC](https://discourse.processing.org/t/tabs-set-font-and-position-with-controlp5/31925/4 "2021-08-26T01:02:59Z")

</div>

> [@jhsa](#):
>
> ```auto
> read_data = new int[8192];
> 
> ```
> 
> has to stay uncommented.

```auto
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);

```

---

<div class="post-metadata">

### Author: ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)
#### Post date: [August 26, 2021, 1:48am UTC](https://discourse.processing.org/t/tabs-set-font-and-position-with-controlp5/31925/5 "2021-08-26T01:48:58Z")

</div>

> [@jhsa](#):
>
> set the position of the tabs

@jhsa

> **[controlP5 tabs positioning - Processing Forum](https://forum.processing.org/one/topic/controlp5-tabs-positioning.html)**
>
> Processing Forum

---

<div class="post-metadata">

### Author: ![jhsa](https://avatars.discourse-cdn.com/v4/letter/j/e47c2d/32.png) [@jhsa](https://discourse.processing.org/u/jhsa)
#### Post date: [August 26, 2021, 3:17am UTC](https://discourse.processing.org/t/tabs-set-font-and-position-with-controlp5/31925/6 "2021-08-26T03:17:05Z")

</div>

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.

```auto
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);

```

---

<div class="post-metadata">

### Author: ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)
#### Post date: [August 26, 2021, 3:49am UTC](https://discourse.processing.org/t/tabs-set-font-and-position-with-controlp5/31925/7 "2021-08-26T03:49:50Z")

</div>

read this

#### [Re: controlP5 tabs positioning](https://forum.processing.org/one/topic/controlp5-tabs-positioning#25080000000613545.html)

---

<div class="post-metadata">

### Author: ![jhsa](https://avatars.discourse-cdn.com/v4/letter/j/e47c2d/32.png) [@jhsa](https://discourse.processing.org/u/jhsa)
#### Post date: [August 26, 2021, 1:09pm UTC](https://discourse.processing.org/t/tabs-set-font-and-position-with-controlp5/31925/8 "2021-08-26T13:09:20Z")

</div>

I did, many times. But I cannot find out how to use that solution ☹ I am a beginner, remember? 😉 🙂

---

<div class="post-metadata">

### Author: ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)
#### Post date: [August 29, 2021, 12:39pm UTC](https://discourse.processing.org/t/tabs-set-font-and-position-with-controlp5/31925/9 "2021-08-29T12:39:47Z")

</div>

Hello @jhsa,

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

- [GitHub - sojamo/controlp5: A gui library for processing.org](https://github.com/sojamo/controlp5)

- This is in the Contributed Libraries examples:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/1/10a3084b26bc46a2c1283b18c7ba1f2268a67c2a.png)

There may be something in there that helps.

`:)`

---

<div class="post-metadata">

### Author: ![jhsa](https://avatars.discourse-cdn.com/v4/letter/j/e47c2d/32.png) [@jhsa](https://discourse.processing.org/u/jhsa)
#### Post date: [August 29, 2021, 12:54pm UTC](https://discourse.processing.org/t/tabs-set-font-and-position-with-controlp5/31925/10 "2021-08-29T12:54:06Z")

</div>

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