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
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
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
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 mouseUpApply 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
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 mouseLeaveThis 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 JPEGNote: Referenced images cannot be exported to file using the url keyword, you can use the export command in this case.
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
--
Trevix
Hello.
My standalone has a standby loop where it shows a logo or, if has been downloaded, an image.
On oSX and iOS16 it works fine.
On Android 11 the image doesn't change.
My preopenstack is something like this:
if gPrefTF["UserPhoto"] is not empty then
put gPrefTF["UserPhoto"] into image "SplashImage" of card "LoopTvBox1" of me
else
set the filename of image "SplashImage" of card "LoopTvBox1" of me to the filename of image "LogoVertW.svg" of card "Mydeposito" of stack "Referi"
end if
where gPrefTF["UserPhoto"] contains the data of the replacement image.
I also tried:
set the text of image "SplashImage" of card "LoopTvBox1" of me to gPrefTF["UserPhoto"]
But it does not work.
What am I missing?
Thanks
Panos Merakos
Hello Trevix,
Your script looks correct. What is the format of the image that gPrefTF["UserPhoto"] holds its binary data? Is it one of gif/jpeg/png? It might be worth trying with the other 2 formats as well.
Also, does it work if you put the code in a button, and not in the preopenstack handler?
Kind regards,
Panos
--
Carlos CapDev
Hi Trevix
Maybe you need to modify the manifest because before Android 9 you can use HTTP connections and after need HTTPS but you can adapt this from the manifest and check the OS to change the connection like if os < 9 then put "http" into url else put "https" into url end if
:D
Panos Merakos
@Carlos
In the recent version of LiveCode in the Android settings we have added a setting "Allow http connections" so you no longer have to tweak the manifest.
Kind regards,
Panos
--
Trevix
no http involved, in my case.
It solved when I avoided to replace PNG and SVG on the same image control
Panos Merakos
Thanks for the update, Trevix.