Processing 1.0 - Processing Discourse - How to make sub-menu stay open?

We closed this forum 18 June 2010. It has served us well since 2005 as the ALPHA forum did before it from 2002 to 2005. New discussions are ongoing at the new URL http://forum.processing.org. You'll need to sign up and get a new user account. We're sorry about that inconvenience, but we think it's better in the long run. The content on this forum will remain online.

Index › Programming Questions & Help › Syntax Questions › How to make sub-menu stay open

‹ Previous Topic | Next Topic ›

Pages: 1

How to make sub-menu stay open? (Read 1086 times)

Lenticular

How to make sub-menu stay open?
Sep 1^st, 2009, 11:58pm

How would I go about making this sub-menu stay visible when I roll the mouse off the blue button that opened the sub-menu and onto the sub- menu itself? Thanks.

Menu menu;

boolean button = false;

void setup() {
size(300,300);
menu = new Menu();
}

void draw() {
background(180);
menu.display_gui();
menu.display_menu();
}

void mouseClicked()
{
menu.mouseClicked();
}

class Menu {

void display_gui() { //upper blue button
fill (140,160,220);
if (mouseX > 10 && mouseX < 110 && mouseY > 10 && mouseY < 30)
fill(150,190,250);
rect(10,10,100,20);
}

void display_menu() {
if (button) {
fill(255);
rect(10,30,100,150); // white menu
fill (140,160,220);
if (mouseX > 10 && mouseX < 110 && mouseY > 100 && mouseY < 120)
fill(150,190,250);
rect(10,100,100,20); // lower blue button
if (mouseX > 10 && mouseX < 110 && mouseY > 100 && mouseY < 120) {
fill(255);
rect(110,100,100,150); // white submenu
}
}
}

void mouseClicked() {
if (mouseX > 10 && mouseX < 110 && mouseY > 10 && mouseY < 30) {
button = !button;
}
}
}

Cedric

Re: How to make sub-menu stay open?
Reply #1 - Sep 2^nd, 2009, 12:37am

just do it like you did with the other ones :

Code:

Menu menu;

boolean button = false;

void setup() {
  size(300,300);
  menu = new Menu();
}

void draw() {
  background(180);
  menu.display_gui();
  menu.display_menu();
}

void mouseClicked()
{
  menu.mouseClicked();
}

class Menu {

  void display_gui() {  //upper blue button
    fill (140,160,220);
    if (mouseX > 10 && mouseX < 110 && mouseY > 10 && mouseY < 30)
	fill(150,190,250);
    rect(10,10,100,20);
  }

  void display_menu() {
    if (button) {
	fill(255);
	rect(10,30,100,150);   // white menu
	fill (140,160,220);
	if (mouseX > 10 && mouseX < 110 && mouseY > 100 && mouseY < 120)
	  fill(150,190,250);
	rect(10,100,100,20);  // lower blue button
	if (mouseX > 10 && mouseX < 110 && mouseY > 100 && mouseY < 120 || mouseX>=110 && mouseX<210 && mouseY>100 && mouseY<250)  {
	  fill(255);
	  rect(110,100,100,150);  // white submenu
	}
    }
  }

  void mouseClicked() {
    if (mouseX > 10 && mouseX < 110 && mouseY > 10 && mouseY < 30) {
	button = !button;
    }
  }
}

twitter.com/CedricKiefer

Lenticular

Re: How to make sub-menu stay open?
Reply #2 - Sep 2^nd, 2009, 10:58am

Thanks for your suggestion. You make it look easy.

Now that I think about it, I should have been more specific about my question.

At the time I was noticing the sub-menu in processing under Sketch called Import Library. The sub-menu Import Library will only open if the mouse is over the Import Library rectangle. The sub-menu will not open if I first move the mouse over where the sub-menu will appear in the future. Now that I think about it, it may not matter much either way but it may be an enlightening programming exercise for me to get it to work just like other menus.

Do you think this added detail will require an ordeal of complicated code to pull off?

