Lateral SubMenu

Santy

Hello my Friends, My application has to many buttons, It would be possible get a submenu for the lateral like as first code, with the content of the second code? for exemple... Thank very much. Santy

/**
 * ControlP5 controlFont. 
 * this example shows how to create a button with controlP5 (1), how to
 * load and use a PFont with controlP5 (2), apply a ControlFont to
 * the caption label of a button (3), and adjust the location of a
 * caption label using the style() property of a controller.
 * by andreas schlegel, 2012
 */
import controlP5.*;
ControlP5 cp5;
controlP5.Button b;
int buttonValue = 1;
boolean isOpen;
int myColorBackground = color(0,0,0);

void setup() {
  size(700,400);
  smooth();

  cp5 = new ControlP5(this);
  // (1)
  // create some controllers
  cp5.addButton("button")
     .setValue(10)
     .setPosition(20,20)
     .setSize(100,50)
     .setId(1);

  b = cp5.addButton("buttonValue")
         .setValue(4)
         .setPosition(100,190)
         .setSize(200,200)
         .setId(2);
  PFont pfont = createFont("Arial",20,true); // use true/false for smooth/no-smooth
  ControlFont font = new ControlFont(pfont,241);

  cp5.getController("button")
     .getCaptionLabel()
     .setFont(font)
     .toUpperCase(false)
     .setSize(24)
     ;

  b.getCaptionLabel()
   .setFont(font)
   .setSize(20)
   .toUpperCase(false)
   .setText("Controllers hear!")
   ;
  b.getCaptionLabel().getStyle().marginLeft = 1;
  b.getCaptionLabel().getStyle().marginTop = 20;
}

void draw() {
  background(ControlP5.SILVER);
  // animate button b
  float x = b.x(b.getPosition());
  x += ((isOpen==true ? 0:-200) - x) * 0.2;;
  float y = b.y(b.getPosition());
  b.setPosition(x,y);
}

public void controlEvent(ControlEvent theEvent) {
  println(theEvent.getController().getId());
}

public void button(float theValue) {
  println("a button event. "+theValue);
  isOpen = !isOpen;
  cp5.getController("button").setCaptionLabel((isOpen==true) ? "close":"open");
}


/**
* ControlP5 Mouseover
* this example demonstrates the use of the mouseover methods 
* isMouseOver(), getMouseOverList()
* by Andreas Schlegel, 2012
* www.sojamo.de/libraries/controlp5
*/
import controlP5.*;

ControlP5 cp5;

public int Punt = 5;
public int Text = 12;
int p,t;
void setup() {
  size(520, 250);
  smooth();
  cp5 = new ControlP5(this);
  cp5.addSlider("Punt", 5, 14, 20, 100, 128, 20);
  cp5.addSlider("Text", 12, 24, 20, 150, 128, 20);
  cp5.addButton("Guardar_Save", 0, 420, 200, 80, 20);
}

color hover = color(0, 230, 150);
void draw() {
  background(ControlP5.PURPLE);
  textSize(16);fill(0);text("CONTROL DE TAMAÑO / SIZE CONTROL",20,20);
  if(cp5.isMouseOver()) {fill(hover);
  } else {fill(128);}
  text("Deslize el Slider para cambiar el tamaño",25,70);
  text("Slide the Slider to resize",25,85);

  fill(255);
  ellipse(230,110,Punt,Punt);

  fill(cp5.isMouseOver(cp5.getController("slider2")) ? hover:color(Text));
  textSize(Text);fill(255);text("Su nuevo tamaño/new size",200,150,350,100);
}

void Guardar_Save() {
  p = (int)((Slider)cp5.getController("Punt")).getValue();
  t = (int)((Slider)cp5.getController("Text")).getValue();
  println(p+" "+t);
}

Chrisir

Please go back, edit your post

2 empty lines before and after the code

select / highlight entire code with mouse

click ctrl-o OR the small C in the command bar

Santy

Ok now is ready, excúseme please.

Chrisir

i can't help you

jeremydouglass

@Santy -- When you say:

with the content of the second code

...what do you mean? Can you explain in more detail what you are trying to do with ControlP5?

Chrisir

get a submenu for the lateral like as first code, with the content of the second code

But what do you mean?

You posted two sketches but they look as one

Santy

Hello jeremydouglass I'n not English but I will try to explain it again... So, put a button in the main window that when pressed open a lateral menú with buttons, textfieds , sliders etc... but not a new window, like as the first code; when you push the button OPEN a new side window appears, so I would like this new side window with the button and sliders of the sencond code. I've tried but I do not understand the operation of ControlP5. If you could help me I would thank you.

