Using Images

LiveCode supports a wide variety of image formats, including the popular PNG and JPEG formats. You can display images in your stack, edit images and export images.

Importing Images

Importing Images

You can import images into your stack, the image becomes a LiveCode image object on the card.

To import an image choose File - > Import as Control -> Image file and select the image you want to import. Once the image is imported you can select it, move it and resize it just as you can with any other control.

Referencing Images

Referencing Images

You can also reference images by filename.

1. Create a stack

2. Add an image object to the stack

3. Open the Property Inspector of the image object

4. Click the folder icon next to the Source field, this allows you to select an image file stored on the file system

5. The referenced image is displayed in the image object

The advantage of referencing images by filename is that the size of your stack is not increased as the image is not a part of the stack. However if you want your users to be able to see the images you reference you will need to distribute them with your application.

Relative and Absolute Paths

You can also set the filename property of an object in script.

You can use both relative and absolute file paths for desktop applications, relative paths are always resolved in relation to the current folder. For example:

set the filename of image "logo" to "livecodelogo.png"

This works as long as the image is in the current folder. You can check what the current folder is by getting the value of the defaultFolder property.

Referencing Images on a Server

Referencing Images on a Server

You can also set the filename property of an image to an http url. Create a new stack, and drag on an image object and a button. Name the button "Show Image" and the image object "poster". In the script of the button enter:

on mouseUp
   set the filename of image "poster" to "http://lainopik.on-rev.com/posterchild.jpg"
end mouseUp

Apply the script, and switch to run mode. Click the button, and you should see the image displayed, and the Source referenced in the Property Inspector updated to the url.

Using the Paint Tools

In the IDE

Using the Paint Tools

You can use the LiveCode paint tools to create images:

1. Add an image area to the stack

2. Select one of the paint tools

3. The paint tool can be used within the image area

In a Standalone

In a standalone app your users will not have access to the Tool Palette but the paint tools can still be used to draw within an image control.

Set the Script of the image control to

on mouseEnter
   set the tool to "pencil tool"
end mouseEnter

on mouseLeave
   set the tool to "browse tool"
end mouseLeave

This will allow the user to draw a thin line, you can set the color of the line by setting the penColor property.

You can also use the brush tool, and set the brushColor and brush properties.

Exporting Images

You can export images from your stack using the url keyword.

put image "logo" into url ("binfile:" & specialFolderPath("desktop") & "/logo.png")

If you want to export an image in a format other than the format it is currently stored in you can use the export command.

export image "logo" to file "logo.jpg" as JPEG

Note: Referenced images cannot be exported to file using the url keyword, you can use the export command in this case.

24 Comments

bbecker

I am a beginner with LiveCode, creating an interactive map. The user hovers cursor over map elements to display images which appear in a set location in the right margin. So I am setting up transparent buttons, and imagine one image replacing another. I guess I'm not sure how to get the buttons to summon those images. When I import them as controls, the script works with the image on the actual card. As soon as I delete the image from the card and empty the image container, I get the "no such object" message. Thanks for any you can offer.

Hanson Schmidt-Cornelius

Hi Bbecker,

instead of deleting an image, you should try setting the icon of a button. The following lesson shows you how to create an animation by presenting a sequence of images on a button:

http://lessons.runrev.com/s/lessons/m/4071/l/44418-how-do-i-create-animated-overlays

Sections: "Animating the Space Ship" and "Animating the Rocket" have the code you are looking for.

You may also find the following lesson quite useful. It shows you how to create thumbnails:

http://lessons.runrev.com/s/lessons/m/4071/l/7084-how-to-create-a-thumbnail-image

Kind Regards,

Hanson

mahesh kumar

I am a beginner with LiveCode, want to crop an image placed in the image area. Please help me out

Hanson Schmidt-Cornelius

Hi Mahesh,

you can find a number of image processing lessons under the heading "Using Images" under the following link: http://lessons.runrev.com/m/4071
This should give you an initial overview over how to load and process images.

