[Resolved] display.loadRemoteImage in tableview

[Spanky]

Hey Corona-users,

I don’t know if I should post this here in the “Network” section or in the “Widgets” section, I’ve just chosen for this one.

Ok, to start off, what am I trying to achieve? Using a json-file which got image-links, titles, descriptions, etc. in it, I want to display remoteImages (so images that are on the web, not on the device) and show them in a tableview. Showing the images ain’t the problem, but the positioning is at this moment. (Started with using local images, so just display.newImage which DID work). I’ve been trying for hours now to get them inside the tableview-rows but it just won’t work. To make things a bit clearer here is my code for rendering the rows of the tableview:

local function onRowRender( event )  
 local row = event.target  
 local rowGroup = event.view  
  
  
 filename[event.index] = string.match(news[event.index].thumbImg, "(%w+).png")  
  
 if display.contentScaleX \> 0.5 then  
 display.loadRemoteImage( news[event.index].thumbImg, "GET", networkListener2, filename[event.index] .. ".png", system.DocumentsDirectory, 0, 0 )  
 else  
 display.loadRemoteImage( news[event.index].thumbImg, "GET", networkListener2, filename[event.index] .. "-x2.png", system.DocumentsDirectory, 0, 0 )  
 end  
  
  
 local function networkListener2( event )  
 if ( event.isError ) then  
 print ( "Network error - download failed" )  
 else  
 event.target.alpha = 0  
 event.target.x = 0  
 event.target.y = 0  
 event.target:setReferencePoint(display.TopLeftReferencePoint)  
 transition.to( event.target, { alpha = 1.0 } )  
  
 rowGroup:insert( event.target )  
  
 end  
  
 print ( "RESPONSE: " .. event.response )  
 end  
  
  
 end  

The images are showing but all at the same place, so not in the rows they need to be. On top of that, when I slide the tableview, all content moves (titles etc.) but the images don’t. A screenshot of my problem:

http://postimage.org/image/xdamug54x/

I think it’s got something to do with the rowGroup:insert( event.target ) but because saving the even.target to a variable or something like that won’t work, it won’t let me insert it into the rowgroup then.

I hope there is someone that can help me out with this!

Thanks in advance!
René [import]uid: 189912 topic_id: 33379 reply_id: 333379[/import]

[Spanky]

I did fix the scrolling now, but the positioning problem still occurs.

I do have a possible solution for this myself but it’s a really dirty one so I rather not use it if there is a different way to fix it.

What I namely could do is adding the row-id (event.index in the onRowRender) to the end of the response and when I’m in the networklistener I cut it out so that I can identify in which row I need to be for positioning the image. However, as I already said, this is really dirty and if there is a nice way to get the row-id inside the networklistener I would really like to hear from it

With regards and again, thanks in advance,
René

[import]uid: 189912 topic_id: 33379 reply_id: 132585[/import]

[Spanky]

Got it! ^^

If someone else is struggeling with the same; my solution:

I put the networkListener out of the onRowRender function (so i had to make the rowGroup global too) and inserted the images to the matching rows later on.

The code (which will make it a lot clearer I hope) :

  
local rowGroup = {}  
 local rowItems = {}  
  
 local function networkListener( event )  
 if ( event.isError ) then  
 print ( "Network error - download failed" )  
 else  
 local img = event.target  
  
 if display.contentScaleX \> 0.5 then  
 check = string.match(event.response, "(%w+).png")  
 else  
 check = string.match(event.response, "(%w+)-x2.png")  
 end   
  
 targetId = rowItems[check]  
  
 img.alpha = 0  
 transition.to( img, { alpha = 1.0 } )  
  
 -- Insert the image in the matching row using the new table made by filename id   
 newslist.content.rows[targetId].view:insert ( img )  
  
 end  
  
 print ( "RESPONSE: " .. event.response )  
 end  
  
 -- onRender listener for the tableView  
 local function onRowRender( event )  
 local row = event.target  
 rowGroup = event.view  
  
 filename[event.index] = string.match(news[event.index].thumbImg, "(%w+).png")  
  
 rowItems[filename[event.index]] = event.index  
 print\_r(rowItems[filename[event.index]])  
  
 if display.contentScaleX \> 0.5 then  
 display.loadRemoteImage( news[event.index].thumbImg, "GET", networkListener, filename[event.index] .. ".png", system.DocumentsDirectory, 0, 0 )  
 else  
 display.loadRemoteImage( news[event.index].thumbImg, "GET", networkListener, filename[event.index] .. "-x2.png", system.DocumentsDirectory, 0, 0 )  
 end  
  
 end  

