dynamically change an image source

Got a LiveCode personal license? Are you a beginner, hobbyist or educator that's new to LiveCode? This forum is the place to go for help getting started. Welcome!

Moderators: FourthWorld, heatherlaine, Klaus, kevinmiller

Post Reply
Jwill
Posts: 2
Joined: Thu Jan 19, 2012 3:47 am

dynamically change an image source

Post by Jwill » Fri Jan 20, 2012 9:49 pm

I am trying to dynamically change an image source using the command:

Code: Select all

set Source of image "ImageName" to "/Users/jon/Desktop/banana.jpg"
This command doesn't seem to work, even though

Code: Select all

set Height of image "ImageName" to 200
works fine. Is there some little trick I am missing?

Thanks. Sorry if this is a repost, the search field above ignores all searches containing "image" because it is "too common a word"...

dunbarx
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 10320
Joined: Wed May 06, 2009 2:28 pm

Re: dynamically change an image source

Post by dunbarx » Fri Jan 20, 2012 10:25 pm

Do you mean "imageSource"?

Craig Newman

sturgis
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 1685
Joined: Sat Feb 28, 2009 11:49 pm

Re: dynamically change an image source

Post by sturgis » Fri Jan 20, 2012 10:36 pm

try "set the filename of image "imagename" to "Users/jon/Desktop/banana.jpg"
Jwill wrote:I am trying to dynamically change an image source using the command:

Code: Select all

set Source of image "ImageName" to "/Users/jon/Desktop/banana.jpg"
This command doesn't seem to work, even though

Code: Select all

set Height of image "ImageName" to 200
works fine. Is there some little trick I am missing?

Thanks. Sorry if this is a repost, the search field above ignores all searches containing "image" because it is "too common a word"...

cusingerBUSCw5N
Posts: 339
Joined: Wed Jul 11, 2012 9:24 pm

Re: dynamically change an image source

Post by cusingerBUSCw5N » Wed Aug 15, 2012 9:37 pm

I want to avoid changing images on multiple cards - so setting them dynamically seems like a great idea. But I am unsure how the images are stored. Do they have to be grabbed from the Internet (in which case the user would need to be connected) - or is there a way to include images when the app is created and use a standard file reference - like the one on this post.

...or is there another good way of handling changing images?

My issue is that I expect to change these buttons a zillion times before everyone is happy, and importing them and loading them onto each card seems like an overwhelming pain in the neck.

Thanks!

mwieder
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 3581
Joined: Mon Jan 22, 2007 7:36 am
Contact:

Re: dynamically change an image source

Post by mwieder » Wed Aug 15, 2012 9:46 pm

The way I deal with this situation is to have an "images" card that contains the source images.

Then from any place in the stack I can say

Code: Select all

set the imagesource of <control> to the id of image "blah" of card "images"

cusingerBUSCw5N
Posts: 339
Joined: Wed Jul 11, 2012 9:24 pm

Re: dynamically change an image source

Post by cusingerBUSCw5N » Wed Aug 15, 2012 10:10 pm

YES, but each time I change the image on the image card by importing a new one, the ID number changes... and I have to go back and reference the new number on all the cards.

I'm sure I'm doing it wrong, because it is very time consuming...

Maybe I need to put a script on the images card to load the newest versions... that way, I wouldn't have to change the reference numbers on the cards.

mwieder
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 3581
Joined: Mon Jan 22, 2007 7:36 am
Contact:

Re: dynamically change an image source

Post by mwieder » Wed Aug 15, 2012 10:23 pm

I don't understand... you keep importing images that you've already imported?

cusingerBUSCw5N
Posts: 339
Joined: Wed Jul 11, 2012 9:24 pm

Re: dynamically change an image source

Post by cusingerBUSCw5N » Wed Aug 15, 2012 10:31 pm

I imported an image (call this image1). Later, I modify the image.

