Scaling an Image

Posted December 1 1998

Printer-friendly version

Clarion's image control makes it very easy to put an image, perhaps a photograph, on a window or on a report. You just put the image control, select the file you want displayed there, and adjust its size. But suppose you want to determine at run time what image to put? That is pretty easy too. You just use PROP:Text. For a window you use a statement like: ?Image1{PROP:Text} = 'Filename.JPG', and for a report Report$?Image1{PROP:Text} = 'Filename.JPG'. Now the control magically shows the new image.

So, what if you want to make something like a photo album, where some of the photos are in "portrait" format, and some are in "landscape" format. You know, you held the camera sideways when you snapped the picture. Perhaps some of the photos are cropped and aren't the original shape. When we set the text property of the image, the picture is forced into the shape of the control we put on the window (or report).

What we probably want to do is show the picture in some area on the window, and let the image control adapt itself to the shape of the picture. Fortunately, TopSpeed has made the image control very helpful. If we leave the height and width of the image control empty, or default, the image control will adopt the height and width of the photo when we set PROP:Text. Once we know the dimensions of the photo, we can scale it to fit in the space we have set aside for it. The basic strategy is simple:

1. Calculate how high the photograph should be for the width we want it to be.
2. Set the height and width of the photograph.

To figure how high the picture is going to be, we simply multiply the width the of the photograph by the aspect ratio, which is simply the height of the photo over the width. So we can assign the height of the image as:

?Image1{PROP:Height} = W * ?Image1{PROP:Height} / ?Image1{PROP:Width}

Then, we can just set the width of the image to what we wanted:

?Image1{PROP:Width} = W

If the photograph was tall and skinny, it won't fit in the space we intended, so we'll have to see if the scaled photograph is too tall. If it is, then we'll calculate the width of the photograph for the height we desire by multiplying the desired height by the reciprocal of the aspect ratio. This is pretty easy:

IF ?Image1{PROP:Height} > H
        ?Image1{PROP:Width} = H * ?Image1{PROP:Width} / ?Image1{PROP:Height}
        ?Image1{PROP:Height} = Y
        END

So what happens if we want to assign the image to a different photograph? If we just assigned the text of the image to the new photo, the photo would be squashed into the dimensions of the text control which might not be right for the new photo.. Fortunately, TopSpeed has again come to our rescue with PROP:NoWidth and PROP:NoHeight, which we can use to set the height and width of the image control back to default.

I have a simple 1-window demo program to demonstrate this. It lets you pick a directory, and will show all the files in that directory in a list box. Then you can select any to show. The work of showing the picture is done by the code the ?List1{EVENT:Accepted} embed, which looks like this:

GET( FileQueue, CHOICE(?List1))
SETCURSOR( CURSOR:Wait )
?Image1{PROP:NoHeight} = 1
?Image1{PROP:NoWidth} = 1
?Image1{PROP:Text} = FQ:Name
?Image1{PROP:Height} = |
       ?Region1{PROP:Width} * ?Image1{PROP:Height} / ?Image1{PROP:Width}
?Image1{PROP:Width} = ?Region1{PROP:Width}
IF ?Image1{PROP:Height} > ?Region1{PROP:Height}
  ?Image1{PROP:Width} = |
        ?Region1{PROP:Height} * ?Image1{PROP:Width} / ?Image1{PROP:Height}
  ?Image1{PROP:Height} = ?Region1{PROP:Height}
  END
SETCURSOR()

You see that it first sets the PROP:NoHeight and PROP:NoWidth so the new photograph doesn't get squished into the dimensions of the previous photo. Then it sets the PROP:Text to get the photo from the file. Then you see the scaling of the picture. I used SETCURSOR to make a wait cursor because it can take a long time for Clarion to read a JPG file.

Download the code (EXE version)

Download the code (ZIP, courtesy Carl Barnes)

Article comments

Post a comment

You must be logged on to post comments.