resizeStack Project

[johnmiller1950]

Greetings All,

I have a stack that contains an image. When I resize the stack, I would like the image to grow or shrink while maintaining the original height to width ratio as well as a set margin at the left and bottom of the stack. If I drag the stack from the side, the image grows past the bottom of the window. If I drag from the bottom it grows past the side of the stack. Dragging from the bottom right corner of the stack comes closer, but it isn't always very smooth.

Trying to adjust the height or width of the stack from inside the resize handler doesn't work because another "resizeStack" message is sent.

Locking and unlocking messages doesn't lock the "resizeStack" message.

Any ideas?

[FourthWorld]

If you can share the code we can refine it.

[johnmiller1950]

Here is my code:

Code: Select all

on resizeStack
   put the topleft of cd image "Open Notebook.jpg" into tlXX
   
   put the width of this stack - item 1 of tlXX - 10 into wXX
   put the height of this stack - item 2 of tlXX - the height of group "Navigation Buttons" - 34 into hXX
   
   put 590/801 into w2hR -- ORIGINAL WIDTH TO HEIGHT RATIO
   put 801/590 into h2wR -- ORIGINAL HEIGHT TO WIDTH RATIO
   
   if (hXX/wXX <= w2hR) then
      set the height of cd image "Open Notebook.jpg" to (wXX * w2hR)
      set the width of cd image "Open Notebook.jpg" to wXX
   else if (hXX/wXX >= w2hR) then
      set the height of cd image "Open Notebook.jpg" to hXX
      set the width of cd image "Open Notebook.jpg" to (hXX * h2wR)
   end if
   set the topleft of cd image "Open Notebook.jpg" to tlXX
   
   
   set the left of group "Logo" to 10
   set the top of group "Logo" to the bottom of cd image "Open Notebook.jpg" - 47
   
   set the right of group "Navigation Buttons" to the right of cd image "Open Notebook.jpg"
   set the top of group "Navigation Buttons" to the bottom of cd image "Open Notebook.jpg" + 17
end resizeStack

[FourthWorld]

Thank you. I took the liberty of putting your code in between <code> tags so it's easier to read and copy (see the toolbar above your post when editing - fifth icon from the left).

As for the challenge, do you want the stack to adjust size to fit the image proportions as it grows, or somehow restrict stack proportions to fit those of the image?

[johnmiller1950]

When I resize the stack, first I want the image to expand or shrink maintaining its original height to width ratio. Then I want to maintain ten pixels between the right side of the image and the right side of the stack. Also maintain a margin at the bottom equal to the height of my navigation buttons + 34.

[johnmiller1950]

What I really want is to either drag the side of the stack and have the height of the stack increase proportionally, or stage the bottom and have the width increase automatically.

[bn]

Hi John,

I made a stack that has a resizeStack handler in the card script. I focused on the resizing of the image.

Some notes: debugging resizeStack handlers is tricky since that is when the system takes over and the debugger does not help except if you split your code into the resizeStack handler and call another handler from the resize handler:

Code: Select all

on resizeStack pNewWidth, pNewHeight, pOldWidth, pOldHeight
   send "doResize pNewWidth, pNewHeight" to me in 20 milliseconds ## unblock for debugging
   --doResize pNewWidth, pNewHeight ## when debugging block this line
end resizeStack

This will only invoke the debugger after releasing the mouse from resizing. But still better than nothing at all. Once you are done debugging you switch to directly calling the "work" handler. See comments in the script snippet above.

Another thing to consider when doing a resize handler is that screen redraws are costly.

For example:

Code: Select all

set the width of object to tWidth
set the height of object to tHeight
set the topLeft of object to loc

are three screen refreshes.

Code: Select all

put the topleft of object into tRect
put item 1 of tRect + tWidth into item 3 of tRect
put item 2 of tRect + tHeight into item 4 of tRect
set the rect of object to tRect

That is only one screen refresh.


I modified your code but I confess that resizing of the image and keeping the aspect ratio made my head spinning. This seems to work.
Please also note that the width/height and ratios in the doResize script are hard coded and you would have to change that manually.

Code: Select all