blindfish

Re: How to make sub-menu stay open?
Reply #3 - Sep 2^nd, 2009, 1:05pm

Lenticular wrote on Sep 2^nd, 2009, 10:58am:

Do you think this added detail will require an ordeal of complicated code to pull off

No. The trick is to use another boolean variable, and set this to true only when the user hovers over the second 'button'. Then you create another separate condition: if your submenu boolean is true draw the submenu and also check to ensure the mouse doesn't stray from the submenu or second button area. If the mouse does leave the area set the submenu boolean to false. That way the submenu only appears when the user hovers over the button and disappears as expected.

I must admit I had to think about it a few minutes to figure out the best approach. I'll let you give it a try first and if you can't figure it out I'll post the code: practice makes perfect Wink

One small tip though. To check the negative of a condition you can simply put an exclamation mark before it:

Code:

// here the condition will return true if the mouse isn't within the indicated areas
  if (! (mouseX>=110 && mouseX<210 && mouseY>100 && mouseY<250 || mouseX > 10 && mouseX < 110 && mouseY > 100 && mouseY < 120) ){
  // so since the mouse has strayed from the area you can set 
  // the corresponding boolean to false:
  submenu = false;
}

Where is the what if the what is in why?

Lenticular YaBB Newbies Offline Posts: 36	Re: How to make sub-menu stay open? Reply #4 - Sep 2^nd, 2009, 1:46pm Thanks for your help. I will take what you posted, do some studying and try to make it work. I can't be near my computer much till tomorrow. I will post my results then.

Lenticular

Re: How to make sub-menu stay open?
Reply #5 - Sep 3^rd, 2009, 11:18am

I have read your instructions over and over again and tried adding code to this program, but because of my lack of experience I am pretty lost right now.

I am assuming the code you provided is only part of the code necessary.

You said add another boolean variable. Does that mean I have to declare a second boolean button02 = false; at the top? Does this also imply I need a second mouseClicked()?

Here is what I have. Not much has changed. Thanks for your help.

Menu menu;

boolean button = false;
boolean button02 = false;

void setup() {
size(300,300);
menu = new Menu();
}

void draw() {
background(180);
menu.display_gui();
menu.display_menu();
}

void mouseClicked()
{
menu.mouseClicked();
}

class Menu {

void display_gui() { //upper blue button
fill (140,160,220);
if (mouseX > 10 && mouseX < 110 && mouseY > 10 && mouseY < 30)
fill(150,190,250);
rect(10,10,100,20);
}

void display_menu() {
if (button) {
fill(255);
rect(10,30,100,150); // white menu
fill (140,160,220);
if (mouseX > 10 && mouseX < 110 && mouseY > 100 && mouseY < 120)
button02 = true;
fill(150,190,250);
rect(10,100,100,20); // lower blue button
if (mouseX > 10 && mouseX < 110 && mouseY > 100 && mouseY < 120 || mouseX>=110 && mouseX<210 && mouseY>100 && mouseY<250) {

fill(255);
rect(110,100,100,150); // white submenu
}
}
}

void mouseClicked() {
if (mouseX > 10 && mouseX < 110 && mouseY > 10 && mouseY < 30) {
button = !button;
}
}
}

blindfish

Re: How to make sub-menu stay open?
Reply #6 - Sep 3^rd, 2009, 1:29pm

OK. Here's my version:

Code:

Menu menu;

boolean button = false;
// To store the state of the submenu
boolean submenu = false;

void setup() {
  size(300,300);
  menu = new Menu();
}

void draw() {
  background(180);
  menu.display_gui();
  menu.display_menu();
}

void mouseClicked() {
  menu.mouseClicked();
}

class Menu {

    void display_gui() {  //upper blue button
        fill (140,160,220);
        if (mouseX > 10 && mouseX < 110 && mouseY > 10 && mouseY < 30) {
            fill(150,190,250);
        }
        rect(10,10,100,20);
        
    }

