Adding a table of objects to a scene

[balloonknot]

I’m using a modified version of this persons GridView https://github.com/worldstar/GridView-for-Corona-SDK

Inside of my scene:create I add a grid of button widgets

<lua>

gridView:new(screenLeft, screenTopSB + titleBarHeight + 250, photoArray, photoTextArray, 2, 1, 1, (screenWidth / 2) - 1, 110, gridListener)

</lua>

Being a newb, I expect to be able to add a local reference to the result of the new function above and add that local instance to my sceneGroup, so the buttons will be removed when I leave the scene.  Instead I get the error below.  How can I add my 4 button to the sceneGroup or otherwise go about hiding / removing them when changing scenes?

I also tried the code below. No errors, but the buttons remain on the screen after scene change

<lua>

gridView:new(screenLeft, screenTopSB + titleBarHeight + 250, photoArray, photoTextArray, 2, 1, 1, (screenWidth / 2) - 1, 110, gridListener)

        

        for i = 1, #gridView do

            sceneGroup:insert( gridView[i] )

        end

</lua>

[cyberparkstudios]

I wil try to help here if I can.  Since you stated you are a ‘newb’, I have added a few links you could check out that might help in the learning process.  By just doing a quick google search for :

‘corona grid tutorial’ 

there were several links that look promising to learn from.  Although I did not read any of them, I am sure if you take time to read and understand them you will make great progress in learning this stuff.  It will take time, but that is the only way to get a understanding of what is going on in the code.

Here are just 2 of the links I note from the search, but there seemed to be others, so try to do a google search:

https://coronalabs.com/blog/2015/04/07/tutorial-working-with-a-grid-layout/

https://www.youtube.com/watch?v=MxwTZrb-W8A

Meanwhile, Corona’s API has changed a bit over the years, and some of the examples you find on the internet may be dated.  For instance in the sample you are using the setTextColor() is no longer used…  instead setFillColor is used, and the arguments/parameters are not integers, such as 255, 255, 255  but rather number between 0 - 1  ie…  {.04, .75, .13}  would give you some green type color.

So I put together something more like what I would use, and if you ask another 5 devs, you would get similar but not exact examples,  Most all work, as there are many different ways to do the same thing. I actually would do this a little differently then even the sample I quickly typed up, but I did not have a a lot of time to do a more efficient method.  this method shown below is just one way, and I tried to keep as much of the original sample you were using in tac.

This just uses main.lua and the gridView module … I guess you are using composer for scenes, so you will have to require the gridView module into whatever scene you are needing it for.

main.lua

--Include the gridView library local GridView = require("gridView") local photoTextArray = {"pic1","pic2","pic3","pic4","pic5"} --Process the event when user clicks on a grid button or image local function onGridTouch(e) if e.phase == "ended" then print(" grid btn touched " .. e.target.name) end end local gridView = GridView.new({items = photoTextArray, cellWidth = 150, cellHeight = 150, padX = 30, padY = 40, gridListener = onGridTouch, columnLimit = 3}) -- NOTE .. sceneGroup here is a display group in main .. representing a scene view group in composer scene local sceneGroup = display.newGroup() -- insert the gridview displayGroup 'grp' into the scene view sceneGroup:insert(gridView.grp) -- position the gridview display group in center of screen gridView.grp.x = display.contentCenterX - (gridView.grp.width \* .5) gridView.grp.y = display.contentCenterY - (gridView.grp.height \* .5)

gridView module

-- gridView local widget = require("widget") local M = {} function M.new( params ) local self = { } local items = params.items or {} local padX = params.padX or 50 local padY = params.padY or 50 local cellWidth = params.cellWidth or 40 local cellHeight = params.cellHeigt or 40 local columnLimit = params.columnLimit or 4 local gridListener = params.gridListener local currentX = 0 local currentY = 0 local textObjects = display.newGroup() self.grp = display.newGroup() -- CREATE THE BUTTONS FOR THE GRID; STORE THEM IN A DISPLAY GROUP for i = 1, #items do local btn = widget.newButton{ defaultFile = "assets/" .. items[i] .. ".png", overFile = "assets/" .. items[i] .. "\_Dn.png", width = cellWidth, height = cellHeight, onEvent = gridListener } btn.name = items[i] self.grp:insert(btn) end -- 'POSITION' THE BUTTONS IN THE DISPLAY GROUP, AND ADD A TEXT OBJECT UNDER EACH IMAGE/BUTTON local function drawGrid() local currentX = (cellWidth \* .5) + padX local currentY = (cellHeight \* .5) + padY for i = 1, self.grp.numChildren do local fontSize = 22 self.grp[i].x = currentX self.grp[i].y = currentY textObjects:insert(display.newText( items[i], currentX, currentY, native.systemFontBold, fontSize )) textObjects[i]:setFillColor( .9, .9, .9) textObjects[i].x = self.grp[i].x textObjects[i].y = self.grp[i].y + (self.grp[i].height \* .5) + (textObjects[i].height \* .5) if(i % columnLimit == 0) then currentX = cellWidth + padX currentY = currentY + cellHeight + padY else currentX = currentX + cellWidth + padX end end -- now insert the text object group, into the self.grp, and it will be on top of the images, -- all together in one displayGroup accesible in whatever scene or module you create a gridView in self.grp:insert(textObjects) end drawGrid() return self end return M 