You can crop an image on a LiveCode stack by using the "crop" command. You can find more information about this command in the LiveCode Dictionary.

Kind Regards,

Hanson

Pierre

Hi,

I've looked through most of the stuff on images but couldn't find what I was looking for: I'm working on a card game and I need to work with about 60 images (hide, show, move, bring to front, send to back...).

Is there a way to way to load several images on startup as hidden? Also, if there are some examples of setting the image positions/states from code, that would be great.

Thanks,
Pierre

Hanson Schmidt-Cornelius

Hi Pierre,

If you want to do something on start up then you should put the relevant code in the 'preOpenStack' or 'preOpenCard' handlers. This ensures everything is ready when your app starts to run.

You can load several images and hide them or place them on a region of a card that is outside of the visible area. You could also have one image on each card and then navigate to each card, depending on what image you want to show. It really depends on what works best for your application.

Have a look at our lessons section on 'Working with files' for how to load the images. You will find a number of lessons there. The comments of the following lesson provide you with some information on loading text files. There is also a bit on loading images: http://lessons.runrev.com/s/lessons/m/4071/l/9600

The following lesson gives you some information on showing and hiding buttons. The syntax for showing and hiding images is very similar: http://lessons.runrev.com/s/lessons/m/4071/l/15454

Have a look at the following lesson on navigating between cards: http://lessons.runrev.com/s/lessons/m/4071/l/27527

I hope this covers all the information you need for your app.

Kind Regards,

Hanson

Pierre

That helps, thanks Hanson!

Best,
Pierre

esnir

Hi,

i want to make a option in which you are able to place pins on a map

so i want something like this

when you click on a button you will be able to place pins

and if you click then a place (doesnt matter where) you will place a pin(button)

can you help me?

thanks
Esnir

Hanson Schmidt-Cornelius

Hi Esnir,

on the first button you would use the "mouseUp" handler to indicate that pins are to be placed.

You may then want to have a background image on which users are to place pins. This could again have a "mouseUp" handler. This would then use the "clickLoc" function to return the X/Y coordinates of the location where the pin is to be placed.

Code may look something like this:

set the location of button "pin" to the clickLock

You may want to add a step that process or test the X/Y values first before passing them directly as coordinates for the "pin" button.

Kind Regards,

Hanson

Nick

Is there a way to export images to an animated gif file?

Hanson Schmidt-Cornelius

Hi Nick,

I am not aware of a built in means by which you can create animated gif files from LiveCode. I would suggest using image processing applications that are available on the desktop platform you are using.

I use the following tool for tasks like the one you are describing: http://www.imagemagick.org/

Kind Regards,

Hanson

Michel Bujardet

There is an error in the "Exporting images" section at the bottom of the tutorial. Took me some patience to understand why the example did not work.

As it stands, it saves a picture called "desktoplogo.png" inside the user folder. To save to the desktop, a slash should be added :

put image "logo" into url ("binfile:" & specialFolderPath("desktop") & "/logo.png")

Kosta

Hi there,

I have a problem with images in variables.

What I want to do is a card trick. 5 playing cards are displayed. I want to change the visible and the loacation of them.

So far
on mouseUp
set the visible of image "xx.png" to true

aeMoveTo the long ID of image "xx.png" to 120,140, "inOut"
end mouseUp
works fine.

Because I easy want to exchange the images I tried:

local tCard1

on mouseUp
put image "xx.png" into tCard1

set the visible of tCard1 to true
end mouseUp

does not work. Isn't it possible to put images into variables? If not, how can I put the name of an Image into a variable and use this?

I also tried:

local tCard1
on mouseUp
put "xx.png" into tCard1 (with " and without ")

