When creating a new frame with ControlP5 in wich draw i've to put mainframe shapes?

sherkhan

Hi everybody, i'm using ControlP5 lib in particular i apply my script to the ControlP5frame example. Everything is running but shapes appear in the wrong frame. I want my PShapes in the mainframe! i tried in an emphirical way but i get only mess...can someone help me?

Here you are the script

import java.awt.Frame;
import java.awt.BorderLayout;
import controlP5.*;

private ControlP5 cp5;

Accordion accordion;

ControlFrame cf;



PShape A;
PShape B;

int def;



void setup() {
  size(400, 600);
  A = loadShape("Rprocessing.svg");
  B = loadShape("Yprocessing.svg");
  noStroke();
  smooth();
  cp5 = new ControlP5(this);

  cf = addControlFrame("extra", 200,700);

   colorMode(HSB, 360, 100, 100);



}




void draw() {

  background(def);

}

//ControlP5 lib portion about new frame

ControlFrame addControlFrame(String theName, int theWidth, int theHeight) {
  Frame f = new Frame(theName);
  ControlFrame p = new ControlFrame(this, theWidth, theHeight);
  f.add(p);
  p.init();
  f.setTitle(theName);
  f.setSize(p.w, p.h);
  f.setLocation(100, 100);
  f.setResizable(false);
  f.setVisible(true);
  return p;
}


public class ControlFrame extends PApplet {

  int w, h;

  int abc = 100;

  public void setup() {
    size(w, h);
    frameRate(25);
    cp5 = new ControlP5(this);

//creating groups for the ControlP5 accordin

  //group1
  Group g1 = cp5.addGroup("colore")
                .setBackgroundColor(color(0, 64))
                .setBackgroundHeight(100)
                ;

  cp5.addSlider("HueA")
     .setPosition(10,20)
     .setSize(100,20)
     .setRange(0,360)
     .setValue(100)
     .moveTo(g1)
     ;

  cp5.addSlider("HueB")
     .setPosition(10,50)
     .setSize(100,20)
     .setRange(0,360)
     .setValue(200)
     .moveTo(g1)
     ;



  // group number 2
  Group g2 = cp5.addGroup("tono")
                .setBackgroundColor(color(0, 64))
                .setBackgroundHeight(150)
                ;

  cp5.addSlider("tonoA")
     .setPosition(10,20)
     .setSize(100,20)
     .setRange(0,100)
     .setValue(100)
     .moveTo(g2)
     ;

  cp5.addSlider("tonoB")
     .setPosition(10,80)
     .setSize(100,20)
     .setRange(0,100)
     .setValue(100)
     .moveTo(g2)
     ;

   cp5.addSlider("saturazioneA")
     .setPosition(10,50)
     .setSize(100,20)
     .setRange(0,100)
     .setValue(100)
     .moveTo(g2)
     ;

  cp5.addSlider("saturazioneB")
     .setPosition(10,110)
     .setSize(100,20)
     .setRange(0,100)
     .setValue(100)
     .moveTo(g2)
     ;

  // group number 3
  Group g3 = cp5.addGroup("dimensione")
                .setBackgroundColor(color(0, 64))
                .setBackgroundHeight(100)
                ;


  cp5.addSlider("dimensioneA")
     .setPosition(10,20)
     .setSize(100,20)
     .setRange(100,300)
     .setValue(100)
     .moveTo(g3)
     ;

  cp5.addSlider("dimensioneB")
     .setPosition(10,50)
     .setSize(100,20)
     .setRange(100,300)
     .setValue(100)
     .moveTo(g3)
     ;

  // group number 4
  Group g4 = cp5.addGroup("posizione")
                .setBackgroundColor(color(0, 64))
                .setBackgroundHeight(150)
                ;


  cp5.addSlider("posizioAx")
     .setPosition(10,20)
     .setSize(100,20)
     .setRange(0,400)
     .setValue(200)
     .moveTo(g4)
     ;

  cp5.addSlider("posizioAy")
     .setPosition(10,50)
     .setSize(100,20)
     .setRange(0,400)
     .setValue(200)
     .moveTo(g4)
     ;

  cp5.addSlider("posizioBx")
     .setPosition(10,80)
     .setSize(100,20)
     .setRange(0,600)
     .setValue(100)
     .moveTo(g4)
     ;

  cp5.addSlider("posizioBy")
     .setPosition(10,110)
     .setSize(100,20)
     .setRange(0,600)
     .setValue(100)
     .moveTo(g4)
     ;


  // group number 5
  Group g5 = cp5.addGroup("distanza fruitore cm")
                .setBackgroundColor(color(0, 64))
                .setBackgroundHeight(50)
                ;


  cp5.addSlider("distanza cm")
     .setPosition(10,20)
     .setSize(100,20)
     .setRange(0,1000)
     .setValue(200)
     .moveTo(g5)
     ;

  // create a new accordion
  // add g1, g2, and g3 to the accordion.
  accordion = cp5.addAccordion("acc")
                 .setPosition(0,0)
                 .setWidth(200)
                 .addItem(g1)
                 .addItem(g2)
                 .addItem(g3)
                 .addItem(g4)
                 .addItem(g5)
                 ;

  cp5.mapKeyFor(new ControlKey() {public void keyEvent() {accordion.open(0,1,2);}}, 'o');
  cp5.mapKeyFor(new ControlKey() {public void keyEvent() {accordion.close(0,1,2);}}, 'c');
  cp5.mapKeyFor(new ControlKey() {public void keyEvent() {accordion.setWidth(300);}}, '1');
  cp5.mapKeyFor(new ControlKey() {public void keyEvent() {accordion.setPosition(0,0);accordion.setItemHeight(190);}}, '2'); 
  cp5.mapKeyFor(new ControlKey() {public void keyEvent() {accordion.setCollapseMode(ControlP5.ALL);}}, '3');
  cp5.mapKeyFor(new ControlKey() {public void keyEvent() {accordion.setCollapseMode(ControlP5.SINGLE);}}, '4');
  cp5.mapKeyFor(new ControlKey() {public void keyEvent() {cp5.remove("myGroup1");}}, '0');

  accordion.open(0,1,2);

  accordion.setCollapseMode(Accordion.MULTI);

  }

