Importing image for use as button icon
Moderators: FourthWorld, heatherlaine, Klaus, kevinmiller, robinmiller
Importing image for use as button icon
Hello, I'm hacking away trying to figure out a good way to use an image, specified by a path (as text) for a button's icon.
At first I tried to create an Image object, set the filename property, then set the icon of a button to the Image. This never seemed to work. I've never read it straight, but I'm gathering from different pages in the RunRev documentation that this won't work because the image is not imported. Is this correct?
When trying to use an imported image, I become stuck when trying to refer to the imported image from the script. I'd like to import an image using a path, and then set a button's icon to his image. Any pointers? Is there a good/preferred solution to this?
At first I tried to create an Image object, set the filename property, then set the icon of a button to the Image. This never seemed to work. I've never read it straight, but I'm gathering from different pages in the RunRev documentation that this won't work because the image is not imported. Is this correct?
When trying to use an imported image, I become stuck when trying to refer to the imported image from the script. I'd like to import an image using a path, and then set a button's icon to his image. Any pointers? Is there a good/preferred solution to this?
Hi mokogobo
To clarify this situation, there a three main ways of getting images into your Rev stack.
The first way is File > New Referenced Control. This will point to the image anywhere on your hard drive. (This is your preference of using a path, with RR setting it for you; unless I've missed your point entirely, there's no need to script an icon image reference at all). This is used when the images are very large and/or there are many of them. The disadvantage here is that you have to supply all the images separately to your stack/app to anyone else running it. And if this folder of images is moved, there's a good chance that Rev won't be able to find them, so you won't get your images showing up.
The second and third ways are very similar (two ways of doing the same thing, I suppose). The second way is File > Import as Control > Image File. This will place a thumbnail into the Image Library and place it onto your window. The third way is importing directly into the Image Library. (Although an important thing to understand here: it actually still imports the image onto your window, with a thumbnail reference only showing in the Library; if you delete the image from the window, the thumbnail goes as well. It's not so much a library of images as a library of thumbnails!
).These ways would be ideal for icon images as, even if you have thirty or fourty, its not going to add much to the file size at all, + they are tied in with your stack/app (so they can't get lost!).
So a suggested way to go here: select your button and make it transparent in the Inspector. Make its size the same as your image. Import your first icon image via Import As... or straight into the Image Library. Go to Icons and Border in the Inspector and select the image from the library.
If you have hassle with the image not showing properly (shunted up, for instance) uncheck Show Name. (In this instance, you'll have to include the name in the image). Repeat for hilite, and hover, etc if required.
Hope that's cleared the air a bit for you!
PS The initial image you bring in has to still be there in the window, seperate from its use in the icon. I tend to select it, send it to the back and for added "precaution" make it invisible.
PPS Just thought: I'm guessing that most of what I've written here you probably already know, and that there's a really good reason why you specifically need initial icons brought in by script although I personally can't see any situation where that would ever be required when there's a more straightforward way... (but stand to be corrected!)
To clarify this situation, there a three main ways of getting images into your Rev stack.
The first way is File > New Referenced Control. This will point to the image anywhere on your hard drive. (This is your preference of using a path, with RR setting it for you; unless I've missed your point entirely, there's no need to script an icon image reference at all). This is used when the images are very large and/or there are many of them. The disadvantage here is that you have to supply all the images separately to your stack/app to anyone else running it. And if this folder of images is moved, there's a good chance that Rev won't be able to find them, so you won't get your images showing up.
The second and third ways are very similar (two ways of doing the same thing, I suppose). The second way is File > Import as Control > Image File. This will place a thumbnail into the Image Library and place it onto your window. The third way is importing directly into the Image Library. (Although an important thing to understand here: it actually still imports the image onto your window, with a thumbnail reference only showing in the Library; if you delete the image from the window, the thumbnail goes as well. It's not so much a library of images as a library of thumbnails!

So a suggested way to go here: select your button and make it transparent in the Inspector. Make its size the same as your image. Import your first icon image via Import As... or straight into the Image Library. Go to Icons and Border in the Inspector and select the image from the library.
If you have hassle with the image not showing properly (shunted up, for instance) uncheck Show Name. (In this instance, you'll have to include the name in the image). Repeat for hilite, and hover, etc if required.
Hope that's cleared the air a bit for you!

PS The initial image you bring in has to still be there in the window, seperate from its use in the icon. I tend to select it, send it to the back and for added "precaution" make it invisible.
PPS Just thought: I'm guessing that most of what I've written here you probably already know, and that there's a really good reason why you specifically need initial icons brought in by script although I personally can't see any situation where that would ever be required when there's a more straightforward way... (but stand to be corrected!)
gyroscope,
Here's my situation: I have a SQLite database set up with the locations of many images (hundreds), and what I'd like to do is generate a button with the icon set as one of these images (don't worry about how I'm selecting an image from the database). Anyway, from the database, I get the path to the image (stored on the local machine), and at this point, I'd like to set a button's icon to that image. So, I can't predict which image will be chosen, but I know an image will be chosen.
Unless I'm mistaken, the methods you so clearly described (thanks for that, I'm still learning, and it all helps) are not dynamic, and for the number of images I'm choosing from, a huge amount of memory would be required. Anyway, I'd prefer they weren't included in the stack until loaded through script. And like I said, when trying to use an imported image, I become stuck when trying to refer to the imported image from the script (I don't think the import command returns or sets the image id anywhere to be referenced).
Any additional help will be appreciated.
Here's my situation: I have a SQLite database set up with the locations of many images (hundreds), and what I'd like to do is generate a button with the icon set as one of these images (don't worry about how I'm selecting an image from the database). Anyway, from the database, I get the path to the image (stored on the local machine), and at this point, I'd like to set a button's icon to that image. So, I can't predict which image will be chosen, but I know an image will be chosen.
Unless I'm mistaken, the methods you so clearly described (thanks for that, I'm still learning, and it all helps) are not dynamic, and for the number of images I'm choosing from, a huge amount of memory would be required. Anyway, I'd prefer they weren't included in the stack until loaded through script. And like I said, when trying to use an imported image, I become stuck when trying to refer to the imported image from the script (I don't think the import command returns or sets the image id anywhere to be referenced).
Any additional help will be appreciated.
-
- VIP Livecode Opensource Backer
- Posts: 977
- Joined: Sat Apr 08, 2006 7:47 am
- Contact:
Actually, you can achieve your goal by using an intermediate image object, which references the file on the hard disk, and then copying its data into the real image control whose ID you use for the icons.
Here's how to copy the data:
Hope this gets you closer to a solution,
Jan Schenkel.
Here's how to copy the data:
Code: Select all
## important: set the width and height before copying image/alphadata
set the width of image "ActualIcon" to the width of image "ReferencedImage"
set the height of image "ActualIcon" to the height of image "ReferencedImage"
## also make sure to set the imagedata before the alphadata
set the imageData of image "ActualIcon" to the imageData of image "ReferencedImage"
set the alphaData of image "ActualIcon" to the alphaData of image "ReferencedImage"
Jan Schenkel.
Quartam Reports & PDF Library for LiveCode
www.quartam.com
www.quartam.com
Hmmm, actually, I can't get this to work. Here's what I've got:Janschenkel wrote:Actually, you can achieve your goal by using an intermediate image object, which references the file on the hard disk, and then copying its data into the real image control whose ID you use for the icons.
Code: Select all
# Create Image object to temporarily store the inkey's icon
create invisible image "referenced_inkey_image"
set the filename of image "referenced_inkey_image" to inkey_image_path
set the width of image "referenced_inkey_image" to inkey_width
set the height of image "referenced_inkey_image" to inkey_height
# Create the actual icon Image for use with the inkey and copy ImageData from temporary Image
set the width of image "inkey_image" to the width of image "referenced_inkey_image"
set the height of image "inkey_image" to the height of image "referenced_inkey_image"
set the imageData of image "inkey_image" to the imageData of image "referenced_inkey_image"
set the alphaData of image "inkey_image" to the alphaData of image "referenced_inkey_image"
put the id of image "inkey_image" into t_id
# Set the icon property of the inkey buttons
set the icon of button id inkey_ids[1] to image id t_id
-
- VIP Livecode Opensource Backer
- Posts: 977
- Joined: Sat Apr 08, 2006 7:47 am
- Contact:
The 'icon' property expect the ID of the image, not a full reference.
Jan Schenkel.
Jan Schenkel.
Quartam Reports & PDF Library for LiveCode
www.quartam.com
www.quartam.com
-
- VIP Livecode Opensource Backer
- Posts: 977
- Joined: Sat Apr 08, 2006 7:47 am
- Contact:
Very odd - it works for me, though I don't use a newly created invisible image. Does it work if you use an off-screen image? (Off-screen as in: location -10000,-10000)
Jan Schenkel.
Jan Schenkel.
Quartam Reports & PDF Library for LiveCode
www.quartam.com
www.quartam.com