LiveCode LessonsHow To - Step-By-Step Guides To Tasks In LiveCode Using ImagesHow do you display an image by dragging it on to a stack?

How do you display an image by dragging it on to a stack?

This lesson will show you how to display an image file that is dragged on to a stack, for example from the desktop.

Creating the stack

Creating the stack

Firstly create a new stack and call it Image Viewer. Add an image area to the stack by dragging it over from the Tools Palette(1). This image area will be used to display the image that is dragged on to the stack. Call the image Display.(2)

Accepting a dragged image

The first stage is specifying that the image can accept dragged items and what action it should take. This is done by setting the dragAction property in the dragEnter message. In this case we want the image to copy the data that is dragged on to it.

Add the following handler to the image script.

on dragEnter

set the dragAction to "copy"

end dragEnter

Displaying the dragged image

Displaying the dragged image

To get information about what has been dragged on to the image we use the dragData property. The dragData is an array and in this case we are interested in the file that was dragged so we use the dragData["files"] to retrieve the filepath. We can then set the filename of our image to the path to the image file that was dragged and it will be displayed.

Add the following handler to the image script.

on dragDrop

set the filename of me to the dragData["files"]

end dragDrop

Alternatively you can set the text of the image to the content of the file using the URL keyword

on dragDrop

set the text of me to url ("binfile:" & the dragData["files"])

end dragDrop

6 Comments

Caz3000

This works for dragging and dropping photos from my computer, but when I tried to drag and drop and image displayed in my web browser it didn't work. Also, the image I dragged in from my computer resized the image display. Is there a follow-up lesson that explains how to deal with some of these issues?

Elanor Buchanan

This lesson only works for image files, the stack references the file to display the image. If you save an image from your browser then drag in onto your stack it should work.

If you do not want the image on the stack to resize you can lock the size and position of the image area by setting its lockLocation property to true.

I hope that helps.

Elanor

Anon

If I wanted to make an app that compiles different images to put onto the background of an iTouch for wallpaper, does this lesson apply to this kind of app building or is that another matter altogether?

Elanor Buchanan

Hi

I think you might find this lesson more useful, it explains how to select an image from the library on your mobile device.

http://lessons.runrev.com/s/lessons/m/4069/l/11489-How-do-I-get-an-image-from-my-mobile-photo-library

I hope that helps.

Elanor

Faisal

Hi Elanor,

Thanks for the article,

I want to have this drag and drop functionality in my app, in a way that if I drop a folder containing say 9 or 10 images, then it automatically creates new cards for each image.

Can that be done?

Best regards.

Faisal

Elanor Buchanan

Hi Faisal

Yes, if you drop a folder the path to the folder will be in the dragData["files"]. You can use the files function to get the contents of the dropped folder and create a card for each image using the create card command.

I hope that helps.

Elanor

Add your comment

E-Mail me when someone replies to this comment