  public void draw() {
      background(abc);

  A.disableStyle();     

  int hueA = (int) cp5.getController("HueA").getValue();
  int satA = (int) cp5.getController("saturazioneA").getValue();  
  int tonA = (int) cp5.getController("tonoA").getValue();
  int d1 = (int) cp5.getController("dimensioneA").getValue();
  int posAx = (int) cp5.getController("posizioAx").getValue();
  int posAy = (int) cp5.getController("posizioAy").getValue();

  shape(A, posAx, posAy, d1, d1);
  fill(hueA, satA, 100-tonA);



  B.disableStyle();

  int hueB = (int) cp5.getController("HueB").getValue();
  int satB = (int) cp5.getController("saturazioneB").getValue();
  int tonB = (int) cp5.getController("tonoB").getValue();
  int d2 = (int) cp5.getController("dimensioneB").getValue();
  int posBx = (int) cp5.getController("posizioBx").getValue();
  int posBy = (int) cp5.getController("posizioBy").getValue();

  shape(B, posBx, posBy, d2, d2);
  fill(hueB, satB,100- tonB);




  //a keypressed collegated to a slidervalue
  int dist = (int) cp5.getController("distanza cm").getValue();
  if (keyPressed) {
    if (key == 'b' || key == 'B') {
      ellipse(mouseX, mouseY, dist, dist);
    }
   }

  }

  private ControlFrame() {
  }

  public ControlFrame(Object theParent, int theWidth, int theHeight) {
    parent = theParent;
    w = theWidth;
    h = theHeight;
  }


  public ControlP5 control() {
    return cp5;
  }


  ControlP5 cp5;

  Object parent;


}

best, Filippo

sojamo

Hi, you need to move your render routines into the main draw function, currently they are located inside the draw function of the ControlFrame, hence your shapes appear inside the controlFrame. You also need to wait for the ControlFrame to finish the initialization inside it's setup function - I have added a boolean called available that can be checked and will be true after the initialization is complete, see example below, I have added comments (start with // + ) where necessary, you need to include the code that creates the controllers which I took out to shorted the code. Since I do not have access to your svg files, I used a rect instead, this you need to change back as well.

