How to center text within a group

[sidermaniac]

Hello. I am totally new to Corona. 

Given the following code, I would like to center the menu items but not the line.

But if I use group_menu.x = display.contentCenterX the line is also centered.  

How do I center just the menu items? 

Any other code improving tips would be welcome as well.  

local group\_title = display.newGroup() local title = display.newText( "TITLE", 0, 0, native.systemFont, 16 ) title.x = display.contentCenterX title.y = 0 title:setFillColor( 0, .7, 0 ) title.anchorX = .5 local title\_line = display.newLine(0, 16, display.contentWidth, 16) title\_line.anchorX = 0 group\_title.anchorX = 0 group\_title.anchorY = 0 group\_title.anchorChildren = true group\_title:insert(title) group\_title:insert(title\_line) local group\_menu = display.newGroup() local menu\_file = display.newText("File", 0,0,native.systemFont,16) menu\_file.anchorX = 0 menu\_file.x = 10 menu\_file.y = 0 menu\_file:setFillColor( .8, .3, 0 ) local menu\_windows = display.newText("Wins", 0,0,native.systemFont,16) menu\_windows.anchorX = 0 menu\_windows.x = menu\_file.x + 40 menu\_windows.y = 0 menu\_windows:setFillColor( .8, .3, 0 ) local menu\_doors = display.newText("Doors", 0,0,native.systemFont,16) menu\_doors.anchorX = 0 menu\_doors.x = menu\_windows.x + 50 menu\_doors.y = 0 menu\_doors:setFillColor( .8, .3, 0 ) local menu\_base = display.newText("Base", 0,0,native.systemFont,16) menu\_base.anchorX = 0 menu\_base.x = menu\_doors.x + 55 menu\_base.y = 0 menu\_base:setFillColor( .8, .3, 0 ) local menu\_misc = display.newText("Misc", 0,0,native.systemFont,16) menu\_misc.anchorX = 0 menu\_misc.x = menu\_base.x + 50 menu\_misc.y = 0 menu\_misc:setFillColor( .8, .3, 0 ) local menu\_line = display.newLine(0, 16, display.contentWidth, 16) menu\_line.anchorX = 0 group\_menu:insert(menu\_file) group\_menu:insert(menu\_windows) group\_menu:insert(menu\_doors) group\_menu:insert(menu\_base) group\_menu:insert(menu\_misc) group\_menu:insert(menu\_line) group\_menu.anchorX = .5 group\_menu.x = 0 group\_menu.y = group\_title.y + 40

[roaminggamer]

Groups don’t really have a center.  They adjust size as needed.

I think what you really means is, “How do I find the bounds and centroid of all the content in a group?”

https://github.com/roaminggamer/RG_FreeStuff/raw/master/AskEd/2018/05/groupCenter.zip

local cx = display.contentCenterX local cy = display.contentCenterY local fullw = display.actualContentWidth local fullh = display.actualContentHeight local mRand = math.random local group = display.newGroup() local min = mRand(100, 300) local max = mRand(100, 300) for i = 1, 50 do local tmp = display.newCircle( group, cx + mRand( -min, max ), cy + mRand( -min, max), 10 ) tmp:setFillColor( 0, mRand(10,100)/100, mRand(10,100)/100 ) end local function findGroupBounds( g ) local gBounds = { xMin = math.huge, xMax = -math.huge, yMin = math.huge, yMax = -math.huge } for i = 1, g.numChildren do local bounds = g[i].contentBounds gBounds.xMin = (gBounds.xMin \< bounds.xMin) and gBounds.xMin or bounds.xMin gBounds.xMax = (gBounds.xMax \> bounds.xMax) and gBounds.xMax or bounds.xMax gBounds.yMin = (gBounds.yMin \< bounds.yMin) and gBounds.yMin or bounds.yMin gBounds.yMax = (gBounds.yMax \> bounds.yMax) and gBounds.yMax or bounds.yMax end return gBounds end local gBounds = findGroupBounds( group ) local groupCenterX = gBounds.xMin + (gBounds.xMax - gBounds.xMin)/2 local groupCenterY = gBounds.yMin + (gBounds.yMax - gBounds.yMin)/2 local tmp = display.newCircle( groupCenterX, groupCenterY, 10) tmp:setFillColor(1,0,0) local edges = display.newRect( groupCenterX, groupCenterY, (gBounds.xMax - gBounds.xMin), (gBounds.yMax - gBounds.yMin) ) edges:setFillColor(0,0,0,0) edges:setStrokeColor(1,0,0) edges.strokeWidth = 4

