ControlP5 Question

philspitler

Hi, I am trying to get my head around creating a very simple UI with 10 buttons that will each play a different video.

I modified some demo code but for some reason, the video always plays regardless of if I click the button.

Any idea?

Thanks.

Phil

/**
 * ControlP5 Button
 * this example shows how to create buttons with controlP5.
 * 
 * find a list of public methods available for the Button Controller 
 * at the bottom of this sketch's source code
 *
 * by Andreas Schlegel, 2012
 * www.sojamo.de/libraries/controlp5
 *
 */

import controlP5.*;
import processing.video.*;
Movie myMovie2;

ControlP5 cp5;

int whichMovie=0;


void setup() {


    myMovie2 = new Movie(this, "/Users/philspitler/Dropbox/Current Projects/PixelPusher/videos/bluestreaks.mov");
    myMovie2.loop();


  size(400,600);

  cp5 = new ControlP5(this);

  // create a new button
  cp5.addButton("colorA")
     .setValue(0)
     .setPosition(100,100)
     .setSize(200,19)
     ;



}

void draw() {


  if (whichMovie == 1){
    println ("playmovie");
   image(myMovie2, 0, 0, width, height);

  }

}

public void controlEvent(ControlEvent theEvent) {

}


public void colorA(int theValue) {
  println("button clicked");
  whichMovie = 1;

}



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

sojamo

Hi Phil, by using setValue(0) when adding Button colorA, function colorA() is called and whichMovie is set to 1. you can prevent this from happening a) not to setValue(0) when adding button colorA or by setting whichMovie to 0 after controlP5 setup is complete, see example below:

import controlP5.*;

ControlP5 cp5;

int whichMovie=0;

void setup() { 
  size(400,600);

  cp5 = new ControlP5(this);

  // create a new button
  cp5.addButton("colorA")
     //.setValue(0) // setValue will call colorA here since there is a change in value
     .setPosition(100,100)
     .setSize(200,19)
     ;
 println("whichMovie value: ",whichMovie);
 // whichMovie=0; //reset whichMovie to 0 after controlP5 setup is completed
}

void draw() { 
}

public void colorA(int theValue) {
  println("button clicked");
  whichMovie = 1;
}

philspitler

Both these solutions work great, thanks Sojamo.

Phil

philspitler

Actually, now I have a 2nd question which is related.

I want to have 20 movies listed and when a choice is made, the current video stops and the new video starts.

I have that working for 2 videos by using stop and start but it would soon get messy if I have to stop every video regardless if it is playing or not.

Is there a better way to execute this?

Here my code which works great for 2 movies.

/**
 * ControlP5 Button
 * this example shows how to create buttons with controlP5.
 * 
 * find a list of public methods available for the Button Controller 
 * at the bottom of this sketch's source code
 *
 * by Andreas Schlegel, 2012
 * www.sojamo.de/libraries/controlp5
 *
 */

import controlP5.*;
import processing.video.*;
Movie myMovie2;
Movie myMovie1;

ControlP5 cp5;

int whichMovie=0;


void setup() {

    myMovie1 = new Movie(this, "/Users/philspitler/Dropbox/Current Projects/PixelPusher/videos/fire.mov");
    myMovie1.loop();

    myMovie2 = new Movie(this, "/Users/philspitler/Dropbox/Current Projects/PixelPusher/videos/bluestreaks.mov");
    myMovie2.loop();


  size(400,600);

  cp5 = new ControlP5(this);

  // create a new button=
  cp5.addButton("movie1")
     .setValue(0)
     .setPosition(100,100)
     .setSize(200,19)
     ;

      // create a new button=
  cp5.addButton("movie2")
     .setValue(0)
     .setPosition(100,150)
     .setSize(200,19)
     ;

  whichMovie=0;


}

void draw() {


  if (whichMovie == 1){
      myMovie2.stop();
      myMovie1.play();
     image(myMovie1, 0, 0, width, height);

  }

  if (whichMovie == 2){
      myMovie1.stop();
      myMovie2.play();

   image(myMovie2, 0, 0, width, height);

  }

}

public void controlEvent(ControlEvent theEvent) {

}


public void movie1(int theValue) {
  println("a");
  whichMovie = 1;

}

public void movie2(int theValue) {
  println("b");
  whichMovie = 2;

}


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