Showing items in a scrollView. A delay problem.

[alberto1]

Hi!

I use a scrollView object wich contains a list of items I want to show as I insert them into the scrollView.

You can see in this video the delay between I start getting the items and the items are showed.

This delay is even greater in the device.

In the console you can see each time I get an item but it still is not shown in the scrollView.

The db is located into documentsDirectory, so I figured out the results must appear very fast…

 

[sharedmedia=core:attachments:80]

This is the code that do it.

local function myScroll(theItems) local items = theItems local i scrollViewDer.x = 320 scrollViewDer.y = 197 scrollViewDer:insert(grupoScrollDer) for i=1,#items do for each\_item in db:nrows("SELECT nombre,categoria,calle FROM hoteles WHERE id="..items[i]) do local grupoPestanaHotel = display.newGroup() local fondo\_pestana\_hotel = widget.newButton{ id = items[i], width = 704, height = 132, default = ruta\_imaxes.."fondo\_pestana\_hotel.png", onEvent = accionElixeHotel, } fondo\_pestana\_hotel:setReferencePoint(display.TopLeftReferencePoint) fondo\_pestana\_hotel.x = 0; fondo\_pestana\_hotel.y = 0 grupoPestanaHotel:insert(fondo\_pestana\_hotel) grupoPestanaHotel.x = 0 grupoPestanaHotel.y = fondo\_pestana\_hotel.height \* (i-1) grupoScrollDer:insert(grupoPestanaHotel) for each\_photo in db:nrows("SELECT foto FROM fotos WHERE tabla='hoteles' AND orden=1 AND idTabla="..items[i]) do local arq = each\_photo.foto local foto\_establecemento = display.newImageRect(tostring(id\_catalogo).."/"..arq,system.DocumentsDirectory,117,82) foto\_establecemento:setReferencePoint(display.TopLeftReferencePoint) foto\_establecemento.x = 22 foto\_establecemento.y = 26 grupoPestanaHotel:insert(foto\_establecemento) end local j,jj local num\_estrelas = tonumber(each\_item.categoria) if num\_estrelas \< 6 and que\_vexo == "hoteis" then for j=1,num\_estrelas do local estrelina = display.newImageRect(ruta\_imaxes.."ilustracion\_estrella\_x.png",35,34) estrelina:setReferencePoint(display.TopLeftReferencePoint) estrelina.xScale = 0.65 estrelina.yScale = 0.65 estrelina.x = 156 + 17\*(j-1) estrelina.y = 17 grupoPestanaHotel:insert(estrelina) end elseif num\_estrelas \> 7 and num\_estrelas \< 11 and que\_vexo == "apartamentos" then for jj=1,num\_estrelas-7 do local chavina = display.newImageRect(ruta\_imaxes.."ilustracion\_llave\_x.png",39,40) chavina:setReferencePoint(display.TopLeftReferencePoint) chavina.xScale = 0.50 chavina.yScale = 0.50 chavina.x = 156 + 20\*(jj-1) chavina.y = 17 grupoPestanaHotel:insert(chavina) end end local nome\_hotel = display.newText(each\_item.nombre,158,36,346,0,"TitilliumWeb-Bold",18) nome\_hotel:setTextColor(102,102,102) grupoPestanaHotel:insert(nome\_hotel) local enderezo\_hotel = display.newText(each\_item.calle,158,86,346,0,"TitilliumWeb-Regular",15) enderezo\_hotel:setTextColor(102,102,102) grupoPestanaHotel:insert(enderezo\_hotel) local ids = {} for fileira\_servizos in db:nrows("SELECT idIcono FROM iconosHotel WHERE idHotel="..items[i]) do table.insert(ids,fileira\_servizos.idIcono) end local linha\_separadora = display.newImageRect(ruta\_imaxes.."linea\_separadorofertas\_x.png",704,2) linha\_separadora:setReferencePoint(display.TopLeftReferencePoint) linha\_separadora.x = 0 linha\_separadora.y = 132 grupoPestanaHotel:insert(linha\_separadora) end end end

[alberto1]

Nobody can help me to solve this problem?

[aukStudios]

Hi there,

My guess is that you’re simply running a lot of SQL queries and loading a lot of images, which won’t happen instantly.  But I think there’s an easy fix.

I notice that you’re inserting all of the images into a display group called grupoScrollDer, but then adding that group to the scroll view only after it’s fully loaded.  Instead, try adding it *before* you start to populate the scroll view.  That way, as soon as an image is loaded and ready, it will appear.