Santy

Yes Chrisir, what I'm interested in putting the second sketch inside the CaptionLabel of the first sketch...Do you understand?

Chrisir

I made a menu without the library

// the menu:  
// drop down version for mouse (and 
// keyboard (some not working)), each line returns an **int** as a result
// when clicked. 
// use mouse.
// (keyboard not working: space bar (instead of ALT), esc, cursor, return)

// -1 means "undefined" throughout the sketch. 

// the menus 
ClassOneDropDownMenu[] menuList = new ClassOneDropDownMenu[3];

// example of usage 
String textToDisplay = "Test for menus";

// -------------------------------------------------------------
// core functions 

void setup() {
  size(320, 420);
  defineMenus();
} // func 

void draw() {
  background(0, 128, 0);

  // show menus
  for (int i=0; i<menuList.length; i++) {
    menuList[i].display();
  }

  // example of usage  
  text(textToDisplay, 17, height-17);
} // func 

// ------------------------------------------------------------
// Inputs mouse

void mousePressed() {
  int menuResult = -1;  

  // handle the click
  for (int i=0; i<menuList.length; i++) {
    menuResult = menuList[i].clicked();
    if (menuResult!=-1) {
      evalMenu(menuResult);
      return;
    }
  }//for
} // func 

void mouseMoved() {
  for (int i=0; i<menuList.length; i++) {
    if (menuList[i].menuOpen) {
      menuList[i].selectedLineFromMouse();
    } // if
  } //for
} // func 

// ---------------------------------------------
// Inputs keyboard

void keyPressed() {
  // get key 
  if (key==CODED) { // ---
    keyPressedCODED();
  } // not coded 
  // ----
  else {
    keyPressedNOTCoded();
  } // else (coded)
  //
} // func 

void keyPressedCODED() {

  // keyPresses with CODED keys

  if (keyCode==UP) {
    for (int i=0; i<menuList.length; i++) { 
      if (menuList[i].menuOpen) 
        menuList[i].selectedLineUp();
    }
  } else if (keyCode==DOWN) {
    for (int i=0; i<menuList.length; i++) 
      if (menuList[i].menuSelected&&!menuList[i].menuOpen) {
        menuList[i].menuOpen=true;
      } else if (menuList[i].menuOpen) { 
        menuList[i].selectedLineDown();
      }
  } else if (keyCode==LEFT) {
    boolean wasSelected=false;
    boolean wasOpen=false;
    int newPos=-1;
    for (int i=0; i<menuList.length; i++) { 
      wasSelected=menuList[i].menuSelected;
      menuList[i].menuSelected=false;
      wasOpen=menuList[i].menuOpen;
      menuList[i].menuOpen=false;
      newPos = i-1;
      if (wasSelected||wasOpen) 
        break;
    }
    if (wasSelected||wasOpen) {
      if (newPos<0) 
        newPos=menuList.length-1;
      if (wasOpen)        
        menuList[newPos].menuOpen=true;
      if (wasSelected)
        menuList[newPos].menuSelected=true;
    }
  } else if (keyCode==RIGHT) {
    boolean wasSelected=false;
    boolean wasOpen=false;
    int newPos=-1;
    for (int i=0; i<menuList.length; i++) { 
      wasSelected=menuList[i].menuSelected;
      menuList[i].menuSelected=false;
      wasOpen=menuList[i].menuOpen;
      menuList[i].menuOpen=false;
      newPos = i+1;
      if (wasSelected||wasOpen) 
        break;
    }
    if (wasSelected||wasOpen) {
      if (newPos>menuList.length-1) 
        newPos=0;
      if (wasOpen)        
        menuList[newPos].menuOpen=true;
      if (wasSelected)
        menuList[newPos].menuSelected=true;
    }
  }
} //func 

void keyPressedNOTCoded() {
  if (key==ESC) {
    for (int i=0; i<menuList.length; i++) {
      if (menuList[i].menuSelected) {
        menuList[i].menuSelected=false;
      }
      if (menuList[i].menuOpen) {
        menuList[i].menuOpen=false;
        break;
      } else {
        textToDisplay="";
      }
    }//for
    key=0; // kill esc
  } // Esc 
  else if (key==' ') {
    // open / close menu
    handlespaceBarKey();
  } else if (key==RETURN||key==ENTER) {
    handleReturn();
  } else {
    //
  }//else
}//func

