zooming in on a displayed image ?

[Rob Cozens]

Bonjour Francis,

> I have a .gif file that I display in an image, using a
> button script (see below). The file displays correctly,
> but it is reduced in size to fit my stack window (which,
> in fact, is exactly what I wanted). However, it is too
> small to see the fine print (it is a Census file). I would
> sometimes like to zoom on it, and use a "hand" (as for
> PDF files) to explore the image, but within my image
> dimensions. Can this be done ?

The following might need to be modified to meet your design criteria 
(eg: I use a magnifying glass cursor instead of a hand), but it works 
for moi:

I have scripted an art portfolio stack with one card for each of my 
wife's creations.

There are one to six jpeg images of the same creation on a card.  They 
are all displayed as "thumbnail" images on the left hand side of the 
card.

On the right hand side of the card is the generic main image,  whose 
size depends on the current size of the card.  The name of the 
thumbnail image currently selected as the main image is stored in the 
card's expandedImage property.

Overlaying the generic main image is an rectangle graphic, "Picture 
Frame", which limits the visible rect of the main image.

Between the thumbnail images and the main image is a vertical 
scrollbar, "Zoom Bar".

There is also a group, "Focus Box", containing a rect graphic, 
"Position Box".

When a creation card opens, whichever of the thumbnail images that was 
last selected is displayed in the main image at a size that matches the 
visible portion of the screen under "Picture Frame", the thumbPosition 
of "Zoom Bar" is set to its startValue, and "Position Box" is set to 
the rect of the selected thumbNail image.

When "Zoom Bar"'s thumbPosition changes, the main image expands or 
shrinks (under "Picture Frame") accordingly and "Position Box" also 
changes size to show the portion of the thumbNail now visible in the 
main image.  Dragging "Position Box" around inside the thumbNail 
changes the visible portion of the main image.

					--In the stack script--

local displayWindow,lastBoxPosition

on preOpenStack
   get the rect of graphic "Picture Frame"
   add 20 to item 1 of it
   add 20 to item 2 of it
   subtract 20 from item 3 of it
   subtract 20 from item 4 of it
   put it into displayWindow
   [snip]
end preOpenStack

on preOpenCard -- 28 Feb 06:RCC
   [snip]
   get the number of this card
   if it > 2 and it <> the number of cards then -- it's a creation card
     get the expandedImage of this card
     put word 2 to -1 of it into targetImage
     get the rect of image it
     set the boundingRect of group "Focus Box" to it
     set the rect of graphic "Position Box" to it
     set the rect of image targetImage to displayWindow
     get the height of image targetImage
     set the height of scrollBar "Zoom Bar" to it
     set the startValue of scrollBar "Zoom Bar" to it
     set the thumbPosition of scrollBar "Zoom Bar" to it
     set the top of scrollBar "Zoom Bar" to the top of image targetImage
     show scrollBar "Zoom Bar"
   else
     [snip]
   end if
   set cursor to hand
end preOpenCard

on expandThisImage imageName -- 28 Feb 06:RCC
   if the showBorder of image imageName then -- image is already selected
     beep
     exit expandThisImage
   end if
   set cursor to watch
   lock screen
   get the expandedImage of this card
   set the showBorder of image it to false
   put word 2 to -1 of it into targetImage
   hide image targetImage
   put word 2 to -1 of imageName into targetImage
   show image targetImage
   set the rect of image targetImage to displayWindow
   set the expandedImage of this card to imageName
   set the showBorder of image imageName to true
   get the height of image targetImage
   set the startValue of scrollBar "Zoom Bar" to it
   set the thumbPosition of scrollBar "Zoom Bar" to it
   set the boundingRect of group "Focus Box" to the rect of image 
imageName
   set the rect of graphic "Position Box" to the rect of image imageName
   unlock screen
   set cursor to hand
end expandThisImage

on mouseUpInImage imageName -- 6 Nov 5:RCC
   if imageName = the expandedImage of this card then
     if the cursor is not 1202 then
       beep
       exit mouseUpInImage
     end if
     if the mouseLoc is within the rect of image imageName then
       play audioClip "click.au"
       setImageLoc imageName
     else
       set the loc of graphic "Position Box" to lastBoxPosition
       unlock cursor
       set cursor to hand
     end if
   else
     play audioClip "click.au"
     expandThisImage imageName
   end if
end mouseUpInImage

on mouseDownInImage imageName
     if imageName <> the expandedImage of this card or the rect of image 
imageName = the rect of graphic "Position Box" then exit 
mouseDownInImage
     put the loc of graphic "Position Box" into lastBoxPosition
     set the cursor to 1202
     lock cursor
end mouseDownInImage

on mouseMoveInImage -- 6 Nov 5:RCC
   if the cursor is not 1202 then exit mouseMoveInImage
   get the mouseLoc
   if it is within the rect of image (the expandedImage of this card) 
then
     lock screen
     set the loc of graphic "Position Box" to it
     keepObjectInBounds the id of graphic "Position Box",the 