set the visible of image "tCard1" to true (with and without ")

end mouseUp

nothing works. Any idea how to solve the problem?

Thanks an greeting

Kosta

Elanor Buchanan

Hi Kosta

I think you are almost there, what you want to do it to put the name of the image into a variable and then use that. Assuming xx is a variable and contains the changing name of the image

local tCard1

on mouseUp
put xx & ".png" into tCard1
set the visible of image tCard1 to true
end mouseUp

You can put a breakpoint in your code and use the variable watcher to check the contents of the variable tCard1, it should be 1.png or 2.png etc

I hope that helps.

Kind regards

Elanor

Kosta

Hi Elanor!

Awsome! This works perfectly! Thanks a lot!

Greetings

Kosta

carlos

in version 9.0.1 rc1 when i use select file and put it into a var (put it into tPath) and create an image in the filename section a get this : image id 122363 of card id 1067 of stack "C:/Users/user/Documents/**path/nameofapp.livecode" why ?

Elanor Buchanan

Hi Carlos

I haven't been able to recreate what you describe. I created a stack with an image control and a button with the script

on mouseUp
answer file "Choose a file"

if the result is not "cancel" then
put it into tPath
set the filename of image 1 to tPath
end if
end mouseUp

And it seemed to work ok, the filename property of the image is the path to the file I selected. Could you post your code here, along with your OS, and I'll look into it.

Kind regards,

Elanor

Gwen

Hi there,

I am trying to set the filename property of an image to an http URL. Thing is that it works fine on the Livecode Test environment, but does not load image when exported to Windows desktop application. I also tried exporting as Android application, and it works well on Android mobile devices with lower than version 9 but not on Android 9.

Below is the code I used:

on mouseUp
set the filename of image "img_test" to "http://myurl/image.png"
end mouseUp

Can anyone please help me out?

Thanks,

Gwen

Elanor Buchanan

Hi Gwen

On Windows it seems like LiveCode is not automatically including some of the libraries that are needed. To resolve this open the Standalone Application Settings, on the General pane choose "Select inclusions for the standalone application" then go to the Inclusions pane and select "Internet". If you are using Indy or Business you can also include tsNet.

On Android 9+ the issue is probably that you are using an http URL rather than an https URL. If you can use https instead that is probably the easiest solution. Otherwise there is a workaround described in this bug report.

https://quality.livecode.com/show_bug.cgi?id=22400

I hope that helps.

Kind regards

Elanor

Gwen

Hi Elanor,

Thank you for helping me out. My Windows desktop app is now working fine; and of course, I went for the easiest solution of using https for Android 9+.

Thanks again,
Gwen

trevix

Hello.
I have a folder, named "Icone" listed in the Copy File tab of standalone settings.
This folder contain a bunch of .png images that I use in the standalone.
Loading the standalone to iPhone (iOS 14,.4.2) or Android, the images are shown very well (each image object have the source property set to, for example, "Icone/rPulsante65.png").
In the iPad (hardware) instead I get a grey rectangle (like if the path was lost). On the simulator instead is ok.
Any suggestion? Is there something in iOS 15.5 that I should know?
iPad iOS 15.5 - iPHone iOS 14.4.2

Panos Merakos

Hello Trevix,

Hmm interesting. So, to summarize, you say that it works on:
- Android device
- iPhone device (which iOS version?)
- iOS simulator (which version?)

But it fails on an iPad device running iOS 15.5, is that correct?
Also, I take it you are accessing the images using specialFolderPath("resources"), is that correct?
Cheers
Panos

trevix

on android and iOS 14.4 no problems
on iOS 15, be it hardware or simulator, it shows a gray box.
No specialfolderpath has been used.
The folder (named "Icone") containining the images, is added to the Copy files pane of standalone settings.
The image object has the path "Icone/NameOfImage.png" in the property image name (the source field), thus referincing to the Icone folder.

Anyway this works on iOS 14.4 and not on iOS 15. Since my standalone has all its Icons referenced to different sizes of the same images, in order to have a better resolution with different screens, this could be a big problem for me.
I created a test stack that shows the problem. Should I create a Bug report?
Thanks
Trevix

Panos Merakos

Hello Trevix,

Yes please, do file a bug report and attach the stack there (or send it to me directly if it is confidential), and I'll have a look asap.

Cheers,
Panos
--

Add your comment

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.