tableView Widget not responsive on device build

AppOwlDev · October 22, 2014, 10:23pm

On the emulator, I have no issues with this widget at all. In fact it works very smoothly.

When I build to my new testing device (a BLUE HD) the tableView is super unresponsive. When I swipe, it scrolls a little bit, then gets jerky, and just stops being responsive completely in a total 3ish seconds.

I only have 8 rows, and each row has a 56 by 56 newImageRect object and that’s it.

There are no messages/errors appearing in the Output window.

bjsorrentino · October 22, 2014, 10:36pm

Hi AppOwlDev,

Without seeing your code, I’m guessing that this is related to text rendering performance. Please see the Porting guide on details and potential workarounds:

http://docs.coronalabs.com/daily/coronacards/wp8/portapp.html

Take care,

Brent

AppOwlDev · October 22, 2014, 10:44pm

I don’t have any text. The entire scene is a newRec as a background. 2 simple newImageRect as a logo and facebook icon, and the tableView with each row having a small newImageRect

I studied the porting guide and understand about the issue with the display.newText (I’ve commented them all out until I implement the bitmap fix).

Here is the code:

local function onRowRender( event ) -- Get reference to the row group local row = event.row local buttons = event.row.params.buttons --local labels = event.row.params.labels local icon, label -- Cache the row "contentWidth" and "contentHeight" because the row bounds can change as children objects are added local rowHeight = row.contentHeight local rowWidth = row.contentWidth icon = display.newImageRect(row, buttons, 56, 56) icon.anchorX = 0 icon.x = 0 icon.y = rowHeight \* 0.5 --label = display.newText( { parent = row, text = labels, 0, 0, font = BerlinSansFB, fontSize = 20, width = 100}) --label.anchorX = 0 --label.x = icon.x + icon.contentWidth + 10 --label.y = rowHeight \* 0.5 --label:setFillColor(0.15, 0.4, 0.729, 0.90) return true end function scene:create( event ) local sceneGroup = self.view --BerlinSansFB = "BerlinSansFB-Reg.tff#Berlin Sans FB" myData.inch = false going = {} going.num = 1 back = display.newRect( sceneGroup, display.contentCenterX, display.contentCenterY, display.contentWidth, display.contentHeight ) backEdgeX = back.contentBounds.xMin backEdgeY = back.contentBounds.yMin Runtime:addEventListener( "key", onKeyEvent ) logo = display.newImageRect(sceneGroup, "Images/title.png", 175, 100) logo.x = backEdgeX + 10 logo.anchorX = 0 logo.anchorY = 0.5 logo.y = logo.contentHeight / 2 + 40 topBar = display.newRect( sceneGroup, 0, 0, display.contentWidth, 30 ) topBar:setFillColor(0.15, 0.4, 0.729, 0.75) topBar.anchorX = 0 topBar.anchorY = 0 facebookButt = display.newImageRect(sceneGroup, "Images/facebook.png", 42, 42) facebookButt.anchorX = 0 facebookButt.anchorY = 0.5 facebookButt.x = logo.x facebookButt.y = logo.y \* 2 facebookButt:addEventListener ( "touch", goingFacebook ) butTable = {} labelTable = {} butTable[1] = "Images/rightMenu.png" butTable[2] = "Images/obliqueMenu.png" butTable[3] = "Images/sineMenu.png" butTable[4] = "Images/boltMenu.png" butTable[5] = "Images/speedMenu.png" butTable[6] = "Images/counterButt.png" butTable[7] = "Images/chartMenu.png" butTable[8] = "Images/mattButt.png" menuList = widget.newTableView{ left = logo.x + logo.contentWidth + 10, top = topBar.contentHeight, width = display.contentWidth - (logo.x + logo.contentWidth + 10) - 10, height = display.contentHeight - topBar.contentHeight, --onRowTouch = onRowTouch, onRowRender = onRowRender, hideScrollBar = false, noLines = true, } sceneGroup:insert(menuList) for i = 1, #butTable, 1 do local isCategory = false local rowHeight = 65 local rowColor = { default={ 1, 1, 1 }, over={ 0.15, 0.4, 0.729, 0.2 } } local lineColor = { 0.15, 0.4, 0.729 } menuList:insertRow( { isCategory = isCategory, rowHeight = rowHeight, rowColor = rowColor, lineColor = lineColor, params = { buttons = butTable[i] } } ) end end

However I did just notice that the output window is occasionally spitting out the following line (every minute or so?) while the app just sits open:

The thread 0x8c8 has exited with code 259 (0x103)

The bolded part is a different 0xXXX every time. However this happens with the emulator as well, and as I mentioned the emulator works perfectly.

Joshua_Quick · October 23, 2014, 12:27am

The message you are seeing in Visual Studio…

“The thread 0x8c8 has exited with code 259 (0x103)”

