Creating a button and makin it work!

Processing Libraries
1

Hi everyone, I created a button with lp5 control but I can’t get it to work. I want it to function as a start button and click on it to start the code I already create. Thank you!

This is what i have in the botton code:

import processing.video.*;
import controlP5.*;

Movie video;
ControlP5 cp5;

void setup() {

  size(600,400);
  video = new Movie(this, "video1.mov");
  video.loop();
    cp5 = new ControlP5(this);
    cp5.addButton("boton1")
     .setPosition(220,200)
     .setImage(loadImage("boton1.png"));
     //.updateSize();
}

void movieEvent(Movie video) {
  video.read();
}

void draw() {
  image(video,0,0);

  
 
}

public void controlEvent(ControlEvent theEvent) {
  println(theEvent.getController().getName());
  
}

// function buttonA will receive changes from 
// controller with name buttonA
public void buttonA(int theValue) {
  println("a button event from button1: "+theValue);
}

and this is the beginning of my other code

JSONArray values;
int imgCount = 189;
int imgCount2 = 189;
int imgActual2;
PImage [] imgs = new PImage [imgCount]; 
PImage [] img01 = new PImage [imgCount2];
int imgActual;
PImage bg;
PImage fondo;
PImage user;
PImage cuadro; 
PImage edrtext;
PFont font1; 
PFont font2;


void setup () {
  size(1404,872);
  frameRate(60);
  fondo = loadImage("fondoedr1.png");
 bg = loadImage("plantilla00.png"); // plantilla cuadrado refe + user
 user = loadImage("plantilla2.png");
 cuadro = loadImage("cuadro1png.png"); 
 edrtext = loadImage("textoedr.png");
  image(fondo,0,0,1404,872); 
font1 = loadFont("Helvetica-12.vlw");
font2 = loadFont ("Helvetica-BoldOblique-24.vlw");
values = loadJSONArray("dataedr1.json");
 image(cuadro, 565,230,310,310);

    
for (int i = 1; i < imgCount; i++) {
  imgs[i] = requestImage("img"+nf(i,1)+".jpg");
}
for (int i = 1; i < imgCount2; i++) {
 img01[i] = requestImage("data"+nf(i,1)+".png");
 fill(0);

}
 
  for (int j = 0; j < values.size(); j++) {
    
    JSONObject ig = values.getJSONObject(j); 

    int id = ig.getInt("id");
    String name = ig.getString("name");
    
    
    println(id + ", " + name);
    
}
  }
  



void draw() {
   if(pmouseX != mouseX) {
    
    if(imgActual < imgCount-1){
      imgActual++;
      
      image(imgs[imgActual], mouseX, mouseY, 65,65); 
      image(imgs[imgActual], 600,260,250,250); 

    
      
    }else{
      imgActual=0;
   
    }
    println (imgActual); 
 
  }

Thanks again!

2

Hi @denis

Have you looked into cp5 examples? They have a button example there: Examples -> ControlP5 -> controllers -> ControlP5Button

Anyway, I believe that the following code should help you get started :slight_smile:

import controlP5.*;

ControlP5 cp5;

int myColor = color(255);

int c1,c2;

float n,n1;

boolean start = false;

void setup() {
  size(400,600);
  noStroke();
  cp5 = new ControlP5(this);

  cp5.addButton("play")
     .setPosition(width/2-25,height/2)
     .setSize(50,50);
     ;
}

void draw() {
  background(240);
  if(start){
    fill(0, 255, 0);
    textAlign(CENTER,CENTER);
    textSize(24);
    text("Start video", width/2, height/2 - 80);
    
  }
  else{
    fill(255, 0, 0);
    textAlign(CENTER,CENTER);
    textSize(24);
    text("Stop video", width/2, height/2 - 80);
  }
}

public void controlEvent(ControlEvent theEvent) {
  println(theEvent.getController().getName());
  if(theEvent.getController().getName().equals("play")) start = !start;
}

/*public void play() {
  start = !start; //negate the current state
}*/

Best regards!

2 Likes
3

you can make a boolean variable sketchStart which is initially false:

boolean sketchStart = false;

Now when you click the button say sketchStart = true;

In draw you want to evaluate sketchStart :

if(sketchStart) {
    // here what you have in draw() now 
} else {
 
   // do nothing, wait for the button to be pressed

}
2 Likes
4

Thanks a lot! I just try it and it works perfect, thanks for the help!

5

This is also great, and it work perfectly for my sketch! Thanks a lot!

1 Like