import java.awt.Frame;
import controlP5.*;


Accordion accordion;
ControlFrame cf;

PShape A;
PShape B;

void setup() {
  size(400, 600);
  //A = loadShape("Rprocessing.svg");
  //B = loadShape("Yprocessing.svg");
  noStroke();
  smooth();

  cf = addControlFrame("extra", 200, 700);

  colorMode(HSB, 360, 100, 100);
}




void draw() {

  background(0);

  // + moved render routines from the ControlFrame to the main sketch

  //A.disableStyle();     
  if (cf.available) { 
    // since the ControlFrame has to initialize first,
    // we use a boolean (available) inside the ControlFrame
    // to check if the setup has been completed. if cf.available
   // is true, we can access the controllers from the ControlFrame
    int hueA = (int) cf.control().getController("HueA").getValue();
    int satA = (int) cf.control().getController("saturazioneA").getValue();  
    int tonA = (int) cf.control().getController("tonoA").getValue();
    int d1 = (int) cf.control().getController("dimensioneA").getValue();
    int posAx = (int) cf.control().getController("posizioAx").getValue();
    int posAy = (int) cf.control().getController("posizioAy").getValue();

    //shape(A, posAx, posAy, d1, d1);
    fill(hueA, satA, 100-tonA);
    rect(posAx, posAy, d1, d1);


    //B.disableStyle();

    int hueB = (int) cf.control().getController("HueB").getValue();
    int satB = (int) cf.control().getController("saturazioneB").getValue();
    int tonB = (int) cf.control().getController("tonoB").getValue();
    int d2 = (int) cf.control().getController("dimensioneB").getValue();
    int posBx = (int) cf.control().getController("posizioBx").getValue();
    int posBy = (int) cf.control().getController("posizioBy").getValue();

    //shape(B, posBx, posBy, d2, d2);
    fill(hueB, satB, 100- tonB);
    rect(posBx, posBy, d2, d2);




    //a keypressed collegated to a slidervalue
    int dist = (int) cf.control().getController("distanza cm").getValue();
    if (keyPressed) {
      if (key == 'b' || key == 'B') {
        ellipse(mouseX, mouseY, dist, dist);
      }
    }
  }
}

ControlFrame addControlFrame(String theName, int theWidth, int theHeight) {
  Frame f = new Frame(theName);
  ControlFrame p = new ControlFrame(this, theWidth, theHeight);
  f.add(p);
  p.init();
  f.setTitle(theName);
  f.setSize(p.w, p.h);
  f.setLocation(100, 100);
  f.setResizable(false);
  f.setVisible(true);
  return p;
}


public class ControlFrame extends PApplet {

  int w, h;

  public void setup() {
    size(w, h);
    frameRate(25);
    cp5 = new ControlP5(this); 


    // + create your controllers here 


    // + add this
    available = true;
  }

  public void draw() {
    background(0);
  }

  private ControlFrame() {
  }

  public ControlFrame(Object theParent, int theWidth, int theHeight) {
    parent = theParent;
    w = theWidth;
    h = theHeight;
  }


  public ControlP5 control() {
    return cp5;
  }

  ControlP5 cp5;
  Object parent;

  // + add this
  boolean available = false;
}

sherkhan

Wow! thank you so much! beautiful! ^:)^

sherkhan

Hey! i don't want to be too sick but what about using mouse control for placing shapes in this script? I've tried using this example http://processing.org/examples/mousefunctions.html but using two shapes makes the shapes to appear one on the other and so not mousemoveable...any suggestion? i've opened a discussion on my mousemoveable script but no one give me an answer that i understand....

thanks, Filippo

sherkhan

sorry probably i did a mess with english translation 'i don't want to be too sick' stay for i don't want to annoy you!

sojamo

I have posted an answer in your other thread.

sherkhan

Hey...now why it's saving a totally different pdf?

@-)

import java.awt.Frame;
import controlP5.*;
import processing.pdf.*;

boolean record;


Accordion accordion;
ControlFrame cf;

PShape A;
PShape B;