If you got questions or so, just ask and I will try to answer them

With regards,
René [import]uid: 189912 topic_id: 33379 reply_id: 132592[/import]

[peach_pellen]

Hey Spanky - glad to see you figured this out quite fast; thanks for updating with your solution for others!

Peach [import]uid: 52491 topic_id: 33379 reply_id: 132691[/import]

[rob]

In looking at your first code sample one of the problems is you’re setting the reference point after you position it. You need to set the reference point first, then set the x, y.

As for the later, the network listener can be inside that function and you don’t have to make the rowGroup global like that. The only thing I see is that Corona/Lua doesn’t like forward declared things, for instance your function was used before you defined it. Try moving the function above the calls to display.loadRemoteImage().

[import]uid: 199310 topic_id: 33379 reply_id: 132692[/import]

[Spanky]

Thanks for the replies Peach and Rob

@Rob; I realised I set the reference point at the wrong time indeed, so I changed that already myself. For the networklistener; Thanks! Because of messing with my code etc. I think this came out as the result. So thanks! ^^ [import]uid: 189912 topic_id: 33379 reply_id: 132732[/import]

[Spanky]

I did fix the scrolling now, but the positioning problem still occurs.

I do have a possible solution for this myself but it’s a really dirty one so I rather not use it if there is a different way to fix it.

What I namely could do is adding the row-id (event.index in the onRowRender) to the end of the response and when I’m in the networklistener I cut it out so that I can identify in which row I need to be for positioning the image. However, as I already said, this is really dirty and if there is a nice way to get the row-id inside the networklistener I would really like to hear from it

With regards and again, thanks in advance,
René

[import]uid: 189912 topic_id: 33379 reply_id: 132585[/import]

[Spanky]

Got it! ^^

If someone else is struggeling with the same; my solution:

I put the networkListener out of the onRowRender function (so i had to make the rowGroup global too) and inserted the images to the matching rows later on.

The code (which will make it a lot clearer I hope) :

  
local rowGroup = {}  
 local rowItems = {}  
  
 local function networkListener( event )  
 if ( event.isError ) then  
 print ( "Network error - download failed" )  
 else  
 local img = event.target  
  
 if display.contentScaleX \> 0.5 then  
 check = string.match(event.response, "(%w+).png")  
 else  
 check = string.match(event.response, "(%w+)-x2.png")  
 end   
  
 targetId = rowItems[check]  
  
 img.alpha = 0  
 transition.to( img, { alpha = 1.0 } )  
  
 -- Insert the image in the matching row using the new table made by filename id   
 newslist.content.rows[targetId].view:insert ( img )  
  
 end  
  
 print ( "RESPONSE: " .. event.response )  
 end  
  
 -- onRender listener for the tableView  
 local function onRowRender( event )  
 local row = event.target  
 rowGroup = event.view  
  
 filename[event.index] = string.match(news[event.index].thumbImg, "(%w+).png")  
  
 rowItems[filename[event.index]] = event.index  
 print\_r(rowItems[filename[event.index]])  
  
 if display.contentScaleX \> 0.5 then  
 display.loadRemoteImage( news[event.index].thumbImg, "GET", networkListener, filename[event.index] .. ".png", system.DocumentsDirectory, 0, 0 )  
 else  
 display.loadRemoteImage( news[event.index].thumbImg, "GET", networkListener, filename[event.index] .. "-x2.png", system.DocumentsDirectory, 0, 0 )  
 end  
  
 end  

If you got questions or so, just ask and I will try to answer them

With regards,
René [import]uid: 189912 topic_id: 33379 reply_id: 132592[/import]

[peach_pellen]

Hey Spanky - glad to see you figured this out quite fast; thanks for updating with your solution for others!

Peach [import]uid: 52491 topic_id: 33379 reply_id: 132691[/import]

[rob]

In looking at your first code sample one of the problems is you’re setting the reference point after you position it. You need to set the reference point first, then set the x, y.

As for the later, the network listener can be inside that function and you don’t have to make the rowGroup global like that. The only thing I see is that Corona/Lua doesn’t like forward declared things, for instance your function was used before you defined it. Try moving the function above the calls to display.loadRemoteImage().

