title: Creating a new window for toggles Processing (ControlP5)
body: <p>This is my image generator which works with toggles. I would like to have the toggle buttons in a new window.  I tried using PApplet, but it doesn't seem to show anything. How to add an extra window just for the toggles?</p>
  
  
  
  <pre class="lang-java prettyprint-override"><code>import controlP5.*; 
  
  PFont myFont;
  
  boolean showBackground = false;
  boolean showObjects = false;
  boolean showGrids = false;
  boolean showType = false;
  
  ControlP5 cp5;
  
  PImage[] objects = new PImage[30];
  PImage[] grids = new PImage[29];
  PImage[] backgrounds = new PImage[30];
  PImage[] type = new PImage[30];
  
  int currentBackgrounds;
  int currentGrids;
  int currentObjects;
  int currentType;
  
  
  void setup() {
    size(1436, 847);
  
    //load objects
    for (int i=0; i&lt;objects.length; i++) {
      objects[i] = loadImage  ( "o" + i + ".png");
    }
    //load grids
    for (int i = 0; i &lt; grids.length; i++) {
      grids[i] = loadImage  ( "g" + i + ".png");
    }
    //load backgrounds
    for (int i = 0; i &lt; backgrounds.length; i++) {
      backgrounds[i] = loadImage( "b" + i + ".jpg");
    }
    //load type
    for (int i = 0; i &lt; type.length; i++) {
      type[i] = loadImage  ("t" + i + ".png");
    }
    //setup UI
  String[] args = {"TwoFrameTest"};
  SecondApplet sa = new SecondApplet();
  PApplet.runSketch(args, sa);
  
  }
  public class SecondApplet extends PApplet {
  
  public void settings() {
      size(200, 100);
    }
    // create a toggle and change the default look to a switch look
    public void draw() {
    cp5 = new ControlP5(this);
  
    PFont font = createFont("EurostileLTStd-BoldEx2.otf", 10);
  
  
    cp5.addToggle("showBackground")
      .setColorForeground(color(255, 255, 255)) 
      .setColorBackground(color(255, 255, 255))
      .setColorActive(color(255, 0, 0))
      .setPosition(40, 250)
      .setFont(font)
      .setSize(20, 20)
      .setValue(false)
      .setMode(ControlP5.SWITCH);
  
    cp5.addToggle("showObjects")
      .setPosition(40, 400)
      .setFont(font)
      .setSize(50, 20)
      .setValue(false)
      .setMode(ControlP5.SWITCH);
  
    cp5.addToggle("showGrids")
      .setPosition(40, 600)
      .setFont(font)
      .setSize(50, 20)
      .setValue(false)
      .setMode(ControlP5.SWITCH);
  
    cp5.addToggle("showType")
      .setPosition(40, 800)
      .setFont(font)
      .setSize(50, 20)
      .setValue(false)
      .setMode(ControlP5.SWITCH);
    }
  }
  
  void mousePressed() {
    //next img 
    currentObjects = currentObjects + int(random(10));
    currentGrids = currentGrids + int(random(10));
    currentType = currentType + int(random(10));
    currentBackgrounds = currentBackgrounds + int(random(10));
  
    if (currentObjects &gt;= objects.length) {
      currentObjects = 0;
    }
    if (currentGrids &gt;= grids.length) {
      currentGrids = 0;
    }
    if (currentType &gt;= type.length) {
      currentType = 0;
    }
    if (currentBackgrounds &gt;= backgrounds.length) {
      currentBackgrounds = 0;
  
    }
  }
  
  void draw() {
    //clear frame
    background(211);//
  
    if (showBackground==true) {
      image(backgrounds[currentBackgrounds], 0, 0, 1436, 847); // b
    } 
    if (showGrids==true) {
      image(grids[currentGrids], 0, 0, 1436, 847); // g
    } 
    if (showObjects==true) {
      image(objects[currentObjects], 0, 0, 1436, 847); // o
    }
    if (showType==true) {
      image(type[currentType], 0, 0, 1436, 847); // o
    }
  }
  </code></pre>