Jump to content

[TOPIC: topicViewTemplate]
[GLOBAL: userSmallPhoto]
Photo

image resize for remote images ?
Started by alzaabi98 Jun 19 2014 10:25 PM

13 replies to this topic
image resize graphic remote images
[TOPIC CONTROLS]
[/TOPIC CONTROLS]
[modOptionsDropdown]
[/modOptionsDropdown]
[reputationFilter]
[TOPIC: post.html]
#1

alzaabi98

[GLOBAL: userInfoPane.html]
alzaabi98
  • Starter
  • PipPipPipPipPipPip
  • 275 posts
  • Jedi

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 

 

 
 
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 )
 


 

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

 



[TOPIC: post.html]
#2

ksan

[GLOBAL: userInfoPane.html]
ksan
  • Pro
  • PipPipPipPipPipPip
  • 2,686 posts
  • Jedi

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.



[TOPIC: post.html]
#3

alzaabi98

[GLOBAL: userInfoPane.html]
alzaabi98
  • Starter
  • PipPipPipPipPipPip
  • 275 posts
  • Jedi

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:
[C]: ?
/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:
[C]: ?
/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>


[TOPIC: post.html]
#4

ksan

[GLOBAL: userInfoPane.html]
ksan
  • Pro
  • PipPipPipPipPipPip
  • 2,686 posts
  • Jedi

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


[TOPIC: post.html]
#5

alzaabi98

[GLOBAL: userInfoPane.html]
alzaabi98
  • Starter
  • PipPipPipPipPipPip
  • 275 posts
  • Jedi

still the same error..

 

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

then it thru the same error 



[TOPIC: post.html]
#6

alzaabi98

[GLOBAL: userInfoPane.html]
alzaabi98
  • Starter
  • PipPipPipPipPipPip
  • 275 posts
  • Jedi

anyone tried this for remote images ?

 

Abdul



[TOPIC: post.html]
#7

alzaabi98

[GLOBAL: userInfoPane.html]
alzaabi98
  • Starter
  • PipPipPipPipPipPip
  • 275 posts
  • Jedi

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

 

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

 

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

 

Reagrds

Abdul



[TOPIC: post.html]
#8

ksan

[GLOBAL: userInfoPane.html]
ksan
  • Pro
  • PipPipPipPipPipPip
  • 2,686 posts
  • Jedi

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



[TOPIC: post.html]
#9

Gremlin Interactive

[GLOBAL: userInfoPane.html]
Gremlin Interactive
  • Enterprise
  • PipPipPipPipPipPip
  • 699 posts
  • Jedi

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 ;)

[TOPIC: post.html]
#10

alzaabi98

[GLOBAL: userInfoPane.html]
alzaabi98
  • Starter
  • PipPipPipPipPipPip
  • 275 posts
  • Jedi

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



[TOPIC: post.html]
#11

ksan

[GLOBAL: userInfoPane.html]
ksan
  • Pro
  • PipPipPipPipPipPip
  • 2,686 posts
  • Jedi

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. 



[TOPIC: post.html]
#12

alzaabi98

[GLOBAL: userInfoPane.html]
alzaabi98
  • Starter
  • PipPipPipPipPipPip
  • 275 posts
  • Jedi

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



[TOPIC: post.html]
#13

ksan

[GLOBAL: userInfoPane.html]
ksan
  • Pro
  • PipPipPipPipPipPip
  • 2,686 posts
  • Jedi

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.



[TOPIC: post.html]
#14

alzaabi98

[GLOBAL: userInfoPane.html]
alzaabi98
  • Starter
  • PipPipPipPipPipPip
  • 275 posts
  • Jedi

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




[topic_controls]
[/topic_controls]



Also tagged with one or more of these keywords: image resize, graphic, remote images