How to Create a Thumbnail Image

Creating a 32 x 32 pixel thumbnail image of a control

Select the thumbnail source

Select the thumbnail source

In this case I want to create a thumbnail image of a knob control on my stack.

The source will be the id of the knob group.

Select an image name

Here I want to pick a unique name for the new image. I'm going to call it "tmp" followed by a number.

I want to make sure there's no image by that name already, so I'm going to cycle through numbers until I find an available slot.

put "tmp 1" into tImageName
repeat while there is an image tImageName
   add 1 to word 2 of tImageName
end repeat

Create a new image

create image tImageName
set the visible of image tImageName to true
set the resizequality of image tImageName to "best"

Take a snapshot of the source control

Take a snapshot of the source control

This is what does the work of making the image. Here pControlID is the id of the control I want to make a thumbnail from (the knob control group).

export snapshot from control id pControlID to image tImageName as PNG

Size the image to 32 x 32 pixels

Obviously you can use any size you want, but here I want a 32 x 32 pixel thumbnail image.

set the width of image tImageName to 32
set the height of image tImageName to 32

Make the new image size permanent

This step is somewhat nonintuitive. If you don't do this step then the width and height you just set will not stick, and the image will stay the original size. The next time you open the image it will spring back from the thumbnail size. You don't want this. Setting the imagedata makes the new size for the thumbnail permanent.

 

set the imagedata of image tImageName to the imagedata of image tImageName

Put the thumbnail in the clipboard for pasting

We don't really need to do this, but we might as well.

copy image tImageName

So here's a complete handler, ready to go. Pass the id of the control to the CreateThumbnail handler.

on mouseUp
   CreateThumbnail the id of group "knob"
end mouseUp

on CreateThumbnail pControlID
   local tImageName
   	
   -- pick a unique name for the image
   put "tmp 1" into tImageName
   repeat while there is an image tImageName
      add 1 to word 2 of tImageName
   end repeat
   -- create an image for the thumbnail
   create image tImageName
   set the visible of image tImageName to true
   set the resizequality of image tImageName to "best"
   export snapshot from control id pControlID to image tImageName as PNG
   set the width of image tImageName to 32
   set the height of image tImageName to 32
   -- make the new size permanent
   set the imagedata of image tImageName to the imagedata of image tImageName
   -- put in the clipboard for pasting
   copy image tImageName
end CreateThumbnail

7 Comments

Jessamy Goddard

Hi RunRev team,

I am trying to make a scrolling page of thumbnails that the user can press and get to a large image.

I am stuck on making the scrolling page of thumbnails.
I have tried all sorts - to no avail.

Please could you help?

Thankyou,
Jessamy

Hanson Schmidt-Cornelius

Hi Jessamy,

it depends on what platforms you want to include.
If you are intending to use the mobile devices, then I recommend looking at native controls. In particular have a look at 'mobileControlCreate "scroller"' in the dictionary. You should also look at mobileControlSet, mobileControlGet, mobileControlDo and mobileControlDelete. The following lesson shows you how to use native controls for text manipulation: http://lessons.runrev.com/s/lessons/m/4069/l/29112-how-do-i-use-native-text-controls-on-ios

If you are implementing the scrolling functionality on other or additional platforms, then I would have a look at the data grid: http://lessons.runrev.com/m/datagrid

Also don't forget to have a look around our forums and post there for more information: http://forums.runrev.com/

Kind Regards,

Hanson

Jessamy Goddard

Dear Hanson,
Thankyou for the help.
I actually made the scrolling thumbnails before you sent the reply.
I am now trying to make arrays of images.
If you can point me to a relevant example I would really appreciate it.

Thankyou again.
Jessamy.

Hanson Schmidt-Cornelius

Hi Jessamy,

there is no explicit lesson that describes how to create an array of images. There is one lesson that creates an 8-Puzzle board of buttons. You could have a look at that and expand it to the array dimensions you require. The buttons would be the thumbnails you want to position.
http://lessons.runrev.com/s/lessons/m/4071/l/15454
Have a look at the "createBoard" command.

Kind Regards,

Hanson

Jessamy Goddard

Thankyou Hanson. That was really helpful.
I am making good progress.!!
I will get back to you next time I get stuck.
You have been such a help.
All the best,
Jessamy.

Trevix

Putting a var, containing the data of a gif image, in a image control and then setting the imagedata to the imagedata, trows an error on iOS and OSX:
456,534,253,241 Object: does not have this property.
No error on Android.
put gPrefTF["UserPhoto"] into image "imagePlayer" of me
set the width of image "imagePlayer" of me to tWidth
set the height of image "imagePlayer" of me to theight
set the resizequality of image "imagePlayer" of me to "best"
set the imagedata of image "imagePlayer"of me to the imagedata of image "imagePlayer" of me

Panos Merakos

Hello Trevix,

This sounds like a bug. Could you file a report at quality.livecode.com, so that we investigate further? Thanks!

Panos
--

Add your comment

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