Hope this helps:

Bob

[cyberparkstudios]

of course, for the sample I sent to work, you will need a assets folder holding the 5 pics (pic1, pic2, etc…) and 5 pics for the ‘button pressed down’ look for each of the  ‘pic1_Dn.png, pic2_Dn.png’ etc.)  you can use any images you want, it is just the button objects are set in this sample to have 2 images, one for the non-pressed state and one for the ‘pressed’ state.

Best of luck.

Bob 

[cyberparkstudios]

I wil try to help here if I can.  Since you stated you are a ‘newb’, I have added a few links you could check out that might help in the learning process.  By just doing a quick google search for :

‘corona grid tutorial’ 

there were several links that look promising to learn from.  Although I did not read any of them, I am sure if you take time to read and understand them you will make great progress in learning this stuff.  It will take time, but that is the only way to get a understanding of what is going on in the code.

Here are just 2 of the links I note from the search, but there seemed to be others, so try to do a google search:

https://coronalabs.com/blog/2015/04/07/tutorial-working-with-a-grid-layout/

https://www.youtube.com/watch?v=MxwTZrb-W8A

Meanwhile, Corona’s API has changed a bit over the years, and some of the examples you find on the internet may be dated.  For instance in the sample you are using the setTextColor() is no longer used…  instead setFillColor is used, and the arguments/parameters are not integers, such as 255, 255, 255  but rather number between 0 - 1  ie…  {.04, .75, .13}  would give you some green type color.

So I put together something more like what I would use, and if you ask another 5 devs, you would get similar but not exact examples,  Most all work, as there are many different ways to do the same thing. I actually would do this a little differently then even the sample I quickly typed up, but I did not have a a lot of time to do a more efficient method.  this method shown below is just one way, and I tried to keep as much of the original sample you were using in tac.

This just uses main.lua and the gridView module … I guess you are using composer for scenes, so you will have to require the gridView module into whatever scene you are needing it for.

main.lua

--Include the gridView library local GridView = require("gridView") local photoTextArray = {"pic1","pic2","pic3","pic4","pic5"} --Process the event when user clicks on a grid button or image local function onGridTouch(e) if e.phase == "ended" then print(" grid btn touched " .. e.target.name) end end local gridView = GridView.new({items = photoTextArray, cellWidth = 150, cellHeight = 150, padX = 30, padY = 40, gridListener = onGridTouch, columnLimit = 3}) -- NOTE .. sceneGroup here is a display group in main .. representing a scene view group in composer scene local sceneGroup = display.newGroup() -- insert the gridview displayGroup 'grp' into the scene view sceneGroup:insert(gridView.grp) -- position the gridview display group in center of screen gridView.grp.x = display.contentCenterX - (gridView.grp.width \* .5) gridView.grp.y = display.contentCenterY - (gridView.grp.height \* .5)

gridView module

-- gridView local widget = require("widget") local M = {} function M.new( params ) local self = { } local items = params.items or {} local padX = params.padX or 50 local padY = params.padY or 50 local cellWidth = params.cellWidth or 40 local cellHeight = params.cellHeigt or 40 local columnLimit = params.columnLimit or 4 local gridListener = params.gridListener local currentX = 0 local currentY = 0 local textObjects = display.newGroup() self.grp = display.newGroup() -- CREATE THE BUTTONS FOR THE GRID; STORE THEM IN A DISPLAY GROUP for i = 1, #items do local btn = widget.newButton{ defaultFile = "assets/" .. items[i] .. ".png", overFile = "assets/" .. items[i] .. "\_Dn.png", width = cellWidth, height = cellHeight, onEvent = gridListener } btn.name = items[i] self.grp:insert(btn) end -- 'POSITION' THE BUTTONS IN THE DISPLAY GROUP, AND ADD A TEXT OBJECT UNDER EACH IMAGE/BUTTON local function drawGrid() local currentX = (cellWidth \* .5) + padX local currentY = (cellHeight \* .5) + padY for i = 1, self.grp.numChildren do local fontSize = 22 self.grp[i].x = currentX self.grp[i].y = currentY textObjects:insert(display.newText( items[i], currentX, currentY, native.systemFontBold, fontSize )) textObjects[i]:setFillColor( .9, .9, .9) textObjects[i].x = self.grp[i].x textObjects[i].y = self.grp[i].y + (self.grp[i].height \* .5) + (textObjects[i].height \* .5) if(i % columnLimit == 0) then currentX = cellWidth + padX currentY = currentY + cellHeight + padY else currentX = currentX + cellWidth + padX end end -- now insert the text object group, into the self.grp, and it will be on top of the images, -- all together in one displayGroup accesible in whatever scene or module you create a gridView in self.grp:insert(textObjects) end drawGrid() return self end return M 

Hope this helps:

Bob

[cyberparkstudios]

of course, for the sample I sent to work, you will need a assets folder holding the 5 pics (pic1, pic2, etc…) and 5 pics for the ‘button pressed down’ look for each of the  ‘pic1_Dn.png, pic2_Dn.png’ etc.)  you can use any images you want, it is just the button objects are set in this sample to have 2 images, one for the non-pressed state and one for the ‘pressed’ state.

Best of luck.

Bob