States and ControlP5

Processing Libraries
1

Hello everyone!

Currently working into a final project for my degree in media and cinema studies. For that I envisioned a video-installation that consists into two steps. At first, we have the user inputting information such as name, gender, age, nationality and so on (using Processing). While all this happens, I want to capture the camera signal and render the video for the second step. It would only happen once, in the beggining of the activation.

This next portion of the installation will display the info gathered into an array using treemap libraries, as well as the video captured (for this particular bit I planned into using Praxis Live software)

With all that said, my initial plan is to cover up single steps of code and try to merge them in the future. I’m currently struggling with different text boxes appearing as the user proceeds writing their info.

I managed to understand the basics of constructing textareas and textfields, but I can’t get my head around on how to hide or show them.

This is the piece of code I’m using to try and tackle this part of the project:


   import controlP5.*;

ControlP5 cp5;

Button mouseClick;

Textarea myTextarea;
Textarea iniciar;

String textValue = "";

int state = 0;

void setup() {
  size (500, 500);
  
  //fullScreen();

  noStroke();

  cp5 = new ControlP5(this);
  
  /*mouseClick = new Button(cp5, "clique aqui para continuar")
    .setSize(100, 20)
    .addCallback(new CallbackListener() {
      public void controlEvent(CallbackEvent theEvent) {
        if (theEvent.getAction()==ControlP5.ACTION_CLICK) {        
          state+=1;
          println(state);
        }
      }
    })
    ;*/
    
}

void draw() {
  
  
  background(0);
  
  switch (state) {
    
    case 0:
      splashText();
      break;
      
    case 1:
      background(0);
      cp5.get(Textarea.class, "titulo").setVisible(false);
      cp5.get(Textarea.class, "clique").setVisible(false);
      break;
  }
}

void splashText() {
  
  cp5 = new ControlP5(this);
  
  myTextarea = cp5.addTextarea("titulo")
    .setPosition(100, 100)
    .setSize(400, 40)
    .setFont(createFont("arial", 30))
    .setLineHeight(14)
    .setColor(color(128))
    .setColorBackground(color(185, 100))
    .setColorForeground(color(255, 100))
    ;
  myTextarea.setText("enTro" 
    );
    
    iniciar = cp5.addTextarea("clique")
    .setPosition(280, 295)
    .setSize(200, 25)
    .setFont(createFont("arial", 12))
    .setLineHeight(14)
    .setColor(color(135))
    .setColorBackground(color(198, 100))
    .setColorForeground(color(255, 100))
    ;
  iniciar.setText("clique para continuar..." 
    ); 
}


public void nome() {

  cp5 = new ControlP5(this);

  cp5.addTextfield("nome")
    .setPosition(100, 100)
    .setSize(200, 40)
    .setFont(createFont("arial", 12))
    .setColor(color(128))
    .setColorBackground(color(185, 100))
    .setFocus(true)
    .setAutoClear(false)
    ;
}

public void idade() {
}



void mouseClicked() {
  int i = 0;
  
  if (i <= state)
  {
   if (state < 2)
   {
    state++;
    i++;
    println(state);
   }
   else {
   state = 0;
   println("reset");
   }
  }
  
  }

I have some more questions with the other bits of the project, but I’ll try to focus into one issue at a time.
every opinion to me is really important, thanks in advance!

2

Please be more specific. What, specifically, are you trying to do? Hide a textarea when …? Show it when … ?

I see that in draw you are checking state (mouse clicks) and using .setVisible(false)

3

Your mouseClicked looks like it might be wrong. I think all you want is a simple counter that cycles back to 0:

int state=0;
int MAXSTATE=2;
void draw(){
}
void mouseClicked() {
  state++;
  if(state>MAXSTATE){
    state=0;
    println("reset");
  }
  println(state);
}

You can also do this even more simply using modulo (%):

int state=0;
int MAXSTATE=2;
void draw(){
}
void mouseClicked() {
  state=(state+1)%(MAXSTATE+1);
  println(state);
}
4

thanks Jeremy, for both answers!

when I mentioned the basics, I was referring to declarations, basic changes on color, position and size of textareas and textfields. in this particular case I’m trying to do some dialog boxes where the user would write their answer and when they clicked/hit enter the screen would advance to a next dialog box.

my code missed the point of the max status because I wasn’t paying attention arithmetics, but even when I used the modulo expression for mouse click you suggested, it doesn’t change any states!

wouldn’t it be enough to set the visibility ‘false’ and make those pesky boxes disappear?

