Creating a Waffle Menu

[stephenkln]

Hey all, I'm trying to build a waffle menu for screen navigation. I apologize if this is an amateurish question--I'm learning as I go, so I'm not entirely sure how to do this.

I probably need to be building this as a component, but right now I'm just trying to figure out how to get the color on hover property to do what I want. Here's a sample of what i'm trying to do:

I have a waffle menu icon that I am overlaying with individual rectangles so the properties of each is independent from the other. On top of each rectangle I have an icon. What I would like to do is have whichever rectangle is clicked, turn green. Like this:

Simple enough, I got that working on the rectangle. The problem is, when I add my icon on top of the rectangle, it doesn't work.

I have to click the very edge of the button because of the icon's dimensions:

Is there a way to set this up so that I can see the icon, but it is ignored as far as its interaction with the cursor is concerned? I want the hover and select properties to work on the rectangle and i want the icon to just sit on top.

Any suggestions?

[Drrickryp]

@stephenkln 

You could put the button on top of the icon and make its fill property transparent.  Then use UpdateContext({color:Green}) to set the fill property of the Icon underneath.  By setting the fill color properties of the buttons and icons to a context variable, you can control when they are transparent and when they are green.  

Another way to do this would be to just use an icon and change the color and fill based on a context variable.   If the color and fill of the icon match, the picture on the icon will seem to disappear.

[Rahber]

One of the way for this could be.

Using variables, so you define the variables for rectangle properties and on the icon on click you change the properties of the rectangle by updating the variables.

The other way could be you make icon the exact size of the rectangle and instead play with the ICON hover property

[stephenkln]

Ok I gave it a try. I set the rectangle to transparent, but when I click it, it turns green and hides the icon. I need the icon to remain white and be visible. 

[Drrickryp]

Hi @stephenkln 

Try this instead.  In the OnClick of an icon UpdateContext({clr:!clr) then in any of the properties you want to change put 

If(clr,Blue,Green)

This will toggle the colors based on clicking the Icon.  Give it a try and see how you can use it.  Change the colors to whatever you want to toggle. You can use RGBA(0,0,0,0) to set it transparent.  In the OnVisible property of your screen, use the UpdateContext(clr:true) to set the default property of the icons before they are clicked.

[stephenkln]

@Drrickryp Thanks for the suggestion! I'm having a bit of a challenge following since I'm so new at this.

Which element am I applying this to?

From these screenshots can you tell me specifically which element, the icon or the rectangle, to apply this to? And which property I am changing? I guess I'm asking for a step by step if it's not too much trouble.

Thanks so much!

[Drrickryp]

@stephenkln 

I would simplify and get rid of the rectangles and just use the icons.  There are alot of properties related to the color and fill of the icon (Color, Fill, HoverColor, BorderColor, PressedColor, PressedFill, etc) and all of them can be changed depending on whether the icon is pressed and setting a context variable as either true or false. UpdateContext({clr:!clr}) toggles the variable as true or false.  By using If(clr, somecolor, someothercolor)  you can control the property of the icon.  You will need to play with it a bit to get it to work the way you want.