Moving Group of Objects and rect sizes

Hello,

I’m trying to do a simple scroll down menu. But I’m having some basic problems, first I want to split the screen in two groups of tiles: gray and white. But since the application has a top bar (that has 15% of the screen size), I want to split not all the screen just 85% of it. The problem is, the screen never get split correct, all tiles sizes together are smaller than 85% of the screen.

The second problem is while moving the group the tiles moves too fast, I think that this is because while moving the finger over the tiles the listener is called multiple times, but I don’t know how to fix it.

Check the code:

----------------------------------------------------------------------------------------- -- -- main.lua -- ----------------------------------------------------------------------------------------- -- Your code here] -- signUp Scene -- local composer = require( "composer" ) local json = require("json") --adding json lib local scene = composer.newScene() --------------------------------------------------------------------------------- -- All code outside of the listener functions will only be executed ONCE -- unless "composer.removeScene()" is called. --------------------------------------------------------------------------------- -- local forward references should go here --------------------------------------------------------------------------------- -- "scene:create()" function scene:create( event ) display.setDefault("background", 1, 1, 1); --set backgroung white color composer.removeScene("loginScene") local sceneGroup = self.view -- creating product list background local backgroundTiles = display.newGroup(); local nTiles= 10; -- this should be the same as the number of products for i=1,nTiles do --backgroundTiles[i] = (display.newRect(display.contentWidth/2, display.contentHeight\*0.15 + (i-1)\*(display.contentHeight/nTiles)-(display.contentHeight/nTiles)/2, --display.contentWidth, (display.contentHeight)/nTiles)) tile = (display.newRect(display.contentWidth/2, display.contentHeight\*0.15 + (i-1)\*(display.contentHeight/nTiles)-(display.contentHeight/nTiles)/2, display.contentWidth, (display.contentHeight)/nTiles)) --print((0.85\*display.contentHeight)/nTiles) --print(0.85\*display.contentHeight) --print(backgroundTiles[i].height) if i%2 == 0 then tile:setFillColor(1,1,1) else tile:setFillColor(0.97,0.97,0.97) end backgroundTiles:insert(tile) end -- creating top bar and coloring topBar = display.newRect(display.contentWidth/2, -10, display.contentWidth, display.contentHeight\*0.15); topBar:setFillColor(0,0.7,1) sceneGroup:insert(topBar) -- creating text above top bar topText = display.newText("Smart Food Storage", display.contentWidth\*0.35,-10,"GeosansLight.ttf", 25); topText:setFillColor(1,1,1) sceneGroup:insert(topText) addButton = display.newImage("addButton.png",0.9\*display.contentWidth,-9) sceneGroup:insert(addButton) -- creating popUp popUpBox = display.newImage("popUpBox.png",display.contentWidth/2,display.contentHeight/2) addButtonBox = display.newImage("addButton2.png", display.contentWidth/1.35, display.contentHeight/1.6) cancelButtonBox = display.newImage("cancelButton.png", display.contentWidth/3.9, display.contentHeight/1.6) productNameBox = native.newTextField( display.contentWidth/2, display.contentHeight/2.1, 150, 30); -- productNameBox productNameBox.isVisible = false popUpBoxGroup = display.newGroup() -- create a group to put all pop pop box together popUpBoxGroup:insert(popUpBox) popUpBoxGroup:insert(addButtonBox) popUpBoxGroup:insert(cancelButtonBox) popUpBoxGroup:insert(productNameBox) popUpBoxGroup.isVisible = false local productName --product name variable local function addButtonClick( event ) if (event.phase == "began") then --print("clicked") elseif (event.phase == "moved") then elseif (event.phase == "ended" or event.phase == "cancelled") then --print("click released"); -- open popUpBox popUpBoxGroup.isVisible = true productNameBox.isVisible = true end return true end local function cancelButtonBoxClick( event ) if (event.phase == "began") then --print("clicked") elseif (event.phase == "moved") then elseif (event.phase == "ended" or event.phase == "cancelled") then --print("click released"); -- open popUpBox popUpBoxGroup.isVisible = false productNameBox.isVisible = false end return true end local function productNameTextListener( event ) if ( event.phase == "began" ) then -- User begins editing elseif ( event.phase == "ended" or event.phase == "submitted" ) then -- Output resulting text from "defaultField" print( event.target.text ) productName = event.target.text; end if ( event.phase == "editing" ) then print( event.newCharacters ) print( event.oldText ) print( event.startPosition ) print( event.text ) productName = event.target.text; end end local function addButtonBoxClick( event ) if (event.phase == "began") then --print("clicked") elseif (event.phase == "moved") then elseif (event.phase == "ended" or event.phase == "cancelled") then --print("click released"); sendInfo = {["addProduct"] = productName} -- text fields local function networkListener( event ) if ( event.isError ) then print( "Network error!" ) else print( "RESPONSE: "..event.response ) popUpBoxGroup.isVisible = false productNameBox.isVisible = false productName = nil end end local headers = { ["Content-Type"] = "application/json", ["Accept-Language"] = "en-US", } local params = {} params.headers = headers params.body = json.encode( sendInfo ) print( "params.body: "..params.body ) network.request( "http://putsreq.com/gVt00VGW9jVAHRjQ7EPh", "POST", networkListener, params) -- waiting for morgan develop db -- open popUpBox end return true end local function backgroundTilesClick( event ) local deltaY if (event.phase == "began") then elseif (event.phase == "moved") then --moving backgroundtiles deltaY = event.y - event.yStart -- get the difference backgroundTiles:toBack() backgroundTiles.y = backgroundTiles.y + 0.1\*deltaY elseif (event.phase == "ended" or event.phase == "cancelled") then end return true end -- adding listeners addButton:addEventListener("touch", addButtonClick) cancelButtonBox:addEventListener("touch",cancelButtonBoxClick) addButtonBox:addEventListener("touch", addButtonBoxClick) productNameBox:addEventListener( "userInput", productNameTextListener ) backgroundTiles:addEventListener("touch", backgroundTilesClick) -- Initialize the scene here. -- Example: add display objects to "sceneGroup", add touch listeners, etc. end -- "scene:show()" function scene:show( event ) local sceneGroup = self.view local phase = event.phase if ( phase == "will" ) then -- Called when the scene is still off screen (but is about to come on screen). elseif ( phase == "did" ) then -- Called when the scene is now on screen. -- Insert code here to make the scene come alive. -- Example: start timers, begin animation, play audio, etc. end end -- "scene:hide()" function scene:hide( event ) local sceneGroup = self.view local phase = event.phase if ( phase == "will" ) then -- Called when the scene is on screen (but is about to go off screen). -- Insert code here to "pause" the scene. -- Example: stop timers, stop animation, stop audio, etc. elseif ( phase == "did" ) then -- Called immediately after scene goes off screen. end end -- "scene:destroy()" function scene:destroy( event ) local sceneGroup = self.view signUpButton:removeSelf(); -- Called prior to the removal of scene's view ("sceneGroup"). -- Insert code here to clean up the scene. -- Example: remove display objects, save state, etc. end --------------------------------------------------------------------------------- -- Listener setup scene:addEventListener( "create", scene ) scene:addEventListener( "show", scene ) scene:addEventListener( "hide", scene ) scene:addEventListener( "destroy", scene ) --------------------------------------------------------------------------------- return scene