on doResize pNewWidth, pNewHeight
   put the topleft of image "Open Notebook.jpg" into tlXX
   put tlXX into tRect
   
   put (pNewWidth - item 1 of tlXX) - 40 into wXX
   put (pNewHeight - item 2 of tlXX) - 40 into hXX
   
   put 480/640 into w2hR -- ORIGINAL WIDTH TO HEIGHT RATIO
   put 640/480 into h2wR -- ORIGINAL HEIGHT TO WIDTH RATIO
   
   put wXX * w2hR into tCurrWfromWidth
   put wXX * h2wR into tCurrHFromWidth
   
   put hXX * w2hR into tCurrWFromHeight
   put hXX * h2wR into tCurrHFromHeight
   
   put wXX / tCurrWfromWidth into tWCorr
   put hxx / tCurrHFromWidth into tHCorr
   
   if tCurrW > wxx then 
      put true into tWidthAdj
   else
      put false into tWidthAdj
   end if
   if tCurrH > hxx then
      put true into tHeightAdj
   else
      put false into tHeightAdj
   end if
   
   --if w2hR <= h2wR then
   if (wXX >= hXX) then
      put item 1 of tRect + (wXX) into item 3 of tRect
      
      put wXX * h2wR into tTempHeight
      if tTempHeight > hXX then
         put hXX * w2hR into tNewWidth
         put item 1 of tRect + tNewWidth into item 3 of tRect
         put item 2 of tRect + hXX into item 4 of tRect
      else
         put item 2 of tRect + (wXX * h2wR) into item 4 of tRect
      end if
      
   else 
      put hXX * w2hR into tTempWidth
      put hXX into tTempHeight
      if tTempWidth > wXX then
         put wXX into tTempWidth
         put tTempWidth * h2wR into tTempHeight
      end if
      
      put item 1 of tRect + tTempWidth into item 3 of tRect
      put item 2 of tRect + tTempHeight into item 4 of tRect
      
   end if
   
   if item 3 to 4 of tRect is empty then
      put item 1 of tRect + wXX into item 3 of tRect
      put item 2 of tRect + hXX into item 4 of tRect
   end if
   set the rect of image "Open Notebook.jpg" to tRect
   
   --   set the left of group "Logo" to 10
   --   set the top of group "Logo" to the bottom of cd image "Open Notebook.jpg" - 47
   
   --   set the right of group "Navigation Buttons" to the right of cd image "Open Notebook.jpg"
   --   set the top of group "Navigation Buttons" to the bottom of cd image "Open Notebook.jpg" + 17
end doResize

Kind regards
Bernd

ResizeStack Keep Image aspect ratio_2.livecode.zip

(105.87 KiB) Downloaded 69 times

[bn]

I made a stack that has a resizeStack handler in the card script. I focused on the resizing of the image.

I should not have posted the "unwashed" code. I now cleaned it up and should be clearer now:

Code: Select all

on doResize pNewWidth, pNewHeight
   put the topleft of image "Open Notebook.jpg" into tlXX
   put tlXX into tRect
   
   put (pNewWidth - item 1 of tlXX) - 40 into wXX
   put (pNewHeight - item 2 of tlXX) - 40 into hXX
   
   put 480/640 into w2hR -- ORIGINAL WIDTH TO HEIGHT RATIO
   put 640/480 into h2wR -- ORIGINAL HEIGHT TO WIDTH RATIO
   
   if (wXX >= hXX) then
      put wXX into tTempWidth
      put wXX * h2wR into tTempHeight
      
      if tTempHeight > hXX then
         put hXX * w2hR into tTempWidth
         put tTempWidth * h2wR into tTempHeight
      end if
      
      put item 1 of tRect + tTempWidth into item 3 of tRect
      put item 2 of tRect + tTempHeight into item 4 of tRect
   else 
      put hXX * w2hR into tTempWidth
      put hXX into tTempHeight
      
      if tTempWidth > wXX then
         put wXX into tTempWidth
         put tTempWidth * h2wR into tTempHeight
      end if
      
      put item 1 of tRect + tTempWidth into item 3 of tRect
      put item 2 of tRect + tTempHeight into item 4 of tRect
   end if
   
   set the rect of image "Open Notebook.jpg" to tRect
   
   --   set the left of group "Logo" to 10
   --   set the top of group "Logo" to the bottom of cd image "Open Notebook.jpg" - 47
   
   --   set the right of group "Navigation Buttons" to the right of cd image "Open Notebook.jpg"
   --   set the top of group "Navigation Buttons" to the bottom of cd image "Open Notebook.jpg" + 17
end doResize

and here is a current version of the stack

ResizeStack Keep Image aspect ratio_4.livecode.zip

(105.67 KiB) Downloaded 90 times

Kind regards
Bernd

[bn]

What I really want is to either drag the side of the stack and have the height of the stack increase proportionally, or stage the bottom and have the width increase automatically.

John,

If I understand correctly you can achieve that effect by holding down the option key or option and shift key while resizing using the mouse.
I suppose the alt-key should do the same on Windows as the option-key does on a Mac.

Make a new stack and place a field into the upper left corner.

Put this code into the card script

Code: Select all

on resizeStack pNewWidth, pNewHeight, pOldWidth, pOldHeight
   set the numberFormat to ".00"
   put "width/height: " & pNewWidth / pNewHeight into field 1
end resizeStack

Maybe that is what you are looking for. It works for me on a Mac LC 9.6.9. The ratio is pretty much constant.

Kind regards
Bernd