void handleReturn() {

  for (int i=0; i<menuList.length; i++) {

    if (menuList[i].menuSelected&&!menuList[i].menuOpen) {
      menuList[i].menuOpen=true;
      return;
    } else if (menuList[i].menuOpen) { 

      // execute
      int menuResult = -1;  
      // handle the click

      menuResult = menuList[i].selectedLineExecute(); 
      if (menuResult!=-1) {
        evalMenu(menuResult);
        return;
      }//if
    }//if
  }
}

void handlespaceBarKey() {
  // ALT-key ??? Doesn't work under WIN so we use Space bar.
  // First try TO CLOSE every menu in case it's open

  boolean doneClosingOrUnselect=false;

  for (int i=0; i<menuList.length; i++) {
    if (menuList[i].menuOpen) {
      menuList[i].menuOpen=false;
      doneClosingOrUnselect=true;
    }//if
    if (menuList[i].menuSelected) {
      menuList[i].menuSelected=false;
      doneClosingOrUnselect=true;
    }//if
  }//for

  // return when we did something above
  if (doneClosingOrUnselect) {
    return;
  }

  // second we assume, we want to select one menu
  menuList[0].menuSelected=true;
  return;
}

// -------------------------------------
// other functions 

void defineMenus() {
  // define menus: 
  // the index at the end (0,1,2,100,101,102,200,201,202) 
  // is the actual command. Must be unique! 
  menuList[0] = new ClassOneDropDownMenu("File", 0); // 23 = x pos
  menuList[0].addNewLine("Chair", 0); // 0 = index
  menuList[0].addNewLine("Bed", 1);
  menuList[0].addNewLine("Table", 2);
  menuList[0].addNewLine("CP", 3);
  menuList[0].addNewLine("Garage", 4);

  menuList[1] = new ClassOneDropDownMenu("Edit", 50);// x pos
  menuList[1].addNewLine("Chair 22", 100);// 100 = index
  menuList[1].addNewLine("Bed 22", 101);
  menuList[1].addNewLine("Table 22 ", 102);

  menuList[2] = new ClassOneDropDownMenu("Draw", 2*50);// x pos
  menuList[2].addNewLine("Chair 33", 200);// index
  menuList[2].addNewLine("Bed 33", 201);
  menuList[2].addNewLine("Table 33", 202);
}

void evalMenu(int menuResult1) {
  // example of usage 
  // place YOUR USAGE HERE *********************************************
  switch (menuResult1) {
  case 0: 
    textToDisplay="Here a Chair";
    break; 
  case 1:
    textToDisplay="Here a Bed";
    break; 
  case 2: 
    textToDisplay= "This is a Table";
    break; 
  case 3:
    textToDisplay="CP";
    break; 
  case 4: 
    textToDisplay= "Garage";
    break; 

    // ------------------

  case 100: 
    textToDisplay="Here a Chair 222";
    break; 
  case 101:
    textToDisplay="Here a Bed 222";
    break; 
  case 102: 
    textToDisplay= "This is a Table 222";
    break; 

    // ------------------

  case 200: 
    textToDisplay="Here a Chair 333";
    break; 
  case 201:
    textToDisplay="Here a Bed 333";
    break; 
  case 202: 
    textToDisplay= "This is a Table 333";
    break; 

    // ----------------------------

  case -1:
    // do nothing 
    break;
  default:
    // ERROR 
    println ("Error 277 with " + menuResult1);
    exit();
    break;
  } // switch 
  //
} // func 

// ==========================================

class ClassOneDropDownMenu {

  // represents one menu 
  //
  // define the base rectangle with title "File" 
  MenuItem baseMenu;
  // is it open? 
  boolean menuOpen=false;
  // is it Selected? But closed. This
  // happens when we click SPACE BAR (like ALT in a normal program)
  boolean menuSelected=false;
  // stores the y pos for the next entry
  float positionY;  
  // list of lines 
  ArrayList<MenuItem> listOfEntries = new ArrayList();
  // selectedLine
  int selectedLine = - 1;

  // constr
  ClassOneDropDownMenu(String menuTitle, int xTemp) {
    // define the rectangle with the triangle in it 
    baseMenu = new MenuItem(menuTitle);
    baseMenu.x = xTemp;
    baseMenu.y = 0;
    baseMenu.w = 50;
    baseMenu.h = 20;
    // define our positionY variable
    positionY = baseMenu.y + baseMenu.h;
  } // constr

  void addNewLine(String textOfTheNewEntry, 
    int index_ ) {
    // define a new line 
    MenuItem newItem = new MenuItem(textOfTheNewEntry);
    // set it properties 
    newItem.x = baseMenu.x;
    newItem.y = positionY; // our positionY variable is the new y pos
    newItem.w = 100;
    newItem.h = 20;
    newItem.index = index_;
    // add it to the list
    listOfEntries.add(newItem);
    // add its height to our positionY variable
    positionY += newItem.h;
  }  // method

