Jump to content

[TOPIC: topicViewTemplate]
[GLOBAL: userSmallPhoto]
Photo

get image and background images from URL
Started by mark036 Oct 04 2018 11:35 AM

12 replies to this topic
[TOPIC CONTROLS]
[/TOPIC CONTROLS]
[modOptionsDropdown]
[/modOptionsDropdown]
[reputationFilter]
[TOPIC: post.html]
#1

mark036

[GLOBAL: userInfoPane.html]
mark036
  • Observer

  • 24 posts
  • Corona SDK

I wanted to change my images daily for background etc.  Is there a way to have it pull from a URL so I can change it and not have to recode and submit the app?

 

Thanks again.



[TOPIC: post.html]
#2

roaminggamer

[GLOBAL: userInfoPane.html]
roaminggamer
  • Corona Geek

  • 7,093 posts
  • Corona SDK

Yes, there are at least three ways I can think of off the top of my head to pull images from a URL and display them.



[TOPIC: post.html]
#3

mark036

[GLOBAL: userInfoPane.html]
mark036
  • Observer

  • 24 posts
  • Corona SDK

have tried

<

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

display.loadRemoteImage( "http://coronalabs.com/images/coronalogogrey.png", "GET", networkListener, "coronalogogrey.png", system.TemporaryDirectory, 50, 50 )

>

changing the urls of course, but it won't launch I just get an error. 



[TOPIC: post.html]
#4

roaminggamer

[GLOBAL: userInfoPane.html]
roaminggamer
  • Corona Geek

  • 7,093 posts
  • Corona SDK

You shouldn't be pulling images from a site not your own because"

1. You can't be sure the site supports pulling the way you are.

2. You can't guarantee the image will always be there.

 

In this case, I get a 404 on that image address, so that is probably the issue/reason your code isn't working.

 

Anways, the three mechanism I can think of off the top of my head are:

All of these are well documented.

 

Lastly, I've shown folks how to do this before.  Here are two examples (I may have more but I can't remember right now)


Edited by roaminggamer, 04 October 2018 - 02:03 PM.


[TOPIC: post.html]
#5

roaminggamer

[GLOBAL: userInfoPane.html]
roaminggamer
  • Corona Geek

  • 7,093 posts
  • Corona SDK

I think I mentioned this before, but  you should download my entire git: https://github.com/roaminggamer/RG_FreeStuff

 

I have lots of useful examples in the AskEd folder.



[TOPIC: post.html]
#6

roaminggamer

[GLOBAL: userInfoPane.html]
roaminggamer
  • Corona Geek

  • 7,093 posts
  • Corona SDK

Please post back when you make some progress so we know you're able to get this working.



[TOPIC: post.html]
#7

Rob Miracle

[GLOBAL: userInfoPane.html]
Rob Miracle
  • Moderator

  • 24,714 posts
  • Corona Staff

@mark036, it's way more helpful for us if you post your actual code. For instance, you said you changed the URL and you're getting an error.

 

There are three things you can do to help us help you.

 

1. Post the actual code you're using.

2. Please use code formatting when posting code. Use the blue <> button in the row with Bold and Italics and paste your code in the popup window. Unformatted code is hard for people to read and figure out what you're doing.

3. If you get an error, tell us what the error is. We can't magically see your screen. It's best to again, use copy & paste the error from the Corona console log.

 

We want to help you, but we need to know more.

 

Rob



[TOPIC: post.html]
#8

mark036

[GLOBAL: userInfoPane.html]
mark036
  • Observer

  • 24 posts
  • Corona SDK

I have used the basic code from the balloon tap to make my background

local background = display.newImageRect( "image.png", 360, 570 )
background.x = display.contentCenterX
background.y = display.contentCenterY

I want to make this background changeable from my website.  So I tried

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

display.loadRemoteImage( "http://www.mywebsite/image.png", "GET", networkListener, "image.png", system.TemporaryDirectory, 50, 50 )

This puts the photo at full size in the foreground.  I can't find anything that says how to move it to the background or how to resize. 



[TOPIC: post.html]
#9

roaminggamer

[GLOBAL: userInfoPane.html]
roaminggamer
  • Corona Geek

  • 7,093 posts
  • Corona SDK

1. Use display groups for layering: https://docs.coronalabs.com/api/library/display/newGroup.html

 

2. Using scaling to 'resize': https://docs.coronalabs.com/api/type/DisplayObject/scale.html

 

3. When I download your image, it is "INVALID".  Something is either wrong with the image or your server.