void setup() {
  size(400, 600);
  A = loadShape("Rprocessing.svg");
  B = loadShape("Yprocessing.svg");
  noStroke();
  smooth();

  cf = addControlFrame("extra", 200, 700);

  colorMode(HSB, 360, 100, 100);
}




void draw() {

  if (record) {
    beginRecord(PDF, "frame-####.pdf");
  }


  background(0,0,100);

  // + moved render routines from the ControlFrame to the main sketch

  A.disableStyle();     
  if (cf.available) { 
    // since the ControlFrame has to initialize first,
    // we use a boolean (available) inside the ControlFrame
    // to check if the setup has been completed. if cf.available
   // is true, we can access the controllers from the ControlFrame
    int hueA = (int) cf.control().getController("HueA").getValue();
    int satA = (int) cf.control().getController("saturazioneA").getValue();  
    int tonA = (int) cf.control().getController("tonoA").getValue();
    int d1 = (int) cf.control().getController("dimensioneA").getValue();
    int posAx = (int) cf.control().getController("posizioAx").getValue();
    int posAy = (int) cf.control().getController("posizioAy").getValue();

    shape(A, posAx, posAy, d1, d1);
    fill(hueA, satA, 100-tonA);
    //rect(posAx, posAy, d1, d1);


    B.disableStyle();

    int hueB = (int) cf.control().getController("HueB").getValue();
    int satB = (int) cf.control().getController("saturazioneB").getValue();
    int tonB = (int) cf.control().getController("tonoB").getValue();
    int d2 = (int) cf.control().getController("dimensioneB").getValue();
    int posBx = (int) cf.control().getController("posizioBx").getValue();
    int posBy = (int) cf.control().getController("posizioBy").getValue();

    shape(B, posBx, posBy, d2, d2);
    fill(hueB, satB, 100- tonB);
    //rect(posBx, posBy, d2, d2);

    if (record) {
      endRecord();
          record = false;
    }




    //a keypressed collegated to a slidervalue
    int dist = (int) cf.control().getController("distanza cm").getValue();
    if (keyPressed) {
      if (key == 'b' || key == 'B') {
        ellipse(mouseX, mouseY, dist, dist);
        }

        if(key == 's' || key == 'S') {
          record = true;
        }
    }
  }
}

ControlFrame addControlFrame(String theName, int theWidth, int theHeight) {
  Frame f = new Frame(theName);
  ControlFrame p = new ControlFrame(this, theWidth, theHeight);
  f.add(p);
  p.init();
  f.setTitle(theName);
  f.setSize(p.w, p.h);
  f.setLocation(100, 100);
  f.setResizable(false);
  f.setVisible(true);
  return p;
}


public class ControlFrame extends PApplet {

  int w, h;