In addition, you may want to throttle your SQL queries and image loading.  By that I mean count how many you’ve done, and do no more than, say, 30 per frame.  You can use timer.performWithDelay to delay the additional queries and loading.  This way, at least the initial part of your scroll view will populate quickly, and the rest will continue loading shortly after.

• Andrew

[alberto1]

Hi Andrew!

Thanks a lot for your reply!
 

What you say about adding the group grupoScrollDer to my scrollview before I start to populate has sense for me.

I’ve tried changing this lines:

scrollViewDer.x = 320

scrollViewDer.y = 197

scrollViewDer:insert(grupoScrollDer)

from the bottom to the head (just before the for statement) but nothing changes…

And also the lines:

grupoPestanaHotel.x = 0

grupoPestanaHotel.y = fondo_pestana_hotel.height * (i-1)

grupoScrollDer:insert(grupoPestanaHotel)

Did you meant anything like this?

What you say in the last part of your reply also has sense, so I’m going to try and tell you.

[alberto1]

Nobody can help me to solve this problem?

[aukStudios]

Hi there,

My guess is that you’re simply running a lot of SQL queries and loading a lot of images, which won’t happen instantly.  But I think there’s an easy fix.

I notice that you’re inserting all of the images into a display group called grupoScrollDer, but then adding that group to the scroll view only after it’s fully loaded.  Instead, try adding it *before* you start to populate the scroll view.  That way, as soon as an image is loaded and ready, it will appear.

In addition, you may want to throttle your SQL queries and image loading.  By that I mean count how many you’ve done, and do no more than, say, 30 per frame.  You can use timer.performWithDelay to delay the additional queries and loading.  This way, at least the initial part of your scroll view will populate quickly, and the rest will continue loading shortly after.

• Andrew

[alberto1]

Hi Andrew!

Thanks a lot for your reply!
 

What you say about adding the group grupoScrollDer to my scrollview before I start to populate has sense for me.

I’ve tried changing this lines:

scrollViewDer.x = 320

scrollViewDer.y = 197

scrollViewDer:insert(grupoScrollDer)

from the bottom to the head (just before the for statement) but nothing changes…

And also the lines:

grupoPestanaHotel.x = 0

grupoPestanaHotel.y = fondo_pestana_hotel.height * (i-1)

grupoScrollDer:insert(grupoPestanaHotel)

Did you meant anything like this?

What you say in the last part of your reply also has sense, so I’m going to try and tell you.

[alberto1]

Hi Andrew, 

Sorry for the delay!

Finally seems work a little better using timer.performWithDelay.

The problem is until all the items are processed, the scroll doesn’t runs in a fluid way.

This is the code:

