// the following example shows how to display 
// a camera capture in a controlWindow 
// using a ControlWindowCanvas.

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

ControlP5 controlP5;
ControlWindow controlWindow;
ControlWindowCanvas cc;

// camera input from e.g. webcam
Capture cam; 
// an image usded to buffer the latest 
// image captured by 'cam'
PImage camImage;
int camWidth = 160; // width of the camera input
int camHeight = 120; // height of the camera input


// the controlWindowCanvas class which will display the 
// captured image from a camera input in a controlWindow.

class MyCanvas extends ControlWindowCanvas {
  public void draw(PApplet theApplet) {
    theApplet.translate(100,100);
    // read camera input and update the buffer image
    // camImage accordingly.
    if (cam.available() == true) {
      cam.read();
      camImage.copy(cam,0,0,camWidth,camHeight,
      0,0,camWidth,camHeight);
    }
    // display camImage
    theApplet.image(camImage,0,0);
  }
}


void setup() {
  // setup main window
  size(400,400);
  frameRate(30);

  // init camera capture
  cam = new Capture(this, 160, 120);
  camImage = createImage(camWidth,camHeight,RGB);

  // setup controlP5 and an extra controlWindow
  controlP5 = new ControlP5(this);
  controlWindow = controlP5.addControlWindow("controlP5window",
  100,100,400,400,15);
  controlWindow.setUpdateMode(ControlWindow.NORMAL);

  // create a control window canvas and add it to
  // the control window from above.  
  cc = new MyCanvas();
  cc.pre();
  // (use cc.post(); to draw on top of the controllers.)
  // add the canvas to the controlWindow
  controlWindow.addCanvas(cc);

}

void draw() {
  background(0);
}