Control P5 Buttons in P3D follows the 3D orientation of the sketch. How to make it fixed?

If I do the same for a normal sketch with nothing in it the button appears. But even if I write the same code for my sketch, the button does not appear.

The result is following:

The funny thing is if I click in approximate location of the button it works.

Here I toggled off the red set of curves clicking approximately where the button might have been.

This is my code in which the button does not appear:

import controlP5.*;

PImage worldMap;
PShape box;
Table table, table2;
int rowCount;
float x1, y1, z1, x2, y2, z2;

//Interaction Zoom and Pan Variables:
float zoom = 600;
float panLeft = 0;
float panTop = 0;


DestinationToTrip fromUSA;
DestinationToTrip toUSA;

ControlP5 button1;
ControlP5 button2;
boolean isFromUSAVisible = false;
boolean isToUSAVisible = false;


void setup() {
  size(1400, 800, P3D);
  table = new Table("From_USA_Coordinates.tsv");
  table2 = new Table("To_USA.tsv");
  rowCount = table.getRowCount();
  
  worldMap = loadImage("world.topo.bathy.200406.3x5400x2700.jpg"); 
  worldMap.resize(500, 300);
  textureMode(NORMAL);
  fill(255);
  //stroke(color(44,48,32));
  box = createShape(BOX, -650, 300, 0);
  box.beginShape(BOX);
  box.endShape();  
  box.setTexture(worldMap);
  
  fromUSA = new DestinationToTrip(table);
  toUSA = new DestinationToTrip(table2);
  
  fill(150);
  
  pushMatrix();
    camera();
    button1 = new ControlP5(this);
    button1.addButton("From_USA_to_Other_Countries").setValue(1).setPosition((100), (height-150)).setSize(200, 100).setColorBackground(color(76,112,170)).setVisible(true);
    
    button2 = new ControlP5(this);
    button2.addButton("From_Other_Countries_to_USA").setValue(0).setPosition((350), (height-150)).setSize(200, 100).setColorBackground(color(76,112,170));
  popMatrix();
}

void draw() {  
  background(155);  
  fill(0);  
  titlesAndLegends(); 
  boxSetup();
  
  if(isFromUSAVisible == true) {
  fromUSA.displayCurves(table, #F05252);  
  }
  
  if(isToUSAVisible == true){
  toUSA.displayCurves(table2, #6260F5 );
  }
}

void boxSetup(){
   camera(panLeft, zoom , zoom, panLeft, -150, panTop, 0, 1, 0);   // eye(0, 600, 600) center(0, 0, 0) up(0, 1, 0)
  
  pushMatrix();
    translate(-350, 0, 0);
    shape(box);
  popMatrix();  

  pushMatrix();
    translate(350, 0, 0);
    shape(box);
  popMatrix();  
}

void titlesAndLegends() {
  pushMatrix();
    camera();
    textAlign(CENTER);
    textSize(25);
    fill(0);
    text("Flights Involving USA - 2019", width/2, 50);  
    text("Member Country", 350, 200);
    text("Trip Country", width-350, 200);
  popMatrix();
}

void mouseDragged() {
  if((mouseX- pmouseX) > 0){
    panLeft -= 5;
  } else {
    panLeft += 5;
  }
}

void mouseWheel(MouseEvent event) {
  float e = event.getCount();
  if(e == 1) {
    zoom += 30;
  }else {
    zoom -= 30;
  } 
}

public void From_USA_to_Other_Countries() {
  if(!isFromUSAVisible) {
    isFromUSAVisible = true;
  }else {
    isFromUSAVisible = false;
  }
}

public void From_Other_Countries_to_USA() {
  if(!isToUSAVisible) {
    isToUSAVisible = true;
  }else {
    isToUSAVisible = false;
  }
}

If I write the same set of code in an empty sketch it works:

import controlP5.*;

ControlP5 button1;
ControlP5 button2;
boolean isFromUSAVisible = false;
boolean isToUSAVisible = false;

void setup() {
  size(700, 500, P3D);
  
  button1 = new ControlP5(this);
    button1.addButton("From_USA_to_Other_Countries").setValue(1).setPosition((100), (height-150)).setSize(200, 100).setColorBackground(color(76,112,170)).setVisible(true);
    
    button2 = new ControlP5(this);
    button2.addButton("From_Other_Countries_to_USA").setValue(0).setPosition((350), (height-150)).setSize(200, 100).setColorBackground(color(76,112,170));
}

void draw() {
  
}

public void From_USA_to_Other_Countries() {
  if(!isFromUSAVisible) {
    isFromUSAVisible = true;
  }else {
    isFromUSAVisible = false;
  }
}

public void From_Other_Countries_to_USA() {
  if(!isToUSAVisible) {
    isToUSAVisible = true;
  }else {
    isToUSAVisible = false;
  }
}

Capture6

Can anybody please help me?

It is embedded in my 3d plane somewhere far beyond.
How to convert it into 2d like the texts. The trick that worked with the texts did not work for the buttons

maybe use controlP5.setAutoDraw(false);

see Codec ░ ControlP5, PeasyCam and HUD in Processing

void gui() {
currCameraMatrix = new PMatrix3D(g3.camera);
camera();
controlP5.draw();
g3.camera = currCameraMatrix;
}

flaws

there are flaws in your code; e.g. no pushMatrix popMatrix in setup needed

controlP5 = new ControlP5(this); only once

then 2 buttons, not 2 ControlP5

1 Like