https://www.youtube.com/watch?v=1wBReolU22k&feature=youtu.be

[roaminggamer]

If you are talking about placing objects relative to the screen, then use the screen bounds.

Display groups are merely content containers that help you layer things nicely and group them (thus the name).,

[roaminggamer]

Also, can you clarify what you mean by center?  

(I know it sounds stupid, but your idea of center and mine might be different.)

I’ve run your code and it looks OK to me. 

Maybe draw a picture showing what centered means to you.  

Also, what device are you simulating?  What are your config settings. all this matters.

[roaminggamer]

I dropped your code into my ‘question answering’ harness and it looks and behaves OK.

https://github.com/roaminggamer/RG_FreeStuff/raw/master/AskEd/2018/05/centeringMenu.zip

You are not accounting for the true left, right, top, bottom of the screen nor the  actual content width, but it is a good start.

You can calculate/determine all that from here:

• https://docs.coronalabs.com/api/library/display/index.html
  • https://docs.coronalabs.com/api/library/display/contentCenterX.html
  • https://docs.coronalabs.com/api/library/display/contentCenterY.html
  • https://docs.coronalabs.com/api/library/display/actualContentWidth.html
  • https://docs.coronalabs.com/api/library/display/actualContentHeight.html
  • https://docs.coronalabs.com/api/library/display/screenOriginX.html
  • https://docs.coronalabs.com/api/library/display/screenOriginY.html

[sidermaniac]

Thanks for the replies.  

In the picture you can see that the menu is offset to the left. I would prefer that the menu be centered. 

I am using samsung s5 1080x1920. 

In the display group are the individual menu items like File and Wins.  I also added the line to the group. So when I center the group using group_menu.x = display.contentCenterX the menu is centered nicely but the line becomes offset (as expected).  

I don’t think I can do what I want the way I have it set up now.   

So maybe if you can answer these questions instead:  

1. I am drawing lines just to give visual separation. Should I be adding these lines to the group?

2. Do the lines I am drawing need a variable? They serve no purpose other than eye candy. 

3. I have been reading a lot of forum threads trying to get a feel for proper coding style. One of them stated that new users should not use the composer library until they understand how things work. But it seems to me that this library would greatly ease paging and menu-ing . What do you recommend? 

Thanks. 

PS: This is an excellent development system. I am very impressed. 

[rob]

Corona’s display.newText() API supports setting a width for the returned text object. Once you have set a width, you can set an alignment within that width. So you could set the text width to be the same width as your line and then center the text within it’s box.

But that may be over thinking things. An even simpler approach would be to not position the group at all and just use display.contentCenterX to position the text items and the line and leave their anchorX’s at 0.5 instead of changing them to 0.

Remember that by default all Corona display objects draw from their center. Even if you want to move the group, the default X for the group is 0, so you can draw your object’s .x at 0, then center the group.

Rob

[roaminggamer]

Groups don’t really have a center.  They adjust size as needed.

I think what you really means is, “How do I find the bounds and centroid of all the content in a group?”

https://github.com/roaminggamer/RG_FreeStuff/raw/master/AskEd/2018/05/groupCenter.zip