[TOPIC: post.html]
#10

mark036

[GLOBAL: userInfoPane.html]
mark036
  • Observer

  • 24 posts
  • Corona SDK

Where do I put the URL?  This doesn't make sense. Is this for a background image?



[TOPIC: post.html]
#11

roaminggamer

[GLOBAL: userInfoPane.html]
roaminggamer
  • Corona Geek

  • 7,093 posts
  • Corona SDK

This demo shows you how to do it:

 

https://github.com/roaminggamer/RG_FreeStuff/raw/master/AskEd/2018/10/remoteBackImage.zip

io.output():setvbuf("no")
display.setStatusBar(display.HiddenStatusBar)
-- =====================================================

local cx     = display.contentCenterX
local cy     = display.contentCenterY
local fullw  = display.actualContentWidth
local fullh  = display.actualContentHeight
local left   = cx - fullw/2
local right  = cx + fullw/2
local top    = cy - fullh/2
local bottom = cy + fullh/2

-- Display groups for easy layering of content
local backgroundGroup    = display.newGroup()
local contentGroup       = display.newGroup()

-- Create an initial backround image so you can see what is happening
local initialBack = display.newImageRect( backgroundGroup, "protoBackX.png", 720, 1386 )
initialBack.x = cx
initialBack.y = cy
if( display.contentWidth > display.contentHeight ) then
   initialBack.rotation = 90
end


-- Add some other content in our 'contentGroup'
local tmp1 = display.newImageRect( contentGroup, "rg256.png", 256,256  )
local tmp2 = display.newImageRect( contentGroup, "corona256.png", 256,256  )
tmp1.x = cx
tmp1.y = cy - 200
tmp2.x = cx
tmp2.y = cy + 200

--
-- Code to download an image and make it the new background image
--

-- YOUR URL IS INVALID??  USING MINE FOR DEMO
--local imageURL = "http://www.mywebsite/image.png"
local imageURL = "https://raw.githubusercontent.com/roaminggamer/RG_FreeStuff/master/AskEd/2016/09/remoteFiles/images/cardClubs2.png"
local allowStretching = false

local function networkListener( event )
   --table.print_r(event)

   if ( event.isError ) then
      print ( "Network error - download failed" )
      initialBack:setFillColor(1,0,0)
   else
      -- remove old background  image
      display.remove( initialBack )
      initialBack = nil 

      -- Place new background  image in proper group
      local newBackground = event.target
      backgroundGroup:insert( newBackground )

      -- Scale it up to fully cover the screen
      local ratioW = fullw/newBackground.contentWidth
      local ratioH = fullh/newBackground.contentHeight

      if( allowStretching ) then
         newBackground:scale( ratioW, ratioH )
      else
         if( ratioW > ratioH ) then
            newBackground:scale( ratioW, ratioW )
         else
            newBackground:scale( ratioH, ratioH )
         end
      end
   end
   print ( "event.response.fullPath: ", event.response.fullPath )
   print ( "event.response.filename: ", event.response.filename )
   print ( "event.response.baseDirectory: ", event.response.baseDirectory )
end


-- Delay this for 2 seconds for the purpose of slowing this demo down
timer.performWithDelay( 2000, 
   function() 
      display.loadRemoteImage( imageURL, "GET", networkListener, "image.png", 
                               system.TemporaryDirectory, cx, cy )
   end )



[TOPIC: post.html]
#12

Rob Miracle

[GLOBAL: userInfoPane.html]
Rob Miracle
  • Moderator

  • 24,714 posts
  • Corona Staff

You put the URL where you have it in display.loadRemoteImage(). One you have the image loaded in your listener function, you can use the .toBack() API (http://docs.coronalabs.com/api/type/DisplayObject/toBack.html) to send the image to the back of the display group.

 

Now that said, depending on the success of your app and how often it runs, you may crush your server downloading the image over and over. 

 

You might find it more practical to see if the image exists, then perhaps do a network.request() using the "HEAD" verb and check to see if the file is newer on the server as it is newer than the file you have before downloading it. You might want to consider using something beside display.loadRemoteImage() because of this.

 

Rob



[TOPIC: post.html]
#13

roaminggamer

[GLOBAL: userInfoPane.html]
roaminggamer
  • Corona Geek

  • 7,093 posts
  • Corona SDK

If you're going to be using a HTTP URL and if you intend to release for iOS, you need to set up ATS: https://docs.coronalabs.com/guide/hardware/appleATS/index.html




[topic_controls]
[/topic_controls]