If I name the modified one the same name as the original (image1), the old image1 continues to appear on LiveCode.....(because I figure that LiveCode has saved that image on its system and doesn't look for any new ones on my computer), so I end up importing the modified one. It creates a new ID number, so I have to go into the cards to enter the new ID number.

Since I am always tweaking images, this process is ridiculous.

mwieder
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 3581
Joined: Mon Jan 22, 2007 7:36 am
Contact:

Re: dynamically change an image source

Post by mwieder » Wed Aug 15, 2012 10:47 pm

OK - now I see what you're doing.

Code: Select all

set the filename of image "ImageName" to "/Users/jon/Desktop/banana.jpg"
should do the trick for you. That way you can change the actual image file on the disk and not have to change the reference to it or import it again.

Mark
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 5150
Joined: Thu Feb 23, 2006 9:24 pm
Contact:

Re: dynamically change an image source

Post by Mark » Wed Aug 15, 2012 10:56 pm

Hi,

No, LiveCode hasn't saved that image "on its system". There is no such "system". An image is either in the stack or on disk. If you import the image as a control, it is in the stack. The image will stay in the stack until you delete it. If the image is imported as a referenced control, then the image is on disk and not in the stack. The image will change as soon as you change its filename property. When you change the file on disk and want to use the same file again, re-load it by setting the filename property of the image object to empty and back to the original filepath. For example like this:

Code: Select all

put the filename of img 1 into myOrigFile
set the filename of img 1 to empty
wait 0 secs with messages
set the filename of img 1 to myOrigFile
Right now I don't know whether the 3rd line is actually necessary. I'd suggest you try it without that line first.

Kind regards,

Mark
The biggest LiveCode group on Facebook: https://www.facebook.com/groups/livecode.developers
The book "Programming LiveCode for the Real Beginner"! Get it here! http://tinyurl.com/book-livecode

jacque
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 7392
Joined: Sat Apr 08, 2006 8:31 pm
Contact:

Re: dynamically change an image source

Post by jacque » Wed Aug 15, 2012 11:58 pm

Another way to do it, if you're referencing imported images that are in the stack (i.e., not a filename on disk) is to just update the content of the image itself. Note that this will remove the original image and replace it with the new one:

put url ("binfile:"& path/to/file) into image "image1"

The original image ID will remain the same, so you don't need to alter any scripts that reference it. Here is an alternate syntax for the same thing:

set the text of image "image1" to url ("binfile:"&path/to/file)
Jacqueline Landman Gay | jacque at hyperactivesw dot com
HyperActive Software | http://www.hyperactivesw.com

shaosean
Posts: 906
Joined: Thu Nov 04, 2010 7:53 am

Re: dynamically change an image source

Post by shaosean » Thu Aug 16, 2012 6:02 am

Don't reference by ID then, use a naming system instead..

cusingerBUSCw5N
Posts: 339
Joined: Wed Jul 11, 2012 9:24 pm

Re: dynamically change an image source

Post by cusingerBUSCw5N » Thu Aug 16, 2012 6:21 am

So I have been playing around and have learned a couple of things:

1) LiveCode has Find and Replace under Edit. I haven't used it yet, but expect that it will solve much of my frustration in updating multiple cards as I tweak the application.

2) If I bring in a replacement image that is not exactly the same size, I have to adjust the size of the container (field) that it is in to match the new image size. (If an image is in a group, the problem is more complicated...so for now I'm skipping images that are in a group.) In order to resize the field, I need the image size. For some reason, LiveCode is able to recognize my new image to place it on the app, but when I try to import it to get the image size, it can't find the file. So that is perplexing.

I haven't tried the newest suggestions, but I currently have this code in preopen card:

repeat with k = 1 to the num of images of card "images" of stack "resources"
put the short name of image k on card "images" of stack "resources" into temp
--empty filenames
-- set the filename of image k on card "images" of stack "resources" to empty
-- set the filename of image k on card "images" of stack "resources" to "images/" & temp & ""
end repeat

---- I would have done a repeat loop to load it as well, but some of the new images are causing me grief (I think it has to do with being in a group), so at this point, I am listing all the new files that I want loaded. I've just done one image here:

set the filename of image "delete all pressed.png" on card "images" of stack "resources" to "images/delete all pressed.png"

## to get the width:
import paint from file "images/delete all pressed.png"
lock screen
import paint from file "images/delete all pressed.png"
put the formattedwidth of last img into tWidth
put the formattedheight of last img into tHeight
delete last img
unlock screen
set the width of button "key players" on card "home page" to tWidth


Unfortunately, it fails
Type import: can't open file, mask file or display
Object home page
Line import paint from file "images/delete all pressed.png"
Hint images/connected1.png

So I have the relative address wrong....

Mark
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 5150
Joined: Thu Feb 23, 2006 9:24 pm
Contact:

Re: dynamically change an image source

Post by Mark » Thu Aug 16, 2012 9:16 am

Hi,

In your last message, you're just telling us what you have tried without asking specific questions. I'm not sure what to tell you now, except that import paint will create a new image file with a new ID number while setting the text of an image is probably a better approach in this case because it won't create a new ID number.

Were any of the suggestions posted above useful?

Kind regards,

Mark
The biggest LiveCode group on Facebook: https://www.facebook.com/groups/livecode.developers
The book "Programming LiveCode for the Real Beginner"! Get it here! http://tinyurl.com/book-livecode

jacque
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 7392
Joined: Sat Apr 08, 2006 8:31 pm
Contact:

Re: dynamically change an image source

Post by jacque » Fri Aug 17, 2012 6:18 am

If you unlock the image (set its lockloc to false) it will spring to its native size when its content changes. Then you can just read its width and height directly. If your scripts require a locked image, then in your import script:

Code: Select all

set the lockloc of img "myimage" to false
put url ("binfile:" & <path/to/image>) into img "myimage"
set the lockloc of img "myimage" to true
The image will automatically center itself at its previous location. Since it looks like all your images are located on a separate card, their positions probably won't matter.

The same applies to groups. Unlocked groups will naturally encompass their entire content. This may disrupt your group layout, depending on where the image is located, but sometimes it works.

The path you provide for an image filename or an image import will be relative to the defaultfolder unless you provide a full path. If you use "images/myimage.png" and you haven't set the defaultfolder, the engine will look for your image in the current defaultfolder, which is the one holding the LiveCode application. The easiest way to get that path to work is to set the defaultfolder to same one holding the images before trying to import.
Jacqueline Landman Gay | jacque at hyperactivesw dot com
HyperActive Software | http://www.hyperactivesw.com

Post Reply