local function myScroll(theItems) local items = theItems local i local bloque\_establecementos = 20 local desde = 0 local ata = bloque\_establecementos local quedan = #items local fin = #items scrollViewDer:insert(grupoScrollDer) local function buscar\_por\_bloques( desde) local de = desde local decontrol = desde for each\_item in db:nrows("SELECT a.id, a.nombre, a.categoria, a.calle, b.foto FROM hoteles AS a LEFT JOIN fotos AS b ON idTabla = a.id WHERE a.id IN ("..conxunto\_establecementos..") AND b.tabla='hoteles' AND b.orden=1 ORDER BY a.categoria DESC,a.nombre LIMIT "..de..", "..bloque\_establecementos) do local grupoPestanaHotel = display.newGroup() local fondo\_pestana\_hotel = widget.newButton{ id = each\_item.id, width = 704, height = 132, defaultFile = ruta\_imaxes.."fondo\_pestana\_hotel.png", onEvent = accionElixeHotel, } fondo\_pestana\_hotel:setReferencePoint(display.TopLeftReferencePoint) fondo\_pestana\_hotel.x = 0; fondo\_pestana\_hotel.y = 0 grupoPestanaHotel:insert(fondo\_pestana\_hotel) grupoPestanaHotel.x = 0 grupoPestanaHotel.y = fondo\_pestana\_hotel.height \* num\_establecementos grupoScrollDer:insert(grupoPestanaHotel) local arq = each\_item.foto local foto\_establecemento = display.newImageRect(tostring(id\_catalogo).."/"..arq,system.DocumentsDirectory,117,82) foto\_establecemento:setReferencePoint(display.TopLeftReferencePoint) foto\_establecemento.x = 22 foto\_establecemento.y = 26 grupoPestanaHotel:insert(foto\_establecemento) local marco\_foto = display.newImageRect(ruta\_imaxes.."ilustracion\_marcofotos\_x.png",117,82) marco\_foto:setReferencePoint(display.TopLeftReferencePoint) marco\_foto.x = 22; marco\_foto.y = 26 grupoPestanaHotel:insert(marco\_foto) local j,jj local num\_estrelas = tonumber(each\_item.categoria) if num\_estrelas \< 6 and que\_vexo == "hoteis" then for j=1,num\_estrelas do local estrelina = display.newImageRect(ruta\_imaxes.."ilustracion\_estrella\_x.png",35,34) estrelina:setReferencePoint(display.TopLeftReferencePoint) estrelina.xScale = 0.65 estrelina.yScale = 0.65 estrelina.x = 156 + 17\*(j-1) estrelina.y = 17 grupoPestanaHotel:insert(estrelina) end elseif num\_estrelas \> 7 and num\_estrelas \< 11 and que\_vexo == "apartamentos" then for jj=1,num\_estrelas-7 do local chavina = display.newImageRect(ruta\_imaxes.."ilustracion\_llave\_x.png",39,40) chavina:setReferencePoint(display.TopLeftReferencePoint) chavina.xScale = 0.50 chavina.yScale = 0.50 chavina.x = 156 + 20\*(jj-1) chavina.y = 17 grupoPestanaHotel:insert(chavina) end end local nome\_hotel = display.newText(each\_item.nombre,158,36,346,0,"TitilliumWeb-Bold",18) nome\_hotel:setTextColor(102,102,102) grupoPestanaHotel:insert(nome\_hotel) local enderezo\_hotel = display.newText(each\_item.calle,158,86,346,0,"TitilliumWeb-Regular",15) enderezo\_hotel:setTextColor(102,102,102) grupoPestanaHotel:insert(enderezo\_hotel) local ids = {} for fileira\_servizos in db:nrows("SELECT idIcono FROM iconosHotel WHERE idHotel="..each\_item.id) do table.insert(ids,fileira\_servizos.idIcono) end local ids\_aux = {} for k=1,#ids do for l=1,#correspondencia\_filtros do if ids[k] == correspondencia\_filtros[l] then table.insert(ids\_aux,l) end end end table.sort(ids\_aux) local posX = 670 for m=#ids\_aux,1,-1 do local ind = ids\_aux[m] local icona = display.newImageRect(ruta\_imaxes.."icono\_"..nomes\_filtros[ind].."\_x\_activo.png",17,17) icona:setReferencePoint(display.TopLeftReferencePoint) icona.x = posX icona.y = 19 grupoPestanaHotel:insert(icona) posX = posX - 18 end local linha\_separadora = display.newImageRect(ruta\_imaxes.."linea\_separadorofertas\_x.png",704,2) linha\_separadora:setReferencePoint(display.TopLeftReferencePoint) linha\_separadora.x = 0 linha\_separadora.y = 132 grupoPestanaHotel:insert(linha\_separadora) num\_establecementos = num\_establecementos + 1 decontrol = decontrol + 1 if (decontrol == de + bloque\_establecementos) and (ata \<= fin) and not ultimos then desde = desde + bloque\_establecementos ata = desde + bloque\_establecementos quedan = quedan - bloque\_establecementos if quedan \< bloque\_establecementos then ultimos = true end local timer\_colocando = timer.performWithDelay( 200, function() buscar\_por\_bloques(desde) end) table.insert(array\_timers,timer\_colocando) end end end buscar\_por\_bloques(desde) end

[alberto1]

Hi Andrew, 

Sorry for the delay!

Finally seems work a little better using timer.performWithDelay.

The problem is until all the items are processed, the scroll doesn’t runs in a fluid way.

This is the code:

local function myScroll(theItems) local items = theItems local i local bloque\_establecementos = 20 local desde = 0 local ata = bloque\_establecementos local quedan = #items local fin = #items scrollViewDer:insert(grupoScrollDer) local function buscar\_por\_bloques( desde) local de = desde local decontrol = desde for each\_item in db:nrows("SELECT a.id, a.nombre, a.categoria, a.calle, b.foto FROM hoteles AS a LEFT JOIN fotos AS b ON idTabla = a.id WHERE a.id IN ("..conxunto\_establecementos..") AND b.tabla='hoteles' AND b.orden=1 ORDER BY a.categoria DESC,a.nombre LIMIT "..de..", "..bloque\_establecementos) do local grupoPestanaHotel = display.newGroup() local fondo\_pestana\_hotel = widget.newButton{ id = each\_item.id, width = 704, height = 132, defaultFile = ruta\_imaxes.."fondo\_pestana\_hotel.png", onEvent = accionElixeHotel, } fondo\_pestana\_hotel:setReferencePoint(display.TopLeftReferencePoint) fondo\_pestana\_hotel.x = 0; fondo\_pestana\_hotel.y = 0 grupoPestanaHotel:insert(fondo\_pestana\_hotel) grupoPestanaHotel.x = 0 grupoPestanaHotel.y = fondo\_pestana\_hotel.height \* num\_establecementos grupoScrollDer:insert(grupoPestanaHotel) local arq = each\_item.foto local foto\_establecemento = display.newImageRect(tostring(id\_catalogo).."/"..arq,system.DocumentsDirectory,117,82) foto\_establecemento:setReferencePoint(display.TopLeftReferencePoint) foto\_establecemento.x = 22 foto\_establecemento.y = 26 grupoPestanaHotel:insert(foto\_establecemento) local marco\_foto = display.newImageRect(ruta\_imaxes.."ilustracion\_marcofotos\_x.png",117,82) marco\_foto:setReferencePoint(display.TopLeftReferencePoint) marco\_foto.x = 22; marco\_foto.y = 26 grupoPestanaHotel:insert(marco\_foto) local j,jj local num\_estrelas = tonumber(each\_item.categoria) if num\_estrelas \< 6 and que\_vexo == "hoteis" then for j=1,num\_estrelas do local estrelina = display.newImageRect(ruta\_imaxes.."ilustracion\_estrella\_x.png",35,34) estrelina:setReferencePoint(display.TopLeftReferencePoint) estrelina.xScale = 0.65 estrelina.yScale = 0.65 estrelina.x = 156 + 17\*(j-1) estrelina.y = 17 grupoPestanaHotel:insert(estrelina) end elseif num\_estrelas \> 7 and num\_estrelas \< 11 and que\_vexo == "apartamentos" then for jj=1,num\_estrelas-7 do local chavina = display.newImageRect(ruta\_imaxes.."ilustracion\_llave\_x.png",39,40) chavina:setReferencePoint(display.TopLeftReferencePoint) chavina.xScale = 0.50 chavina.yScale = 0.50 chavina.x = 156 + 20\*(jj-1) chavina.y = 17 grupoPestanaHotel:insert(chavina) end end local nome\_hotel = display.newText(each\_item.nombre,158,36,346,0,"TitilliumWeb-Bold",18) nome\_hotel:setTextColor(102,102,102) grupoPestanaHotel:insert(nome\_hotel) local enderezo\_hotel = display.newText(each\_item.calle,158,86,346,0,"TitilliumWeb-Regular",15) enderezo\_hotel:setTextColor(102,102,102) grupoPestanaHotel:insert(enderezo\_hotel) local ids = {} for fileira\_servizos in db:nrows("SELECT idIcono FROM iconosHotel WHERE idHotel="..each\_item.id) do table.insert(ids,fileira\_servizos.idIcono) end local ids\_aux = {} for k=1,#ids do for l=1,#correspondencia\_filtros do if ids[k] == correspondencia\_filtros[l] then table.insert(ids\_aux,l) end end end table.sort(ids\_aux) local posX = 670 for m=#ids\_aux,1,-1 do local ind = ids\_aux[m] local icona = display.newImageRect(ruta\_imaxes.."icono\_"..nomes\_filtros[ind].."\_x\_activo.png",17,17) icona:setReferencePoint(display.TopLeftReferencePoint) icona.x = posX icona.y = 19 grupoPestanaHotel:insert(icona) posX = posX - 18 end local linha\_separadora = display.newImageRect(ruta\_imaxes.."linea\_separadorofertas\_x.png",704,2) linha\_separadora:setReferencePoint(display.TopLeftReferencePoint) linha\_separadora.x = 0 linha\_separadora.y = 132 grupoPestanaHotel:insert(linha\_separadora) num\_establecementos = num\_establecementos + 1 decontrol = decontrol + 1 if (decontrol == de + bloque\_establecementos) and (ata \<= fin) and not ultimos then desde = desde + bloque\_establecementos ata = desde + bloque\_establecementos quedan = quedan - bloque\_establecementos if quedan \< bloque\_establecementos then ultimos = true end local timer\_colocando = timer.performWithDelay( 200, function() buscar\_por\_bloques(desde) end) table.insert(array\_timers,timer\_colocando) end end end buscar\_por\_bloques(desde) end