local cx = display.contentCenterX local cy = display.contentCenterY local fullw = display.actualContentWidth local fullh = display.actualContentHeight local mRand = math.random local group = display.newGroup() local min = mRand(100, 300) local max = mRand(100, 300) for i = 1, 50 do local tmp = display.newCircle( group, cx + mRand( -min, max ), cy + mRand( -min, max), 10 ) tmp:setFillColor( 0, mRand(10,100)/100, mRand(10,100)/100 ) end local function findGroupBounds( g ) local gBounds = { xMin = math.huge, xMax = -math.huge, yMin = math.huge, yMax = -math.huge } for i = 1, g.numChildren do local bounds = g[i].contentBounds gBounds.xMin = (gBounds.xMin \< bounds.xMin) and gBounds.xMin or bounds.xMin gBounds.xMax = (gBounds.xMax \> bounds.xMax) and gBounds.xMax or bounds.xMax gBounds.yMin = (gBounds.yMin \< bounds.yMin) and gBounds.yMin or bounds.yMin gBounds.yMax = (gBounds.yMax \> bounds.yMax) and gBounds.yMax or bounds.yMax end return gBounds end local gBounds = findGroupBounds( group ) local groupCenterX = gBounds.xMin + (gBounds.xMax - gBounds.xMin)/2 local groupCenterY = gBounds.yMin + (gBounds.yMax - gBounds.yMin)/2 local tmp = display.newCircle( groupCenterX, groupCenterY, 10) tmp:setFillColor(1,0,0) local edges = display.newRect( groupCenterX, groupCenterY, (gBounds.xMax - gBounds.xMin), (gBounds.yMax - gBounds.yMin) ) edges:setFillColor(0,0,0,0) edges:setStrokeColor(1,0,0) edges.strokeWidth = 4

https://www.youtube.com/watch?v=1wBReolU22k&feature=youtu.be

[roaminggamer]

If you are talking about placing objects relative to the screen, then use the screen bounds.

Display groups are merely content containers that help you layer things nicely and group them (thus the name).,

[roaminggamer]

Also, can you clarify what you mean by center?  

(I know it sounds stupid, but your idea of center and mine might be different.)

I’ve run your code and it looks OK to me. 

Maybe draw a picture showing what centered means to you.  

Also, what device are you simulating?  What are your config settings. all this matters.

[roaminggamer]

I dropped your code into my ‘question answering’ harness and it looks and behaves OK.

https://github.com/roaminggamer/RG_FreeStuff/raw/master/AskEd/2018/05/centeringMenu.zip

You are not accounting for the true left, right, top, bottom of the screen nor the  actual content width, but it is a good start.

You can calculate/determine all that from here:

• https://docs.coronalabs.com/api/library/display/index.html
  • https://docs.coronalabs.com/api/library/display/contentCenterX.html
  • https://docs.coronalabs.com/api/library/display/contentCenterY.html
  • https://docs.coronalabs.com/api/library/display/actualContentWidth.html
  • https://docs.coronalabs.com/api/library/display/actualContentHeight.html
  • https://docs.coronalabs.com/api/library/display/screenOriginX.html
  • https://docs.coronalabs.com/api/library/display/screenOriginY.html

[sidermaniac]

Thanks for the replies.  

In the picture you can see that the menu is offset to the left. I would prefer that the menu be centered. 

I am using samsung s5 1080x1920. 

In the display group are the individual menu items like File and Wins.  I also added the line to the group. So when I center the group using group_menu.x = display.contentCenterX the menu is centered nicely but the line becomes offset (as expected).  

I don’t think I can do what I want the way I have it set up now.   

So maybe if you can answer these questions instead:  

1. I am drawing lines just to give visual separation. Should I be adding these lines to the group?

2. Do the lines I am drawing need a variable? They serve no purpose other than eye candy. 

3. I have been reading a lot of forum threads trying to get a feel for proper coding style. One of them stated that new users should not use the composer library until they understand how things work. But it seems to me that this library would greatly ease paging and menu-ing . What do you recommend? 

Thanks. 

PS: This is an excellent development system. I am very impressed. 

[rob]

Corona’s display.newText() API supports setting a width for the returned text object. Once you have set a width, you can set an alignment within that width. So you could set the text width to be the same width as your line and then center the text within it’s box.

But that may be over thinking things. An even simpler approach would be to not position the group at all and just use display.contentCenterX to position the text items and the line and leave their anchorX’s at 0.5 instead of changing them to 0.

Remember that by default all Corona display objects draw from their center. Even if you want to move the group, the default X for the group is 0, so you can draw your object’s .x at 0, then center the group.

Rob