Grouped label only button with alpha transition doesn't work!

Solar2D Widgets
#1

Hi guys,

So I’ve had previous problems with label only buttons and their anchors but because of some friendly people in the forums, we found a workaround.

But another problem has risen, my code looks something like this:

 ---// CREATING CATEGORYSLIDEOUT \\--- categorySlideOut.mainRect = display.newRect(centerCor.addMainRectX \* 1.35, centerCor.addMainRectY \* 1.35, centerX \* 0.475, centerY \* 0.477) categorySlideOut.mainRect.anchorX = 0 centerCor.categorySlideOutX, centerCor.categorySlideOutY = categorySlideOut.mainRect:localToContent(0,0) categorySlideOut.divider1 = display.newRect(centerCor.categorySlideOutX, centerCor.categorySlideOutY \* 0.9225, categorySlideOut.mainRect.width, centerX\*0.005) categorySlideOut.divider1.fill = {0.4,0.4,0.4, 0.5} categorySlideOut.divider2 = display.newRect(centerCor.categorySlideOutX, centerCor.categorySlideOutY \* 1, categorySlideOut.mainRect.width, centerX\*0.005) categorySlideOut.divider2.fill = {0.4,0.4,0.4, 0.5} categorySlideOut.divider3 = display.newRect(centerCor.categorySlideOutX, centerCor.categorySlideOutY \* 1.0775, categorySlideOut.mainRect.width, centerX\*0.005) categorySlideOut.divider3.fill = {0.4,0.4,0.4, 0.5} categorySlideOut.friendButton = widget.newButton( { label = "Friend", labelColor = {default={0}, over={129/255, 202/255, 195/255}}, font = font.robotoM, fontSize = 15, embos = false, textOnly = true, x = centerCor.addMainRectX \* 1.375, y = centerCor.addMainRectY \* 1.195, onEvent = functions.categoryItemEvent, id = "friend" } ) categorySlideOut.friendButton.anchorX = 0 categorySlideOut.familyButton = widget.newButton( { label = "Family", labelColor = {default={0}, over={129/255, 202/255, 195/255}}, font = font.robotoM, fontSize = 15, embos = false, textOnly = true, x = centerCor.addMainRectX \* 1.375, y = centerCor.addMainRectY \* 1.3, onEvent = functions.categoryItemEvent, id = "family" } ) categorySlideOut.familyButton.anchorX = 0 categorySlideOut.strangerButton = widget.newButton( { label = "Stranger", labelColor = {default={0}, over={129/255, 202/255, 195/255}}, font = font.robotoM, fontSize = 15, embos = false, textOnly = true, x = centerCor.addMainRectX \* 1.375, y = centerCor.addMainRectY \* 1.4, onEvent = functions.categoryItemEvent, id = "stranger" } ) categorySlideOut.strangerButton.anchorX = 0 categorySlideOut.coworkerButton = widget.newButton( { label = "Coworker", labelColor = {default={0}, over={129/255, 202/255, 195/255}}, font = font.robotoM, fontSize = 15, embos = false, textOnly = true, x = centerCor.addMainRectX \* 1.375, y = centerCor.addMainRectY \* 1.5, onEvent = functions.categoryItemEvent, id = "coworker" } ) categorySlideOut.coworkerButton.anchorX = 0 categorySlideOut.hiddenTouchReceiver = display.newRect(centerX, originY, actualW, actualH \* 3) categorySlideOut.hiddenTouchReceiver.alpha = 0 categorySlideOut.hiddenTouchReceiver.isHitTestable = false categorySlideOut.hiddenTouchReceiver:addEventListener("tap", functions.dismissCategory) ----------------------------------------------------------------------------------------- categorySlideOutGroup.alpha = 0

This code creates a, and I admit messy, dropdown menu but the code itself should all be valid. All of the items are placed in a group called “categorySlideOutGroup” and at the end I set the alpha value to 0. So I open this menu with this function:

function functions.openCategory(event) if event.phase == "ended" then transitions.openCategory = transition.to(categorySlideOutGroup, {time = 200, transition = easing.outCubic, alpha = 1}) categorySlideOut.hiddenTouchReceiver.isHitTestable = true end return true end

That works completely as expected, but when I try to close it with this code:

function functions.dismissCategory(event) print("tapped the rect") transitions.openCategory = transition.to(categorySlideOutGroup, {time = 200, transition = easing.outCubic, alpha = 0}) categorySlideOut.hiddenTouchReceiver.isHitTestable = false return true end

I’m getting unwanted results. The transition does not apply to the labelOnly buttons. Instead, the text becomes white for a brief moment and after that just disappears. The transition is however okay with other objects in the group like the dividers and mainRect.

Is there any way of fixing this or will I have to transition all the objects separately?

Kind regards

Bram

#2

Hi Bram,

I don’t see any code where you insert the buttons into “categorySlideOutGroup” but you say that’s being done. Can you clarify?

Brent

#3

Hi Brent,

I left that part out because I’m pretty sure that there is nothing wrong with that code. But here it is:

---// INSERTING addScreen ITEMS INTO categorySlideOutGroup \\--- categorySlideOutGroup:insert(categorySlideOut.mainRect) categorySlideOutGroup:insert(categorySlideOut.divider1) categorySlideOutGroup:insert(categorySlideOut.divider2) categorySlideOutGroup:insert(categorySlideOut.divider3) categorySlideOutGroup:insert(categorySlideOut.friendButton) categorySlideOutGroup:insert(categorySlideOut.familyButton) categorySlideOutGroup:insert(categorySlideOut.strangerButton) categorySlideOutGroup:insert(categorySlideOut.coworkerButton) categorySlideOutGroup:insert(categorySlideOut.hiddenTouchReceiver) -----------------------------------------------------------------------------------------
#4

To the ones who try to recreate the problem. The transition works fine on the simulator but it doesn’t work on an actual phone (Tested on galaxy s7 edge).

#5

I ended up not using the button widget but just make my own buttons with some text and that worked.

I unfortunately couldn’t make it work with the button widget :( 

#6

Hi @bramvbilsen,

Just to update/clarify, the issue seems more related to the phone (vs. Simulator) than what you’re doing in the code (transition)? That’s very odd and it might need to be diagnosed further…

Brent

#7

Well, I can’t test with any other devices. I just got my galaxy s7 edge to test on, no other android or ios devices I’m afraid :confused:

But, if all the code looks correct to you then there might just be an issue with my device or android in general. And yes, I’m using a simple transition. When I close the slideout menu, I used:

 transitions.openCategory = transition.to(categorySlideOutGroup, {time = 200, transition = easing.outCubic, alpha = 0})

This resulted in a smooth transition for “mainRect” and the dividers but something funny happened with the buttons. The text, the buttons are text only, first turned white (originally black) and would after that disappear without any transition what so ever.

I hope that I explained it good enough, but if you need any further help with this be sure to message me! :slight_smile:

Kind regards

Bram

#8

Hi Bram,

Can you zip up the entire basic project and attach it here? Or if it’s private/sensitive, I can provide you an email to send it to. I can inspect what’s happening and test it on my devices.

Thanks,

Brent

#9

Hi Brent,

I’d be happy to help, but I would not like the code to be spread across the web because I’d like to publish it to the stores one day :slight_smile:

So I could send you an email with the files if you can assure me it won’t be shared with anyone else.

I got a day of on Sunday, so you’ll have it by then for sure. But I’ll try to send it somewhere earlier when I come home!

Kind regards

Bram

#10

Sure, send them along to brent (at) coronalabs (dot) com. I assure you they won’t leave my computer. :slight_smile:

Brent

#11

Hi Brent,

I’ve sent you an email with all the files!

#12

Hi Bram,

I don’t see any code where you insert the buttons into “categorySlideOutGroup” but you say that’s being done. Can you clarify?

Brent

#13

Hi Brent,

I left that part out because I’m pretty sure that there is nothing wrong with that code. But here it is:

---// INSERTING addScreen ITEMS INTO categorySlideOutGroup \\--- categorySlideOutGroup:insert(categorySlideOut.mainRect) categorySlideOutGroup:insert(categorySlideOut.divider1) categorySlideOutGroup:insert(categorySlideOut.divider2) categorySlideOutGroup:insert(categorySlideOut.divider3) categorySlideOutGroup:insert(categorySlideOut.friendButton) categorySlideOutGroup:insert(categorySlideOut.familyButton) categorySlideOutGroup:insert(categorySlideOut.strangerButton) categorySlideOutGroup:insert(categorySlideOut.coworkerButton) categorySlideOutGroup:insert(categorySlideOut.hiddenTouchReceiver) -----------------------------------------------------------------------------------------
#14

To the ones who try to recreate the problem. The transition works fine on the simulator but it doesn’t work on an actual phone (Tested on galaxy s7 edge).

#15

I ended up not using the button widget but just make my own buttons with some text and that worked.

I unfortunately couldn’t make it work with the button widget :( 

#16

Hi @bramvbilsen,

Just to update/clarify, the issue seems more related to the phone (vs. Simulator) than what you’re doing in the code (transition)? That’s very odd and it might need to be diagnosed further…

Brent

#17

Well, I can’t test with any other devices. I just got my galaxy s7 edge to test on, no other android or ios devices I’m afraid :confused:

But, if all the code looks correct to you then there might just be an issue with my device or android in general. And yes, I’m using a simple transition. When I close the slideout menu, I used:

 transitions.openCategory = transition.to(categorySlideOutGroup, {time = 200, transition = easing.outCubic, alpha = 0})

This resulted in a smooth transition for “mainRect” and the dividers but something funny happened with the buttons. The text, the buttons are text only, first turned white (originally black) and would after that disappear without any transition what so ever.

I hope that I explained it good enough, but if you need any further help with this be sure to message me! :slight_smile:

Kind regards

Bram

#18

Hi Bram,

Can you zip up the entire basic project and attach it here? Or if it’s private/sensitive, I can provide you an email to send it to. I can inspect what’s happening and test it on my devices.

Thanks,

Brent

#19

Hi Brent,

I’d be happy to help, but I would not like the code to be spread across the web because I’d like to publish it to the stores one day :slight_smile:

So I could send you an email with the files if you can assure me it won’t be shared with anyone else.

I got a day of on Sunday, so you’ll have it by then for sure. But I’ll try to send it somewhere earlier when I come home!

Kind regards

Bram

#20

Sure, send them along to brent (at) coronalabs (dot) com. I assure you they won’t leave my computer. :slight_smile:

Brent