I have completed my project finally. But I need inputs for android. How can I make a UI like attached picture? I need to get input of 4 numbers. Thanks in advance.
That’s not very difficult, just create a table of each of the squares x and y values, and then use a for loop to create them.
Here is a sample code that might do what you want. This is just one of many ways to do the same thing. Probably better. more efficient ways, but this way works. Hopefully it will be good to learn from.
local w = display.contentWidth local h = display.contentHeight local horzMargin = w \* .10 local vertMargin = h \* .20 local horzSpace = 1 local vertSpace = 1 local horzCnt = 5 local vertCnt = 4 local cellWidth = (w - (horzMargin \* 2)) / horzCnt local cellHeight = cellWidth local grid = display.newGroup() local posX = cellWidth \* .5 local posY = cellHeight \* .5 local horzCursor = 0 local cellCnt = 0 local inputCnt = 0 local inputTotal = 0 local resultText local resetButton local resetText local function onCellTouch(e) if e.phase == "ended" then if inputCnt \< 4 and e.target.alpha == 1 then e.target.alpha = .5 inputTotal = inputTotal + e.target.id inputCnt = inputCnt + 1 resultText.text = inputTotal if inputCnt == 4 then resultText:setFillColor(.7, .1, .1) end end end end local function resetGrid(e) if e.phase == "began" then e.target.alpha = .5 elseif e.phase == "ended" then for i = 1, grid.numChildren do grid[i].alpha = 1 end resultText:setFillColor(1) inputTotal = 0 inputCnt = 0 resultText.text = "---" e.target.alpha = 1 end end for i = 1, vertCnt do horzCursor = horzCursor + 1 for ii = 1, horzCnt do local cell, cellRect, cellText cellCnt = cellCnt + 1 cell = display.newContainer(cellWidth, cellHeight) cellRect = display.newRect(0, 0, cellWidth, cellHeight) cellRect:setFillColor(.7, .1, .1) cellText = display.newText(cellCnt, 0, 0, nil, 24) cellText:setFillColor(0) cell:insert(cellRect) cell:insert(cellText) grid:insert(cell) cell.x = posX cell.y = posY cell:addEventListener("touch", onCellTouch) cell.id = cellCnt posX = posX + cellWidth + horzSpace end posX = cellWidth \* .5 posY = posY + cellHeight + vertSpace end -- center the 'grid' on the screen grid.x = (w \* .5) - (grid.width \* .5) grid.y = (h \* .5) - (grid.height \* .5) resultText = display.newText("---", w \* .5, 30, nil, 32) resetButton = display.newRect(w \* .5, h - 30, w \* .25, h \* .1) resetButton:setFillColor(.5, .5, .5) resetButton:addEventListener("touch", resetGrid) resetText = display.newText("RESET", resetButton.x, resetButton.y, nil, 24)
Best of luck on your project.
Bob
That’s not very difficult, just create a table of each of the squares x and y values, and then use a for loop to create them.
Here is a sample code that might do what you want. This is just one of many ways to do the same thing. Probably better. more efficient ways, but this way works. Hopefully it will be good to learn from.
local w = display.contentWidth local h = display.contentHeight local horzMargin = w \* .10 local vertMargin = h \* .20 local horzSpace = 1 local vertSpace = 1 local horzCnt = 5 local vertCnt = 4 local cellWidth = (w - (horzMargin \* 2)) / horzCnt local cellHeight = cellWidth local grid = display.newGroup() local posX = cellWidth \* .5 local posY = cellHeight \* .5 local horzCursor = 0 local cellCnt = 0 local inputCnt = 0 local inputTotal = 0 local resultText local resetButton local resetText local function onCellTouch(e) if e.phase == "ended" then if inputCnt \< 4 and e.target.alpha == 1 then e.target.alpha = .5 inputTotal = inputTotal + e.target.id inputCnt = inputCnt + 1 resultText.text = inputTotal if inputCnt == 4 then resultText:setFillColor(.7, .1, .1) end end end end local function resetGrid(e) if e.phase == "began" then e.target.alpha = .5 elseif e.phase == "ended" then for i = 1, grid.numChildren do grid[i].alpha = 1 end resultText:setFillColor(1) inputTotal = 0 inputCnt = 0 resultText.text = "---" e.target.alpha = 1 end end for i = 1, vertCnt do horzCursor = horzCursor + 1 for ii = 1, horzCnt do local cell, cellRect, cellText cellCnt = cellCnt + 1 cell = display.newContainer(cellWidth, cellHeight) cellRect = display.newRect(0, 0, cellWidth, cellHeight) cellRect:setFillColor(.7, .1, .1) cellText = display.newText(cellCnt, 0, 0, nil, 24) cellText:setFillColor(0) cell:insert(cellRect) cell:insert(cellText) grid:insert(cell) cell.x = posX cell.y = posY cell:addEventListener("touch", onCellTouch) cell.id = cellCnt posX = posX + cellWidth + horzSpace end posX = cellWidth \* .5 posY = posY + cellHeight + vertSpace end -- center the 'grid' on the screen grid.x = (w \* .5) - (grid.width \* .5) grid.y = (h \* .5) - (grid.height \* .5) resultText = display.newText("---", w \* .5, 30, nil, 32) resetButton = display.newRect(w \* .5, h - 30, w \* .25, h \* .1) resetButton:setFillColor(.5, .5, .5) resetButton:addEventListener("touch", resetGrid) resetText = display.newText("RESET", resetButton.x, resetButton.y, nil, 24)
Best of luck on your project.
Bob