[Resolved] Adding friends' Facebook pictures to a widget.tableview?

Solar2D General Questions/Discussion
#1

Hi all,
I have a leader board system set up so that users can see how their scores compare to their friends. It works as it should, names, scores etc are fetched via PHP and the ordering is also correct.
However I would also like to have each users profile picture next to their name, to make it easier for the user to see who each person is at a glance - but I’m not too sure how to go about it.

I’m using a widget table view to display the leaderboard, and in an ‘onRender’ function I am setting the text for each cell, and so I presumed the image would be set there also.

I am calling loadRemoteImage in the onRender function as such (where “thisID” is the Facebook ID for that particular user - I’ve printed this to make sure it’s correct for each cell):

display.loadRemoteImage("http://graph.facebook.com/".. thisID .."/picture",  
 "GET",  
 showImage,  
 "friend"..thisID..".png",   
 system.TemporaryDirectory, \_W / 20,row.height \* 0.5 )

Instead of the pictures rendering in the cell, they all render in the top left corner. It seems that they are printing in the correct x position (width / 20), and I’m guessing they are all being positioned one on top of the other at 0 +(row.height * 0.5).

How would I use this to properly display the images in a cell? My understanding is that calling loadRemoteImage saves the file (as “friend”…thisID…".png" in the Temp Dir I woud assume), can I save the image WITHOUT displaying it immediately - and then use the saved images in a newImageRect within the cell?

Apologies if it’s really obvious, but I haven’t had cause to use loadRemoteImage yet.

Thanks in advance everyone :slight_smile: [import]uid: 84115 topic_id: 28035 reply_id: 328035[/import]

#2

I haven’t tried doing this myself but logically I’d think that yes, the download simply hasn’t completed. Please let me know how you go with your counter fix.

Peach :slight_smile: [import]uid: 52491 topic_id: 28035 reply_id: 113463[/import]

#3

Hi Peach,

It worked perfectly, I’ve put the working solution into my 2nd reply so anyone with the same issue will hopefully find their way here. [import]uid: 84115 topic_id: 28035 reply_id: 113465[/import]

#4

That’s fantastic to hear!

Thanks for posting your solution too, I’m sure this will be found by others in the future and will be a great help to them.

Peach :slight_smile: [import]uid: 52491 topic_id: 28035 reply_id: 113609[/import]

#5

Wow! This is neat! I can’t wait to get that far in my study of Corona. I start studying tomorrow! :slight_smile:

Is there like whole sections dedicated to facebook and skype and such? Can’t wait to learn more!

Thanks!
[import]uid: 159663 topic_id: 28035 reply_id: 113633[/import]

#6

Skype - I don’t think so, to be honest I can’t think how you would use it in an app (unless you mean getting a friends list from it - in which case I imagine it would be overly complicated given that Skype uses contacts from Facebook and other sources).

Facebook: There’s a whole load of stuff you can do. Not sure what the limits are at the moment, but you can certainly login, get your / your friends details, post to walls, post photos…the usual.

There is code for a small sample app here:
http://developer.anscamobile.com/content/facebook

I would advise that you look through the references here before starting so that you have an idea of how to use the facebook.request() function:
http://developer.anscamobile.com/reference/facebook

Also, Peach made a nice simple tutorial a while back, it’s what I used when I started using Facebook in Corona (I highly recommend judging her for including a “Boyfriend Grade” field):
http://corona.techority.com/2011/04/21/updated-facebook-tutorial-for-iphone/
One thing to note (if you haven’t ever done any FB stuff before - if you have then apologies if I’m being patronising), is that you need to set up some things on https://developers.facebook.com before you can do anything else. I think it’s probably in the tutorials http://www.learningcorona.com/ but if not then a quick search for Corona Facebook tutorial should get you going. [import]uid: 84115 topic_id: 28035 reply_id: 113636[/import]

#7

As always, having asked the question I have discovered the answer myself immediately afterwards. I loaded the images in, and tracked how any I needed/have received.

  
local function networkListener()  
 \_G.NUM\_IMAGES\_REQUIRED = #\_G.FRIENDS\_TABLE  
  
 local function imageListener(event)  
 if ( event.isError ) then  
 print ( "Network error - download failed" )  
 else  
 imagesCount = imagesCount + 1  
  
 if imagesCount == \_G.NUM\_IMAGES\_REQUIRED then  
 imagesCount = 0  
 \_G.LEADERBOARD\_IS\_READY = true  
 end  
 end  
 end  
  
 for i = 1, #\_G.FRIENDS\_TABLE do  
 --index 6 is users Facebook ID  
 local thisID = \_G.FRIENDS\_TABLE[i][6]  
  
 network.download( "http://graph.facebook.com/".. thisID .."/picture", "GET",   
 imageListener, "friend"..thisID..".png", system.TemporaryDirectory )  
 end  
end

Since _G.LEADERBOARD_IS_READY is already used to state when to show the leaderboard, by moving it to a point where it is only set to true once all images have been loaded the leaderboard now appears once all images are ready to be displayed.

Then in the onRender() function for the list itself I use

local Image = display.newImageRect("friend"..\_G.FRIENDS\_TABLE[event.index][6]..".png",  
 system.TemporaryDirectory, \_W \* 0.1, \_W \* 0.1)  
Image( display.CenterLeftReferencePoint )  
Image.x, Image.y = 40, row.height \* 0.5  
rowGroup:insert( Image )

So if anyone else needs to know how to do the same thing, there you go :slight_smile:
[import]uid: 84115 topic_id: 28035 reply_id: 113445[/import]

#8

Edit: See above for the solution to this. [import]uid: 84115 topic_id: 28035 reply_id: 113461[/import]

#9

Hey @AlanPlantPot

Thanks for this, can’t use it yet as I’m just getting the basics down, speaking of, could you share how/what you manipulated in the base leaderboard code provided by Beebe to return a json dataset?

I’m building the exact same leaderboard design you describe and would really like to know what you changed to receive it as json.

Thanks!
Kurt [import]uid: 142918 topic_id: 28035 reply_id: 143369[/import]

#10

Hey @AlanPlantPot

Thanks for this, can’t use it yet as I’m just getting the basics down, speaking of, could you share how/what you manipulated in the base leaderboard code provided by Beebe to return a json dataset?

I’m building the exact same leaderboard design you describe and would really like to know what you changed to receive it as json.

Thanks!
Kurt [import]uid: 142918 topic_id: 28035 reply_id: 143369[/import]

#11

Hey @AlanPlantPot

Thanks for this, can’t use it yet as I’m just getting the basics down, speaking of, could you share how/what you manipulated in the base leaderboard code provided by Beebe to return a json dataset?

I’m building the exact same leaderboard design you describe and would really like to know what you changed to receive it as json.

Thanks!
Kurt [import]uid: 142918 topic_id: 28035 reply_id: 143369[/import]

#12

Hey @AlanPlantPot

Thanks for this, can’t use it yet as I’m just getting the basics down, speaking of, could you share how/what you manipulated in the base leaderboard code provided by Beebe to return a json dataset?

I’m building the exact same leaderboard design you describe and would really like to know what you changed to receive it as json.

Thanks!
Kurt [import]uid: 142918 topic_id: 28035 reply_id: 143369[/import]