Lateral SubMenu

edited August 2017 in Library Questions

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);
}

Answers

  • 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

  • Ok now is ready, excúseme please.

  • i can't help you

  • edited August 2017

    @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?

  • 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

  • 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.

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

  • Answer ✓

    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 
    //
    
  • Chrisir this is fantastic!!! thanks very much

  • @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

Sign In or Register to comment.