Radio buttons and check boxes remain after scene change

richtornado · May 2, 2017, 3:22pm

I have a game that has radio buttons and check boxes in one scene. The problem is that they remain when I change to the next scene. I tried the

radioGroup:insert( radioButton1 ) mainGroup:insert(radioButton1)&nbsp;

radioGroup:insert( radioButton1 ) and mainGroup:insert(radioButton1) but they only give me errors or they make the object not even appear on the intended scene.

Any suggestions would be appreciated.

Thank you.

anon63346430 · May 2, 2017, 3:49pm

They remain as they are not inserted into the screens view.

Try removing these 2 lines and moving all object creation code into scene:create()

local mainGroup local radioGroup

richtornado · May 2, 2017, 3:55pm

I have done that but the buttons still appear in my next scene.

As you can see I’ve rearranged the code (I’ve tried a few different shuffling ). Yet the buttons still remain visible in the next scene. Any ideals?

anon63346430 · May 2, 2017, 5:06pm

You’ve not done it quite right. For example radioGroup is NEVER inserted into the scene’s view, therefore it will float above every other object

richtornado · May 2, 2017, 5:22pm

I’ve moved it to the top (with all the other “local”) and it still remains when I change scenes. I just can’t figure out where it supposed to go. Sorry I am still new and maybe the answer is obvious but I’m just not seeing it.

local composer = require ("composer") local scene = composer.newScene() local widget = require( "widget" ) -- Create a group for the radio button set local radioGroup = display.newGroup() -- Handle press events for the buttons local function onSwitchPress( event ) local switch = event.target print( "Switch with ID '"..switch.id.."' is on: "..tostring(switch.isOn) ) end -- Handle press events for the checkbox local function onSwitchPress( event ) local switch = event.target print( "Switch with ID '"..switch.id.."' is on: "..tostring(switch.isOn) ) end local function changeScene1() local options = { effect = "crossFade", time = 100 } composer.gotoScene( "scene1", options ) end local function changeScene4() local options = { effect = "crossFade", time = 800 } composer.gotoScene( "scene4", options ) end function scene:create( event ) mainGroup = self.view local image2 = display.newImageRect("Slide002.png", display.contentWidth, display.contentHeight) image2.anchorX = 0 image2.anchorY = 0 image2.alpha = 1 image2:toBack( ) local rectScore2 = display.newRect( 850, 700, 255, 125 ) -- push this rectangle to increase score mainGroup:insert(rectScore2) rectScore2:setFillColor( 1, 1, 1 ) rectScore2.alpha = 1 rectScore2:toFront( ) rectScore2:addEventListener("touch", changeScene4 ) local rectReset = display.newRect( 80, 40, 130, 50 ) --rectReset:setFillColor( 1, 0, 0 ) -- push this rectangle to increase score mainGroup:insert(rectReset) rectReset:addEventListener("touch", changeScene1 ) rectReset.alpha = 1 rectReset:toFront( ) -- Create three associated radio buttons (inserted into the same display group) local radioButton1 = widget.newSwitch( { left = 150, top = 200, style = "radio", id = "RadioButton1", --initialSwitchState = true, onPress = onSwitchPress } ) radioGroup:insert( radioButton1 ) local radioButton2 = widget.newSwitch( { left = 250, top = 200, style = "radio", id = "RadioButton2", onPress = onSwitchPress } ) radioGroup:insert( radioButton2 ) -- Create the widget local checkboxButton = widget.newSwitch( { left = 150, top = 300, style = "checkbox", id = "Checkbox", onPress = onSwitchPress } ) mainGroup:insert (image2) end function scene:show( event ) local phase = event.phase if ( phase == "will" ) then elseif ( phase == "did" ) then end end function scene:hide( event ) local phase = event.phase if ( phase == "will" ) then elseif ( phase == "did" ) then end end function scene:destroy( event ) end scene:addEventListener( "create", scene ) scene:addEventListener( "show", scene ) scene:addEventListener( "hide", scene ) scene:addEventListener( "destroy", scene ) return scene

nmichaud · May 2, 2017, 7:41pm

@richtornado, I would suggest a very good article about group : https://docs.coronalabs.com/guide/graphics/group.html to help you undesrstand the whole concept.

Moving your items to the top of your file will not fix anything. Its important that all your items are properly added in a group, most specifically here the scene group. You have created a radiobutton group, but it is not added in your scene view.

Also, you are using toFront and toBack in a strange way, most specifically after adding an item; its already at the top, there is no need to try to push it to the front. This is why also I suggest you to read the article about group.

You should be careful to not declare variable with no local in front of them…

One last tip, try to keep all your scene creation code within the create method. It will be easier to read, debug, etc.

richtornado · May 2, 2017, 8:22pm