[import]uid: 199310 topic_id: 33379 reply_id: 132692[/import]

[Spanky]

Thanks for the replies Peach and Rob

@Rob; I realised I set the reference point at the wrong time indeed, so I changed that already myself. For the networklistener; Thanks! Because of messing with my code etc. I think this came out as the result. So thanks! ^^ [import]uid: 189912 topic_id: 33379 reply_id: 132732[/import]

[guriek]

I am trying to make a loadRemoteImage work inside a TableView and I can’t get it to work. I’d rather not have the row group as global but cannot seem to get the row group or any previous declared variable accepted inside the listener of the loadremoteimage.

here is the code I try:

local function onEventsListRowRender( event )  
 local rowGroup = event.view  
 local row = event.target  
 local index = event.index  
 local eventid = event.id  
 local eventData = data.loadEventFromDB(eventid)  
 local imagename, imagetype = data.searchProfileAvatar(eventData.profile\_id);  
 local eventImage;  
  
 local rowBG = display.newRect(rowGroup, 6, 4, \_W-12, 82);  
 rowBG:setFillColor(255,255,255)  
 rowBG.strokeWidth = 1;  
 rowBG:setStrokeColor(180,180,180)  
  
 local function networkLoadRemoteImageListener( event )  
 eventImage = event.target   
 if ( event.isError ) then  
 print ( "Network error - download failed" )  
 else   
 eventImage.width = 75  
 eventImage.height = 75  
 eventImage:setReferencePoint(display.CenterLeftReferencePoint);  
 eventImage.x = 10;  
 eventImage.y = rowBG.y;  
 eventImage.alpha=0;  
 transition.to( eventImage, { alpha = 1.0 } )  
 rowGroup:insert(eventImage)  
 end  
 end  
 local remoteimageurl = "http://myurl/"..imagetype.."/"..imagename;  
 display.loadRemoteImage( remoteimageurl, "GET", networkLoadRemoteImageListener, imagename, system.CachesDirectory, 75, 75 )  
end  

And I keep getting
WARNING: Attempting to set property(y) with nil Error: attempt to call method ‘insert’ (a nil value)
Any ideas on how this should work? Can’t seem to find any documentation or examples. Thanks in advance [import]uid: 168845 topic_id: 33379 reply_id: 144184[/import]

[rob]

Have you upgraded to daily build 1034 or later? Those builds include widgets 2.0 and how you access the rows has changed. Please make sure that you download the latest documents to go with 1034 or 1035 and read the migration guide.
[import]uid: 199310 topic_id: 33379 reply_id: 144189[/import]

[guriek]

Thanks for your answer. I am aware of widget 2.0, but the app I am developing is in it’s final stage and I cannot afford to migrate just yet (right now I do not want to find myself immerse in other issues in case they appear on migration). My client expects to have the app released asap and will have to migrate in next version. [import]uid: 168845 topic_id: 33379 reply_id: 144201[/import]

[rob]

The reason I asked is the way row groups are done in 2.0 is different.

The way Lua scopes variables, both rowBG and rowGroup are available inside of your call back function.

If that listener function was outside of your rowRender function, then it would not be. There has to be something else going on. I don’t know how many rows you’re dealing with and if this happens while scrolling the list, but one of the issues with widgets 1.0 is that as rows scroll out of view, they are deleted. If that listener call back fires and that that row has been removed (to save memory), you will get things like rowGroup being nil.

I had to put in several tests to see if those were nil and just return since that row doesn’t really exist anyway.

Does this describe the behavior? Or is this happening with a row that is on screen? [import]uid: 199310 topic_id: 33379 reply_id: 144209[/import]

[guriek]

I am trying to make a loadRemoteImage work inside a TableView and I can’t get it to work. I’d rather not have the row group as global but cannot seem to get the row group or any previous declared variable accepted inside the listener of the loadremoteimage.

here is the code I try:

local function onEventsListRowRender( event )  
 local rowGroup = event.view  
 local row = event.target  
 local index = event.index  
 local eventid = event.id  
 local eventData = data.loadEventFromDB(eventid)  
 local imagename, imagetype = data.searchProfileAvatar(eventData.profile\_id);  
 local eventImage;  
  
 local rowBG = display.newRect(rowGroup, 6, 4, \_W-12, 82);  
 rowBG:setFillColor(255,255,255)  
 rowBG.strokeWidth = 1;  
 rowBG:setStrokeColor(180,180,180)  
  
 local function networkLoadRemoteImageListener( event )  
 eventImage = event.target   
 if ( event.isError ) then  
 print ( "Network error - download failed" )  
 else   
 eventImage.width = 75  
 eventImage.height = 75  
 eventImage:setReferencePoint(display.CenterLeftReferencePoint);  
 eventImage.x = 10;  
 eventImage.y = rowBG.y;  
 eventImage.alpha=0;  
 transition.to( eventImage, { alpha = 1.0 } )  
 rowGroup:insert(eventImage)  
 end  
 end  
 local remoteimageurl = "http://myurl/"..imagetype.."/"..imagename;  
 display.loadRemoteImage( remoteimageurl, "GET", networkLoadRemoteImageListener, imagename, system.CachesDirectory, 75, 75 )  
end  

And I keep getting
WARNING: Attempting to set property(y) with nil Error: attempt to call method ‘insert’ (a nil value)
Any ideas on how this should work? Can’t seem to find any documentation or examples. Thanks in advance [import]uid: 168845 topic_id: 33379 reply_id: 144184[/import]

[rob]

Have you upgraded to daily build 1034 or later? Those builds include widgets 2.0 and how you access the rows has changed. Please make sure that you download the latest documents to go with 1034 or 1035 and read the migration guide.
[import]uid: 199310 topic_id: 33379 reply_id: 144189[/import]

[guriek]

Thanks for your answer. I am aware of widget 2.0, but the app I am developing is in it’s final stage and I cannot afford to migrate just yet (right now I do not want to find myself immerse in other issues in case they appear on migration). My client expects to have the app released asap and will have to migrate in next version. [import]uid: 168845 topic_id: 33379 reply_id: 144201[/import]

[rob]

The reason I asked is the way row groups are done in 2.0 is different.

The way Lua scopes variables, both rowBG and rowGroup are available inside of your call back function.

If that listener function was outside of your rowRender function, then it would not be. There has to be something else going on. I don’t know how many rows you’re dealing with and if this happens while scrolling the list, but one of the issues with widgets 1.0 is that as rows scroll out of view, they are deleted. If that listener call back fires and that that row has been removed (to save memory), you will get things like rowGroup being nil.

I had to put in several tests to see if those were nil and just return since that row doesn’t really exist anyway.

Does this describe the behavior? Or is this happening with a row that is on screen? [import]uid: 199310 topic_id: 33379 reply_id: 144209[/import]

[guriek]

I am trying to make a loadRemoteImage work inside a TableView and I can’t get it to work. I’d rather not have the row group as global but cannot seem to get the row group or any previous declared variable accepted inside the listener of the loadremoteimage.

here is the code I try:

local function onEventsListRowRender( event )  
 local rowGroup = event.view  
 local row = event.target  
 local index = event.index  
 local eventid = event.id  
 local eventData = data.loadEventFromDB(eventid)  
 local imagename, imagetype = data.searchProfileAvatar(eventData.profile\_id);  
 local eventImage;  
  
 local rowBG = display.newRect(rowGroup, 6, 4, \_W-12, 82);  
 rowBG:setFillColor(255,255,255)  
 rowBG.strokeWidth = 1;  
 rowBG:setStrokeColor(180,180,180)  
  
 local function networkLoadRemoteImageListener( event )  
 eventImage = event.target   
 if ( event.isError ) then  
 print ( "Network error - download failed" )  
 else   
 eventImage.width = 75  
 eventImage.height = 75  
 eventImage:setReferencePoint(display.CenterLeftReferencePoint);  
 eventImage.x = 10;  
 eventImage.y = rowBG.y;  
 eventImage.alpha=0;  
 transition.to( eventImage, { alpha = 1.0 } )  
 rowGroup:insert(eventImage)  
 end  
 end  
 local remoteimageurl = "http://myurl/"..imagetype.."/"..imagename;  
 display.loadRemoteImage( remoteimageurl, "GET", networkLoadRemoteImageListener, imagename, system.CachesDirectory, 75, 75 )  
end  

And I keep getting
WARNING: Attempting to set property(y) with nil Error: attempt to call method ‘insert’ (a nil value)
Any ideas on how this should work? Can’t seem to find any documentation or examples. Thanks in advance [import]uid: 168845 topic_id: 33379 reply_id: 144184[/import]