  public void setup() {
    size(w, h);
    frameRate(25);
    cp5 = new ControlP5(this);
    Group g1 = cp5.addGroup("colore")
                .setBackgroundColor(color(0, 64))
                .setBackgroundHeight(100)
                ;

  cp5.addSlider("HueA")
     .setPosition(10,20)
     .setSize(100,20)
     .setRange(0,360)
     .setValue(100)
     .setNumberOfTickMarks(18)
     .moveTo(g1)
     ;

  cp5.addSlider("HueB")
     .setPosition(10,50)
     .setSize(100,20)
     .setRange(0,360)
     .setValue(200)
     .setNumberOfTickMarks(18)
     .moveTo(g1)
     ;



  // group number 2
  Group g2 = cp5.addGroup("tono")
                .setBackgroundColor(color(0, 64))
                .setBackgroundHeight(150)
                ;

  cp5.addSlider("tonoA")
     .setPosition(10,20)
     .setSize(100,20)
     .setRange(0,100)
     .setValue(100)
     .setNumberOfTickMarks(18)
     .moveTo(g2)
     ;

  cp5.addSlider("tonoB")
     .setPosition(10,80)
     .setSize(100,20)
     .setRange(0,100)
     .setValue(100)
     .setNumberOfTickMarks(18)
     .moveTo(g2)
     ;

   cp5.addSlider("saturazioneA")
     .setPosition(10,50)
     .setSize(100,20)
     .setRange(0,100)
     .setValue(100)
     .setNumberOfTickMarks(18)
     .moveTo(g2)
     ;

  cp5.addSlider("saturazioneB")
     .setPosition(10,110)
     .setSize(100,20)
     .setRange(0,100)
     .setValue(100)
     .setNumberOfTickMarks(18)
     .moveTo(g2)
     ;

  // group number 3
  Group g3 = cp5.addGroup("dimensione")
                .setBackgroundColor(color(0, 64))
                .setBackgroundHeight(100)
                ;


  cp5.addSlider("dimensioneA")
     .setPosition(10,20)
     .setSize(100,20)
     .setRange(100,300)
     .setValue(100)
     .setNumberOfTickMarks(18)
     .moveTo(g3)
     ;

  cp5.addSlider("dimensioneB")
     .setPosition(10,50)
     .setSize(100,20)
     .setRange(100,300)
     .setValue(100)
     .setNumberOfTickMarks(18)
     .moveTo(g3)
     ;

  // group number 4
  Group g4 = cp5.addGroup("posizione")
                .setBackgroundColor(color(0, 64))
                .setBackgroundHeight(150)
                ;


  cp5.addSlider("posizioAx")
     .setPosition(10,20)
     .setSize(100,20)
     .setRange(0,400)
     .setValue(200)
     .setNumberOfTickMarks(18)
     .moveTo(g4)
     ;

  cp5.addSlider("posizioAy")
     .setPosition(10,50)
     .setSize(100,20)
     .setRange(0,400)
     .setValue(200)
     .setNumberOfTickMarks(18)
     .moveTo(g4)
     ;

  cp5.addSlider("posizioBx")
     .setPosition(10,80)
     .setSize(100,20)
     .setRange(0,600)
     .setValue(100)
     .setNumberOfTickMarks(18)
     .moveTo(g4)
     ;

  cp5.addSlider("posizioBy")
     .setPosition(10,110)
     .setSize(100,20)
     .setRange(0,600)
     .setValue(100)
     .setNumberOfTickMarks(18)
     .moveTo(g4)
     ;


  // group number 5
  Group g5 = cp5.addGroup("distanza fruitore cm")
                .setBackgroundColor(color(0, 64))
                .setBackgroundHeight(50)
                ;


  cp5.addSlider("distanza cm")
     .setPosition(10,20)
     .setSize(100,20)
     .setRange(0,1000)
     .setValue(200)
     .setNumberOfTickMarks(18)
     .moveTo(g5)
     ;

  // create a new accordion
  // add g1, g2, and g3 to the accordion.
  accordion = cp5.addAccordion("acc")
                 .setPosition(0,0)
                 .setWidth(200)
                 .addItem(g1)
                 .addItem(g2)
                 .addItem(g3)
                 .addItem(g4)
                 .addItem(g5)
                 ;

  cp5.mapKeyFor(new ControlKey() {public void keyEvent() {accordion.open(0,1,2);}}, 'o');
  cp5.mapKeyFor(new ControlKey() {public void keyEvent() {accordion.close(0,1,2);}}, 'c');
  cp5.mapKeyFor(new ControlKey() {public void keyEvent() {accordion.setWidth(300);}}, '1');
  cp5.mapKeyFor(new ControlKey() {public void keyEvent() {accordion.setPosition(0,0);accordion.setItemHeight(190);}}, '2'); 
  cp5.mapKeyFor(new ControlKey() {public void keyEvent() {accordion.setCollapseMode(ControlP5.ALL);}}, '3');
  cp5.mapKeyFor(new ControlKey() {public void keyEvent() {accordion.setCollapseMode(ControlP5.SINGLE);}}, '4');
  cp5.mapKeyFor(new ControlKey() {public void keyEvent() {cp5.remove("myGroup1");}}, '0');

  accordion.open(0,1,2);

  accordion.setCollapseMode(Accordion.MULTI);




    // + create your controllers here 


    // + add this
    available = true;
  }

  public void draw() {
    background(0,0,100);
  }

  private ControlFrame() {
  }

  public ControlFrame(Object theParent, int theWidth, int theHeight) {
    parent = theParent;
    w = theWidth;
    h = theHeight;
  }


  public ControlP5 control() {
    return cp5;
  }

  ControlP5 cp5;
  Object parent;

  // + add this
  boolean available = false;

}