  void display() {
    // display whole menu 

    // show base rectangle (title like "File")
    if (menuSelected)
      baseMenu.display(true);
    else 
    baseMenu.display(false);

    // if open, show list 
    if (menuOpen) { 
      for (int i=0; i<listOfEntries.size (); i++) {
        if (i==selectedLine)
          listOfEntries.get(i).display(true);
        else 
        listOfEntries.get(i).display(false);
      } // for
    } // if

    /*
    // menu icon I : burger menu icon (the "three line" symbol)
     stroke(0);
     strokeWeight(3);
     int offSetX = 8;  // border left and right 
     int offSetY = 6;  // space between lines (y-direction)
     float baseY = baseMenu.y + 9;
     for (int i = 0; i < 3; i++) { 
     line(baseMenu.x+offSetX, baseY+i*offSetY, 
     (baseMenu.x+baseMenu.h)-offSetX, baseY+i*offSetY);
     }
     strokeWeight(1);
     */

    //  text (titleMenu, baseMenu.x, baseY+i*offSetY);

    /*
    // menu icon II : show triangle in base rectangle
     fill(255);  
     if (menuOpen) { 
     triangle(baseMenu.x+4, baseMenu.y+baseMenu.h-4,
     baseMenu.x+baseMenu.w-4, baseMenu.y+baseMenu.h-4, 
     baseMenu.x+(baseMenu.w/2), baseMenu.y+4);
     } else {
     triangle(baseMenu.x+4, baseMenu.y+4, baseMenu.x+baseMenu.w-4, baseMenu.y+4, baseMenu.x+(baseMenu.w/2), baseMenu.y+baseMenu.h-4);
     }
     */
  } // method

  int clicked() {
    // mouse click 
    if (baseMenu.over()) {
      // toggle
      toggleMenuOpen();
    } else if (menuOpen) {
      for (int i=0; i<listOfEntries.size (); i++) {
        MenuItem currEntry = listOfEntries.get(i); 
        if (currEntry.over()) { 
          menuOpen=false;
          // quit 
          return currEntry.index;
        } // if
      } // for
      // no entry found
      menuOpen = false;
    } // else if
    return -1; // undefined
  } // method

  void toggleMenuOpen() {
    if (menuOpen) { 
      menuOpen=false;
    } else {
      menuOpen=true;
      selectedLine = - 1;
    }//else
  } // method

  void selectedLineDown() {
    selectedLine++;
    if (selectedLine>listOfEntries.size()-1)
      selectedLine=0;
  } // method

  void selectedLineUp() {
    selectedLine--;
    if (selectedLine<0)
      selectedLine=listOfEntries.size()-1;
  } // method

  void selectedLineFromMouse() {
    // sets the selected line from the mouse pos 
    for (int i=0; i<listOfEntries.size (); i++) {
      MenuItem currEntry = listOfEntries.get(i); 
      if (currEntry.over()) { 
        selectedLine=i;
        // quit 
        return;
      } // if
    } // for
  } // method

  int selectedLineExecute() {
    if (menuOpen) {
      for (int i=0; i<listOfEntries.size (); i++) {
        MenuItem currEntry = listOfEntries.get(i); 
        if (i==selectedLine) { 
          menuOpen=false;
          menuSelected=false;
          // quit 
          return currEntry.index;
        } // if
      } // for
      // no entry found
      menuOpen = false;
    } // else if
    return -1; // undefined
  } // method
  //
} // class 

// ============================================

class MenuItem {

  // one line in the menu 
  // (OR the menu title like "File" itself).

  // Just a rect with text in it. 

  String menuItemText;  // text
  float x, y, w, h;     // pos and size 
  int index = -1;       // its index for command

  // constr 
  MenuItem(String string_) {
    menuItemText = string_;
  } // constr 

  void display(boolean selected) {
    // show rect 
    // fill(over()?196:128); // depending on over
    fill(selected?196:128); // depending on selected 
    stroke(0);
    rect(x, y, w, h);
    // show text 
    fill(255);
    text(menuItemText, x+5, y+15);
  } // method

  boolean over() {
    return(mouseX>x && mouseY>y &&
      mouseX<=x+w && mouseY<=y+h );
  } // method
  //
} // class 
//

Santy

Chrisir this is fantastic!!! thanks very much

kfrajer

@Santy Let's continue any other discussion in the new forum: https://discourse.processing.org

@Chrisir I agree... this is really neat. Wanna collab to get a lib together to capture all your good demos? PM in the new forum.

Kf