Hi,

Because the status bar (I assume you mean the OS-native status bar) varies between platform, you can better determine how much space is “remaining” by using the following two properties to calculate it. That should give you a better reflection of what 85% is.

https://docs.coronalabs.com/api/library/display/actualContentHeight.html

https://docs.coronalabs.com/api/library/display/topStatusBarContentHeight.html

As for the touch part, I suggest you incorporate the “setFocus()” functionaltiy into your touch handler, along with your use of delta calculations and so forth, so that the user’s control on the group is persistent throughout and isn’t propagating over to any other object. You can see an example in the “Comprehensive” sub-section of the examples here:

https://docs.coronalabs.com/api/event/touch/index.html

Hope this helps,

Brent

Hello,

Thank you for the answer, I’m first trying to fix the scroll menu but it still moving too fast, here is what I wrote using self.focus:

 function backgroundTiles:touch(event) local deltaY if (event.phase == "began") then display.getCurrentStage():setFocus( self ) self.isFocus = true elseif(self.isFocus) then if (event.phase == "moved") then --moving backgroundtiles deltaY = event.y - event.yStart -- get the difference backgroundTiles:toBack() backgroundTiles.y = backgroundTiles.y + deltaY elseif (event.phase == "ended" or event.phase == "cancelled") then display.getCurrentStage():setFocus( nil ) self.isFocus = nil end end return true end

Hi, I can`t build it to Android, always reporting time-out error.

Any solution?

Hi,

Because the status bar (I assume you mean the OS-native status bar) varies between platform, you can better determine how much space is “remaining” by using the following two properties to calculate it. That should give you a better reflection of what 85% is.

https://docs.coronalabs.com/api/library/display/actualContentHeight.html

https://docs.coronalabs.com/api/library/display/topStatusBarContentHeight.html

As for the touch part, I suggest you incorporate the “setFocus()” functionaltiy into your touch handler, along with your use of delta calculations and so forth, so that the user’s control on the group is persistent throughout and isn’t propagating over to any other object. You can see an example in the “Comprehensive” sub-section of the examples here:

https://docs.coronalabs.com/api/event/touch/index.html

Hope this helps,

Brent

Hello,

Thank you for the answer, I’m first trying to fix the scroll menu but it still moving too fast, here is what I wrote using self.focus:

 function backgroundTiles:touch(event) local deltaY if (event.phase == "began") then display.getCurrentStage():setFocus( self ) self.isFocus = true elseif(self.isFocus) then if (event.phase == "moved") then --moving backgroundtiles deltaY = event.y - event.yStart -- get the difference backgroundTiles:toBack() backgroundTiles.y = backgroundTiles.y + deltaY elseif (event.phase == "ended" or event.phase == "cancelled") then display.getCurrentStage():setFocus( nil ) self.isFocus = nil end end return true end

Hi, I can`t build it to Android, always reporting time-out error.

Any solution?