Video tracking for progress bar using movie and ControlP5

Izzy280

Hello, I have been coding a progress bar using some examples that I found. The bar is almost done but it doesn't constantly update. Can someone assist me in getting it to update while the video is playing? https://forum.processing.org/two/discussion/8103/using-a-controlp5-slider-as-video-progress-bar#latest `

//using processing video and movie
import processing.video.*;
import controlP5.*;
import java.awt.geom.*;
ControlP5 cp5;
Movie movie;

boolean play;
int speed = 1;
int progress;

   void setup() {
   size(1280, 360);
   cp5 = new ControlP5(this);
    background(0);
    // Load and play the video in a loop
    movie = new Movie(this, "video.mov");
   movie.play();
    movie.speed(speed);

 //Progress Bar
  ProgressBar p;
  p = new ProgressBar(cp5, "progress"); 
 p.setPosition(130, 345).setSize(350, 10).setRange(0,  (int) 
movie.duration()).listen(true);
//callback listener for Timeline object
 p.addCallback(new CallbackListener() {
  public void controlEvent(CallbackEvent theEvent) {
   if(theEvent.getAction() == ControlP5.ACTION_PRESS) {
    float x = theEvent.getController().getPointer().x();
    float a1 = 0;
    float a2 = theEvent.getController().getWidth();
    float b1 = theEvent.getController().getMin();
    float b2 = theEvent.getController().getMax();
    float val = map(x,a1,a2,b1,b2);
    theEvent.getController().setValue(val);
    println("now change movie time to ", val, movie.time());
   movie.jump((float) val);
      }
    }
  }
  );
 // a toggle to switch between play and pause mode
 cp5.addToggle("play")
.setPosition(10,375)
.setSize(50,19)
.getCaptionLabel().align(CENTER,CENTER);
 }
  void movieEvent(Movie m) {
  m.read();
 }
 void draw() {
   if (play) {
   // update the progressBar value/position
   // replace with audio-track position: progress = player.position();

 image(movie, width/2, 0, width/2, height);

   if (movie.available()) movie.read();
   progress = (int) movie.time();
 }
  }
      class ProgressBar extends Controller<ProgressBar> {
      public ProgressBar(ControlP5 theControlP5, String theName) {
      super(theControlP5, theName);
      setView(new ControllerView<ProgressBar>() {

   public void display(PGraphics pg, ProgressBar c) {
     pg.fill(!isMouseOver() ? c.getColor().getForeground():c.getColor().getActive());
    pg.rect(0, 0, c.getWidth(), c.getHeight());

    float val = map(c.getValue(),c.getMin(), c.getMax(), 0, c.getWidth()); 
    pg.fill(255);
    pg.rect(0, 0, val, c.getHeight());
  }
}
);
}

     public ProgressBar setValue(float theValue) {
     return super.setValue(constrain(theValue, getMin(), getMax()));
 }

  public ProgressBar setRange(int theStart, int theEnd) {
  _myMin = theStart;
  _myMax = theEnd;
  return this;
  }
}