boundingRect of group "Focus Box"
     -- don't update lastBoxPosition: want to return to original 
position before dragging
     unlock screen
   else
     set the loc of graphic "Position Box" to lastBoxPosition
     unlock cursor
     set cursor to hand
   end if
end mouseMoveInImage

on keepObjectInBounds controlId theBoundingRect
   get the left of control id controlId
   set the left of control id controlId to max(it,(item 1 of 
theBoundingRect))
   get the top of control id controlId
   set the top of control id controlId to max(it,(item 2 of 
theBoundingRect))
   get the right of control id controlId
   set the right of control id controlId to min(it,(item 3 of 
theBoundingRect))
   get the bottom of control id controlId
   set the bottom of control id controlId to min(it,(item 4 of 
theBoundingRect))
end keepObjectInBounds

on keepOutOfObject controlId objectRect
   get the left of control id controlId
   set the left of control id controlId to min(it,(item 1 of objectRect))
   get the top of control id controlId
   set the top of control id controlId to min(it,(item 2 of objectRect))
   get the right of control id controlId
   set the right of control id controlId to max(it,(item 3 of 
objectRect))
   get the bottom of control id controlId
   set the bottom of control id controlId to max(it,(item 4 of 
objectRect))
end keepOutOfObject

on setImageLoc imageName
   if the cursor is not 1202 then exit setImageLoc
   put the loc of graphic "Picture Frame" into frameLoc
   put the loc of graphic "Position Box" into focusLoc
   put the loc of image imageName into imageLoc
   put (the height of scrollBar "Zoom Bar")/(the height of image 
imageName) into sizeFactor
   put (the thumbPosition of scrollBar "Zoom Bar")/(the startValue of 
scrollBar "Zoom Bar") into sizeMultiplier
   put trunc(((item 1 of imageLoc)-(item 1 of 
focusLoc))*sizeFactor*sizeMultiplier) into horizontalOffset
   put trunc(((item 2 of imageLoc)-(item 2 of 
focusLoc))*sizeFactor*sizeMultiplier) into verticalOffset
   add horizontalOffset to item 1 of frameLoc
   add verticalOffset to item 2 of frameLoc
   put word 2 to -1 of imageName into targetImage
   set the loc of image targetImage to frameLoc
   keepOutOfObject (the id of image targetImage),displayWindow
   unlock cursor
   set cursor to hand
end setImageLoc

					--In the thumbNail image scripts--

on mouseUp
     mouseUpInImage (the short name of me)
end mouseUp

on mouseDown
   mouseDownInImage (the short name of me)
end mouseDown

on mouseMove
   mouseMoveInImage
end mouseMove

				--In the script of the group containing "Zoom Bar"--

on mouseUp -- 20 Dec 05
   set cursor to watch
   switch (the short name of the target)
   [snip]
   case "Zoom Bar"
     play audioClip "click.au"
     zoomImage
     break
   default
     beep
   end switch
end mouseUp

on zoomImage -- 22 Dec 05:Rcc
   lock screen
   put word 2 to -1 of the expandedImage of this card into targetImage
   get the thumbPosition of scrollBar "Zoom Bar"
   put the loc of image targetImage into oldLoc
   set the height of image targetImage to it
   set the width of image targetImage to trunc(it*1.5)
   set the loc of image targetImage to oldLoc
   put 1-((it-381)/1551) into perCentZoom
   put the loc of graphic "Position Box" into focusLoc
   set the height of graphic "Position Box" to 
max(4,trunc(perCentZoom*50))
   set the width of graphic "Position Box" to 
max(6,trunc(perCentZoom*75))
   get the rect of graphic "Picture Frame"
   add 20 to item 1 of it
   add 20 to item 2 of it
   subtract 20 from item 3 of it
   subtract 20 from item 4 of it
   if the thumbPosition of scrollBar "Zoom Bar" = the startValue of 
scrollBar "Zoom Bar" then
     set the rect of image targetImage to it
     set the rect of graphic "Position Box" to the rect of image (the 
expandedImage of this card)
   else
     keepOutOfObject (the id of image targetImage),it
     set the loc of graphic "Position Box" to focusLoc
     keepObjectInBounds the id of graphic "Position Box",the 
boundingRect of group "Focus Box"
   end if
   unlock screen
end zoomImage

The portfolio stack is 40+ MB; but it I could send you a stack with 
just one creation card.  eMail me privately if you want it.

>
> Second problem :
>
> My image has a "hide me" script which clears the
> window, so I can display other .gif files. If I then
> click on the same display button, my .gif file is
> now displayed in full size (but obviously only a
> part of it). Why is this ?
>

I believe this is because the image's imageData property is not reset 
to the smaller size when it is hidden.

Rob Cozens
CCW, Serendipity Software Company

"And I, which was two fooles, do so grow three;
Who are a little wise, the best fooles bee."

from "The Triple Foole" by John Donne (1572-1631)