  void display_menu() {
    
        if (button) {
	    fill(255);
            rect(10,30,100,150);   // white menu
	    fill (140,160,220);
	    if (mouseX > 10 && mouseX < 110 && mouseY > 100 && mouseY < 120){
                fill(150,190,250);
            }
            rect(10,100,100,20);  // lower blue button
            
            // check that the mouse is hovering over the second button
	    if (mouseX > 10 && mouseX < 110 && mouseY > 100 && mouseY < 120)  {
                // if it is set the boolean variable to true
                submenu = true;
	    }

            // If the boolean is true we can display the submenu
            if (submenu) {
                fill(255);
                rect(110,100,100,150);

                // now we just need to check if the mouse strays from either 
                // the button or the submenu.
                if (! (mouseX>=110 && mouseX<210 && mouseY>100 && mouseY<250 || mouseX > 10 && mouseX < 110 && mouseY > 100 && mouseY < 120) ){
                    // If it does we set the boolean to false and the submenu is hidden
                    submenu = false;
                }
            }// end of if(submenu)
        }// end of if(button)
  }

  void mouseClicked() {
      if (mouseX > 10 && mouseX < 110 && mouseY > 10 && mouseY < 30) {
          button = !button;
      }
  }
}

That hopefully answers your questions: one extra boolean variable declared and no need for a second mouseClicked Wink

Part of the trick is to make the check for mouseover on the second button (basically just checking that the mouse is within a certain area) separate from the display of the submenu. You can then display the submenu when it is set to true. So that takes care of only displaying the submenu when hovering over the second button, and not when the mouse is over the submenu.

The next step is to hide the menu when you roll the mouse out of the designated area. That's what the condition I posted previously checks. Since you only need to make this check if the submenu is currently visible you can place this condition within the if(submenu) condition.

Hopefully that all makes sense. Of course this setup is a little unforgiving. For instance if you move diagonally from the button to the submenu, you stray from the mouseover area so the submenu disappears before you get there. In an ideal world you'd start a timer at this point and if mouseover hadn't been restored after a certain delay only then would you set the submenu boolean to false... But perhaps that's a project for another time.

I'd also suggest you take some time to go over the objects tutorial. As it stands your Menu class isn't doing a lot of work and isn't easily re-usable... but I guess that'll be your next step once you get to grips with all this Wink

Where is the what if the what is in why?

Lenticular

Re: How to make sub-menu stay open?
Reply #7 - Sep 3^rd, 2009, 3:16pm

Your code made the sub-menu work exactly as I had envisioned it.

For the last 24 hours, the hardest thing for me to understand is how to code this so when I first run the mouse over the sub-menus (zoned off area) prior to opening the sub-menu. This action should not open the sub-menu.

I had no idea how to do this. You seem to have filled in that blank spot. I am just starting to understand this.

That timer idea is a new one on me. I will remember that.

Yes. I need to work on converting data and functionality into objects and classes. That objects tutorial is a chapter out of the book I am reading. I thought I was doing good with that until I added the mouseClicked function. I did not know where to put it. It did not seem to fit into a class.

You have organized the code to be much more readable. I will have to work on that.

Thanks again.

blindfish

Re: How to make sub-menu stay open?
Reply #8 - Sep 3^rd, 2009, 4:35pm

Well - I wouldn't worry too much about getting stuck if you're only just starting out. As I said before - I had to think about it a bit before I figured out the logic. As for making the code more readable - I did increase the indentation a little to make the structure a little clearer. I also reinstated the {braces} on your single statement if conditions. Whilst:

if(myCondition) doThisStatement;

is perfectly valid it's not always easy to read, especially if you split it onto two lines as you had done. Until you're more experienced I'd stick to using braces. So instead of this (which is a little ambiguous):

Code:

if(false)
println("false");
println("never mind");

Do this:

Code:

if(false) {
    println("false");
}
println("never mind");

It's much clearer and TBH I still use this method just for clarity's sake...

Where is the what if the what is in why?

Pages: 1

‹ Previous Topic | Next Topic ›