`

kfrajer

Your code is not complete. Please make sure the code runs. If it doesn't, please explain any errors that you are getting.

Kf

Izzy280

The code runs and when clicking on the progress bar, the video and the bar changes accordingly. The video doesn't constantly update. Could you point me towards the code that I am missing?

kfrajer

Line 48, your definition of movie, cp5, imports? I have the following below running.

Kf

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



    ControlP5 cp5;
    Movie movie1;

    static String nomeLink; //Public variable

    void settings() {
      size(800, 600);
    }


    void setup() {

      //Create objects ControlP5
      cp5 = new ControlP5(this);

      cp5.addButton("btn01")
        .setPosition(50, (height/2)-100)
        .setImages(loadImage("Img01.png"), loadImage("Img01.png"), loadImage("Img01.png"))
        .setStringValue(dataPath("transit.mov"))
        .updateSize(); 

      cp5.addButton("btn02")
        .setPosition(200, (height/2)-100)
        .setImages(loadImage("Img02.png"), loadImage("Img02.png"), loadImage("Img02.png"))
        .setStringValue(dataPath("transit.mov")) //change Link
        .updateSize();

      cp5.addButton("btn03")
        .setPosition(350, (height/2)-100)
        .setImages(loadImage("Img03.png"), loadImage("Img03.png"), loadImage("Img03.png"))
        .setStringValue(dataPath("transit.mov")) //change Link
        .updateSize();

        printArray(args);
    }

    void draw() {
      background(255);
    }

    //Execute program Player
    void controlEvent(ControlEvent theControlEvent) {
      nomeLink = theControlEvent.controller().getStringValue(); 
      println("LInk: " + nomeLink);

      String[] args = {"PlayVideo", 
        dataPath(""), 
        "--display=1", 
        "--location=0,0", 
        "--sketch-path=" + sketchPath(""), 
        "" };
      PApplet playVideo = new PlayVideo();
      runSketch(args, playVideo);
    }

---

public class PlayVideo extends PApplet {

  ControlP5 cp5_Video;
  String path = "";

  Slider s1; 
  Toggle t1;
  Bang b1;

  int slider, w, h;

  public void settings() {
    size(600, 400, JAVA2D);
  }

  public void setup() {
    cp5_Video = new ControlP5(this);
    movie1    = new Movie(this, nomeLink); //Change path your video here
    movie1.play();

    w = width;
    h = height;
    //size(displayWidth, displayHeight, JAVA2D); //Redimensiona Tela


    printArray(args);
    path=args[0];   //This is needed as this new sketch's data path points to the main Processing foder and not the data folder.

    criaObjetos();
  }

  public void draw() {
    background(255);

    if (movie1.available()) movie1.read();
    image(movie1, 10, 10, w, h);

    slider = (int) movie1.time();
  }

  public void keyPressed() {
    //Se tecla ESC pressionado, fecha tela, retornando ao Menu Inicial.
    if (key == ESC ) {
      key = 0;
      this.stop();
      this.dispose();
      frame.hide();
      frame = null;
    }
  }

  void criaObjetos() {
    //Slider   
    s1 = cp5_Video.addSlider("slider")
      .setPosition(80, h-12)
      .setSize(w-75, 15)
      .setLabel("")
      .setValueLabel("")
      .setRange(0, (int) movie1.duration())
      .setValue(0)
      .setBroadcast(false)
      .listen(true);

    s1.addCallback(new controlP5.CallbackListener() { //Callback for Slider
      public void controlEvent(controlP5.CallbackEvent theEvent) { 
        if (theEvent.getAction() == ControlP5.ACTION_PRESS) {
          //println(s1.getMin(), s1.getMax(), s1.getValue(), theEvent.getController().getPointer());

          //Calculate the movie-position based on the mouse position
          float x   = theEvent.getController().getPointer().x();
          float a1  = 0;
          float a2  = s1.getWidth();
          float b1  = s1.getMin();
          float b2  = s1.getMax();
          float val = map(x, a1, a2, b1, b2);
          movie1.jump((float) val);
        }
      }
    }
    );

    cp5_Video.addButton("btnPlay")
      .setPosition(10, h-22)
      .setSize(50, 19)
      .setId(2)
      .setImages(loadImage(path+("\\Img01.png")), loadImage(path+("\\play.png")), loadImage(path+("\\play.png"))) //need picture at data
      .updateSize();

    cp5_Video.addButton("btnPause")
      .setPosition(50, h-22)
      .setSize(50, 19)
      .setId(2)
      .setImages(loadImage(path+("\\Img02.png")), loadImage(path+("\\pause.png")), loadImage(path+("\\pause.png"))) //need picture at data
      .updateSize();

    cp5_Video.addButton("btnFim")
      .setPosition(90, h-22)
      .setSize(50, 19)
      .setImages(loadImage(path+("\\Img03.png")), loadImage(path+("\\fim.png")), loadImage(path+("\\fim.png"))) //need picture at data
      .updateSize();
  }

  void btnPlay() {
    cp5_Video.getController("btnPause").setPosition(50, h-20);
    cp5_Video.getController("btnPlay").setPosition(10, h-20); 
    movie1.play();
  }

  void btnPause() {
    cp5_Video.getController("btnPlay").setPosition(10, h-20); 
    cp5_Video.getController("btnPause").setPosition(50, h-20); 
    movie1.pause();
  }

  void btnFim() {
    movie1.jump((float) movie1.duration());
    movie1.stop();
  }
}

Izzy280

Sorry I'm not quite following. I am not sure if you meant my line 48 or one of yours. Could you give me a more detailed explanation of the problem and solution?

jeremydouglass

re: kfrajer's

Line 48, your definition of movie, cp5, imports? I have the following below running.

@Izzy280 -- on your line 48:

progress = (int) movie.time();

You use movie -- however the code that you pasted to the forum is incomplete; if someone cut-and-pastes it out of the forum it does not run (try it!). It does not run because you did not include definitions for movie, or cp5. You did not import the libraries (in what you shared on the forum). You also may not have included your definitions of some global variables. So nobody can test your code; it doesn't work. In order for people to help you, please correct your code to include whatever imports you are using that make it run -- kfrajer has posted an example that works for him after trying to guess what was missing for yours (and maybe making other changes, I haven't checked).

Izzy280

Thank you very much! I edited the code accordingly. Please let me know if there are more issues when trying to run.

kfrajer

Ok, so you have to implement these two changes in your code:

Change #1

boolean play=true;

Change #2

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

    //if (movie.available()) movie.read();

(YES, you need to adjust the image() parameters and you need to remove the conditional as it is being handle by your movieEvent() function.

Your code above works: clicking on the progress bar adjusts the position of the movie.

Kf

Izzy280

Thank you so much! The code works perfectly!