again, thanks for your attention, I’m trying to learn more of that library as we speak

5

For testing and debugging I think you should start with a very basic example and build up. In your MCVE test sketch rid of everything that isn’t the specific thing you are trying to get working.

// hold key to show field
import controlP5.*;
ControlP5 cp5;

void setup(){
  cp5 = new ControlP5(this);
  cp5.addTextarea("titulo")
    .setPosition(10, 10)
    .setText("ENTRO");
}

void draw(){
  background(0);
  if(keyPressed){
      cp5.get(Textarea.class, "titulo").setVisible(true);
  } else {
      cp5.get(Textarea.class, "titulo").setVisible(false);
  }
}

Then, start with what you know works and add a state-based switch.

// tap key to cycle show-hide
import controlP5.*;
ControlP5 cp5;
int state=0;
int MAXSTATE=1;

void setup(){
  cp5 = new ControlP5(this);
  cp5.addTextarea("titulo")
    .setPosition(10, 10)
    .setText("ENTRO");
}

void draw(){
  background(0);
  switch (state) {
    case 0:
      cp5.get(Textarea.class, "titulo").setVisible(true);
      break;
    case 1:
      cp5.get(Textarea.class, "titulo").setVisible(false);
      break;
  }
}

void keyReleased() {
  state=(state+1)%(MAXSTATE+1);
  println(state);
}
1 Like
6

hello Jeremy, sorry for my absence! I booked some gigs and then got sick, that’s why I vanished

I managed to do that for now, cycling through those states smoothly:

import controlP5.*;
ControlP5 cp5;
int state = 0;
int MAXSTATE = 2;

void setup(){
  
  size (500, 500);
  
  cp5 = new ControlP5(this);
  
  cp5.addTextarea("titulo")
    .setPosition(100, 100)
    .setSize(400, 40)
    .setFont(createFont("arial", 30))
    .setLineHeight(14)
    .setColor(color(128))
    .setColorBackground(color(185, 100))
    .setColorForeground(color(255, 100))
    .setText("enTro");
    
  cp5.addTextarea("clique")
    .setPosition(280, 295)
    .setSize(200, 25)
    .setFont(createFont("arial", 12))
    .setLineHeight(14)
    .setColor(color(135))
    .setColorBackground(color(198, 100))
    .setColorForeground(color(255, 100))
    .setText("clique para continuar...")
    ;
    
    cp5.addTextfield("digite seu nome")
    .setPosition(120, 100)
    .setSize(390, 40)
    .setFont(createFont("arial", 30))
    .setColor(color(128))
    .setColorBackground(color(185, 100))
    .setColorForeground(color(255, 100))
    ;
    
    
}

void draw(){
  background(0);
  switch (state) {
    case 0:
      cp5.get(Textarea.class, "titulo").setVisible(true);
      cp5.get(Textarea.class, "clique").setVisible(false);
      cp5.get(Textfield.class, "digite seu nome").setVisible(false);
      break;
   
    case 1:
      cp5.get(Textarea.class, "titulo").setVisible(true);
      cp5.get(Textarea.class, "clique").setVisible(true);
      cp5.get(Textfield.class, "digite seu nome").setVisible(false);
      break;
      
    case 2:
      cp5.get(Textarea.class, "titulo").setVisible(false);
      cp5.get(Textarea.class, "clique").setVisible(false);
      cp5.get(Textfield.class, "digite seu nome").setVisible(true);
      break;
      
    case 3:
      cp5.get(Textarea.class, "titulo").setVisible(false);
      cp5.get(Textarea.class, "clique").setVisible(false);
      cp5.get(Textfield.class, "digite seu nome").setVisible(false);
      break;  
      
      
  }
}

void keyPressed() {
  
  if ( key == RETURN || key == ENTER)
  {
  
  state=(state+1)%(MAXSTATE+1);
  println(state);
  
  }
}

just so I can close this topic once and for all, I want to save the information the user inputs into a .txt file, but since enter is doing the whole case switching, I couldn’t implement this file creation in-between them. if you could help once more, I’d be very thankful!

1 Like
7

Hi,

For that, you just need to check the state after you press enter and goes to the next state.

Something like this:

void keyPressed() {

  if ( key == RETURN || key == ENTER)
  {
    if (state == 2) {
     println(cp5.get(Textfield.class, "digite seu nome").getText()); // Save the entry of the user here
    }

    state=(state+1)%(MAXSTATE+1);
    println(state);
  }
}
2 Likes