I have already read that article (and many others) I could not find answers there thus I posted this article.

If you look at my code all my button creations are already in the scene creation sections so I’m not sure how else to place it?

nmichaud · May 2, 2017, 8:38pm

Richtornado, I have clear the createView method to show you the part of the radio button, to illustrate where the problem is. (the code is not tested, just reformated quickly your code). Again, your bug was that you never added your group!

function scene:create( event ) -- this is the group of your view local mainGroup = self.view -- Create a group for the radio button set local radioGroup = display.newGroup() -- you must insert your radio group into your main group (view) mainGroup:insert(radioGroup) -- you could simplify your code by creating a generic method local function createSwitchButton( group, id, left, top, style, initialState) -- Handle press events for the buttons local function onSwitchPress( event ) local switch = event.target print( "Switch with ID '"..switch.id.."' is on: "..tostring(switch.isOn) ) end -- Create a radio button local switchButton = widget.newSwitch( { left = left, top = top, style = style, id = id, initialSwitchState = initialState, onPress = onSwitchPress } ) group:insert( switchButton ) end createSwitchButton( radioGroup, "RadioButton1", 150, 200, "radio", true) createSwitchButton( radioGroup, "RadioButton2", 250, 200, "radio", false) end

richtornado · May 2, 2017, 8:46pm

Thank you for the reply.

I actually removed the radio button and only added checkboxes.

I’m still getting the error that the checkboxes are still visible on the next scene.

I have placed the in the scene create section but nothing has changed.

this is my entire core for this scene. Everything works but the check boxes remain in the next scene.

local composer = require ("composer") local scene = composer.newScene() local widget = require( "widget" ) -- Handle press events for the checkbox local function onSwitchPress( event ) local switch = event.target print( "Switch with ID '"..switch.id.."' is on: "..tostring(switch.isOn) ) end local function changeScene1() local options = { effect = "crossFade", time = 100 } composer.gotoScene( "scene1", options ) end local function changeScene4() local options = { effect = "crossFade", time = 800 } composer.gotoScene( "scene4", options ) end function scene:create( event ) mainGroup = self.view local image2 = display.newImageRect("Slide002.png", display.contentWidth, display.contentHeight) image2.anchorX = 0 image2.anchorY = 0 image2.alpha = 1 image2:toBack( ) local rectScore2 = display.newRect( 850, 700, 255, 125 ) -- push this rectangle to increase score mainGroup:insert(rectScore2) rectScore2:setFillColor( 1, 1, 1 ) rectScore2.alpha = 1 rectScore2:addEventListener("touch", changeScene4 ) local rectReset = display.newRect( 80, 40, 130, 50 ) --rectReset:setFillColor( 1, 0, 0 ) -- push this rectangle to increase score mainGroup:insert(rectReset) rectReset:addEventListener("touch", changeScene1 ) rectReset.alpha = 1 -- Create the widget local checkboxButton = widget.newSwitch( { left = 350, top = 555, style = "checkbox", id = "Checkbox", onPress = onSwitchPress } ) -- Create the widget local checkboxButton1 = widget.newSwitch( { left = 350, top = 605, style = "checkbox", id = "Checkbox", onPress = onSwitchPress } ) mainGroup:insert (image2) end function scene:show( event ) local phase = event.phase if ( phase == "will" ) then elseif ( phase == "did" ) then end end function scene:hide( event ) local phase = event.phase if ( phase == "will" ) then elseif ( phase == "did" ) then end end function scene:destroy( event ) end scene:addEventListener( "create", scene ) scene:addEventListener( "show", scene ) scene:addEventListener( "hide", scene ) scene:addEventListener( "destroy", scene ) return scene

richtornado · May 2, 2017, 9:16pm

@nmichaud I think i understand and was able to get your example to work in my page.

Now i’m just not sure how to create a group for the individual Check Box buttons?

nmichaud · May 2, 2017, 9:21pm

If you take the example I have provided, you do not need to create another group for checkbox. You only need to create group for radiobutton when you want to group them logically.

Simply call the same method like this using your main view group: createSwitchButton( mainGroup, “idOfYourCheckBox”, 150, 200, “checkbox”, true)

anon63346430 · May 2, 2017, 9:27pm

as long as every object is ultimately inserted into the scenes view it will work fine. In your scenario, and most tbh, toBack() and toFront() never need calling.

an object inserted into a display group (if you are not using indexing) will always be at the top.

richtornado · May 2, 2017, 9:29pm

Finally got it to work.

Thank you so much guys.

anon63346430 · May 2, 2017, 11:19pm

You accept your own broken answer as the solution? gee so glad we took the time to help you!

richtornado · May 3, 2017, 1:01am

Oops sorry, I checked on the wrong box by mistake.

anon63346430 · May 2, 2017, 3:49pm