image resize for remote images ?

[alzaabi98]

Hi,

i was trying to implement image resizing with direction in the following blog

http://coronalabs.com/blog/2014/06/10/tutorial-fitting-images-to-a-size/#comment-98422

it works fine with me using local images but i was not able to do it with remote images :

here is the code i am testing 

[lua]

local function fitImage( displayObject, fitWidth, fitHeight, enlarge )

  –

  – first determine which edge is out of bounds

  –

  local scaleFactor = fitHeight / displayObject.height 

  local newWidth = displayObject.width * scaleFactor

  if newWidth > fitWidth then

    scaleFactor = fitWidth / displayObject.width 

  end

  if not enlarge and scaleFactor > 1 then

    return

  end

  displayObject:scale( scaleFactor, scaleFactor )

end

local function networkListener( event )

    if ( event.isError ) then

        print ( “Network error - download failed” )

    else

        event.target.alpha = 0

        transition.to( event.target, { alpha = 1.0 } )

    end

    print ( "event.response.fullPath: ", event.response.fullPath )

    print ( "event.response.filename: ", event.response.filename )

    print ( "event.response.baseDirectory: ", event.response.baseDirectory )

end

local horse = display.loadRemoteImage( “http://omanevents.net/OmanEventsApp/oeImages/horse.png”, “GET”, networkListener, “horseCopy.png”, system.TemporaryDirectory)

fitImage( horse, 50, 50, false )

[/lua]

any idea why the code is not working. i am getting this error :

File: main.lua

Line: 10

Attempt to index local ‘displayObject’ (a nil value)

stack traceback:

main.lua:10: in function ‘fitImage’

main.lua:50: in main chunk

 

 

Regards

Abdul

[ksan]

It seems like you’re calling 

1. fitImage( horse, 50, 50, false )

right after the call to get the remote image. Since the getting of the remote image takes some time the fitImage function finds no file. Suggest calling fitImage() from the success part of your networkListener() function.

Hope this helps.

[alzaabi98]

i think you are right about the issue but moving fitImage call inside the newtworkListnere does not work as well. I tried to do delay as well but no luck… 

untime error

/Users/abdulaziz/Documents/CoronaProjects/Test Projects/Test- Image Resizing/main.lua:10: attempt to index local ‘displayObject’ (a nil value)

stack traceback:

/Users/abdulaziz/Documents/CoronaProjects/Test Projects/Test- Image Resizing/main.lua:10: in function ‘fitImage’

/Users/abdulaziz/Documents/CoronaProjects/Test Projects/Test- Image Resizing/main.lua:40: in function </Users/abdulaziz/Documents/CoronaProjects/Test Projects/Test- Image Resizing/main.lua:34>

(tail call): ?

?: in function <?:463>

Runtime error: /Users/abdulaziz/Documents/CoronaProjects/Test Projects/Test- Image Resizing/main.lua:10: attempt to index local ‘displayObject’ (a nil value)

stack traceback:

/Users/abdulaziz/Documents/CoronaProjects/Test Projects/Test- Image Resizing/main.lua:10: in function ‘fitImage’

/Users/abdulaziz/Documents/CoronaProjects/Test Projects/Test- Image Resizing/main.lua:40: in function </Users/abdulaziz/Documents/CoronaProjects/Test Projects/Test- Image Resizing/main.lua:34>

(tail call): ?

?: in function <?:463>

[ksan]

Inside networkListener( event ) try calling your function like this : 

local function networkListener( event ) if ( event.isError ) then print ( "Network error - download failed" ) else event.target.alpha = 0 fitImage( event.target, 50, 50, false ) transition.to( event.target, { alpha = 1.0 } ) end

[alzaabi98]

still the same error…

i works until the code  : fitImage( event.target, 50, 50, false )

then it thru the same error 

[alzaabi98]

anyone tried this for remote images ?

Abdul

[alzaabi98]

ksan,

I have solved the issue,  we have to use event.target inside the networkListener instead of using the variable horse. I think this is the way display.loadRemoteImage works. it looks you cant assign it to variable like normal display.newImage

[lua]

ocal function networkListener( event )
    if ( event.isError ) then
        print ( “Network error - download failed” )
    else
        --event.target.alpha = 0
        --transition.to( event.target, { alpha = 1.0 } )
        fitImage( event.target, 50, 50, false )
    end
 
    print ( "event.response.fullPath: ", event.response.fullPath )
    print ( "event.response.filename: ", event.response.filename )
    print ( "event.response.baseDirectory: ", event.response.baseDirectory )
 
end

[/lua]

anything you need to modify like x , y , xScale etc… you need to do it this way.

Reagrds

Abdul

[ksan]

Hi Abdul, 

I am happy to hear you got this one working. I am a little confused though. I suggested the same and you mentioned its still crashing. Was there anything else you needed to fix to get fitImage( event.target, 50, 50, false ) to work?

Thanks for sharing your solution. Regards,

Kerem

[Gremlin_Interactive]

Just an FYI for anyone else reading this thread. display.loadRemoteImage() does not return a display object, so a variable assigned to it will not be a display object as you might expect.

It will only return the display object in it’s callback function. It states this in the documentation too.

Happy coding

[alzaabi98]

Ksan,

the issues that I was using variable assigned to display.loadRemoteImage instead of event.target.  As mentioned in docs that you cant use variable with this function. I may not understand you at the beginning.  so

fitImage( event.target, 50, 50, false )  – works fine

fitImage( horse, 50, 50, false )  – does not work

One more point if you have experienced with display.loadRemoteImage … i want to load images into Tableview with many rows. i am worried about the space it used in the device as I noticed it saves them locally under temp folder. Assuming you are having Tableview with 100 rows each with an image, you will end up with 100 images downloaded under temp folder. Still i don’t know how to mange this efficiently and how it should behave when user refreshes the tableview. I know temp folder is mangled by device and it gets deleted when the device needs more memory. So what will happen if the user is viewing the tableview and device delete the temp at the same time ?? will that crash the app ??

 i have this question long back but no answer yet  ?

http://forums.coronalabs.com/topic/48069-does-displayloadremoteimage-always-need-to-be-saved-locally-in-the-device/

I hope someone can share his knowledge ?

Regards

Abdul

[ksan]

Great! Thanks for the clarification. I do have a similar use case in an app and I don’t use display.loadRemoteImage at all. I download the images first and then add them to my tableView. I keep my images in DocDir and don’t delete them but you could easily delete them too when not needed. Maybe this is an option for you to consider. 

[alzaabi98]

Ksan,

how do you download them and at which size ? then how do you place them in the tableview. Let us suppose the images are dynamic such as news … will this works fine ?

thanks

Abdul

[ksan]

I use network.download - http://docs.coronalabs.com/api/library/network/download.html 

the images in my case are pre-sized on my server. I only get thumbnails to be inserted into tableView. 

Simply create a display object in your onRowRender for the image relevant to the row.

[alzaabi98]

thanks ksan for sharing your experience.  I will ask more questions if you don’t mid

are the thumbnails done manually or dynamically and at what size ? what is the reasonable size you have experienced ?

when user clicks on the thumbnail picture ? what happened? do you have any touch/ tap events behind it to open in a large format or the device itself managed that ?

thanks

Abdul

[ksan]

It seems like you’re calling 

1. fitImage( horse, 50, 50, false )

right after the call to get the remote image. Since the getting of the remote image takes some time the fitImage function finds no file. Suggest calling fitImage() from the success part of your networkListener() function.

Hope this helps.

[alzaabi98]

i think you are right about the issue but moving fitImage call inside the newtworkListnere does not work as well. I tried to do delay as well but no luck… 

untime error

/Users/abdulaziz/Documents/CoronaProjects/Test Projects/Test- Image Resizing/main.lua:10: attempt to index local ‘displayObject’ (a nil value)

stack traceback:

/Users/abdulaziz/Documents/CoronaProjects/Test Projects/Test- Image Resizing/main.lua:10: in function ‘fitImage’

/Users/abdulaziz/Documents/CoronaProjects/Test Projects/Test- Image Resizing/main.lua:40: in function </Users/abdulaziz/Documents/CoronaProjects/Test Projects/Test- Image Resizing/main.lua:34>

(tail call): ?

?: in function <?:463>

Runtime error: /Users/abdulaziz/Documents/CoronaProjects/Test Projects/Test- Image Resizing/main.lua:10: attempt to index local ‘displayObject’ (a nil value)

stack traceback:

/Users/abdulaziz/Documents/CoronaProjects/Test Projects/Test- Image Resizing/main.lua:10: in function ‘fitImage’

/Users/abdulaziz/Documents/CoronaProjects/Test Projects/Test- Image Resizing/main.lua:40: in function </Users/abdulaziz/Documents/CoronaProjects/Test Projects/Test- Image Resizing/main.lua:34>

(tail call): ?

?: in function <?:463>

[ksan]

Inside networkListener( event ) try calling your function like this : 

local function networkListener( event ) if ( event.isError ) then print ( "Network error - download failed" ) else event.target.alpha = 0 fitImage( event.target, 50, 50, false ) transition.to( event.target, { alpha = 1.0 } ) end

[alzaabi98]

still the same error…

i works until the code  : fitImage( event.target, 50, 50, false )

then it thru the same error 

[alzaabi98]

anyone tried this for remote images ?

Abdul

[alzaabi98]

ksan,

I have solved the issue,  we have to use event.target inside the networkListener instead of using the variable horse. I think this is the way display.loadRemoteImage works. it looks you cant assign it to variable like normal display.newImage

[lua]

ocal function networkListener( event )
    if ( event.isError ) then
        print ( “Network error - download failed” )
    else
        --event.target.alpha = 0
        --transition.to( event.target, { alpha = 1.0 } )
        fitImage( event.target, 50, 50, false )
    end
 
    print ( "event.response.fullPath: ", event.response.fullPath )
    print ( "event.response.filename: ", event.response.filename )
    print ( "event.response.baseDirectory: ", event.response.baseDirectory )
 
end

[/lua]

anything you need to modify like x , y , xScale etc… you need to do it this way.

Reagrds

Abdul