# Creating a button and makin it work!

**URL:** <https://discourse.processing.org/t/creating-a-button-and-makin-it-work/25840>\
**Category:** Libraries\
**Created:** [November 30, 2020, 7:57pm UTC](https://discourse.processing.org/t/creating-a-button-and-makin-it-work/25840 "2020-11-30T19:57:19Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![denis](https://avatars.discourse-cdn.com/v4/letter/d/5e9695/32.png) [@denis](https://discourse.processing.org/u/denis)\
**Post date:** [November 30, 2020, 7:57pm UTC](https://discourse.processing.org/t/creating-a-button-and-makin-it-work/25840/1 "2020-11-30T19:57:19Z")

</div>

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:

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

```auto
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!

---

<div class="post-metadata">

**Author:** ![MiguelSanches](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/miguelsanches/32/11172_2.png) [@MiguelSanches](https://discourse.processing.org/u/MiguelSanches)\
**Post date:** [December 2, 2020, 8:53am UTC](https://discourse.processing.org/t/creating-a-button-and-makin-it-work/25840/2 "2020-12-02T08:53:42Z")

</div>

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 🙂

```auto
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!

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [December 2, 2020, 7:34pm UTC](https://discourse.processing.org/t/creating-a-button-and-makin-it-work/25840/3 "2020-12-02T19:34:23Z")

</div>

> [@denis](#):
>
> I want it to function as a start button and click on it to start the code I already create

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 :

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

}

```

---

<div class="post-metadata">

**Author:** ![denis](https://avatars.discourse-cdn.com/v4/letter/d/5e9695/32.png) [@denis](https://discourse.processing.org/u/denis)\
**Post date:** [December 3, 2020, 2:54pm UTC](https://discourse.processing.org/t/creating-a-button-and-makin-it-work/25840/4 "2020-12-03T14:54:42Z")

</div>

> [@MiguelSanches](#):
>
> ```auto
> 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);
> ;
> 
> ```

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

---

<div class="post-metadata">

**Author:** ![denis](https://avatars.discourse-cdn.com/v4/letter/d/5e9695/32.png) [@denis](https://discourse.processing.org/u/denis)\
**Post date:** [December 3, 2020, 2:55pm UTC](https://discourse.processing.org/t/creating-a-button-and-makin-it-work/25840/5 "2020-12-03T14:55:43Z")

</div>

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