…is nothing to worry about. Those are not errors. The Visual Studio debugger is just letting you know that a background thread has just finished doing its work. For example, if you use Corona’s network.request() API, you’ll see a message like this when the network request finishes, because it’s a threaded operation.

Regarding your performance issue, so far, I haven’t been able to reproduce it. I’ve modified our “Interface\WidgetDemo” sample project and replaced the TableView’s row items with calls to display.newImageRect() instead of display.newText() in the onRowRender listener. I’m getting smooth 60 FPS scrolling performance on a Lumia 620 device, which is considered a low-end device.

Are you sure you don’t have a rogue Lua listener somewhere, such as an “enterFrame” or “touch” listener, that is updating text? Like Brent said, text bitmap generation is by far the biggest performance killer on WP8.

If you’re positive that it’s not a text issue, then would you mind sending me a sample project that can reproduce this issue please? You can do so by clicking the “Report a Bug” link at the top of this web page. From there, you can zip up and attach your project to the bug report. I’ll need your images too (this will reduce the time for me to look into this issue). Also, please reference this forum thread and my name (Joshua Quick) so that our tech-support team can send it my way.

Thanks in advance.

Joshua_Quick · October 23, 2014, 1:01am

Also, Visual Studio’s debugger can introduce a bit of a performance hit as well. Especially if you are using print() statements in Lua. Not as severe as what you are noting, but it’s definitely noticeable.

AppOwlDev · October 25, 2014, 1:01am

Hi Joshua, I just sent in a bug report with a smaller version of my app that reproduces the issue. The case number is 36639

I have tried a couple of things as well, including taking out everything in each row and literally rendering 8 empty rows and the widget is still super laggy and/or unresponsive (I can tell by seeing the scroll bar move).

I guess it might just be the BLU HD Phone I have, it’s a relatively new model, since it works fine in the emulators. But it’s the only physical device I have to test with.

Joshua_Quick · October 25, 2014, 1:31am

I just tested your app now on a Lumia 620 and Lumia 920. The performance was pretty good on both. So, I’m thinking that perhaps this is only a performance issue with the BLU HD device you have, such as a slow I/O read speed.

One possible solution to this would be to pre-load your TableView’s images via an ImageSheet. This way, when a row scrolls out of bounds, its image/texture won’t be removed from memory. That is, the display object will be removed when scrolled off the screen, but the ImageSheet that contains the image will still be in memory so that your app won’t have to re-load the image from file again later. This of course assumes that the issue you’re dealing with here is slow file reads.

One more thing, I’ve noticed that your bitmap text is not rendering quite right on my 480x800 device. The text is getting clipped and the characters are blurry. If you run your app via the “WVGA” emulator, you’ll see what I’m talking about.

Joshua_Quick · October 25, 2014, 2:18am

Before committing to using ImageSheets, try this…

Replace the following code in your app…

 butTable[1] = "Images/rightMenu.png" butTable[2] = "Images/obliqueMenu.png" butTable[3] = "Images/sineMenu.png" butTable[4] = "Images/boltMenu.png" butTable[5] = "Images/speedMenu.png" butTable[6] = "Images/counterButt.png" butTable[7] = "Images/chartMenu.png" butTable[8] = "Images/mattButt.png"

…with this…

 butTable[1] = "Images/rightMenu.png" butTable[2] = "Images/rightMenu.png" butTable[3] = "Images/rightMenu.png" butTable[4] = "Images/rightMenu.png" butTable[5] = "Images/rightMenu.png" butTable[6] = "Images/rightMenu.png" butTable[7] = "Images/rightMenu.png" butTable[8] = "Images/rightMenu.png"

The idea is to prevent the TableView from re-loading an image file when scrolling to prove that your BLU HD has slow file I/O. Since the above test is set up to use the same image for all rows, Corona will not re-load an image from file if that same image is already displayed on screen. That is, Corona is smart enough not to load the same image twice.

AppOwlDev · October 25, 2014, 3:02am

Hi Joshua,

The bitmap text is still something I’m working on. I’m trying to figure out how to make bmGlyph and Font-Manager work together properly.

I did the test you suggested and and have the exact same issue. As I mentioned even if I remove both the images and bitmap texts from the rows and have them render completely empty it doesn’t make a difference.

AppOwlDev · October 25, 2014, 10:08pm

I found the issue. After downloading some other apps and just playing around with the phone in general I noticed a similar lag with the touch screen in other areas/apps… but only sometimes.

So I did some more research and found a user review on reddit where the guy makes note that the touch screen is much less responsive when the phone is charging/plugged in!

So I did a full debug build of my project so I could try out my app without it being plugged in and sure enough it works perfectly.

So just a note to anyone else that decides to use the BLU HD WIndows Phone. It’s an awesome phone… just not while it’s plugged in to USB.

Joshua_Quick · October 26, 2014, 4:03pm

Oh… wow… nice find. And what a relief too. I was really scratching me head on this one.

bjsorrentino · October 22, 2014, 10:36pm